@sixthshift/design-system 0.1.0

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,173 @@
+import { Checkbox } from "@sixthshift/design-system/checkbox";
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+import type { WritableRefObject } from "../../internal/types";
+
+export type CheckboxGroupOption = {
+  /** Unique value for the option */
+  value: string;
+  /** Display label */
+  label: string;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+};
+
+export type CheckboxGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur"> & {
+  /** Controlled selected values */
+  value?: string[];
+  /** Default selected values for uncontrolled mode */
+  defaultValue?: string[];
+  /** Available options */
+  options: readonly CheckboxGroupOption[];
+  /** Called when selection changes */
+  onValueChange?: (value: string[]) => void;
+  /** Layout orientation */
+  orientation?: "vertical" | "horizontal";
+  /** Visual variant */
+  variant?: "default" | "button";
+  /** Button appearance (only applies when variant="button") */
+  appearance?: "segmented" | "separate";
+  /** Input name for form submission */
+  name?: string;
+  /** Disable all options */
+  disabled?: boolean;
+  /** Called when focus leaves the group entirely */
+  onBlur?: () => void;
+};
+
+const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue = [],
+      options,
+      onValueChange,
+      orientation = "vertical",
+      variant = "default",
+      appearance = "segmented",
+      name,
+      disabled,
+      onBlur,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue,
+      onChange: onValueChange,
+    });
+
+    const groupRef = React.useRef<HTMLDivElement | null>(null);
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        groupRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) (ref as WritableRefObject<HTMLDivElement | null>).current = node;
+      },
+      [ref]
+    );
+
+    const handleFocusOut = React.useCallback(
+      (e: React.FocusEvent) => {
+        if (!groupRef.current?.contains(e.relatedTarget as Node)) {
+          onBlur?.();
+        }
+      },
+      [onBlur]
+    );
+
+    const handleOptionChange = (optionValue: string, checked: boolean) => {
+      if (checked) {
+        setValue([...value, optionValue]);
+      } else {
+        setValue(value.filter((v) => v !== optionValue));
+      }
+    };
+
+    if (variant === "button") {
+      const isVertical = orientation === "vertical";
+      const isSegmented = appearance === "segmented";
+
+      return (
+        // biome-ignore lint/a11y/useSemanticElements: role="group" is correct for grouping button-style checkboxes
+        <div
+          ref={mergedRef}
+          role="group"
+          onBlurCapture={handleFocusOut}
+          className={cn("inline-flex", isVertical ? "flex-col" : "flex-row", !isSegmented && (isVertical ? "gap-2" : "gap-2"), className)}
+          {...props}
+        >
+          {options.map((option, index) => {
+            const isChecked = value.includes(option.value);
+            const isDisabled = disabled || option.disabled;
+            const isFirst = index === 0;
+            const isLast = index === options.length - 1;
+
+            return (
+              // biome-ignore lint/a11y/useSemanticElements: Custom checkbox group with button role="checkbox" is WAI-ARIA best practice
+              <button
+                key={option.value}
+                type="button"
+                role="checkbox"
+                aria-checked={isChecked}
+                disabled={isDisabled}
+                onClick={() => handleOptionChange(option.value, !isChecked)}
+                className={cn(
+                  "inline-flex items-center justify-center px-4 py-2 font-medium text-sm transition-colors",
+                  "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  isSegmented
+                    ? cn(
+                        "border",
+                        isVertical
+                          ? cn(isFirst && "rounded-t-md", isLast && "rounded-b-md", !isFirst && "-mt-px")
+                          : cn(isFirst && "rounded-l-md", isLast && "rounded-r-md", !isFirst && "-ml-px")
+                      )
+                    : "rounded-md border",
+                  isChecked ? "border-border-brand bg-bg-brand text-fg-on-brand" : "border-border-normal bg-bg-normal text-fg-normal hover:bg-bg-subtle"
+                )}
+              >
+                {option.label}
+              </button>
+            );
+          })}
+          {name && value.map((v) => <input key={v} type="hidden" name={name} value={v} />)}
+        </div>
+      );
+    }
+
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: role="group" is correct for checkbox group container
+      <div
+        ref={mergedRef}
+        role="group"
+        onBlurCapture={handleFocusOut}
+        className={cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-4", className)}
+        {...props}
+      >
+        {options.map((option) => {
+          const isChecked = value.includes(option.value);
+          const isDisabled = disabled || option.disabled;
+
+          return (
+            <Checkbox
+              key={option.value}
+              {...(name ? { name } : {})}
+              value={option.value}
+              checked={isChecked}
+              onCheckedChange={(checked) => handleOptionChange(option.value, checked as boolean)}
+              disabled={isDisabled}
+              label={option.label}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+
+export { CheckboxGroup };

package/src/components/CheckboxGroup/index.ts

@@ -0,0 +1,5 @@
+export {
+  CheckboxGroup,
+  type CheckboxGroupOption,
+  type CheckboxGroupProps,
+} from "./CheckboxGroup";

package/src/components/Code/Editor/Editor.tsx

@@ -0,0 +1,161 @@
+import MonacoEditor from "@monaco-editor/react";
+import type { editor } from "monaco-editor";
+import type { HTMLAttributes } from "react";
+import { useCallback, useRef } from "react";
+import { useTheme } from "../../../hooks/useTheme";
+import type { ValidationError } from "../ValidationStatus";
+import { createSemanticTokensProvider, workerExtensionUrl } from "./semanticTokenProvider";
+import { defineThemes, PA_THEME_DARK, PA_THEME_LIGHT } from "./themes";
+
+let semanticTokensRegistered = false;
+function registerSemanticTokenProviders(monaco: typeof import("monaco-editor")) {
+  if (semanticTokensRegistered) return;
+  semanticTokensRegistered = true;
+
+  // Extend the TS worker to expose getEncodedSemanticClassifications
+  // @ts-expect-error - monaco.languages.typescript is marked deprecated but still functional
+  monaco.languages.typescript.typescriptDefaults.setWorkerOptions({
+    customWorkerPath: workerExtensionUrl,
+  });
+
+  // @ts-expect-error - getTypeScriptWorker is marked deprecated but still functional
+  const getWorker = () => monaco.languages.typescript.getTypeScriptWorker();
+  monaco.languages.registerDocumentSemanticTokensProvider("typescript", createSemanticTokensProvider(getWorker));
+  monaco.languages.registerDocumentSemanticTokensProvider("javascript", createSemanticTokensProvider(getWorker));
+}
+
+export type EditorProps = Omit<HTMLAttributes<HTMLDivElement>, "onChange"> & {
+  value: string;
+  onChange: (value: string) => void;
+  onValidate?: ((errors: ValidationError[]) => void) | undefined;
+  readOnly?: boolean;
+  /**
+   * Custom type definitions to add to Monaco for IntelliSense
+   * Example: "declare const myApi: { method(): void };"
+   */
+  typeDefinitions?: string | undefined;
+  /**
+   * Custom TypeScript compiler options to merge with defaults
+   */
+  compilerOptions?: Record<string, unknown> | undefined;
+};
+
+/**
+ * Generic Monaco-based code editor with TypeScript support
+ *
+ * Features:
+ * - Syntax highlighting and IntelliSense
+ * - Custom type definitions via props
+ * - Validation with error reporting
+ * - Configurable compiler options
+ */
+export const Editor = ({ value, onChange, onValidate, readOnly = false, className, typeDefinitions, compilerOptions = {}, ...props }: EditorProps) => {
+  const { resolvedTheme } = useTheme();
+  const monacoTheme = resolvedTheme === "dark" ? PA_THEME_DARK : PA_THEME_LIGHT;
+  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+
+  const handleEditorDidMount = useCallback(
+    (editor: editor.IStandaloneCodeEditor, monaco: typeof import("monaco-editor")) => {
+      editorRef.current = editor;
+
+      // Configure TypeScript compiler options
+      // @ts-expect-error - monaco.languages.typescript is marked deprecated but still functional
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        // @ts-expect-error - ScriptTarget is deprecated but still functional
+        target: monaco.languages.typescript.ScriptTarget.ES2020,
+        // @ts-expect-error - ModuleResolutionKind is deprecated but still functional
+        moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+        // @ts-expect-error - ModuleKind is deprecated but still functional
+        module: monaco.languages.typescript.ModuleKind.CommonJS,
+        // @ts-expect-error - JsxEmit is deprecated but still functional
+        jsx: monaco.languages.typescript.JsxEmit.React,
+        allowNonTsExtensions: true,
+        noEmit: true,
+        esModuleInterop: true,
+        allowJs: true,
+        typeRoots: ["node_modules/@types"],
+        // Merge custom compiler options
+        ...compilerOptions,
+      });
+
+      // Add custom type definitions if provided
+      if (typeDefinitions) {
+        // @ts-expect-error - typescriptDefaults is deprecated but still functional
+        monaco.languages.typescript.typescriptDefaults.addExtraLib(typeDefinitions, "ts:custom.d.ts");
+      }
+
+      // Set up validation
+      const model = editor.getModel();
+      if (model && onValidate) {
+        monaco.editor.onDidChangeMarkers(() => {
+          const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+          const errors: ValidationError[] = markers.map((marker: editor.IMarker) => ({
+            line: marker.startLineNumber,
+            column: marker.startColumn,
+            message: marker.message,
+            severity:
+              marker.severity === monaco.MarkerSeverity.Error
+                ? ("error" as const)
+                : marker.severity === monaco.MarkerSeverity.Warning
+                  ? ("warning" as const)
+                  : ("info" as const),
+          }));
+          onValidate(errors);
+        });
+      }
+
+      // Focus editor
+      editor.focus();
+    },
+    [onValidate, typeDefinitions, compilerOptions]
+  );
+
+  const handleBeforeMount = useCallback((monaco: typeof import("monaco-editor")) => {
+    defineThemes(monaco);
+    registerSemanticTokenProviders(monaco);
+  }, []);
+
+  const handleChange = useCallback(
+    (value: string | undefined) => {
+      onChange(value || "");
+    },
+    [onChange]
+  );
+
+  return (
+    <div {...props} className={className}>
+      <MonacoEditor
+        height="100%"
+        defaultLanguage="typescript"
+        value={value}
+        onChange={handleChange}
+        beforeMount={handleBeforeMount}
+        onMount={handleEditorDidMount}
+        theme={monacoTheme}
+        options={{
+          readOnly,
+          minimap: { enabled: false },
+          fontSize: 14,
+          lineNumbers: "on",
+          // Monaco defaults this to "dimmed" on Linux only, which greys the
+          // final line's number to ~1.4:1 against the editor background — an
+          // axe color-contrast failure, and a platform-dependent one at that.
+          // Pinning it "off" fixes the contrast and makes the editor render
+          // identically everywhere.
+          renderFinalNewline: "off",
+          scrollBeyondLastLine: false,
+          wordWrap: "on",
+          automaticLayout: true,
+          tabSize: 2,
+          formatOnPaste: true,
+          formatOnType: true,
+          quickSuggestions: true,
+          suggestOnTriggerCharacters: true,
+          acceptSuggestionOnEnter: "on",
+          snippetSuggestions: "top",
+          "semanticHighlighting.enabled": true,
+        }}
+      />
+    </div>
+  );
+};

package/src/components/Code/Editor/index.ts

@@ -0,0 +1,2 @@
+export type { ValidationError } from "../ValidationStatus";
+export { Editor, type EditorProps } from "./Editor";

package/src/components/Code/Editor/semanticTokenProvider.ts

@@ -0,0 +1,69 @@
+/**
+ * Semantic token provider backed by TypeScript's real language service.
+ *
+ * Monaco's standalone editor doesn't wire up semantic tokens — that's a VS Code
+ * layer. We extend the TS worker to expose getEncodedSemanticClassifications,
+ * then map the result to Monaco's delta-encoded format.
+ */
+import type { editor, languages, Uri } from "monaco-editor";
+
+/** Matches TypeScript's v2020 semantic classifier exactly. */
+const legend: languages.SemanticTokensLegend = {
+  tokenTypes: ["class", "enum", "interface", "namespace", "typeParameter", "type", "parameter", "variable", "enumMember", "property", "function", "method"],
+  tokenModifiers: ["declaration", "static", "async", "readonly", "defaultLibrary", "local"],
+};
+
+type GetWorker = () => Promise<
+  (...uris: Uri[]) => Promise<{
+    getEncodedSemanticClassifications(fileName: string, start: number, length: number): Promise<{ spans: number[] }>;
+  }>
+>;
+
+export function createSemanticTokensProvider(getWorker: GetWorker): languages.DocumentSemanticTokensProvider {
+  return {
+    getLegend: () => legend,
+
+    async provideDocumentSemanticTokens(model: editor.ITextModel) {
+      const worker = await getWorker();
+      const client = await worker(model.uri);
+      const { spans } = await client.getEncodedSemanticClassifications(model.uri.toString(), 0, model.getValue().length);
+
+      const data: number[] = [];
+      let prevLine = 0;
+      let prevChar = 0;
+
+      for (let i = 0; i + 2 < spans.length; i += 3) {
+        const classification = spans[i + 2]!;
+        if (classification <= 255) continue; // legacy format — skip
+
+        const pos = model.getPositionAt(spans[i]!);
+        const line = pos.lineNumber - 1;
+        const char = pos.column - 1;
+        const deltaLine = line - prevLine;
+
+        data.push(deltaLine, deltaLine === 0 ? char - prevChar : char, spans[i + 1]!, (classification >> 8) - 1, classification & 255);
+        prevLine = line;
+        prevChar = char;
+      }
+
+      return { data: new Uint32Array(data) };
+    },
+
+    releaseDocumentSemanticTokens() {},
+  };
+}
+
+/** Extends the TS worker to expose getEncodedSemanticClassifications. */
+const WORKER_EXTENSION = `
+self.customTSWorkerFactory = (TypeScriptWorker) => {
+  return class extends TypeScriptWorker {
+    async getEncodedSemanticClassifications(fileName, start, length) {
+      return this._languageService.getEncodedSemanticClassifications(
+        fileName, { start, length }, "2020"
+      );
+    }
+  };
+};
+`;
+
+export const workerExtensionUrl = `data:text/javascript;charset=utf-8,${encodeURIComponent(WORKER_EXTENSION)}`;

package/src/components/Code/Editor/themes.ts

@@ -0,0 +1,112 @@
+import type { editor } from "monaco-editor";
+
+export const PA_THEME_LIGHT = "pa-light";
+export const PA_THEME_DARK = "pa-dark";
+
+const lightTheme: editor.IStandaloneThemeData = {
+  base: "vs",
+  inherit: true,
+  rules: [
+    // Monarch tokenizer rules
+    { token: "comment", foreground: "a0a1a7", fontStyle: "italic" },
+    { token: "keyword", foreground: "a626a4" },
+    { token: "string", foreground: "50a14f" },
+    { token: "number", foreground: "986801" },
+    { token: "delimiter", foreground: "383a42" },
+    { token: "delimiter.bracket", foreground: "383a42" },
+    { token: "tag", foreground: "e45649" },
+    { token: "attribute.name", foreground: "986801" },
+    { token: "attribute.value", foreground: "50a14f" },
+    { token: "operator", foreground: "0184bc" },
+    { token: "identifier", foreground: "e45649" },
+
+    // Semantic token rules (TypeScript language service)
+    { token: "variable", foreground: "e45649" },
+    { token: "variable.readonly", foreground: "986801" },
+    { token: "parameter", foreground: "383a42" },
+    { token: "property", foreground: "e45649" },
+    { token: "property.readonly", foreground: "986801" },
+    { token: "function", foreground: "4078f2" },
+    { token: "method", foreground: "4078f2" },
+    { token: "type", foreground: "c18401" },
+    { token: "type.identifier", foreground: "c18401" },
+    { token: "class", foreground: "c18401" },
+    { token: "interface", foreground: "c18401" },
+    { token: "enum", foreground: "c18401" },
+    { token: "enumMember", foreground: "986801" },
+    { token: "namespace", foreground: "e45649" },
+  ],
+  colors: {
+    "editor.background": "#fafafa",
+    "editor.foreground": "#383a42",
+    "editor.lineHighlightBackground": "#f2f2f2",
+    // Gutter numbers are text as far as axe is concerned, so they carry the
+    // full 4.5:1 obligation rather than the 3:1 one non-text contrast gets.
+    // #9d9d9f managed 2.59 against this background and failed the story test.
+    "editorLineNumber.foreground": "#6f6f71",
+    "editorLineNumber.activeForeground": "#383a42",
+    "editor.selectionBackground": "#e5e5e6",
+    "editor.inactiveSelectionBackground": "#e5e5e680",
+    "editorCursor.foreground": "#526fff",
+    "editorIndentGuide.background": "#e8e8e8",
+    "editorIndentGuide.activeBackground": "#cacacc",
+    "editorBracketMatch.background": "#e5e5e6",
+    "editorBracketMatch.border": "#a0a1a7",
+  },
+};
+
+const darkTheme: editor.IStandaloneThemeData = {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    // Monarch tokenizer rules
+    { token: "comment", foreground: "5c6370", fontStyle: "italic" },
+    { token: "keyword", foreground: "c678dd" },
+    { token: "string", foreground: "98c379" },
+    { token: "number", foreground: "d19a66" },
+    { token: "delimiter", foreground: "abb2bf" },
+    { token: "delimiter.bracket", foreground: "abb2bf" },
+    { token: "tag", foreground: "e06c75" },
+    { token: "attribute.name", foreground: "d19a66" },
+    { token: "attribute.value", foreground: "98c379" },
+    { token: "operator", foreground: "56b6c2" },
+    { token: "identifier", foreground: "e06c75" },
+
+    // Semantic token rules (TypeScript language service)
+    { token: "variable", foreground: "e06c75" },
+    { token: "variable.readonly", foreground: "d19a66" },
+    { token: "parameter", foreground: "abb2bf" },
+    { token: "property", foreground: "e06c75" },
+    { token: "property.readonly", foreground: "d19a66" },
+    { token: "function", foreground: "61afef" },
+    { token: "method", foreground: "61afef" },
+    { token: "type", foreground: "e5c07b" },
+    { token: "type.identifier", foreground: "e5c07b" },
+    { token: "class", foreground: "e5c07b" },
+    { token: "interface", foreground: "e5c07b" },
+    { token: "enum", foreground: "e5c07b" },
+    { token: "enumMember", foreground: "d19a66" },
+    { token: "namespace", foreground: "e06c75" },
+  ],
+  colors: {
+    "editor.background": "#282c34",
+    "editor.foreground": "#abb2bf",
+    "editor.lineHighlightBackground": "#2c313a",
+    // 4.77:1, up from #495162's 1.76. Same obligation as the light theme;
+    // this one was never caught only because no story exercises it.
+    "editorLineNumber.foreground": "#8f97a8",
+    "editorLineNumber.activeForeground": "#abb2bf",
+    "editor.selectionBackground": "#3e4451",
+    "editor.inactiveSelectionBackground": "#3e445180",
+    "editorCursor.foreground": "#528bff",
+    "editorIndentGuide.background": "#3b4048",
+    "editorIndentGuide.activeBackground": "#4b5263",
+    "editorBracketMatch.background": "#3e4451",
+    "editorBracketMatch.border": "#5c6370",
+  },
+};
+
+export function defineThemes(monaco: typeof import("monaco-editor")) {
+  monaco.editor.defineTheme(PA_THEME_LIGHT, lightTheme);
+  monaco.editor.defineTheme(PA_THEME_DARK, darkTheme);
+}

package/src/components/Code/ValidationStatus/ValidationStatus.tsx

@@ -0,0 +1,81 @@
+import { Message } from "@sixthshift/design-system/message";
+import { cn } from "@sixthshift/design-system/utils";
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type ValidationError = {
+  line: number;
+  column: number;
+  message: string;
+  severity: "error" | "warning" | "info";
+};
+
+export type ValidationStatusProps = HTMLAttributes<HTMLDivElement> & {
+  errors: ValidationError[];
+  /** Cap the rendered error rows. Excess is summarised as "…and N more". */
+  maxRows?: number;
+};
+
+type Intent = NonNullable<ComponentProps<typeof Message>["intent"]>;
+
+const SEVERITY_INTENT: Record<ValidationError["severity"], Intent> = {
+  error: "danger",
+  warning: "warning",
+  info: "neutral",
+};
+
+const severityIcon = (severity: ValidationError["severity"]) => {
+  if (severity === "error") return <AlertCircle className="h-4 w-4" />;
+  if (severity === "warning") return <AlertTriangle className="h-4 w-4" />;
+  return <Info className="h-4 w-4" />;
+};
+
+const summarise = (errorCount: number, warningCount: number) => {
+  const parts: string[] = [];
+  if (errorCount > 0) parts.push(`${errorCount} error${errorCount > 1 ? "s" : ""}`);
+  if (warningCount > 0) parts.push(`${warningCount} warning${warningCount > 1 ? "s" : ""}`);
+  return parts.join(", ");
+};
+
+export const ValidationStatus = ({ errors, maxRows = 5, className, ...props }: ValidationStatusProps) => {
+  if (errors.length === 0) {
+    return (
+      <div {...props} className={cn("flex flex-col", className)}>
+        <Message intent="success" icon={<CheckCircle className="h-4 w-4" />}>
+          No errors — code is valid
+        </Message>
+      </div>
+    );
+  }
+
+  const errorCount = errors.filter((e) => e.severity === "error").length;
+  const warningCount = errors.filter((e) => e.severity === "warning").length;
+  const visible = errors.slice(0, maxRows);
+  const overflow = errors.length - visible.length;
+
+  return (
+    <div {...props} className={cn("flex flex-col gap-2", className)}>
+      <Message intent="danger" icon={<AlertCircle className="h-4 w-4" />}>
+        {summarise(errorCount, warningCount)}
+      </Message>
+
+      {visible.map((error) => (
+        <Message
+          key={`${error.line}-${error.column}-${error.message}`}
+          intent={SEVERITY_INTENT[error.severity]}
+          icon={severityIcon(error.severity)}
+          size="sm"
+          title={error.message}
+        >
+          Line {error.line}, Column {error.column}
+        </Message>
+      ))}
+
+      {overflow > 0 && (
+        <Message intent="neutral" size="sm">
+          …and {overflow} more
+        </Message>
+      )}
+    </div>
+  );
+};

package/src/components/Code/ValidationStatus/index.ts

@@ -0,0 +1 @@
+export { type ValidationError, ValidationStatus, type ValidationStatusProps } from "./ValidationStatus";

package/src/components/Code/Workspace/StatusBar.tsx

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+export type StatusBarItem = {
+  id: string;
+  label: string;
+  value?: string;
+  icon?: ReactNode;
+  onClick?: () => void;
+};
+
+export type StatusBarProps = HTMLAttributes<HTMLDivElement> & {
+  items?: StatusBarItem[] | undefined;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+};
+
+/**
+ * Status bar component for code editor showing metadata and status information
+ */
+export const StatusBar = ({ items = [], leftContent, rightContent, className, ...props }: StatusBarProps) => {
+  return (
+    <div {...props} className={`flex items-center justify-between border-border-normal border-t bg-bg-subtle px-4 py-1 text-xs ${className ?? ""}`}>
+      {/* Left content */}
+      <div className="flex items-center gap-4">
+        {leftContent}
+        {/* biome-ignore-start lint/a11y/noStaticElementInteractions: items are optionally clickable metadata chips — the API takes plain data and a per-item button would change the bar's layout */}
+        {/* biome-ignore-start lint/a11y/useKeyWithClickEvents: same constraint as above */}
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className={`flex items-center gap-1 text-fg-subtle ${item.onClick ? "cursor-pointer hover:text-fg-normal" : ""}`}
+            onClick={item.onClick}
+          >
+            {item.icon && <span>{item.icon}</span>}
+            <span className="font-medium">{item.label}</span>
+            {item.value && <span>: {item.value}</span>}
+          </div>
+        ))}
+        {/* biome-ignore-end lint/a11y/useKeyWithClickEvents: see start marker */}
+        {/* biome-ignore-end lint/a11y/noStaticElementInteractions: see start marker */}
+      </div>
+
+      {/* Right content */}
+      <div className="flex items-center gap-4 text-fg-subtle">{rightContent}</div>
+    </div>
+  );
+};