@workbench-kit/adapters 0.0.1-prototype.0 → 0.0.2-prototype.0.1.1

package/src/widget-studio-assets.ts

@@ -0,0 +1,328 @@
+import type { WorkspaceFile } from '@workbench-kit/workspace';
+
+import {
+  flattenWidgetStudioAssetPackages,
+  WIDGET_STUDIO_ASSETS_DIR,
+  WIDGET_STUDIO_CUSTOM_ASSETS_DIR,
+  type WidgetStudioAssetPackageDefinition,
+} from './widget-studio-asset-package.js';
+
+export { WIDGET_STUDIO_ASSETS_DIR, WIDGET_STUDIO_CUSTOM_ASSETS_DIR };
+
+export type WidgetStudioWorkspaceAssetFile = WorkspaceFile;
+
+const TEXT_INPUTS_SCHEMA = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'TextAssetInputs',
+  type: 'object',
+  properties: {
+    text: { type: 'string' },
+    fontSize: { type: 'number', minimum: 1 },
+    color: { type: 'string' },
+  },
+};
+
+const LAYOUT_INPUTS_SCHEMA = {
+  $schema: 'http://json-schema.org/draft-07/schema#',
+  title: 'LayoutAssetInputs',
+  type: 'object',
+  properties: {
+    gap: { type: 'number', minimum: 0, default: 8 },
+    padding: { type: 'number', minimum: 0, default: 0 },
+  },
+};
+
+const builtinAssetPackages: WidgetStudioAssetPackageDefinition[] = [
+  {
+    slug: 'heading',
+    updatedAt: '2026-06-02T09:24:00.000Z',
+    manifest: {
+      name: 'content.heading',
+      version: '1.0.0',
+      label: 'Heading',
+      description: 'Large title text',
+      category: 'content',
+      kind: 'leaf',
+      icon: 'codicon-symbol-text',
+    },
+    schema: TEXT_INPUTS_SCHEMA,
+    content: {
+      type: 'text',
+      args: { text: 'Heading', fontSize: 24 },
+    },
+  },
+  {
+    slug: 'body',
+    updatedAt: '2026-06-02T09:24:10.000Z',
+    manifest: {
+      name: 'content.body',
+      version: '1.0.0',
+      label: 'Body',
+      description: 'Default paragraph text',
+      category: 'content',
+      kind: 'leaf',
+      icon: 'codicon-whole-word',
+    },
+    schema: TEXT_INPUTS_SCHEMA,
+    content: {
+      type: 'text',
+      args: { text: 'Body text' },
+    },
+  },
+  {
+    slug: 'label',
+    updatedAt: '2026-06-02T09:24:12.000Z',
+    manifest: {
+      name: 'content.label',
+      version: '1.0.0',
+      label: 'Label',
+      description: 'Small muted label',
+      category: 'content',
+      kind: 'leaf',
+      icon: 'codicon-tag',
+    },
+    schema: TEXT_INPUTS_SCHEMA,
+    content: {
+      type: 'text',
+      args: { text: 'Label', fontSize: 12, color: '#9aa0a6' },
+    },
+  },
+  {
+    slug: 'caption',
+    updatedAt: '2026-06-02T09:24:14.000Z',
+    manifest: {
+      name: 'content.caption',
+      version: '1.0.0',
+      label: 'Caption',
+      description: 'Secondary supporting text',
+      category: 'content',
+      kind: 'leaf',
+      icon: 'codicon-info',
+    },
+    schema: TEXT_INPUTS_SCHEMA,
+    content: {
+      type: 'text',
+      args: { text: 'Caption', fontSize: 11, color: '#7a7f87' },
+    },
+  },
+  {
+    slug: 'row',
+    updatedAt: '2026-06-02T09:24:20.000Z',
+    manifest: {
+      name: 'layout.row',
+      version: '1.0.0',
+      label: 'Row',
+      description: 'Horizontal flex container',
+      category: 'layout',
+      kind: 'container',
+      icon: 'codicon-arrow-right',
+    },
+    schema: LAYOUT_INPUTS_SCHEMA,
+    content: {
+      type: 'row',
+      args: { gap: 8, padding: 0, children: [] },
+    },
+  },
+  {
+    slug: 'column',
+    updatedAt: '2026-06-02T09:24:22.000Z',
+    manifest: {
+      name: 'layout.column',
+      version: '1.0.0',
+      label: 'Column',
+      description: 'Vertical flex container',
+      category: 'layout',
+      kind: 'container',
+      icon: 'codicon-arrow-down',
+    },
+    schema: LAYOUT_INPUTS_SCHEMA,
+    content: {
+      type: 'column',
+      args: { gap: 8, padding: 0, children: [] },
+    },
+  },
+  {
+    slug: 'grid-2',
+    updatedAt: '2026-06-02T09:24:30.000Z',
+    manifest: {
+      name: 'layout.grid-2',
+      version: '1.0.0',
+      label: '2-col Grid',
+      description: 'Two column grid',
+      category: 'layout',
+      kind: 'container',
+      icon: 'codicon-layout',
+    },
+    schema: {
+      ...LAYOUT_INPUTS_SCHEMA,
+      properties: {
+        ...LAYOUT_INPUTS_SCHEMA.properties,
+        columns: { type: 'number', minimum: 1, default: 2 },
+      },
+    },
+    content: {
+      type: 'grid',
+      args: { columns: 2, gap: 8, padding: 0, children: [] },
+    },
+  },
+  {
+    slug: 'grid-3',
+    updatedAt: '2026-06-02T09:24:32.000Z',
+    manifest: {
+      name: 'layout.grid-3',
+      version: '1.0.0',
+      label: '3-col Grid',
+      description: 'Three column grid',
+      category: 'layout',
+      kind: 'container',
+      icon: 'codicon-layout',
+    },
+    schema: {
+      ...LAYOUT_INPUTS_SCHEMA,
+      properties: {
+        ...LAYOUT_INPUTS_SCHEMA.properties,
+        columns: { type: 'number', minimum: 1, default: 3 },
+      },
+    },
+    content: {
+      type: 'grid',
+      args: { columns: 3, gap: 8, padding: 0, children: [] },
+    },
+  },
+  {
+    slug: 'media-card',
+    updatedAt: '2026-06-02T09:24:36.000Z',
+    manifest: {
+      name: 'template.media-card',
+      version: '1.0.0',
+      label: 'Media Card',
+      description: 'Image placeholder with title and caption',
+      category: 'template',
+      kind: 'template',
+      icon: 'codicon-file-media',
+    },
+    schema: {
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      title: 'MediaCardInputs',
+      type: 'object',
+      properties: {
+        title: { type: 'string', default: 'Card title' },
+        description: { type: 'string', default: 'Short description for the card.' },
+      },
+    },
+    content: {
+      type: 'column',
+      args: {
+        gap: 8,
+        children: [
+          {
+            type: 'row',
+            args: {
+              gap: 0,
+              children: [
+                {
+                  type: 'expanded',
+                  args: {
+                    flex: 1,
+                    child: {
+                      type: 'text',
+                      args: { text: ' ', background: '#2b2f36' },
+                    },
+                  },
+                },
+              ],
+            },
+          },
+          {
+            type: 'text',
+            args: { text: 'Card title', fontSize: 16 },
+          },
+          {
+            type: 'text',
+            args: {
+              text: 'Short description for the card.',
+              fontSize: 12,
+              color: '#9aa0a6',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    slug: 'section-stack',
+    updatedAt: '2026-06-02T09:24:40.000Z',
+    manifest: {
+      name: 'template.section-stack',
+      version: '1.0.0',
+      label: 'Section Stack',
+      description: 'Title with supporting body copy',
+      category: 'template',
+      kind: 'template',
+      icon: 'codicon-layers',
+    },
+    schema: {
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      title: 'SectionStackInputs',
+      type: 'object',
+      properties: {
+        title: { type: 'string', default: 'Section title' },
+        body: { type: 'string', default: 'Supporting body copy.' },
+      },
+    },
+    content: {
+      type: 'column',
+      args: {
+        gap: 4,
+        children: [
+          { type: 'text', args: { text: 'Section title', fontSize: 18 } },
+          { type: 'text', args: { text: 'Supporting body copy.' } },
+        ],
+      },
+    },
+  },
+];
+
+const customAssetPackages: WidgetStudioAssetPackageDefinition[] = [
+  {
+    slug: 'feature-badge',
+    baseDir: WIDGET_STUDIO_CUSTOM_ASSETS_DIR,
+    updatedAt: '2026-06-02T09:25:00.000Z',
+    manifest: {
+      name: 'custom.feature-badge',
+      version: '1.0.0',
+      label: 'Feature Badge',
+      description: 'Custom workspace asset example',
+      category: 'content',
+      kind: 'template',
+      icon: 'codicon-verified',
+    },
+    schema: {
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      title: 'FeatureBadgeInputs',
+      type: 'object',
+      properties: {
+        label: { type: 'string', default: 'Feature enabled' },
+      },
+    },
+    content: {
+      type: 'row',
+      args: {
+        gap: 6,
+        children: [
+          { type: 'text', args: { text: '✓', fontSize: 12, color: '#34a853' } },
+          { type: 'text', args: { text: 'Feature enabled', fontSize: 12 } },
+        ],
+      },
+    },
+  },
+];
+
+export const widgetStudioBuiltinAssetFiles = flattenWidgetStudioAssetPackages(builtinAssetPackages);
+export const widgetStudioCustomAssetExampleFiles =
+  flattenWidgetStudioAssetPackages(customAssetPackages);
+
+export const widgetStudioAssetPackageSlugs = [
+  ...builtinAssetPackages.map((pkg) => pkg.slug),
+  ...customAssetPackages.map((pkg) => `${pkg.baseDir?.split('/').pop()}/${pkg.slug}`),
+];

package/src/workbench-demo-config.ts

@@ -0,0 +1,65 @@
+import type { RuntimeStatus } from '@workbench-kit/runtime';
+
+export type IntegratedShellActivityId = 'explorer' | 'search' | 'chat';
+
+export const integratedShellActivityOrder: IntegratedShellActivityId[] = [
+  'explorer',
+  'search',
+  'chat',
+];
+
+export const integratedShellActivityLabels: Record<IntegratedShellActivityId, string> = {
+  explorer: 'Explorer',
+  search: 'Search',
+  chat: 'Chat',
+};
+
+const integratedShellActivityIcons: Record<IntegratedShellActivityId, string> = {
+  explorer: 'codicon-files',
+  search: 'codicon-search',
+  chat: 'codicon-comment-discussion',
+};
+
+export const integratedShellCommandActivities = integratedShellActivityOrder.map((id) => ({
+  id,
+  label: integratedShellActivityLabels[id],
+  icon: integratedShellActivityIcons[id],
+}));
+
+export function isIntegratedShellActivityId(id: string): id is IntegratedShellActivityId {
+  return id === 'explorer' || id === 'search' || id === 'chat';
+}
+
+export interface IntegratedShellBootstrapInitialState {
+  activeActivityId: IntegratedShellActivityId;
+  isPrimarySidebarVisible: boolean;
+  primarySidebarSizePercent: number;
+  primarySidebarMinPercent: number;
+  primarySidebarMaxPercent: number;
+  settingsCategoryId: string;
+  settingsScopeId: string;
+  theme: 'dark' | 'light';
+}
+
+export function createIntegratedShellBootstrapInitialState(
+  overrides: Partial<IntegratedShellBootstrapInitialState> = {},
+): IntegratedShellBootstrapInitialState {
+  return {
+    activeActivityId: 'explorer',
+    isPrimarySidebarVisible: true,
+    primarySidebarSizePercent: 20,
+    primarySidebarMinPercent: 16,
+    primarySidebarMaxPercent: 40,
+    settingsCategoryId: 'appearance',
+    settingsScopeId: 'user',
+    theme: 'dark',
+    ...overrides,
+  };
+}
+
+export function runtimeStatusLabel(status: RuntimeStatus): string {
+  if (status === 'running') return 'Runtime running';
+  if (status === 'cancelled') return 'Runtime stopped';
+  if (status === 'error') return 'Runtime error';
+  return 'Runtime idle';
+}

package/src/workbench-demo.ts

@@ -0,0 +1,244 @@
+import type { RuntimeChatMessage } from '@workbench-kit/runtime';
+import type { WorkspaceFile } from '@workbench-kit/workspace';
+
+import {
+  widgetStudioBuiltinAssetFiles,
+  widgetStudioCustomAssetExampleFiles,
+} from './widget-studio-assets.js';
+
+export const integratedShellWorkspaceFolders = [
+  'src',
+  'src/components',
+  'src/workbench',
+  'src/widgets',
+  'src/widgets/assets',
+  'src/widgets/assets/heading',
+  'src/widgets/assets/body',
+  'src/widgets/assets/label',
+  'src/widgets/assets/caption',
+  'src/widgets/assets/row',
+  'src/widgets/assets/column',
+  'src/widgets/assets/grid-2',
+  'src/widgets/assets/grid-3',
+  'src/widgets/assets/media-card',
+  'src/widgets/assets/section-stack',
+  'src/widgets/assets/custom',
+  'src/widgets/assets/custom/feature-badge',
+  'docs',
+  'public',
+] as const;
+
+const integratedShellCoreWorkspaceFiles: WorkspaceFile[] = [
+  {
+    path: 'src/App.tsx',
+    mimeType: 'application/typescript',
+    updatedAt: '2026-06-02T09:12:00.000Z',
+    source: 'user',
+    content: `import { WorkbenchShell } from './workbench/Shell';
+
+export function App() {
+  return <WorkbenchShell title="Public UI Workbench" />;
+}
+`,
+  },
+  {
+    path: 'src/components/Button.tsx',
+    mimeType: 'application/typescript',
+    updatedAt: '2026-06-02T09:18:00.000Z',
+    source: 'assistant',
+    content: `import type { ComponentPropsWithRef } from 'react';
+
+type ButtonVariant = 'default' | 'primary' | 'danger';
+
+interface ButtonProps extends ComponentPropsWithRef<'button'> {
+  variant?: ButtonVariant;
+}
+
+export function Button({ variant = 'default', ...props }: ButtonProps) {
+  return <button data-variant={variant} {...props} />;
+}
+`,
+  },
+  {
+    path: 'src/components/Panel.tsx',
+    mimeType: 'application/typescript',
+    updatedAt: '2026-06-02T09:20:00.000Z',
+    source: 'assistant',
+    content: `import type { ComponentPropsWithRef, ReactNode } from 'react';
+
+interface PanelProps extends ComponentPropsWithRef<'section'> {
+  title: ReactNode;
+}
+
+export function Panel({ children, title, ...props }: PanelProps) {
+  return (
+    <section {...props}>
+      <header>{title}</header>
+      <div>{children}</div>
+    </section>
+  );
+}
+`,
+  },
+  {
+    path: 'src/widgets/home.widget.json',
+    mimeType: 'application/vnd.workbench-kit.widget+json',
+    updatedAt: '2026-06-02T09:28:00.000Z',
+    source: 'user',
+    content: `{
+  "type": "column",
+  "args": {
+    "children": [
+      {
+        "type": "text",
+        "args": {
+          "text": "Welcome"
+        }
+      }
+    ]
+  }
+}
+`,
+  },
+  {
+    path: 'src/workbench/Shell.tsx',
+    mimeType: 'application/typescript',
+    updatedAt: '2026-06-02T09:30:00.000Z',
+    source: 'assistant',
+    content: `import { ActivityBar, StatusBar } from '@workbench-kit/react/workbench';
+
+export function WorkbenchShell({ title }: { title: string }) {
+  return (
+    <main aria-label={title}>
+      <ActivityBar items={[]} />
+      <section data-region="editor">
+        <h1>{title}</h1>
+      </section>
+      <StatusBar compact />
+    </main>
+  );
+}
+`,
+  },
+  {
+    path: 'src/workbench/search.ts',
+    mimeType: 'application/typescript',
+    updatedAt: '2026-06-02T09:34:00.000Z',
+    source: 'assistant',
+    content: `export function compactText(value: string) {
+  return value.replace(/\\s+/g, ' ').trim();
+}
+
+export function createContentPreview(content: string, query: string) {
+  const compact = compactText(content);
+  const index = compact.toLowerCase().indexOf(query.toLowerCase());
+  if (index < 0) return compact.slice(0, 120);
+
+  const start = Math.max(0, index - 48);
+  const end = Math.min(compact.length, index + query.length + 72);
+  return \`\${start > 0 ? '...' : ''}\${compact.slice(start, end)}\${end < compact.length ? '...' : ''}\`;
+}
+`,
+  },
+  {
+    path: 'docs/getting-started.md',
+    mimeType: 'text/markdown',
+    updatedAt: '2026-06-02T09:42:00.000Z',
+    source: 'user',
+    content: `# Getting Started
+
+Import shared styles once, then compose the workbench primitives in your app shell.
+
+- Use Explorer for file navigation.
+- Use Search for path and content matches.
+- Use Chat for workspace-side conversations.
+`,
+  },
+  {
+    path: 'package.json',
+    mimeType: 'application/json',
+    updatedAt: '2026-06-02T09:50:00.000Z',
+    source: 'user',
+    content: `{
+  "name": "@example/workbench-app",
+  "private": true,
+  "scripts": {
+    "storybook": "storybook dev --port 6010"
+  }
+}
+`,
+  },
+  {
+    path: 'public/theme.css',
+    mimeType: 'text/css',
+    updatedAt: '2026-06-02T09:54:00.000Z',
+    source: 'assistant',
+    content: `:root {
+  color-scheme: dark;
+  --workspace-accent: #4aa8ff;
+}
+
+.workspace-file-icon {
+  color: var(--workspace-accent);
+}
+`,
+  },
+];
+
+export const integratedShellWorkspaceFiles: WorkspaceFile[] = [
+  ...integratedShellCoreWorkspaceFiles,
+  ...widgetStudioBuiltinAssetFiles,
+  ...widgetStudioCustomAssetExampleFiles,
+];
+
+export {
+  widgetStudioBuiltinAssetFiles,
+  widgetStudioCustomAssetExampleFiles,
+} from './widget-studio-assets.js';
+
+export const integratedShellInitialRuntimeMessages: RuntimeChatMessage[] = [
+  {
+    id: 'm1',
+    source: 'user',
+    content:
+      'Check whether the workbench shell covers explorer, search, chat, settings, and status surfaces.',
+  },
+  {
+    id: 'm2',
+    source: 'assistant',
+    content:
+      'The integrated story now keeps those surfaces in one stateful shell with public mock data.',
+  },
+  {
+    id: 'm3',
+    source: 'assistant',
+    content:
+      'Search results, file icons, and the editor preview are driven by the same virtual workspace.',
+  },
+];
+
+export const integratedShellDefaultSelectionByActivity = {
+  explorer: 'src/App.tsx',
+  search: 'src/components/Button.tsx',
+  chat: 'src/App.tsx',
+} as const;
+
+export function createIntegratedShellChatRuntimeResponse(message: RuntimeChatMessage) {
+  return {
+    chunks: [
+      'Mock runtime received the workspace request. ',
+      'A workspace patch is ready in `docs/runtime-notes.md`.',
+    ],
+    intervalMs: 20,
+    workspacePatches: [
+      {
+        content: `# Runtime Notes\n\nLast request: ${message.content}\n\nThis file was produced by the public mock runtime fixture.\n`,
+        mimeType: 'text/markdown',
+        path: 'docs/runtime-notes.md',
+        source: 'assistant' as const,
+        type: 'write-file' as const,
+        updatedAt: '2026-06-02T10:05:00.000Z',
+      },
+    ],
+  };
+}