@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/widget-asset/widget-asset-document.ts

@@ -1,37 +1,37 @@
-import {
-  isWidgetAssetContentPath,
-  isWidgetAssetPackageFilePath,
-  isWidgetAssetSchemaPath,
-} from '@workbench-kit/jdw';
-
-export const WIDGET_ASSET_MANIFEST_MIME =
-  'application/vnd.workbench-kit.widget-asset-manifest+json';
-export const WIDGET_ASSET_CONTENT_MIME = 'application/vnd.workbench-kit.widget-asset-content+json';
-export const WIDGET_ASSET_SCHEMA_MIME = 'application/vnd.workbench-kit.widget-asset-schema+json';
-
-export interface WidgetAssetDocumentRef {
-  readonly path: string;
-  readonly mimeType?: string | undefined;
-}
-
-export function resolveWidgetAssetMimeType(path: string): string {
-  if (isWidgetAssetContentPath(path)) {
-    return WIDGET_ASSET_CONTENT_MIME;
-  }
-  if (isWidgetAssetSchemaPath(path)) {
-    return WIDGET_ASSET_SCHEMA_MIME;
-  }
-  return WIDGET_ASSET_MANIFEST_MIME;
-}
-
-export function isWidgetAssetDocument(file: WidgetAssetDocumentRef): boolean {
-  if (
-    file.mimeType === WIDGET_ASSET_MANIFEST_MIME ||
-    file.mimeType === WIDGET_ASSET_CONTENT_MIME ||
-    file.mimeType === WIDGET_ASSET_SCHEMA_MIME
-  ) {
-    return true;
-  }
-
-  return isWidgetAssetPackageFilePath(file.path);
-}
+import {
+  isWidgetAssetContentPath,
+  isWidgetAssetPackageFilePath,
+  isWidgetAssetSchemaPath,
+} from '@workbench-kit/jdw';
+
+export const WIDGET_ASSET_MANIFEST_MIME =
+  'application/vnd.workbench-kit.widget-asset-manifest+json';
+export const WIDGET_ASSET_CONTENT_MIME = 'application/vnd.workbench-kit.widget-asset-content+json';
+export const WIDGET_ASSET_SCHEMA_MIME = 'application/vnd.workbench-kit.widget-asset-schema+json';
+
+export interface WidgetAssetDocumentRef {
+  readonly path: string;
+  readonly mimeType?: string | undefined;
+}
+
+export function resolveWidgetAssetMimeType(path: string): string {
+  if (isWidgetAssetContentPath(path)) {
+    return WIDGET_ASSET_CONTENT_MIME;
+  }
+  if (isWidgetAssetSchemaPath(path)) {
+    return WIDGET_ASSET_SCHEMA_MIME;
+  }
+  return WIDGET_ASSET_MANIFEST_MIME;
+}
+
+export function isWidgetAssetDocument(file: WidgetAssetDocumentRef): boolean {
+  if (
+    file.mimeType === WIDGET_ASSET_MANIFEST_MIME ||
+    file.mimeType === WIDGET_ASSET_CONTENT_MIME ||
+    file.mimeType === WIDGET_ASSET_SCHEMA_MIME
+  ) {
+    return true;
+  }
+
+  return isWidgetAssetPackageFilePath(file.path);
+}

package/src/widget-asset/widget-asset-mode.ts

@@ -1,3 +1,3 @@
-export type WidgetAssetViewMode = 'design' | 'code';
-
-export const DEFAULT_WIDGET_ASSET_VIEW_MODE: WidgetAssetViewMode = 'design';
+export type WidgetAssetViewMode = 'design' | 'code';
+
+export const DEFAULT_WIDGET_ASSET_VIEW_MODE: WidgetAssetViewMode = 'design';

package/src/widget-studio/builtin-widget-asset-catalog.ts

@@ -1,12 +1,12 @@
-import { widgetStudioBuiltinAssetFiles } from '@workbench-kit/adapters';
-import type { WidgetAssetCatalogContract } from '@workbench-kit/contracts';
-import { createWidgetAssetCatalogFromWorkspaceFiles } from '@workbench-kit/jdw';
-/** Built-in palette assets shipped with the workbench demo and widget studio. */
-export function createBuiltinWidgetAssetCatalog(): WidgetAssetCatalogContract {
-  return createWidgetAssetCatalogFromWorkspaceFiles(
-    widgetStudioBuiltinAssetFiles.map((file) => ({
-      path: file.path,
-      content: file.content,
-    })),
-  );
-}
+import { widgetStudioBuiltinAssetFiles } from '@workbench-kit/adapters';
+import type { WidgetAssetCatalogContract } from '@workbench-kit/contracts';
+import { createWidgetAssetCatalogFromWorkspaceFiles } from '@workbench-kit/jdw';
+/** Built-in palette assets shipped with the workbench demo and widget studio. */
+export function createBuiltinWidgetAssetCatalog(): WidgetAssetCatalogContract {
+  return createWidgetAssetCatalogFromWorkspaceFiles(
+    widgetStudioBuiltinAssetFiles.map((file) => ({
+      path: file.path,
+      content: file.content,
+    })),
+  );
+}

package/src/widget-studio/create-widget-studio-workspace-editor.tsx

@@ -1,78 +1,78 @@
-import type { WidgetAssetCatalogContract, WidgetRegistryContract } from '@workbench-kit/contracts';
-
-import { WorkspaceEditor } from '../workbench/workspace/WorkspaceEditor.js';
-import type { WorkspaceEditorPanelRenderEditorContext } from '../workbench/workspace/WorkspaceEditorPanel.js';
-import type { WorkspaceFile } from '../workbench/workspace/types.js';
-import { WidgetAssetWorkbench } from '../widget-asset/WidgetAssetWorkbench.js';
-import { isWidgetAssetDocument } from '../widget-asset/widget-asset-document.js';
-import { WidgetTreeWorkbench } from '../widget-tree/WidgetTreeWorkbench.js';
-import { isWidgetTreeDocument } from '../widget-tree/widget-tree-document.js';
-import { resolveWidgetStudioAssetCatalog } from './resolve-widget-studio-asset-catalog.js';
-
-export interface WidgetStudioRenderContext extends WorkspaceEditorPanelRenderEditorContext {
-  readonly workspaceFiles?: readonly WorkspaceFile[] | undefined;
-}
-
-export interface CreateWidgetStudioWorkspaceEditorOptions {
-  readonly registry?: WidgetRegistryContract<unknown> | undefined;
-  readonly resolveAssetCatalog?:
-    ((files: readonly WorkspaceFile[]) => WidgetAssetCatalogContract) | undefined;
-}
-
-export function createWidgetStudioWorkspaceEditorRenderer(
-  options: CreateWidgetStudioWorkspaceEditorOptions = {},
-) {
-  const { registry, resolveAssetCatalog = resolveWidgetStudioAssetCatalog } = options;
-
-  return (context: WidgetStudioRenderContext) => {
-    const workspaceFiles = context.workspaceFiles ?? [];
-    const assetCatalog = resolveAssetCatalog(workspaceFiles);
-
-    if (isWidgetAssetDocument(context.file)) {
-      return (
-        <WidgetAssetWorkbench
-          dirty={context.isDirty}
-          path={context.file.path}
-          readOnly={false}
-          registry={registry}
-          theme={context.theme}
-          value={context.content}
-          workspaceFiles={workspaceFiles}
-          onChange={context.onChange}
-          onDiscard={context.onDiscard}
-          onSave={() => context.onSave(context.content)}
-        />
-      );
-    }
-
-    if (isWidgetTreeDocument(context.file)) {
-      return (
-        <WidgetTreeWorkbench
-          assetCatalog={assetCatalog}
-          dirty={context.isDirty}
-          path={context.file.path}
-          readOnly={false}
-          registry={registry}
-          theme={context.theme}
-          value={context.content}
-          onChange={context.onChange}
-          onDiscard={context.onDiscard}
-          onSave={() => context.onSave(context.content)}
-        />
-      );
-    }
-
-    return (
-      <WorkspaceEditor
-        key={context.file.path}
-        file={context.file}
-        readOnly={false}
-        showHeader={false}
-        theme={context.theme}
-        value={context.content}
-        onChange={context.onChange}
-        onSave={(content) => context.onSave(content)}
-      />
-    );
-  };
-}
+import type { WidgetAssetCatalogContract, WidgetRegistryContract } from '@workbench-kit/contracts';
+
+import { WorkspaceEditor } from '../workbench/workspace/WorkspaceEditor.js';
+import type { WorkspaceEditorPanelRenderEditorContext } from '../workbench/workspace/WorkspaceEditorPanel.js';
+import type { WorkspaceFile } from '../workbench/workspace/types.js';
+import { WidgetAssetWorkbench } from '../widget-asset/WidgetAssetWorkbench.js';
+import { isWidgetAssetDocument } from '../widget-asset/widget-asset-document.js';
+import { WidgetTreeWorkbench } from '../widget-tree/WidgetTreeWorkbench.js';
+import { isWidgetTreeDocument } from '../widget-tree/widget-tree-document.js';
+import { resolveWidgetStudioAssetCatalog } from './resolve-widget-studio-asset-catalog.js';
+
+export interface WidgetStudioRenderContext extends WorkspaceEditorPanelRenderEditorContext {
+  readonly workspaceFiles?: readonly WorkspaceFile[] | undefined;
+}
+
+export interface CreateWidgetStudioWorkspaceEditorOptions {
+  readonly registry?: WidgetRegistryContract<unknown> | undefined;
+  readonly resolveAssetCatalog?:
+    ((files: readonly WorkspaceFile[]) => WidgetAssetCatalogContract) | undefined;
+}
+
+export function createWidgetStudioWorkspaceEditorRenderer(
+  options: CreateWidgetStudioWorkspaceEditorOptions = {},
+) {
+  const { registry, resolveAssetCatalog = resolveWidgetStudioAssetCatalog } = options;
+
+  return (context: WidgetStudioRenderContext) => {
+    const workspaceFiles = context.workspaceFiles ?? [];
+    const assetCatalog = resolveAssetCatalog(workspaceFiles);
+
+    if (isWidgetAssetDocument(context.file)) {
+      return (
+        <WidgetAssetWorkbench
+          dirty={context.isDirty}
+          path={context.file.path}
+          readOnly={false}
+          registry={registry}
+          theme={context.theme}
+          value={context.content}
+          workspaceFiles={workspaceFiles}
+          onChange={context.onChange}
+          onDiscard={context.onDiscard}
+          onSave={() => context.onSave(context.content)}
+        />
+      );
+    }
+
+    if (isWidgetTreeDocument(context.file)) {
+      return (
+        <WidgetTreeWorkbench
+          assetCatalog={assetCatalog}
+          dirty={context.isDirty}
+          path={context.file.path}
+          readOnly={false}
+          registry={registry}
+          theme={context.theme}
+          value={context.content}
+          onChange={context.onChange}
+          onDiscard={context.onDiscard}
+          onSave={() => context.onSave(context.content)}
+        />
+      );
+    }
+
+    return (
+      <WorkspaceEditor
+        key={context.file.path}
+        file={context.file}
+        readOnly={false}
+        showHeader={false}
+        theme={context.theme}
+        value={context.content}
+        onChange={context.onChange}
+        onSave={(content) => context.onSave(content)}
+      />
+    );
+  };
+}

package/src/widget-studio/index.ts

@@ -1,10 +1,10 @@
-export { createWidgetStudioWorkspaceEditorRenderer } from './create-widget-studio-workspace-editor.js';
-export type {
-  CreateWidgetStudioWorkspaceEditorOptions,
-  WidgetStudioRenderContext,
-} from './create-widget-studio-workspace-editor.js';
-export { createBuiltinWidgetAssetCatalog } from './builtin-widget-asset-catalog.js';
-export {
-  resolveWidgetStudioAssetCatalog,
-  type ResolveWidgetStudioAssetCatalogOptions,
-} from './resolve-widget-studio-asset-catalog.js';
+export { createWidgetStudioWorkspaceEditorRenderer } from './create-widget-studio-workspace-editor.js';
+export type {
+  CreateWidgetStudioWorkspaceEditorOptions,
+  WidgetStudioRenderContext,
+} from './create-widget-studio-workspace-editor.js';
+export { createBuiltinWidgetAssetCatalog } from './builtin-widget-asset-catalog.js';
+export {
+  resolveWidgetStudioAssetCatalog,
+  type ResolveWidgetStudioAssetCatalogOptions,
+} from './resolve-widget-studio-asset-catalog.js';

package/src/widget-studio/resolve-widget-studio-asset-catalog.ts

@@ -1,43 +1,43 @@
-import type { WidgetAssetCatalogContract } from '@workbench-kit/contracts';
-import {
-  createWidgetAssetCatalogFromJdwDocuments,
-  createWidgetAssetCatalogFromWorkspaceFiles,
-  mergeWidgetAssetCatalogs,
-} from '@workbench-kit/jdw';
-
-import type { WorkspaceFile } from '../workbench/workspace/types.js';
-import { createBuiltinWidgetAssetCatalog } from './builtin-widget-asset-catalog.js';
-
-export interface ResolveWidgetStudioAssetCatalogOptions {
-  /** Paths to omit from the JDW-document catalog (usually the active editor file). */
-  readonly excludeDocumentPaths?: readonly string[] | undefined;
-}
-
-/**
- * Resolves the widget studio / Form palette from:
- * 1. built-in assets
- * 2. workspace asset packages (`manifest.json` + `content.json`)
- * 3. workspace `*.jdw.json` documents (for example `jdw/parts/*`)
- *
- * Later catalogs override earlier entries when they share the same `id`.
- */
-export function resolveWidgetStudioAssetCatalog(
-  files: readonly WorkspaceFile[],
-  options: ResolveWidgetStudioAssetCatalogOptions = {},
-): WidgetAssetCatalogContract {
-  const workspaceFiles = files.map((file) => ({
-    path: file.path,
-    content: file.content,
-  }));
-
-  const packageCatalog = createWidgetAssetCatalogFromWorkspaceFiles(workspaceFiles);
-  const documentCatalog = createWidgetAssetCatalogFromJdwDocuments(workspaceFiles, {
-    excludePaths: options.excludeDocumentPaths,
-  });
-
-  return mergeWidgetAssetCatalogs(
-    createBuiltinWidgetAssetCatalog(),
-    packageCatalog,
-    documentCatalog,
-  );
-}
+import type { WidgetAssetCatalogContract } from '@workbench-kit/contracts';
+import {
+  createWidgetAssetCatalogFromJdwDocuments,
+  createWidgetAssetCatalogFromWorkspaceFiles,
+  mergeWidgetAssetCatalogs,
+} from '@workbench-kit/jdw';
+
+import type { WorkspaceFile } from '../workbench/workspace/types.js';
+import { createBuiltinWidgetAssetCatalog } from './builtin-widget-asset-catalog.js';
+
+export interface ResolveWidgetStudioAssetCatalogOptions {
+  /** Paths to omit from the JDW-document catalog (usually the active editor file). */
+  readonly excludeDocumentPaths?: readonly string[] | undefined;
+}
+
+/**
+ * Resolves the widget studio / Form palette from:
+ * 1. built-in assets
+ * 2. workspace asset packages (`manifest.json` + `content.json`)
+ * 3. workspace `*.jdw.json` documents (for example `jdw/parts/*`)
+ *
+ * Later catalogs override earlier entries when they share the same `id`.
+ */
+export function resolveWidgetStudioAssetCatalog(
+  files: readonly WorkspaceFile[],
+  options: ResolveWidgetStudioAssetCatalogOptions = {},
+): WidgetAssetCatalogContract {
+  const workspaceFiles = files.map((file) => ({
+    path: file.path,
+    content: file.content,
+  }));
+
+  const packageCatalog = createWidgetAssetCatalogFromWorkspaceFiles(workspaceFiles);
+  const documentCatalog = createWidgetAssetCatalogFromJdwDocuments(workspaceFiles, {
+    excludePaths: options.excludeDocumentPaths,
+  });
+
+  return mergeWidgetAssetCatalogs(
+    createBuiltinWidgetAssetCatalog(),
+    packageCatalog,
+    documentCatalog,
+  );
+}

package/src/widget-tree/WidgetAssetPalette.tsx

@@ -1,105 +1,105 @@
-import type { DragEvent } from 'react';
-import type { WidgetPlacementAsset } from '@workbench-kit/contracts';
-import type { GenericWidget } from '@workbench-kit/jdw';
-
-import { WorkbenchPropertyHint } from '../layout/WorkbenchPropertyPanel';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
-import { writeWidgetPlacementAssetDragData } from './widget-placement-asset-dnd.js';
-import { canAddChildren } from './widget-tree-layout.js';
-
-const CATEGORY_LABELS: Record<string, string> = {
-  content: 'Content',
-  layout: 'Layout',
-  template: 'Templates',
-  parts: 'Parts',
-  composed: 'Composed',
-  documents: 'Documents',
-};
-
-export interface WidgetAssetPaletteProps {
-  readonly assetsByCategory: Readonly<Record<string, readonly WidgetPlacementAsset[]>>;
-  readonly selectedContainer: GenericWidget | null;
-  readonly readOnly?: boolean | undefined;
-  readonly onPlaceAsset: (asset: WidgetPlacementAsset) => void;
-}
-
-export function WidgetAssetPalette({
-  assetsByCategory,
-  onPlaceAsset,
-  readOnly = false,
-  selectedContainer,
-}: WidgetAssetPaletteProps) {
-  const canClickPlace = canAddChildren(selectedContainer) && !readOnly;
-  const canDrag = !readOnly;
-  const categories = Object.keys(assetsByCategory);
-
-  const handleAssetClick = (asset: WidgetPlacementAsset): void => {
-    if (!canClickPlace) return;
-    onPlaceAsset(asset);
-  };
-
-  const handleAssetDragStart = (
-    event: DragEvent<HTMLButtonElement>,
-    asset: WidgetPlacementAsset,
-  ): void => {
-    if (!canDrag) return;
-    writeWidgetPlacementAssetDragData(event.dataTransfer, asset);
-  };
-
-  return (
-    <div className="widget-tree-asset-palette" data-testid="widget-tree-asset-palette">
-      {readOnly ? (
-        <WorkbenchPropertyHint>Widget assets are read-only in this editor.</WorkbenchPropertyHint>
-      ) : !canClickPlace ? (
-        <WorkbenchPropertyHint>
-          Select a container node in Outline to click-add, or drag an asset onto the outline or
-          preview.
-        </WorkbenchPropertyHint>
-      ) : (
-        <WorkbenchPropertyHint>
-          Click an asset to add it to <strong>{selectedContainer?.type ?? 'container'}</strong>, or
-          drag it onto the outline or preview.
-        </WorkbenchPropertyHint>
-      )}
-
-      {categories.map((category) => (
-        <section key={category} className="widget-tree-asset-palette__section">
-          <h3 className="widget-tree-asset-palette__title">
-            {CATEGORY_LABELS[category] ?? category}
-          </h3>
-          <div className="widget-tree-asset-palette__grid">
-            {assetsByCategory[category]?.map((asset) => (
-              <button
-                key={asset.id}
-                aria-disabled={!canClickPlace}
-                className={cx(
-                  'widget-tree-asset-palette__card',
-                  canDrag && 'widget-tree-asset-palette__card--draggable',
-                  !canClickPlace && !readOnly && 'widget-tree-asset-palette__card--drop-only',
-                  readOnly && 'widget-tree-asset-palette__card--disabled',
-                )}
-                data-testid={`widget-asset-${asset.id}`}
-                disabled={readOnly}
-                draggable={canDrag}
-                title={asset.description ?? asset.label}
-                type="button"
-                onClick={() => handleAssetClick(asset)}
-                onDragStart={(event) => handleAssetDragStart(event, asset)}
-              >
-                {asset.icon ? (
-                  <i aria-hidden className={cxCodicon(asset.icon)} />
-                ) : (
-                  <span className="widget-tree-asset-palette__fallback-icon" aria-hidden>
-                    {asset.label.slice(0, 1).toUpperCase()}
-                  </span>
-                )}
-                <span className="widget-tree-asset-palette__label">{asset.label}</span>
-              </button>
-            ))}
-          </div>
-        </section>
-      ))}
-    </div>
-  );
-}
+import type { DragEvent } from 'react';
+import type { WidgetPlacementAsset } from '@workbench-kit/contracts';
+import type { GenericWidget } from '@workbench-kit/jdw';
+
+import { WorkbenchPropertyHint } from '../layout/WorkbenchPropertyPanel';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+import { writeWidgetPlacementAssetDragData } from './widget-placement-asset-dnd.js';
+import { canAddChildren } from './widget-tree-layout.js';
+
+const CATEGORY_LABELS: Record<string, string> = {
+  content: 'Content',
+  layout: 'Layout',
+  template: 'Templates',
+  parts: 'Parts',
+  composed: 'Composed',
+  documents: 'Documents',
+};
+
+export interface WidgetAssetPaletteProps {
+  readonly assetsByCategory: Readonly<Record<string, readonly WidgetPlacementAsset[]>>;
+  readonly selectedContainer: GenericWidget | null;
+  readonly readOnly?: boolean | undefined;
+  readonly onPlaceAsset: (asset: WidgetPlacementAsset) => void;
+}
+
+export function WidgetAssetPalette({
+  assetsByCategory,
+  onPlaceAsset,
+  readOnly = false,
+  selectedContainer,
+}: WidgetAssetPaletteProps) {
+  const canClickPlace = canAddChildren(selectedContainer) && !readOnly;
+  const canDrag = !readOnly;
+  const categories = Object.keys(assetsByCategory);
+
+  const handleAssetClick = (asset: WidgetPlacementAsset): void => {
+    if (!canClickPlace) return;
+    onPlaceAsset(asset);
+  };
+
+  const handleAssetDragStart = (
+    event: DragEvent<HTMLButtonElement>,
+    asset: WidgetPlacementAsset,
+  ): void => {
+    if (!canDrag) return;
+    writeWidgetPlacementAssetDragData(event.dataTransfer, asset);
+  };
+
+  return (
+    <div className="widget-tree-asset-palette" data-testid="widget-tree-asset-palette">
+      {readOnly ? (
+        <WorkbenchPropertyHint>Widget assets are read-only in this editor.</WorkbenchPropertyHint>
+      ) : !canClickPlace ? (
+        <WorkbenchPropertyHint>
+          Select a container node in Outline to click-add, or drag an asset onto the outline or
+          preview.
+        </WorkbenchPropertyHint>
+      ) : (
+        <WorkbenchPropertyHint>
+          Click an asset to add it to <strong>{selectedContainer?.type ?? 'container'}</strong>, or
+          drag it onto the outline or preview.
+        </WorkbenchPropertyHint>
+      )}
+
+      {categories.map((category) => (
+        <section key={category} className="widget-tree-asset-palette__section">
+          <h3 className="widget-tree-asset-palette__title">
+            {CATEGORY_LABELS[category] ?? category}
+          </h3>
+          <div className="widget-tree-asset-palette__grid">
+            {assetsByCategory[category]?.map((asset) => (
+              <button
+                key={asset.id}
+                aria-disabled={!canClickPlace}
+                className={cx(
+                  'widget-tree-asset-palette__card',
+                  canDrag && 'widget-tree-asset-palette__card--draggable',
+                  !canClickPlace && !readOnly && 'widget-tree-asset-palette__card--drop-only',
+                  readOnly && 'widget-tree-asset-palette__card--disabled',
+                )}
+                data-testid={`widget-asset-${asset.id}`}
+                disabled={readOnly}
+                draggable={canDrag}
+                title={asset.description ?? asset.label}
+                type="button"
+                onClick={() => handleAssetClick(asset)}
+                onDragStart={(event) => handleAssetDragStart(event, asset)}
+              >
+                {asset.icon ? (
+                  <i aria-hidden className={cxCodicon(asset.icon)} />
+                ) : (
+                  <span className="widget-tree-asset-palette__fallback-icon" aria-hidden>
+                    {asset.label.slice(0, 1).toUpperCase()}
+                  </span>
+                )}
+                <span className="widget-tree-asset-palette__label">{asset.label}</span>
+              </button>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}