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

package/src/widget-asset/WidgetAssetMetadataForm.tsx

@@ -1,82 +1,82 @@
-import type { WidgetPlacementAsset, WidgetPlacementAssetKind } from '@workbench-kit/contracts';
-
-import {
-  WorkbenchPropertySelectRow,
-  WorkbenchPropertyStack,
-  WorkbenchPropertySection,
-  WorkbenchPropertyTextRow,
-} from '../layout/WorkbenchPropertyPanel';
-
-const CATEGORY_OPTIONS = [
-  { label: 'Content', value: 'content' },
-  { label: 'Layout', value: 'layout' },
-  { label: 'Template', value: 'template' },
-];
-
-const KIND_OPTIONS: { label: string; value: WidgetPlacementAssetKind }[] = [
-  { label: 'Leaf', value: 'leaf' },
-  { label: 'Container', value: 'container' },
-  { label: 'Template', value: 'template' },
-];
-
-export interface WidgetAssetMetadataFormProps {
-  readonly asset: WidgetPlacementAsset;
-  readonly readOnly?: boolean | undefined;
-  readonly onChange: (next: WidgetPlacementAsset) => void;
-}
-
-export function WidgetAssetMetadataForm({
-  asset,
-  onChange,
-  readOnly = false,
-}: WidgetAssetMetadataFormProps) {
-  const patch = (patchValue: Partial<WidgetPlacementAsset>) => {
-    onChange({ ...asset, ...patchValue });
-  };
-
-  return (
-    <WorkbenchPropertyStack>
-      <WorkbenchPropertySection title="Asset">
-        <WorkbenchPropertyTextRow
-          label="ID"
-          readOnly={readOnly}
-          value={asset.id}
-          onValueChange={(next) => patch({ id: next })}
-        />
-        <WorkbenchPropertyTextRow
-          label="Label"
-          readOnly={readOnly}
-          value={asset.label}
-          onValueChange={(next) => patch({ label: next })}
-        />
-        <WorkbenchPropertyTextRow
-          label="Description"
-          readOnly={readOnly}
-          value={asset.description ?? ''}
-          onValueChange={(next) => patch({ description: next.length > 0 ? next : undefined })}
-        />
-        <WorkbenchPropertySelectRow
-          label="Category"
-          disabled={readOnly}
-          options={CATEGORY_OPTIONS}
-          value={asset.category}
-          onValueChange={(next) => patch({ category: next })}
-        />
-        <WorkbenchPropertySelectRow
-          label="Kind"
-          disabled={readOnly}
-          options={KIND_OPTIONS}
-          value={asset.kind ?? 'leaf'}
-          onValueChange={(next) => patch({ kind: next })}
-        />
-        <WorkbenchPropertyTextRow
-          label="Icon"
-          placeholder="codicon-symbol-text"
-          readOnly={readOnly}
-          value={asset.icon ?? ''}
-          onValueChange={(next) => patch({ icon: next.length > 0 ? next : undefined })}
-        />
-      </WorkbenchPropertySection>
-    </WorkbenchPropertyStack>
-  );
-}
+import type { WidgetPlacementAsset, WidgetPlacementAssetKind } from '@workbench-kit/contracts';
+
+import {
+  WorkbenchPropertySelectRow,
+  WorkbenchPropertyStack,
+  WorkbenchPropertySection,
+  WorkbenchPropertyTextRow,
+} from '../layout/WorkbenchPropertyPanel';
+
+const CATEGORY_OPTIONS = [
+  { label: 'Content', value: 'content' },
+  { label: 'Layout', value: 'layout' },
+  { label: 'Template', value: 'template' },
+];
+
+const KIND_OPTIONS: { label: string; value: WidgetPlacementAssetKind }[] = [
+  { label: 'Leaf', value: 'leaf' },
+  { label: 'Container', value: 'container' },
+  { label: 'Template', value: 'template' },
+];
+
+export interface WidgetAssetMetadataFormProps {
+  readonly asset: WidgetPlacementAsset;
+  readonly readOnly?: boolean | undefined;
+  readonly onChange: (next: WidgetPlacementAsset) => void;
+}
+
+export function WidgetAssetMetadataForm({
+  asset,
+  onChange,
+  readOnly = false,
+}: WidgetAssetMetadataFormProps) {
+  const patch = (patchValue: Partial<WidgetPlacementAsset>) => {
+    onChange({ ...asset, ...patchValue });
+  };
+
+  return (
+    <WorkbenchPropertyStack>
+      <WorkbenchPropertySection title="Asset">
+        <WorkbenchPropertyTextRow
+          label="ID"
+          readOnly={readOnly}
+          value={asset.id}
+          onValueChange={(next) => patch({ id: next })}
+        />
+        <WorkbenchPropertyTextRow
+          label="Label"
+          readOnly={readOnly}
+          value={asset.label}
+          onValueChange={(next) => patch({ label: next })}
+        />
+        <WorkbenchPropertyTextRow
+          label="Description"
+          readOnly={readOnly}
+          value={asset.description ?? ''}
+          onValueChange={(next) => patch({ description: next.length > 0 ? next : undefined })}
+        />
+        <WorkbenchPropertySelectRow
+          label="Category"
+          disabled={readOnly}
+          options={CATEGORY_OPTIONS}
+          value={asset.category}
+          onValueChange={(next) => patch({ category: next })}
+        />
+        <WorkbenchPropertySelectRow
+          label="Kind"
+          disabled={readOnly}
+          options={KIND_OPTIONS}
+          value={asset.kind ?? 'leaf'}
+          onValueChange={(next) => patch({ kind: next })}
+        />
+        <WorkbenchPropertyTextRow
+          label="Icon"
+          placeholder="codicon-symbol-text"
+          readOnly={readOnly}
+          value={asset.icon ?? ''}
+          onValueChange={(next) => patch({ icon: next.length > 0 ? next : undefined })}
+        />
+      </WorkbenchPropertySection>
+    </WorkbenchPropertyStack>
+  );
+}

package/src/widget-asset/WidgetAssetModeControls.tsx

@@ -1,42 +1,42 @@
-import { IconButton } from '../primitives/icon-button';
-import { cx } from '../utils/cx';
-import type { WidgetAssetViewMode } from './widget-asset-mode.js';
-
-export interface WidgetAssetModeControlsProps {
-  readonly className?: string | undefined;
-  readonly mode: WidgetAssetViewMode;
-  readonly onModeChange: (mode: WidgetAssetViewMode) => void;
-}
-
-export function WidgetAssetModeControls({
-  className,
-  mode,
-  onModeChange,
-}: WidgetAssetModeControlsProps) {
-  return (
-    <div
-      className={cx('ui-workbench-artifact-shell__modes', 'widget-asset-mode-controls', className)}
-    >
-      <IconButton
-        aria-pressed={mode === 'design'}
-        className={cx(
-          'ui-workbench-artifact-shell__mode',
-          mode === 'design' && 'ui-workbench-artifact-shell__mode--active',
-        )}
-        icon="codicon-edit"
-        label="Design"
-        onClick={() => onModeChange('design')}
-      />
-      <IconButton
-        aria-pressed={mode === 'code'}
-        className={cx(
-          'ui-workbench-artifact-shell__mode',
-          mode === 'code' && 'ui-workbench-artifact-shell__mode--active',
-        )}
-        icon="codicon-code"
-        label="Code"
-        onClick={() => onModeChange('code')}
-      />
-    </div>
-  );
-}
+import { IconButton } from '../primitives/icon-button';
+import { cx } from '../utils/cx';
+import type { WidgetAssetViewMode } from './widget-asset-mode.js';
+
+export interface WidgetAssetModeControlsProps {
+  readonly className?: string | undefined;
+  readonly mode: WidgetAssetViewMode;
+  readonly onModeChange: (mode: WidgetAssetViewMode) => void;
+}
+
+export function WidgetAssetModeControls({
+  className,
+  mode,
+  onModeChange,
+}: WidgetAssetModeControlsProps) {
+  return (
+    <div
+      className={cx('ui-workbench-artifact-shell__modes', 'widget-asset-mode-controls', className)}
+    >
+      <IconButton
+        aria-pressed={mode === 'design'}
+        className={cx(
+          'ui-workbench-artifact-shell__mode',
+          mode === 'design' && 'ui-workbench-artifact-shell__mode--active',
+        )}
+        icon="codicon-edit"
+        label="Design"
+        onClick={() => onModeChange('design')}
+      />
+      <IconButton
+        aria-pressed={mode === 'code'}
+        className={cx(
+          'ui-workbench-artifact-shell__mode',
+          mode === 'code' && 'ui-workbench-artifact-shell__mode--active',
+        )}
+        icon="codicon-code"
+        label="Code"
+        onClick={() => onModeChange('code')}
+      />
+    </div>
+  );
+}

package/src/widget-asset/WidgetAssetSourceEditor.tsx

@@ -1,50 +1,50 @@
-import { useMemo } from 'react';
-
-import { JsonCodeEditorPane } from '../jdw/JsonCodeEditorPane.js';
-import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
-import type { WorkspaceFile } from '../workbench/workspace/types.js';
-import { resolveWidgetAssetMimeType } from './widget-asset-document.js';
-
-export interface WidgetAssetSourceEditorProps {
-  readonly path?: string | undefined;
-  readonly value: string;
-  readonly onChange: (value: string) => void;
-  readonly onSave?: (() => void) | undefined;
-  readonly parseError?: string | null | undefined;
-  readonly readOnly?: boolean | undefined;
-  readonly theme?: WorkspaceEditorTheme | undefined;
-}
-
-export function WidgetAssetSourceEditor({
-  path = 'assets/new-asset/manifest.json',
-  value,
-  onChange,
-  onSave,
-  parseError = null,
-  readOnly = false,
-  theme = 'dark',
-}: WidgetAssetSourceEditorProps) {
-  const file = useMemo<WorkspaceFile>(
-    () => ({
-      content: value,
-      mimeType: resolveWidgetAssetMimeType(path),
-      path,
-    }),
-    [path, value],
-  );
-
-  return (
-    <div className="widget-asset-source" data-testid="widget-asset-source">
-      <JsonCodeEditorPane
-        documentParseError={parseError}
-        file={file}
-        readOnly={readOnly}
-        showProblemsPanel={false}
-        theme={theme}
-        value={value}
-        onChange={onChange}
-        onSave={onSave}
-      />
-    </div>
-  );
-}
+import { useMemo } from 'react';
+
+import { JsonCodeEditorPane } from '../jdw/JsonCodeEditorPane.js';
+import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
+import type { WorkspaceFile } from '../workbench/workspace/types.js';
+import { resolveWidgetAssetMimeType } from './widget-asset-document.js';
+
+export interface WidgetAssetSourceEditorProps {
+  readonly path?: string | undefined;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSave?: (() => void) | undefined;
+  readonly parseError?: string | null | undefined;
+  readonly readOnly?: boolean | undefined;
+  readonly theme?: WorkspaceEditorTheme | undefined;
+}
+
+export function WidgetAssetSourceEditor({
+  path = 'assets/new-asset/manifest.json',
+  value,
+  onChange,
+  onSave,
+  parseError = null,
+  readOnly = false,
+  theme = 'dark',
+}: WidgetAssetSourceEditorProps) {
+  const file = useMemo<WorkspaceFile>(
+    () => ({
+      content: value,
+      mimeType: resolveWidgetAssetMimeType(path),
+      path,
+    }),
+    [path, value],
+  );
+
+  return (
+    <div className="widget-asset-source" data-testid="widget-asset-source">
+      <JsonCodeEditorPane
+        documentParseError={parseError}
+        file={file}
+        readOnly={readOnly}
+        showProblemsPanel={false}
+        theme={theme}
+        value={value}
+        onChange={onChange}
+        onSave={onSave}
+      />
+    </div>
+  );
+}

package/src/widget-asset/WidgetAssetWorkbench.tsx

@@ -1,111 +1,111 @@
-import { useState, type ReactNode } from 'react';
-import type { WidgetRegistryContract } from '@workbench-kit/contracts';
-
-import { Panel, PanelBody, PanelHeader } from '../layout/panel';
-import { Button } from '../primitives/button';
-import { Toolbar } from '../primitives/toolbar';
-import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
-import { fileNameOfPath } from '../workbench/workspace/path';
-import { WorkspacePathLabel } from '../workbench/workspace/WorkspacePathLabel';
-import type { WorkspaceFile } from '../workbench/workspace/types.js';
-import { WidgetAssetEditor } from './WidgetAssetEditor.js';
-import { WidgetAssetModeControls } from './WidgetAssetModeControls.js';
-import { DEFAULT_WIDGET_ASSET_VIEW_MODE, type WidgetAssetViewMode } from './widget-asset-mode.js';
-
-export interface WidgetAssetWorkbenchProps {
-  readonly path?: string | undefined;
-  readonly title?: ReactNode | undefined;
-  readonly value: string;
-  readonly onChange: (value: string) => void;
-  readonly onSave?: (() => void) | undefined;
-  readonly onDiscard?: (() => void) | undefined;
-  readonly dirty?: boolean | undefined;
-  readonly readOnly?: boolean | undefined;
-  readonly registry?: WidgetRegistryContract<unknown> | undefined;
-  readonly theme?: WorkspaceEditorTheme | undefined;
-  readonly defaultViewMode?: WidgetAssetViewMode | undefined;
-  readonly viewMode?: WidgetAssetViewMode | undefined;
-  readonly onViewModeChange?: ((mode: WidgetAssetViewMode) => void) | undefined;
-  readonly workspaceFiles?: readonly WorkspaceFile[] | undefined;
-}
-
-export function WidgetAssetWorkbench({
-  path,
-  title,
-  value,
-  onChange,
-  onSave,
-  onDiscard,
-  dirty = false,
-  readOnly = false,
-  registry,
-  theme = 'dark',
-  defaultViewMode = DEFAULT_WIDGET_ASSET_VIEW_MODE,
-  viewMode,
-  onViewModeChange,
-  workspaceFiles,
-}: WidgetAssetWorkbenchProps) {
-  const [uncontrolledViewMode, setUncontrolledViewMode] =
-    useState<WidgetAssetViewMode>(defaultViewMode);
-  const resolvedViewMode = viewMode ?? uncontrolledViewMode;
-
-  const setViewMode = (nextMode: WidgetAssetViewMode) => {
-    if (viewMode === undefined) {
-      setUncontrolledViewMode(nextMode);
-    }
-    onViewModeChange?.(nextMode);
-  };
-
-  const resolvedTitle = title ?? (path ? fileNameOfPath(path) : 'Widget asset');
-
-  return (
-    <Panel
-      className="widget-asset-workbench"
-      data-mode={resolvedViewMode}
-      data-testid="widget-asset-workbench"
-    >
-      <PanelHeader
-        actions={
-          <Toolbar>
-            {dirty && !readOnly ? (
-              <>
-                {onDiscard ? <Button onClick={onDiscard}>Discard</Button> : null}
-                {onSave ? (
-                  <Button variant="primary" onClick={onSave}>
-                    Save
-                  </Button>
-                ) : null}
-              </>
-            ) : null}
-            <WidgetAssetModeControls mode={resolvedViewMode} onModeChange={setViewMode} />
-          </Toolbar>
-        }
-      >
-        <span className="widget-asset-workbench__title">
-          {resolvedTitle}
-          {path ? (
-            <WorkspacePathLabel className="widget-asset-workbench__path" path={path} />
-          ) : null}
-          {dirty ? (
-            <span className="widget-asset-workbench__dirty-indicator" title="Unsaved changes">
-              ●
-            </span>
-          ) : null}
-        </span>
-      </PanelHeader>
-      <PanelBody className="widget-asset-workbench__body">
-        <WidgetAssetEditor
-          path={path}
-          readOnly={readOnly}
-          registry={registry}
-          theme={theme}
-          value={value}
-          viewMode={resolvedViewMode}
-          workspaceFiles={workspaceFiles}
-          onChange={onChange}
-          onSave={onSave}
-        />
-      </PanelBody>
-    </Panel>
-  );
-}
+import { useState, type ReactNode } from 'react';
+import type { WidgetRegistryContract } from '@workbench-kit/contracts';
+
+import { Panel, PanelBody, PanelHeader } from '../layout/panel';
+import { Button } from '../primitives/button';
+import { Toolbar } from '../primitives/toolbar';
+import type { WorkspaceEditorTheme } from '../workbench/workspace/WorkspaceEditor.js';
+import { fileNameOfPath } from '../workbench/workspace/path';
+import { WorkspacePathLabel } from '../workbench/workspace/WorkspacePathLabel';
+import type { WorkspaceFile } from '../workbench/workspace/types.js';
+import { WidgetAssetEditor } from './WidgetAssetEditor.js';
+import { WidgetAssetModeControls } from './WidgetAssetModeControls.js';
+import { DEFAULT_WIDGET_ASSET_VIEW_MODE, type WidgetAssetViewMode } from './widget-asset-mode.js';
+
+export interface WidgetAssetWorkbenchProps {
+  readonly path?: string | undefined;
+  readonly title?: ReactNode | undefined;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSave?: (() => void) | undefined;
+  readonly onDiscard?: (() => void) | undefined;
+  readonly dirty?: boolean | undefined;
+  readonly readOnly?: boolean | undefined;
+  readonly registry?: WidgetRegistryContract<unknown> | undefined;
+  readonly theme?: WorkspaceEditorTheme | undefined;
+  readonly defaultViewMode?: WidgetAssetViewMode | undefined;
+  readonly viewMode?: WidgetAssetViewMode | undefined;
+  readonly onViewModeChange?: ((mode: WidgetAssetViewMode) => void) | undefined;
+  readonly workspaceFiles?: readonly WorkspaceFile[] | undefined;
+}
+
+export function WidgetAssetWorkbench({
+  path,
+  title,
+  value,
+  onChange,
+  onSave,
+  onDiscard,
+  dirty = false,
+  readOnly = false,
+  registry,
+  theme = 'dark',
+  defaultViewMode = DEFAULT_WIDGET_ASSET_VIEW_MODE,
+  viewMode,
+  onViewModeChange,
+  workspaceFiles,
+}: WidgetAssetWorkbenchProps) {
+  const [uncontrolledViewMode, setUncontrolledViewMode] =
+    useState<WidgetAssetViewMode>(defaultViewMode);
+  const resolvedViewMode = viewMode ?? uncontrolledViewMode;
+
+  const setViewMode = (nextMode: WidgetAssetViewMode) => {
+    if (viewMode === undefined) {
+      setUncontrolledViewMode(nextMode);
+    }
+    onViewModeChange?.(nextMode);
+  };
+
+  const resolvedTitle = title ?? (path ? fileNameOfPath(path) : 'Widget asset');
+
+  return (
+    <Panel
+      className="widget-asset-workbench"
+      data-mode={resolvedViewMode}
+      data-testid="widget-asset-workbench"
+    >
+      <PanelHeader
+        actions={
+          <Toolbar>
+            {dirty && !readOnly ? (
+              <>
+                {onDiscard ? <Button onClick={onDiscard}>Discard</Button> : null}
+                {onSave ? (
+                  <Button variant="primary" onClick={onSave}>
+                    Save
+                  </Button>
+                ) : null}
+              </>
+            ) : null}
+            <WidgetAssetModeControls mode={resolvedViewMode} onModeChange={setViewMode} />
+          </Toolbar>
+        }
+      >
+        <span className="widget-asset-workbench__title">
+          {resolvedTitle}
+          {path ? (
+            <WorkspacePathLabel className="widget-asset-workbench__path" path={path} />
+          ) : null}
+          {dirty ? (
+            <span className="widget-asset-workbench__dirty-indicator" title="Unsaved changes">
+              ●
+            </span>
+          ) : null}
+        </span>
+      </PanelHeader>
+      <PanelBody className="widget-asset-workbench__body">
+        <WidgetAssetEditor
+          path={path}
+          readOnly={readOnly}
+          registry={registry}
+          theme={theme}
+          value={value}
+          viewMode={resolvedViewMode}
+          workspaceFiles={workspaceFiles}
+          onChange={onChange}
+          onSave={onSave}
+        />
+      </PanelBody>
+    </Panel>
+  );
+}

package/src/widget-asset/index.ts

@@ -1,17 +1,17 @@
-export { WidgetAssetEditor } from './WidgetAssetEditor.js';
-export type { WidgetAssetEditorProps } from './WidgetAssetEditor.js';
-export { WidgetAssetWorkbench } from './WidgetAssetWorkbench.js';
-export type { WidgetAssetWorkbenchProps } from './WidgetAssetWorkbench.js';
-export { WidgetAssetMetadataForm } from './WidgetAssetMetadataForm.js';
-export type { WidgetAssetMetadataFormProps } from './WidgetAssetMetadataForm.js';
-export { WidgetAssetModeControls } from './WidgetAssetModeControls.js';
-export type { WidgetAssetModeControlsProps } from './WidgetAssetModeControls.js';
-export { DEFAULT_WIDGET_ASSET_VIEW_MODE, type WidgetAssetViewMode } from './widget-asset-mode.js';
-export {
-  WIDGET_ASSET_CONTENT_MIME,
-  WIDGET_ASSET_MANIFEST_MIME,
-  WIDGET_ASSET_SCHEMA_MIME,
-  isWidgetAssetDocument,
-  resolveWidgetAssetMimeType,
-} from './widget-asset-document.js';
-export type { WidgetAssetDocumentRef } from './widget-asset-document.js';
+export { WidgetAssetEditor } from './WidgetAssetEditor.js';
+export type { WidgetAssetEditorProps } from './WidgetAssetEditor.js';
+export { WidgetAssetWorkbench } from './WidgetAssetWorkbench.js';
+export type { WidgetAssetWorkbenchProps } from './WidgetAssetWorkbench.js';
+export { WidgetAssetMetadataForm } from './WidgetAssetMetadataForm.js';
+export type { WidgetAssetMetadataFormProps } from './WidgetAssetMetadataForm.js';
+export { WidgetAssetModeControls } from './WidgetAssetModeControls.js';
+export type { WidgetAssetModeControlsProps } from './WidgetAssetModeControls.js';
+export { DEFAULT_WIDGET_ASSET_VIEW_MODE, type WidgetAssetViewMode } from './widget-asset-mode.js';
+export {
+  WIDGET_ASSET_CONTENT_MIME,
+  WIDGET_ASSET_MANIFEST_MIME,
+  WIDGET_ASSET_SCHEMA_MIME,
+  isWidgetAssetDocument,
+  resolveWidgetAssetMimeType,
+} from './widget-asset-document.js';
+export type { WidgetAssetDocumentRef } from './widget-asset-document.js';