@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/jdw/createBuiltinJdwRegistry.ts

@@ -1,7 +1,16 @@
-import type { WidgetRegistryContract, WidgetTypeShape } from '@workbench-kit/contracts';
-import { createWidgetRegistry, type GenericWidget } from '@workbench-kit/jdw';
+import type {
+  WidgetMeasureConstraints,
+  WidgetMeasureResult,
+  WidgetRegistryContract,
+  WidgetTypeShape,
+} from '@workbench-kit/contracts';
+import {
+  createWidgetRegistry,
+  estimateWrappedTextSize,
+  type GenericWidget,
+} from '@workbench-kit/jdw';
 
-import { renderBuiltinWidgetNode } from './builtins/renderBuiltinWidgetNode.js';
+import { renderBuiltinWidgetLeaf } from './builtins/renderBuiltinWidgetLeaf.js';
 
 const LAYOUT_INSPECTOR = [
   {
@@ -14,11 +23,118 @@ const LAYOUT_INSPECTOR = [
   },
 ];
 
+const SIZE_INSPECTOR = [
+  {
+    title: 'Size',
+    fields: [
+      { kind: 'number' as const, prop: 'width', label: 'Width', min: 0 },
+      { kind: 'number' as const, prop: 'height', label: 'Height', min: 0 },
+    ],
+  },
+];
+
+const BOX_INSPECTOR = [
+  {
+    title: 'Box',
+    fields: [
+      { kind: 'number' as const, prop: 'width', label: 'Width', min: 0 },
+      { kind: 'number' as const, prop: 'height', label: 'Height', min: 0 },
+      { kind: 'number' as const, prop: 'padding', label: 'Padding', min: 0 },
+      { kind: 'color' as const, prop: 'background', label: 'Background' },
+    ],
+  },
+];
+
+const ALIGNMENT_OPTIONS = [
+  { label: 'Top left', value: 'topLeft' },
+  { label: 'Top center', value: 'topCenter' },
+  { label: 'Top right', value: 'topRight' },
+  { label: 'Center left', value: 'centerLeft' },
+  { label: 'Center', value: 'center' },
+  { label: 'Center right', value: 'centerRight' },
+  { label: 'Bottom left', value: 'bottomLeft' },
+  { label: 'Bottom center', value: 'bottomCenter' },
+  { label: 'Bottom right', value: 'bottomRight' },
+] as const;
+
+const IMAGE_FIT_OPTIONS = [
+  { label: 'Contain', value: 'contain' },
+  { label: 'Cover', value: 'cover' },
+  { label: 'Fill', value: 'fill' },
+  { label: 'Scale down', value: 'scale-down' },
+] as const;
+
+const BUTTON_VARIANT_OPTIONS = [
+  { label: 'Primary', value: 'primary' },
+  { label: 'Secondary', value: 'secondary' },
+] as const;
+
 function build(widget: WidgetTypeShape) {
-  return renderBuiltinWidgetNode(widget as GenericWidget);
+  return renderBuiltinWidgetLeaf(widget as GenericWidget);
+}
+
+function readNumber(value: unknown): number | undefined {
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}
+
+function readString(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim().length > 0 ? value : undefined;
 }
 
-/** workbench-jdw-react-v1 builtin widget registry (text, row, column, grid). */
+function clampMeasure(
+  size: Required<WidgetMeasureResult>,
+  constraints: WidgetMeasureConstraints,
+): WidgetMeasureResult {
+  return {
+    width: Math.min(Math.max(size.width, constraints.minWidth), constraints.maxWidth),
+    height: Math.min(Math.max(size.height, constraints.minHeight), constraints.maxHeight),
+  };
+}
+
+function measureText(widget: WidgetTypeShape, constraints: WidgetMeasureConstraints) {
+  const record = widget as GenericWidget;
+  const text = readString(record.text) ?? '';
+  const fontSize = readNumber(record.fontSize) ?? 14;
+  const maxLines = readNumber(record.maxLines);
+  const estimated = estimateWrappedTextSize({
+    text,
+    fontSize,
+    maxWidth: constraints.maxWidth,
+    ...(maxLines !== undefined ? { maxLines } : {}),
+  });
+  return clampMeasure({ width: estimated.width, height: estimated.height }, constraints);
+}
+
+function measureIcon(widget: WidgetTypeShape, constraints: WidgetMeasureConstraints) {
+  const record = widget as GenericWidget;
+  const size = readNumber(record.size) ?? 16;
+  return clampMeasure({ width: size, height: size }, constraints);
+}
+
+function measureImage(widget: WidgetTypeShape, constraints: WidgetMeasureConstraints) {
+  const record = widget as GenericWidget;
+  return clampMeasure(
+    {
+      width: readNumber(record.width) ?? 120,
+      height: readNumber(record.height) ?? 80,
+    },
+    constraints,
+  );
+}
+
+function measureButton(widget: WidgetTypeShape, constraints: WidgetMeasureConstraints) {
+  const record = widget as GenericWidget;
+  const label = readString(record.label) ?? '';
+  return clampMeasure(
+    {
+      width: Math.max(56, label.length * 8 + 24),
+      height: 28,
+    },
+    constraints,
+  );
+}
+
+/** workbench-jdw-react-v1 builtin widget registry for static JDW authoring. */
 export function createBuiltinJdwRegistry(): WidgetRegistryContract<unknown> {
   return createWidgetRegistry([
     {
@@ -35,6 +151,7 @@ export function createBuiltinJdwRegistry(): WidgetRegistryContract<unknown> {
           fontSize: { type: 'number' },
         },
       },
+      measure: measureText,
       inspector: [
         {
           title: 'Text',
@@ -78,6 +195,214 @@ export function createBuiltinJdwRegistry(): WidgetRegistryContract<unknown> {
       inspector: LAYOUT_INSPECTOR,
       capabilities: ['container'],
     },
+    {
+      type: 'stack',
+      build,
+      displayName: 'Stack',
+      schema: {
+        type: 'object',
+        properties: {
+          background: { type: 'string' },
+          children: { type: 'array' },
+        },
+      },
+      inspector: [
+        {
+          title: 'Stack',
+          fields: [{ kind: 'color', prop: 'background', label: 'Background' }],
+        },
+      ],
+      capabilities: ['container'],
+    },
+    {
+      type: 'container',
+      build,
+      displayName: 'Container',
+      schema: {
+        type: 'object',
+        properties: {
+          width: { type: 'number', minimum: 0 },
+          height: { type: 'number', minimum: 0 },
+          padding: { type: 'number', minimum: 0 },
+          background: { type: 'string' },
+        },
+      },
+      inspector: BOX_INSPECTOR,
+    },
+    {
+      type: 'box',
+      build,
+      displayName: 'Box',
+      schema: {
+        type: 'object',
+        properties: {
+          width: { type: 'number', minimum: 0 },
+          height: { type: 'number', minimum: 0 },
+          padding: { type: 'number', minimum: 0 },
+          background: { type: 'string' },
+        },
+      },
+      inspector: BOX_INSPECTOR,
+    },
+    {
+      type: 'padding',
+      build,
+      displayName: 'Padding',
+      schema: {
+        type: 'object',
+        properties: {
+          padding: { type: 'number', minimum: 0 },
+        },
+      },
+      inspector: [
+        {
+          title: 'Padding',
+          fields: [{ kind: 'number', prop: 'padding', label: 'Padding', min: 0 }],
+        },
+      ],
+    },
+    {
+      type: 'align',
+      build,
+      displayName: 'Align',
+      schema: {
+        type: 'object',
+        properties: {
+          alignment: { type: 'string' },
+        },
+      },
+      inspector: [
+        {
+          title: 'Alignment',
+          fields: [
+            {
+              kind: 'select',
+              prop: 'alignment',
+              label: 'Alignment',
+              options: ALIGNMENT_OPTIONS,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'center',
+      build,
+      displayName: 'Center',
+      schema: {
+        type: 'object',
+        properties: {
+          width: { type: 'number', minimum: 0 },
+          height: { type: 'number', minimum: 0 },
+          padding: { type: 'number', minimum: 0 },
+        },
+      },
+      inspector: [
+        {
+          title: 'Center',
+          fields: [
+            { kind: 'number', prop: 'width', label: 'Width', min: 0 },
+            { kind: 'number', prop: 'height', label: 'Height', min: 0 },
+            { kind: 'number', prop: 'padding', label: 'Padding', min: 0 },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'sized_box',
+      build,
+      displayName: 'Sized box',
+      schema: {
+        type: 'object',
+        properties: {
+          width: { type: 'number', minimum: 0 },
+          height: { type: 'number', minimum: 0 },
+        },
+      },
+      inspector: SIZE_INSPECTOR,
+    },
+    {
+      type: 'image',
+      build,
+      displayName: 'Image',
+      schema: {
+        type: 'object',
+        required: ['src'],
+        properties: {
+          src: { type: 'string', minLength: 1 },
+          alt: { type: 'string' },
+          fit: { type: 'string' },
+          width: { type: 'number', minimum: 0 },
+          height: { type: 'number', minimum: 0 },
+        },
+      },
+      measure: measureImage,
+      inspector: [
+        {
+          title: 'Image',
+          fields: [
+            { kind: 'text', prop: 'src', label: 'Source' },
+            { kind: 'text', prop: 'alt', label: 'Alt text' },
+            { kind: 'select', prop: 'fit', label: 'Fit', options: IMAGE_FIT_OPTIONS },
+          ],
+        },
+        ...SIZE_INSPECTOR,
+      ],
+    },
+    {
+      type: 'icon',
+      build,
+      displayName: 'Icon',
+      schema: {
+        type: 'object',
+        required: ['name'],
+        properties: {
+          name: { type: 'string', minLength: 1 },
+          color: { type: 'string' },
+          size: { type: 'number', minimum: 1 },
+        },
+      },
+      measure: measureIcon,
+      inspector: [
+        {
+          title: 'Icon',
+          fields: [
+            { kind: 'text', prop: 'name', label: 'Name' },
+            { kind: 'color', prop: 'color', label: 'Color' },
+            { kind: 'number', prop: 'size', label: 'Size', min: 1 },
+          ],
+        },
+      ],
+    },
+    {
+      type: 'button',
+      build,
+      displayName: 'Button',
+      schema: {
+        type: 'object',
+        required: ['label'],
+        properties: {
+          label: { type: 'string', minLength: 1 },
+          variant: { type: 'string' },
+          color: { type: 'string' },
+          background: { type: 'string' },
+          disabled: { type: 'boolean' },
+        },
+      },
+      measure: measureButton,
+      inspector: [
+        {
+          title: 'Button',
+          fields: [
+            { kind: 'text', prop: 'label', label: 'Label' },
+            { kind: 'select', prop: 'variant', label: 'Variant', options: BUTTON_VARIANT_OPTIONS },
+            { kind: 'color', prop: 'color', label: 'Text color' },
+            { kind: 'color', prop: 'background', label: 'Background' },
+            { kind: 'boolean', prop: 'disabled', label: 'Disabled' },
+          ],
+        },
+      ],
+    },
     {
       type: 'grid',
       build,

package/src/jdw/cssRenderBackend.tsx

@@ -1,13 +1,25 @@
-import { createElement, type CSSProperties, type ReactNode } from 'react';
-import type { WidgetRegistryContract } from '@workbench-kit/contracts';
 import {
+  createElement,
+  type CSSProperties,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import { isWidgetHostTag, type WidgetRegistryContract } from '@workbench-kit/contracts';
+import {
+  appendBoxChildPath,
+  appendChildrenPath,
   DEFAULT_LAYOUT_CONSTRAINTS,
+  getWidgetChildren,
   jdwNodeToGenericWidget,
   layoutWidget,
+  widgetPathEquals,
+  widgetPathKey,
   type GenericWidget,
   type JsonWidgetNode,
   type LayoutConstraints,
   type LayoutNodeResult,
+  type WidgetPath,
 } from '@workbench-kit/jdw';
 
 import { renderBuiltinWidgetLeaf } from './builtins/renderBuiltinWidgetLeaf.js';
@@ -16,9 +28,22 @@ export interface CssRenderBackendOptions {
   readonly registry?: WidgetRegistryContract<unknown> | undefined;
   readonly emptyLabel?: string | undefined;
   readonly layoutConstraints?: LayoutConstraints | undefined;
+  readonly selectedPath?: WidgetPath | null | undefined;
+  readonly onSelectPath?: ((path: WidgetPath) => void) | undefined;
 }
 
-const LAYOUT_CONTAINER_TYPES = new Set(['row', 'column', 'grid', 'stack']);
+const LAYOUT_CONTAINER_TYPES = new Set([
+  'row',
+  'column',
+  'grid',
+  'stack',
+  'box',
+  'container',
+  'padding',
+  'align',
+  'center',
+  'sized_box',
+]);
 
 function readNumber(value: unknown): number | undefined {
   return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
@@ -68,6 +93,23 @@ function layoutNodeStyle(
   };
 }
 
+function layoutChildPath(parentWidget: GenericWidget, parentPath: WidgetPath, index: number) {
+  if (Array.isArray(parentWidget.children)) {
+    return appendChildrenPath(parentPath, index);
+  }
+
+  if (parentWidget.child && typeof parentWidget.child === 'object') {
+    return appendBoxChildPath(parentPath);
+  }
+
+  const children = getWidgetChildren(parentWidget);
+  if (children.length > 0) {
+    return appendChildrenPath(parentPath, index);
+  }
+
+  return appendChildrenPath(parentPath, index);
+}
+
 function renderLeafContent(widget: GenericWidget, options: CssRenderBackendOptions): ReactNode {
   const { registry = BUILTIN_JDW_REGISTRY, emptyLabel = 'No render output.' } = options;
 
@@ -78,20 +120,57 @@ function renderLeafContent(widget: GenericWidget, options: CssRenderBackendOptio
   return renderBuiltinWidgetLeaf(widget);
 }
 
+function isKeyboardActivationKey(key: string): boolean {
+  return key === 'Enter' || key === ' ' || key === 'Spacebar';
+}
+
+function layoutHostTag(widget: GenericWidget, options: CssRenderBackendOptions) {
+  const { registry = BUILTIN_JDW_REGISTRY } = options;
+  const hostTag = registry.definition(widget.type)?.hostTag;
+
+  return isWidgetHostTag(hostTag) ? hostTag : 'div';
+}
+
 function renderLayoutNode(
   node: LayoutNodeResult,
   parentOrigin: { readonly x: number; readonly y: number },
   options: CssRenderBackendOptions,
+  path: WidgetPath,
 ): ReactNode {
   const widget = node.widget;
+  const hostTag = layoutHostTag(widget, options);
   const isLayoutContainer = LAYOUT_CONTAINER_TYPES.has(widget.type);
   const leafContent = isLayoutContainer ? null : renderLeafContent(widget, options);
+  const selected = options.selectedPath ? widgetPathEquals(path, options.selectedPath) : false;
+  const interactive = Boolean(options.onSelectPath);
 
   return createElement(
-    'div',
+    hostTag,
     {
+      'aria-selected': interactive ? selected : undefined,
       'data-layout-node': true,
+      'data-widget-interactive': interactive ? 'true' : undefined,
+      'data-widget-path': widgetPathKey(path),
+      'data-widget-selected': selected ? 'true' : undefined,
       'data-widget-type': widget.type,
+      role: interactive && hostTag === 'div' ? 'button' : undefined,
+      tabIndex: interactive ? (selected ? 0 : -1) : undefined,
+      onClick: interactive
+        ? (event: MouseEvent<HTMLElement>) => {
+            event.stopPropagation();
+            event.currentTarget.focus({ preventScroll: true });
+            options.onSelectPath?.(path);
+          }
+        : undefined,
+      onKeyDown: interactive
+        ? (event: KeyboardEvent<HTMLElement>) => {
+            if (!isKeyboardActivationKey(event.key)) return;
+
+            event.preventDefault();
+            event.stopPropagation();
+            options.onSelectPath?.(path);
+          }
+        : undefined,
       style: layoutNodeStyle(node, parentOrigin, widget),
     },
     leafContent,
@@ -99,7 +178,12 @@ function renderLayoutNode(
       createElement(
         'div',
         { key: index },
-        renderLayoutNode(child, { x: node.rect.x, y: node.rect.y }, options),
+        renderLayoutNode(
+          child,
+          { x: node.rect.x, y: node.rect.y },
+          options,
+          layoutChildPath(widget, path, index),
+        ),
       ),
     ),
   );
@@ -120,7 +204,7 @@ export function renderCssLayoutTree(
         minHeight: readNumber(tree.widget.minHeight) ?? 24,
       },
     },
-    renderLayoutNode(tree, { x: tree.rect.x, y: tree.rect.y }, options),
+    renderLayoutNode(tree, { x: tree.rect.x, y: tree.rect.y }, options, []),
   );
 }
 
@@ -129,6 +213,11 @@ export function renderJdwWithLayout(
   options: CssRenderBackendOptions = {},
 ): ReactNode {
   const widget = jdwNodeToGenericWidget(node);
-  const tree = layoutWidget(widget, options.layoutConstraints ?? DEFAULT_LAYOUT_CONSTRAINTS);
+  const tree = layoutWidget(
+    widget,
+    options.layoutConstraints ?? DEFAULT_LAYOUT_CONSTRAINTS,
+    { x: 0, y: 0 },
+    { registry: options.registry ?? BUILTIN_JDW_REGISTRY },
+  );
   return renderCssLayoutTree(tree, options);
 }

package/src/jdw/document.ts

@@ -3,9 +3,6 @@ export const JDW_WIDGET_DOCUMENT_MIME = 'application/vnd.workbench-kit.jdw+json'
 export const JDW_SCHEMA_DOCUMENT_FILE_EXTENSION = '.jdw.schema.json';
 export const JDW_SCHEMA_DOCUMENT_MIME = 'application/vnd.workbench-kit.jdw-schema+json';
 
-export const JDW_DOCUMENT_FILE_EXTENSION = JDW_WIDGET_DOCUMENT_FILE_EXTENSION;
-export const JDW_DOCUMENT_MIME = JDW_WIDGET_DOCUMENT_MIME;
-
 export interface JdwDocumentRef {
   readonly mimeType?: string | undefined;
   readonly path: string;

package/src/jdw/fixtures/jdw-sample-screens.ts

@@ -71,14 +71,16 @@ export const JDW_SAMPLE_SCREENS: readonly JdwSampleScreenDefinition[] = [
             { gap: 4, col: 3, row: 0 },
           ),
         ]),
-        screenRow(
-          [
-            screenExpanded(screenPanel('Traffic trend', '#1e2127')),
-            screenExpanded(screenPanel('Top channels', '#1e2127')),
-          ],
-          {
-            gap: 12,
-          },
+        screenExpanded(
+          screenRow(
+            [
+              screenExpanded(screenPanel('Traffic trend', '#1e2127')),
+              screenExpanded(screenPanel('Top channels', '#1e2127')),
+            ],
+            {
+              gap: 12,
+            },
+          ),
         ),
       ],
       { gap: 16, padding: 20, background: '#13151a' },

package/src/jdw/index.ts

@@ -1,7 +1,12 @@
-export { JdwPreview, type JdwPreviewProps } from './JdwPreview.js';
+export { getJdwPreviewInvalidations, JdwPreview, type JdwPreviewProps } from './JdwPreview.js';
+export {
+  JdwPreviewViewport,
+  resolveContainerLayoutConstraints,
+  resolveJdwPreviewFrameSize,
+  type JdwPreviewViewportFit,
+  type JdwPreviewViewportProps,
+} from './JdwPreviewViewport.js';
 export {
-  JDW_DOCUMENT_FILE_EXTENSION,
-  JDW_DOCUMENT_MIME,
   JDW_SCHEMA_DOCUMENT_FILE_EXTENSION,
   JDW_SCHEMA_DOCUMENT_MIME,
   JDW_WIDGET_DOCUMENT_FILE_EXTENSION,
@@ -20,6 +25,7 @@ export {
   JsonConfigValidationBanner,
   type JsonCodeEditorPaneProps,
   type JsonConfigValidationBannerProps,
+  type JsonEditorProblem,
 } from './JsonCodeEditorPane.js';
 export { renderJdw, renderJdwNode, useRenderJdw, type RenderJdwOptions } from './renderJdw.js';
 export {
@@ -28,7 +34,6 @@ export {
   type CssRenderBackendOptions,
 } from './cssRenderBackend.js';
 export { BUILTIN_JDW_REGISTRY, createBuiltinJdwRegistry } from './createBuiltinJdwRegistry.js';
-export { renderBuiltinWidgetNode } from './builtins/renderBuiltinWidgetNode.js';
 export {
   formatJdwSampleScreenJson,
   formatJdwSampleScreenSpec,

package/src/jdw/jdw-preview-viewport.css

@@ -0,0 +1,41 @@
+.ui-jdw-preview-viewport-host {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.ui-jdw-preview-viewport {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.ui-jdw-preview-viewport-host[data-fit='container'] .ui-workbench-preview-canvas__frame {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.ui-jdw-preview-viewport__stage {
+  position: relative;
+  overflow: hidden;
+}
+
+.ui-jdw-preview-viewport__render {
+  width: 100%;
+  height: 100%;
+}
+
+.ui-jdw-preview-viewport-host [data-widget-interactive='true'] {
+  cursor: pointer;
+}
+
+.ui-jdw-preview-viewport-host [data-widget-selected='true'] {
+  outline: 1px solid var(--color-focus-border, #007acc);
+  outline-offset: -1px;
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-focus-border, #007acc) 70%, transparent);
+}