npm - @jogak/ui - Versions diffs - 0.1.0-alpha.0 → 0.1.0-alpha.10.2 - Mend

@jogak/ui 0.1.0-alpha.0 → 0.1.0-alpha.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/CHANGELOG.md +118 -0
package/README.md +201 -15
package/dist/app/App.d.ts +24 -1
package/dist/components/Preview/IframeMount.d.ts +35 -0
package/dist/components/Preview/ShadowMount.d.ts +25 -0
package/dist/components/Preview/index.d.ts +19 -2
package/dist/host/index.cjs +1 -0
package/dist/host/index.d.ts +38 -1
package/dist/host/index.mjs +40 -34
package/dist/index.cjs +1 -0
package/dist/index.mjs +726 -901
package/package.json +15 -6
package/preview-frame.html +17 -0
package/src/app/App.tsx +189 -0
package/src/app/main.tsx +31 -0
package/src/app/preview-frame.tsx +61 -0
package/src/components/Actions/index.tsx +92 -0
package/src/components/Controls/index.tsx +190 -0
package/src/components/Preview/IframeMount.tsx +101 -0
package/src/components/Preview/ShadowMount.tsx +57 -0
package/src/components/Preview/index.tsx +766 -0
package/src/components/Sidebar/index.tsx +285 -0
package/src/hooks/useRegistry.ts +22 -0
package/src/index.ts +12 -0
package/src/styles/jogak.css +128 -0
package/src/vite-env.d.ts +30 -0
package/dist/host/index.js +0 -1
package/dist/index.js +0 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jogak/ui",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.10.2",
   "description": "Showcase viewer UI for Jogak — Sidebar / Preview / Controls / Actions and the JogakApp shell.",
   "keywords": [
     "jogak",
@@ -24,24 +24,31 @@
   },
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.cjs"
     },
     "./host": {
       "types": "./dist/host/index.d.ts",
       "import": "./dist/host/index.mjs",
-      "require": "./dist/host/index.js"
+      "require": "./dist/host/index.cjs"
     }
   },
   "files": [
     "dist",
     "index.html",
+    "preview-frame.html",
+    "src/app",
+    "src/components",
+    "src/hooks",
+    "src/styles",
+    "src/index.ts",
+    "src/vite-env.d.ts",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
@@ -54,9 +61,11 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
-    "@jogak/core": "0.1.0-alpha.0",
-    "@jogak/react": "0.1.0-alpha.0"
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@jogak/core": "0.1.0-alpha.10.2"
   },
   "devDependencies": {
     "@types/node": "^20.14.0",

package/preview-frame.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>jogak preview</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; }
+      body { font-family: system-ui, sans-serif; }
+    </style>
+  </head>
+  <body>
+    <div id="jogak-preview-root"></div>
+    <script type="module" src="/src/app/preview-frame.tsx"></script>
+  </body>
+</html>

package/src/app/App.tsx ADDED Viewed

@@ -0,0 +1,189 @@
+import { useState, useCallback, useEffect, useMemo } from 'react'
+import { ComponentRegistry, defaultRegistry } from '@jogak/core'
+import type { RegistryEntry, RegistryEntryMeta } from '@jogak/core'
+import { JogakProvider } from '@jogak/core/renderers/react'
+import { Sidebar } from '../components/Sidebar/index.js'
+import { Preview } from '../components/Preview/index.js'
+import type { ReactElement } from 'react'
+/**
+ * `JogakApp` props.
+ *
+ *  - `entries`: 기존 — eager 모드. 정적 빌드 / 테스트용. 새 `ComponentRegistry`에 즉시 register.
+ *  - `metas`  : NEW — lazy 모드. `defaultRegistry`를 그대로 사용하면서 metas를 `registerMeta`로 등록.
+ *  - 둘 다 미지정 → `defaultRegistry` 그대로 사용 (인덱스 가상모듈 `import 'virtual:jogak'`이 채웠다고 가정).
+ *  - 둘 다 지정 → console.warn 후 `entries` 우선 (eager 우선, breaking 회피).
+ *
+ * 외부 호환을 위해 `entries`는 optional로만 변경되며 나머지 시그니처는 그대로 유지된다.
+ */
+export interface JogakAppProps {
+  readonly entries?: readonly RegistryEntry[]
+  readonly metas?: readonly RegistryEntryMeta[]
+  readonly codeTheme?: string
+  /**
+   * 알파.8: Preview 영역 격리 모드. default `'iframe'`.
+   *
+   * - `'iframe'` (default) — 사용자 vite 정상 client(iframe)에 마운트. 사용자 utility 정상 컴파일.
+   * - `'shadow'` (deprecated) — ShadowRoot 안에 마운트. 사용자 utility 미적용.
+   * - `'none'` (deprecated) — chrome 같은 document에 렌더. 알파.6까지의 동작.
+   *
+   * 자세한 트레이드오프는 `@jogak/ui` README의 "previewIsolation 사용 가이드" 참조.
+   */
+  readonly previewIsolation?: 'none' | 'shadow' | 'iframe'
+  /**
+   * 알파.9: 어댑터 dev URL. iframe `src` base.
+   * 빈 문자열 시 fallback (jogak SPA Vite scope의 preview-frame.tsx).
+   */
+  readonly userPreviewUrl?: string
+  /**
+   * 알파.9: iframe entry path (예: `/__jogak_preview__/index.html`).
+   */
+  readonly previewEntryPath?: string
+  /**
+   * @deprecated 알파.10 제거 예정. `userPreviewUrl` 사용.
+   */
+  readonly userViteUrl?: string
+}
+function readUrlParams(): { entryId: string; jogakName: string | null } | null {
+  if (typeof window === 'undefined') return null
+  const params = new URLSearchParams(window.location.search)
+  const entryId = params.get('entry')
+  if (entryId === null) return null
+  const jogakName = params.get('jogak')
+  return { entryId, jogakName }
+}
+function pushUrl(entryId: string, jogakName: string): void {
+  const params = new URLSearchParams()
+  params.set('entry', entryId)
+  params.set('jogak', jogakName)
+  window.history.pushState({}, '', `?${params.toString()}`)
+}
+export function JogakApp({
+  entries,
+  metas,
+  codeTheme = 'vsDark',
+  previewIsolation = 'iframe',
+  userPreviewUrl = '',
+  previewEntryPath = '/__jogak_preview__/index.html',
+  userViteUrl,
+}: JogakAppProps = {}): ReactElement {
+  // 알파.9: userViteUrl alias (deprecated). userPreviewUrl 우선.
+  const resolvedPreviewUrl = userPreviewUrl !== '' ? userPreviewUrl : (userViteUrl ?? '')
+  // ── 4가지 모드 결정 (계약 §5.2) ─────────────────────────────────────
+  // 1) entries가 주어지면: 새 ComponentRegistry에 register (eager, 기존 동작)
+  // 2) metas만 주어지면: defaultRegistry 사용 + metas를 registerMeta로 등록
+  // 3) 둘 다 미지정: defaultRegistry 그대로 (인덱스 가상모듈이 채웠다고 가정)
+  // 4) 둘 다 지정: warn 후 entries 우선 (breaking 회피)
+  const registry = useMemo(() => {
+    if (entries !== undefined) {
+      if (metas !== undefined) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[jogak] JogakApp received both `entries` and `metas` — `entries` (eager) takes precedence.',
+        )
+      }
+      const r = new ComponentRegistry()
+      for (const entry of entries) r.register(entry)
+      return r
+    }
+    if (metas !== undefined) {
+      for (const meta of metas) defaultRegistry.registerMeta(meta)
+    }
+    return defaultRegistry
+  }, [entries, metas])
+  // ── URL deep link 초기 상태 (계약 §5.5) ──────────────────────────────
+  // ?entry=<id>&jogak=<name>로 진입 시 그 entry로 마운트. jogak 미지정이면
+  // 사이드바가 첫 jogak을 자동 선택하지 않으므로 entry hydrate 후 보정한다.
+  const initial = useMemo(() => readUrlParams(), [])
+  const [selectedEntryId, setSelectedEntryId] = useState<string | null>(
+    initial?.entryId ?? null,
+  )
+  const [selectedJogakName, setSelectedJogakName] = useState<string | null>(
+    initial?.jogakName ?? null,
+  )
+  const [overrideArgs, setOverrideArgs] = useState<Readonly<Record<string, unknown>>>({})
+  useEffect(() => {
+    const handlePopState = (): void => {
+      const parsed = readUrlParams()
+      if (parsed !== null) {
+        setSelectedEntryId(parsed.entryId)
+        setSelectedJogakName(parsed.jogakName)
+        setOverrideArgs({})
+      } else {
+        setSelectedEntryId(null)
+        setSelectedJogakName(null)
+      }
+    }
+    window.addEventListener('popstate', handlePopState)
+    return () => { window.removeEventListener('popstate', handlePopState) }
+  }, [])
+  const handleSelect = useCallback((entryId: string, jogakName: string) => {
+    setSelectedEntryId(entryId)
+    setSelectedJogakName(jogakName)
+    setOverrideArgs({})
+    pushUrl(entryId, jogakName)
+  }, [])
+  const handleResolveJogak = useCallback((entryId: string, jogakName: string) => {
+    // Preview가 entry를 hydrate한 뒤 jogakName이 비어있을 때 첫 jogak로 보정.
+    setSelectedEntryId((prevId) => (prevId === entryId ? entryId : prevId))
+    setSelectedJogakName((prev) => prev ?? jogakName)
+    if (typeof window !== 'undefined') {
+      // URL에 jogak이 누락된 경우만 보정 (사용자 history는 건드리지 않음 — replaceState).
+      const params = new URLSearchParams(window.location.search)
+      if (params.get('entry') === entryId && params.get('jogak') === null) {
+        params.set('jogak', jogakName)
+        window.history.replaceState({}, '', `?${params.toString()}`)
+      }
+    }
+  }, [])
+  const handleArgChange = useCallback((key: string, value: unknown) => {
+    setOverrideArgs((prev) => ({ ...prev, [key]: value }))
+  }, [])
+  const handleReset = useCallback(() => {
+    setOverrideArgs({})
+  }, [])
+  return (
+    <JogakProvider registry={registry}>
+      <div
+        data-jogak-shell
+        className="jogak:grid jogak:grid-cols-[260px_1fr] jogak:h-dvh jogak:overflow-hidden"
+      >
+        <Sidebar
+          selectedEntryId={selectedEntryId}
+          selectedJogakName={selectedJogakName}
+          onSelect={handleSelect}
+        />
+        <main className="jogak:overflow-hidden jogak:min-h-0">
+          {selectedEntryId !== null ? (
+            <Preview
+              entryId={selectedEntryId}
+              jogakName={selectedJogakName}
+              overrideArgs={overrideArgs}
+              onArgChange={handleArgChange}
+              onReset={handleReset}
+              codeTheme={codeTheme}
+              onResolveJogak={handleResolveJogak}
+              previewIsolation={previewIsolation}
+              userPreviewUrl={resolvedPreviewUrl}
+              previewEntryPath={previewEntryPath}
+            />
+          ) : (
+            <div className="jogak:flex jogak:items-center jogak:justify-center jogak:h-full jogak:text-[var(--jogak-color-fg-subtle)]">
+              Select a component from the sidebar
+            </div>
+          )}
+        </main>
+      </div>
+    </JogakProvider>
+  )
+}

package/src/app/main.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import 'virtual:jogak'
+import {
+  _jogakCodeTheme,
+  _jogakPreviewIsolation,
+  _jogakUserPreviewUrl,
+  _jogakPreviewEntryPath,
+} from 'virtual:jogak'
+import '../styles/jogak.css'
+import { JogakApp } from './App.js'
+// 알파.9: 사용자 globalCss는 어댑터 scope(iframe entry)에서 처리되므로 jogak SPA outer
+// document에는 import하지 않는다. 'none' 모드(deprecated)에서만 outer inject.
+if (_jogakPreviewIsolation === 'none') {
+  await import('virtual:jogak/global-css')
+}
+const rootEl = document.getElementById('root')
+if (rootEl === null) throw new Error('#root element not found')
+createRoot(rootEl).render(
+  <StrictMode>
+    <JogakApp
+      codeTheme={_jogakCodeTheme}
+      previewIsolation={_jogakPreviewIsolation}
+      userPreviewUrl={_jogakUserPreviewUrl}
+      previewEntryPath={_jogakPreviewEntryPath}
+    />
+  </StrictMode>,
+)

package/src/app/preview-frame.tsx ADDED Viewed

@@ -0,0 +1,61 @@
+/**
+ * 알파.9: standalone-adapter 또는 fallback 시 사용되는 same-origin iframe entry.
+ *
+ * `IframeMount`는 알파.9에서 postMessage 프로토콜로 통일됐다 (cross-origin 어댑터와 동일).
+ * preview-frame.tsx도 같은 프로토콜을 따라야 한다 — 부모는 `jogak:setProps` 메시지를,
+ * iframe은 `jogak:ready` / `jogak:rendered` / `jogak:error`를 emit한다.
+ *
+ * jogak host vite scope에서 동작하므로 `virtual:jogak` (registry metas + entry loader)와
+ * `virtual:jogak/global-css` (사용자 globalCss) 가상 모듈을 그대로 사용한다.
+ */
+import { reactAdapter } from '@jogak/core/renderers/react'
+import { defaultRegistry } from '@jogak/core'
+import 'virtual:jogak'
+import 'virtual:jogak/global-css'
+const rootEl = document.getElementById('jogak-preview-root')
+if (rootEl === null) throw new Error('#jogak-preview-root not found')
+let currentContainer: HTMLDivElement | null = null
+async function renderEntry(
+  entryId: string,
+  args: Readonly<Record<string, unknown>>,
+): Promise<void> {
+  const entry = await defaultRegistry.requestEntry(entryId)
+  if (currentContainer === null) {
+    currentContainer = document.createElement('div')
+    rootEl?.replaceChildren(currentContainer)
+  }
+  reactAdapter.render(entry, args, currentContainer)
+}
+function unmount(): void {
+  if (currentContainer !== null) {
+    reactAdapter.unmount(currentContainer)
+    currentContainer = null
+  }
+}
+window.addEventListener('message', (event: MessageEvent) => {
+  const data = event.data as { type?: unknown; entryId?: unknown; args?: unknown } | null
+  if (data === null || typeof data !== 'object') return
+  if (data.type === 'jogak:setProps' && typeof data.entryId === 'string') {
+    const args = (data.args ?? {}) as Readonly<Record<string, unknown>>
+    void renderEntry(data.entryId, args)
+      .then(() => {
+        window.parent.postMessage(
+          { type: 'jogak:rendered', entryId: data.entryId },
+          '*',
+        )
+      })
+      .catch((err: unknown) => {
+        const message = err instanceof Error ? err.message : String(err)
+        window.parent.postMessage({ type: 'jogak:error', message }, '*')
+      })
+  } else if (data.type === 'jogak:unmount') {
+    unmount()
+  }
+})
+window.parent.postMessage({ type: 'jogak:ready' }, '*')

package/src/components/Actions/index.tsx ADDED Viewed

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react'
+import type { ReactElement } from 'react'
+import clsx from 'clsx'
+import { defaultActionChannel } from '@jogak/core'
+import type { ActionLog } from '@jogak/core'
+function formatArgs(args: readonly unknown[]): string {
+  if (args.length === 0) return '()'
+  try {
+    return args
+      .map((arg) => {
+        if (arg === null) return 'null'
+        if (arg === undefined) return 'undefined'
+        if (typeof arg === 'function') return '[Function]'
+        if (typeof arg === 'object') {
+          const ctorName =
+            (arg as { constructor?: { name?: string } }).constructor?.name ?? 'Object'
+          if (ctorName !== 'Object' && ctorName !== 'Array') return `[${ctorName}]`
+          return JSON.stringify(arg)
+        }
+        return JSON.stringify(arg)
+      })
+      .join(', ')
+  } catch {
+    return '[unserializable]'
+  }
+}
+function formatTime(ts: number): string {
+  const d = new Date(ts)
+  const hh = d.getHours().toString().padStart(2, '0')
+  const mm = d.getMinutes().toString().padStart(2, '0')
+  const ss = d.getSeconds().toString().padStart(2, '0')
+  const ms = d.getMilliseconds().toString().padStart(3, '0')
+  return `${hh}:${mm}:${ss}.${ms}`
+}
+export function Actions(): ReactElement {
+  const [logs, setLogs] = useState<readonly ActionLog[]>(() => defaultActionChannel.getLogs())
+  useEffect(() => {
+    return defaultActionChannel.subscribe(setLogs)
+  }, [])
+  const isEmpty = logs.length === 0
+  return (
+    <div className="jogak:h-full jogak:flex jogak:flex-col">
+      <div className="jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)] jogak:flex jogak:items-center jogak:justify-between jogak:shrink-0">
+        <span>Actions {logs.length > 0 && `(${logs.length.toString()})`}</span>
+        <button
+          type="button"
+          onClick={() => { defaultActionChannel.clear() }}
+          disabled={isEmpty}
+          className={clsx(
+            'jogak:text-[10px] jogak:font-semibold jogak:px-2 jogak:py-0.5 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-sm)] jogak:bg-[var(--jogak-color-bg)] jogak:normal-case jogak:tracking-normal',
+            isEmpty
+              ? 'jogak:text-[var(--jogak-color-fg-subtle)] jogak:cursor-default'
+              : 'jogak:text-[var(--jogak-color-fg)] jogak:cursor-pointer',
+          )}
+        >
+          Clear
+        </button>
+      </div>
+      <div className="jogak:flex-1 jogak:overflow-auto">
+        {isEmpty ? (
+          <div className="jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px] jogak:leading-none">
+            함수 prop이 호출되면 여기에 기록됩니다
+          </div>
+        ) : (
+          <ul className="jogak:list-none jogak:m-0 jogak:p-0 jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px]">
+            {logs.map((log) => (
+              <li
+                key={log.id}
+                className="jogak:flex jogak:items-baseline jogak:gap-[10px] jogak:px-5 jogak:py-1.5 jogak:border-b jogak:border-[var(--jogak-color-border-muted)]"
+              >
+                <span className="jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[11px] jogak:min-w-[92px]">
+                  {formatTime(log.timestamp)}
+                </span>
+                <span className="jogak:text-[var(--jogak-color-violet)] jogak:font-semibold">{log.name}</span>
+                <span className="jogak:text-[var(--jogak-color-fg)] jogak:break-all jogak:flex-1">
+                  ({formatArgs(log.args)})
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/Controls/index.tsx ADDED Viewed

@@ -0,0 +1,190 @@
+import type { ReactElement, ChangeEvent } from 'react'
+import clsx from 'clsx'
+import type { ArgType } from '@jogak/core'
+export interface ControlsProps {
+  readonly args: Readonly<Record<string, unknown>>
+  readonly argTypes: Readonly<Record<string, ArgType>>
+  readonly onArgChange: (key: string, value: unknown) => void
+}
+type ControlKind = 'boolean' | 'number' | 'text' | 'select' | 'action' | 'json'
+function resolveControlKind(value: unknown, argType: ArgType | undefined): ControlKind {
+  const ctrl = argType?.control
+  const isAction = argType?.action !== undefined && argType.action !== false
+  const isFunctionType = argType?.type === 'function' || typeof value === 'function'
+  if (isAction || isFunctionType) return 'action'
+  if (ctrl === 'boolean' || typeof value === 'boolean') return 'boolean'
+  if (ctrl === 'number' || ctrl === 'range' || typeof value === 'number') return 'number'
+  if (
+    ctrl === 'select' ||
+    ctrl === 'radio' ||
+    (argType?.options !== undefined && argType.options.length > 0)
+  )
+    return 'select'
+  if (ctrl === 'text' || ctrl === 'color' || typeof value === 'string') return 'text'
+  return 'json'
+}
+interface ControlInputProps {
+  readonly argKey: string
+  readonly value: unknown
+  readonly argType: ArgType | undefined
+  readonly onArgChange: (key: string, value: unknown) => void
+}
+/**
+ * input/select 공용 className — §6.10 의 inputClass 상수.
+ *
+ * `<select>` 에 `appearance-none` 을 일부러 적용하지 않는다 (UA dropdown 화살표 보존, §3.5).
+ * alpha.4 baseline 이 UA 기본 select 화살표를 캡처한 상태라 픽셀 동등을 위해 유지.
+ */
+const inputClass =
+  'jogak:px-2 jogak:py-1 ' +
+  'jogak:border jogak:border-[var(--jogak-color-border-strong)] ' +
+  'jogak:rounded-[var(--jogak-radius-md)] ' +
+  'jogak:text-[13px] ' +
+  'jogak:w-full jogak:max-w-[280px]'
+/** th className 상수 — Controls table header cell. */
+const thClass =
+  'jogak:px-5 jogak:py-1.5 ' +
+  'jogak:text-left ' +
+  'jogak:text-[var(--jogak-color-fg-muted)] ' +
+  'jogak:font-medium ' +
+  'jogak:text-[12px] ' +
+  'jogak:border-b jogak:border-[var(--jogak-color-border)]'
+/** td className 상수 — Controls table body cell. */
+const tdClass =
+  'jogak:px-5 jogak:py-2 ' +
+  'jogak:align-middle ' +
+  'jogak:border-b jogak:border-[var(--jogak-color-border-muted)]'
+function ControlInput({ argKey, value, argType, onArgChange }: ControlInputProps): ReactElement {
+  const kind = resolveControlKind(value, argType)
+  switch (kind) {
+    case 'boolean':
+      return (
+        <input
+          type="checkbox"
+          checked={value === true}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            onArgChange(argKey, e.target.checked)
+          }}
+          className="jogak:cursor-pointer jogak:w-4 jogak:h-4 jogak:accent-[var(--jogak-color-accent)]"
+        />
+      )
+    case 'number':
+      return (
+        <input
+          type="number"
+          value={typeof value === 'number' ? value : ''}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            onArgChange(argKey, e.target.valueAsNumber)
+          }}
+          className={inputClass}
+        />
+      )
+    case 'select': {
+      const options = argType?.options ?? []
+      return (
+        <select
+          value={String(value ?? '')}
+          onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+            onArgChange(argKey, e.target.value)
+          }}
+          className={inputClass}
+        >
+          {options.map((opt) => (
+            <option key={String(opt)} value={String(opt)}>
+              {String(opt)}
+            </option>
+          ))}
+        </select>
+      )
+    }
+    case 'text':
+      return (
+        <input
+          type="text"
+          value={typeof value === 'string' ? value : String(value ?? '')}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            onArgChange(argKey, e.target.value)
+          }}
+          className={inputClass}
+        />
+      )
+    case 'action':
+      return (
+        <span className="jogak:inline-block jogak:px-2 jogak:py-0.5 jogak:text-[11px] jogak:font-semibold jogak:text-[var(--jogak-color-violet)] jogak:bg-[var(--jogak-color-violet-bg)] jogak:border jogak:border-[var(--jogak-color-violet-border)] jogak:rounded-[var(--jogak-radius-md)] jogak:font-[family-name:var(--jogak-font-mono)] jogak:leading-none">
+          (action)
+        </span>
+      )
+    case 'json':
+      return (
+        <code className="jogak:text-[12px] jogak:text-[var(--jogak-color-fg-muted)] jogak:font-[family-name:var(--jogak-font-mono)]">
+          {JSON.stringify(value)}
+        </code>
+      )
+  }
+}
+export function Controls({ args, argTypes, onArgChange }: ControlsProps): ReactElement {
+  const keys = Array.from(new Set([...Object.keys(args), ...Object.keys(argTypes)]))
+  const entries = keys.map((k) => [k, args[k]] as const)
+  return (
+    <div className="jogak:border-t-2 jogak:border-[var(--jogak-color-border)]">
+      <div className="jogak:px-5 jogak:py-1.5 jogak:text-[11px] jogak:font-bold jogak:text-[var(--jogak-color-fg-subtle)] jogak:uppercase jogak:tracking-[0.08em] jogak:border-b jogak:border-[var(--jogak-color-border)] jogak:bg-[var(--jogak-color-bg-subtle)]">
+        Controls
+      </div>
+      {entries.length === 0 ? (
+        <div className="jogak:px-5 jogak:py-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]">
+          No args defined
+        </div>
+      ) : (
+        <table className="jogak:w-full jogak:border-collapse jogak:text-[13px]">
+          <thead>
+            <tr>
+              <th className={thClass}>Name</th>
+              <th className={thClass}>Control</th>
+              <th className={thClass}>Description</th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map(([key, value]) => {
+              const argType = argTypes[key]
+              return (
+                <tr key={key}>
+                  <td
+                    className={clsx(
+                      tdClass,
+                      'jogak:font-[family-name:var(--jogak-font-mono)] jogak:text-[12px] jogak:text-[var(--jogak-color-fg)] jogak:whitespace-nowrap',
+                    )}
+                  >
+                    {key}
+                  </td>
+                  <td className={tdClass}>
+                    <ControlInput
+                      argKey={key}
+                      value={value}
+                      argType={argType}
+                      onArgChange={onArgChange}
+                    />
+                  </td>
+                  <td className={clsx(tdClass, 'jogak:text-[var(--jogak-color-fg-subtle)]')}>
+                    {argType?.description ?? ''}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}