{"_id":"@agnuscloud/design-switcher-panel","name":"@agnuscloud/design-switcher-panel","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@agnuscloud/design-switcher-panel","version":"0.1.0","description":"NPX-ready design switcher panel for presenting multiple website design variants.","license":"UNLICENSED","publishConfig":{"access":"public"},"bin":{"design-switcher-panel":"bin/init.js"},"scripts":{"check":"tsc -p tsconfig.json --noEmit"},"peerDependencies":{"framer-motion":">=12","react":">=18","react-dom":">=18"},"devDependencies":{"typescript":"^5"},"gitHead":"223eabfb517633ec69afe9dc5668b87c799651a1","_id":"@agnuscloud/design-switcher-panel@0.1.0","_nodeVersion":"23.10.0","_npmVersion":"11.10.0","dist":{"integrity":"sha512-Oq2GHaKR/knDT9za2PK7w7h1gv987ROdZ0SNuidM4NpS1kxt+87GOUIWQccjMz7vTrDg2O9PvBCBHFhvAL/jtA==","shasum":"1253467c47383a023ab463227797255e05bd4d08","tarball":"https://registry.npmjs.org/@agnuscloud/design-switcher-panel/-/design-switcher-panel-0.1.0.tgz","fileCount":10,"unpackedSize":28694,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD73lOE+OimYxzM7tU5mXiPz842atUwa74mus/EM7tnmAIhAITrp7Ln3xfve/ckcwTGYkee2+eNcPx3SS8CXXtGRSUI"}]},"_npmUser":{"name":"agnuscloud","email":"info@agnuscloud.com"},"directories":{},"maintainers":[{"name":"agnuscloud","email":"info@agnuscloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-switcher-panel_0.1.0_1777759912504_0.6112003182640788"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-02T22:11:52.326Z","0.1.0":"2026-05-02T22:11:52.658Z","modified":"2026-05-02T22:11:52.894Z"},"maintainers":[{"name":"agnuscloud","email":"info@agnuscloud.com"}],"description":"NPX-ready design switcher panel for presenting multiple website design variants.","license":"UNLICENSED","readme":"# @agnuscloud/design-switcher-panel\n\nNPX-ready design switcher panel voor klantpresentaties met meerdere website-designvarianten.\n\nDe package installeert een herbruikbaar designkeuze-panel in een project zonder bestaande klantcode te vervangen.\n\n## Wat deze package doet\n\n- Bevat een generieke `DesignSwitcherProvider`.\n- Bevat een generiek `DesignSwitcherPanel` met de uitgewerkte pill/panel animaties.\n- Bevat een CLI voor later `npx` gebruik.\n- Kopieert componentbestanden naar een doelproject, zodat een AI of developer daar zes designs mee kan bouwen.\n\n## Gebruik via npx\n\n```bash\nnpx @agnuscloud/design-switcher-panel init\n```\n\nOptioneel:\n\n```bash\nnpx @agnuscloud/design-switcher-panel init --target ./mijn-project\nnpx @agnuscloud/design-switcher-panel init --component-dir components/design-switcher-panel\nnpx @agnuscloud/design-switcher-panel init --force\n```\n\n## Lokaal testen vanuit de repo\n\nHelp tonen:\n\n```bash\nnode packages/design-switcher-panel/bin/init.js --help\n```\n\nDry-run naar een tijdelijke map:\n\n```bash\nnode packages/design-switcher-panel/bin/init.js init --target /tmp/design-switcher-test --dry-run\n```\n\nEcht kopieren naar een tijdelijke map:\n\n```bash\nnode packages/design-switcher-panel/bin/init.js init --target /tmp/design-switcher-test\n```\n\n## Gebruik na installatie in een project\n\nDe CLI kopieert bestanden naar:\n\n```txt\ncomponents/design-switcher-panel/\n```\n\nGebruik daarna:\n\n```tsx\nimport {\n  DesignSwitcherPanel,\n  DesignSwitcherProvider,\n  useDesignSwitcher,\n} from '@/components/design-switcher-panel';\nimport { designOptions } from '@/components/design-switcher-panel/designOptions';\n```\n\nProvider:\n\n```tsx\n<DesignSwitcherProvider\n  options={designOptions}\n  defaultDesignId=\"classic\"\n  storageKey=\"client_selected_design\"\n  panelStorageKey=\"client_design_panel_collapsed\"\n>\n  <DesignSwitcherPanel />\n  {children}\n</DesignSwitcherProvider>\n```\n\nRenderer:\n\n```tsx\nconst { selectedDesignId, selectedDesign } = useDesignSwitcher();\n```\n\n## AI-instructie voor nieuwe klantprojecten\n\nGeef AI deze opdracht:\n\n> Gebruik `components/design-switcher-panel` als bestaande module. Maak zes designopties in `designOptions.ts`. Bouw per design een aparte layoutvariant en render die via `useDesignSwitcher()`. Bouw geen nieuw panel, wijzig alleen de opties en de layout-renderers.\n\n## Publiceren\n\nVoor een nieuwe versie:\n\n```bash\nnpm version patch\nnpm publish\n```\n","readmeFilename":"README.md","_rev":"1-4c07a90cec6e373112b21c81378b7976"}