{"_id":"@anouar_sbia/window-frame-designer","_rev":"1-e8a7d0930a9867d394e5a4b4b3c7394c","name":"@anouar_sbia/window-frame-designer","dist-tags":{"latest":"0.0.11"},"versions":{"0.0.1":{"name":"@anouar_sbia/window-frame-designer","version":"0.0.1","keywords":["react","window","frame","designer","konva","canvas"],"author":"","license":"MIT","_id":"@anouar_sbia/window-frame-designer@0.0.1","maintainers":[{"name":"anouar258","email":"sbiaanouar@gmail.com"}],"dist":{"shasum":"869c3da1ea6331f6046cbced0207feb5f2d8d22e","tarball":"https://registry.npmjs.org/@anouar_sbia/window-frame-designer/-/window-frame-designer-0.0.1.tgz","fileCount":4,"integrity":"sha512-Ehlvix1uXytef5+PYZu2JnOVrXc1Wn0Lu4OccgYyHkM6NVawx/J82IzIFwHkXMi/07F+Vy67qphLeZoGrWpukA==","signatures":[{"sig":"MEUCIC8X6hIdy8yep+7pEpvJB5L8bfc+CB9G8otsdgk6t+HHAiEAmOfNb+K9qWrx2p3TA6M0Ia7YgtkcR2nrrNCsXLWk6is=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":774143},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","scripts":{"dev":"vite","lint":"eslint .","build":"tsc && vite build","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"anouar258","email":"sbiaanouar@gmail.com"},"_npmVersion":"10.2.4","description":"A React component library for designing window frames with recursive divisions","directories":{},"_nodeVersion":"20.11.0","dependencies":{"konva":"^9.3.3","react-konva":"^18.2.10","lucide-react":"^0.344.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.2","react":"^18.3.1","eslint":"^9.9.1","globals":"^15.9.0","postcss":"^8.4.35","react-dom":"^18.3.1","@eslint/js":"^9.9.1","typescript":"^5.5.3","tailwindcss":"^3.4.1","@types/react":"^18.3.5","autoprefixer":"^10.4.18","vite-plugin-dts":"^3.7.3","@types/react-dom":"^18.3.0","typescript-eslint":"^8.3.0","@vitejs/plugin-react":"^4.3.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/window-frame-designer_0.0.1_1733796074920_0.5635629122628252","host":"s3://npm-registry-packages-npm-production"}},"0.0.11":{"name":"@anouar_sbia/window-frame-designer","version":"0.0.11","description":"A React component library for designing window frames with recursive divisions","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","style":"dist/index.css","scripts":{"dev":"vite","build":"tsc && vite build","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0"},"dependencies":{"konva":"^9.3.3","lucide-react":"^0.344.0","react-konva":"^18.2.10"},"devDependencies":{"@eslint/js":"^9.9.1","@types/react":"^18.3.5","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.1","autoprefixer":"^10.4.18","eslint":"^9.9.1","eslint-plugin-react-hooks":"^5.1.0-rc.0","eslint-plugin-react-refresh":"^0.4.11","globals":"^15.9.0","postcss":"^8.4.35","react":"^18.3.1","react-dom":"^18.3.1","tailwindcss":"^3.4.1","typescript":"^5.5.3","typescript-eslint":"^8.3.0","vite":"^5.4.2","vite-plugin-dts":"^3.7.3"},"keywords":["react","window","frame","designer","konva","canvas"],"author":"","license":"MIT","_id":"@anouar_sbia/window-frame-designer@0.0.11","_nodeVersion":"20.11.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-4gM2UIL+ELIhqA/miilLgMZyh/LKULP7AtEO/Xt1gmfSPrpBseZXMO/P63G6Vhladmuqgdlne8dcaS8mjzk3lw==","shasum":"27fdc8a715c30ca385edd2c8c95ac7604d5fc49e","tarball":"https://registry.npmjs.org/@anouar_sbia/window-frame-designer/-/window-frame-designer-0.0.11.tgz","fileCount":5,"unpackedSize":783584,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJvCy5ILS8GVUBR5CjK5JbTdXMCKOXyzr3745luGLKWAIhAIOAZjjCvdenKWLrfpsPknp7mHaJGc6ziwhtWd/M3Tfj"}]},"_npmUser":{"name":"anouar258","email":"sbiaanouar@gmail.com"},"directories":{},"maintainers":[{"name":"anouar258","email":"sbiaanouar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/window-frame-designer_0.0.11_1733797827533_0.9105888109496296"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-10T02:01:14.820Z","modified":"2024-12-10T02:30:28.003Z","0.0.1":"2024-12-10T02:01:15.197Z","0.0.11":"2024-12-10T02:30:27.800Z"},"license":"MIT","keywords":["react","window","frame","designer","konva","canvas"],"description":"A React component library for designing window frames with recursive divisions","maintainers":[{"name":"anouar258","email":"sbiaanouar@gmail.com"}],"readme":"# React Window Frame Designer\n\nA React component library for designing window frames with recursive divisions. This library provides a powerful and intuitive interface for creating complex window frame designs with support for horizontal and vertical divisions, different frame types, and precise measurements.\n\n## Features\n\n- Interactive canvas-based window frame designer\n- Support for recursive horizontal and vertical divisions\n- Multiple frame types (empty, single sash, double sash)\n- Real-time measurements in pixels and millimeters\n- Undo/redo functionality\n- Customizable frame colors and thickness\n- Built with React, Konva, and TypeScript\n\n## Installation\n\n```bash\nnpm install @anouar_sbia/window-frame-designer\n```\n\n## Usage\n\n```tsx\nimport { WindowDesigner } from \"@anouar_sbia/window-frame-designer\";\nimport type { WindowDesign } from \"@anouar_sbia/window-frame-designer\";\n\nfunction App() {\n  const handleDesignChange = (design: WindowDesign) => {\n    console.log(\"Design updated:\", design);\n  };\n\n  return (\n    <WindowDesigner\n      initialWidth={700}\n      initialHeight={500}\n      initialColor=\"#4a5568\"\n      initialThickness={10}\n      onChange={handleDesignChange}\n    />\n  );\n}\n```\n\n## Props\n\n| Prop             | Type                           | Default   | Description                        |\n| ---------------- | ------------------------------ | --------- | ---------------------------------- |\n| initialWidth     | number                         | 700       | Initial width of the window frame  |\n| initialHeight    | number                         | 500       | Initial height of the window frame |\n| initialColor     | string                         | '#4a5568' | Initial color of the frame         |\n| initialThickness | number                         | 10        | Initial thickness of the frame     |\n| className        | string                         | ''        | Additional CSS classes             |\n| onChange         | (design: WindowDesign) => void | undefined | Callback when design changes       |\n\n## Types\n\n```typescript\ninterface WindowDesign {\n  frame: Frame;\n}\n\ninterface Frame {\n  id: string;\n  position: Point;\n  size: Size;\n  color: string;\n  thickness: number;\n  children: Frame[];\n  selected: boolean;\n  frameType: FrameType;\n}\n\ntype FrameType = \"empty\" | \"sash\" | \"double-sash\";\n\ninterface Point {\n  x: number;\n  y: number;\n}\n\ninterface Size {\n  width: number;\n  height: number;\n}\n\ninterface DivisionConfig {\n  count: number;\n  gap: number;\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}