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

package/src/workbench/management/types.ts

@@ -0,0 +1,139 @@
+export type CommandManagementEntryStatus = 'available' | 'disabled' | 'no-handler';
+
+export interface CommandManagementEntry {
+  readonly category?: string | undefined;
+  readonly description?: string | undefined;
+  readonly id: string;
+  readonly keybinding?: string | undefined;
+  readonly label: string;
+  readonly menuSurfaces?: readonly string[] | undefined;
+  readonly source: string;
+  readonly sourceLabel: string;
+  readonly status: CommandManagementEntryStatus;
+}
+
+export interface CommandManagementGroup {
+  readonly entries: readonly CommandManagementEntry[];
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface CommandManagementRunState {
+  readonly commandId: string;
+  readonly message?: string | undefined;
+  readonly status: 'running' | 'success' | 'error';
+  readonly timestamp: number;
+}
+
+export type AccountManagementEntryStatus = 'active' | 'signed-out' | 'expired';
+
+export interface AccountManagementEntry {
+  readonly displayName: string;
+  readonly email?: string | undefined;
+  readonly id: string;
+  readonly providerId: string;
+  readonly providerLabel?: string | undefined;
+  readonly status?: AccountManagementEntryStatus | undefined;
+}
+
+export interface AccountManagementPanelProps {
+  accounts: readonly AccountManagementEntry[];
+  activeAccountId?: string | undefined;
+  automationHint?: string | undefined;
+  className?: string | undefined;
+  emptyLabel?: string | undefined;
+  onSignOut?: ((accountId: string) => void) | undefined;
+  sessionLabel?: string | undefined;
+}
+
+export interface CommandManagementPanelProps {
+  className?: string | undefined;
+  emptyLabel?: string | undefined;
+  groups: readonly CommandManagementGroup[];
+  lastRun?: CommandManagementRunState | undefined;
+  onRunCommand?: ((commandId: string) => void | Promise<void>) | undefined;
+  query?: string | undefined;
+  summaryLabel?: string | undefined;
+}
+
+export type ExtensionManagementEntrySource = 'bundled' | 'installed';
+
+export interface ExtensionManagementFeatureItem {
+  readonly description?: string | undefined;
+  readonly id: string;
+  readonly label: string;
+}
+
+export interface ExtensionManagementFeatureSummary {
+  readonly capabilities?: {
+    readonly provides: readonly string[];
+    readonly requires: readonly string[];
+  };
+  readonly commands?: readonly ExtensionManagementFeatureItem[] | undefined;
+  readonly documentViews?: readonly ExtensionManagementFeatureItem[] | undefined;
+  readonly menus?: readonly ExtensionManagementFeatureItem[] | undefined;
+  readonly permissions?: readonly string[] | undefined;
+  readonly settings?: readonly ExtensionManagementFeatureItem[] | undefined;
+  readonly views?: readonly ExtensionManagementFeatureItem[] | undefined;
+}
+
+export interface ExtensionManagementDiagnosticSummary {
+  readonly message: string;
+  readonly severity: 'error' | 'warning';
+}
+
+export interface ExtensionInstallPlanSummary {
+  readonly blocked: boolean;
+  readonly diagnostics?: readonly ExtensionManagementDiagnosticSummary[] | undefined;
+  readonly enableExtensionIds?: readonly string[] | undefined;
+  readonly installExtensionIds?: readonly string[] | undefined;
+  readonly permissions?: readonly string[] | undefined;
+  readonly requiresApproval: boolean;
+}
+
+export interface ExtensionManagementEntry {
+  readonly category: string;
+  readonly description?: string | undefined;
+  readonly diagnostics?: readonly ExtensionManagementDiagnosticSummary[] | undefined;
+  readonly displayName: string;
+  readonly enabled: boolean;
+  readonly features?: ExtensionManagementFeatureSummary | undefined;
+  readonly id: string;
+  readonly installedAt?: string | undefined;
+  readonly manifestUrl?: string | undefined;
+  readonly source: ExtensionManagementEntrySource;
+}
+
+export interface ExtensionCatalogBrowseEntry {
+  readonly category: string;
+  readonly description: string;
+  readonly displayName: string;
+  readonly icon?: string | undefined;
+  readonly id: string;
+  readonly installPlan?: ExtensionInstallPlanSummary | undefined;
+  readonly installed: boolean;
+  readonly manifestUrl: string;
+}
+
+export interface ExtensionInstallOptions {
+  /** Required when the install plan sets `requiresApproval`. */
+  readonly approved?: boolean | undefined;
+}
+
+export interface ExtensionManagementPanelProps {
+  browseEntries: readonly ExtensionCatalogBrowseEntry[];
+  catalogError?: string | undefined;
+  catalogLoading?: boolean | undefined;
+  className?: string | undefined;
+  installedEntries: readonly ExtensionManagementEntry[];
+  onInstall?:
+    ((entry: ExtensionCatalogBrowseEntry, options?: ExtensionInstallOptions) => void) | undefined;
+  onToggleEnabled?: ((entry: ExtensionManagementEntry, enabled: boolean) => void) | undefined;
+  /**
+   * Host-owned durable trust check. When true for an entry, the install confirm
+   * prompt is skipped and `{ approved: true }` is used.
+   */
+  isInstallTrusted?: ((entry: ExtensionCatalogBrowseEntry) => boolean) | undefined;
+  /** Persist trust after the user confirms a permissioned install. */
+  onRememberInstallTrust?: ((entry: ExtensionCatalogBrowseEntry) => void) | undefined;
+}

package/src/workbench/{MarkdownPreview.tsx → markdown/MarkdownPreview.tsx}

@@ -1,6 +1,11 @@
 import Markdown from 'react-markdown';
 import { Children, isValidElement, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { cx } from '../utils/cx';
+import { cx } from '../../utils/cx';
+import {
+  workbenchMarkdownRemarkPlugins,
+  workbenchMarkdownRehypePlugins,
+} from './markdownRemarkPlugins';
+import { sanitizeMarkdownHref } from './sanitizeMarkdownHref';
 
 export interface WorkbenchMarkdownPreviewProps extends ComponentPropsWithoutRef<'article'> {
   source: string;
@@ -14,22 +19,28 @@ export function WorkbenchMarkdownPreview({
   return (
     <article className={cx('ui-workbench-markdown-preview', className)} {...props}>
       <Markdown
+        remarkPlugins={workbenchMarkdownRemarkPlugins}
+        rehypePlugins={workbenchMarkdownRehypePlugins}
         components={{
-          a: ({ children, href, ...anchorProps }) => (
-            <a
-              href={href}
-              rel="noreferrer"
-              target={href?.startsWith('#') ? undefined : '_blank'}
-              {...anchorProps}
-            >
+          a: ({ children, href }) => {
+            const safeHref = sanitizeMarkdownHref(href);
+            if (!safeHref) {
+              return <span>{children}</span>;
+            }
+            return (
+              <a
+                href={safeHref}
+                rel="noreferrer"
+                target={safeHref.startsWith('#') ? undefined : '_blank'}
+              >
+                {children}
+              </a>
+            );
+          },
+          code: ({ children, className: codeClassName }) => (
+            <code className={cx('ui-workbench-markdown-preview__code', codeClassName)}>
               {children}
-            </a>
-          ),
-          code: ({ className: codeClassName, ...codeProps }) => (
-            <code
-              className={cx('ui-workbench-markdown-preview__code', codeClassName)}
-              {...codeProps}
-            />
+            </code>
           ),
           pre: ({ children }) => {
             const codeBlock = getMarkdownCodeBlock(children);

package/src/workbench/markdown/markdownRemarkPlugins.ts

@@ -0,0 +1,12 @@
+import remarkGfm from 'remark-gfm';
+import rehypeSanitize from 'rehype-sanitize';
+
+/** Shared remark plugins for workbench markdown surfaces (preview, chat, etc.). */
+export const workbenchMarkdownRemarkPlugins = [remarkGfm];
+
+/**
+ * Default rehype pipeline for untrusted markdown (chat / preview).
+ * Strips script/event handlers and dangerous URLs via rehype-sanitize.
+ * Hosts that need raw HTML must render outside these kit surfaces.
+ */
+export const workbenchMarkdownRehypePlugins = [rehypeSanitize];

package/src/workbench/markdown/sanitizeMarkdownHref.ts

@@ -0,0 +1,29 @@
+/**
+ * Allowlist markdown link targets for safe preview rendering.
+ * Blocks javascript:/data:/vbscript: and other non-navigation schemes.
+ */
+export function sanitizeMarkdownHref(href: string | undefined): string | undefined {
+  if (href == null || href.trim() === '') {
+    return undefined;
+  }
+
+  const trimmed = href.trim();
+  if (trimmed.startsWith('#')) {
+    return trimmed;
+  }
+
+  try {
+    const base =
+      typeof globalThis.location?.href === 'string' && globalThis.location.href.length > 0
+        ? globalThis.location.href
+        : 'https://workbench.local/';
+    const url = new URL(trimmed, base);
+    const protocol = url.protocol.toLowerCase();
+    if (protocol === 'http:' || protocol === 'https:' || protocol === 'mailto:') {
+      return trimmed;
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}

package/src/workbench/schema/index.ts

@@ -45,4 +45,3 @@ export {
   initializeWorkbenchDocumentPatchHistory,
 } from './workbenchDocumentPatch';
 export { createPatchFromWorkbenchDocumentAction } from './workbenchDocumentActions';
-export type { WorkbenchDocument as JsonWorkbenchDocument } from './workbenchDocument';

package/src/workbench/settings/NavigationPanel.tsx

@@ -1,4 +1,9 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
+import {
+  ScrollArea,
+  type ScrollAreaGutter,
+  type ScrollAreaScrollbarVisibility,
+} from '../../primitives/scroll-area';
 import { cx } from '../../utils/cx';
 
 export interface WorkbenchNavigationPanelProps extends Omit<
@@ -8,9 +13,16 @@ export interface WorkbenchNavigationPanelProps extends Omit<
   content: ReactNode;
   contentClassName?: string | undefined;
   contentProps?: Omit<ComponentPropsWithRef<'div'>, 'children' | 'className'> | undefined;
+  contentScrollGutter?: ScrollAreaGutter | undefined;
+  contentScrollProps?: Omit<ComponentPropsWithRef<'div'>, 'children'> | undefined;
+  contentScrollbars?: ScrollAreaScrollbarVisibility | undefined;
   nav?: ReactNode | undefined;
   navClassName?: string | undefined;
+  navOrientation?: 'vertical' | 'horizontal' | undefined;
   navProps?: Omit<ComponentPropsWithRef<'nav'>, 'children' | 'className'> | undefined;
+  navScrollGutter?: ScrollAreaGutter | undefined;
+  navScrollProps?: Omit<ComponentPropsWithRef<'div'>, 'children'> | undefined;
+  navScrollbars?: ScrollAreaScrollbarVisibility | undefined;
 }
 
 export function WorkbenchNavigationPanel({
@@ -18,29 +30,56 @@ export function WorkbenchNavigationPanel({
   content,
   contentClassName,
   contentProps,
+  contentScrollGutter = 'stable',
+  contentScrollProps,
+  contentScrollbars = 'auto',
   nav,
   navClassName,
+  navOrientation = 'vertical',
   navProps,
+  navScrollGutter = 'stable',
+  navScrollProps,
+  navScrollbars = 'auto',
   ...props
 }: WorkbenchNavigationPanelProps) {
   const hasNav = nav !== undefined && nav !== null && nav !== false;
+  const { className: contentScrollClassName, ...resolvedContentScrollProps } =
+    contentScrollProps ?? {};
+  const { className: navScrollClassName, ...resolvedNavScrollProps } = navScrollProps ?? {};
 
   return (
     <div
       className={cx('ui-workbench-navigation-panel', className)}
       data-has-nav={hasNav ? 'true' : undefined}
+      data-nav-orientation={hasNav ? navOrientation : undefined}
       {...props}
     >
       {hasNav ? (
         <nav className={cx('ui-workbench-navigation-panel__nav', navClassName)} {...navProps}>
-          {nav}
+          <ScrollArea
+            className={cx('ui-workbench-navigation-panel__nav-scroll', navScrollClassName)}
+            gutter={navScrollGutter}
+            orientation={navOrientation}
+            scrollbars={navScrollbars}
+            {...resolvedNavScrollProps}
+          >
+            {nav}
+          </ScrollArea>
         </nav>
       ) : null}
       <div
         className={cx('ui-workbench-navigation-panel__content', contentClassName)}
         {...contentProps}
       >
-        {content}
+        <ScrollArea
+          className={cx('ui-workbench-navigation-panel__content-scroll', contentScrollClassName)}
+          gutter={contentScrollGutter}
+          orientation="vertical"
+          scrollbars={contentScrollbars}
+          {...resolvedContentScrollProps}
+        >
+          {content}
+        </ScrollArea>
       </div>
     </div>
   );

package/src/workbench/settings/SchemaForm.tsx

@@ -6,13 +6,14 @@ import {
   type FormEvent,
   type ReactNode,
 } from 'react';
-import { Button } from '../../primitives/Button';
-import { Checkbox } from '../../primitives/Checkbox';
-import { EmptyState } from '../../primitives/EmptyState';
-import { Field } from '../../primitives/Field';
-import { Select } from '../../primitives/Select';
-import { TextInput } from '../../primitives/TextInput';
+import { Button } from '../../primitives/button';
+import { Checkbox } from '../../primitives/checkbox';
+import { EmptyState } from '../../primitives/empty-state';
+import { Field } from '../../primitives/field';
+import { Select } from '../../primitives/select';
+import { TextInput } from '../../primitives/text-input';
 import { cx } from '../../utils/cx';
+import { useWorkbenchSettingsCommit } from './settingsCommit';
 
 export type WorkbenchSchemaFormFieldType = 'checkbox' | 'number' | 'select' | 'text';
 
@@ -231,6 +232,9 @@ export function WorkbenchSchemaForm({
   values,
   ...props
 }: WorkbenchSchemaFormProps) {
+  const settingsCommit = useWorkbenchSettingsCommit();
+  const isImmediateSettingsCommit = settingsCommit?.commitMode === 'immediate';
+  const resolvedShowActions = isImmediateSettingsCommit ? false : showActions;
   const generatedId = useId().replace(/:/g, '');
   const [uncontrolledValues, setUncontrolledValues] = useState(() =>
     normalizeWorkbenchSchemaFormValues(fields, defaultValues),
@@ -273,6 +277,15 @@ export function WorkbenchSchemaForm({
 
     onFieldChange?.(context);
     onValuesChange?.(nextValues, context);
+
+    if (isImmediateSettingsCommit) {
+      settingsCommit?.onPreferenceChange?.({
+        categoryId: settingsCommit.categoryId,
+        key: field.id,
+        scopeId: settingsCommit.scopeId || undefined,
+        value: nextValues[field.id],
+      });
+    }
   };
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -330,7 +343,7 @@ export function WorkbenchSchemaForm({
           })}
         </div>
       )}
-      {showActions ? (
+      {resolvedShowActions ? (
         <div className="ui-workbench-schema-form__actions">
           <Button disabled={disabled} onClick={() => onCancel?.({ values: resolvedValues })}>
             {cancelLabel}

package/src/workbench/settings/SectionTabPanel.tsx

@@ -0,0 +1,172 @@
+import { Fragment, useEffect, useRef, useState, type ComponentPropsWithRef } from 'react';
+import { ScrollArea } from '../../primitives/scroll-area';
+import { cx } from '../../utils/cx';
+import type { WorkbenchSectionedPanelItem } from './SectionedPanel';
+import { useSectionScrollSpy } from './useSectionScrollSpy';
+
+const SCROLL_EDGE_THRESHOLD = 2;
+const SECTION_TAB_PANEL_SCROLL_SPY_OFFSET = 80;
+
+export type WorkbenchSectionTabPanelItem = WorkbenchSectionedPanelItem;
+
+export interface WorkbenchSectionTabPanelProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children'
+> {
+  activeAnchorId?: string | undefined;
+  ariaLabel: string;
+  contentClassName?: string | undefined;
+  defaultActiveAnchorId?: string | undefined;
+  equalWidthTabs?: boolean | undefined;
+  items: readonly WorkbenchSectionTabPanelItem[];
+  navLinkClassName?: string | undefined;
+  onActiveAnchorChange?: ((anchorId: string | undefined) => void) | undefined;
+  readOnly?: boolean | undefined;
+  scrollSpy?: boolean | 'auto' | undefined;
+  scrollSpyOffset?: number | undefined;
+  scrollSpyScrollBehavior?: ScrollBehavior | undefined;
+}
+
+function useSectionTabPanelNavScrollEdges(enabled: boolean) {
+  const hostRef = useRef<HTMLDivElement | null>(null);
+  const [atStart, setAtStart] = useState(true);
+  const [atEnd, setAtEnd] = useState(true);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const host = hostRef.current;
+    if (!host) {
+      return;
+    }
+
+    const scrollEl = host.querySelector(
+      '.ui-workbench-section-tab-panel__tabs-scroll',
+    ) as HTMLElement | null;
+
+    if (!scrollEl) {
+      return;
+    }
+
+    const update = () => {
+      const { clientWidth, scrollLeft, scrollWidth } = scrollEl;
+      const overflow = scrollWidth > clientWidth + SCROLL_EDGE_THRESHOLD;
+
+      setAtStart(!overflow || scrollLeft <= SCROLL_EDGE_THRESHOLD);
+      setAtEnd(!overflow || scrollLeft + clientWidth >= scrollWidth - SCROLL_EDGE_THRESHOLD);
+    };
+
+    update();
+
+    scrollEl.addEventListener('scroll', update, { passive: true });
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(scrollEl);
+
+    const tabs = scrollEl.querySelector('.ui-workbench-section-tab-panel__tabs');
+    if (tabs instanceof HTMLElement) {
+      resizeObserver.observe(tabs);
+    }
+
+    return () => {
+      scrollEl.removeEventListener('scroll', update);
+      resizeObserver.disconnect();
+    };
+  }, [enabled]);
+
+  return { hostRef, atStart, atEnd };
+}
+
+export function WorkbenchSectionTabPanel({
+  activeAnchorId,
+  ariaLabel,
+  className,
+  contentClassName,
+  defaultActiveAnchorId,
+  equalWidthTabs = true,
+  items,
+  navLinkClassName,
+  onActiveAnchorChange,
+  readOnly = false,
+  scrollSpy = true,
+  scrollSpyOffset = SECTION_TAB_PANEL_SCROLL_SPY_OFFSET,
+  scrollSpyScrollBehavior = 'smooth',
+  ...props
+}: WorkbenchSectionTabPanelProps) {
+  const showSectionNav = items.length > 1;
+  const anchorOrder = items.map((item) => item.anchorId);
+  const navScrollEdges = useSectionTabPanelNavScrollEdges(showSectionNav);
+
+  const {
+    handleContentScroll,
+    resolvedActiveAnchorId,
+    scrollRef,
+    scrollSpyEnabled,
+    scrollToAnchor,
+  } = useSectionScrollSpy({
+    activeAnchorId,
+    anchorOrder,
+    axis: 'vertical',
+    defaultActiveAnchorId,
+    offset: scrollSpyOffset,
+    onActiveAnchorChange,
+    scrollBehavior: scrollSpyScrollBehavior,
+    scrollSpy,
+  });
+
+  const sectionNavLinks = items.map((item) => {
+    const active = resolvedActiveAnchorId === item.anchorId;
+
+    return (
+      <a
+        key={item.anchorId}
+        aria-current={active ? 'location' : undefined}
+        className={cx('ui-workbench-section-tab-panel__tab', navLinkClassName)}
+        data-active={active ? 'true' : undefined}
+        href={`#${item.anchorId}`}
+        onClick={(event) => {
+          event.preventDefault();
+          scrollToAnchor(item.anchorId);
+        }}
+      >
+        <span>{item.title}</span>
+        {item.count !== undefined ? <em>{item.count}</em> : null}
+      </a>
+    );
+  });
+
+  return (
+    <div
+      ref={navScrollEdges.hostRef}
+      className={cx('ui-workbench-section-tab-panel', className)}
+      data-equal-width-tabs={equalWidthTabs ? 'true' : undefined}
+      data-readonly={readOnly ? 'true' : undefined}
+      data-scroll-spy={scrollSpyEnabled ? 'true' : 'false'}
+      data-tab-scroll-at-end={showSectionNav && !navScrollEdges.atEnd ? 'false' : undefined}
+      data-tab-scroll-at-start={showSectionNav && !navScrollEdges.atStart ? 'false' : undefined}
+      {...props}
+    >
+      {showSectionNav ? (
+        <nav aria-label={ariaLabel} className="ui-workbench-section-tab-panel__bar">
+          <div className="ui-workbench-section-tab-panel__tabs-scroll">
+            <div className="ui-workbench-section-tab-panel__tabs">{sectionNavLinks}</div>
+          </div>
+        </nav>
+      ) : null}
+      <ScrollArea
+        ref={scrollRef}
+        className={cx('ui-workbench-section-tab-panel__scroll', contentClassName)}
+        gutter="auto"
+        orientation="vertical"
+        scrollbars="overlay"
+        onScroll={handleContentScroll}
+      >
+        {items.map((item) => (
+          <Fragment key={item.anchorId}>{item.render()}</Fragment>
+        ))}
+      </ScrollArea>
+    </div>
+  );
+}