@workbench-kit/react 0.0.1-prototype.0 → 0.0.2-prototype.0.1.2

package/src/workbench/StatusBar.tsx

@@ -1,123 +1,178 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-import { cx } from '../utils/cx';
-
-export type StatusBarSectionAlign = 'end' | 'start';
-
-export interface StatusBarItemModel {
-  active?: boolean;
-  ariaLabel?: string;
-  disabled?: boolean;
-  hidden?: boolean;
-  icon?: ReactNode;
-  id: string;
-  label: ReactNode;
-  title?: string;
-}
-
-export interface StatusBarSectionModel {
-  align?: StatusBarSectionAlign;
-  hidden?: boolean;
-  id: string;
-  items: StatusBarItemModel[];
-}
-
-export interface StatusBarProps extends ComponentPropsWithRef<'footer'> {
-  compact?: boolean;
-  onItemActivate?: (item: StatusBarItemModel) => void;
-  sections?: StatusBarSectionModel[];
-}
-
-export function StatusBar({
-  'aria-label': ariaLabel = 'Status bar',
-  children,
-  className,
-  compact,
-  onItemActivate,
-  sections,
-  ...props
-}: StatusBarProps) {
-  const content =
-    children ??
-    sections
-      ?.filter((section) => !section.hidden)
-      .map((section) => (
-        <StatusBarSection key={section.id} align={section.align}>
-          {section.items
-            .filter((item) => !item.hidden)
-            .map((item) => (
-              <StatusBarItem
-                key={item.id}
-                active={item.active}
-                aria-label={item.ariaLabel}
-                disabled={item.disabled}
-                icon={item.icon}
-                title={item.title}
-                onClick={() => onItemActivate?.(item)}
-              >
-                {item.label}
-              </StatusBarItem>
-            ))}
-        </StatusBarSection>
-      ));
-
-  return (
-    <footer
-      aria-label={ariaLabel}
-      className={cx(
-        'ui-workbench-status-bar',
-        compact && 'ui-workbench-status-bar--compact',
-        className,
-      )}
-      {...props}
-    >
-      {content}
-    </footer>
-  );
-}
-
-export interface StatusBarSectionProps extends ComponentPropsWithRef<'div'> {
-  align?: StatusBarSectionAlign;
-}
-
-export function StatusBarSection({ align = 'start', className, ...props }: StatusBarSectionProps) {
-  return (
-    <div
-      className={cx(
-        'ui-workbench-status-bar__section',
-        align === 'end' && 'ui-workbench-status-bar__section--end',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export interface StatusBarItemProps extends ComponentPropsWithRef<'button'> {
-  active?: boolean;
-  icon?: ReactNode;
-}
-
-export function StatusBarItem({
-  active,
-  children,
-  className,
-  icon,
-  type = 'button',
-  ...props
-}: StatusBarItemProps) {
-  return (
-    <button
-      type={type}
-      className={cx(
-        'ui-workbench-status-bar__item',
-        active && 'ui-workbench-status-bar__item--active',
-        className,
-      )}
-      data-active={active ? 'true' : undefined}
-      {...props}
-    >
-      {icon ? <span className="ui-workbench-status-bar__icon">{icon}</span> : null}
-      <span className="ui-workbench-status-bar__label">{children}</span>
-    </button>
-  );
-}
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { cxCodicon } from '../utils/codicon';
+import { cx } from '../utils/cx';
+import {
+  getWorkbenchStatusLabel,
+  isWorkbenchStatusBusy,
+  isWorkbenchStatusDisabled,
+  type WorkbenchStatus,
+} from './status';
+
+export type StatusBarSectionAlign = 'end' | 'start';
+
+export interface StatusBarItemModel {
+  active?: boolean;
+  ariaLabel?: string;
+  disabled?: boolean;
+  order?: number;
+  hidden?: boolean;
+  icon?: ReactNode | string;
+  id: string;
+  label: ReactNode;
+  status?: WorkbenchStatus;
+  title?: string;
+}
+
+export interface StatusBarSectionModel {
+  order?: number;
+  align?: StatusBarSectionAlign;
+  hidden?: boolean;
+  id: string;
+  items: StatusBarItemModel[];
+}
+
+export interface StatusBarProps extends ComponentPropsWithRef<'footer'> {
+  compact?: boolean;
+  onItemActivate?: (item: StatusBarItemModel) => void;
+  sections?: StatusBarSectionModel[];
+}
+
+export function StatusBar({
+  'aria-label': ariaLabel = 'Status bar',
+  children,
+  className,
+  compact,
+  onItemActivate,
+  sections,
+  ...props
+}: StatusBarProps) {
+  const content =
+    children ??
+    sortByOrderPriority(sections ?? [])
+      ?.filter((section) => !section.hidden)
+      .map((section) => (
+        <StatusBarSection key={section.id} align={section.align}>
+          {sortByOrderPriority(section.items)
+            .filter((item) => !item.hidden)
+            .map((item) => (
+              <StatusBarItem
+                key={item.id}
+                active={item.active}
+                aria-label={item.ariaLabel}
+                disabled={item.disabled}
+                icon={item.icon}
+                status={item.status}
+                title={item.title}
+                onClick={() => onItemActivate?.(item)}
+              >
+                {item.label}
+              </StatusBarItem>
+            ))}
+        </StatusBarSection>
+      ));
+
+  return (
+    <footer
+      aria-label={ariaLabel}
+      className={cx(
+        'ui-workbench-status-bar',
+        compact && 'ui-workbench-status-bar--compact',
+        className,
+      )}
+      {...props}
+    >
+      {content}
+    </footer>
+  );
+}
+
+function sortByOrderPriority<T extends { order?: number }>(values: readonly T[]): T[] {
+  return [...values]
+    .map((value, sourceIndex) => ({ value, sourceIndex }))
+    .sort((left, right) => {
+      const leftOrder = left.value.order;
+      const rightOrder = right.value.order;
+
+      if (leftOrder !== rightOrder) {
+        if (leftOrder === undefined) return 1;
+        if (rightOrder === undefined) return -1;
+        return leftOrder - rightOrder;
+      }
+      return left.sourceIndex - right.sourceIndex;
+    })
+    .map(({ value }) => value);
+}
+
+export interface StatusBarSectionProps extends ComponentPropsWithRef<'div'> {
+  align?: StatusBarSectionAlign | undefined;
+}
+
+export function StatusBarSection({ align = 'start', className, ...props }: StatusBarSectionProps) {
+  return (
+    <div
+      className={cx(
+        'ui-workbench-status-bar__section',
+        align === 'end' && 'ui-workbench-status-bar__section--end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export interface StatusBarItemProps extends ComponentPropsWithRef<'button'> {
+  active?: boolean | undefined;
+  icon?: ReactNode | string | undefined;
+  status?: WorkbenchStatus | undefined;
+}
+
+function resolveStatusBarIcon(icon: ReactNode | string | undefined) {
+  if (typeof icon !== 'string') return icon;
+
+  return <i className={cxCodicon(icon)} aria-hidden="true" />;
+}
+
+export function StatusBarItem({
+  active,
+  children,
+  className,
+  disabled,
+  icon,
+  status,
+  title,
+  type = 'button',
+  ...props
+}: StatusBarItemProps) {
+  const statusLabel = status ? getWorkbenchStatusLabel(status) : undefined;
+  const resolvedDisabled = disabled || Boolean(status && isWorkbenchStatusDisabled(status));
+  const resolvedIcon = resolveStatusBarIcon(icon);
+
+  return (
+    <button
+      type={type}
+      className={cx(
+        'ui-workbench-status-bar__item',
+        active && 'ui-workbench-status-bar__item--active',
+        className,
+      )}
+      data-active={active ? 'true' : undefined}
+      data-status={status}
+      aria-busy={status && isWorkbenchStatusBusy(status) ? true : undefined}
+      disabled={resolvedDisabled}
+      title={title ?? statusLabel}
+      {...props}
+    >
+      {resolvedIcon ? <span className="ui-workbench-status-bar__icon">{resolvedIcon}</span> : null}
+      <span className="ui-workbench-status-bar__label">{children}</span>
+      {status ? (
+        <span
+          aria-label={statusLabel}
+          className="ui-workbench-status-bar__status"
+          title={statusLabel}
+        >
+          <span aria-hidden="true" className="ui-workbench-status-bar__status-dot" />
+        </span>
+      ) : null}
+    </button>
+  );
+}

package/src/workbench/StructuredArtifactEditor.tsx

@@ -0,0 +1,205 @@
+import { useState, useMemo, type ReactNode } from 'react';
+import { useWorkspaceDrafts } from './workspace/WorkspaceDraftsContext';
+import { WorkspaceEditor, type WorkspaceEditorTheme } from './workspace/WorkspaceEditor';
+import { WorkbenchStructuredDataSchemaPanelEmbed } from './settings/StructuredDataSchemaPanelEmbed';
+import { type WorkbenchStructuredDataSchemaDocument } from './settings/StructuredDataForm';
+import { type WorkbenchArtifactMode, WorkbenchArtifactModeControls } from './ArtifactShell';
+import { Button } from '../primitives/Button';
+import { Panel, PanelBody, PanelHeader } from '../layout/Panel';
+import { Toolbar } from '../primitives/Toolbar';
+import { SplitView } from './SplitView';
+import { type WorkspaceFile } from './workspace/types';
+import { fileNameOfPath } from './workspace/path';
+
+export interface StructuredArtifactEditorProps {
+  activePattern?: string;
+  defaultMode?: WorkbenchArtifactMode;
+  emptyLabel?: ReactNode;
+  file: WorkspaceFile | null;
+  headerActions?: ReactNode;
+  mode?: WorkbenchArtifactMode;
+  onModeChange?: (mode: WorkbenchArtifactMode) => void;
+  onSaveFile?: (path: string, content: string) => void | Promise<void>;
+  preferredTableColumns?: readonly string[];
+  readOnly?: boolean;
+  schema?: WorkbenchStructuredDataSchemaDocument | null;
+  sectionValueAliases?: Record<string, readonly (string | number)[][]>;
+  theme?: WorkspaceEditorTheme;
+  titleFallback?: string;
+  serialize?: (data: unknown) => string;
+  deserialize?: (content: string) => unknown;
+}
+
+const defaultSerialize = (data: unknown) => JSON.stringify(data, null, 2);
+const defaultDeserialize = (content: string) => {
+  if (!content.trim()) return null;
+  return JSON.parse(content);
+};
+
+export function StructuredArtifactEditor({
+  activePattern,
+  defaultMode = 'preview',
+  emptyLabel = 'No artifact selected',
+  file,
+  headerActions,
+  mode,
+  onModeChange,
+  onSaveFile,
+  preferredTableColumns,
+  readOnly = false,
+  schema,
+  sectionValueAliases,
+  theme = 'dark',
+  titleFallback,
+  serialize = defaultSerialize,
+  deserialize = defaultDeserialize,
+}: StructuredArtifactEditorProps) {
+  const [uncontrolledMode, setUncontrolledMode] = useState<WorkbenchArtifactMode>(defaultMode);
+  const resolvedMode = mode ?? uncontrolledMode;
+
+  const { getDraft, isDirty, updateDraft, saveDraft, discardDraft } = useWorkspaceDrafts();
+
+  const setMode = (nextMode: WorkbenchArtifactMode) => {
+    if (mode === undefined) {
+      setUncontrolledMode(nextMode);
+    }
+    onModeChange?.(nextMode);
+  };
+
+  const currentContent = file ? getDraft(file.path, file.content) : '';
+  const dirty = file ? isDirty(file.path, file.content) : false;
+
+  const structuredData = useMemo(() => {
+    if (!currentContent) return null;
+    try {
+      return deserialize(currentContent);
+    } catch {
+      return null;
+    }
+  }, [currentContent, deserialize]);
+
+  if (!file) {
+    return (
+      <Panel className="ui-structured-artifact-editor ui-structured-artifact-editor--empty">
+        <PanelBody>
+          <div className="ui-workbench-artifact-shell__empty">{emptyLabel}</div>
+        </PanelBody>
+      </Panel>
+    );
+  }
+
+  const handleTextChange = (text: string) => {
+    updateDraft(file.path, text, file.content);
+  };
+
+  const handleDataChange = (nextData: unknown) => {
+    try {
+      const nextText = serialize(nextData);
+      updateDraft(file.path, nextText, file.content);
+    } catch {
+      // ignore serialization failures during active input
+    }
+  };
+
+  const handleSave = () => {
+    if (!dirty) return;
+    Promise.resolve(onSaveFile?.(file.path, currentContent))
+      .then(() => {
+        saveDraft(file.path, currentContent);
+      })
+      .catch(() => {
+        // keep draft intact on failure
+      });
+  };
+
+  const handleDiscard = () => {
+    discardDraft(file.path, file.content);
+  };
+
+  const codePane = (
+    <WorkspaceEditor
+      file={file}
+      readOnly={readOnly}
+      showHeader={false}
+      theme={theme}
+      value={currentContent}
+      onChange={handleTextChange}
+    />
+  );
+
+  const previewPane = (
+    <WorkbenchStructuredDataSchemaPanelEmbed
+      activePattern={activePattern}
+      ariaLabel="Schema sections"
+      data={structuredData}
+      preferredTableColumns={preferredTableColumns}
+      readOnly={readOnly}
+      schema={schema}
+      sectionValueAliases={sectionValueAliases}
+      titleFallback={titleFallback ?? fileNameOfPath(file.path)}
+      onDataChange={handleDataChange}
+    />
+  );
+
+  return (
+    <Panel className="ui-structured-artifact-editor" data-theme={theme} data-mode={resolvedMode}>
+      <PanelHeader
+        actions={
+          <Toolbar>
+            {dirty && !readOnly ? (
+              <>
+                <Button onClick={handleDiscard}>Discard</Button>
+                <Button variant="primary" onClick={handleSave}>
+                  Save
+                </Button>
+              </>
+            ) : null}
+            {headerActions}
+            <WorkbenchArtifactModeControls mode={resolvedMode} onModeChange={setMode} />
+          </Toolbar>
+        }
+      >
+        <span className="ui-structured-artifact-editor__title">
+          {titleFallback ?? fileNameOfPath(file.path)}
+          {dirty ? (
+            <span
+              className="ui-structured-artifact-editor__dirty-indicator"
+              title="Unsaved changes"
+            >
+              ●
+            </span>
+          ) : null}
+        </span>
+      </PanelHeader>
+      <PanelBody className="ui-structured-artifact-editor__body">
+        {resolvedMode === 'code' ? (
+          <section className="ui-structured-artifact-editor__pane" aria-label="Code">
+            {codePane}
+          </section>
+        ) : null}
+        {resolvedMode === 'preview' ? (
+          <section className="ui-structured-artifact-editor__pane" aria-label="Preview">
+            {previewPane}
+          </section>
+        ) : null}
+        {resolvedMode === 'split' ? (
+          <SplitView
+            className="ui-structured-artifact-editor__split"
+            defaultPrimarySizePercent={50}
+            minPrimarySizePercent={20}
+            primary={
+              <section className="ui-structured-artifact-editor__pane" aria-label="Code">
+                {codePane}
+              </section>
+            }
+            secondary={
+              <section className="ui-structured-artifact-editor__pane" aria-label="Preview">
+                {previewPane}
+              </section>
+            }
+          />
+        ) : null}
+      </PanelBody>
+    </Panel>
+  );
+}