@agnuscloud/design-switcher-panel

NPX-ready design switcher panel voor klantpresentaties met meerdere website-designvarianten.

De package installeert een herbruikbaar designkeuze-panel in een project zonder bestaande klantcode te vervangen.

Wat deze package doet

• Bevat een generieke DesignSwitcherProvider.
• Bevat een generiek DesignSwitcherPanel met de uitgewerkte pill/panel animaties.
• Bevat een CLI voor later npx gebruik.
• Kopieert componentbestanden naar een doelproject, zodat een AI of developer daar zes designs mee kan bouwen.

Gebruik via npx

npx @agnuscloud/design-switcher-panel init

Optioneel:

npx @agnuscloud/design-switcher-panel init --target ./mijn-project
npx @agnuscloud/design-switcher-panel init --component-dir components/design-switcher-panel
npx @agnuscloud/design-switcher-panel init --force

Lokaal testen vanuit de repo

Help tonen:

node packages/design-switcher-panel/bin/init.js --help

Dry-run naar een tijdelijke map:

node packages/design-switcher-panel/bin/init.js init --target /tmp/design-switcher-test --dry-run

Echt kopieren naar een tijdelijke map:

node packages/design-switcher-panel/bin/init.js init --target /tmp/design-switcher-test

Gebruik na installatie in een project

De CLI kopieert bestanden naar:

components/design-switcher-panel/

Gebruik daarna:

import {
  DesignSwitcherPanel,
  DesignSwitcherProvider,
  useDesignSwitcher,
} from '@/components/design-switcher-panel';
import { designOptions } from '@/components/design-switcher-panel/designOptions';

Provider:

<DesignSwitcherProvider
  options={designOptions}
  defaultDesignId="classic"
  storageKey="client_selected_design"
  panelStorageKey="client_design_panel_collapsed"
>
  <DesignSwitcherPanel />
  {children}
</DesignSwitcherProvider>

Renderer:

const { selectedDesignId, selectedDesign } = useDesignSwitcher();

AI-instructie voor nieuwe klantprojecten

Geef AI deze opdracht:

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.

Publiceren

Voor een nieuwe versie:

npm version patch
npm publish