@pilotiq/pilotiq 0.1.0

package/src/react/formStateHelpers.test.ts

@@ -0,0 +1,295 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+
+import {
+  collectFieldDefaults,
+  findFieldMeta,
+  parseFormDataToNested,
+  readNestedValue,
+  writeNestedValue,
+} from './formStateHelpers.js'
+import type { ElementMeta } from '../schema/Element.js'
+
+const field = (name: string, defaultValue?: unknown): ElementMeta => ({
+  type:      'field',
+  fieldType: 'text',
+  name,
+  label:     name,
+  required:  false,
+  disabled:  false,
+  ...(defaultValue !== undefined ? { defaultValue } : {}),
+} as ElementMeta)
+
+const formMeta = (children: ElementMeta[], values?: Record<string, unknown>): ElementMeta => ({
+  type:    'form',
+  formId:  'form-1',
+  method:  'post',
+  children,
+  ...(values ? { values } : {}),
+} as ElementMeta)
+
+describe('collectFieldDefaults', () => {
+  it('flattens top-level fields by name', () => {
+    const meta = formMeta([
+      field('title', 'Hello'),
+      field('slug',  'hello'),
+    ])
+    const out = collectFieldDefaults(meta)
+    assert.deepEqual(out, { title: 'Hello', slug: 'hello' })
+  })
+
+  it('walks into nested children', () => {
+    const meta = formMeta([
+      {
+        type:     'section',
+        children: [field('nested', 42)],
+      } as ElementMeta,
+    ])
+    const out = collectFieldDefaults(meta)
+    assert.deepEqual(out, { nested: 42 })
+  })
+
+  it('uses empty string for fields without defaultValue', () => {
+    const out = collectFieldDefaults(formMeta([field('untouched')]))
+    assert.equal(out['untouched'], '')
+  })
+
+  it('overlays form-level values on top of field defaults', () => {
+    const meta = formMeta(
+      [field('title', 'Default')],
+      { title: 'From values', extra: 'extra' },
+    )
+    const out = collectFieldDefaults(meta)
+    assert.equal(out['title'], 'From values')
+    assert.equal(out['extra'], 'extra')
+  })
+
+  it('skips non-field nodes', () => {
+    const meta = formMeta([
+      { type: 'heading', text: 'Hello' } as ElementMeta,
+      field('real', 'value'),
+    ])
+    const out = collectFieldDefaults(meta)
+    assert.deepEqual(out, { real: 'value' })
+  })
+})
+
+describe('findFieldMeta', () => {
+  it('finds top-level field', () => {
+    const target = field('title', 'Hello')
+    const found  = findFieldMeta(formMeta([target, field('slug')]), 'title')
+    assert.equal(found, target)
+  })
+
+  it('finds nested field', () => {
+    const target = field('inner')
+    const meta = formMeta([
+      {
+        type:     'section',
+        children: [field('outer'), { type: 'card', children: [target] } as ElementMeta],
+      } as ElementMeta,
+    ])
+    const found = findFieldMeta(meta, 'inner')
+    assert.equal(found, target)
+  })
+
+  it('returns undefined for unknown name', () => {
+    assert.equal(findFieldMeta(formMeta([field('a')]), 'b'), undefined)
+  })
+
+  it('first match wins when names collide', () => {
+    const a = field('dup', 'first')
+    const b = field('dup', 'second')
+    const found = findFieldMeta(formMeta([a, b]), 'dup')
+    assert.equal(found, a)
+  })
+})
+
+// ─── Plan #14 — dotted-path live for inner Repeater fields ─────────
+
+const repeater = (
+  name:     string,
+  rows:     ElementMeta[][],
+  template: ElementMeta[] = [],
+): ElementMeta => ({
+  type:      'field',
+  fieldType: 'repeater',
+  name,
+  label:     name,
+  required:  false,
+  disabled:  false,
+  rows:      rows.map((children, i) => ({ id: `r${i}`, children })),
+  template,
+} as ElementMeta)
+
+describe('findFieldMeta — dotted paths into Repeater rows', () => {
+  it('finds an inner Repeater field by dotted path', () => {
+    const inner = field('product')
+    ;(inner as Record<string, unknown>)['live'] = true
+    const meta  = formMeta([repeater('items', [[inner, field('qty')]])])
+    const found = findFieldMeta(meta, 'items.0.product')
+    assert.equal(found?.['name'], 'product')
+    assert.equal(found?.['live'], true)
+  })
+
+  it('uses the requested row index when present', () => {
+    const r0 = field('product')
+    const r1 = field('product')
+    ;(r1 as Record<string, unknown>)['live'] = { debounce: 200 }
+    const meta = formMeta([repeater('items', [[r0], [r1]])])
+    assert.deepEqual(findFieldMeta(meta, 'items.1.product')?.['live'], { debounce: 200 })
+  })
+
+  it('falls back to row 0 when index is out of range', () => {
+    const inner = field('product')
+    ;(inner as Record<string, unknown>)['live'] = true
+    const meta  = formMeta([repeater('items', [[inner]])])
+    assert.equal(findFieldMeta(meta, 'items.7.product')?.['live'], true)
+  })
+
+  it('falls back to template when no rows are present', () => {
+    const tpl = field('product')
+    ;(tpl as Record<string, unknown>)['live'] = true
+    const meta = formMeta([repeater('items', [], [tpl])])
+    assert.equal(findFieldMeta(meta, 'items.0.product')?.['live'], true)
+  })
+
+  it('returns undefined when first segment is not a Repeater', () => {
+    const meta = formMeta([field('title')])
+    assert.equal(findFieldMeta(meta, 'title.0.x'), undefined)
+  })
+
+  it('handles nested Repeaters', () => {
+    const inner = field('name')
+    ;(inner as Record<string, unknown>)['live'] = true
+    const mods  = repeater('modifiers', [[inner]])
+    const meta  = formMeta([repeater('items', [[field('product'), mods]])])
+    const found = findFieldMeta(meta, 'items.0.modifiers.0.name')
+    assert.equal(found?.['name'], 'name')
+    assert.equal(found?.['live'], true)
+  })
+})
+
+describe('parseFormDataToNested', () => {
+  function fdFrom(entries: Array<[string, string]>): FormData {
+    const fd = new FormData()
+    for (const [k, v] of entries) fd.append(k, v)
+    return fd
+  }
+
+  it('flat keys round-trip as flat object', () => {
+    const fd = fdFrom([['title', 'Hello'], ['body', 'World']])
+    assert.deepEqual(parseFormDataToNested(fd), { title: 'Hello', body: 'World' })
+  })
+
+  it('dotted keys with numeric segments build arrays of objects', () => {
+    const fd = fdFrom([
+      ['items.0.product', 'A'],
+      ['items.0.qty',     '2'],
+      ['items.1.product', 'B'],
+      ['items.1.qty',     '5'],
+    ])
+    assert.deepEqual(parseFormDataToNested(fd), {
+      items: [
+        { product: 'A', qty: '2' },
+        { product: 'B', qty: '5' },
+      ],
+    })
+  })
+
+  it('handles nested Repeaters', () => {
+    const fd = fdFrom([
+      ['items.0.product',          'A'],
+      ['items.0.modifiers.0.name', 'No onions'],
+      ['items.0.modifiers.1.name', 'Extra cheese'],
+    ])
+    assert.deepEqual(parseFormDataToNested(fd), {
+      items: [{
+        product:   'A',
+        modifiers: [{ name: 'No onions' }, { name: 'Extra cheese' }],
+      }],
+    })
+  })
+
+  it('filters out _formId and _method transport keys', () => {
+    const fd = fdFrom([
+      ['_formId', 'my-form'],
+      ['_method', 'patch'],
+      ['title',   'Hello'],
+    ])
+    assert.deepEqual(parseFormDataToNested(fd), { title: 'Hello' })
+  })
+
+  it('filters out Repeater __id row-identity keys', () => {
+    const fd = fdFrom([
+      ['items.0.__id',    'row-abc'],
+      ['items.0.product', 'A'],
+    ])
+    assert.deepEqual(parseFormDataToNested(fd), {
+      items: [{ product: 'A' }],
+    })
+  })
+
+  it('last value wins for duplicate keys', () => {
+    const fd = fdFrom([['title', 'first'], ['title', 'second']])
+    assert.deepEqual(parseFormDataToNested(fd), { title: 'second' })
+  })
+})
+
+describe('writeNestedValue', () => {
+  it('writes a flat key', () => {
+    const root: Record<string, unknown> = {}
+    writeNestedValue(root, 'title', 'Hello')
+    assert.deepEqual(root, { title: 'Hello' })
+  })
+
+  it('writes a dotted path into a fresh nested structure', () => {
+    const root: Record<string, unknown> = {}
+    writeNestedValue(root, 'items.0.product', 'A')
+    assert.deepEqual(root, { items: [{ product: 'A' }] })
+  })
+
+  it('overwrites an existing nested value without disturbing siblings', () => {
+    const root: Record<string, unknown> = {
+      items: [{ product: 'OLD', qty: '2' }, { product: 'B' }],
+    }
+    writeNestedValue(root, 'items.0.product', 'NEW')
+    assert.deepEqual(root, {
+      items: [{ product: 'NEW', qty: '2' }, { product: 'B' }],
+    })
+  })
+
+  it('extends an array when index is past the end', () => {
+    const root: Record<string, unknown> = { items: [{ product: 'A' }] }
+    writeNestedValue(root, 'items.2.product', 'C')
+    const items = (root['items'] as unknown[])
+    assert.equal(items.length, 3)
+    assert.deepEqual(items[2], { product: 'C' })
+  })
+})
+
+describe('readNestedValue', () => {
+  it('reads a flat key', () => {
+    assert.equal(readNestedValue({ title: 'Hi' }, 'title'), 'Hi')
+  })
+
+  it('reads a dotted path into an array of objects', () => {
+    const root = { items: [{ product: 'A' }, { product: 'B' }] }
+    assert.equal(readNestedValue(root, 'items.0.product'), 'A')
+    assert.equal(readNestedValue(root, 'items.1.product'), 'B')
+  })
+
+  it('returns undefined when an intermediate segment is missing', () => {
+    assert.equal(readNestedValue({}, 'a.b.c'), undefined)
+  })
+
+  it('returns undefined when an array index is non-integer', () => {
+    const root = { items: [{ x: 1 }] }
+    assert.equal(readNestedValue(root, 'items.foo.x'), undefined)
+  })
+
+  it('returns undefined when an intermediate value is not navigable', () => {
+    const root = { name: 'literal' }
+    assert.equal(readNestedValue(root as Record<string, unknown>, 'name.length'), undefined)
+  })
+})

package/src/react/formStateHelpers.ts

@@ -0,0 +1,218 @@
+import type { ElementMeta } from '../schema/Element.js'
+
+/** Walk a form's child tree and collect every Field's `defaultValue` into
+ *  a flat values map keyed by field name. Used by `FormStateProvider` to
+ *  seed its controlled-state map from the server's initial render. */
+export function collectFieldDefaults(formMeta: ElementMeta): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  // Server already overlays form-level `values` onto each field's
+  // `defaultValue` during resolveSchema, so we only need to read the
+  // field's `defaultValue`. We also overlay `formMeta.values` last as a
+  // safety net for any field that didn't carry a defaultValue but has a
+  // matching key on the form.
+  walkFields(formMeta, (field) => {
+    const name = String(field['name'] ?? '')
+    if (!name) return
+    const defaultValue = field['defaultValue']
+    if (defaultValue !== undefined) {
+      out[name] = defaultValue
+    } else if (!(name in out)) {
+      out[name] = ''
+    }
+  })
+
+  const formValues = (formMeta as { values?: Record<string, unknown> }).values
+  if (formValues) {
+    for (const [k, v] of Object.entries(formValues)) {
+      if (v !== undefined) out[k] = v
+    }
+  }
+  return out
+}
+
+/** Locate a Field meta by name within a form's descendants. Returns
+ *  `undefined` when no match. Used by `triggerLive` to look up the
+ *  field's `live` config.
+ *
+ *  Plan #14 — for dotted-path names like `items.0.product` (a field
+ *  inside a Repeater row), walks into the Repeater's first row's
+ *  children to find the inner field. The inner field's `live` config
+ *  is identical for every row (it's defined once on the field), so
+ *  reading from row 0 is sufficient. */
+export function findFieldMeta(formMeta: ElementMeta, name: string): ElementMeta | undefined {
+  if (name.includes('.')) return findFieldMetaDotted(formMeta, name)
+  let found: ElementMeta | undefined
+  walkFields(formMeta, (field) => {
+    if (found) return
+    if (String(field['name'] ?? '') === name) found = field
+  })
+  return found
+}
+
+/** Walk a dotted path against a form tree. Segments alternate
+ *  field-name and row-index. Mirrors the server-side `resolveRepeaterPath`
+ *  in `dispatchForm.ts`. */
+function findFieldMetaDotted(formMeta: ElementMeta, path: string): ElementMeta | undefined {
+  const segments = path.split('.')
+  let currentChildren: ElementMeta[] = (formMeta.children as ElementMeta[] | undefined) ?? []
+  let i = 0
+  while (i < segments.length) {
+    const fieldName = segments[i]
+    if (fieldName === undefined) return undefined
+    const field = findChildFieldByName(currentChildren, fieldName)
+    if (!field) return undefined
+    // Leaf — last segment was a field name.
+    if (i === segments.length - 1) return field
+    // Otherwise we must be inside a Repeater; the next segment is a row index.
+    if (field['fieldType'] !== 'repeater') return undefined
+    const idxRaw = segments[i + 1]
+    if (idxRaw === undefined) return undefined
+    const idx = Number(idxRaw)
+    if (!Number.isInteger(idx) || idx < 0) return undefined
+    // Live config is template-level; row 0's children are equivalent for
+    // lookup. Fall back to the requested row when present (handles future
+    // per-row schema variants without re-coding).
+    const rows = (field['rows'] as Array<{ children: ElementMeta[] }> | undefined) ?? []
+    const row = rows[idx] ?? rows[0]
+    if (!row) {
+      const tpl = (field['template'] as ElementMeta[] | undefined) ?? []
+      currentChildren = tpl
+    } else {
+      currentChildren = row.children
+    }
+    i += 2
+  }
+  return undefined
+}
+
+/** Find a direct child field by name — non-recursive (only scans the
+ *  immediate `Field` children of the given list). Layout containers are
+ *  flattened first so a Field inside `Section / Card / Group / etc.`
+ *  still counts as a "direct" child of the row's schema. */
+function findChildFieldByName(elements: ElementMeta[], name: string): ElementMeta | undefined {
+  for (const el of elements) {
+    if (el.type === 'field' && String(el['name'] ?? '') === name) return el
+    // Don't recurse into a Repeater's children — the dotted path handles
+    // that explicitly via the next segment.
+    if (el['fieldType'] === 'repeater') continue
+    const children = el.children as ElementMeta[] | undefined
+    if (Array.isArray(children) && children.length > 0) {
+      const hit = findChildFieldByName(children, name)
+      if (hit) return hit
+    }
+  }
+  return undefined
+}
+
+/** Recursive walker — visits every `field`-typed descendant. Stops at
+ *  Repeater boundaries (its row children are addressed via dotted paths,
+ *  not via this walker). */
+function walkFields(node: ElementMeta, visit: (field: ElementMeta) => void): void {
+  if (node.type === 'field') {
+    visit(node)
+    if (node['fieldType'] === 'repeater') return
+  }
+  const children = node.children
+  if (Array.isArray(children)) {
+    for (const child of children) walkFields(child as ElementMeta, visit)
+  }
+}
+
+/**
+ * Build a nested object from FormData entries. Keys split on `.`:
+ * - `name` → `{ name: 'value' }`
+ * - `items.0.product` → `{ items: [{ product: 'value' }] }`
+ * - `items.0.modifiers.1.name` → nested arrays of objects
+ *
+ * Plan #14 — used by FormStateProvider to snapshot the current DOM
+ * state of a form (including uncontrolled inner-Repeater inputs)
+ * before POSTing a live re-resolve. Server's `coerceFormValues` does
+ * the same structural fold plus type coercion; the client just folds.
+ *
+ * Rules:
+ * - Numeric segments after a field name → array indices.
+ * - Multiple values for the same key → last one wins (matches
+ *   browser-form semantics; checkbox lists handled at the field level).
+ * - Reserved `__id` keys (Repeater row identity) and `_formId / _method`
+ *   are filtered out — they're transport metadata, not field values.
+ */
+export function parseFormDataToNested(fd: FormData): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  for (const [rawKey, rawValue] of fd.entries()) {
+    if (rawKey === '_formId' || rawKey === '_method') continue
+    if (rawKey.endsWith('.__id')) continue
+    // FormData values may be File or string. We only need string here —
+    // file uploads pre-resolve to URL strings before live POST.
+    const value = typeof rawValue === 'string' ? rawValue : ''
+    writeNestedPath(out, rawKey.split('.'), value)
+  }
+  return out
+}
+
+/** Write a value into a nested object/array structure along a path
+ *  whose segments alternate field name (string) and array index
+ *  (numeric string). Creates intermediate objects/arrays as needed. */
+function writeNestedPath(root: Record<string, unknown>, segments: string[], value: unknown): void {
+  if (segments.length === 0) return
+  let cursor: Record<string, unknown> | unknown[] = root
+  for (let i = 0; i < segments.length - 1; i++) {
+    const seg     = segments[i] as string
+    const nextSeg = segments[i + 1] as string
+    const nextIsIndex = /^\d+$/.test(nextSeg)
+    if (Array.isArray(cursor)) {
+      const idx = Number(seg)
+      if (!Number.isInteger(idx) || idx < 0) return
+      if (cursor[idx] === undefined) cursor[idx] = nextIsIndex ? [] : {}
+      cursor = cursor[idx] as Record<string, unknown> | unknown[]
+    } else {
+      if (cursor[seg] === undefined) cursor[seg] = nextIsIndex ? [] : {}
+      cursor = cursor[seg] as Record<string, unknown> | unknown[]
+    }
+  }
+  const leaf = segments[segments.length - 1] as string
+  if (Array.isArray(cursor)) {
+    const idx = Number(leaf)
+    if (!Number.isInteger(idx) || idx < 0) return
+    cursor[idx] = value
+  } else {
+    cursor[leaf] = value
+  }
+}
+
+/** Public — write a single value into a nested structure along a
+ *  dotted path. Used by FormStateProvider to apply a `triggerLive`
+ *  value override on top of the FormData snapshot. */
+export function writeNestedValue(
+  root:  Record<string, unknown>,
+  path:  string,
+  value: unknown,
+): void {
+  writeNestedPath(root, path.split('.'), value)
+}
+
+/** Read a single value from a nested structure along a dotted path.
+ *  Returns `undefined` for missing paths or when an intermediate
+ *  segment is not a navigable container. Used by `afterStateUpdatedJs`
+ *  to expose `$get('items.0.name')` to the JS handler. */
+export function readNestedValue(
+  root: Record<string, unknown>,
+  path: string,
+): unknown {
+  const segments = path.split('.')
+  let cursor: unknown = root
+  for (const seg of segments) {
+    if (cursor === null || cursor === undefined) return undefined
+    if (Array.isArray(cursor)) {
+      const idx = Number(seg)
+      if (!Number.isInteger(idx)) return undefined
+      cursor = cursor[idx]
+      continue
+    }
+    if (typeof cursor === 'object') {
+      cursor = (cursor as Record<string, unknown>)[seg]
+      continue
+    }
+    return undefined
+  }
+  return cursor
+}

package/src/react/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener('change', onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/react/icon-context.tsx

@@ -0,0 +1,60 @@
+import React, { createContext, useContext } from 'react'
+import { getIcon, type IconType } from '../icons/registry.js'
+import type { SerializedIcon } from '../icons/types.js'
+
+/**
+ * Build-time component manifest. Maps Resource/Global/Page class names
+ * (e.g., `'ArticleResource'`) to the class itself. The Pilotiq Vite
+ * plugin emits this map by reading `app/Pilotiq/AdminPanel.ts` and
+ * re-exporting every registered class. The auto-gen `+Layout.tsx`
+ * imports it and passes it to `AppShell`.
+ *
+ * Only used to resolve component-typed icons (`Resource.icon = Newspaper`).
+ * String-typed icons go through `getIcon()` against the runtime registry.
+ */
+export type ComponentRegistry = Record<string, { icon?: unknown; navigationIcon?: unknown }>
+
+const Ctx = createContext<ComponentRegistry | undefined>(undefined)
+
+export function ComponentRegistryProvider({
+  value,
+  children,
+}: {
+  value: ComponentRegistry | undefined
+  children: React.ReactNode
+}) {
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>
+}
+
+export function useComponentRegistry(): ComponentRegistry | undefined {
+  return useContext(Ctx)
+}
+
+/**
+ * Resolve a `SerializedIcon` from `viewProps` to a React component.
+ *
+ * - `string` → look up in the runtime `registerIcons()` registry.
+ * - `{ class: 'ArticleResource' }` → look up in the build-time component
+ *   manifest. If the entry has its own `.navigationIcon` it wins;
+ *   otherwise falls through to `.icon`. The icon prop on the class
+ *   itself can be either another component (returned directly) or
+ *   another string (re-resolved through the runtime registry).
+ * - `undefined` → returns `undefined` (caller picks its own fallback).
+ */
+export function useIconFor(value: SerializedIcon | undefined): IconType | undefined {
+  const manifest = useComponentRegistry()
+  if (value === undefined) return undefined
+  if (typeof value === 'string') return getIcon(value)
+  if (typeof value === 'object' && 'class' in value) {
+    const entry = manifest?.[value.class]
+    if (!entry) return undefined
+    const candidate = entry.navigationIcon ?? entry.icon
+    if (candidate === undefined || candidate === null) return undefined
+    // String → re-resolve through the runtime registry; otherwise
+    // (function or forwardRef/memo object) treat as a renderable component.
+    if (typeof candidate === 'string') return getIcon(candidate)
+    if (typeof candidate === 'function' || typeof candidate === 'object') return candidate as IconType
+    return undefined
+  }
+  return undefined
+}

package/src/react/index.ts

@@ -0,0 +1,85 @@
+export { AppShell, type AppShellProps } from './AppShell.js'
+export {
+  ComponentRegistryProvider,
+  useComponentRegistry,
+  useIconFor,
+  type ComponentRegistry,
+} from './icon-context.js'
+
+export {
+  SchemaRenderer,
+  type SchemaRendererProps,
+  FormFields,
+  type FormFieldsProps,
+} from './SchemaRenderer.js'
+export { registerFieldRenderer, getFieldRenderer, type FieldRendererProps } from './registry.js'
+export {
+  registerWidgetRenderer,
+  getWidgetRenderer,
+  type WidgetRendererProps,
+} from './widgetRegistry.js'
+
+export {
+  FormStateProvider,
+  useFieldState,
+  useFormState,
+  type FormStateApi,
+  type FormStateProviderProps,
+  type UseFieldStateResult,
+} from './FormStateContext.js'
+
+export { parseFormDataToNested } from './formStateHelpers.js'
+
+export { NavigateProvider, useNavigate, type NavigateFn } from './navigate.js'
+
+export { ToasterProvider, useToast } from './Toaster.js'
+
+export {
+  WidgetDataProvider,
+  useInitialWidgetData,
+  useWidgetData,
+  type WidgetState,
+  type WidgetMetaLike,
+  type WidgetDataProviderProps,
+} from './WidgetDataContext.js'
+
+export {
+  RightPanelRegistryProvider,
+  useRightPanelRegistry,
+  useRightPanelComponent,
+  type RightPanelRegistry,
+} from './right-panel-registry.js'
+
+export {
+  RightSidebarProvider,
+  useRightSidebar,
+  useRightSidebarOptional,
+  type RightSidebarApi,
+  type RightSidebarProviderProps,
+} from './RightSidebarContext.js'
+export {
+  RightSidebar,
+  type RightSidebarProps,
+} from './RightSidebar.js'
+export { RightSidebarTrigger } from './RightSidebarTrigger.js'
+export {
+  useResizableWidth,
+  clampPanelWidth,
+  type UseResizableWidthOptions,
+  type UseResizableWidthApi,
+} from './useResizableWidth.js'
+
+export { ThemeProvider, useTheme } from './ThemeProvider.js'
+export { ThemeToggle } from './ThemeToggle.js'
+export { ThemeSettingsPage } from './ThemeSettingsPage.js'
+export { UserMenu } from './UserMenu.js'
+export { NotificationBell } from './NotificationBell.js'
+export { RenderHookSlot } from './RenderHookSlot.js'
+export { HeadHooks }      from './HeadHooks.js'
+
+// Re-export pure theme functions for client-safe usage (avoids importing main barrel which has server-only code)
+export { generateThemeCSS } from '../theme/generate-css.js'
+export { resolveTheme } from '../theme/resolve.js'
+
+// Backwards compat
+export { AppShell as AdminShell, type AppShellProps as AdminShellProps } from './AppShell.js'