{"_id":"@cardinal-odp/packing-3d-react","name":"@cardinal-odp/packing-3d-react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@cardinal-odp/packing-3d-react","version":"0.1.0","type":"module","sideEffects":false,"types":"./dist/index.d.ts","main":"./dist/index.mjs","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"}},"peerDependencies":{"@react-three/drei":">=9.0.0","@react-three/fiber":">=8.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","three":">=0.160.0"},"peerDependenciesMeta":{"@react-three/drei":{"optional":true},"@react-three/fiber":{"optional":true},"three":{"optional":true}},"devDependencies":{"@types/three":"^0.184.0","tsup":"^8.3.5"},"publishConfig":{"access":"public"},"scripts":{"build":"pnpm exec tsup --config tsup.config.ts","test":"pnpm build && node --test ./__tests__/*.test.mjs"},"_id":"@cardinal-odp/packing-3d-react@0.1.0","description":"React component for 3D bin-packing scene visualization based on `three`, `@react-three/fiber`, and `@react-three/drei`.","_integrity":"sha512-Imj7QmNuidJx4+/SB7v0au8tbSNU5nqSMrDUgpz6e6hSnpaSkHU6y0LIKYeU148xnuEnuzAf/K4cMTxIdEYDJA==","_resolved":"/tmp/59fcc114933bd63448a3d61262675a9e/cardinal-odp-packing-3d-react-0.1.0.tgz","_from":"file:cardinal-odp-packing-3d-react-0.1.0.tgz","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-Imj7QmNuidJx4+/SB7v0au8tbSNU5nqSMrDUgpz6e6hSnpaSkHU6y0LIKYeU148xnuEnuzAf/K4cMTxIdEYDJA==","shasum":"54f42accec7c3861e54f91a755bef2f222717821","tarball":"https://registry.npmjs.org/@cardinal-odp/packing-3d-react/-/packing-3d-react-0.1.0.tgz","fileCount":5,"unpackedSize":71433,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCg9gD++iW94+WQpthjY3+uLj+W030/rDeTQpbpU5oD6QIhAKxRmcJS8bkFrDAjnDz2NyrWDR12jLZUBse+trzSMENY"}]},"_npmUser":{"name":"yachen121","email":"yachen@shanshu.ai"},"directories":{},"maintainers":[{"name":"yachen121","email":"yachen@shanshu.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/packing-3d-react_0.1.0_1776855707513_0.6890873565664384"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-22T11:01:47.396Z","0.1.0":"2026-04-22T11:01:47.634Z","modified":"2026-04-22T11:01:47.881Z"},"maintainers":[{"name":"yachen121","email":"yachen@shanshu.ai"}],"description":"React component for 3D bin-packing scene visualization based on `three`, `@react-three/fiber`, and `@react-three/drei`.","readme":"# `@cardinal-odp/packing-3d-react`\n\nReact component for 3D bin-packing scene visualization based on `three`, `@react-three/fiber`, and `@react-three/drei`.\n\nThe package only ships the React-side scene component and related types / palette helpers. Runtime dependencies are expected to be installed by the host application.\n\n## Install\n\n```bash\nnpm install @cardinal-odp/packing-3d-react react react-dom three @react-three/fiber @react-three/drei\n```\n\n## Peer Dependencies\n\n- `react`\n- `react-dom`\n- `three`\n- `@react-three/fiber`\n- `@react-three/drei`\n\n`three`, `@react-three/fiber`, and `@react-three/drei` are declared as optional peers so the package can stay host-driven in monorepo and app integration scenarios.\n\n## Usage\n\n```tsx\nimport Packing3DScene from '@cardinal-odp/packing-3d-react';\n\nconst container = {\n  innerLength: 12,\n  innerWidth: 2.35,\n  innerHeight: 2.69,\n};\n\nconst items = [\n  {\n    id: 'cargo-1',\n    groupKey: 'A',\n    seq: 1,\n    posX: 0,\n    posY: 0,\n    posZ: 0,\n    xLength: 120,\n    yLength: 100,\n    zLength: 80,\n    meta: {\n      title: 'SKU-A-01',\n      lines: ['批次: B001', '客户: North Hub'],\n    },\n  },\n];\n\nexport default function Demo() {\n  return (\n    <Packing3DScene\n      container={container}\n      items={items}\n      height={560}\n      theme=\"light\"\n    />\n  );\n}\n```\n\n## Data Model\n\n`container` uses meters. Item position and dimensions use centimeters.\n\n```ts\ntype SceneContainer = {\n  innerLength: number;\n  innerWidth: number;\n  innerHeight: number;\n};\n\ntype SceneItem = {\n  id: string;\n  groupKey: string;\n  seq: number;\n  posX: number;\n  posY: number;\n  posZ: number;\n  xLength: number;\n  yLength: number;\n  zLength: number;\n  meta?: {\n    title?: string;\n    lines?: string[];\n  };\n};\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `container` | `SceneContainer` | - | Scene container dimensions in meters |\n| `items` | `SceneItem[]` | - | Packed items rendered inside the container |\n| `allItems` | `SceneItem[]` | `items` | Optional source list for stable group color ordering |\n| `unloadedItems` | `SceneItem[]` | `[]` | Items rendered in the unloaded area |\n| `highlightedIds` | `Set<string>` | `new Set()` | When non-empty, only render items whose ids are included |\n| `opacity` | `number` | `0.75` | Opacity used for the unloaded zone overlay |\n| `theme` | `'light' \\| 'dark'` | `'light'` | Built-in scene theme |\n| `paletteTokens` | `Partial<ScenePalette>` | `undefined` | Override scene palette tokens |\n| `tooltipTokens` | `Partial<SceneTooltipTokens>` | `undefined` | Override default tooltip tokens |\n| `renderTooltip` | `(item, unloaded) => ReactNode` | `undefined` | Custom tooltip renderer |\n| `getItemColor` | `(item, groupKeys, theme) => string` | default palette mapping | Custom item color resolver |\n| `width` | `CSSProperties['width']` | `'100%'` | Root width |\n| `height` | `CSSProperties['height']` | `'100%'` | Root height |\n| `minHeight` | `CSSProperties['minHeight']` | `500` | Root min-height |\n\n## Exports\n\n```ts\nimport Packing3DCore, {\n  Packing3DScene,\n  DARK_GROUP_COLORS,\n  DARK_SCENE_PALETTE,\n  DARK_SCENE_TOOLTIP_TOKENS,\n  LIGHT_GROUP_COLORS,\n  LIGHT_SCENE_PALETTE,\n  LIGHT_SCENE_TOOLTIP_TOKENS,\n  getDefaultGroupColor,\n  getDefaultGroupColors,\n  getDefaultScenePalette,\n  getDefaultSceneTooltipTokens,\n  getGroupColorByKey,\n  resolveScenePalette,\n  resolveSceneTooltipTokens,\n  type Packing3DCoreProps,\n  type SceneContainer,\n  type SceneItem,\n} from '@cardinal-odp/packing-3d-react';\n```\n\n`Packing3DScene` and `Packing3DCore` are the same component export.\n\n## Notes\n\n- The component includes a container wireframe, packed cargo cubes, and an unloaded-item zone.\n- Hover and filtered-highlight states share the same tooltip rendering pipeline.\n- The package is intentionally presentation-focused. Packing calculation, sorting, and business data mapping should stay outside.\n","readmeFilename":"README.md","_rev":"1-8871b60dc53f719e7bbbe4db4239cc7c"}