@pilotiq/pilotiq 0.7.2 → 0.8.0

package/src/react/schemaRenderer/SectionRenderer.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react'
+import type { ElementMeta } from '../../schema/Element.js'
+import { readStoredFlag, writeStoredFlag } from '../persistedState.js'
+import { layoutClasses, resolveIcon } from './helpers.js'
+
+// ─── Section (stateful when collapsible) ────────────────────
+
+/**
+ * `Section` chrome with optional collapse + persisted open/closed state.
+ * Renders a card-style border, header (title / description / icon / badge
+ * / after-header actions), body, and the collapse toggle when enabled.
+ *
+ * `renderElement` is injected so the body can re-enter the main switch
+ * without creating a SchemaRenderer ↔ SectionRenderer import cycle.
+ */
+export function SectionRenderer({
+  el,
+  index,
+  renderElement,
+}: {
+  el:            ElementMeta
+  index:         number
+  renderElement: (el: ElementMeta, index: number) => React.ReactNode
+}) {
+  const title       = el['title']       ? String(el['title']) : undefined
+  const description = el['description'] ? String(el['description']) : undefined
+  const iconName    = el['icon']        ? String(el['icon']) : undefined
+  const badge       = el['badge']       ? String(el['badge']) : undefined
+  const columns     = Number(el['columns'] ?? 1)
+  const collapsible = Boolean(el['collapsible'])
+  const compact     = Boolean(el['compact'])
+  const dense       = Boolean(el['dense'])
+  const secondary   = Boolean(el['secondary'])
+  const afterHeader = (el['afterHeader'] as ElementMeta[] | undefined) ?? []
+  const persist     = Boolean(el['persistCollapsed'])
+  const persistKey  = el['persistKey']
+    ? `pilotiq.section.${String(el['persistKey'])}`
+    : title
+      ? `pilotiq.section.${title.toLowerCase().replace(/\s+/g, '-')}`
+      : undefined
+
+  const defaultCollapsed = Boolean(el['defaultCollapsed'])
+  const [collapsed, setCollapsed] = useState(defaultCollapsed)
+
+  // Plan #8 — persist open/closed state to localStorage. Hydration-safe:
+  // initial render uses `defaultCollapsed`; effect overrides from storage
+  // after mount so server + client first paint agree.
+  useEffect(() => {
+    if (!persist || !persistKey) return
+    setCollapsed(readStoredFlag(persistKey, defaultCollapsed))
+  }, [persist, persistKey, defaultCollapsed])
+
+  useEffect(() => {
+    if (!persist || !persistKey) return
+    writeStoredFlag(persistKey, collapsed)
+  }, [persist, persistKey, collapsed])
+
+  // `dense` tightens the inner spacing between the section's children
+  // (orthogonal to `compact`, which trims the section's outer padding /
+  // heading). gap-2 ≈ 8px vs gap-4 ≈ 16px.
+  const innerGap = dense ? 'gap-2' : 'gap-4'
+  const gridClass = columns === 2 ? `grid grid-cols-2 ${innerGap}` : columns === 3 ? `grid grid-cols-3 ${innerGap}` : `flex flex-col ${innerGap}`
+  const padding = compact ? 'p-3' : 'p-4'
+  const titleSize = compact ? 'text-sm' : 'text-base'
+  const Icon = resolveIcon(iconName)
+
+  // `secondary()` flips the section background to the muted token so it
+  // visually recedes beneath a primary section. The border thins to the
+  // same muted tone for the same reason — a sharp `border-input` line
+  // around a muted block looks like a typographic ledger rather than a
+  // grouping container.
+  const surfaceClass = secondary ? 'bg-muted/40 border-muted' : 'bg-card'
+
+  return (
+    <section
+      key={index}
+      className={`flex flex-col ${compact ? 'gap-2' : 'gap-3'} rounded-lg border ${surfaceClass} ${padding} ${layoutClasses(el)}`.trim()}
+    >
+      {(title || description || collapsible || badge || afterHeader.length > 0) && (
+        <header className="flex items-start justify-between gap-2">
+          <div className="flex items-start gap-2">
+            {Icon && <Icon className="size-4 mt-0.5 text-muted-foreground" aria-hidden="true" />}
+            <div>
+              <div className="flex items-center gap-2">
+                {title && <h3 className={`${titleSize} font-semibold`}>{title}</h3>}
+                {badge && (
+                  <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+                    {badge}
+                  </span>
+                )}
+              </div>
+              {description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            {afterHeader.length > 0 && (
+              <div className="flex items-center gap-1">
+                {afterHeader.map((a, i) => renderElement(a, i))}
+              </div>
+            )}
+            {collapsible && (
+              <button
+                type="button"
+                onClick={() => setCollapsed(c => !c)}
+                className="text-xs text-muted-foreground hover:text-foreground"
+              >
+                {collapsed ? 'Expand' : 'Collapse'}
+              </button>
+            )}
+          </div>
+        </header>
+      )}
+      {!collapsed && el.children && el.children.length > 0 && (
+        <div className={gridClass}>
+          {el.children.map((c, i) => renderElement(c, i))}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/react/schemaRenderer/SimpleElements.tsx

@@ -0,0 +1,306 @@
+import React from 'react'
+import type { ElementMeta } from '../../schema/Element.js'
+import {
+  BADGE_COLOR_CLASSES,
+  COLUMN_COLOR_CLASSES,
+  TEXT_COLOR_CLASSES,
+  TEXT_SIZE_CLASSES,
+  TEXT_WEIGHT_CLASSES,
+} from './constants.js'
+import { layoutClasses, renderChildren, resolveIcon } from './helpers.js'
+
+/** Stateless leaf renderers — every element here is a pure function of
+ *  its meta. Cases that own children defer back to the caller's
+ *  `renderElement` via `deps.renderElement`. Cases that mount Action
+ *  triggers in header / footer slots defer to `deps.renderActionLike`.
+ *
+ *  `renderSimpleElement` returns `null` only when the type is one of the
+ *  handled leaves and resolves to no output (e.g. `icon` with no
+ *  registered name). For unknown types it returns the sentinel
+ *  `undefined` so the caller falls through to the rest of its switch. */
+
+export interface SimpleElementDeps {
+  /** Recurse into a child element. Injected to avoid the cycle with
+   *  SchemaRenderer's main dispatch. */
+  renderElement: (el: ElementMeta, index: number) => React.ReactNode
+  /** Render an action / actionGroup / slotComponent meta as a button or
+   *  trigger. Used by `heading` and `emptyState` for their header /
+   *  footer action slots. */
+  renderActionLike: (el: ElementMeta, index: number) => React.ReactNode
+}
+
+/** Render the `text` element. Hot path — pulled out so the `case 'text'`
+ *  branch in the main switch stays a one-liner. */
+function renderText(el: ElementMeta, index: number): React.ReactNode {
+  const content = String(el['content'] ?? '')
+  const color   = el['color']  ? String(el['color'])  : undefined
+  const size    = el['size']   ? String(el['size'])   : undefined
+  const weight  = el['weight'] ? String(el['weight']) : undefined
+  const isBadge = el['badge'] === true
+
+  if (isBadge) {
+    const badgeKey = el['badgeColor'] ? String(el['badgeColor']) : 'gray'
+    const cls      = BADGE_COLOR_CLASSES[badgeKey] ?? BADGE_COLOR_CLASSES['gray']
+    return (
+      <span
+        key={index}
+        className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}
+      >
+        {content}
+      </span>
+    )
+  }
+
+  // Defaults match the previous bare `<p>` for back-compat: text-sm + muted.
+  const sizeCls   = size   ? (TEXT_SIZE_CLASSES[size]     ?? '') : 'text-sm'
+  const colorCls  = color  ? (TEXT_COLOR_CLASSES[color]   ?? '') : 'text-muted-foreground'
+  const weightCls = weight ? (TEXT_WEIGHT_CLASSES[weight] ?? '') : ''
+  return (
+    <p key={index} className={`${sizeCls} ${colorCls} ${weightCls}`.trim()}>
+      {content}
+    </p>
+  )
+}
+
+/** Dispatch helper for stateless leaf + layout-primitive element types.
+ *  Returns `undefined` when the type isn't handled here, letting the
+ *  caller fall through to its remaining switch arms. */
+export function renderSimpleElement(
+  el: ElementMeta,
+  index: number,
+  deps: SimpleElementDeps,
+): React.ReactNode | undefined {
+  const { renderElement, renderActionLike } = deps
+
+  switch (el.type) {
+    case 'text':
+      return renderText(el, index)
+
+    case 'image': {
+      const url    = String(el['url'] ?? '')
+      const alt    = String(el['alt'] ?? '')
+      const width  = el['width']  as number | undefined
+      const height = el['height'] as number | undefined
+      const shape  = String(el['shape'] ?? 'square')
+      const shapeCls = shape === 'circle' ? 'rounded-full' : shape === 'rounded' ? 'rounded-md' : ''
+      return (
+        <img
+          key={index}
+          src={url}
+          alt={alt}
+          {...(width  !== undefined ? { width }  : {})}
+          {...(height !== undefined ? { height } : {})}
+          className={`inline-block object-cover ${shapeCls}`}
+        />
+      )
+    }
+
+    case 'icon': {
+      const name  = el['name'] ? String(el['name']) : undefined
+      const size  = (el['size'] as number | undefined) ?? 16
+      const color = String(el['color'] ?? 'default')
+      const label = el['label'] ? String(el['label']) : undefined
+      const Cmp = resolveIcon(name)
+      if (!Cmp) return null
+      const colorClass = COLUMN_COLOR_CLASSES[color] ?? ''
+      return (
+        <Cmp
+          key={index}
+          className={`inline ${colorClass}`}
+          {...(label ? { 'aria-label': label } : { 'aria-hidden': true })}
+          style={{ width: size, height: size }}
+        />
+      )
+    }
+
+    case 'markdown':
+    case 'html': {
+      const html  = String(el['html']  ?? '')
+      const prose = el['prose'] !== false
+      const size  = el['size'] ? String(el['size']) : undefined
+      const proseCls = prose
+        ? `prose max-w-none ${size === 'sm' ? 'prose-sm' : size === 'lg' ? 'prose-lg' : ''}`.trim()
+        : ''
+      return (
+        <div
+          key={index}
+          className={proseCls || undefined}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      )
+    }
+
+    case 'heading': {
+      const level = (el['level'] as number) ?? 1
+      const content = String(el['content'] ?? '')
+      const description = el['description'] ? String(el['description']) : undefined
+      const headerActions = (el.children ?? []).filter(c => c.type === 'action' || c.type === 'actionGroup' || c.type === 'slotComponent')
+      const Tag = level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3'
+      const sizes = { 1: 'text-2xl', 2: 'text-xl', 3: 'text-lg' } as const
+      const titleBlock = (
+        <div>
+          <Tag className={`${sizes[level as 1 | 2 | 3]} font-bold tracking-tight`}>
+            {content}
+          </Tag>
+          {description && (
+            <p className="text-sm text-muted-foreground mt-1">{description}</p>
+          )}
+        </div>
+      )
+      if (headerActions.length === 0) {
+        return <div key={index}>{titleBlock}</div>
+      }
+      return (
+        <div key={index} className="flex items-start justify-between gap-4">
+          {titleBlock}
+          <div className="flex items-center gap-2 shrink-0">
+            {headerActions.map((a, i) => renderActionLike(a, i))}
+          </div>
+        </div>
+      )
+    }
+
+    case 'emptyState': {
+      const heading     = String(el['heading'] ?? '')
+      const description = el['description'] ? String(el['description']) : undefined
+      const iconName    = el['icon']        ? String(el['icon'])        : undefined
+      const contained   = el['contained'] !== false
+      const Icon        = iconName ? resolveIcon(iconName) : undefined
+      const footer      = (el.children ?? []).filter(c => c.type === 'action' || c.type === 'actionGroup' || c.type === 'slotComponent')
+      const wrapper = contained
+        ? 'rounded-lg border border-border bg-card text-card-foreground py-12 px-6'
+        : 'py-8'
+      return (
+        <div key={index} className={`${wrapper} flex flex-col items-center text-center gap-3`}>
+          {Icon && <Icon className="size-10 text-muted-foreground" aria-hidden="true" />}
+          <h3 className="text-lg font-semibold">{heading}</h3>
+          {description && <p className="text-sm text-muted-foreground max-w-md">{description}</p>}
+          {footer.length > 0 && (
+            <div className="flex items-center gap-2 mt-2">
+              {footer.map((a, i) => renderActionLike(a, i))}
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    case 'divider': {
+      const label = el['label'] ? String(el['label']) : undefined
+      return label
+        ? <div key={index} className="relative py-2">
+            <div className="absolute inset-0 flex items-center"><span className="w-full border-t border-border" /></div>
+            <div className="relative flex justify-center"><span className="bg-background px-2 text-xs text-muted-foreground">{label}</span></div>
+          </div>
+        : <hr key={index} className="border-border" />
+    }
+
+    case 'unorderedList': {
+      const items   = (el['items'] as unknown[] | undefined) ?? []
+      const color   = el['color']  ? String(el['color'])  : undefined
+      const size    = el['size']   ? String(el['size'])   : undefined
+      const weight  = el['weight'] ? String(el['weight']) : undefined
+      const sizeCls   = size   ? (TEXT_SIZE_CLASSES[size]     ?? '') : 'text-sm'
+      const colorCls  = color  ? (TEXT_COLOR_CLASSES[color]   ?? '') : ''
+      const weightCls = weight ? (TEXT_WEIGHT_CLASSES[weight] ?? '') : ''
+      return (
+        <ul key={index} className={`list-disc list-inside space-y-1 ${sizeCls} ${colorCls} ${weightCls}`.trim()}>
+          {items.map((item, i) => (
+            <li key={i}>{String(item)}</li>
+          ))}
+        </ul>
+      )
+    }
+
+    case 'card': {
+      const title = el['title'] ? String(el['title']) : undefined
+      const description = el['description'] ? String(el['description']) : undefined
+      return (
+        <div key={index} className="rounded-xl border bg-card p-6 shadow-sm">
+          {title && <h3 className="font-semibold mb-1">{title}</h3>}
+          {description && <p className="text-sm text-muted-foreground mb-4">{description}</p>}
+          {renderChildren(el.children, 'gap-4', renderElement)}
+        </div>
+      )
+    }
+
+    case 'grid': {
+      const columns = Math.max(1, Math.min(12, Number(el['columns'] ?? 2)))
+      const gapPx   = el['gap'] !== undefined ? `${Number(el['gap'])}px` : undefined
+      return (
+        <div
+          key={index}
+          className={`grid gap-4 ${layoutClasses(el)}`.trim()}
+          style={{
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            ...(gapPx ? { gap: gapPx } : {}),
+          }}
+        >
+          {(el.children ?? []).map((c, i) => renderElement(c, i))}
+        </div>
+      )
+    }
+
+    case 'group': {
+      const layout = layoutClasses(el)
+      return (
+        <div key={index} className={layout || undefined}>
+          {renderChildren(el.children, 'gap-4', renderElement)}
+        </div>
+      )
+    }
+
+    case 'split': {
+      const from = el['from'] === 'left' ? 'left' : 'right'
+      const gap  = Math.max(0, Math.min(12, Number(el['gap'] ?? 6)))
+      const children = el.children ?? []
+      // Find the explicit aside child first; fall back to "second child is
+      // aside" so terse Split.make().schema([main, aside]) still works.
+      let asideIdx = children.findIndex(c => c['aside'] === true)
+      if (asideIdx === -1 && children.length >= 2) asideIdx = 1
+      const mainChildren  = children.filter((_, i) => i !== asideIdx)
+      const asideChild    = asideIdx >= 0 ? children[asideIdx] : undefined
+
+      const orderClasses  = from === 'left'
+        ? { aside: '@md:order-first', main: '@md:order-last' }
+        : { aside: '@md:order-last',  main: '@md:order-first' }
+
+      return (
+        <div
+          key={index}
+          className={`@container flex flex-col @md:flex-row gap-${gap} ${layoutClasses(el)}`.trim()}
+        >
+          <div className={`flex flex-col gap-4 flex-1 min-w-0 ${orderClasses.main}`}>
+            {mainChildren.map((c, i) => renderElement(c, i))}
+          </div>
+          {asideChild && (
+            <aside className={`flex flex-col gap-4 @md:w-80 @md:shrink-0 ${orderClasses.aside}`}>
+              {renderElement(asideChild, asideIdx)}
+            </aside>
+          )}
+        </div>
+      )
+    }
+
+    case 'fieldset': {
+      const label   = String(el['label'] ?? '')
+      const columns = Math.max(1, Math.min(3, Number(el['columns'] ?? 1)))
+      const gridStyle = columns > 1
+        ? { display: 'grid', gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap: '1rem' }
+        : undefined
+      return (
+        <fieldset
+          key={index}
+          className={`rounded-md border border-border px-4 pt-3 pb-4 ${layoutClasses(el)}`.trim()}
+        >
+          {label && <legend className="px-1 text-xs font-medium text-muted-foreground">{label}</legend>}
+          <div className={columns === 1 ? 'flex flex-col gap-3' : undefined} style={gridStyle}>
+            {(el.children ?? []).map((c, i) => renderElement(c, i))}
+          </div>
+        </fieldset>
+      )
+    }
+
+    default:
+      return undefined
+  }
+}

package/src/react/schemaRenderer/TabsRenderer.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import type { ElementMeta } from '../../schema/Element.js'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs.js'
+import { renderChildren } from './helpers.js'
+
+/**
+ * Top-level `Tabs` element. Variants:
+ * - `'pills'` (default) — uses the shadcn Tabs primitive's stock chrome.
+ * - `'underline'` — flat tab strip with a bottom border and per-tab
+ *    underline on selection.
+ *
+ * `renderElement` is injected for the body content of each tab so the
+ * renderer can recurse without re-importing the main switch.
+ */
+export function TabsRenderer({
+  el,
+  index,
+  renderElement,
+}: {
+  el:            ElementMeta
+  index:         number
+  renderElement: (el: ElementMeta, index: number) => React.ReactNode
+}) {
+  const tabs = (el.children ?? []).filter(c => c.type === 'tab')
+  if (tabs.length === 0) return null
+
+  const variant   = el['variant'] === 'underline' ? 'underline' : 'pills'
+  const tabValues = tabs.map((_, i) => `tab-${i}`)
+  const defaultValue = tabValues[0]!
+
+  // Underline variant overrides the primitive's pill chrome with a bottom
+  // border on the list and per-trigger underline-on-selected. No
+  // `<TabsIndicator>` is rendered, so there's no sliding pill to hide.
+  const listClass = variant === 'underline'
+    ? 'relative flex h-auto w-fit justify-start gap-0 rounded-none bg-transparent p-0 text-muted-foreground border-b border-border'
+    : undefined
+  const triggerClass = variant === 'underline'
+    ? 'rounded-none border-0 border-b-2 border-transparent bg-transparent px-4 py-2 text-sm font-medium -mb-px data-[active]:border-primary data-[active]:text-foreground data-[active]:bg-transparent data-[active]:shadow-none'
+    : undefined
+
+  return (
+    <Tabs key={index} defaultValue={defaultValue}>
+      <TabsList className={listClass}>
+        {tabs.map((tab, i) => (
+          <TabsTrigger key={i} value={tabValues[i]!} className={triggerClass}>
+            {String(tab['label'] ?? '')}
+            {tab['badge'] ? (
+              <span className="ml-2 text-xs px-1.5 py-0.5 rounded-full bg-muted">
+                {String(tab['badge'])}
+              </span>
+            ) : null}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab, i) => (
+        <TabsContent key={i} value={tabValues[i]!} className="pt-2">
+          {renderChildren(tab['children'] as ElementMeta[] | undefined, 'gap-4', renderElement)}
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+}