@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/index.ts

@@ -45,6 +45,7 @@ export type {
   DocumentLinkProvider,
   ViewPreferences,
   ThemeInheritance,
+  BlockTagVisibility,
   LayoutMode,
 } from './EditorContext.js';
 
@@ -99,11 +100,12 @@ export { DocumentSettingsDialog } from './DocumentSettingsDialog.js';
 export type { DocumentSettingsDialogProps } from './DocumentSettingsDialog.js';
 export { ThemePicker } from './ThemePicker.js';
 export type { ThemePickerProps } from './ThemePicker.js';
-export { EMOJI_CATEGORIES, ALL_EMOJIS, searchEmojis } from './emojiData.js';
-export type { EmojiEntry, EmojiCategory } from './emojiData.js';
+export { PICKER_CATEGORIES, ALL_PICKER_ENTRIES, searchPickerEntries } from './emojiData.js';
+export type { PickerEntry, PickerCategory } from './emojiData.js';
 export {
   PreviewSettingsProvider,
   PreviewToolbarControls,
+  PreviewModeMenu,
   PreviewModeSwitch,
   PreviewFormatSwitch,
   usePreviewSettings,
@@ -142,7 +144,6 @@ export {
   setHeadingLineTransition,
   readBlockAttrsTransition,
   setHeadingAttrsTransition,
-  setBlockAttrsTransition,
   EMPTY_TRANSITION,
 } from './headingTransition.js';
 export type { HeadingTransitionAttrs, TransitionFields } from './headingTransition.js';
@@ -190,12 +191,26 @@ export {
 export { useMonacoLoader } from './useMonacoLoader.js';
 export type { UseMonacoLoaderResult } from './useMonacoLoader.js';
 
+// Monaco language-service worker wiring — the host supplies the `?worker`
+// constructors, this owns the label→worker mapping. See monacoWorkers.ts.
+export { configureMonacoWorkers } from './monacoWorkers.js';
+export type { MonacoWorkerConstructor, MonacoWorkerConstructors } from './monacoWorkers.js';
+
 // Custom themes — provider stack (doc frontmatter + browser-local library)
-export { CustomThemeProvider, useCustomThemes, useDocCustomThemes } from './customThemes/index.js';
+export {
+  CustomThemeProvider,
+  useCustomThemes,
+  useDocCustomThemes,
+  ImportThemeSection,
+  draftPatchFromImportedTheme,
+} from './customThemes/index.js';
 export type {
   CustomThemeContextValue,
   CustomThemeProviderProps,
   DocCustomThemes,
+  ImportThemeSectionProps,
+  ImportedThemeResult,
+  ThemeSaveExtras,
 } from './customThemes/index.js';
 
 // Custom templates — provider stack (doc frontmatter + browser-local library)
@@ -219,24 +234,128 @@ export { buildPreviewDoc } from './buildPreviewDoc.js';
 // Tiptap extension: Heading with template annotation support
 export { HeadingWithTemplate } from './TemplateAnnotation.js';
 
-// Diagram editor — Tiptap extension that mounts a React-Flow canvas
-// below any `### Title {[diagram]}` heading and hides the section's
-// child headings (they're rendered as nodes in the canvas).
-export { DiagramExtension } from './diagram/DiagramExtension.js';
+// Diagram editor — ASCII fences are the authored diagram format. The
+// AsciiDiagramExtension turns code fences containing box-and-line art
+// into interactive canvases; edits re-render the art (the fence stays the
+// source of truth). Legacy `{[diagram]}` heading sections still RENDER in
+// preview/player via core, but heading-based canvas editing was removed
+// (BREAKING: DiagramExtension / DiagramWidget / useDiagramData / the
+// heading command helpers are gone).
 export { DiagramCanvas } from './diagram/DiagramCanvas.js';
 export type { DiagramCommand } from './diagram/DiagramCanvas.js';
-export { DiagramWidget } from './diagram/DiagramWidget.js';
-export { useDiagramData } from './diagram/useDiagramData.js';
-export type { DiagramData, DiagramRFNode, DiagramRFEdge } from './diagram/useDiagramData.js';
+export type { DiagramData, DiagramNode, DiagramEdge } from './diagram/types.js';
+export {
+  AsciiDiagramExtension,
+  findAsciiDiagramBlockPos,
+  isAsciiSourceVisible,
+  toggleAsciiSource,
+} from './asciiDiagram/AsciiDiagramExtension.js';
+export type {
+  AsciiDiagramBlockEntry,
+  AsciiDiagramExtensionOptions,
+  AsciiDiagramPluginState,
+} from './asciiDiagram/AsciiDiagramExtension.js';
+export { AsciiDiagramWidget } from './asciiDiagram/AsciiDiagramWidget.js';
+export { useAsciiDiagramData, asciiDiagramToCanvas } from './asciiDiagram/asciiDiagramData.js';
+export type { AsciiDiagramView } from './asciiDiagram/asciiDiagramData.js';
+export {
+  applyAsciiDiagramCommand,
+  applyRepairCommand,
+  replaceAsciiFenceText,
+} from './asciiDiagram/asciiDiagramCommands.js';
+// RepairableDiagramExtension mounts an inline "Repair as diagram" button on
+// code fences holding BROKEN box art — art too misaligned for clean detection
+// (so it renders as a faithful code block). One click reconstructs it into
+// clean `diagram`-tagged art that the AsciiDiagramExtension turns into a
+// canvas. Peer to the diagram/tree editors; claims the fences neither does.
+export {
+  RepairableDiagramExtension,
+  findRepairableBlockPos,
+  isRepairableFence,
+  REPAIRABLE_KEY,
+} from './asciiDiagram/RepairableDiagramExtension.js';
+export type {
+  RepairableBlockEntry,
+  RepairableDiagramExtensionOptions,
+  RepairablePluginState,
+} from './asciiDiagram/RepairableDiagramExtension.js';
+export {
+  addEdgeOp,
+  addNodeOp,
+  moveNodeOp,
+  removeEdgeOp,
+  removeNodeOp,
+  renameNodeOp,
+  resizeNodeOp,
+  sanitizeAsciiLabel,
+} from './asciiDiagram/asciiDiagramOps.js';
+export { shouldPasteAsAsciiFence } from './asciiDiagram/asciiPaste.js';
+
+// Treeview editor — ASCII file-tree / outline fences get an interactive
+// outline widget; edits re-render the tree art (the fence stays the source
+// of truth). Peer to the ASCII diagram editor; mutually exclusive with it
+// (a fence with boxes is a diagram, not a tree).
+export { TreeViewExtension, findTreeBlockPos } from './treeview/TreeViewExtension.js';
+export type {
+  TreeBlockEntry,
+  TreeViewExtensionOptions,
+  TreeViewPluginState,
+} from './treeview/TreeViewExtension.js';
+export { TreeOutlineWidget } from './treeview/TreeOutlineWidget.js';
+export { useTreeViewData } from './treeview/treeViewData.js';
+export type { TreeViewData } from './treeview/treeViewData.js';
+export { applyTreeCommand, replaceTreeFenceText } from './treeview/treeViewCommands.js';
+export type { TreeCommand } from './treeview/treeViewCommands.js';
+export {
+  addItemOp,
+  indentItemOp,
+  moveItemDownOp,
+  moveItemUpOp,
+  outdentItemOp,
+  removeItemOp,
+  renameItemOp,
+  sanitizeTreeLabel,
+  toggleDirOp,
+} from './treeview/treeOps.js';
+export { shouldPasteAsTreeFence } from './treeview/treePaste.js';
+
+// Timeline editor — authored marker-rail fences become an accessible canvas
+// with add-point affordances and a selected-point inspector. Semantic edits
+// re-render the canonical `timeline` fence in one undoable transaction.
+export {
+  TimelineViewExtension,
+  TIMELINE_VIEW_KEY,
+  findTimelineBlockPos,
+  getTimelineForNode,
+  parseTimelineForNode,
+} from './timeline/TimelineViewExtension.js';
+export type {
+  TimelineBlockEntry,
+  TimelineViewExtensionOptions,
+  TimelineViewPluginState,
+} from './timeline/TimelineViewExtension.js';
+export { TimelineEditorWidget } from './timeline/TimelineEditorWidget.js';
+export type { TimelineEditorWidgetProps } from './timeline/TimelineEditorWidget.js';
+export { useTimelineData } from './timeline/timelineData.js';
+export type { TimelineViewData } from './timeline/timelineData.js';
 export {
-  moveNode,
-  addConnection,
-  removeConnection,
-  renameNode,
-  addNode,
-  removeNode,
-  listDiagramChildren,
-} from './diagram/diagramCommands.js';
+  applyTimelineCommand,
+  isTimelineSourceSafeForSemanticEdit,
+} from './timeline/timelineCommands.js';
+export type { TimelineCommand, TimelineCommandResult } from './timeline/timelineCommands.js';
+export {
+  addTimelineEventOp,
+  nextTimelineEventId,
+  removeTimelineEventOp,
+  sanitizeTimelineText,
+  updateTimelineEventOp,
+} from './timeline/timelineOps.js';
+export type {
+  AddTimelineEventOptions,
+  AddTimelineEventResult,
+  TimelineEventPatch,
+} from './timeline/timelineOps.js';
+export { shouldPasteAsTimelineFence } from './timeline/timelinePaste.js';
 
 // JSON Form — editable component
 export { JsonEditor } from './jsonEditor/index.js';
@@ -277,6 +396,59 @@ export type { CaptureKind, ResolvedFormat } from './recorder/formats.js';
 export { buildTimingJson, encodeTimingJson, timingPathFor } from './recorder/timingJson.js';
 export type { TimingJson, RecordedBookmark } from './recorder/timingJson.js';
 
+// Teleprompter — the Narrate display mode under the Use tab: voice-paced
+// prompter surface, floating-window tiers, and the mic analysis pipeline.
+export {
+  TeleprompterView,
+  TeleprompterSurface,
+  TeleprompterControls,
+  useTeleprompter,
+  useNarrationRecorder,
+  buildNarrationSavePlan,
+  executeNarrationSave,
+  insertNarrationPreamble,
+  narrationAnnotationLine,
+  cameraVideoLine,
+  vadConfigForSensitivity,
+  useMicAnalysis,
+  PCM_WORKLET_SOURCE,
+  PCM_WORKLET_NAME,
+  registerPcmWorklet,
+  createFloatingWindowManager,
+  detectFloatTiers,
+  useFloatingWindow,
+  measureTokenLines,
+  targetOffsetFor,
+  stepScroll,
+  EYE_LINE_FRACTION,
+  TELEPROMPTER_CSS,
+  ensureTeleprompterStyles,
+  prompterVarsFromTheme,
+  DEFAULT_TELEPROMPTER_PREFS,
+} from './teleprompter/index.js';
+export type {
+  TeleprompterViewProps,
+  TeleprompterSurfaceProps,
+  TeleprompterControlsProps,
+  TeleprompterController,
+  TeleprompterRecordingDeps,
+  NarrationRecorderController,
+  NarrationRecorderState,
+  NarrationTake,
+  NarrationSavePlan,
+  NarrationSaveResult,
+  MicAnalysisHandle,
+  MicAnalysisStatus,
+  FloatingWindowManager,
+  FloatOpenOptions,
+  CanvasSink,
+  FloatingWindowHandle,
+  TokenLineMap,
+  TeleprompterPrefs,
+  PrompterTransport,
+  FloatTier,
+} from './teleprompter/index.js';
+
 // Image editor — layered, sidecar-persisted raster authoring surface.
 // Pairs with `ImageViewer` and the `<basename>_files/` sidecar convention.
 export { ImageEditor } from './ImageEditor.js';

package/src/jsonEditor/JsonEditorContext.tsx

@@ -5,7 +5,7 @@
  * to the host's `onChange`.
  */
 
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { createContext, useContext, useEffect, useMemo, type ReactNode } from 'react';
 import type {
   JsonFormValidationError,
   JsonFormValidator,
@@ -38,18 +38,24 @@ export interface JsonEditorProviderProps {
 export function JsonEditorProvider(props: JsonEditorProviderProps) {
   const { rootSchema, rootData, onRootChange, density, validate, onValidate, children } = props;
 
+  const validationErrors = useMemo(
+    () => (validate ? validate(rootData, rootSchema) : []),
+    [validate, rootData, rootSchema],
+  );
   const errors = useMemo(() => {
-    if (!validate) return new Map<string, JsonFormValidationError[]>();
-    const list = validate(rootData, rootSchema);
-    if (onValidate) onValidate(list);
     const grouped = new Map<string, JsonFormValidationError[]>();
-    for (const e of list) {
+    for (const e of validationErrors) {
       const arr = grouped.get(e.path) ?? [];
       arr.push(e);
       grouped.set(e.path, arr);
     }
     return grouped;
-  }, [validate, rootData, rootSchema, onValidate]);
+  }, [validationErrors]);
+
+  useEffect(() => {
+    if (!onValidate) return;
+    onValidate(validationErrors);
+  }, [validationErrors, onValidate]);
 
   const setAtPath = useMemo(
     () => (pointer: string, value: unknown) => {

package/src/jsonEditor/RenderNode.tsx

@@ -11,6 +11,7 @@ import {
   resolveRef,
   type SquisqAnnotatedSchema,
 } from '@bendyline/squisq/jsonForm';
+import { useId } from 'react';
 import { useJsonEditor } from './JsonEditorContext';
 import { EDITORS, isCompositeControl } from './editors';
 
@@ -23,6 +24,7 @@ export interface RenderNodeProps {
 }
 
 export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
+  const generatedId = useId().replace(/:/g, '');
   const { rootSchema, rootData, errors } = useJsonEditor();
   const resolved = resolveRef(props.schema, rootSchema) ?? props.schema;
 
@@ -35,6 +37,11 @@ export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
   const label = resolved.squisq?.label ?? resolved.title;
   const help = resolved.squisq?.help ?? resolved.description;
   const fieldErrors = errors.get(props.pointer) ?? [];
+  const controlId = `squisq-json-control-${generatedId}`;
+  const labelId = label ? `${controlId}-label` : undefined;
+  const helpId = help ? `${controlId}-help` : undefined;
+  const errorId = fieldErrors.length > 0 ? `${controlId}-error` : undefined;
+  const describedBy = [helpId, errorId].filter(Boolean).join(' ') || undefined;
 
   const editorEl = (
     <Editor
@@ -42,6 +49,10 @@ export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
       schema={resolved}
       pointer={props.pointer}
       disabled={disabled}
+      controlId={controlId}
+      labelledBy={labelId}
+      describedBy={describedBy}
+      invalid={fieldErrors.length > 0}
       // GroupEditor honors this — other editors ignore the extra prop.
       // @ts-expect-error optional renderer-specific prop
       suppressTitle={props.suppressTopGroupTitle}
@@ -55,11 +66,21 @@ export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
 
   return (
     <div className={`squisq-jf-field${disabled ? ' squisq-jf-field--disabled' : ''}`}>
-      {label ? <label className="squisq-jf-field__label">{label}</label> : null}
+      {label ? (
+        <label id={labelId} htmlFor={controlId} className="squisq-jf-field__label">
+          {label}
+        </label>
+      ) : null}
       {editorEl}
-      {help ? <p className="squisq-jf-field__help">{help}</p> : null}
+      {help ? (
+        <p id={helpId} className="squisq-jf-field__help">
+          {help}
+        </p>
+      ) : null}
       {fieldErrors.length > 0 ? (
-        <p className="squisq-jf-field__error">{fieldErrors[0].message}</p>
+        <p id={errorId} className="squisq-jf-field__error" role="alert">
+          {fieldErrors[0].message}
+        </p>
       ) : null}
     </div>
   );

package/src/jsonEditor/editors.tsx

@@ -8,6 +8,7 @@
 
 import { useEffect, useId, useRef, useState, type ChangeEvent } from 'react';
 import {
+  appendPointer,
   arrayItemKind,
   type ControlKind,
   type SquisqAnnotatedSchema,
@@ -21,6 +22,19 @@ export interface EditorProps {
   schema: SquisqAnnotatedSchema;
   pointer: string;
   disabled: boolean;
+  controlId?: string;
+  labelledBy?: string;
+  describedBy?: string;
+  invalid?: boolean;
+}
+
+function accessibilityProps(props: EditorProps) {
+  return {
+    id: props.controlId,
+    'aria-labelledby': props.labelledBy,
+    'aria-describedby': props.describedBy,
+    'aria-invalid': props.invalid || undefined,
+  };
 }
 
 // ── Helpers ───────────────────────────────────────────────────────
@@ -38,10 +52,12 @@ function asNumber(v: unknown): number | '' {
 
 // ── Primitive editors ────────────────────────────────────────────
 
-export function TextEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function TextEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   return (
     <input
+      {...accessibilityProps(props)}
       type="text"
       className="squisq-jf-input"
       value={asString(value)}
@@ -52,7 +68,8 @@ export function TextEditor({ value, schema, pointer, disabled }: EditorProps) {
   );
 }
 
-export function MultilineEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function MultilineEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const ref = useRef<HTMLTextAreaElement>(null);
   // Auto-grow vertically.
@@ -64,6 +81,7 @@ export function MultilineEditor({ value, schema, pointer, disabled }: EditorProp
   }, [value]);
   return (
     <textarea
+      {...accessibilityProps(props)}
       ref={ref}
       className="squisq-jf-textarea"
       value={asString(value)}
@@ -86,7 +104,8 @@ export function RichTextEditor({ value, schema, pointer, disabled }: EditorProps
   );
 }
 
-export function NumberStepperEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function NumberStepperEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const isInt = schema.type === 'integer';
   const step = schema.squisq?.step ?? schema.multipleOf ?? (isInt ? 1 : 0.1);
@@ -111,6 +130,7 @@ export function NumberStepperEditor({ value, schema, pointer, disabled }: Editor
         −
       </button>
       <input
+        {...accessibilityProps(props)}
         className="squisq-jf-stepper__input"
         type="number"
         value={num === '' ? '' : num}
@@ -138,7 +158,8 @@ export function NumberStepperEditor({ value, schema, pointer, disabled }: Editor
   );
 }
 
-export function SliderEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function SliderEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const min = (schema.minimum ?? schema.exclusiveMinimum ?? 0) as number;
   const max = (schema.maximum ?? schema.exclusiveMaximum ?? 100) as number;
@@ -148,6 +169,7 @@ export function SliderEditor({ value, schema, pointer, disabled }: EditorProps)
   return (
     <span className="squisq-jf-slider-row">
       <input
+        {...accessibilityProps(props)}
         type="range"
         className="squisq-jf-slider"
         min={min}
@@ -162,11 +184,13 @@ export function SliderEditor({ value, schema, pointer, disabled }: EditorProps)
   );
 }
 
-export function ToggleEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function ToggleEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const on = Boolean(value);
   return (
     <button
+      {...accessibilityProps(props)}
       type="button"
       className={`squisq-jf-toggle${on ? ' squisq-jf-toggle--on' : ''}`}
       disabled={disabled}
@@ -189,12 +213,17 @@ export function ToggleEditor({ value, schema, pointer, disabled }: EditorProps)
   );
 }
 
-export function CheckboxEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function CheckboxEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
-  const id = useId();
+  const generatedId = useId();
+  const id = props.controlId ?? generatedId;
   return (
     <label htmlFor={id} className="squisq-jf-toggle">
       <input
+        aria-labelledby={props.labelledBy}
+        aria-describedby={props.describedBy}
+        aria-invalid={props.invalid || undefined}
         id={id}
         type="checkbox"
         checked={Boolean(value)}
@@ -214,11 +243,12 @@ function enumOptions(schema: SquisqAnnotatedSchema): { value: unknown; label: st
   }));
 }
 
-export function SegmentedEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function SegmentedEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const options = enumOptions(schema);
   return (
-    <span className="squisq-jf-segmented">
+    <span {...accessibilityProps(props)} className="squisq-jf-segmented" role="group">
       {options.map((opt, i) => {
         const active = value === opt.value;
         return (
@@ -228,6 +258,7 @@ export function SegmentedEditor({ value, schema, pointer, disabled }: EditorProp
             className={`squisq-jf-segmented__btn${active ? ' squisq-jf-segmented__btn--active' : ''}`}
             disabled={disabled}
             onClick={() => setAtPath(pointer, opt.value)}
+            aria-pressed={active}
           >
             {opt.label}
           </button>
@@ -237,12 +268,13 @@ export function SegmentedEditor({ value, schema, pointer, disabled }: EditorProp
   );
 }
 
-export function RadioEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function RadioEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const options = enumOptions(schema);
   const name = useId();
   return (
-    <div className="squisq-jf-radio">
+    <div {...accessibilityProps(props)} className="squisq-jf-radio" role="radiogroup">
       {options.map((opt, i) => {
         const active = value === opt.value;
         return (
@@ -262,11 +294,13 @@ export function RadioEditor({ value, schema, pointer, disabled }: EditorProps) {
   );
 }
 
-export function ComboboxEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function ComboboxEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const options = enumOptions(schema);
   return (
     <select
+      {...accessibilityProps(props)}
       className="squisq-jf-select"
       value={asString(value)}
       disabled={disabled}
@@ -285,12 +319,14 @@ export function ComboboxEditor({ value, schema, pointer, disabled }: EditorProps
   );
 }
 
-export function ColorEditor({ value, pointer, disabled }: EditorProps) {
+export function ColorEditor(props: EditorProps) {
+  const { value, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const hex = typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value) ? value : '#000000';
   return (
     <span className="squisq-jf-color">
       <input
+        {...accessibilityProps(props)}
         type="color"
         className="squisq-jf-color__input"
         value={hex}
@@ -308,7 +344,8 @@ export function ColorEditor({ value, pointer, disabled }: EditorProps) {
   );
 }
 
-export function DateEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function DateEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const fmt = schema.format;
   const inputType = fmt === 'time' ? 'time' : fmt === 'date' ? 'date' : 'datetime-local';
@@ -321,6 +358,7 @@ export function DateEditor({ value, schema, pointer, disabled }: EditorProps) {
       : asString(value);
   return (
     <input
+      {...accessibilityProps(props)}
       type={inputType}
       className="squisq-jf-input"
       value={display}
@@ -348,7 +386,7 @@ export function GroupEditor(props: EditorProps & { suppressTitle?: boolean }) {
           key={key}
           value={obj[key]}
           schema={propSchema}
-          pointer={`${pointer}/${key}`}
+          pointer={appendPointer(pointer, key)}
           parentDisabled={disabled}
         />
       ))}
@@ -581,7 +619,9 @@ function defaultForSchema(schema: SquisqAnnotatedSchema): unknown {
   }
 }
 
-export function TabsEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function TabsEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
+  const tabsId = useId().replace(/:/g, '');
   const branches = (schema.oneOf ?? schema.anyOf ?? []) as readonly SquisqAnnotatedSchema[];
   const initial = pickMatchingBranch(branches, value);
   const [active, setActive] = useState(initial);
@@ -593,9 +633,14 @@ export function TabsEditor({ value, schema, pointer, disabled }: EditorProps) {
 
   const branch = branches[active];
   if (!branch) return null;
+  const activateTab = (index: number) => {
+    const next = (index + branches.length) % branches.length;
+    setActive(next);
+    requestAnimationFrame(() => document.getElementById(`${tabsId}-tab-${next}`)?.focus());
+  };
   return (
-    <div>
-      <div className="squisq-jf-tabs__strip">
+    <div {...accessibilityProps(props)}>
+      <div className="squisq-jf-tabs__strip" role="tablist">
         {branches.map((b, i) => (
           <button
             key={i}
@@ -603,12 +648,34 @@ export function TabsEditor({ value, schema, pointer, disabled }: EditorProps) {
             className={`squisq-jf-tabs__tab${i === active ? ' squisq-jf-tabs__tab--active' : ''}`}
             disabled={disabled}
             onClick={() => setActive(i)}
+            onKeyDown={(event) => {
+              if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                activateTab(i + 1);
+              } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                activateTab(i - 1);
+              } else if (event.key === 'Home') {
+                event.preventDefault();
+                activateTab(0);
+              } else if (event.key === 'End') {
+                event.preventDefault();
+                activateTab(branches.length - 1);
+              }
+            }}
+            role="tab"
+            id={`${tabsId}-tab-${i}`}
+            aria-selected={i === active}
+            aria-controls={`${tabsId}-panel`}
+            tabIndex={i === active ? 0 : -1}
           >
             {b.squisq?.label ?? b.title ?? `Option ${i + 1}`}
           </button>
         ))}
       </div>
-      <RenderNode value={value} schema={branch} pointer={pointer} parentDisabled={disabled} />
+      <div id={`${tabsId}-panel`} role="tabpanel" aria-labelledby={`${tabsId}-tab-${active}`}>
+        <RenderNode value={value} schema={branch} pointer={pointer} parentDisabled={disabled} />
+      </div>
     </div>
   );
 }

package/src/mediaEntries.ts

@@ -0,0 +1,12 @@
+import type { MediaEntry } from '@bendyline/squisq/schemas';
+
+/** Files managed by the container but intentionally omitted from the Files panel. */
+export function isVisibleMediaEntry(entry: MediaEntry): boolean {
+  const basename = entry.name.slice(entry.name.lastIndexOf('/') + 1);
+  return basename.toLowerCase() !== '.gitignore';
+}
+
+/** Return the entries that should participate in the Files panel and its count. */
+export function filterVisibleMediaEntries(entries: readonly MediaEntry[]): MediaEntry[] {
+  return entries.filter(isVisibleMediaEntry);
+}