const featureItems = [
  {
    icon: "icon-[lucide--shield-check]",
    eyebrow: "Citizen support",
    title: "Citizen services",
    description: "Report incidents, request certificates, and find safety information.",
    href: "#citizen-services",
    actionLabel: "Explore services",
    badge: "Public",
    color: "primary",
    variant: "default",
    hover: "lift",
  },
  {
    icon: "icon-[lucide--map-pin]",
    eyebrow: "Directory",
    title: "Station directory",
    description: "Locate offices, jurisdictions, contacts, and public service hours.",
    href: "#station-directory",
    actionLabel: "Find a station",
    badge: "Directory",
    color: "info",
    variant: "soft",
    hover: "border",
  },
  {
    icon: "icon-[lucide--radio-tower]",
    eyebrow: "Verified",
    title: "Public updates",
    description: "Publish official alerts, notices, advisories, and verified information.",
    href: "#public-updates",
    actionLabel: "View updates",
    badge: "Live",
    color: "success",
    variant: "gradient",
    hover: "glow",
  },
];

const metricItems = [
  {
    label: "Public services",
    value: "24",
    description: "Citizen-facing services available online.",
    icon: "icon-[lucide--hand-heart]",
    trend: "+4",
    trendLabel: "this release",
    trendDirection: "up",
    color: "primary",
  },
  {
    label: "Police stations",
    value: "126",
    description: "Searchable station and jurisdiction entries.",
    icon: "icon-[lucide--landmark]",
    trend: "Updated",
    trendLabel: "today",
    color: "info",
  },
  {
    label: "Availability",
    value: "99.9",
    suffix: "%",
    description: "Target service availability.",
    icon: "icon-[lucide--activity]",
    trend: "Stable",
    trendLabel: "30 days",
    trendDirection: "positive",
    color: "success",
  },
];

const statsItems = [
  {
    label: "Composite components",
    value: "18",
    description: "Reusable public-page building blocks",
    icon: "icon-[lucide--blocks]",
    color: "primary",
  },
  {
    label: "Rendering",
    value: "SSR",
    description: "Server-first WRNexusJS rendering",
    icon: "icon-[lucide--server]",
    color: "info",
  },
  {
    label: "Responsive",
    value: "Yes",
    description: "Mobile, tablet, and desktop layouts",
    icon: "icon-[lucide--monitor-smartphone]",
    color: "success",
  },
  {
    label: "Theme aware",
    value: "Yes",
    description: "Active theme and accent palettes",
    icon: "icon-[lucide--palette]",
    color: "warning",
  },
];

const breadcrumbs = [
  { label: "Home", href: "/", icon: "icon-[lucide--house]" },
  { label: "Components", href: "/base" },
  { label: "Page header", current: true },
];

const heroActions = [
  {
    label: "Browse components",
    href: "#components",
    icon: "icon-[lucide--blocks]",
    variant: "primary",
  },
  {
    label: "View metrics",
    href: "#metrics",
    icon: "icon-[lucide--chart-no-axes-column-increasing]",
    variant: "outline",
  },
];

const menuItems = [
  {
    label: "Open dashboard",
    description: "View the operational workspace",
    value: "dashboard",
    icon: "icon-[lucide--layout-dashboard]",
  },
  {
    label: "Share record",
    value: "share",
    icon: "icon-[lucide--share-2]",
    shortcut: "Ctrl S",
  },
  { type: "divider" },
  {
    label: "Delete record",
    value: "delete",
    icon: "icon-[lucide--trash-2]",
    danger: true,
  },
];

const footerItems = [
  {
    type: "header",
    label: "Product",
    description: "Build consistent interfaces with WRNexusJS.",
    items: [
      { label: "Components", href: "/base" },
      { label: "Themes", href: "/themes" },
      { label: "Examples", href: "/blocks" },
    ],
  },
  {
    type: "header",
    label: "Developers",
    items: [
      { label: "Documentation", href: "/docs" },
      { label: "Installation", href: "/installation" },
      { label: "Framework guides", href: "/framework-guides" },
    ],
  },
  {
    type: "header",
    label: "Resources",
    items: [
      { label: "Accessibility", href: "/accessibility" },
      { label: "Design tokens", href: "/colors" },
      { label: "Typography", href: "/fonts" },
    ],
  },
  {
    type: "header",
    label: "Company",
    items: [
      { label: "WorkRoot", href: "https://workroot.in", external: true },
      { label: "WRNexusJS", href: "https://wrnexusjs.dev", external: true },
    ],
  },
];

const visualPanel = `
<div class="showcase-visual-panel">
  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
  <strong>Composable visual panel</strong>
  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
</div>`;

const shellPreview = `
<div class="showcase-shell-preview">
  <header>Header slot</header>
  <main>Public page content</main>
  <footer>Footer slot</footer>
</div>`;

// Markup rendered beside the mount instead of inside its slot -- for host
// components that have no slot but need controls to demonstrate them.
const withBefore =
  (before) =>
  (title, description, props = {}, slots = {}) => ({
    eyebrow: "Recommended",
    title,
    description,
    props,
    slots,
    before,
  });

const standard = (title, description, props = {}, slots = {}) => ({
  eyebrow: "Recommended",
  title,
  description,
  props,
  slots,
});

const compact = (title, description, props = {}, slots = {}) => ({
  eyebrow: "Compact",
  title,
  description,
  props,
  slots,
});

const advanced = (title, description, props = {}, slots = {}) => ({
  eyebrow: "Advanced",
  title,
  description,
  props,
  slots,
});

const TOASTER_DEMO_BUTTONS =
  '<div class="showcase-toast-demo"><button type="button" @click=\'toast.success("Your changes are live", { title: "Published" })\'>success</button><button type="button" @click=\'toast.error("We could not reach the server", { title: "Network error" })\'>danger</button><button type="button" @click=\'toast.warning("Your trial ends in 3 days", { title: "Heads up", icon: "icon-[lucide--hourglass]" })\'>warning + custom icon</button><button type="button" @click=\'toast.info("Export queued")\'>info</button><button type="button" @click=\'toast("Note deleted", { title: "Deleted", actionLabel: "Undo" })\'>one action</button><button type="button" @click=\'toast.warning("This file changed elsewhere", { title: "Conflict", duration: 0, actions: [{ label: "Keep mine" }, { label: "Discard", tone: "danger" }] })\'>two actions (sticky)</button><button type="button" @click=\'toast("No icon on this one", { icon: false })\'>icon suppressed</button><button type="button" @click=\'toast.success("Gone in 1.5s", { duration: 1500 })\'>short duration</button><button type="button" @click=\'toast.clear()\'>clear all</button></div>';

const DATATABLE_COLUMNS_PLAIN =
  '[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "status", "label": "Status", "align": "center"}]';
const DATATABLE_COLUMNS_NARROW =
  '[{"key": "name", "label": "Account", "sortable": true, "width": "40%"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true, "width": "20%"}, {"key": "plan", "label": "Plan", "align": "center", "width": "20%"}, {"key": "status", "label": "Status", "align": "end", "width": "20%"}]';
const DATATABLE_COLUMNS_INBOX =
  '[{"key": "owner", "label": "From", "sortable": true}, {"key": "name", "label": "Subject", "sortable": true}, {"key": "plan", "label": "Folder", "align": "center"}, {"key": "statusHtml", "label": "State", "align": "center", "html": true}]';
const DATATABLE_COLUMNS_COMPARE =
  '[{"key": "name", "label": "Plan"}, {"key": "plan", "label": "Tier"}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "type": "number"}, {"key": "status", "label": "Status", "align": "center"}]';
const DATATABLE_ACTIONS =
  '[{"id": "refresh", "label": "Refresh", "icon": "icon-[lucide--refresh-cw]", "when": "always"}, {"id": "read", "label": "Mark as read", "icon": "icon-[lucide--mail-open]", "when": "selection"}, {"id": "archive", "label": "Archive", "icon": "icon-[lucide--archive]", "when": "selection"}, {"id": "delete", "label": "Delete", "icon": "icon-[lucide--trash-2]", "when": "selection", "tone": "danger"}]';
const DATATABLE_COLUMNS =
  '[{"key": "name", "label": "Account", "sortable": true}, {"key": "plan", "label": "Plan", "sortable": true}, {"key": "owner", "label": "Owner"}, {"key": "seats", "label": "Seats", "align": "end", "sortable": true}, {"key": "statusHtml", "label": "Status", "align": "center", "html": true}]';
const DATATABLE_ROWS =
  '[{"id": 1, "name": "Northwind", "plan": "Scale", "owner": "A. Okafor", "seats": 6, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 2, "name": "Acme Industrial", "plan": "Team", "owner": "R. Silva", "seats": 13, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 3, "name": "Globex", "plan": "Enterprise", "owner": "M. Chen", "seats": 20, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 4, "name": "Initech", "plan": "Starter", "owner": "J. Dubois", "seats": 27, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 5, "name": "Umbrella", "plan": "Scale", "owner": "P. Novak", "seats": 34, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 6, "name": "Stark Labs", "plan": "Team", "owner": "A. Okafor", "seats": 41, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 7, "name": "Wayne Foods", "plan": "Enterprise", "owner": "R. Silva", "seats": 48, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 8, "name": "Soylent", "plan": "Starter", "owner": "M. Chen", "seats": 55, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 9, "name": "Hooli", "plan": "Scale", "owner": "J. Dubois", "seats": 62, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 10, "name": "Vehement", "plan": "Team", "owner": "P. Novak", "seats": 69, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 11, "name": "Massive Dynamic", "plan": "Enterprise", "owner": "A. Okafor", "seats": 76, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 12, "name": "Cyberdyne", "plan": "Starter", "owner": "R. Silva", "seats": 83, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}, {"id": 13, "name": "Tyrell", "plan": "Scale", "owner": "M. Chen", "seats": 90, "status": "Active", "statusHtml": "<span class=\\"showcase-pill showcase-pill--success\\">Active</span>"}, {"id": 14, "name": "Aperture", "plan": "Team", "owner": "J. Dubois", "seats": 97, "status": "Trial", "statusHtml": "<span class=\\"showcase-pill showcase-pill--info\\">Trial</span>"}, {"id": 15, "name": "Black Mesa", "plan": "Enterprise", "owner": "P. Novak", "seats": 104, "status": "Past due", "statusHtml": "<span class=\\"showcase-pill showcase-pill--danger\\">Past due</span>"}]';

export const componentProfiles = {
  Navbar: {
    demos: [
      standard(
        "Brand, links and actions",
        "The everyday shape: a brand, a row of links with the current page marked, and calls to action on the right. Arrow keys move along the menu bar.",
        {
          brand: { label: "Northwind", description: "Console", href: "/" },
          items: [
            { label: "Overview", href: "/", value: "overview" },
            { label: "Projects", href: "/projects", value: "projects" },
            { label: "Reports", href: "/reports", value: "reports" },
          ],
          actions: [
            { label: "Sign in", href: "/login", variant: "link" },
            { label: "Start free", href: "/signup", variant: "primary" },
          ],
          active: "projects",
          label: "Primary navigation",
        },
      ),
      advanced(
        "Dropdown and mega panel",
        "An item carrying children opens a panel built from native details and summary, so it is keyboard operable without any extra script. Give a child its own children to get a titled column inside the panel.",
        {
          brand: { label: "Northwind", icon: "icon-[lucide--box]", href: "/" },
          items: [
            { label: "Overview", href: "/", value: "overview" },
            {
              label: "Products",
              value: "products",
              columns: 2,
              description: "Everything in the platform.",
              children: [
                {
                  label: "Platform",
                  children: [
                    {
                      label: "Runtime",
                      href: "/runtime",
                      description: "The browser half.",
                      icon: "icon-[lucide--cpu]",
                    },
                    {
                      label: "Compiler",
                      href: "/compiler",
                      description: "WRN to JavaScript.",
                      icon: "icon-[lucide--hammer]",
                    },
                  ],
                },
                {
                  label: "Tooling",
                  children: [
                    { label: "CLI", href: "/cli", description: "Scaffold and deploy." },
                    { label: "Editor", href: "/editor", description: "Language server." },
                  ],
                },
              ],
            },
            { label: "Pricing", href: "/pricing", value: "pricing" },
          ],
          actions: [{ label: "Book a demo", href: "/demo", variant: "primary" }],
          active: "overview",
        },
      ),
      compact(
        "Sticky and compact",
        "Sticky keeps the bar pinned while the page scrolls. The toggle appears below the tablet breakpoint and the links collapse behind it.",
        {
          brand: { label: "Acme", href: "/" },
          items: [
            { label: "Docs", href: "/docs", value: "docs" },
            { label: "Support", href: "/support", value: "support" },
          ],
          actions: [{ label: "Dashboard", href: "/app", variant: "primary" }],
          active: "docs",
          sticky: true,
          size: "sm",
          mobileLabel: "Toggle navigation",
        },
      ),
    ],
  },
  LayoutSplitter: {
    demos: [
      standard(
        "Drag or arrow the divider",
        "Two panes with a movable divider. Drag it, or focus it and use the arrow keys; Home and End go to the bounds. The size is resolved in the runtime and written onto the container as a custom property, because a pointermove fires far too often to route through a client function.",
        { size: 40, minSize: 20, step: 5, orientation: "horizontal", label: "Resize panels" },
      ),
      advanced(
        "Stacked panes",
        "Vertical orientation splits top from bottom and switches the arrow keys to up and down. Below the small breakpoint both orientations stack, because two panes side by side stop making sense on a phone.",
        { size: 60, minSize: 25, step: 10, orientation: "vertical", label: "Resize rows" },
      ),
    ],
  },
  CustomScrollbar: {
    demos: [
      standard(
        "Themed scrolling region",
        "Scrollbar appearance is CSS rather than script: scrollbar-width and scrollbar-color are the standard properties, with webkit rules for the engines that still need them. The thumb follows the component colour.",
        { axis: "vertical", thickness: 8, maxHeight: "14rem", radius: "999px" },
        {
          default: `<div class="showcase-scroll-demo"><p>Line 1. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 2. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 3. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 4. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 5. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 6. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 7. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 8. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 9. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 10. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 11. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p><p>Line 12. A scrolling region only shows its scrollbar when the content actually overflows, so this demo ships enough of it.</p></div>`,
        },
      ),
      advanced(
        "Horizontal, thicker track",
        "A horizontal region with a heavier track. thickness is clamped, since it arrives as an attribute and a scrollbar wider than its content helps nobody.",
        { axis: "horizontal", thickness: 14, maxHeight: "8rem", radius: "4px", color: "info" },
        {
          default: `<div class="showcase-scroll-demo showcase-scroll-demo--wide"><span>Column 1</span><span>Column 2</span><span>Column 3</span><span>Column 4</span><span>Column 5</span><span>Column 6</span><span>Column 7</span><span>Column 8</span><span>Column 9</span><span>Column 10</span><span>Column 11</span><span>Column 12</span><span>Column 13</span><span>Column 14</span></div>`,
        },
      ),
    ],
  },
  Scrollspy: {
    demos: [
      {
        eyebrow: "Recommended",
        title: "Follows the reader",
        description:
          "Scroll the page and the marker moves to whichever section is in view. The sections below are real page content, because the runtime observes against the viewport -- a table of contents inside a small scrolling box would have nothing to react to.",
        before:
          '<div class="showcase-spy-doc"><section id="overview" class="showcase-spy-section"><h3>Overview</h3><p>Scroll this page and watch the marker in the list move. The runtime observes these sections against the viewport, so the current link follows whatever you are reading.</p></section><section id="installation" class="showcase-spy-section"><h3>Installation</h3><p>Each link points at one of these ids. Nothing is wired up by hand -- the component only renders the links, and the runtime moves aria-current.</p></section><section id="usage" class="showcase-spy-section"><h3>Usage</h3><p>The active link is marked with aria-current="location", which is what a screen reader announces, and styled through data-active.</p></section><section id="api" class="showcase-spy-section"><h3>API</h3><p>Clicking a link jumps to its section and marks it immediately, so the control responds even before the scroll settles.</p></section></div>',
        props: {
          heading: "On this page",
          items: [
            { label: "Overview", href: "#overview" },
            { label: "Installation", href: "#installation" },
            { label: "Usage", href: "#usage" },
            { label: "API", href: "#api" },
          ],
          active: "#overview",
        },
        slots: {},
      },
      advanced(
        "Compact rail",
        "On a phone the rail becomes a horizontal strip that scrolls, so a long contents list costs one line rather than a screenful.",
        {
          heading: "Sections",
          size: "sm",
          items: [
            { label: "Overview", href: "#overview" },
            { label: "Installation", href: "#installation" },
            { label: "Usage", href: "#usage" },
          ],
          active: "#installation",
        },
      ),
    ],
  },
  MegaMenu: {
    demos: [
      standard(
        "Grouped columns",
        "One level deep by design: a mega menu shows breadth flat so everything is one click away. Nesting inside the panel would bury content behind hover-within-hover. Use Nav when you want cascading submenus.",
        {
          label: "Products",
          icon: "icon-[lucide--box]",
          columns: [
            {
              heading: "Platform",
              items: [
                {
                  label: "Runtime",
                  href: "/runtime",
                  description: "The browser half of the framework.",
                },
                { label: "Compiler", href: "/compiler", description: "WRN to JavaScript." },
              ],
            },
            {
              heading: "Tooling",
              items: [
                { label: "CLI", href: "/cli", description: "Scaffold, build and deploy." },
                { label: "Editor", href: "/editor", description: "Language server and syntax." },
              ],
            },
          ],
        },
      ),
      advanced(
        "With a footer note",
        "The panel is anchored, so the runtime clamp pulls it back inside the viewport instead of letting it hang off a wide layout. On a phone it stops floating and joins the flow.",
        {
          label: "Solutions",
          columns: [
            {
              heading: "By team",
              items: [
                { label: "Engineering", href: "/eng", icon: "icon-[lucide--code]" },
                { label: "Design", href: "/design", icon: "icon-[lucide--palette]" },
                { label: "Support", href: "/support", icon: "icon-[lucide--life-buoy]" },
              ],
            },
            {
              heading: "By size",
              items: [
                { label: "Startup", href: "/startup" },
                { label: "Enterprise", href: "/enterprise" },
              ],
            },
          ],
          footer: "Not sure where to start? Talk to us.",
        },
      ),
    ],
  },
  Sidebar: {
    demos: [
      standard(
        "Groups and nested levels",
        "An entry is a single link, a labelled group, or a branch nested up to three levels. Arrow keys move down the rail.",
        {
          label: "Workspace",
          items: [
            { label: "Dashboard", href: "/", value: "dash", icon: "icon-[lucide--gauge]" },
            {
              heading: "Projects",
              items: [
                { label: "Active", href: "/active", value: "active", badge: "4" },
                {
                  label: "Archive",
                  value: "archive",
                  items: [
                    { label: "2025", href: "/a/2025", value: "a2025" },
                    { label: "2024", href: "/a/2024", value: "a2024" },
                  ],
                },
              ],
            },
            {
              heading: "Account",
              items: [
                {
                  label: "Settings",
                  href: "/settings",
                  value: "settings",
                  icon: "icon-[lucide--settings]",
                },
              ],
            },
          ],
          active: "active",
        },
      ),
      advanced(
        "Drawer on small screens",
        "Below the tablet breakpoint the rail is replaced by a launcher that opens a Drawer. Composing Drawer rather than reimplementing it means the focus trap and the body scroll lock come from one place.",
        {
          label: "Operations",
          mobileLabel: "Open navigation",
          drawerTitle: "Operations",
          items: [
            { label: "Queue", href: "/queue", value: "queue", icon: "icon-[lucide--inbox]" },
            {
              label: "Reports",
              href: "/reports",
              value: "reports",
              icon: "icon-[lucide--chart-no-axes-column]",
            },
          ],
          active: "queue",
        },
      ),
    ],
  },
  Nav: {
    demos: [
      standard(
        "Horizontal links",
        "A flat link bar. The active item is marked with aria-current, and the arrow keys move between items.",
        {
          items: [
            { label: "Home", href: "/", value: "home", icon: "icon-[lucide--house]" },
            { label: "Inbox", href: "/inbox", value: "inbox", badge: "9" },
            { label: "Reports", href: "/reports", value: "reports" },
            { label: "Archive", href: "/archive", value: "archive", disabled: true },
          ],
          active: "inbox",
        },
      ),
      advanced(
        "Nested submenus",
        "An item carrying its own items array opens a submenu on hover or focus, to a maximum of three levels. On a phone the submenus stack inline instead of floating, because a hover-opened overlay is unreachable on touch.",
        {
          items: [
            { label: "Home", href: "/", value: "home" },
            {
              label: "Products",
              value: "products",
              items: [
                { label: "Overview", href: "/p", value: "p-overview" },
                {
                  label: "Platform",
                  value: "p-platform",
                  items: [
                    { label: "Runtime", href: "/p/runtime", value: "runtime" },
                    { label: "Compiler", href: "/p/compiler", value: "compiler" },
                  ],
                },
              ],
            },
          ],
          active: "p-overview",
        },
      ),
      standard("Vertical rail", "Vertical orientation switches the arrow keys to up and down.", {
        items: [
          { label: "Dashboard", href: "/", value: "dash", icon: "icon-[lucide--gauge]" },
          { label: "Team", href: "/team", value: "team", icon: "icon-[lucide--users]" },
          {
            label: "Settings",
            href: "/settings",
            value: "settings",
            icon: "icon-[lucide--settings]",
          },
        ],
        active: "team",
        orientation: "vertical",
        collapsible: false,
      }),
    ],
  },
  Stepper: {
    demos: [
      standard(
        "Horizontal progress",
        "Steps before the active one read as complete, the active one is highlighted, and the rest are muted.",
        {
          steps: [
            { label: "Account", description: "Your details" },
            { label: "Billing", description: "Payment method" },
            { label: "Confirm", description: "Review and submit" },
          ],
          active: 1,
          clickable: false,
          showPanel: false,
          controls: false,
          allowSkip: false,
          nextDisabled: false,
          backLabel: "Back",
          nextLabel: "Next",
          skipLabel: "Skip",
          finishLabel: "Finish",
        },
      ),
      standard(
        "Vertical with icons",
        "Vertical orientation suits a sidebar or a narrow column. Any step may carry an iconify class instead of its number.",
        {
          steps: [
            { label: "Cloned", icon: "icon-[lucide--git-branch]" },
            { label: "Built", icon: "icon-[lucide--hammer]" },
            { label: "Deployed", icon: "icon-[lucide--rocket]" },
          ],
          active: 2,
          orientation: "vertical",
          clickable: false,
          showPanel: false,
          controls: false,
          allowSkip: false,
          nextDisabled: false,
          backLabel: "Back",
          nextLabel: "Next",
          skipLabel: "Skip",
          finishLabel: "Finish",
        },
      ),
      advanced(
        "Wizard with content and controls",
        "showPanel renders each step body and shows only the active one, the same contract Tabs uses. controls adds Back, Skip and Next, which becomes Finish on the last step.",
        {
          steps: [
            { label: "Account", title: "Your details", content: "Name, email and a password." },
            { label: "Billing", title: "How you pay", content: "Card or invoice." },
            { label: "Confirm", title: "Review", content: "Check everything before submitting." },
          ],
          active: 1,
          clickable: false,
          showPanel: true,
          controls: true,
          allowSkip: true,
          nextDisabled: false,
          backLabel: "Back",
          nextLabel: "Next",
          skipLabel: "Skip",
          finishLabel: "Finish",
        },
      ),
      advanced(
        "Held until the step is valid",
        "The same wizard with nextDisabled set. The component never validates anything itself: the page owns the form, sets this while the step is incomplete, and clears it once the step passes.",
        {
          steps: [
            { label: "Account", title: "Your details", content: "This step is not complete yet." },
            { label: "Billing", title: "How you pay", content: "Card or invoice." },
          ],
          active: 0,
          clickable: false,
          showPanel: true,
          controls: true,
          allowSkip: false,
          nextDisabled: true,
          backLabel: "Back",
          nextLabel: "Next",
          skipLabel: "Skip",
          finishLabel: "Finish",
        },
      ),
      advanced(
        "Clickable steps",
        "With clickable the steps emit a change output and take arrow-key roving focus. Without it the stepper is read-only and stays out of the tab order.",
        {
          steps: [{ label: "One" }, { label: "Two" }, { label: "Three" }],
          active: 0,
          clickable: true,
          showPanel: false,
          controls: false,
          allowSkip: false,
          nextDisabled: false,
          backLabel: "Back",
          nextLabel: "Next",
          skipLabel: "Skip",
          finishLabel: "Finish",
        },
      ),
    ],
  },
  Pagination: {
    demos: [
      standard(
        "Compact arrows",
        "The default: previous and next with a page counter, and a summary of the range in view.",
        { page: 2, pageSize: 10, total: 137, variant: "compact" },
      ),
      standard(
        "Numbered pages",
        "Page numbers windowed around the current page with ellipsis gaps, so a large set never renders hundreds of buttons.",
        { page: 5, pageSize: 10, total: 200, variant: "numbered", siblingCount: 1 },
      ),
      advanced(
        "Wider window",
        "siblingCount widens how many pages sit either side of the current one.",
        { page: 8, pageSize: 25, total: 900, variant: "numbered", siblingCount: 2 },
      ),
    ],
  },
  DataTable: {
    demos: [
      standard(
        "Sortable, searchable and paged",
        "Click a header to sort, type to filter, and page through the results. Every derivation is a shared function, so the first page is server rendered and stays live after hydration.",
        {
          columns: DATATABLE_COLUMNS_PLAIN,
          rows: DATATABLE_ROWS,
          caption: "Accounts",
          description: "15 records across four plans.",
          pageSize: 5,
          pageSizes: [5, 10, 25],
          selectable: true,
          actions: [],
        },
      ),
      advanced(
        "Bulk actions on selection",
        "An inbox pattern: Refresh is always available, while Mark as read, Archive and Delete appear only once something is ticked. Each handler receives the selected records, and an action output fires for every click.",
        {
          columns: DATATABLE_COLUMNS_INBOX,
          rows: DATATABLE_ROWS,
          actions: DATATABLE_ACTIONS,
          selectable: true,
          caption: "Inbox",
          description: "Tick a row to reveal the selection-only actions.",
          pageSize: 6,
          pageSizes: [6, 12, 25],
          searchPlaceholder: "Search mail",
        },
      ),
      standard(
        "Numbered pagination",
        "Page numbers instead of arrows, windowed around the current page so a large table never renders hundreds of buttons.",
        {
          columns: DATATABLE_COLUMNS_PLAIN,
          rows: DATATABLE_ROWS,
          actions: [],
          paginationStyle: "numbered",
          pageSize: 4,
          pageSizes: [4, 8, 15],
          caption: "Accounts",
          description: "15 records, four per page.",
        },
      ),
      advanced(
        "Full gridlines and custom cell markup",
        'gridlines="grid" adds column rules as well as row rules. The Status column is rendered from markup rather than text, so a cell can hold a badge, a link or any other component output.',
        {
          columns: DATATABLE_COLUMNS,
          rows: DATATABLE_ROWS,
          actions: [],
          gridlines: "grid",
          striped: false,
          pageSize: 5,
          pageSizes: [5, 10, 25],
          caption: "Accounts",
          description: "Status is supplied as markup through a html column.",
        },
      ),
      compact(
        "Fixed widths and alignment",
        "Columns can set their own width and alignment: text left, counts right, short labels centred. Widths are plain CSS, so percentages, rem and ch all work.",
        {
          columns: DATATABLE_COLUMNS_NARROW,
          rows: DATATABLE_ROWS,
          actions: [],
          searchable: false,
          pageSize: 5,
          pageSizes: [5, 10, 25],
          density: "comfortable",
          caption: "Column sizing",
        },
      ),
      advanced(
        "Comparison layout",
        'layout="comparison" transposes the table: fields run down the left and each record gets its own column. The label column stays put while the rest scrolls sideways.',
        {
          columns: DATATABLE_COLUMNS_COMPARE,
          rows: DATATABLE_ROWS,
          actions: [],
          layout: "comparison",
          searchable: false,
          pageSize: 3,
          pageSizes: [3, 5, 8],
          caption: "Feature",
        },
      ),
      standard(
        "Sticky first column",
        "With many columns the table scrolls sideways; stickyFirstColumn keeps the record name in view so a row never loses its label.",
        {
          columns: DATATABLE_COLUMNS_PLAIN,
          rows: DATATABLE_ROWS,
          actions: [],
          stickyFirstColumn: true,
          pageSize: 5,
          pageSizes: [5, 10, 25],
          caption: "Accounts",
          description: "Scroll the table horizontally on a narrow screen.",
        },
      ),
      compact("Compact density, no pagination", "Every row at once, tighter rows, no footer.", {
        columns: DATATABLE_COLUMNS_PLAIN,
        rows: DATATABLE_ROWS,
        pageSizes: [5, 10, 25],
        actions: [],
        paginated: false,
        density: "compact",
        searchable: false,
        striped: false,
        caption: "All accounts",
      }),
      advanced("Empty state", "What a table shows before any records arrive.", {
        columns: DATATABLE_COLUMNS_PLAIN,
        rows: "[]",
        pageSizes: [5, 10, 25],
        actions: [],
        caption: "Accounts",
        emptyLabel: "No accounts match this filter yet",
      }),
    ],
    playground: {
      columns: DATATABLE_COLUMNS,
      rows: DATATABLE_ROWS,
      caption: "Accounts",
      pageSize: 5,
      pageSizes: [5, 10, 25],
      actions: DATATABLE_ACTIONS,
      selectable: true,
    },
    options: {
      density: ["compact", "default", "comfortable"],
      paginationStyle: ["compact", "numbered"],
      gridlines: ["rows", "grid"],
      color: ["primary", "secondary", "success", "danger", "info"],
    },
  },

  // A Toaster is a HOST, not a widget. The generic profile rendered five empty
  // boxes -- and because every mounted host answers the same window event, one
  // toast() call produced five toasts. One host plus buttons that actually
  // raise notifications is the only demo that shows anything.
  Toaster: {
    demos: [
      withBefore(TOASTER_DEMO_BUTTONS)(
        "Raise notifications from anywhere",
        "Mount one host, then call toast() from any client function. Each tone brings its own icon and colour, and hovering the stack holds a toast open while you read it. Actions here show label-only for brevity; attach onClick/onAction handlers from a functions{} block.",
        { position: "bottom-right", duration: 4500, max: 4 },
      ),
    ],
    playground: { position: "bottom-right", duration: 4500, max: 4 },
    options: {
      position: [
        "top-left",
        "top-center",
        "top-right",
        "bottom-left",
        "bottom-center",
        "bottom-right",
      ],
      size: ["sm", "default", "lg"],
    },
  },

  PublicPageShell: {
    demos: [
      standard(
        "Complete public page shell",
        "Use the shell around a complete marketing or public-service page.",
        { maxWidth: "xl", background: "default" },
        { default: shellPreview },
      ),
      compact(
        "Constrained documentation shell",
        "Keep long-form documentation readable with a compact content width.",
        { maxWidth: "compact", headerOffset: "sm", background: "soft" },
        { default: shellPreview },
      ),
      advanced(
        "Full-bleed landing page",
        "Allow full-width sections while keeping overflow and minimum-height behavior consistent.",
        { maxWidth: "full", fullWidth: true, minHeight: "screen", overflow: "clip" },
        { default: shellPreview },
      ),
    ],
    options: {
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
      headerOffset: ["none", "sm", "md", "lg"],
      background: ["default", "soft", "raised", "transparent"],
      overflow: ["visible", "hidden", "clip", "auto"],
      minHeight: ["none", "screen", "full"],
    },
  },

  AnnouncementBar: {
    demos: [
      standard(
        "Soft product notice",
        "Use a calm, dismissible notice inside a constrained content area.",
        {
          badge: "Public notice",
          badgeIcon: "icon-[lucide--sparkles]",
          message: "All composite components are now available",
          description: "Review each component and its recommended use cases.",
          icon: "icon-[lucide--megaphone]",
          actionLabel: "View components",
          actionHref: "#components",
          actionIcon: "icon-[lucide--arrow-down]",
          dismissible: true,
          width: "default",
          variant: "soft",
        },
      ),
      compact(
        "Wide solid announcement",
        "Use stronger contrast for important platform or service announcements.",
        {
          badge: "Release",
          message: "WRNexusJS UI updates are ready",
          description: "Explore the redesigned responsive components.",
          icon: "icon-[lucide--rocket]",
          actionLabel: "Read changes",
          actionHref: "#release",
          dismissible: true,
          width: "wide",
          compact: true,
          variant: "solid",
        },
      ),
      advanced(
        "Full-width critical alert",
        "Use edge-to-edge width for time-sensitive information that applies to the complete page.",
        {
          badge: "Service alert",
          message: "Scheduled maintenance tonight",
          description: "Some services may be temporarily unavailable from 23:00 to 23:30.",
          icon: "icon-[lucide--triangle-alert]",
          actionLabel: "View status",
          actionHref: "#status",
          dismissible: true,
          width: "full",
          color: "warning",
          variant: "solid",
        },
      ),
    ],
    playground: { width: "wide", dismissible: true, variant: "solid" },
    options: {
      width: ["default", "wide", "full"],
      variant: ["default", "soft", "outline", "solid", "minimal"],
      size: ["compact", "default", "spacious"],
      color: ["primary", "secondary", "info", "success", "warning", "danger"],
      role: ["status", "alert"],
      live: ["off", "polite", "assertive"],
    },
  },

  Breadcrumb: {
    demos: [
      standard("Minimal page trail", "Use a restrained breadcrumb above standard page content.", {
        items: breadcrumbs,
        size: "small",
        variant: "minimal",
      }),
      compact(
        "Soft navigation trail",
        "Add a soft surface when the breadcrumb needs more separation from surrounding content.",
        { items: breadcrumbs, size: "medium", variant: "soft", showHome: true },
      ),
      advanced(
        "Large directory breadcrumb",
        "Use a larger breadcrumb in directories, dashboards, and touch-first interfaces.",
        {
          items: breadcrumbs,
          size: "large",
          variant: "outline",
          showHome: true,
          separator: "slash",
        },
      ),
    ],
    options: {
      size: ["small", "medium", "large"],
      separator: ["chevron", "slash", "dot", "arrow"],
      variant: ["minimal", "soft", "outline", "contrast"],
    },
  },

  PageHeader: {
    demos: [
      standard(
        "Page header with actions",
        "Introduce a service or documentation page with breadcrumbs and clear actions.",
        {
          eyebrow: "Component showcase",
          title: "Page headers with clear hierarchy",
          description:
            "Use PageHeader for services, directories, legal pages, guides, dashboards, and public information.",
          icon: "icon-[lucide--panel-top]",
          showBreadcrumbs: true,
          breadcrumbs,
          primaryLabel: "Primary action",
          primaryHref: "#primary",
          primaryIcon: "icon-[lucide--arrow-down]",
          secondaryLabel: "Secondary action",
          secondaryHref: "#secondary",
          secondaryIcon: "icon-[lucide--house]",
          maxWidth: "full",
        },
      ),
      compact(
        "Compact service header",
        "Use reduced spacing when a page already sits inside an application shell.",
        {
          eyebrow: "Citizen service",
          title: "Track a complaint",
          description: "Check the latest status using your complaint reference.",
          icon: "icon-[lucide--scan-search]",
          compact: true,
          primaryLabel: "Track status",
          primaryHref: "#track",
          variant: "soft",
        },
      ),
      advanced(
        "Centered campaign header",
        "Use a centered header for campaigns, guides, and high-level public information.",
        {
          eyebrow: "Safety guide",
          title: "Prepare your family for emergencies",
          description:
            "Practical guidance for creating a plan, preparing supplies, and staying informed.",
          centered: true,
          align: "center",
          variant: "minimal",
          maxWidth: "wide",
        },
      ),
    ],
    playground: { showBreadcrumbs: true, breadcrumbs, maxWidth: "full" },
    options: {
      align: ["left", "center", "right"],
      size: ["small", "default", "large"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
      variant: ["default", "minimal", "soft", "raised", "tinted", "solid"],
      color: ["primary", "secondary", "info", "success", "warning", "danger"],
    },
  },

  Hero: {
    demos: [
      standard(
        "Split hero with visual",
        "Lead a landing page with clear content and a flexible visual slot.",
        {
          eyebrow: "Reusable public UI",
          eyebrowIcon: "icon-[lucide--sparkles]",
          title: "Build polished pages",
          highlight: "with consistent hero layouts",
          description:
            "Create strong first impressions for public portals, product pages, and service overviews.",
          layout: "split",
          visualPosition: "right",
          visualStyle: "card",
          primaryLabel: "Explore components",
          primaryHref: "#components",
          primaryIcon: "icon-[lucide--arrow-right]",
          secondaryLabel: "Read documentation",
          secondaryHref: "#docs",
          secondaryIcon: "icon-[lucide--book-open]",
          maxWidth: "wide",
          variant: "gradient",
        },
        { visual: visualPanel },
      ),
      compact(
        "Centered campaign hero",
        "Use a stacked, centered layout for announcements, campaigns, and simple conversion pages.",
        {
          eyebrow: "Public campaign",
          title: "Safer communities start with trusted information",
          description: "Find verified guidance, public notices, and citizen services in one place.",
          align: "center",
          layout: "stacked",
          size: "default",
          variant: "soft",
          primaryLabel: "Browse services",
          primaryHref: "#services",
        },
      ),
      advanced(
        "Hero with badges and trust",
        "Add product proof, audience badges, and supporting trust information.",
        {
          eyebrow: "Developer platform",
          title: "Ship reliable interfaces faster",
          highlight: "without duplicating design work",
          description:
            "Reusable components, server rendering, themes, accessibility, and responsive behavior.",
          badges: ["SSR first", "Theme aware", "Accessible"],
          trustItems: ["108 UI components", "Light and dark themes", "Mobile ready"],
          layout: "split",
          visualPosition: "left",
          visualStyle: "soft",
          variant: "raised",
        },
        { visual: visualPanel },
      ),
    ],
    playground: { layout: "split", visualPosition: "right", maxWidth: "wide" },
    options: {
      align: ["left", "center", "right"],
      size: ["compact", "default", "lg", "xl"],
      layout: ["split", "stacked", "content"],
      visualPosition: ["left", "right"],
      visualStyle: ["plain", "card", "soft"],
      variant: ["default", "soft", "raised", "outline", "gradient", "solid", "minimal"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
    },
  },

  HeroActions: {
    demos: [
      standard(
        "Primary and secondary actions",
        "Group the most important hero actions with consistent spacing and hierarchy.",
        { actions: heroActions, align: "left", orientation: "horizontal" },
      ),
      compact(
        "Centered campaign actions",
        "Center actions beneath a stacked hero or CTA message.",
        { actions: heroActions, align: "center", orientation: "horizontal", size: "sm" },
      ),
      advanced(
        "Vertical mobile-first actions",
        "Use a vertical group for narrow panels, onboarding, or three-action flows.",
        {
          actions: [
            ...heroActions,
            {
              label: "Contact support",
              href: "#support",
              icon: "icon-[lucide--life-buoy]",
              variant: "ghost",
            },
          ],
          orientation: "vertical",
          fullWidthMobile: true,
          size: "lg",
        },
      ),
    ],
    playground: { actions: heroActions },
    options: {
      align: ["left", "center", "right"],
      orientation: ["horizontal", "vertical"],
      size: ["sm", "default", "lg"],
    },
  },

  SplitHero: {
    demos: [
      standard(
        "Balanced content and visual",
        "Explain a product, department, or service with a balanced two-column introduction.",
        {
          eyebrow: "Balanced layout",
          title: "Combine detailed content",
          highlight: "with a strong visual panel",
          description:
            "Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling.",
          primaryLabel: "View public services",
          primaryHref: "#services",
          primaryIcon: "icon-[lucide--arrow-right]",
          secondaryLabel: "Contact department",
          secondaryHref: "#contact",
          secondaryIcon: "icon-[lucide--phone]",
          visualPosition: "right",
          ratio: "balanced",
          maxWidth: "wide",
        },
        { visual: visualPanel },
      ),
      compact(
        "Visual-first introduction",
        "Reverse the layout when the screenshot, map, or media needs first visual priority.",
        {
          eyebrow: "Visual first",
          title: "Show the interface before the explanation",
          description: "Place the visual on the left and use a compact content column.",
          visualPosition: "left",
          reverse: true,
          ratio: "visual",
          variant: "soft",
        },
        { visual: visualPanel },
      ),
      advanced(
        "Structured service overview",
        "Use structured visual items for capabilities, facts, or proof points.",
        {
          eyebrow: "Department overview",
          title: "One service, clearly explained",
          description: "Pair narrative content with structured supporting information.",
          visualTitle: "Service highlights",
          visualDescription: "A consistent, responsive supporting panel.",
          visualItems: [
            { label: "Online access", value: "24/7", icon: "icon-[lucide--globe-2]" },
            { label: "Response tracking", value: "Live", icon: "icon-[lucide--activity]" },
            { label: "Languages", value: "3", icon: "icon-[lucide--languages]" },
          ],
          ratio: "content",
          variant: "gradient",
        },
      ),
    ],
    options: {
      visualPosition: ["left", "right"],
      ratio: ["balanced", "content", "visual"],
      align: ["left", "center", "right"],
      variant: ["default", "soft", "raised", "gradient", "solid", "minimal"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
    },
  },

  Section: {
    demos: [
      standard(
        "Standard content section",
        "Create predictable vertical rhythm around a page section.",
        { id: "standard-section", spacing: "lg", maxWidth: "xl" },
        { default: '<div class="showcase-content-block">Standard section content</div>' },
      ),
      compact(
        "Compact dashboard section",
        "Reduce spacing for dense application screens and grouped dashboard content.",
        { id: "compact-section", spacing: "sm", maxWidth: "wide", variant: "soft" },
        { default: '<div class="showcase-content-block">Compact dashboard content</div>' },
      ),
      advanced(
        "Full-width surface section",
        "Use a full-width background while retaining a structured content area.",
        {
          id: "full-section",
          fullWidth: true,
          maxWidth: "full",
          borderTop: true,
          borderBottom: true,
          variant: "raised",
        },
        { default: '<div class="showcase-content-block">Full-width public page section</div>' },
      ),
    ],
    options: {
      spacing: ["none", "sm", "md", "lg", "xl"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
      variant: ["default", "soft", "raised", "transparent"],
    },
  },

  SectionHeader: {
    demos: [
      standard(
        "Left-aligned section header",
        "Introduce features, services, content groups, or dashboard areas.",
        {
          eyebrow: "Public services",
          title: "Everything citizens need",
          description:
            "Discover online services, directories, guidance, and verified public information.",
          align: "left",
          maxWidth: "3xl",
        },
      ),
      compact(
        "Centered section header",
        "Use centered hierarchy above feature grids, testimonials, and campaign content.",
        {
          eyebrow: "Capabilities",
          title: "A consistent component system",
          description: "Compose complete pages without rebuilding spacing and typography.",
          align: "center",
          size: "compact",
        },
      ),
      advanced(
        "Large editorial header",
        "Use a larger heading for major landing-page sections and product storytelling.",
        {
          eyebrow: "Platform",
          title: "Designed for complex public and enterprise interfaces",
          description: "Theme-aware, responsive, accessible, and server-rendered.",
          align: "left",
          size: "large",
          maxWidth: "full",
        },
      ),
    ],
    options: {
      align: ["left", "center", "right"],
      size: ["compact", "default", "large"],
      maxWidth: ["compact", "lg", "xl", "3xl", "full"],
    },
  },

  MarketingSectionHeader: {
    demos: [
      standard(
        "Split header with action",
        "Pair marketing copy with a clear secondary navigation action.",
        {
          eyebrow: "Platform capabilities",
          title: "Build complete public experiences",
          description: "Use reusable sections, cards, metrics, heroes, and CTAs.",
          align: "split",
          actionLabel: "Explore components",
          actionHref: "#components",
          actionIcon: "icon-[lucide--arrow-right]",
        },
      ),
      compact(
        "Centered marketing header",
        "Use a centered configuration above campaigns, proof, and feature collections.",
        {
          eyebrow: "Why WRNexusJS",
          title: "One coherent design system",
          description: "Consistent presentation across public pages and product applications.",
          align: "center",
          size: "compact",
        },
      ),
      advanced(
        "External resource header",
        "Link to supporting documentation or an external resource.",
        {
          eyebrow: "Developer resources",
          title: "Learn the framework through working examples",
          description:
            "Every component page includes live demos, playground controls, events, and API details.",
          actionLabel: "Open documentation",
          actionHref: "https://wrnexusjs.dev",
          actionExternal: true,
          align: "split",
          size: "large",
        },
      ),
    ],
    options: {
      align: ["left", "center", "right", "split"],
      size: ["compact", "default", "large"],
    },
  },

  TextLink: {
    demos: [
      standard(
        "Inline directional link",
        "Use a lightweight link at the end of a card, section, or short content block.",
        { label: "Learn more", href: "#learn", showArrow: true, variant: "default" },
      ),
      compact(
        "Underlined content link",
        "Use an underline when the link appears inside long-form text.",
        {
          label: "Read the complete guide",
          href: "#guide",
          underline: true,
          showArrow: false,
          size: "sm",
        },
      ),
      advanced(
        "External developer link",
        "Clearly communicate that a resource opens outside the current application.",
        {
          label: "Open WRNexusJS documentation",
          href: "https://wrnexusjs.dev",
          external: true,
          target: "_blank",
          icon: "icon-[lucide--book-open]",
          iconPosition: "start",
          showArrow: false,
          variant: "soft",
        },
      ),
    ],
    options: {
      iconPosition: ["start", "end"],
      size: ["sm", "default", "lg"],
      variant: ["default", "soft", "ghost", "minimal"],
    },
  },

  FeatureGrid: {
    demos: [
      standard(
        "Three-column service grid",
        "Arrange services or capabilities as equal-height responsive cards.",
        {
          items: featureItems,
          columns: 3,
          tabletColumns: 2,
          mobileColumns: 1,
          gap: "lg",
          equalHeight: true,
          maxWidth: "full",
        },
      ),
      compact(
        "Compact four-column grid",
        "Use smaller gaps and four columns for short benefit or capability cards.",
        {
          items: featureItems.concat([
            {
              icon: "icon-[lucide--file-check-2]",
              title: "Certificates",
              description: "Request and track certificates online.",
              href: "#certificates",
              color: "warning",
            },
          ]),
          columns: 4,
          tabletColumns: 2,
          mobileColumns: 1,
          gap: "sm",
          variant: "soft",
        },
      ),
      advanced(
        "Auto-fit feature collection",
        "Let cards wrap automatically according to a minimum useful width.",
        {
          items: featureItems,
          minItemWidth: "18rem",
          columns: 3,
          gap: "xl",
          variant: "panel",
          maxWidth: "wide",
        },
      ),
    ],
    playground: {
      items: featureItems,
      columns: 3,
      tabletColumns: 2,
      mobileColumns: 1,
      maxWidth: "full",
    },
    options: {
      columns: ["1", "2", "3", "4", "5", "6"],
      tabletColumns: ["1", "2", "3", "4"],
      mobileColumns: ["1", "2"],
      gap: ["none", "sm", "md", "lg", "xl"],
      align: ["start", "center", "end", "stretch"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
      variant: ["default", "panel", "soft"],
    },
  },

  FeatureCard: {
    demos: [
      standard(
        "Linked service card",
        "Present one service with an icon, hierarchy, badge, and clear action.",
        { ...featureItems[0], iconStyle: "soft", stretchedLink: true },
      ),
      compact(
        "Image-led feature card",
        "Use a visual preview for products, campaigns, dashboards, or service explanations.",
        {
          title: "Unified citizen portal",
          description: "Access trusted services from one responsive interface.",
          image: "/showcase-images/dashboard-preview.svg",
          imageAlt: "Abstract dashboard preview",
          imagePosition: "top",
          imageAspect: "wide",
          href: "#portal",
          actionLabel: "Open portal",
          badge: "Featured",
          color: "info",
          variant: "raised",
        },
      ),
      advanced(
        "Solid callout card",
        "Use stronger contrast for a featured capability or high-priority service.",
        {
          icon: "icon-[lucide--siren]",
          eyebrow: "Emergency",
          title: "Get urgent help",
          description: "Find verified emergency contacts and immediate safety guidance.",
          href: "#emergency",
          actionLabel: "View emergency help",
          badge: "Important",
          color: "danger",
          variant: "solid",
          hover: "glow",
        },
      ),
    ],
    options: {
      iconStyle: ["plain", "soft", "solid", "outline"],
      iconSize: ["sm", "default", "lg"],
      imagePosition: ["top", "left", "right"],
      imageAspect: ["square", "wide", "video", "portrait"],
      variant: ["default", "raised", "soft", "outline", "ghost", "minimal", "solid", "gradient"],
      hover: ["none", "lift", "shadow", "border", "glow"],
      align: ["left", "center", "right"],
    },
  },

  FeatureIconCard: {
    demos: [
      standard(
        "Icon-led capability card",
        "Use a compact card for one feature, benefit, or linked capability.",
        {
          icon: "icon-[lucide--shield-check]",
          title: "Secure by design",
          description: "Build with consistent validation, accessibility, and theme support.",
          href: "#security",
          actionLabel: "Review security",
          badge: "Core",
        },
      ),
      compact(
        "Centered benefit card",
        "Center the content for short benefit grids and campaign proof points.",
        {
          icon: "icon-[lucide--gauge]",
          title: "Fast rendering",
          description: "Server-first output with focused client behavior.",
          align: "center",
          size: "compact",
          iconVariant: "solid",
          color: "info",
        },
      ),
      advanced(
        "Highlighted linked card",
        "Use a stronger raised treatment for a featured capability.",
        {
          icon: "icon-[lucide--workflow]",
          title: "Composable workflows",
          description: "Connect forms, services, data, and actions without duplicating UI.",
          href: "#workflows",
          actionLabel: "Explore workflows",
          variant: "raised",
          hover: "lift",
          color: "success",
        },
      ),
    ],
    options: {
      iconSize: ["sm", "md", "lg"],
      iconVariant: ["plain", "soft", "solid", "outline"],
      size: ["compact", "default", "large"],
      variant: ["default", "soft", "raised", "outline", "minimal"],
      align: ["left", "center", "right"],
      hover: ["none", "lift", "border", "glow"],
    },
  },

  MetricGrid: {
    demos: [
      standard(
        "Three-column KPI grid",
        "Display operational values in a full-width, responsive grid.",
        {
          items: metricItems,
          columns: 3,
          tabletColumns: 2,
          mobileColumns: 1,
          gap: "lg",
          maxWidth: "full",
          equalHeight: true,
        },
      ),
      compact(
        "Unified metrics bar",
        "Use dividers to present compact metrics as one cohesive surface.",
        {
          items: metricItems,
          columns: 3,
          tabletColumns: 2,
          mobileColumns: 1,
          gap: "none",
          dividers: true,
          size: "sm",
          maxWidth: "wide",
        },
      ),
      advanced(
        "Auto-fit monitoring grid",
        "Allow cards to wrap automatically when the number of metrics changes.",
        {
          items: metricItems.concat([
            {
              label: "Response time",
              value: "1.8",
              suffix: "s",
              description: "Median API response",
              icon: "icon-[lucide--timer]",
              color: "warning",
              progress: 72,
              progressLabel: "Target",
            },
          ]),
          minItemWidth: "17rem",
          columns: 4,
          variant: "soft",
          maxWidth: "full",
        },
      ),
    ],
    playground: {
      items: metricItems,
      columns: 3,
      tabletColumns: 2,
      mobileColumns: 1,
      maxWidth: "full",
    },
    options: {
      columns: ["1", "2", "3", "4", "5", "6"],
      tabletColumns: ["1", "2", "3", "4"],
      mobileColumns: ["1", "2"],
      gap: ["none", "sm", "md", "lg", "xl"],
      variant: ["default", "panel", "soft"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
    },
  },

  MetricCard: {
    demos: [
      standard(
        "Operational KPI",
        "Display one metric with a clear label, value, supporting description, and trend.",
        { ...metricItems[2], actionLabel: "Open status", href: "#status" },
      ),
      compact("Progress metric", "Add progress when a value is measured against a clear target.", {
        label: "Profile completion",
        value: "72",
        suffix: "%",
        description: "Complete the remaining account and security steps.",
        icon: "icon-[lucide--circle-user-round]",
        progress: 72,
        progressLabel: "Account setup",
        color: "info",
        variant: "soft",
      }),
      advanced(
        "Selectable dashboard metric",
        "Emit select and action events from interactive cards used in dashboards.",
        {
          label: "Open complaints",
          value: "38",
          description: "Cases waiting for review or assignment.",
          icon: "icon-[lucide--inbox]",
          badge: "Needs review",
          selectable: true,
          actionLabel: "Review queue",
          href: "#queue",
          color: "warning",
          variant: "raised",
          hover: "glow",
        },
      ),
    ],
    options: {
      iconStyle: ["plain", "soft", "solid", "outline"],
      trendDirection: ["neutral", "up", "down", "positive", "negative"],
      variant: ["default", "raised", "soft", "outline", "minimal", "solid", "gradient"],
      hover: ["none", "lift", "border", "glow"],
      align: ["left", "center", "right"],
    },
  },

  StatsBar: {
    demos: [
      standard(
        "Public proof strip",
        "Present key facts and trust signals in one compact responsive row.",
        {
          items: statsItems,
          columns: 4,
          compact: true,
          dividers: true,
          icons: true,
          variant: "raised",
          maxWidth: "xl",
        },
      ),
      compact(
        "Three-stat compact bar",
        "Use fewer facts with tighter spacing below a hero or page header.",
        {
          items: statsItems.slice(0, 3),
          columns: 3,
          compact: true,
          dividers: true,
          icons: false,
          variant: "soft",
          maxWidth: "wide",
        },
      ),
      advanced(
        "Full-width solid statistics",
        "Use a high-contrast statistics bar as a major landing-page transition.",
        {
          items: statsItems,
          columns: 4,
          compact: false,
          dividers: false,
          icons: true,
          variant: "solid",
          maxWidth: "full",
          color: "primary",
        },
      ),
    ],
    playground: { items: statsItems, columns: 4, maxWidth: "xl" },
    options: {
      columns: ["1", "2", "3", "4", "5", "6"],
      variant: ["default", "raised", "soft", "outline", "minimal", "solid"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
    },
  },

  CTASection: {
    demos: [
      standard(
        "Split conversion CTA",
        "Close a major page section with a clear action and supporting visual content.",
        {
          eyebrow: "Ready to continue",
          title: "Build public pages with reusable components",
          description:
            "Keep application pages focused on content and business data while the shared UI package owns presentation.",
          icon: "icon-[lucide--rocket]",
          align: "split",
          primaryLabel: "Use these components",
          primaryHref: "#components",
          primaryIcon: "icon-[lucide--blocks]",
          secondaryLabel: "Back to home",
          secondaryHref: "/",
          secondaryIcon: "icon-[lucide--house]",
          variant: "gradient",
          maxWidth: "full",
        },
        { visual: visualPanel },
      ),
      compact(
        "Centered signup CTA",
        "Use a focused centered CTA after pricing, guides, or product explanations.",
        {
          eyebrow: "Get started",
          title: "Create your first WRNexusJS page",
          description:
            "Install the framework and compose your application with the component system.",
          align: "center",
          primaryLabel: "Read installation",
          primaryHref: "/installation",
          secondaryLabel: "Browse examples",
          secondaryHref: "/blocks",
          variant: "solid",
          maxWidth: "xl",
        },
      ),
      advanced(
        "Full-bleed service CTA",
        "Use an edge-to-edge surface for high-priority registration, service, or contact actions.",
        {
          eyebrow: "Citizen account",
          title: "Access services and track requests securely",
          description: "Create an account to submit, track, and manage citizen-service requests.",
          align: "left",
          primaryLabel: "Create account",
          primaryHref: "#register",
          secondaryLabel: "Sign in",
          secondaryHref: "#sign-in",
          visualIcon: "icon-[lucide--shield-check]",
          visualTitle: "Secure public access",
          visualDescription: "One account for requests, certificates, updates, and notifications.",
          fullBleed: true,
          variant: "solid",
          maxWidth: "full",
        },
      ),
    ],
    options: {
      align: ["left", "center", "right", "split"],
      size: ["compact", "default", "large"],
      visualPosition: ["left", "right"],
      variant: ["default", "soft", "outline", "solid", "gradient", "minimal"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
    },
  },

  BackToTop: {
    demos: [
      standard(
        "Floating round control",
        "Return visitors to the top of a long page after the scroll threshold is reached.",
        { alwaysVisible: true, position: "right", shape: "round", variant: "solid" },
      ),
      compact(
        "Pill control with label",
        "Show a visible text label when the action needs extra clarity.",
        {
          alwaysVisible: true,
          showLabel: true,
          label: "Back to top",
          position: "right",
          shape: "pill",
          variant: "soft",
        },
      ),
      advanced(
        "Progress-aware control",
        "Display page scroll progress around the floating control on long articles or directories.",
        {
          alwaysVisible: true,
          showProgress: true,
          position: "left",
          offset: "lg",
          shape: "round",
          variant: "outline",
        },
      ),
    ],
    playground: { alwaysVisible: true },
    options: {
      position: ["left", "center", "right"],
      offset: ["sm", "md", "lg"],
      behavior: ["auto", "smooth"],
      variant: ["solid", "soft", "outline", "ghost", "minimal"],
      shape: ["round", "rounded", "pill"],
      size: ["sm", "default", "lg"],
    },
  },

  Footer: {
    demos: [
      standard(
        "Four-column public footer",
        "Organize product, developer, resource, and company links into responsive columns.",
        {
          items: footerItems,
          columns: 4,
          maxWidth: "wide",
          copyright: "© 2026 WRNexusJS. All rights reserved.",
        },
      ),
      compact(
        "Compact application footer",
        "Use fewer columns and reduced spacing inside product applications.",
        {
          items: footerItems.slice(0, 3),
          columns: 3,
          size: "compact",
          maxWidth: "compact",
          copyright: "WRNexusJS component showcase",
        },
      ),
      advanced(
        "Full-width footer with slots",
        "Compose pre-footer, post-footer, and legal content around structured navigation.",
        {
          items: footerItems,
          columns: 4,
          size: "spacious",
          maxWidth: "full",
          copyright: "Built with WRNexusJS",
        },
        {
          "pre-footer":
            '<div class="showcase-footer-banner"><strong>Stay informed</strong><a href="#notifications">Manage notifications</a></div>',
          "copyright-right":
            '<div class="showcase-footer-legal"><a href="#privacy">Privacy</a><a href="#terms">Terms</a></div>',
        },
      ),
    ],
    playground: { items: footerItems, columns: 4, maxWidth: "wide" },
    options: {
      columns: ["1", "2", "3", "4", "5"],
      size: ["compact", "default", "spacious"],
      maxWidth: ["compact", "wide", "xl", "full"],
    },
  },

  ContextMenu: {
    demos: [
      standard(
        "Right-click record actions",
        "Expose actions that apply to the selected record or canvas location.",
        {
          items: menuItems,
          title: "Record actions",
          description: "Right-click the target surface",
          trigger: "contextmenu",
          placement: "pointer",
        },
        {
          trigger: '<div class="showcase-context-target">Right-click for contextual actions</div>',
        },
      ),
      compact(
        "Click-triggered compact menu",
        "Use a button-triggered context menu when discoverability matters.",
        {
          items: menuItems,
          title: "Quick actions",
          trigger: "click",
          size: "sm",
          minWidth: "12rem",
        },
        { trigger: '<button type="button" class="showcase-action">Open quick actions</button>' },
      ),
      advanced(
        "Pointer and keyboard menu",
        "Support right-click, click, and keyboard activation without forcing the menu open.",
        {
          items: menuItems,
          title: "Accessible actions",
          open: false,
          defaultOpen: false,
          trigger: "both",
          variant: "soft",
          placement: "bottom-start",
        },
        {
          trigger:
            '<button type="button" class="showcase-action">Click, press Enter, or right-click</button>',
        },
      ),
    ],
    playground: { items: menuItems, open: false, defaultOpen: false, trigger: "click" },
    options: {
      trigger: ["contextmenu", "click", "both", "manual"],
      placement: ["pointer", "top-start", "top-end", "bottom-start", "bottom-end"],
      align: ["start", "center", "end"],
      size: ["sm", "default", "lg"],
      variant: ["default", "raised", "soft", "outline"],
    },
  },

  Dropdown: {
    demos: [
      standard("Action dropdown", "Group related actions behind one compact trigger.", {
        label: "Open actions",
        icon: "icon-[lucide--menu]",
        items: menuItems,
        placement: "bottom-start",
        width: "lg",
      }),
      compact(
        "Compact overflow menu",
        "Use an icon-led compact menu in tables, cards, and toolbars.",
        {
          label: "More actions",
          icon: "icon-[lucide--ellipsis]",
          items: menuItems,
          size: "sm",
          width: "sm",
          showChevron: false,
          variant: "soft",
        },
      ),
      advanced(
        "Detailed action menu",
        "Open the menu from its trigger to preview placement, descriptions, shortcuts, danger states, and event output.",
        {
          label: "Review detailed menu",
          items: menuItems,
          open: false,
          defaultOpen: false,
          placement: "bottom-end",
          width: "xl",
          variant: "raised",
        },
      ),
    ],
    playground: {
      items: menuItems,
      open: false,
      defaultOpen: false,
      label: "Open playground menu",
    },
    options: {
      placement: ["top-start", "top-end", "bottom-start", "bottom-end"],
      width: ["sm", "md", "lg", "xl", "full"],
      size: ["sm", "default", "lg"],
      variant: ["default", "raised", "soft", "outline"],
    },
  },

  Drawer: {
    demos: [
      standard(
        "Right-side detail drawer",
        "Keep supporting record details or forms available without leaving the page.",
        {
          triggerLabel: "Open drawer",
          triggerIcon: "icon-[lucide--panel-right-open]",
          title: "Citizen service details",
          description: "Review supporting information without leaving the current page.",
          icon: "icon-[lucide--panel-right]",
          placement: "right",
          size: "md",
        },
        {
          default:
            '<div class="showcase-overlay-content"><p>Place forms, filters, navigation, or record details here.</p></div>',
          footer:
            '<button type="button" class="showcase-action showcase-action--primary">Save changes</button>',
        },
      ),
      compact(
        "Bottom mobile drawer",
        "Use a bottom sheet for compact mobile workflows and contextual actions.",
        {
          triggerLabel: "Open mobile sheet",
          title: "Choose an action",
          placement: "bottom",
          size: "sm",
          variant: "soft",
        },
        {
          default:
            '<div class="showcase-overlay-content"><p>Mobile-friendly supporting actions.</p></div>',
        },
      ),
      advanced(
        "Wide navigation drawer",
        "Open a wide, scrollable drawer with custom header and footer content from an explicit trigger.",
        {
          open: false,
          defaultOpen: false,
          triggerLabel: "Open navigation drawer",
          triggerIcon: "icon-[lucide--panel-left-open]",
          title: "Navigation and filters",
          description: "A wide drawer for complex supporting workflows.",
          placement: "left",
          size: "lg",
          scrollable: true,
        },
        {
          default:
            '<div class="showcase-overlay-content showcase-overlay-content--tall"><p>Long scrollable content</p><p>Filters, navigation, details, and forms can be composed here.</p></div>',
        },
      ),
    ],
    playground: {
      open: false,
      defaultOpen: false,
      triggerLabel: "Open playground drawer",
      title: "Drawer playground",
    },
    options: {
      placement: ["left", "right", "top", "bottom"],
      size: ["sm", "md", "lg", "xl", "full"],
      variant: ["default", "soft", "outline", "solid"],
    },
  },

  Modal: {
    demos: [
      standard(
        "Confirmation modal",
        "Focus the user on one clear decision with confirm and cancel actions.",
        {
          triggerLabel: "Open modal",
          triggerIcon: "icon-[lucide--square-stack]",
          title: "Confirm service request",
          description: "Review the information before continuing.",
          icon: "icon-[lucide--shield-check]",
          confirmLabel: "Confirm request",
          confirmIcon: "icon-[lucide--check]",
          cancelLabel: "Go back",
          size: "md",
        },
        {
          default:
            '<div class="showcase-overlay-content"><p>This request will be submitted for review.</p></div>',
        },
      ),
      compact("Destructive confirmation", "Use a danger treatment for irreversible operations.", {
        triggerLabel: "Delete record",
        title: "Delete this record?",
        description: "This action cannot be undone.",
        confirmLabel: "Delete record",
        cancelLabel: "Keep record",
        destructive: true,
        size: "sm",
        variant: "outline",
      }),
      advanced(
        "Scrollable form modal",
        "Open a larger modal for focused forms while keeping actions visible.",
        {
          open: false,
          defaultOpen: false,
          triggerLabel: "Open request form",
          triggerIcon: "icon-[lucide--file-plus-2]",
          title: "Create service request",
          description: "Complete the required information.",
          confirmLabel: "Submit request",
          size: "lg",
          scrollable: true,
          variant: "soft",
        },
        {
          default:
            '<div class="showcase-overlay-content showcase-overlay-content--tall"><label>Request title<input value="Sample request" /></label><label>Description<textarea>Supporting information</textarea></label></div>',
        },
      ),
    ],
    playground: {
      open: false,
      defaultOpen: false,
      triggerLabel: "Open playground modal",
      title: "Modal playground",
    },
    options: {
      size: ["sm", "md", "lg", "xl", "full"],
      placement: ["center", "top"],
      variant: ["default", "soft", "outline", "solid"],
    },
  },

  Popover: {
    demos: [
      standard(
        "Supporting information",
        "Attach contextual information and actions to a nearby trigger.",
        {
          triggerLabel: "View details",
          triggerIcon: "icon-[lucide--info]",
          title: "Verified public information",
          description: "This panel can contain text, actions, forms, or custom content.",
          icon: "icon-[lucide--badge-check]",
          actionLabel: "Open guide",
          actionHref: "#guide",
          width: "lg",
        },
        {
          default:
            "<p>Popover content remains attached to its trigger and becomes mobile-friendly on small screens.</p>",
        },
      ),
      compact(
        "Compact action popover",
        "Use a small popover for quick actions and concise explanations.",
        {
          triggerLabel: "Quick actions",
          triggerIcon: "icon-[lucide--zap]",
          title: "Quick actions",
          placement: "top",
          width: "sm",
          size: "sm",
          variant: "soft",
        },
        {
          default:
            '<div class="showcase-inline-actions"><button class="showcase-action">Copy</button><button class="showcase-action">Share</button></div>',
        },
      ),
      advanced(
        "Rich status popover",
        "Open a wide panel with close control, arrow, custom content, and footer action.",
        {
          open: false,
          defaultOpen: false,
          triggerLabel: "Open rich panel",
          title: "Service status",
          description: "Current operational information.",
          placement: "bottom-end",
          width: "xl",
          showClose: true,
          actionLabel: "Open status page",
          actionHref: "#status",
          variant: "raised",
        },
        {
          default:
            '<div class="showcase-status-panel"><strong>All systems operational</strong><span>Last checked moments ago</span></div>',
        },
      ),
    ],
    playground: {
      open: false,
      defaultOpen: false,
      triggerLabel: "Open playground popover",
      title: "Popover playground",
    },
    options: {
      placement: [
        "top",
        "top-start",
        "top-end",
        "bottom",
        "bottom-start",
        "bottom-end",
        "left",
        "right",
      ],
      width: ["sm", "md", "lg", "xl"],
      size: ["sm", "default", "lg"],
      variant: ["default", "raised", "soft", "outline"],
    },
  },

  Tooltip: {
    demos: [
      standard(
        "Hover and focus tooltip",
        "Explain an unfamiliar control without interrupting the workflow.",
        {
          id: "help-tooltip",
          title: "Helpful information",
          content: "Tooltips explain controls without interrupting the user.",
          placement: "top",
        },
        { trigger: '<button type="button" class="showcase-action">Hover or focus</button>' },
      ),
      compact(
        "Click tooltip",
        "Use click activation for touch-first or interactive help.",
        {
          id: "click-tooltip",
          content: "Click again or press Escape to close.",
          trigger: "click",
          placement: "bottom",
          size: "sm",
          variant: "soft",
        },
        { trigger: '<button type="button" class="showcase-action">Click for help</button>' },
      ),
      advanced(
        "Interactive rich tooltip",
        "Allow pointer interaction when the tooltip contains supporting links or controls.",
        {
          id: "interactive-tooltip",
          title: "Keyboard shortcut",
          description: "Open global search from anywhere.",
          content: "Press Ctrl or Command plus K.",
          trigger: "both",
          placement: "right",
          interactive: true,
          maxWidth: "22rem",
          variant: "dark",
        },
        { trigger: '<button type="button" class="showcase-action">Show shortcut</button>' },
      ),
    ],
    playground: {
      open: false,
      defaultOpen: false,
      trigger: "hover",
      content: "Hover or focus the trigger to inspect the tooltip.",
    },
    options: {
      trigger: ["hover", "focus", "click", "both"],
      placement: [
        "top",
        "top-start",
        "top-end",
        "bottom",
        "bottom-start",
        "bottom-end",
        "left",
        "right",
      ],
      size: ["sm", "default", "lg"],
      variant: ["dark", "light", "soft", "solid"],
    },
  },

  Container: {
    demos: [
      standard(
        "Standard content container",
        "Keep page content aligned to a predictable readable width.",
        { maxWidth: "xl", size: "default" },
        { default: '<div class="showcase-content-block">Centered container content</div>' },
      ),
      compact(
        "Compact reading container",
        "Use a smaller maximum width for forms, legal copy, and focused content.",
        { maxWidth: "compact", size: "compact" },
        { default: '<div class="showcase-content-block">Compact readable content</div>' },
      ),
      advanced(
        "Full-width layout container",
        "Allow dashboards and data-heavy pages to use the available width.",
        { maxWidth: "full", size: "spacious" },
        { default: '<div class="showcase-content-block">Full-width dashboard content</div>' },
      ),
    ],
    options: {
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
      size: ["compact", "default", "spacious"],
    },
  },

  Grid: {
    demos: [
      standard(
        "Responsive three-column grid",
        "Arrange equal-width children with consistent gaps.",
        { columns: 3, gap: "md", maxWidth: "xl" },
        {
          default:
            '<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div>',
        },
      ),
      compact(
        "Dense four-column grid",
        "Use smaller gaps for dashboards and compact overview pages.",
        { columns: 4, gap: "sm", maxWidth: "wide", size: "compact" },
        {
          default:
            '<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div>',
        },
      ),
      advanced(
        "Full-width two-column grid",
        "Use larger gaps for editorial or marketing split layouts.",
        { columns: 2, gap: "xl", maxWidth: "full", size: "spacious" },
        {
          default:
            '<div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div>',
        },
      ),
    ],
    options: {
      columns: ["1", "2", "3", "4", "5", "6"],
      gap: ["none", "sm", "md", "lg", "xl"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
    },
  },

  Columns: {
    demos: [
      standard(
        "Two-column content layout",
        "Split supporting content into balanced responsive columns.",
        { columns: 2, gap: "lg", maxWidth: "xl" },
        {
          default:
            '<div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div>',
        },
      ),
      compact(
        "Three compact columns",
        "Use three columns for short summaries and dashboard groups.",
        { columns: 3, gap: "sm", size: "compact", maxWidth: "wide" },
        {
          default:
            '<div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div>',
        },
      ),
      advanced(
        "Full-width four columns",
        "Use the full available width for structured application content.",
        { columns: 4, gap: "md", maxWidth: "full" },
        {
          default:
            '<div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div>',
        },
      ),
    ],
    options: {
      columns: ["1", "2", "3", "4", "5", "6"],
      gap: ["none", "sm", "md", "lg", "xl"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
    },
  },

  Card: {
    demos: [
      standard(
        "Structured content card",
        "Group a title, description, content, and supporting actions.",
        {
          title: "Citizen service",
          description: "Access a trusted online service.",
          variant: "default",
        },
        {
          default:
            '<p class="showcase-card-copy">Supporting content belongs inside the default slot.</p>',
        },
      ),
      compact(
        "Compact dashboard card",
        "Use reduced spacing for metrics, filters, and operational information.",
        {
          title: "Open requests",
          description: "Requests waiting for assignment.",
          size: "compact",
          variant: "soft",
        },
        { default: '<strong class="showcase-card-value">38</strong>' },
      ),
      advanced(
        "Raised interactive card",
        "Use a stronger visual treatment for featured content.",
        {
          title: "Featured guide",
          description: "A complete guide to public safety and emergency readiness.",
          size: "spacious",
          variant: "raised",
        },
        { default: '<a href="#guide" class="showcase-action">Read guide</a>' },
      ),
    ],
    options: {
      size: ["compact", "default", "spacious"],
      variant: ["default", "soft", "raised", "outline", "minimal"],
    },
  },

  Link: {
    demos: [
      standard("Standard navigation link", "Use for routes within the current application.", {
        label: "Open components",
        href: "/base",
      }),
      compact(
        "External resource link",
        "Communicate external navigation and use safe target attributes.",
        {
          label: "WRNexusJS documentation",
          href: "https://wrnexusjs.dev",
          external: true,
          target: "_blank",
        },
      ),
      advanced(
        "Large emphasized link",
        "Use a larger link in empty states, promotional cards, and resource lists.",
        { label: "Explore framework guides", href: "/framework-guides", size: "lg", color: "info" },
      ),
    ],
    options: { size: ["sm", "default", "lg"], target: ["_self", "_blank", "_parent", "_top"] },
  },

  Image: {
    demos: [
      standard(
        "Responsive content image",
        "Render a responsive image with meaningful alternative text.",
        {
          src: "/showcase-images/violet-circle.svg",
          alt: "Abstract violet circle on a dark surface",
          width: "800",
          height: "450",
        },
      ),
      compact(
        "Rounded thumbnail",
        "Use a rounded image in cards, directories, and compact summaries.",
        {
          src: "/showcase-images/blue-mountain.svg",
          alt: "Abstract blue thumbnail",
          width: "400",
          height: "400",
          rounded: true,
          size: "sm",
        },
      ),
      advanced(
        "Eager hero image",
        "Use explicit dimensions and eager loading for an above-the-fold visual.",
        {
          src: "/showcase-images/green-hero.svg",
          alt: "Abstract green hero visual",
          width: "1200",
          height: "600",
          loading: "eager",
          rounded: true,
          size: "lg",
        },
      ),
    ],
    options: { loading: ["lazy", "eager"], size: ["sm", "default", "lg"] },
  },

  SearchBox: {
    demos: [
      standard(
        "Site search",
        "Give visitors a clear way to search pages, services, or resources.",
        {
          label: "Search documentation",
          name: "site-search",
          placeholder: "Search components and guides",
          type: "search",
        },
      ),
      compact(
        "Compact directory search",
        "Use a compact field above tables, lists, and directories.",
        {
          label: "Search stations",
          name: "station-search",
          placeholder: "Name, district, or jurisdiction",
          size: "sm",
        },
      ),
      advanced(
        "Required service lookup",
        "Use validation and required semantics in focused lookup flows.",
        {
          label: "Complaint reference",
          name: "complaint-reference",
          placeholder: "Enter reference number",
          required: true,
          size: "lg",
          color: "info",
        },
      ),
    ],
    options: { size: ["sm", "default", "lg"], type: ["search", "text"] },
  },

  Map: {
    demos: [
      standard(
        "Station directory map",
        "Present locations with supporting names, addresses, and actions.",
        {
          title: "Nearby police stations",
          description: "Select a station to view contact details and jurisdiction information.",
          items: [
            {
              title: "Central station",
              description: "Main Road",
              latitude: 18.5204,
              longitude: 73.8567,
            },
            {
              title: "North station",
              description: "University Road",
              latitude: 18.559,
              longitude: 73.807,
            },
          ],
        },
      ),
      compact(
        "Compact location preview",
        "Use a smaller map preview inside cards, drawers, and record details.",
        {
          title: "Service location",
          description: "Public service office",
          items: [{ title: "Public office", description: "City centre" }],
          size: "sm",
          variant: "soft",
        },
      ),
      advanced(
        "Operations map",
        "Use a larger map surface for multiple markers and operational context.",
        {
          title: "Jurisdiction overview",
          description: "Stations, service areas, and public facilities.",
          items: [{ title: "Station A" }, { title: "Station B" }, { title: "Control room" }],
          size: "lg",
          variant: "raised",
          color: "info",
        },
      ),
    ],
    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
  },

  List: {
    demos: [
      standard(
        "Linked resource list",
        "Present related links with supporting descriptions and icons.",
        {
          title: "Citizen resources",
          description: "Commonly requested public information.",
          items: [
            { label: "Report crime", href: "#report", icon: "icon-[lucide--shield-alert]" },
            { label: "Track complaint", href: "#track", icon: "icon-[lucide--scan-search]" },
            { label: "Certificates", href: "#certificates", icon: "icon-[lucide--file-check-2]" },
          ],
        },
      ),
      compact(
        "Compact status list",
        "Use a dense list in sidebars, dashboards, and record panels.",
        {
          title: "Current status",
          items: [
            { label: "Application received", status: "Complete" },
            { label: "Verification", status: "In progress" },
            { label: "Decision", status: "Pending" },
          ],
          size: "sm",
          variant: "soft",
        },
      ),
      advanced(
        "Rich action list",
        "Combine descriptions, icons, statuses, and actions in a structured collection.",
        {
          title: "Service requests",
          description: "Recent requests and their current status.",
          items: [
            {
              label: "Address verification",
              description: "Submitted yesterday",
              status: "Review",
              href: "#request-1",
            },
            {
              label: "Character certificate",
              description: "Submitted 3 days ago",
              status: "Approved",
              href: "#request-2",
            },
          ],
          size: "lg",
          variant: "raised",
        },
      ),
    ],
    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
  },

  Marquee: {
    demos: [
      standard(
        "Partner and capability strip",
        "Continuously present short labels, partners, channels, or capabilities.",
        {
          title: "Supported capabilities",
          items: [
            { label: "SSR" },
            { label: "CSR" },
            { label: "Themes" },
            { label: "Accessibility" },
            { label: "Responsive UI" },
          ],
          variant: "default",
        },
      ),
      compact("Compact announcement ticker", "Use a dense ticker for short operational updates.", {
        items: [
          { label: "All services operational" },
          { label: "New components published" },
          { label: "Documentation updated" },
        ],
        size: "sm",
        variant: "soft",
      }),
      advanced(
        "Large visual marquee",
        "Use stronger spacing and richer items on marketing pages.",
        {
          title: "Built for complete digital platforms",
          items: [
            { label: "Public portals", icon: "icon-[lucide--landmark]" },
            { label: "Enterprise systems", icon: "icon-[lucide--building-2]" },
            { label: "Developer tools", icon: "icon-[lucide--code-2]" },
          ],
          size: "lg",
          variant: "raised",
          color: "info",
        },
      ),
    ],
    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
  },

  Tabs: {
    demos: [
      standard(
        "Horizontal content tabs",
        "Switch between related content panels without navigating away.",
        {
          label: "Service information",
          items: [
            { label: "Overview", value: "overview", content: "Overview content" },
            { label: "Requirements", value: "requirements", content: "Requirements content" },
            { label: "Process", value: "process", content: "Process content" },
          ],
          active: "overview",
          orientation: "horizontal",
        },
      ),
      advanced(
        "Mirrored into the URL",
        "With mode=url the selection is written to a query parameter using pushState, so the panel swaps without a page load, the tab survives a reload, and the back button steps through the tabs you visited.",
        {
          label: "Account settings",
          items: [
            { label: "Account", value: "account", description: "Profile and credentials." },
            { label: "Billing", value: "billing", description: "Invoices and payment method." },
            { label: "Team", value: "team", description: "Members and their roles." },
          ],
          active: "account",
          mode: "url",
          param: "tab",
        },
      ),
      compact(
        "Compact application tabs",
        "Use smaller tabs in dashboards, panels, and dense product interfaces.",
        {
          label: "Record views",
          items: [
            { label: "Details", value: "details" },
            { label: "History", value: "history" },
            { label: "Files", value: "files" },
          ],
          active: "details",
          size: "sm",
        },
      ),
      advanced(
        "Vertical settings tabs",
        "Use vertical tabs for settings, configuration, and long-form navigation.",
        {
          label: "Settings",
          items: [
            { label: "Profile", value: "profile", icon: "icon-[lucide--user]" },
            { label: "Security", value: "security", icon: "icon-[lucide--shield]" },
            { label: "Notifications", value: "notifications", icon: "icon-[lucide--bell]" },
          ],
          active: "security",
          orientation: "vertical",
          size: "lg",
        },
      ),
    ],
    options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] },
  },

  Timeline: {
    demos: [
      standard(
        "Application timeline",
        "Explain the sequence and current status of a request or process.",
        {
          title: "Request progress",
          description: "Latest updates for this service request.",
          items: [
            {
              title: "Request submitted",
              description: "Received successfully",
              time: "09:30",
              status: "complete",
            },
            {
              title: "Verification",
              description: "Documents are being reviewed",
              time: "10:15",
              current: true,
            },
            { title: "Decision", description: "Pending verification", time: "—" },
          ],
        },
      ),
      compact(
        "Compact activity history",
        "Use a dense history inside drawers, side panels, and record views.",
        {
          title: "Recent activity",
          items: [
            { title: "Status changed", time: "Today" },
            { title: "Comment added", time: "Yesterday" },
            { title: "Document uploaded", time: "3 days ago" },
          ],
          size: "sm",
          variant: "soft",
        },
      ),
      advanced(
        "Rich milestone timeline",
        "Use icons, descriptions, times, and states for longer workflows.",
        {
          title: "Implementation milestones",
          description: "Planned delivery sequence.",
          items: [
            {
              title: "Foundation",
              description: "Tokens, themes, and primitives",
              icon: "icon-[lucide--layers-3]",
              status: "complete",
            },
            {
              title: "Components",
              description: "Reusable UI and documentation",
              icon: "icon-[lucide--blocks]",
              current: true,
            },
            {
              title: "Applications",
              description: "Compose production interfaces",
              icon: "icon-[lucide--rocket]",
            },
          ],
          size: "lg",
          variant: "raised",
        },
      ),
    ],
    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
  },

  Typography: {
    demos: [
      standard(
        "Readable content typography",
        "Apply consistent typography to headings, paragraphs, lists, and inline content.",
        { maxWidth: "xl", size: "default" },
        {
          default:
            '<div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div>',
        },
      ),
      compact(
        "Compact documentation typography",
        "Use reduced spacing in reference pages and dense product help.",
        { maxWidth: "compact", size: "compact" },
        {
          default:
            '<div class="showcase-typography"><h3>Compact reference</h3><p>Focused content with reduced spacing.</p></div>',
        },
      ),
      advanced(
        "Wide editorial typography",
        "Use wider content and multiple columns for editorial or policy content.",
        { maxWidth: "wide", columns: 2, gap: "xl", size: "spacious" },
        {
          default:
            '<div class="showcase-typography"><h2>Long-form public information</h2><p>Structured editorial content can use a wider two-column layout on large screens.</p><p>Responsive behavior returns content to one column on smaller screens.</p></div>',
        },
      ),
    ],
    options: {
      columns: ["1", "2", "3"],
      gap: ["sm", "md", "lg", "xl"],
      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
      size: ["compact", "default", "spacious"],
    },
  },

  Divider: {
    demos: [
      standard(
        "Horizontal section divider",
        "Separate related content without introducing another container.",
        { orientation: "horizontal", label: "Related information" },
      ),
      compact("Minimal unlabeled divider", "Use a quiet rule between compact content groups.", {
        orientation: "horizontal",
        label: "",
        size: "sm",
      }),
      advanced(
        "Vertical toolbar divider",
        "Separate groups of inline actions in toolbars and navigation.",
        { orientation: "vertical", label: "Actions", size: "lg", color: "info" },
      ),
    ],
    options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] },
  },
};

const genericEventDescriptions = {
  action: "Fires when the component's primary or item action is activated.",
  blur: "Fires when focus leaves the interactive control.",
  cancel: "Fires when the user cancels or dismisses the current workflow.",
  change: "Fires when the component's committed value or selection changes.",
  clear: "Fires after the current value or selection is cleared.",
  click: "Fires when the interactive surface is activated.",
  close: "Fires after the component closes.",
  confirm: "Fires when the user confirms the current action.",
  dismiss: "Fires after the announcement or feedback surface is dismissed.",
  error: "Fires when the component cannot complete an operation.",
  focus: "Fires when the interactive control receives focus.",
  input: "Fires as the editable value changes.",
  load: "Fires after remote or deferred content loads successfully.",
  open: "Fires after the component opens.",
  paste: "Fires after clipboard content is processed.",
  search: "Fires when the current search query changes.",
  select: "Fires when an item, option, card, or result is selected.",
  strength: "Fires when the calculated password-strength state changes.",
  toggle: "Fires when the component changes between open and closed or on and off states.",
};

export function profileFor(name) {
  return componentProfiles[name] ?? null;
}

export function eventDescriptionFor(_componentName, eventName) {
  return (
    genericEventDescriptions[eventName] ?? `Fires when the component emits the ${eventName} event.`
  );
}
