@chronista-club/creoui-editor-host 0.5.1

package/README.md

@@ -0,0 +1,381 @@
+# @chronista-club/creoui-editor-host
+
+creoui — Editor Mode reference runtime for SolidJS。**Live design surface** として、デザイナ / エンジニア / AI agent が同じ app を rebuild なしで mutate できる paradigm を提供。
+
+- **Target × Control 2 軸直交設計** + `bind()` 1 本で field を宣言
+- **DevTools Console REPL** (`window.creoEditor.slider(...)` で即 slider 追加)
+- **DOM auto-discover** (既知 CSS 変数を自動 bind)
+- **URL shareable state** (`#creo=...` で URL 1 本で共有)
+- **Cross-tab sync** (同 origin の複数 tab で values 追従)
+- **Export to patch** (JSON / YAML / CSS / CSS-patch の serializer)
+- **AI pair design** (claude-in-chrome MCP + `window.creoEditor` で Claude が直接 field 操作)
+
+[docs/design/editor-mode.md](https://github.com/chronista-club/creoui/blob/main/docs/design/editor-mode.md) (D-1〜D-12) の protocol を実装。
+
+## v0.5.0 changes (2026-05-06)
+
+### Public type re-exports — consumer が host / config を annotate 可能に
+
+```ts
+import type {
+  EditorHostConfig,    // <EditorHostProvider config={...}> の型
+  EditorShortcut,      // config.shortcut の型 ({ ctrl?, shift?, alt?, meta?, key })
+  EditorHost,          // useEditorHost() 戻り値
+  EditorHostMcpApi,    // host.mcp の AI agent 向け subset
+  EditorField,         // field 宣言用
+  EditorFieldType,
+  EditorFieldConstraints,
+} from '@chronista-club/creoui-editor-host'
+```
+
+### `exposeConsole` の default が DEV-gated に変更 (consumer-actionable)
+
+> **Behavior change**: production build で `window.creoEditor` を **expose しない** が default に。 dev (Vite) では従来通り expose。
+
+```diff
+# v0.4.x — production でも expose されていた
+- <EditorHostProvider />
++ # v0.5.0 — default は import.meta.env.DEV に追従
++ <EditorHostProvider />                                       // dev only
++ <EditorHostProvider config={{ exposeConsole: true }} />      // production でも明示 expose
++ <EditorHostProvider config={{ exposeConsole: false }} />     // dev でも expose しない (CI 等)
+```
+
+CLAUDE.md EH-6 規定 (`Console REPL を production で無条件に expose しない`) への準拠です。 Vite consumer は `vite/client` を tsconfig に含めると `import.meta.env.DEV` の completion が効きます。
+
+## インストール
+
+```bash
+bun add @chronista-club/creoui-editor-host creoui solid-js
+```
+
+Peer: `solid-js ^1.9.0`。`creoui/tokens.css` を app で import しておくと、Editor Layer が `--editor-mode-*` / `--color-*` token を consume する。
+
+## Quick start
+
+```tsx
+import { createSignal } from 'solid-js'
+import 'creoui/tokens.css'
+import {
+  bind,
+  cssVarNumberTarget,
+  signalTarget,
+  editorHostTarget,
+  number,
+  color,
+  select,
+  EditorHostProvider,
+  EditorLayer,
+  useEditorHost,
+  useEditorSelectable,
+} from '@chronista-club/creoui-editor-host'
+
+export default function App() {
+  return (
+    <EditorHostProvider>
+      <Main />
+      <EditorLayer />
+    </EditorHostProvider>
+  )
+}
+
+function Main() {
+  // (1) CSS 変数を slider で編集 (Target: cssVarNumber × Control: number slider)
+  const spacing = bind({
+    target: cssVarNumberTarget('tokens.spacing.m', '--spacing-m', 16, 'px'),
+    control: number({ min: 0, max: 48, step: 1, unit: 'px', variant: 'slider' }),
+    placement: { label: 'spacing.md', semantic: 'tool', order: 0 },
+  })
+
+  // (2) 自前 signal を color picker で編集
+  const [bg, setBg] = createSignal('#73e7aa')
+  const cardBg = bind({
+    target: signalTarget('card.bg', bg, setBg),
+    control: color({ variant: 'picker' }),
+    placement: { label: 'BG', semantic: 'tool', order: 1 },
+  })
+
+  // (3) theme mode を segmented control で切替
+  const host = useEditorHost()
+  const theme = bind({
+    target: editorHostTarget('theme.mode', host, 'mint-dark'),
+    control: select(
+      ['mint-dark', 'mint-light', 'sora-dark', 'sora-light',
+       'contrast-dark', 'contrast-light', 'oldschool-dark', 'oldschool-light'],
+      'dropdown',
+    ),
+    placement: { label: 'テーマ', semantic: 'global', order: -10 },
+  })
+
+  return (
+    <article
+      ref={useEditorSelectable({ binders: [spacing, cardBg] })}
+      style={{ padding: `${spacing()}px`, background: cardBg() }}
+    >
+      <p>spacing = {spacing()}px, bg = {cardBg()}, theme = {theme()}</p>
+    </article>
+  )
+}
+```
+
+`Ctrl+Shift+E` で Editor Mode ON、TOP に `theme` select、LEFT に ThemeEditor (active theme の swatch)、RIGHT に `spacing` slider と `bg` color picker が自動で現れる。
+
+## Live design surface (F1-F5)
+
+### F1. Console REPL — 開発中に console から slider を生やす
+
+`<EditorHostProvider>` が mount されると、DevTools Console で `window.creoEditor` 経由で API が即使える。**rebuild なしで field を追加できる**ので、デザイナとのペアワークで効く。
+
+```js
+// DevTools Console で:
+creoEditor.slider('--spacing-m', 16, { min: 0, max: 48, unit: 'px' })
+creoEditor.picker('--color-brand-primary', '#73e7aa')
+creoEditor.flip('app.show-footer', true)
+creoEditor.chooser('theme.mode', 'mint-dark', ['mint-dark', 'sora-dark', ...])
+
+creoEditor.fields()            // 現 field list
+creoEditor.describe('foo.bar') // 特定 field の meta + current value
+
+// Safe experiment:
+const snap = creoEditor.snapshot()
+creoEditor.setValue('tokens.spacing.m', 48)   // 試す
+creoEditor.restore(snap)                        // 戻す
+
+creoEditor.mode.enable() / disable() / toggle() / is()
+creoEditor.help()              // 使い方 print
+```
+
+Full form も使える:
+```js
+creoEditor.bind({
+  target: creoEditor.t.cssVarNumber('x', '--my-gap', 16, 'px'),
+  control: creoEditor.c.number({ min: 0, max: 48, variant: 'slider' }),
+  placement: { label: 'Gap', semantic: 'tool' },
+})
+```
+
+**Opt-out**: `<EditorHostProvider config={{ exposeConsole: false }}>` / **name 変更**: `config: { consoleName: 'myEditor' }`。
+
+### F2. DOM auto-discover — 既知 CSS 変数を自動 bind
+
+`:root` の computed style から `--color-*` / `--spacing-*` / `--radius-*` / `--typography-size-*` を自動検出、型を infer して slider / picker を一括生成:
+
+```js
+creoEditor.autoDiscover()                          // default prefixes
+creoEditor.autoDiscover({ prefixes: ['--color-'] }) // 色だけ
+```
+
+明示 `bind()` なしで既存 token が全部触れるようになる。
+
+### F3. Export — 現 state を patch として書き出し
+
+```js
+creoEditor.export({ format: 'json' })       // 全 field の JSON
+creoEditor.export({ format: 'css-patch' })  // 変更分のみ CSS
+creoEditor.export({ format: 'yaml' })       // flat YAML
+```
+
+返り値は string のみ (clipboard 操作なし、consumer 側で `copy(out)` 等)。
+
+### F4. URL shareable state
+
+```tsx
+<EditorHostProvider config={{
+  urlSync: { autoSync: true, autoApply: true, key: 'creo' },
+}}>
+```
+
+Editor で値を動かすたび `#creo=<base64>` が URL に付く。別 tab / 別 session で URL を開くと editor state が即時復元される。
+
+```js
+creoEditor.share()   // 現 URL (更新済) を return
+```
+
+### F5. Cross-tab sync (BroadcastChannel)
+
+```tsx
+<EditorHostProvider config={{ crossTab: true }}>
+```
+
+同 origin の複数 tab で editor values を双方向 sync。デザイナが mobile と desktop の 2 tab で同時確認、slider 操作が両方に反映。
+
+## AI pair design with Claude (claude-in-chrome MCP)
+
+`window.creoEditor` が expose されると、**専用 MCP server なしで** Claude が editor を操作できる:
+
+```js
+// Claude が claude-in-chrome MCP の javascript_tool 経由で:
+creoEditor.fields()                          // 現 editor state を inspect
+creoEditor.slider('--spacing-m', 12, {...}) // 提案値で slider 追加
+creoEditor.setValue('tokens.spacing.m', 20) // 直接 値変更
+creoEditor.snapshot()                         // 実験前に保存
+creoEditor.restore(snap)                      // 気に入らなければ戻す
+creoEditor.export({ format: 'css-patch' })   // 最終 diff を取得
+```
+
+Claude が screenshot で結果確認 → setValue で微調整 → export で commit 候補を生成、の **rebuild なしデザイン iteration loop**。
+
+## コンセプト: Target × Control の 2 軸
+
+| 軸 | 責務 | factory 例 |
+|----|------|-----------|
+| **Target** (データ源) | "何をどこから read/write" | `cssVarTarget` / `cssVarNumberTarget` / `signalTarget` / `localStorageTarget` / `ephemeralTarget` / `editorHostTarget` |
+| **Control** (UI 操作体系) | "どう編集するか (widget)" | `number` / `color` / `boolean` / `select` / `string` / `readonlyText` |
+
+直交なので、7 × 6 = **42 種の編集体験** を factory 組み合わせだけで作れる。新 Target source (GraphQL / SurrealDB / WebSocket) や新 Control widget (oklch-sliders / gradient stops / bezier) は既存を touch せず追加可能。
+
+```
+bind({ target: T, control: C, placement: P })
+       └───data───┘└───UI───┘ └──配置──┘
+```
+
+## 4 方向 semantic layout (D-2 / D-3)
+
+| Region | Semantic | 用途 |
+|--------|----------|------|
+| **TOP** | `global` | 全体設定 / 視線の起点 (theme select / shortcut hint) |
+| **LEFT** | `source` | 時系列過去 / 参照 (ThemeEditor) |
+| **RIGHT** | `tool` | 時系列未来 / ツール (field slider / picker panel) |
+| **BOTTOM** | `utility` | ローカル utility (batch / AI chat — Phase 2 で充実) |
+
+Placement `semantic` で field がどの region に出るか決まる。
+
+## Content 非侵襲 (D-6)
+
+Editor Layer は Content layer の座標・可視性を奪わない:
+
+- `pointer-events: none` baseline、4 region のみ `auto`
+- Mode OFF で `visibility: hidden` (Content は 100% 通常動作)
+- 4 region は `color-mix(in oklch, ...)` で半透明 + `backdrop-filter: blur(...)`
+- Mode ON/OFF で Content の DOM / layout / scroll 位置は不変
+
+## Manual toggle のみ (D-7)
+
+- `Ctrl+Shift+E` — Mode 切替 (configurable via `config.shortcut`)
+- `Escape` — selection 解除 → Mode OFF の 2 段階退出
+- `host.toggle()` / `host.mcp.enable()` — programmatic
+
+自動 ON (hover 等) は存在しない。
+
+## AI agent ready (D-10)
+
+`useEditorHost().mcp` に `listFields` / `getValue` / `setValue` / `mode` / `enable` / `disable` を expose。Phase 2b の `@chronista-club/creoui-editor-host-mcp` (予定) がこれを stdio MCP server として公開、Claude 等から直接 field を操作できる。
+
+```tsx
+const host = useEditorHost()
+host.mcp.setValue('tokens.spacing.m', 24)  // 外部から書換、chain が走る
+```
+
+## API Reference
+
+### `<EditorHostProvider config?>`
+
+```tsx
+<EditorHostProvider config={{
+  shortcut: { ctrl: true, shift: true, key: 'e' },
+  localStorageNamespace: 'my-app',
+  initialMode: 'off',
+}}>
+  {children}
+</EditorHostProvider>
+```
+
+### Target factories
+
+| Factory | 説明 |
+|---------|------|
+| `cssVarTarget(id, cssVar, initial)` | CSS custom property を string で read/write |
+| `cssVarNumberTarget(id, cssVar, initial, unit='px')` | CSS 変数を number + unit で書く (slider と相性◎) |
+| `signalTarget(id, accessor, setter)` | SolidJS signal に直結 |
+| `localStorageTarget(id, initial, namespace?)` | localStorage に JSON 永続化 |
+| `ephemeralTarget(id, initial)` | in-memory + subscribe 対応 |
+| `editorHostTarget(id, host, initial)` | host.values に直結 (mcp / subscribe 全部委譲) |
+
+Custom Target は `Target<T>` を満たせば OK:
+```ts
+interface Target<T> {
+  id: string; initial: T
+  get(): T; set(value: T): void
+  subscribe?(listener: (value: T) => void): () => void
+}
+```
+
+### Control factories
+
+| Factory | Variant | Kind |
+|---------|---------|------|
+| `number(opts?)` | `'slider' \| 'input' \| 'stepper'` | number |
+| `color(opts?)` | `'picker' \| 'oklch-sliders' \| 'palette'` | color |
+| `boolean(opts?)` | `'switch' \| 'checkbox'` | boolean |
+| `select(options, variant?)` | `'dropdown' \| 'segmented'` | select |
+| `string(variant?)` | `'input' \| 'textarea'` | string |
+| `readonlyText()` | — | readonly-text |
+
+### `bind({ target, control, placement })` → `Binder<T>`
+
+```ts
+interface Binder<T> extends Accessor<T> {
+  set(value: T): void              // host 経由の 2-way sync で書き込み
+  readonly id: string
+  readonly target: Target<T>
+  readonly control: Control<T>
+  readonly placement: Placement
+  selectable(): (el: HTMLElement) => void  // ref callback
+}
+```
+
+Accessor として読み、`.set()` で書き、`.selectable()` で selection ref を取る。
+
+### Hooks
+
+| Hook | 用途 |
+|------|------|
+| `useEditorHost()` | host 直接取得 |
+| `useEditorMode()` | `Accessor<'on' \| 'off'>` |
+| `useEditorSelection()` | `Accessor<SelectionInfo \| null>` |
+| `useEditorHover()` | `Accessor<SelectionInfo \| null>` |
+| `useEditorSelectable({ binders, id? })` | `ref={...}` 用 callback。binder 配列から `data-editor-fields` を set |
+
+### Theme meta
+
+8 theme (4 family × light/dark) の公式 meta は `creoui@0.1.0` に同梱。consumer は `THEME_INFO[themeId]` で取得。
+
+```tsx
+import { THEME_INFO, THEME_IDS, DEFAULT_THEME_ID, SWATCH_ROWS } from '@chronista-club/creoui-editor-host'
+```
+
+## ファイル構成
+
+```
+src/
+├── index.ts              public API
+├── types.ts              internal: EditorField / EditorHost / SelectionInfo
+├── host.ts               internal: createEditorHost() core state
+├── host.test.ts          19 cases (core)
+├── selection.ts          internal: DOM hover/click + ResizeObserver
+├── shortcut.ts           internal: Ctrl+Shift+E handler
+├── provider.tsx          <EditorHostProvider> + useEditorHost()
+├── hooks.ts              public hooks (useEditorMode / Selectable 等)
+├── target.ts             ⭐ Target interface + 6 factory
+├── target.test.ts        8 cases
+├── control.ts            ⭐ Control types + 6 factory
+├── control.test.ts       5 cases
+├── binder.ts             ⭐ bind() conductor
+├── fields.tsx            internal: FieldEditor (Control kind で分岐)
+├── theme-editor.tsx      ThemeEditor (LEFT region 実装)
+├── theme-info.ts         8 theme meta + SWATCH_ROWS
+└── layer.tsx             <EditorLayer> 4 region overlay root
+```
+
+## Roadmap
+
+- ✅ Step 1-4: core state / handlers / UI / README
+- ✅ Step 5: Target × Control 分離 + `bind()`
+- ⏳ Step 6: `editor-host-v0.1.0` publish + examples/web-demo を consumer に rewrite
+- 📋 M4: MCP server (`editor_mode_*` stdio tool)
+- 📋 M5: Swift runtime (SwiftUI + NSAppearance)
+- 📋 M6: Custom Control plugin (oklch-sliders / gradient / spline)
+
+## License
+
+Apache-2.0 — [LICENSE](https://github.com/chronista-club/creoui/blob/main/LICENSE)

package/dist/auto-discover.d.ts

@@ -0,0 +1,47 @@
+import { Owner } from 'solid-js';
+import { Binder } from './binder';
+import { EditorHost, EditorSemantic } from './types';
+export interface AutoDiscoverOptions {
+    /** どの CSS var prefix を拾うか (default: 4 種) */
+    prefixes?: readonly string[];
+    /** 配置 (default: 'tool') */
+    semantic?: EditorSemantic;
+    /** 既に register 済みの id は skip (default: true) */
+    skipExisting?: boolean;
+    /** field.order の start (default: 1000、既存 0-99 と衝突しない) */
+    placementOrderStart?: number;
+}
+export interface DiscoveredVar {
+    cssVar: string;
+    id: string;
+    value: string;
+    kind: 'color' | 'number' | 'unknown';
+    numericValue?: number;
+    unit?: string;
+}
+/** :root の computed style から prefix match の CSS var を列挙 */
+export declare function scanCssVars(prefixes?: readonly string[]): DiscoveredVar[];
+declare function inferType(cssVar: string, raw: string): DiscoveredVar;
+/** '--color-brand-primary' → 'color.brand.primary' */
+declare function cssVarToId(cssVar: string): string;
+declare function heuristicRange(value: number): {
+    min: number;
+    max: number;
+    step: number;
+};
+/**
+ * 現 DOM の CSS 変数を scan、適切な Target + Control で bind する。
+ * 成功した binder の配列を返す。
+ *
+ * owner: provider の getOwner() を渡すと console / effect 経由で呼ばれる時の
+ * SolidJS context が維持される (重要: 呼び出し元の runWithOwner でも同等)。
+ */
+export declare function autoDiscover(host: EditorHost, owner: Owner | null, opts?: AutoDiscoverOptions): Binder[];
+export declare const __test__: {
+    scanCssVars: typeof scanCssVars;
+    inferType: typeof inferType;
+    cssVarToId: typeof cssVarToId;
+    heuristicRange: typeof heuristicRange;
+};
+export {};
+//# sourceMappingURL=auto-discover.d.ts.map

package/dist/auto-discover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-discover.d.ts","sourceRoot":"","sources":["../src/auto-discover.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,EAAE,KAAK,KAAK,EAAgB,MAAM,UAAU,CAAA;AACnD,OAAO,EAAE,KAAK,MAAM,EAAQ,MAAM,UAAU,CAAA;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAczD,MAAM,WAAW,mBAAmB;IAClC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,gDAAgD;IAChD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAA;IACpC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,2DAA2D;AAC3D,wBAAgB,WAAW,CAAC,QAAQ,GAAE,SAAS,MAAM,EAAqB,GAAG,aAAa,EAAE,CAuB3F;AAED,iBAAS,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAiB7D;AAED,sDAAsD;AACtD,iBAAS,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAE1C;AAED,iBAAS,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAOjF;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,IAAI,GAAE,mBAAwB,GAC7B,MAAM,EAAE,CA+CV;AAED,eAAO,MAAM,QAAQ;;;;;CAAyD,CAAA"}

package/dist/binder.d.ts

@@ -0,0 +1,28 @@
+import { Accessor } from 'solid-js';
+import { Control } from './control';
+import { Target } from './target';
+import { EditorPersistence, EditorRole, EditorSemantic } from './types';
+export interface Placement {
+    label: string;
+    semantic: EditorSemantic;
+    group?: string;
+    order?: number;
+    role?: EditorRole;
+    persistence?: EditorPersistence;
+}
+export interface BindOptions<T> {
+    target: Target<T>;
+    control: Control<T>;
+    placement: Placement;
+}
+export interface Binder<T = any> extends Accessor<T> {
+    set(value: T): void;
+    readonly id: string;
+    readonly target: Target<T>;
+    readonly control: Control<T>;
+    readonly placement: Placement;
+    /** ref callback: el.dataset.editorFields = this.id */
+    selectable(): (el: HTMLElement) => void;
+}
+export declare function bind<T>(opts: BindOptions<T>): Binder<T>;
+//# sourceMappingURL=binder.d.ts.map

package/dist/binder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"binder.d.ts","sourceRoot":"","sources":["../src/binder.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,KAAK,EAIV,iBAAiB,EACjB,UAAU,EACV,cAAc,EACf,MAAM,SAAS,CAAA;AAEhB,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,cAAc,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,WAAW,CAAC,EAAE,iBAAiB,CAAA;CAChC;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;IACjB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,SAAS,EAAE,SAAS,CAAA;CACrB;AAGD,MAAM,WAAW,MAAM,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,QAAQ,CAAC,CAAC,CAAC;IAClD,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;IAC7B,sDAAsD;IACtD,UAAU,IAAI,CAAC,EAAE,EAAE,WAAW,KAAK,IAAI,CAAA;CACxC;AAsBD,wBAAgB,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAgEvD"}

package/dist/console.d.ts

@@ -0,0 +1,115 @@
+import { Owner } from 'solid-js';
+import { BindOptions, Binder } from './binder';
+import { BooleanControl, ColorControl, NumberControl, SelectControl, StringControl, boolean as booleanControl, color, number, readonlyText, select, string as stringControl } from './control';
+import { cssVarNumberTarget, cssVarTarget, editorHostTarget, ephemeralTarget, localStorageTarget, signalTarget } from './target';
+import { EditorField, EditorHost, EditorMode, EditorRole, EditorSemantic } from './types';
+export interface ConsoleApi {
+    readonly host: EditorHost;
+    readonly version: string;
+    bind<T>(opts: BindOptions<T>): Binder<T>;
+    readonly t: {
+        cssVar: typeof cssVarTarget;
+        cssVarNumber: typeof cssVarNumberTarget;
+        signal: typeof signalTarget;
+        localStorage: typeof localStorageTarget;
+        ephemeral: typeof ephemeralTarget;
+        host: typeof editorHostTarget;
+    };
+    readonly c: {
+        number: typeof number;
+        color: typeof color;
+        boolean: typeof booleanControl;
+        select: typeof select;
+        string: typeof stringControl;
+        readonlyText: typeof readonlyText;
+    };
+    slider(cssVar: string, initial: number, opts?: Omit<NumberControl, 'kind'> & {
+        label?: string;
+        semantic?: EditorSemantic;
+    }): Binder<number>;
+    picker(cssVar: string, initial: string, opts?: Omit<ColorControl, 'kind'> & {
+        label?: string;
+        semantic?: EditorSemantic;
+    }): Binder<string>;
+    flip(id: string, initial: boolean, opts?: Omit<BooleanControl, 'kind'> & {
+        label?: string;
+        semantic?: EditorSemantic;
+    }): Binder<boolean>;
+    chooser(id: string, initial: string, options: readonly string[], opts?: Omit<SelectControl, 'kind' | 'options'> & {
+        label?: string;
+        semantic?: EditorSemantic;
+    }): Binder<string>;
+    text(id: string, initial: string, opts?: Omit<StringControl, 'kind'> & {
+        label?: string;
+        semantic?: EditorSemantic;
+    }): Binder<string>;
+    getValue<T>(id: string): T | undefined;
+    setValue<T>(id: string, value: T): void;
+    fields(filter?: {
+        semantic?: EditorSemantic;
+        role?: EditorRole;
+    }): EditorField[];
+    values(): Record<string, unknown>;
+    describe(id: string): void;
+    snapshot(): Record<string, unknown>;
+    restore(snapshot: Record<string, unknown>): void;
+    readonly mode: {
+        enable(): void;
+        disable(): void;
+        toggle(): void;
+        is(): EditorMode;
+    };
+    share(): string;
+    export(opts?: {
+        format?: 'json' | 'yaml' | 'css' | 'css-patch';
+        onlyChanged?: boolean;
+        indent?: number;
+    }): string;
+    autoDiscover(opts?: {
+        prefixes?: readonly string[];
+        semantic?: EditorSemantic;
+        skipExisting?: boolean;
+    }): Binder[];
+    /**
+     * 現 editor state を dev server の `/_creo/tokens/commit` に POST し、
+     * tokens/*.json の `$value` を書き換える。Vite plugin `creoTokensPlugin` が
+     * 同 endpoint を listen している前提。production では fetch 失敗 or 404 が返る。
+     */
+    commitToTokens(opts?: {
+        endpoint?: string;
+        onlyChanged?: boolean;
+    }): Promise<{
+        applied: {
+            id: string;
+            value: unknown;
+            file: string;
+        }[];
+        skipped: string[];
+    }>;
+    help(): void;
+}
+/**
+ * Provider から注入される sibling feature 群。循環依存を避けるため interface で
+ * 受ける (実装は export.ts / url-sync.ts / auto-discover.ts が提供)。
+ */
+export interface ConsoleApiDeps {
+    host: EditorHost;
+    /** provider の onMount で保持した getOwner() の結果 */
+    owner: Owner | null;
+    exportSnapshot: (host: EditorHost, opts?: {
+        format?: 'json' | 'yaml' | 'css' | 'css-patch';
+        onlyChanged?: boolean;
+        indent?: number;
+    }) => string;
+    shareUrl: (host: EditorHost) => string;
+    autoDiscover: (host: EditorHost, owner: Owner | null, opts?: {
+        prefixes?: readonly string[];
+        semantic?: EditorSemantic;
+        skipExisting?: boolean;
+    }) => Binder[];
+}
+/** provider 側で deps を wire して console API object を構築する */
+export declare function buildConsoleApi(deps: ConsoleApiDeps): ConsoleApi;
+/** window[name] に api を expose。戻り値で uninstall (delete) */
+export declare function installConsoleApi(api: ConsoleApi, name?: string): () => void;
+//# sourceMappingURL=console.d.ts.map

package/dist/console.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"console.d.ts","sourceRoot":"","sources":["../src/console.ts"],"names":[],"mappings":"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"}

package/dist/control.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @chronista-club/creoui-editor-host — Control (UI 操作体系)
+ *
+ * "どう編集するか" の抽象。Target (データ源) と直交。kind で型を、variant で
+ * UI widget の好みを表す。
+ *
+ * Built-in kinds: number / color / boolean / select / string / readonly-text
+ *
+ * consumer が独自 Control kind を追加したい場合は `Control<T>` に `'custom'`
+ * 系の extension を作り、FieldEditor 側で `registerControlRenderer` で表示
+ * (Phase 2 で拡張予定)。
+ */
+export type NumberVariant = 'slider' | 'input' | 'stepper';
+export type ColorVariant = 'picker' | 'oklch-sliders' | 'palette';
+export type BooleanVariant = 'switch' | 'checkbox';
+export type SelectVariant = 'dropdown' | 'segmented';
+export type StringVariant = 'input' | 'textarea';
+export interface NumberControl {
+    kind: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+    unit?: string;
+    variant?: NumberVariant;
+}
+export interface ColorControl {
+    kind: 'color';
+    variant?: ColorVariant;
+    palette?: readonly string[];
+}
+export interface BooleanControl {
+    kind: 'boolean';
+    variant?: BooleanVariant;
+}
+export interface SelectControl {
+    kind: 'select';
+    options: readonly string[];
+    variant?: SelectVariant;
+}
+export interface StringControl {
+    kind: 'string';
+    variant?: StringVariant;
+}
+export interface ReadonlyTextControl {
+    kind: 'readonly-text';
+}
+export type Control<_T = any> = NumberControl | ColorControl | BooleanControl | SelectControl | StringControl | ReadonlyTextControl;
+export declare function number(opts?: Omit<NumberControl, 'kind'>): NumberControl;
+export declare function color(opts?: Omit<ColorControl, 'kind'>): ColorControl;
+export declare function boolean(opts?: Omit<BooleanControl, 'kind'>): BooleanControl;
+export declare function select(options: readonly string[], variant?: SelectVariant): SelectControl;
+export declare function string(variant?: StringVariant): StringControl;
+export declare function readonlyText(): ReadonlyTextControl;
+//# sourceMappingURL=control.d.ts.map

package/dist/control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../src/control.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAA;AAC1D,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,eAAe,GAAG,SAAS,CAAA;AACjE,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAA;AAClD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,CAAA;AACpD,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,UAAU,CAAA;AAEhD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,OAAO,CAAC,EAAE,cAAc,CAAA;CACzB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,eAAe,CAAA;CACtB;AAGD,MAAM,MAAM,OAAO,CAAC,EAAE,GAAG,GAAG,IACxB,aAAa,GACb,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,mBAAmB,CAAA;AAIvB,wBAAgB,MAAM,CAAC,IAAI,GAAE,IAAI,CAAC,aAAa,EAAE,MAAM,CAAM,GAAG,aAAa,CAE5E;AAED,wBAAgB,KAAK,CAAC,IAAI,GAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAM,GAAG,YAAY,CAEzE;AAED,wBAAgB,OAAO,CAAC,IAAI,GAAE,IAAI,CAAC,cAAc,EAAE,MAAM,CAAM,GAAG,cAAc,CAE/E;AAED,wBAAgB,MAAM,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,aAAa,CAEzF;AAED,wBAAgB,MAAM,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,aAAa,CAE7D;AAED,wBAAgB,YAAY,IAAI,mBAAmB,CAElD"}

package/dist/cross-tab.d.ts

@@ -0,0 +1,16 @@
+import { EditorHost } from './types';
+export interface CrossTabOptions {
+    /** BroadcastChannel 名 (default: '@chronista-club/creoui-editor-host:{namespace}') */
+    channel?: string;
+    /** namespace (localStorageNamespace と同値を期待、default '@chronista-club/creoui-editor-host') */
+    namespace?: string;
+}
+declare function defaultChannelName(namespace: string): string;
+declare function generateTabId(): string;
+export declare function installCrossTabSync(host: EditorHost, opts?: CrossTabOptions): () => void;
+export declare const __test__: {
+    defaultChannelName: typeof defaultChannelName;
+    generateTabId: typeof generateTabId;
+};
+export {};
+//# sourceMappingURL=cross-tab.d.ts.map

package/dist/cross-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cross-tab.d.ts","sourceRoot":"","sources":["../src/cross-tab.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,MAAM,WAAW,eAAe;IAC9B,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAOD,iBAAS,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAErD;AAED,iBAAS,aAAa,IAAI,MAAM,CAK/B;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,GAAE,eAAoB,GAAG,MAAM,IAAI,CAgE5F;AAED,eAAO,MAAM,QAAQ;;;CAAwC,CAAA"}