{"_id":"@chronista-club/creo-ui-editor-host","_rev":"6-cd4f6b7e8b792a39c9bc5933e3d6395b","name":"@chronista-club/creo-ui-editor-host","dist-tags":{"latest":"0.8.1"},"versions":{"0.5.2":{"name":"@chronista-club/creo-ui-editor-host","version":"0.5.2","keywords":["design-system","editor-mode","creo-ui","solid-js","design-tokens","live-editing","devtools","ai-pair-design"],"license":"Apache-2.0","_id":"@chronista-club/creo-ui-editor-host@0.5.2","maintainers":[{"name":"mako357","email":"mito@chronista.club"}],"homepage":"https://github.com/chronista-club/creo-ui#readme","bugs":{"url":"https://github.com/chronista-club/creo-ui/issues"},"dist":{"shasum":"de782f5dbbdf1931ea8654d861cd09940a939481","tarball":"https://registry.npmjs.org/@chronista-club/creo-ui-editor-host/-/creo-ui-editor-host-0.5.2.tgz","fileCount":56,"integrity":"sha512-3wCxjsTn1x6Pcl/sUnxagp4wgI87xxQTwscZlZiIHkjVgeyAMVNJJ0rmo0pcGcaitFnBHF+2ncYFB0w/iLW5uw==","signatures":[{"sig":"MEUCIQCBXNldeXoEmJCgmNlk09Rq0DE6YQrphJis5F4UcLf45wIgP+mmTco9V1wfeYGxAkdpLnElhY2t35lVSWF//jzBJOM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":292712},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"dba265cd0b2e17a221a81a89bce91494803f9f4e","scripts":{"build":"vite build","prepublishOnly":"bun run build","typecheck:build":"tsc -p tsconfig.build.json --noEmit"},"_npmUser":{"name":"mako357","email":"mito@chronista.club"},"repository":{"url":"git+https://github.com/chronista-club/creo-ui.git","type":"git","directory":"packages/editor-host"},"_npmVersion":"10.8.2","description":"creo-ui — Editor Mode reference runtime for SolidJS. Live design surface with console REPL, auto-discover, URL share, cross-tab sync, and export-to-patch.","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","solid-js":"^1.9.0","typescript":"^5.5.0","vite-plugin-dts":"^4.2.0","vite-plugin-solid":"^2.10.0"},"peerDependencies":{"solid-js":"^1.9.0"},"_npmOperationalInternal":{"tmp":"tmp/creo-ui-editor-host_0.5.2_1783720965242_0.9790816997395324","host":"s3://npm-registry-packages-npm-production"}},"0.5.3":{"name":"@chronista-club/creo-ui-editor-host","version":"0.5.3","keywords":["design-system","editor-mode","creo-ui","solid-js","design-tokens","live-editing","devtools","ai-pair-design"],"license":"Apache-2.0","_id":"@chronista-club/creo-ui-editor-host@0.5.3","maintainers":[{"name":"mako357","email":"mito@chronista.club"}],"homepage":"https://github.com/chronista-club/creo-ui#readme","bugs":{"url":"https://github.com/chronista-club/creo-ui/issues"},"dist":{"shasum":"da8448078e8a4671b9bc160b81de17e16a6ac607","tarball":"https://registry.npmjs.org/@chronista-club/creo-ui-editor-host/-/creo-ui-editor-host-0.5.3.tgz","fileCount":56,"integrity":"sha512-NddUuSwtAnVKkWg25fNAPs1M1w+IZ9gKg7x9gKa3gMlHzl/39fgM7LSjC3+l6UWZxOyt5cS0bERuizFUCNDWVQ==","signatures":[{"sig":"MEUCIBzBBS80VEe9Vpl0YYYFML+KCz7yuzzDFDU1cKt7xGX0AiEA6tcW5CQbAb4jOV6x16nXuicMqDCZqQtve4MglQ8zPFM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":292728},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"ebc2afc26ce78894964133943a24c7b7118d9fe4","scripts":{"build":"vite build","prepublishOnly":"bun run build","typecheck:build":"tsc -p tsconfig.build.json --noEmit"},"_npmUser":{"name":"mako357","email":"mito@chronista.club"},"repository":{"url":"git+https://github.com/chronista-club/creo-ui.git","type":"git","directory":"packages/editor-host"},"_npmVersion":"10.8.2","description":"creo-ui — Editor Mode reference runtime for SolidJS. Live design surface with console REPL, auto-discover, URL share, cross-tab sync, and export-to-patch.","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","solid-js":"^1.9.0","typescript":"^5.5.0","vite-plugin-dts":"^4.2.0","vite-plugin-solid":"^2.10.0"},"peerDependencies":{"solid-js":"^1.9.0"},"_npmOperationalInternal":{"tmp":"tmp/creo-ui-editor-host_0.5.3_1783795891395_0.9309892830764865","host":"s3://npm-registry-packages-npm-production"}},"0.6.0":{"name":"@chronista-club/creo-ui-editor-host","version":"0.6.0","keywords":["design-system","editor-mode","creo-ui","solid-js","design-tokens","live-editing","devtools","ai-pair-design"],"license":"Apache-2.0","_id":"@chronista-club/creo-ui-editor-host@0.6.0","maintainers":[{"name":"mako357","email":"mito@chronista.club"}],"homepage":"https://github.com/chronista-club/creo-ui#readme","bugs":{"url":"https://github.com/chronista-club/creo-ui/issues"},"dist":{"shasum":"cfff5328a63c09af44feb04353fbadfd25f4d58d","tarball":"https://registry.npmjs.org/@chronista-club/creo-ui-editor-host/-/creo-ui-editor-host-0.6.0.tgz","fileCount":58,"integrity":"sha512-f+1fsJxkW2mYNlcDTEBvP854oXJdj5rEGLED78b+Cqii0b77FS0zTUt87R/MjX3W1kDt2x30kA7L+eKKqWOHIQ==","signatures":[{"sig":"MEYCIQDtINiHG0LM08ga8rMo5TtSko4d6yRa+DxN6Cx/P90LaAIhAJJOqi7vZcvBfRPfFtx4jTe7DCijPF1ILT1PvyheRPCM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":362060},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"07e29defa71c7fd505afe65fbad0793ba1027adb","scripts":{"build":"vite build","prepublishOnly":"bun run build","typecheck:build":"tsc -p tsconfig.build.json --noEmit"},"_npmUser":{"name":"mako357","email":"mito@chronista.club"},"repository":{"url":"git+https://github.com/chronista-club/creo-ui.git","type":"git","directory":"packages/editor-host"},"_npmVersion":"10.8.2","description":"creo-ui — Editor Mode reference runtime for SolidJS. Live design surface with console REPL, auto-discover, URL share, cross-tab sync, and export-to-patch.","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","solid-js":"^1.9.0","typescript":"^5.5.0","vite-plugin-dts":"^4.2.0","vite-plugin-solid":"^2.10.0"},"peerDependencies":{"solid-js":"^1.9.0"},"_npmOperationalInternal":{"tmp":"tmp/creo-ui-editor-host_0.6.0_1784470285204_0.21023055062550866","host":"s3://npm-registry-packages-npm-production"}},"0.7.0":{"name":"@chronista-club/creo-ui-editor-host","version":"0.7.0","keywords":["design-system","editor-mode","creo-ui","solid-js","design-tokens","live-editing","devtools","ai-pair-design"],"license":"Apache-2.0","_id":"@chronista-club/creo-ui-editor-host@0.7.0","maintainers":[{"name":"mako357","email":"mito@chronista.club"}],"homepage":"https://github.com/chronista-club/creo-ui#readme","bugs":{"url":"https://github.com/chronista-club/creo-ui/issues"},"dist":{"shasum":"1ffefee4533d0de207fa66def1983fbdd3216f3f","tarball":"https://registry.npmjs.org/@chronista-club/creo-ui-editor-host/-/creo-ui-editor-host-0.7.0.tgz","fileCount":64,"integrity":"sha512-/D5zN9iIk6+X7AcBtC5zM//L6CPrFQhP9gqVzmpUYTvMJV9kZPbetInJZsWgv2ugTTURLBkz/8kSmeo08vjXrA==","signatures":[{"sig":"MEUCIQCsZTPy/xnvzbOIwRAeQ9guw6PpqPmHCo+7hU7oBnQq9wIgCIl9Kn1PLKjsWtj4ltKsg9kTMFegwJj6zAjTmQQzIb0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":462133},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"0d6bac0d65777e2b29371d61040632a582e431db","scripts":{"build":"vite build","prepublishOnly":"bun run build","typecheck:build":"tsc -p tsconfig.build.json --noEmit"},"_npmUser":{"name":"mako357","email":"mito@chronista.club"},"repository":{"url":"git+https://github.com/chronista-club/creo-ui.git","type":"git","directory":"packages/editor-host"},"_npmVersion":"10.8.2","description":"creo-ui — Editor Mode reference runtime for SolidJS. Live design surface with console REPL, auto-discover, URL share, cross-tab sync, and export-to-patch.","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","solid-js":"^1.9.0","typescript":"^5.5.0","vite-plugin-dts":"^4.2.0","vite-plugin-solid":"^2.10.0"},"peerDependencies":{"solid-js":"^1.9.0"},"_npmOperationalInternal":{"tmp":"tmp/creo-ui-editor-host_0.7.0_1786622545212_0.4700113926953571","host":"s3://npm-registry-packages-npm-production"}},"0.8.0":{"name":"@chronista-club/creo-ui-editor-host","version":"0.8.0","keywords":["design-system","editor-mode","creo-ui","solid-js","design-tokens","live-editing","devtools","ai-pair-design"],"license":"Apache-2.0","_id":"@chronista-club/creo-ui-editor-host@0.8.0","maintainers":[{"name":"mako357","email":"mito@chronista.club"}],"homepage":"https://github.com/chronista-club/creo-ui#readme","bugs":{"url":"https://github.com/chronista-club/creo-ui/issues"},"dist":{"shasum":"1cd8905692624c9c78060042c14613ed99cb9fbf","tarball":"https://registry.npmjs.org/@chronista-club/creo-ui-editor-host/-/creo-ui-editor-host-0.8.0.tgz","fileCount":68,"integrity":"sha512-b5lZKM5UO8QtmhMjjeAwN7b8FpTRtbCugns1UpPo4jSWjgsPWiaTP4bHSpPoLxa3lre5hHBPOh4ipGVDhFaKFg==","signatures":[{"sig":"MEYCIQCmMhDauDeia6MUn8ORIl6UgAAavTql3h3nf5SeTBScGAIhAL+UQyhA4/MvtlWpPFo0vjT4HJC7yK54tYTHoxVIIRX7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":533313},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"gitHead":"b45a99fdf12394e4e2e49fbde5d33c4657c41031","scripts":{"build":"vite build","prepublishOnly":"bun run build","typecheck:build":"tsc -p tsconfig.build.json --noEmit"},"_npmUser":{"name":"mako357","email":"mito@chronista.club"},"repository":{"url":"git+https://github.com/chronista-club/creo-ui.git","type":"git","directory":"packages/editor-host"},"_npmVersion":"10.8.2","description":"creo-ui — Editor Mode reference runtime for SolidJS. Live design surface with console REPL, auto-discover, URL share, cross-tab sync, and export-to-patch.","directories":{},"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","solid-js":"^1.9.0","typescript":"^5.5.0","vite-plugin-dts":"^4.2.0","vite-plugin-solid":"^2.10.0"},"peerDependencies":{"solid-js":"^1.9.0"},"_npmOperationalInternal":{"tmp":"tmp/creo-ui-editor-host_0.8.0_1786709133251_0.284301863608573","host":"s3://npm-registry-packages-npm-production"}},"0.8.1":{"name":"@chronista-club/creo-ui-editor-host","version":"0.8.1","description":"creo-ui — Editor Mode reference runtime for SolidJS. Live design surface with console REPL, auto-discover, URL share, cross-tab sync, and export-to-patch.","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./package.json":"./package.json"},"repository":{"type":"git","url":"git+https://github.com/chronista-club/creo-ui.git","directory":"packages/editor-host"},"bugs":{"url":"https://github.com/chronista-club/creo-ui/issues"},"homepage":"https://github.com/chronista-club/creo-ui#readme","keywords":["design-system","editor-mode","creo-ui","solid-js","design-tokens","live-editing","devtools","ai-pair-design"],"publishConfig":{"access":"public"},"scripts":{"build":"vite build","typecheck:build":"tsc -p tsconfig.build.json --noEmit","prepublishOnly":"bun run build"},"peerDependencies":{"solid-js":"^1.9.0"},"devDependencies":{"solid-js":"^1.9.0","typescript":"^5.5.0","vite":"^5.4.0","vite-plugin-dts":"^4.2.0","vite-plugin-solid":"^2.10.0"},"license":"Apache-2.0","_id":"@chronista-club/creo-ui-editor-host@0.8.1","gitHead":"aa60b11a53e02b13a28b36f5a637b42fda66f4c7","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-UK8QvaVqtEju6QFbHt8bynMpQm4+YcOJjMsL2tMj3QkZrryKteV01oKtZCqXyfM0o0TIs10Nsaezs266RyQzIQ==","shasum":"4f834cb6debea54ac4740def51c2502f9e932567","tarball":"https://registry.npmjs.org/@chronista-club/creo-ui-editor-host/-/creo-ui-editor-host-0.8.1.tgz","fileCount":68,"unpackedSize":533307,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC0t2YgtNThUkg+AO/4wg8YccFEVOWwYesO6lum6e1ETwIhALwa4YOZhxxCqM8SBuPK0/RQMQ9f23I5CwoG4GNcvKHf"}]},"_npmUser":{"name":"mako357","email":"mito@chronista.club"},"directories":{},"maintainers":[{"name":"mako357","email":"mito@chronista.club"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/creo-ui-editor-host_0.8.1_1786770943835_0.5750152333090992"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-10T22:02:45.050Z","modified":"2026-08-15T05:15:44.156Z","0.5.2":"2026-07-10T22:02:45.409Z","0.5.3":"2026-07-11T18:51:31.536Z","0.6.0":"2026-07-19T14:11:25.406Z","0.7.0":"2026-08-13T12:02:25.340Z","0.8.0":"2026-08-14T12:05:33.438Z","0.8.1":"2026-08-15T05:15:43.980Z"},"bugs":{"url":"https://github.com/chronista-club/creo-ui/issues"},"license":"Apache-2.0","homepage":"https://github.com/chronista-club/creo-ui#readme","keywords":["design-system","editor-mode","creo-ui","solid-js","design-tokens","live-editing","devtools","ai-pair-design"],"repository":{"type":"git","url":"git+https://github.com/chronista-club/creo-ui.git","directory":"packages/editor-host"},"description":"creo-ui — Editor Mode reference runtime for SolidJS. Live design surface with console REPL, auto-discover, URL share, cross-tab sync, and export-to-patch.","maintainers":[{"name":"mako357","email":"mito@chronista.club"}],"readme":"# @chronista-club/creo-ui-editor-host\n\ncreo-ui — Editor Mode reference runtime for SolidJS。**Live design surface** として、デザイナ / エンジニア / AI agent が同じ app を rebuild なしで mutate できる paradigm を提供。\n\n- **Target × Control 2 軸直交設計** + `bind()` 1 本で field を宣言\n- **DevTools Console REPL** (`window.creoEditor.slider(...)` で即 slider 追加)\n- **DOM auto-discover** (既知 CSS 変数を自動 bind)\n- **URL shareable state** (`#creo=...` で URL 1 本で共有)\n- **Cross-tab sync** (同 origin の複数 tab で values 追従)\n- **Export to patch** (JSON / YAML / CSS / CSS-patch の serializer)\n- **AI pair design** (claude-in-chrome MCP + `window.creoEditor` で Claude が直接 field 操作)\n\n[docs/design/editor-mode.md](https://github.com/chronista-club/creo-ui/blob/main/docs/design/editor-mode.md) (D-1〜D-12) の protocol を実装。\n\n## v0.5.0 changes (2026-05-06)\n\n### Public type re-exports — consumer が host / config を annotate 可能に\n\n```ts\nimport type {\n  EditorHostConfig,    // <EditorHostProvider config={...}> の型\n  EditorShortcut,      // config.shortcut の型 ({ ctrl?, shift?, alt?, meta?, key })\n  EditorHost,          // useEditorHost() 戻り値\n  EditorHostMcpApi,    // host.mcp の AI agent 向け subset\n  EditorField,         // field 宣言用\n  EditorFieldType,\n  EditorFieldConstraints,\n} from '@chronista-club/creo-ui-editor-host'\n```\n\n### `exposeConsole` の default が DEV-gated に変更 (consumer-actionable)\n\n> **Behavior change**: production build で `window.creoEditor` を **expose しない** が default に。 dev (Vite) では従来通り expose。\n\n```diff\n# v0.4.x — production でも expose されていた\n- <EditorHostProvider />\n+ # v0.5.0 — default は import.meta.env.DEV に追従\n+ <EditorHostProvider />                                       // dev only\n+ <EditorHostProvider config={{ exposeConsole: true }} />      // production でも明示 expose\n+ <EditorHostProvider config={{ exposeConsole: false }} />     // dev でも expose しない (CI 等)\n```\n\nCLAUDE.md EH-6 規定 (`Console REPL を production で無条件に expose しない`) への準拠です。 Vite consumer は `vite/client` を tsconfig に含めると `import.meta.env.DEV` の completion が効きます。\n\n## インストール\n\n```bash\nbun add @chronista-club/creo-ui-editor-host @chronista-club/creo-ui solid-js\n```\n\nPeer: `solid-js ^1.9.0`。`@chronista-club/creo-ui/tokens.css` を app で import しておくと、Editor Layer が `--editor-mode-*` / `--color-*` token を consume する。\n\n## Quick start\n\n```tsx\nimport { createSignal } from 'solid-js'\nimport '@chronista-club/creo-ui/tokens.css'\nimport {\n  bind,\n  cssVarNumberTarget,\n  signalTarget,\n  editorHostTarget,\n  number,\n  color,\n  select,\n  EditorHostProvider,\n  EditorLayer,\n  useEditorHost,\n  useEditorSelectable,\n} from '@chronista-club/creo-ui-editor-host'\n\nexport default function App() {\n  return (\n    <EditorHostProvider>\n      <Main />\n      <EditorLayer />\n    </EditorHostProvider>\n  )\n}\n\nfunction Main() {\n  // (1) CSS 変数を slider で編集 (Target: cssVarNumber × Control: number slider)\n  const spacing = bind({\n    target: cssVarNumberTarget('tokens.spacing.m', '--spacing-m', 16, 'px'),\n    control: number({ min: 0, max: 48, step: 1, unit: 'px', variant: 'slider' }),\n    placement: { label: 'spacing.md', semantic: 'tool', order: 0 },\n  })\n\n  // (2) 自前 signal を color picker で編集\n  const [bg, setBg] = createSignal('#73e7aa')\n  const cardBg = bind({\n    target: signalTarget('card.bg', bg, setBg),\n    control: color({ variant: 'picker' }),\n    placement: { label: 'BG', semantic: 'tool', order: 1 },\n  })\n\n  // (3) theme mode を segmented control で切替\n  const host = useEditorHost()\n  const theme = bind({\n    target: editorHostTarget('theme.mode', host, 'mint-dark'),\n    control: select(\n      ['mint-dark', 'mint-light', 'sora-dark', 'sora-light',\n       'contrast-dark', 'contrast-light', 'oldschool-dark', 'oldschool-light'],\n      'dropdown',\n    ),\n    placement: { label: 'テーマ', semantic: 'global', order: -10 },\n  })\n\n  return (\n    <article\n      ref={useEditorSelectable({ binders: [spacing, cardBg] })}\n      style={{ padding: `${spacing()}px`, background: cardBg() }}\n    >\n      <p>spacing = {spacing()}px, bg = {cardBg()}, theme = {theme()}</p>\n    </article>\n  )\n}\n```\n\n`Ctrl+Shift+E` で Editor Mode ON。\n\n> **Note (2026-08-06〜)**: panel は現在 **Discovery section 1 つだけ**に作り直し中です。\n> 「このページに居る creo-ui component を並べ、1 つ選ぶ」までが動きます。上の例のような\n> `bind()` した field を panel に描く section は次段で組み直します\n> (`bind()` 自体と host への register は従来どおり動作します)。\n\n## Live design surface (F1-F5)\n\n### F1. Console REPL — 開発中に console から slider を生やす\n\n`<EditorHostProvider>` が mount されると、DevTools Console で `window.creoEditor` 経由で API が即使える。**rebuild なしで field を追加できる**ので、デザイナとのペアワークで効く。\n\n```js\n// DevTools Console で:\ncreoEditor.slider('--spacing-m', 16, { min: 0, max: 48, unit: 'px' })\ncreoEditor.picker('--color-brand-primary', '#73e7aa')\ncreoEditor.flip('app.show-footer', true)\ncreoEditor.chooser('theme.mode', 'mint-dark', ['mint-dark', 'sora-dark', ...])\n\ncreoEditor.fields()            // 現 field list\ncreoEditor.describe('foo.bar') // 特定 field の meta + current value\n\n// Safe experiment:\nconst snap = creoEditor.snapshot()\ncreoEditor.setValue('tokens.spacing.m', 48)   // 試す\ncreoEditor.restore(snap)                        // 戻す\n\ncreoEditor.mode.enable() / disable() / toggle() / is()\ncreoEditor.help()              // 使い方 print\n```\n\nFull form も使える:\n```js\ncreoEditor.bind({\n  target: creoEditor.t.cssVarNumber('x', '--my-gap', 16, 'px'),\n  control: creoEditor.c.number({ min: 0, max: 48, variant: 'slider' }),\n  placement: { label: 'Gap', semantic: 'tool' },\n})\n```\n\n**Opt-out**: `<EditorHostProvider config={{ exposeConsole: false }}>` / **name 変更**: `config: { consoleName: 'myEditor' }`。\n\n### F2. DOM auto-discover — 既知 CSS 変数を自動 bind\n\n`:root` の computed style から `--color-*` / `--spacing-*` / `--radius-*` / `--typography-size-*` を自動検出、型を infer して slider / picker を一括生成:\n\n```js\ncreoEditor.autoDiscover()                          // default prefixes\ncreoEditor.autoDiscover({ prefixes: ['--color-'] }) // 色だけ\n```\n\n明示 `bind()` なしで既存 token が全部触れるようになる。\n\n### F2c. 選択駆動の component field — クリックしたものが編集できる\n\n**default で有効**です。Editor Mode 中に creo-ui component をクリックすると、\nその要素に効いている private tweak var (`--_btn__pad-x` 等) だけが panel に出ます。\n`data-editor-fields` の事前仕込みは要りません。\n\n```tsx\n// 何も書かなくてよい。切りたいときだけ opt-out する\n<EditorHostProvider config={{ discoverComponents: false }}>\n```\n\n引き当ての根拠は tweak var の命名規約 1 本です。\n\n```\n--_error-boundary__pad-x  →  component: error-boundary  /  knob: pad-x\n                             selector : .creo-error-boundary\n```\n\n`<component>` は実在する `.creo-<component>` class そのものなので、抽出は `__` で\nsplit するだけで終わります。CSSOM から読むのは fallback だけで `selectorText` は\n見ないため、`@media` や state 疑似といった selector 解析の落とし穴がありません。\n規約は CI (`bun run check:tweak-vars`) が守ります。\n\nindex の構築は初回アクセスまで遅延し、ノブの register は **選択したときだけ**です\n(hover や一覧の列挙では何も起きません)。\n\npanel の Discovery section には「今のページに居る component」が並びます。1 つ選ぶと\n代表要素を引き当ててノブを register し、対象に outline を出して視界へ寄せます。\n画面に無い component は既定で出しません — ノブを回しても変化が見えないためです。\n\n設計の詳細は [docs/design/editor-mode.md](../../docs/design/editor-mode.md) の\n「選択駆動の component field 解決 (F2c)」を参照してください。\n\n### F3. Export — 現 state を patch として書き出し\n\n```js\ncreoEditor.export({ format: 'json' })       // 全 field の JSON\ncreoEditor.export({ format: 'css-patch' })  // 変更分のみ CSS\ncreoEditor.export({ format: 'yaml' })       // flat YAML\n```\n\n返り値は string のみ (clipboard 操作なし、consumer 側で `copy(out)` 等)。\n\n### F4. URL shareable state\n\n```tsx\n<EditorHostProvider config={{\n  urlSync: { autoSync: true, autoApply: true, key: 'creo' },\n}}>\n```\n\nEditor で値を動かすたび `#creo=<base64>` が URL に付く。別 tab / 別 session で URL を開くと editor state が即時復元される。\n\n```js\ncreoEditor.share()   // 現 URL (更新済) を return\n```\n\n### F5. Cross-tab sync (BroadcastChannel)\n\n```tsx\n<EditorHostProvider config={{ crossTab: true }}>\n```\n\n同 origin の複数 tab で editor values を双方向 sync。デザイナが mobile と desktop の 2 tab で同時確認、slider 操作が両方に反映。\n\n## AI pair design with Claude (claude-in-chrome MCP)\n\n`window.creoEditor` が expose されると、**専用 MCP server なしで** Claude が editor を操作できる:\n\n```js\n// Claude が claude-in-chrome MCP の javascript_tool 経由で:\ncreoEditor.fields()                          // 現 editor state を inspect\ncreoEditor.slider('--spacing-m', 12, {...}) // 提案値で slider 追加\ncreoEditor.setValue('tokens.spacing.m', 20) // 直接 値変更\ncreoEditor.snapshot()                         // 実験前に保存\ncreoEditor.restore(snap)                      // 気に入らなければ戻す\ncreoEditor.export({ format: 'css-patch' })   // 最終 diff を取得\n```\n\nClaude が screenshot で結果確認 → setValue で微調整 → export で commit 候補を生成、の **rebuild なしデザイン iteration loop**。\n\n## コンセプト: Target × Control の 2 軸\n\n| 軸 | 責務 | factory 例 |\n|----|------|-----------|\n| **Target** (データ源) | \"何をどこから read/write\" | `cssVarTarget` / `cssVarNumberTarget` / `signalTarget` / `localStorageTarget` / `ephemeralTarget` / `editorHostTarget` |\n| **Control** (UI 操作体系) | \"どう編集するか (widget)\" | `number` / `color` / `boolean` / `select` / `string` / `readonlyText` |\n\n直交なので、7 × 6 = **42 種の編集体験** を factory 組み合わせだけで作れる。新 Target source (GraphQL / SurrealDB / WebSocket) や新 Control widget (oklch-sliders / gradient stops / bezier) は既存を touch せず追加可能。\n\n```\nbind({ target: T, control: C, placement: P })\n       └───data───┘└───UI───┘ └──配置──┘\n```\n\n## 4 方向 semantic layout (D-2 / D-3)\n\n| Region | Semantic | 用途 |\n|--------|----------|------|\n| **TOP** | `global` | 全体設定 / 視線の起点 (theme select / shortcut hint) |\n| **LEFT** | `source` | 時系列過去 / 参照 (ThemeEditor) |\n| **RIGHT** | `tool` | 時系列未来 / ツール (field slider / picker panel) |\n| **BOTTOM** | `utility` | ローカル utility (batch / AI chat — Phase 2 で充実) |\n\nPlacement `semantic` で field がどの region に出るか決まる。\n\n## Content 非侵襲 (D-6)\n\nEditor Layer は Content layer の座標・可視性を奪わない:\n\n- `pointer-events: none` baseline、4 region のみ `auto`\n- Mode OFF で `visibility: hidden` (Content は 100% 通常動作)\n- 4 region は `color-mix(in oklch, ...)` で半透明 + `backdrop-filter: blur(...)`\n- Mode ON/OFF で Content の DOM / layout / scroll 位置は不変\n\n## Manual toggle のみ (D-7)\n\n- `Ctrl+Shift+E` — Mode 切替 (configurable via `config.shortcut`)\n- `Escape` — selection 解除 → Mode OFF の 2 段階退出\n- `host.toggle()` / `host.mcp.enable()` — programmatic\n\n自動 ON (hover 等) は存在しない。\n\n## AI agent ready (D-10)\n\n`useEditorHost().mcp` に `listFields` / `getValue` / `setValue` / `mode` / `enable` / `disable` を expose。Phase 2b の `@chronista-club/creo-ui-editor-host-mcp` (予定) がこれを stdio MCP server として公開、Claude 等から直接 field を操作できる。\n\n```tsx\nconst host = useEditorHost()\nhost.mcp.setValue('tokens.spacing.m', 24)  // 外部から書換、chain が走る\n```\n\n## API Reference\n\n### `<EditorHostProvider config?>`\n\n```tsx\n<EditorHostProvider config={{\n  shortcut: { ctrl: true, shift: true, key: 'e' },\n  localStorageNamespace: 'my-app',\n  initialMode: 'off',\n  discoverComponents: true,  // F2c、default true。選択した component のノブを出す\n}}>\n  {children}\n</EditorHostProvider>\n```\n\n### Target factories\n\n| Factory | 説明 |\n|---------|------|\n| `cssVarTarget(id, cssVar, initial)` | CSS custom property を string で read/write |\n| `cssVarNumberTarget(id, cssVar, initial, unit='px')` | CSS 変数を number + unit で書く (slider と相性◎) |\n| `signalTarget(id, accessor, setter)` | SolidJS signal に直結 |\n| `localStorageTarget(id, initial, namespace?)` | localStorage に JSON 永続化 |\n| `ephemeralTarget(id, initial)` | in-memory + subscribe 対応 |\n| `editorHostTarget(id, host, initial)` | host.values に直結 (mcp / subscribe 全部委譲) |\n\nCustom Target は `Target<T>` を満たせば OK:\n```ts\ninterface Target<T> {\n  id: string; initial: T\n  get(): T; set(value: T): void\n  subscribe?(listener: (value: T) => void): () => void\n}\n```\n\n### Control factories\n\n| Factory | Variant | Kind |\n|---------|---------|------|\n| `number(opts?)` | `'slider' \\| 'input' \\| 'stepper'` | number |\n| `color(opts?)` | `'picker' \\| 'oklch-sliders' \\| 'palette'` | color |\n| `boolean(opts?)` | `'switch' \\| 'checkbox'` | boolean |\n| `select(options, variant?)` | `'dropdown' \\| 'segmented'` | select |\n| `string(variant?)` | `'input' \\| 'textarea'` | string |\n| `readonlyText()` | — | readonly-text |\n\n### `bind({ target, control, placement })` → `Binder<T>`\n\n```ts\ninterface Binder<T> extends Accessor<T> {\n  set(value: T): void              // host 経由の 2-way sync で書き込み\n  readonly id: string\n  readonly target: Target<T>\n  readonly control: Control<T>\n  readonly placement: Placement\n  selectable(): (el: HTMLElement) => void  // ref callback\n}\n```\n\nAccessor として読み、`.set()` で書き、`.selectable()` で selection ref を取る。\n\n### Hooks\n\n| Hook | 用途 |\n|------|------|\n| `useEditorHost()` | host 直接取得 |\n| `useEditorMode()` | `Accessor<'on' \\| 'off'>` |\n| `useEditorSelection()` | `Accessor<SelectionInfo \\| null>` |\n| `useEditorHover()` | `Accessor<SelectionInfo \\| null>` |\n| `useEditorSelectable({ binders, id? })` | `ref={...}` 用 callback。binder 配列から `data-editor-fields` を set |\n\n### Theme meta\n\n8 theme (4 family × light/dark) の公式 meta は `creo-ui@0.1.0` に同梱。consumer は `THEME_INFO[themeId]` で取得。\n\n```tsx\nimport { THEME_INFO, THEME_IDS, DEFAULT_THEME_ID, SWATCH_ROWS } from '@chronista-club/creo-ui-editor-host'\n```\n\n## ファイル構成\n\n```\nsrc/\n├── index.ts              public API\n├── types.ts              internal: EditorField / EditorHost / SelectionInfo\n├── host.ts               internal: createEditorHost() core state\n├── host.test.ts          19 cases (core)\n├── selection.ts          internal: DOM hover/click + ResizeObserver\n├── component-id.ts       ⭐ F2c: --_<component>__<knob> の split + class 抽出 (pure)\n├── component-id.test.ts  14 cases\n├── component-fields.ts   ⭐ F2c: 逆引き index + 選択時 lazy register\n├── component-fields.test.ts 11 cases\n├── shortcut.ts           internal: Ctrl+Shift+E handler\n├── provider.tsx          <EditorHostProvider> + useEditorHost()\n├── hooks.ts              public hooks (useEditorMode / Selectable 等)\n├── target.ts             ⭐ Target interface + 6 factory\n├── target.test.ts        8 cases\n├── control.ts            ⭐ Control types + 6 factory\n├── control.test.ts       5 cases\n├── binder.ts             ⭐ bind() conductor\n├── fields.tsx            internal: FieldEditor (Control kind で分岐)\n├── theme-editor.tsx      ThemeEditor (LEFT region 実装)\n├── theme-info.ts         8 theme meta + SWATCH_ROWS\n└── layer.tsx             <EditorLayer> 4 region overlay root\n```\n\n## Roadmap\n\n- ✅ Step 1-4: core state / handlers / UI / README\n- ✅ Step 5: Target × Control 分離 + `bind()`\n- ⏳ Step 6: `editor-host-v0.1.0` publish + apps/site を consumer に rewrite\n- 📋 M4: MCP server (`editor_mode_*` stdio tool)\n- 📋 M5: Swift runtime (SwiftUI + NSAppearance)\n- 📋 M6: Custom Control plugin (oklch-sliders / gradient / spline)\n\n## License\n\nApache-2.0 — [LICENSE](https://github.com/chronista-club/creo-ui/blob/main/LICENSE)\n","readmeFilename":"README.md"}