@noodleseed/one 0.32.1 → 0.33.0

package/dist/widget-scaffold-template.js

@@ -0,0 +1,140 @@
+import { commonFiles, manifestName, title } from './project-scaffold-templates.js';
+import { widgetShowcaseHelpers, widgetShowcaseSections, widgetShowcaseView, } from './widget-showcase-template.js';
+export function widgetFiles(name, agentTargets) {
+    const serverName = manifestName(name);
+    const files = commonFiles(name, 'widget', agentTargets, `import { annotations, server, tool, z } from '@noodleseed/one';
+
+const showcaseOutput = z.object({
+  title: z.string(),
+  version: z.string(),
+  description: z.string(),
+  sections: z.array(z.string()),
+});
+
+export default server('${serverName}', { title: '${title(name)}', version: '1.0.0' }, [
+  tool('show_design_system', {
+    description: 'Open an interactive developer gallery of every Noodle React component family.',
+    annotations: annotations.readOnly(),
+    input: z.object({ focus: z.string().default('foundations') }),
+    output: showcaseOutput,
+    fulfil: () => ({
+      title: 'Noodle React design system',
+      version: '1.0.0',
+      description: 'Interactive reference for host-neutral MCP Apps components.',
+      sections: ['foundations', 'forms', 'data', 'feedback', 'overlays', 'layouts'],
+    }),
+    viewTitle: 'Noodle React design system',
+    viewDescription: 'Browse and interact with the public Noodle React design-system components.',
+    invoking: 'Loading the design system…',
+    invoked: 'Design system ready',
+    // Optional host compatibility metadata. Replace this placeholder before public distribution.
+    domain: 'https://your-app.example.com',
+    csp: {
+      connectDomains: [],
+      resourceDomains: [],
+      frameDomains: [],
+    },
+    view: {
+      component: 'design-system-showcase',
+      entry: './views/design-system-showcase.tsx',
+    },
+  }),
+  tool('run_component_demo', {
+    description: 'Return a sample success result for interactive component demos in the gallery.',
+    annotations: annotations.localAction({ destructive: false }),
+    visibility: ['app'],
+    input: z.object({
+      component: z.string(),
+      value: z.string().default('example'),
+    }),
+    output: z.object({
+      ok: z.boolean(),
+      summary: z.string(),
+    }),
+    fulfil: ({ input }) => ({
+      ok: true,
+      summary: \`Ran \${input.component} with \${input.value}.\`,
+    }),
+  }),
+]);
+`, {
+        '@types/react': 'latest',
+        '@types/react-dom': 'latest',
+        '@vitejs/plugin-react': 'latest',
+        react: 'latest',
+        'react-dom': 'latest',
+        vite: 'latest',
+    });
+    return {
+        ...files,
+        'tsconfig.json': `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}
+`,
+        'src/vite-env.d.ts': '/// <reference types="vite/client" />\n',
+        'src/helpers.ts': widgetShowcaseHelpers,
+        'src/views/design-system-showcase.tsx': widgetShowcaseView,
+        'src/views/showcase-sections.tsx': widgetShowcaseSections,
+        'vite.config.ts': `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});
+`,
+        'README.md': `# ${title(name)}
+
+## Run locally (no account or login)
+
+\`\`\`sh
+noodle dev
+\`\`\`
+
+\`noodle dev\` starts the local MCP server and hot-reloads on save. Use \`noodle devtools\` for a
+local widget preview and \`noodle check\` for readiness findings.
+
+## Widget authoring
+
+This React-first widget authoring target for MCP Apps is a developer-facing design-system showcase. Browse
+the category navigation to inspect foundations, forms, data display, feedback states, overlays, and layout
+components, then interact with the controls in light/dark and desktop/mobile preview modes. It is a
+reference implementation, not a product UX prescription: production apps should still be focused around their own
+user task. Ordinary React, CSS, and third-party components remain supported alongside the optional,
+host-neutral \`@noodleseed/one/react\` kit.
+
+- \`tool(..., { view })\` links the model-visible tool to the React view.
+- \`tool(..., { visibility: ['app'] })\` powers the gallery's app-only interactive demo.
+- \`view.component\` links the tool to a React view in \`src/views/\`.
+- \`useLayout()\` adapts to MCP Apps host context without requiring a host-specific global.
+- \`useAppFlow()\`, \`ViewNav\`, \`ViewStack\`, and \`View\` organize the gallery categories.
+- Optional host extensions should always be feature-detected and must not be required for baseline use.
+
+## Deploy (requires a Noodle Seed account)
+
+\`\`\`sh
+noodle login
+noodle deploy --org <org> --app ${name}
+\`\`\`
+
+The generated project is fully usable locally before login. Authentication is only required when you
+choose to deploy it. Replace the placeholder domain before public distribution.
+
+## Agent setup
+
+\`noodle init\` generated project-local Codex and Claude Code instructions. Commit those files with
+\`noodle.json\`, and refresh them after CLI upgrades with \`noodle agents setup --write\`.
+`,
+    };
+}
+//# sourceMappingURL=widget-scaffold-template.js.map

package/dist/widget-scaffold-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-scaffold-template.js","sourceRoot":"","sources":["../src/widget-scaffold-template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EACL,qBAAqB,EACrB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,+BAA+B,CAAC;AAEvC,MAAM,UAAU,WAAW,CACzB,IAAY,EACZ,YAA2C;IAE3C,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,KAAK,GAAG,WAAW,CACvB,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ;;;;;;;;;yBASqB,UAAU,gBAAgB,KAAK,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C7D,EACG;QACE,cAAc,EAAE,QAAQ;QACxB,kBAAkB,EAAE,QAAQ;QAC5B,sBAAsB,EAAE,QAAQ;QAChC,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,QAAQ;QACrB,IAAI,EAAE,QAAQ;KACf,CACF,CAAC;IAEF,OAAO;QACL,GAAG,KAAK;QACR,eAAe,EAAE;;;;;;;;;;;;;;CAcpB;QACG,mBAAmB,EAAE,yCAAyC;QAC9D,gBAAgB,EAAE,qBAAqB;QACvC,sCAAsC,EAAE,kBAAkB;QAC1D,iCAAiC,EAAE,sBAAsB;QACzD,gBAAgB,EAAE;;;;;;CAMrB;QACG,WAAW,EAAE,KAAK,KAAK,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA+BC,IAAI;;;;;;;;;;CAUrC;KACE,CAAC;AACJ,CAAC"}

package/dist/widget-showcase-template.d.ts

@@ -0,0 +1,5 @@
+/** Generated source files for the developer-facing React design-system showcase. */
+export declare const widgetShowcaseHelpers = "import type { ServerDefinition } from '@noodleseed/one';\nimport { generateHelpers } from '@noodleseed/one/react';\n\nexport type { CallToolState, HandoffController } from '@noodleseed/one/react';\nexport {\n  Action,\n  ActionBar,\n  AppShell,\n  AsyncBoundary,\n  Avatar,\n  AvatarGroup,\n  Checkbox,\n  ChoiceGroup,\n  Collection,\n  DataCard,\n  DataList,\n  EmptyState,\n  ErrorState,\n  ExpandButton,\n  Fact,\n  Feedback,\n  Field,\n  Flow,\n  Frame,\n  FullscreenShell,\n  HandoffButton,\n  InlineCard,\n  InlineCarousel,\n  InlineList,\n  Input,\n  LoadingState,\n  Menu,\n  Overlay,\n  Popover,\n  QuantityStepper,\n  RadioGroup,\n  Region,\n  SegmentedControl,\n  Select,\n  ShellHeader,\n  ShellNav,\n  Slider,\n  Spinner,\n  StatusBadge,\n  SubmitButton,\n  Switch,\n  Textarea,\n  Tooltip,\n  View,\n  ViewNav,\n  ViewStack,\n} from '@noodleseed/one/react';\n\nexport type AppType = ServerDefinition;\n\nexport const {\n  useAppFlow,\n  useCallTool,\n  useHandoff,\n  useLayout,\n  useToolInfo,\n  useViewState,\n} = generateHelpers<AppType>();\n";
+export declare const widgetShowcaseView = "import '@noodleseed/one/react/styles.css';\nimport { useState } from 'react';\nimport {\n  AppShell,\n  Frame,\n  FullscreenShell,\n  SegmentedControl,\n  StatusBadge,\n  View,\n  ViewNav,\n  ViewStack,\n  useAppFlow,\n  useLayout,\n  useToolInfo,\n} from '../helpers.js';\nimport {\n  DataSection,\n  FeedbackSection,\n  FormsSection,\n  FoundationsSection,\n  LayoutSection,\n  OverlaysSection,\n} from './showcase-sections.js';\n\ntype GalleryView = 'foundations' | 'forms' | 'data' | 'feedback' | 'overlays' | 'layouts';\ntype ShellPreview = 'frame' | 'app-shell' | 'fullscreen';\n\nconst galleryViews: readonly GalleryView[] = [\n  'foundations',\n  'forms',\n  'data',\n  'feedback',\n  'overlays',\n  'layouts',\n];\n\nconst navigation = [\n  { view: 'foundations' as const, label: 'Foundations' },\n  { view: 'forms' as const, label: 'Forms' },\n  { view: 'data' as const, label: 'Data display' },\n  { view: 'feedback' as const, label: 'Feedback' },\n  { view: 'overlays' as const, label: 'Overlays' },\n  { view: 'layouts' as const, label: 'Layouts' },\n];\n\ntype ShowcaseInfo = {\n  readonly title?: string;\n  readonly version?: string;\n  readonly description?: string;\n};\n\nexport default function DesignSystemShowcase() {\n  const layout = useLayout();\n  const info = (useToolInfo('show_design_system').structuredContent ?? {}) as ShowcaseInfo;\n  const flow = useAppFlow<GalleryView>({\n    key: 'design_system_showcase',\n    initialView: 'foundations',\n    views: galleryViews,\n  });\n  const [shell, setShell] = useState<ShellPreview>('frame');\n\n  const content = (\n    <>\n      <SegmentedControl\n        aria-label=\"Preview shell\"\n        name=\"preview-shell\"\n        value={shell}\n        onValueChange={(value) => setShell(value as ShellPreview)}\n        options={[\n          { value: 'frame', label: 'Frame' },\n          { value: 'app-shell', label: 'AppShell' },\n          { value: 'fullscreen', label: 'FullscreenShell' },\n        ]}\n      />\n\n      <ViewNav\n        activeView={flow.activeView}\n        items={navigation}\n        onNavigate={flow.navigate}\n        variant=\"segmented\"\n        aria-label=\"Design-system categories\"\n      />\n\n      <ViewStack flow={flow}>\n        <View name=\"foundations\"><FoundationsSection /></View>\n        <View name=\"forms\"><FormsSection /></View>\n        <View name=\"data\"><DataSection /></View>\n        <View name=\"feedback\"><FeedbackSection /></View>\n        <View name=\"overlays\"><OverlaysSection /></View>\n        <View name=\"layouts\"><LayoutSection /></View>\n      </ViewStack>\n    </>\n  );\n\n  const title = info.title ?? 'Noodle React design system';\n  const subtitle = info.description ?? 'Interactive reference for every public component family.';\n  const badge = <StatusBadge tone=\"info\">v{info.version ?? 'local'}</StatusBadge>;\n  const common = {\n    className: layout.theme === 'dark' ? 'dark' : '',\n    'data-llm': 'Developer-facing Noodle React design-system component showcase',\n  };\n\n  if (shell === 'app-shell') {\n    return <AppShell {...common} title={title} subtitle={subtitle} badge={badge} displayMode=\"auto\" footer=\"Host-neutral MCP Apps components\">{content}</AppShell>;\n  }\n  if (shell === 'fullscreen') {\n    return <FullscreenShell {...common} title={title} subtitle={subtitle} toolbar={badge} footer=\"Use the shell switcher to return to an inline preview.\">{content}</FullscreenShell>;\n  }\n  return <Frame {...common} title={title} subtitle={subtitle} status={badge} footer=\"Reference implementation, not a product UX prescription.\">{content}</Frame>;\n}\n";
+export declare const widgetShowcaseSections = "import { useState } from 'react';\nimport {\n  Action,\n  ActionBar,\n  AsyncBoundary,\n  Avatar,\n  AvatarGroup,\n  Checkbox,\n  ChoiceGroup,\n  Collection,\n  DataCard,\n  DataList,\n  EmptyState,\n  ErrorState,\n  ExpandButton,\n  Fact,\n  Feedback,\n  Field,\n  Flow,\n  HandoffButton,\n  InlineCard,\n  InlineCarousel,\n  InlineList,\n  Input,\n  LoadingState,\n  Menu,\n  Overlay,\n  Popover,\n  QuantityStepper,\n  RadioGroup,\n  Region,\n  SegmentedControl,\n  Select,\n  ShellHeader,\n  ShellNav,\n  Slider,\n  Spinner,\n  StatusBadge,\n  SubmitButton,\n  Switch,\n  Textarea,\n  Tooltip,\n  useCallTool,\n  useHandoff,\n  useViewState,\n} from '../helpers.js';\n\nexport function FoundationsSection() {\n  const handoff = useHandoff();\n  return (\n    <Flow variant=\"stack\">\n      <Region title=\"Actions\" description=\"Button, link, pending, disabled, handoff, and display-mode actions.\">\n        <ActionBar>\n          <Action variant=\"primary\">Primary</Action>\n          <Action variant=\"secondary\">Secondary</Action>\n          <Action variant=\"quiet\">Quiet</Action>\n          <Action variant=\"danger\">Danger</Action>\n          <Action pending pendingLabel=\"Working\u2026\">Pending</Action>\n          <Action disabled>Disabled</Action>\n          <Action as=\"a\" href=\"https://modelcontextprotocol.io\" external>External link</Action>\n          <ExpandButton>Request fullscreen</ExpandButton>\n          <HandoffButton handoff={handoff} target=\"https://example.com\" disabled>Handoff</HandoffButton>\n        </ActionBar>\n      </Region>\n\n      <Region title=\"Status badges\" description=\"Semantic tones remain host-adaptive.\">\n        <Flow variant=\"cluster\">\n          <StatusBadge>Neutral</StatusBadge>\n          <StatusBadge tone=\"success\">Success</StatusBadge>\n          <StatusBadge tone=\"warning\">Warning</StatusBadge>\n          <StatusBadge tone=\"danger\">Danger</StatusBadge>\n          <StatusBadge tone=\"info\">Info</StatusBadge>\n        </Flow>\n      </Region>\n\n      <Region title=\"Avatars\" description=\"Image-free fallbacks and overflow grouping.\">\n        <AvatarGroup max={3}>\n          <Avatar name=\"Ada Lovelace\" size={40} />\n          <Avatar name=\"Grace Hopper\" size={40} />\n          <Avatar name=\"Alan Turing\" size={40} />\n          <Avatar name=\"Katherine Johnson\" size={40} />\n        </AvatarGroup>\n      </Region>\n    </Flow>\n  );\n}\n\nexport function FormsSection() {\n  const demo = useCallTool('run_component_demo');\n  const [email, setEmail] = useViewState('showcase_email', 'ada@example.com');\n  const [notes, setNotes] = useState('Host-neutral controls with native semantics.');\n  const [selectValue, setSelectValue] = useState('comfortable');\n  const [radioValue, setRadioValue] = useState('daily');\n  const [switchValue, setSwitchValue] = useState(true);\n  const [sliderValue, setSliderValue] = useState(60);\n  const [segmentValue, setSegmentValue] = useState('preview');\n  const [choices, setChoices] = useState<readonly string[]>(['forms']);\n  const [quantity, setQuantity] = useState(2);\n\n  return (\n    <form onSubmit={(event) => {\n      event.preventDefault();\n      void demo.callTool({ component: 'Form controls', value: email }).catch(() => undefined);\n    }}>\n      <Flow variant=\"stack\">\n        <Region title=\"Text controls\" description=\"Labels, descriptions, errors, refs, and native form behavior.\">\n          <Flow variant=\"grid\">\n            <Field label=\"Email\" detail=\"Field connects every accessible relationship.\" required>\n              <Input name=\"email\" type=\"email\" value={email} onChange={(event) => setEmail(event.currentTarget.value)} />\n            </Field>\n            <Field label=\"Notes\">\n              <Textarea name=\"notes\" value={notes} onChange={(event) => setNotes(event.currentTarget.value)} />\n            </Field>\n            <Field label=\"Density\">\n              <Select name=\"density\" value={selectValue} onChange={(event) => setSelectValue(event.currentTarget.value)} options={[\n                { value: 'compact', label: 'Compact' },\n                { value: 'comfortable', label: 'Comfortable' },\n              ]} />\n            </Field>\n          </Flow>\n        </Region>\n\n        <Region title=\"Choice controls\" description=\"Native checkbox, radio, switch, range, and segmented interaction.\">\n          <Flow variant=\"grid\">\n            <Checkbox name=\"updates\" defaultChecked label=\"Checkbox\" />\n            <Switch name=\"enabled\" checked={switchValue} onCheckedChange={setSwitchValue} label=\"Switch\" />\n            <Field label=\"Cadence\" group required>\n              <RadioGroup name=\"cadence\" value={radioValue} onValueChange={setRadioValue} options={[\n                { value: 'daily', label: 'Daily' },\n                { value: 'weekly', label: 'Weekly' },\n              ]} />\n            </Field>\n            <Field label=\"Volume\">\n              <Slider aria-label=\"Volume\" name=\"volume\" min={0} max={100} value={sliderValue} onChange={(event) => setSliderValue(Number(event.currentTarget.value))} />\n            </Field>\n            <Field label=\"Mode\" group>\n              <SegmentedControl name=\"mode\" value={segmentValue} onValueChange={setSegmentValue} options={[\n                { value: 'preview', label: 'Preview' },\n                { value: 'code', label: 'Code' },\n              ]} />\n            </Field>\n          </Flow>\n        </Region>\n\n        <Region title=\"Composite controls\" description=\"Controlled multi-choice and quantity patterns.\">\n          <Flow variant=\"cluster\">\n            <ChoiceGroup values={['forms', 'data', 'overlays']} selected={choices} onChange={setChoices} labelFor={(value) => value} />\n            <QuantityStepper value={quantity} min={0} max={5} onChange={setQuantity} />\n          </Flow>\n        </Region>\n\n        <ActionBar>\n          <SubmitButton pending={demo.isPending} pendingLabel=\"Running demo\u2026\">Run form demo</SubmitButton>\n          <Action type=\"reset\" variant=\"quiet\">Native reset</Action>\n        </ActionBar>\n      </Flow>\n    </form>\n  );\n}\n\nexport function DataSection() {\n  const cards = [\n    { id: 'alpha', title: 'Alpha', description: 'Ready for review', meta: '12 items' },\n    { id: 'beta', title: 'Beta', description: 'Needs attention', meta: '4 items' },\n    { id: 'gamma', title: 'Gamma', description: 'Recently updated', meta: '8 items' },\n  ];\n  return (\n    <Flow variant=\"stack\">\n      <Region title=\"Facts\" description=\"Compact label/value summaries with semantic tone.\">\n        <Flow variant=\"grid\">\n          <Fact label=\"Latency\" value=\"42 ms\" detail=\"p95\" />\n          <Fact label=\"Success\" value=\"99.9%\" tone=\"success\" trend=\"+0.4%\" />\n          <Fact label=\"Budget\" value=\"72%\" tone=\"warning\" detail=\"monthly\" />\n          <Fact label=\"Errors\" value=\"3\" tone=\"danger\" detail=\"last hour\" />\n        </Flow>\n      </Region>\n\n      <Region title=\"Collections\" description=\"List, grid, and selected repeated-data treatments.\">\n        <Collection variant=\"grid\" selectionMode=\"single\">\n          {cards.map((card, index) => <Collection.Item key={card.id} as=\"button\" type=\"button\" selected={index === 0} title={card.title} description={card.description} meta={card.meta} badge={<StatusBadge tone={index === 1 ? 'warning' : 'success'}>{index === 1 ? 'Review' : 'Ready'}</StatusBadge>} />)}\n        </Collection>\n      </Region>\n\n      <Region title=\"DataCard and DataList\">\n        <DataList>\n          <DataCard as=\"article\"><strong>DataCard</strong><p>Low-level content card for application-specific composition.</p></DataCard>\n          <DataCard as=\"button\" type=\"button\"><strong>Interactive DataCard</strong><p>Uses native button behavior.</p></DataCard>\n        </DataList>\n      </Region>\n    </Flow>\n  );\n}\n\nexport function FeedbackSection() {\n  const demo = useCallTool('run_component_demo');\n  return (\n    <Flow variant=\"stack\">\n      <Region title=\"Feedback states\" description=\"Loading, empty, error, success, partial, permission, and unsupported.\">\n        <Flow variant=\"grid\">\n          <Feedback status=\"loading\" description=\"Fetching the latest result\u2026\" />\n          <Feedback status=\"empty\" description=\"Try changing the filters.\" />\n          <Feedback status=\"error\" description=\"The request could not be completed.\" />\n          <Feedback status=\"success\" description=\"Everything is up to date.\" />\n          <Feedback status=\"partial\" description=\"Some sources are still pending.\" />\n          <Feedback status=\"permission-denied\" description=\"Reconnect the required account.\" />\n          <Feedback status=\"unsupported\" description=\"This host does not expose that capability.\" />\n        </Flow>\n      </Region>\n\n      <Region title=\"State wrappers\">\n        <Flow variant=\"grid\">\n          <LoadingState><Spinner label=\"Loading state\" /> LoadingState</LoadingState>\n          <EmptyState>EmptyState</EmptyState>\n          <ErrorState>ErrorState</ErrorState>\n        </Flow>\n      </Region>\n\n      <Region title=\"AsyncBoundary\" actions={<Action onClick={() => void demo.callTool({ component: 'AsyncBoundary', value: 'demo' }).catch(() => undefined)}>Run tool</Action>}>\n        <AsyncBoundary state={demo} loading=\"Calling the app-only demo tool\u2026\" error={(error) => error.message} empty=\"No tool result yet\" isEmpty={demo.isIdle}>\n          <Feedback status=\"success\" description={String(demo.structuredContent ? 'The demo tool returned structured content.' : 'Complete.')} />\n        </AsyncBoundary>\n      </Region>\n    </Flow>\n  );\n}\n\nexport function OverlaysSection() {\n  const [overlay, setOverlay] = useState<'modal' | 'sheet' | undefined>();\n  const [activity, setActivity] = useState('No overlay action selected.');\n  return (\n    <Flow variant=\"stack\">\n      <Region title=\"Anchored overlays\" description=\"Focus, keyboard behavior, dismissal, portals, and collision are Radix-backed.\">\n        <ActionBar>\n          <Tooltip content=\"Tooltip content\"><Action>Tooltip</Action></Tooltip>\n          <Popover trigger=\"Popover\" triggerLabel=\"Open popover\"><Flow variant=\"stack\"><strong>Popover content</strong><Action onClick={() => setActivity('Popover action selected.')}>Select</Action></Flow></Popover>\n          <Menu trigger=\"Menu\" triggerLabel=\"Open menu\" items={[\n            { label: 'Rename', onSelect: () => setActivity('Rename selected.') },\n            { label: 'Archive', onSelect: () => setActivity('Archive selected.') },\n            'separator',\n            { label: 'Delete', danger: true, onSelect: () => setActivity('Delete selected.') },\n          ]} />\n        </ActionBar>\n        <Feedback status=\"partial\" title=\"Interaction log\" description={activity} />\n      </Region>\n\n      <Region title=\"Dialog and sheet\">\n        <ActionBar>\n          <Action onClick={() => setOverlay('modal')}>Open modal</Action>\n          <Action onClick={() => setOverlay('sheet')}>Open sheet</Action>\n        </ActionBar>\n        <Overlay open={overlay !== undefined} onOpenChange={(open) => { if (!open) setOverlay(undefined); }} mode={overlay ?? 'modal'} title={overlay === 'sheet' ? 'Sheet example' : 'Modal example'} description=\"Escape, outside click, and the close button dismiss this surface.\">\n          <Action variant=\"primary\" onClick={() => setOverlay(undefined)}>Complete</Action>\n          <Menu trigger=\"Nested menu\" items={[{ label: 'Nested action' }]} />\n        </Overlay>\n      </Region>\n\n      <Overlay mode=\"detail\" open title=\"Detail overlay\" description=\"Detail mode remains an inline named region.\">\n        Use detail mode when content belongs in the document flow rather than a modal layer.\n      </Overlay>\n    </Flow>\n  );\n}\n\nexport function LayoutSection() {\n  const [shellView, setShellView] = useState('overview');\n  const carouselItems = [\n    { id: 'one', title: 'First card' },\n    { id: 'two', title: 'Second card' },\n    { id: 'three', title: 'Third card' },\n  ];\n  return (\n    <Flow variant=\"stack\">\n      <Region title=\"ShellHeader and ShellNav\">\n        <ShellHeader title=\"Application shell\" subtitle=\"Header composition\" badge={<StatusBadge tone=\"success\">Live</StatusBadge>} />\n        <ShellNav activeView={shellView} onNavigate={setShellView} items={[\n          { view: 'overview', label: 'Overview' },\n          { view: 'activity', label: 'Activity' },\n          { view: 'settings', label: 'Settings' },\n        ]} />\n      </Region>\n\n      <Region title=\"Flow variants\" description=\"Stack, cluster, split, grid, and sidebar compositions share one primitive.\">\n        <Flow variant=\"split\"><InlineCard title=\"Split A\" description=\"First column\" /><InlineCard title=\"Split B\" description=\"Second column\" /></Flow>\n        <Flow variant=\"sidebar\"><InlineCard title=\"Sidebar\" description=\"Supporting rail\" /><InlineCard title=\"Content\" description=\"Primary area\" /></Flow>\n      </Region>\n\n      <Region title=\"InlineCard\">\n        <InlineCard title=\"Compact inline surface\" description=\"A host-blending card with two actions.\" primaryAction={<Action variant=\"primary\">Primary</Action>} secondaryAction={<Action variant=\"quiet\">Secondary</Action>}>InlineCard content</InlineCard>\n      </Region>\n\n      <Region title=\"InlineList\">\n        <InlineList items={carouselItems.map((item, index) => ({ id: item.id, title: item.title, description: 'List item description', meta: String(index + 1), action: <Action variant=\"quiet\">Open</Action> }))} />\n      </Region>\n\n      <Region title=\"InlineCarousel\">\n        <InlineCarousel items={carouselItems}>{(item) => <InlineCard title={item.title} description=\"Horizontally scrollable item\" />}</InlineCarousel>\n      </Region>\n    </Flow>\n  );\n}\n";
+//# sourceMappingURL=widget-showcase-template.d.ts.map

package/dist/widget-showcase-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-showcase-template.d.ts","sourceRoot":"","sources":["../src/widget-showcase-template.ts"],"names":[],"mappings":"AAAA,oFAAoF;AAEpF,eAAO,MAAM,qBAAqB,yiCA+DjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,sjHA8G9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,2xbA4SlC,CAAC"}