{"_id":"@asunited.com.sg/floor-planner","name":"@asunited.com.sg/floor-planner","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@asunited.com.sg/floor-planner","version":"1.0.1","description":"A plug-and-play 2D/3D floor planner React component with wall drawing, furniture, export (PNG/SVG/JSON), undo/redo and keyboard shortcuts.","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","type-check":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"immer":"^10.1.1","lucide-react":"^0.383.0","sonner":"^1.5.0","three":"^0.165.0","uuid":"^9.0.0","zustand":"^4.5.2"},"devDependencies":{"@types/react":"^18.3.3","@types/react-dom":"^18.3.0","@types/three":"^0.165.0","@types/uuid":"^9.0.8","tsup":"^8.5.1","typescript":"^5.4.5"},"keywords":["floor-planner","react","2d","3d","canvas","three.js","blueprint","floorplan","architecture"],"author":{"name":"AS United Pte Ltd"},"license":"UNLICENSED","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"repository":{"type":"git","url":"git+https://github.com/AS-United/asu-floorplanner.git"},"gitHead":"ad588b8fbfd872dca07eb4f3faccf03ac3e5f263","_id":"@asunited.com.sg/floor-planner@1.0.1","bugs":{"url":"https://github.com/AS-United/asu-floorplanner/issues"},"homepage":"https://github.com/AS-United/asu-floorplanner#readme","_nodeVersion":"22.19.0","_npmVersion":"11.8.0","dist":{"integrity":"sha512-lFCP/BbaTP/WRgOQNND5qCmzwj4QuR8spLLdC890cRMEvA7F0sFKFgB5Oj21My5tn2Y1fkDRctLrJ3mMTisUug==","shasum":"ecae680ddbd7de5cfb2ff5db7ff8904b97b0d3cc","tarball":"https://registry.npmjs.org/@asunited.com.sg/floor-planner/-/floor-planner-1.0.1.tgz","fileCount":8,"unpackedSize":868447,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHl/FTjgaPUI3H5blGOZLqTv1DozEpLP/zV1bRBMd3JzAiEAjgR92NErL1eqa3xhZFHnk/TT722PFmPQMZVTHTb03RA="}]},"_npmUser":{"name":"asunited.com.sg","email":"itsupport@asunited.com.sg"},"directories":{},"maintainers":[{"name":"asunited.com.sg","email":"itsupport@asunited.com.sg"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/floor-planner_1.0.1_1780038061575_0.43370844140273834"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-29T07:01:01.401Z","1.0.1":"2026-05-29T07:01:01.739Z","modified":"2026-05-29T07:01:01.960Z"},"maintainers":[{"name":"asunited.com.sg","email":"itsupport@asunited.com.sg"}],"description":"A plug-and-play 2D/3D floor planner React component with wall drawing, furniture, export (PNG/SVG/JSON), undo/redo and keyboard shortcuts.","homepage":"https://github.com/AS-United/asu-floorplanner#readme","keywords":["floor-planner","react","2d","3d","canvas","three.js","blueprint","floorplan","architecture"],"repository":{"type":"git","url":"git+https://github.com/AS-United/asu-floorplanner.git"},"author":{"name":"AS United Pte Ltd"},"bugs":{"url":"https://github.com/AS-United/asu-floorplanner/issues"},"license":"UNLICENSED","readme":"# asu-floorplanner\r\n\r\nA self-contained 2D/3D floor planner React component. Drop it into any Next.js, Vite, or Create-React-App project and pass an `onSave` callback — no API setup required inside the package.\r\n\r\n---\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install asu-floorplanner\r\n# or\r\npnpm add asu-floorplanner\r\n```\r\n\r\n---\r\n\r\n## Quick start\r\n\r\n```tsx\r\nimport { FloorPlanner } from 'asu-floorplanner';\r\n\r\nexport default function MyPage() {\r\n return (\r\n // The parent must have a defined height\r\n \r\n {\r\n // data = { shapes, walls, version }\r\n await fetch('/api/floor-plans/my-plan', {\r\n method: 'PUT',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify(data),\r\n });\r\n }}\r\n />\r\n
\r\n );\r\n}\r\n```\r\n\r\n---\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|---|---|---|---|\r\n| `onSave` | `(data: FloorPlanData) => Promise \\| void` | — | Called on Ctrl+S and auto-save. If omitted, saving is disabled. |\r\n| `initialData` | `{ id, name, shapes, walls }` | — | Pre-load an existing plan on mount. |\r\n| `autoSaveDelay` | `number` | `30000` | Auto-save debounce in milliseconds. |\r\n| `className` | `string` | `''` | Extra CSS classes on the wrapper div. |\r\n\r\n---\r\n\r\n## Load an existing plan\r\n\r\n```tsx\r\nconst plan = await fetch('/api/floor-plans/plan-1').then(r => r.json());\r\n\r\n {\r\n await fetch(`/api/floor-plans/${plan.id}`, {\r\n method: 'PUT',\r\n body: JSON.stringify(data),\r\n });\r\n }}\r\n/>\r\n```\r\n\r\n---\r\n\r\n## Tailwind CSS\r\n\r\nThe package uses Tailwind utility classes. Add the package path to your `tailwind.config`:\r\n\r\n```js\r\n// tailwind.config.js\r\nmodule.exports = {\r\n content: [\r\n './src/**/*.{ts,tsx}',\r\n './node_modules/asu-floorplanner/dist/**/*.{js,mjs}',\r\n ],\r\n};\r\n```\r\n\r\nIf you are **not** using Tailwind, import the pre-built stylesheet instead:\r\n\r\n```ts\r\nimport 'asu-floorplanner/dist/styles.css'; // coming in v1.1\r\n```\r\n\r\n---\r\n\r\n## Advanced: use individual pieces\r\n\r\n```tsx\r\nimport {\r\n FloorPlannerCanvas,\r\n Toolbar,\r\n PropertiesPanel,\r\n StatusBar,\r\n ViewToggle,\r\n ExportModal,\r\n useFloorPlannerStore,\r\n useKeyboardShortcuts,\r\n useAutoSave,\r\n} from 'asu-floorplanner';\r\n\r\nexport function CustomLayout() {\r\n const { viewMode } = useFloorPlannerStore();\r\n useKeyboardShortcuts();\r\n\r\n return (\r\n \r\n
\r\n
\r\n {viewMode === '2d' ? : null}\r\n
\r\n
\r\n