@forgeax/view 0.2.1-beta-20260924075842

package/dist/modules/chunks/chunk-ZFXZ2NUI.mjs

@@ -0,0 +1,142 @@
+import {
+  createViewSlotRegistry
+} from "./chunk-SR66S6EJ.mjs";
+import {
+  createViewPageHost,
+  createViewPageTypeRegistry
+} from "./chunk-YVQSDKAO.mjs";
+import {
+  createViewFrontendRoot
+} from "./chunk-4WXD2KYX.mjs";
+import {
+  VIEW_FRONTEND_ROOT_PROGRAM
+} from "./chunk-RXF7SBBZ.mjs";
+import {
+  workspaceBrowserEndpoint
+} from "./chunk-VY3S5BWI.mjs";
+
+// packages/viewer/src/host/frontend.mjs
+import { createFrontendHost } from "@forgeax/engine-host/frontend";
+import { createHostWebSocketClient } from "@forgeax/engine-host/transport";
+import { HOST_ASSEMBLY_CHANGED_TOPIC } from "@forgeax/engine-host/transport";
+async function resolveViewFrontendRoot(root, localConfig) {
+  if (root.program !== VIEW_FRONTEND_ROOT_PROGRAM) {
+    throw new Error(`Unexpected View frontend root: ${root.program}`);
+  }
+  return createViewFrontendRoot(localConfig);
+}
+function browserConfig(options, token) {
+  const browserConfig2 = {
+    ...options,
+    workspace: {
+      ...options.workspaceMountId === void 0 ? {} : { mountId: options.workspaceMountId },
+      clientId: options.clientId ?? "view-browser",
+      ...token === void 0 ? {} : { token },
+      ...options.resourceBrowser === void 0 ? {} : { resourceBrowser: options.resourceBrowser }
+    }
+  };
+  delete browserConfig2.workspaceMountId;
+  delete browserConfig2.clientId;
+  delete browserConfig2.resourceBrowser;
+  return browserConfig2;
+}
+async function connectViewFrontend({
+  endpoint,
+  token,
+  WebSocket: SocketConstructor = globalThis.WebSocket,
+  frontendTicket,
+  reload,
+  ...browserOptions
+} = {}) {
+  const url = workspaceBrowserEndpoint(
+    endpoint,
+    token,
+    browserOptions.window?.location?.href ?? globalThis.location?.href,
+    "frontend",
+    frontendTicket
+  );
+  if (typeof SocketConstructor !== "function") {
+    throw new TypeError("View frontend requires a browser WebSocket constructor");
+  }
+  const transport = await createHostWebSocketClient(new SocketConstructor(url));
+  let frontendHost;
+  let pendingAssembly;
+  let closed = false;
+  const location = browserOptions.window?.location ?? globalThis.location;
+  const reloadFrontend = reload ?? (typeof location?.reload === "function" ? () => location.reload() : void 0);
+  const changed = (assembly) => {
+    if (closed) return;
+    if (!frontendHost) {
+      pendingAssembly = assembly;
+      return;
+    }
+    if (frontendHost.assembly.current.revision === assembly.revision) return;
+    if (reloadFrontend) void Promise.resolve(reloadFrontend()).catch((error) => transport.close(error));
+    else transport.close(new Error("View frontend root changed; reload the page"));
+  };
+  const removeChanged = transport.subscribe(HOST_ASSEMBLY_CHANGED_TOPIC, changed);
+  try {
+    frontendHost = await createFrontendHost({
+      resolveRoot: (root) => resolveViewFrontendRoot(root, browserConfig(browserOptions, token)),
+      ...browserOptions.embedded === false ? { startupPlugins: [{
+        name: "forgeax.view.browser-shell",
+        provide: ["panelHost", "pageHost", "viewSlotRegistry"],
+        apply(ctx) {
+          ctx.provide("panelHost", browserOptions.panelHost);
+          ctx.provide("pageHost", browserOptions.pageHost);
+          ctx.provide("viewSlotRegistry", browserOptions.viewSlotRegistry);
+        }
+      }] } : {},
+      transport,
+      autoActivate: true
+    });
+    if (pendingAssembly) changed(pendingAssembly);
+  } catch (error) {
+    removeChanged();
+    transport.close("View frontend activation failed");
+    throw error;
+  }
+  return Object.freeze({
+    frontendHost,
+    transport,
+    endpoint: url,
+    async dispose(reason = "View frontend disposed") {
+      closed = true;
+      removeChanged();
+      await frontendHost.dispose();
+      transport.close(reason);
+    }
+  });
+}
+async function mountViewWorkspace(options = {}) {
+  const connection = await connectViewFrontend(options);
+  const shell = connection.frontendHost.context.get("viewWorkspaceShell", false);
+  const api = connection.frontendHost.context.get("viewOperationClient", false);
+  if (!shell || !api) {
+    await connection.dispose("View workspace plugin did not mount");
+    throw new Error("View frontend Host did not mount the workspace plugin");
+  }
+  return Object.freeze({ ...connection, api, shell });
+}
+async function mountViewViewer(options = {}) {
+  const document = options.document ?? globalThis.document;
+  const viewSlotRegistry = options.viewSlotRegistry ?? globalThis.__forgeaxViewSlotRegistry ?? createViewSlotRegistry(document);
+  globalThis.__forgeaxViewSlotRegistry = viewSlotRegistry;
+  const pageRegistry = options.pageRegistry ?? createViewPageTypeRegistry();
+  const pageHost = options.pageHost ?? createViewPageHost({ registry: pageRegistry });
+  return connectViewFrontend({
+    ...options,
+    resourceBrowser: options.resourceBrowser ?? true,
+    viewSlotRegistry,
+    pageRegistry,
+    pageHost
+  });
+}
+
+export {
+  resolveViewFrontendRoot,
+  connectViewFrontend,
+  mountViewWorkspace,
+  mountViewViewer
+};
+//# sourceMappingURL=chunk-ZFXZ2NUI.mjs.map

package/dist/modules/chunks/chunk-ZFXZ2NUI.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/viewer/src/host/frontend.mjs"],
+  "sourcesContent": ["import { createFrontendHost } from '@forgeax/engine-host/frontend';\nimport { createHostWebSocketClient } from '@forgeax/engine-host/transport';\nimport { HOST_ASSEMBLY_CHANGED_TOPIC } from '@forgeax/engine-host/transport';\nimport { workspaceBrowserEndpoint } from '@forgeax/view-workspace-core/client';\n\nimport { VIEW_FRONTEND_ROOT_PROGRAM } from '../frontend-root.mjs';\nimport { createViewFrontendRoot } from '../frontend-root.mjs';\n\nexport async function resolveViewFrontendRoot(root, localConfig) {\n  if (root.program !== VIEW_FRONTEND_ROOT_PROGRAM) {\n    throw new Error(`Unexpected View frontend root: ${root.program}`);\n  }\n  return createViewFrontendRoot(localConfig);\n}\nimport { createViewSlotRegistry } from './slot-registry.mjs';\nimport { createViewPageHost, createViewPageTypeRegistry } from './page-registry.mjs';\n\nfunction browserConfig(options, token) {\n  const browserConfig = {\n    ...options,\n    workspace: {\n      ...(options.workspaceMountId === undefined ? {} : { mountId: options.workspaceMountId }),\n      clientId: options.clientId ?? 'view-browser',\n      ...(token === undefined ? {} : { token }),\n      ...(options.resourceBrowser === undefined\n        ? {}\n        : { resourceBrowser: options.resourceBrowser }),\n    },\n  };\n  delete browserConfig.workspaceMountId;\n  delete browserConfig.clientId;\n  delete browserConfig.resourceBrowser;\n  return browserConfig;\n}\n\nexport async function connectViewFrontend({\n  endpoint,\n  token,\n  WebSocket: SocketConstructor = globalThis.WebSocket,\n  frontendTicket,\n  reload,\n  ...browserOptions\n} = {}) {\n  const url = workspaceBrowserEndpoint(\n    endpoint,\n    token,\n    browserOptions.window?.location?.href ?? globalThis.location?.href,\n    'frontend',\n    frontendTicket,\n  );\n  if (typeof SocketConstructor !== 'function') {\n    throw new TypeError('View frontend requires a browser WebSocket constructor');\n  }\n  const transport = await createHostWebSocketClient(new SocketConstructor(url));\n  let frontendHost;\n  let pendingAssembly;\n  let closed = false;\n  const location = browserOptions.window?.location ?? globalThis.location;\n  const reloadFrontend =\n    reload ??\n    (typeof location?.reload === 'function' ? () => location.reload() : undefined);\n  const changed = (assembly) => {\n    if (closed) return;\n    if (!frontendHost) { pendingAssembly = assembly; return; }\n    if (frontendHost.assembly.current.revision === assembly.revision) return;\n    if (reloadFrontend) void Promise.resolve(reloadFrontend()).catch((error) => transport.close(error));\n    else transport.close(new Error('View frontend root changed; reload the page'));\n  };\n  const removeChanged = transport.subscribe(HOST_ASSEMBLY_CHANGED_TOPIC, changed);\n  try {\n    frontendHost = await createFrontendHost({\n      resolveRoot: (root) => resolveViewFrontendRoot(root, browserConfig(browserOptions, token)),\n      ...(browserOptions.embedded === false ? { startupPlugins: [{\n        name: 'forgeax.view.browser-shell',\n        provide: ['panelHost', 'pageHost', 'viewSlotRegistry'],\n        apply(ctx) {\n          ctx.provide('panelHost', browserOptions.panelHost);\n          ctx.provide('pageHost', browserOptions.pageHost);\n          ctx.provide('viewSlotRegistry', browserOptions.viewSlotRegistry);\n        },\n      }] } : {}),\n      transport,\n      autoActivate: true,\n    });\n    if (pendingAssembly) changed(pendingAssembly);\n  } catch (error) {\n    removeChanged();\n    transport.close('View frontend activation failed');\n    throw error;\n  }\n  return Object.freeze({\n    frontendHost,\n    transport,\n    endpoint: url,\n    async dispose(reason = 'View frontend disposed') {\n      closed = true;\n      removeChanged();\n      await frontendHost.dispose();\n      transport.close(reason);\n    },\n  });\n}\n\nexport async function mountViewWorkspace(options = {}) {\n  const connection = await connectViewFrontend(options);\n  const shell = connection.frontendHost.context.get('viewWorkspaceShell', false);\n  const api = connection.frontendHost.context.get('viewOperationClient', false);\n  if (!shell || !api) {\n    await connection.dispose('View workspace plugin did not mount');\n    throw new Error('View frontend Host did not mount the workspace plugin');\n  }\n  return Object.freeze({ ...connection, api, shell });\n}\n\nexport async function mountViewViewer(options = {}) {\n  const document = options.document ?? globalThis.document;\n  const viewSlotRegistry =\n    options.viewSlotRegistry ??\n    globalThis.__forgeaxViewSlotRegistry ??\n    createViewSlotRegistry(document);\n  globalThis.__forgeaxViewSlotRegistry = viewSlotRegistry;\n  const pageRegistry = options.pageRegistry ?? createViewPageTypeRegistry();\n  const pageHost = options.pageHost ?? createViewPageHost({ registry: pageRegistry });\n  return connectViewFrontend({\n    ...options,\n    resourceBrowser: options.resourceBrowser ?? true,\n    viewSlotRegistry,\n    pageRegistry,\n    pageHost,\n  });\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA,SAAS,0BAA0B;AACnC,SAAS,iCAAiC;AAC1C,SAAS,mCAAmC;AAM5C,eAAsB,wBAAwB,MAAM,aAAa;AAC/D,MAAI,KAAK,YAAY,4BAA4B;AAC/C,UAAM,IAAI,MAAM,kCAAkC,KAAK,OAAO,EAAE;AAAA,EAClE;AACA,SAAO,uBAAuB,WAAW;AAC3C;AAIA,SAAS,cAAc,SAAS,OAAO;AACrC,QAAMA,iBAAgB;AAAA,IACpB,GAAG;AAAA,IACH,WAAW;AAAA,MACT,GAAI,QAAQ,qBAAqB,SAAY,CAAC,IAAI,EAAE,SAAS,QAAQ,iBAAiB;AAAA,MACtF,UAAU,QAAQ,YAAY;AAAA,MAC9B,GAAI,UAAU,SAAY,CAAC,IAAI,EAAE,MAAM;AAAA,MACvC,GAAI,QAAQ,oBAAoB,SAC5B,CAAC,IACD,EAAE,iBAAiB,QAAQ,gBAAgB;AAAA,IACjD;AAAA,EACF;AACA,SAAOA,eAAc;AACrB,SAAOA,eAAc;AACrB,SAAOA,eAAc;AACrB,SAAOA;AACT;AAEA,eAAsB,oBAAoB;AAAA,EACxC;AAAA,EACA;AAAA,EACA,WAAW,oBAAoB,WAAW;AAAA,EAC1C;AAAA,EACA;AAAA,EACA,GAAG;AACL,IAAI,CAAC,GAAG;AACN,QAAM,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe,QAAQ,UAAU,QAAQ,WAAW,UAAU;AAAA,IAC9D;AAAA,IACA;AAAA,EACF;AACA,MAAI,OAAO,sBAAsB,YAAY;AAC3C,UAAM,IAAI,UAAU,wDAAwD;AAAA,EAC9E;AACA,QAAM,YAAY,MAAM,0BAA0B,IAAI,kBAAkB,GAAG,CAAC;AAC5E,MAAI;AACJ,MAAI;AACJ,MAAI,SAAS;AACb,QAAM,WAAW,eAAe,QAAQ,YAAY,WAAW;AAC/D,QAAM,iBACJ,WACC,OAAO,UAAU,WAAW,aAAa,MAAM,SAAS,OAAO,IAAI;AACtE,QAAM,UAAU,CAAC,aAAa;AAC5B,QAAI,OAAQ;AACZ,QAAI,CAAC,cAAc;AAAE,wBAAkB;AAAU;AAAA,IAAQ;AACzD,QAAI,aAAa,SAAS,QAAQ,aAAa,SAAS,SAAU;AAClE,QAAI,eAAgB,MAAK,QAAQ,QAAQ,eAAe,CAAC,EAAE,MAAM,CAAC,UAAU,UAAU,MAAM,KAAK,CAAC;AAAA,QAC7F,WAAU,MAAM,IAAI,MAAM,6CAA6C,CAAC;AAAA,EAC/E;AACA,QAAM,gBAAgB,UAAU,UAAU,6BAA6B,OAAO;AAC9E,MAAI;AACF,mBAAe,MAAM,mBAAmB;AAAA,MACtC,aAAa,CAAC,SAAS,wBAAwB,MAAM,cAAc,gBAAgB,KAAK,CAAC;AAAA,MACzF,GAAI,eAAe,aAAa,QAAQ,EAAE,gBAAgB,CAAC;AAAA,QACzD,MAAM;AAAA,QACN,SAAS,CAAC,aAAa,YAAY,kBAAkB;AAAA,QACrD,MAAM,KAAK;AACT,cAAI,QAAQ,aAAa,eAAe,SAAS;AACjD,cAAI,QAAQ,YAAY,eAAe,QAAQ;AAC/C,cAAI,QAAQ,oBAAoB,eAAe,gBAAgB;AAAA,QACjE;AAAA,MACF,CAAC,EAAE,IAAI,CAAC;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB,CAAC;AACD,QAAI,gBAAiB,SAAQ,eAAe;AAAA,EAC9C,SAAS,OAAO;AACd,kBAAc;AACd,cAAU,MAAM,iCAAiC;AACjD,UAAM;AAAA,EACR;AACA,SAAO,OAAO,OAAO;AAAA,IACnB;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM,QAAQ,SAAS,0BAA0B;AAC/C,eAAS;AACT,oBAAc;AACd,YAAM,aAAa,QAAQ;AAC3B,gBAAU,MAAM,MAAM;AAAA,IACxB;AAAA,EACF,CAAC;AACH;AAEA,eAAsB,mBAAmB,UAAU,CAAC,GAAG;AACrD,QAAM,aAAa,MAAM,oBAAoB,OAAO;AACpD,QAAM,QAAQ,WAAW,aAAa,QAAQ,IAAI,sBAAsB,KAAK;AAC7E,QAAM,MAAM,WAAW,aAAa,QAAQ,IAAI,uBAAuB,KAAK;AAC5E,MAAI,CAAC,SAAS,CAAC,KAAK;AAClB,UAAM,WAAW,QAAQ,qCAAqC;AAC9D,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO,OAAO,OAAO,EAAE,GAAG,YAAY,KAAK,MAAM,CAAC;AACpD;AAEA,eAAsB,gBAAgB,UAAU,CAAC,GAAG;AAClD,QAAM,WAAW,QAAQ,YAAY,WAAW;AAChD,QAAM,mBACJ,QAAQ,oBACR,WAAW,6BACX,uBAAuB,QAAQ;AACjC,aAAW,4BAA4B;AACvC,QAAM,eAAe,QAAQ,gBAAgB,2BAA2B;AACxE,QAAM,WAAW,QAAQ,YAAY,mBAAmB,EAAE,UAAU,aAAa,CAAC;AAClF,SAAO,oBAAoB;AAAA,IACzB,GAAG;AAAA,IACH,iBAAiB,QAAQ,mBAAmB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "names": ["browserConfig"]
+}

package/dist/modules/chunks/chunk-ZLNWF4ET.mjs

@@ -0,0 +1,9 @@
+// packages/viewer/src/plugins/shell-identity.mjs
+var SHELL_PLUGIN_ID = "forgeax.view.shell.workspace.frontend";
+var SHELL_MODULE = "@forgeax/view/shell/frontend";
+
+export {
+  SHELL_PLUGIN_ID,
+  SHELL_MODULE
+};
+//# sourceMappingURL=chunk-ZLNWF4ET.mjs.map

package/dist/modules/chunks/chunk-ZLNWF4ET.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/viewer/src/plugins/shell-identity.mjs"],
+  "sourcesContent": ["export const SHELL_PLUGIN_ID = 'forgeax.view.shell.workspace.frontend';\nexport const SHELL_MODULE = '@forgeax/view/shell/frontend';\n"],
+  "mappings": ";AAAO,IAAM,kBAAkB;AACxB,IAAM,eAAe;",
+  "names": []
+}

package/dist/modules/chunks/chunk-ZLU5QW2O.mjs

@@ -0,0 +1,9 @@
+// packages/view-components/src/styles.css
+var css = '/* packages/view-components/src/styles/tokens.css */\n:root {\n  --fx-ref-color-neutral-0: #FFFFFF;\n  --fx-ref-color-neutral-25: #FCFCFC;\n  --fx-ref-color-neutral-50: #F5F5F6;\n  --fx-ref-color-neutral-100: #EDEDED;\n  --fx-ref-color-neutral-200: #E6E6E7;\n  --fx-ref-color-neutral-300: #C7C7C8;\n  --fx-ref-color-neutral-400: #A0A0A2;\n  --fx-ref-color-neutral-500: #77777A;\n  --fx-ref-color-neutral-600: #626366;\n  --fx-ref-color-neutral-700: #48494C;\n  --fx-ref-color-neutral-800: #333438;\n  --fx-ref-color-neutral-850: #292A2D;\n  --fx-ref-color-neutral-900: #222326;\n  --fx-ref-color-neutral-950: #1A1C1F;\n  --fx-ref-color-neutral-1000: #111214;\n  --fx-ref-color-blue-50: #F0F5FB;\n  --fx-ref-color-blue-300: #8CB7E8;\n  --fx-ref-color-blue-400: #0A84FF;\n  --fx-ref-color-blue-500: #007AFF;\n  --fx-ref-color-blue-600: #2868AE;\n  --fx-ref-color-blue-700: #2563A5;\n  --fx-ref-color-blue-950: #1C2A3A;\n  --fx-ref-color-brand-50: #EFF5DB;\n  --fx-ref-color-brand-400: #C5DD78;\n  --fx-ref-color-brand-700: #50631F;\n  --fx-ref-color-brand-950: #29351D;\n  --fx-ref-color-green-50: #EAF5EE;\n  --fx-ref-color-green-300: #8ED6A7;\n  --fx-ref-color-green-700: #246444;\n  --fx-ref-color-green-950: #173327;\n  --fx-ref-color-amber-50: #FFF4D9;\n  --fx-ref-color-amber-300: #FFD387;\n  --fx-ref-color-amber-800: #775014;\n  --fx-ref-color-amber-950: #382B13;\n  --fx-ref-color-red-50: #FFF0F1;\n  --fx-ref-color-red-300: #FFADB3;\n  --fx-ref-color-red-700: #B53440;\n  --fx-ref-color-red-950: #3C2027;\n  --fx-ref-space-0: 0px;\n  --fx-ref-space-2: 2px;\n  --fx-ref-space-4: 4px;\n  --fx-ref-space-6: 6px;\n  --fx-ref-space-8: 8px;\n  --fx-ref-space-12: 12px;\n  --fx-ref-space-16: 16px;\n  --fx-ref-space-24: 24px;\n  --fx-ref-space-32: 32px;\n  --fx-ref-space-48: 48px;\n  --fx-ref-space-64: 64px;\n  --fx-ref-radius-0: 0px;\n  --fx-ref-radius-4: 4px;\n  --fx-ref-radius-8: 8px;\n  --fx-ref-radius-12: 12px;\n  --fx-ref-radius-16: 16px;\n  --fx-ref-radius-24: 24px;\n  --fx-ref-radius-9999: 9999px;\n  --fx-ref-font-sans:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    "PingFang SC",\n    "Microsoft YaHei",\n    sans-serif;\n  --fx-ref-font-mono:\n    SFMono-Regular,\n    Consolas,\n    "Liberation Mono",\n    Menlo,\n    monospace;\n  --fx-ref-font-size-12: 12px;\n  --fx-ref-font-size-13: 13px;\n  --fx-ref-font-size-14: 14px;\n  --fx-ref-font-size-15: 15px;\n  --fx-ref-font-size-16: 16px;\n  --fx-ref-font-size-20: 20px;\n  --fx-ref-font-size-24: 24px;\n  --fx-ref-font-weight-400: 400;\n  --fx-ref-font-weight-500: 500;\n  --fx-ref-font-weight-600: 600;\n  --fx-ref-duration-0: 0ms;\n  --fx-ref-duration-80: 80ms;\n  --fx-ref-duration-140: 140ms;\n  --fx-ref-duration-200: 200ms;\n  --fx-ref-duration-280: 280ms;\n  --fx-ref-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --fx-ref-easing-linear: cubic-bezier(0, 0, 1, 1);\n  --fx-type-body-font-family: var(--fx-ref-font-sans);\n  --fx-type-body-font-size: var(--fx-ref-font-size-15);\n  --fx-type-body-font-weight: var(--fx-ref-font-weight-400);\n  --fx-type-body-line-height: 1.65;\n  --fx-type-body-letter-spacing: 0px;\n  --fx-type-ui-font-family: var(--fx-ref-font-sans);\n  --fx-type-ui-font-size: var(--fx-ref-font-size-14);\n  --fx-type-ui-font-weight: var(--fx-ref-font-weight-400);\n  --fx-type-ui-line-height: 1.5;\n  --fx-type-ui-letter-spacing: 0px;\n  --fx-type-label-font-family: var(--fx-ref-font-sans);\n  --fx-type-label-font-size: var(--fx-ref-font-size-14);\n  --fx-type-label-font-weight: var(--fx-ref-font-weight-400);\n  --fx-type-label-line-height: 1.5;\n  --fx-type-label-letter-spacing: 0px;\n  --fx-type-compact-font-family: var(--fx-ref-font-sans);\n  --fx-type-compact-font-size: var(--fx-ref-font-size-13);\n  --fx-type-compact-font-weight: var(--fx-ref-font-weight-400);\n  --fx-type-compact-line-height: 1.5;\n  --fx-type-compact-letter-spacing: 0px;\n  --fx-type-caption-font-family: var(--fx-ref-font-sans);\n  --fx-type-caption-font-size: var(--fx-ref-font-size-12);\n  --fx-type-caption-font-weight: var(--fx-ref-font-weight-400);\n  --fx-type-caption-line-height: 1.5;\n  --fx-type-caption-letter-spacing: 0px;\n  --fx-type-heading-font-family: var(--fx-ref-font-sans);\n  --fx-type-heading-font-size: var(--fx-ref-font-size-16);\n  --fx-type-heading-font-weight: var(--fx-ref-font-weight-500);\n  --fx-type-heading-line-height: 1.5;\n  --fx-type-heading-letter-spacing: 0px;\n  --fx-type-title-font-family: var(--fx-ref-font-sans);\n  --fx-type-title-font-size: var(--fx-ref-font-size-20);\n  --fx-type-title-font-weight: var(--fx-ref-font-weight-500);\n  --fx-type-title-line-height: 1.4;\n  --fx-type-title-letter-spacing: 0px;\n  --fx-type-code-font-family: var(--fx-ref-font-mono);\n  --fx-type-code-font-size: var(--fx-ref-font-size-13);\n  --fx-type-code-font-weight: var(--fx-ref-font-weight-400);\n  --fx-type-code-line-height: 1.6;\n  --fx-type-code-letter-spacing: 0px;\n  --fx-space-inline: var(--fx-ref-space-6);\n  --fx-space-control: var(--fx-ref-space-8);\n  --fx-space-stack: var(--fx-ref-space-12);\n  --fx-space-section: var(--fx-ref-space-24);\n  --fx-space-page: var(--fx-ref-space-32);\n  --fx-radius-control: var(--fx-ref-radius-8);\n  --fx-radius-card: var(--fx-ref-radius-12);\n  --fx-radius-popover: var(--fx-ref-radius-12);\n  --fx-radius-dialog: var(--fx-ref-radius-16);\n  --fx-radius-composer: var(--fx-ref-radius-24);\n  --fx-radius-pill: var(--fx-ref-radius-9999);\n  --fx-border-width: 1px;\n  --fx-border-focus-width: 2px;\n  --fx-border-focus-offset: 2px;\n  --fx-motion-feedback: var(--fx-ref-duration-80);\n  --fx-motion-hover: var(--fx-ref-duration-140);\n  --fx-motion-expand: var(--fx-ref-duration-200);\n  --fx-motion-panel: var(--fx-ref-duration-280);\n  --fx-motion-ease: var(--fx-ref-easing-standard);\n  --fx-layer-content: 0;\n  --fx-layer-sticky: 10;\n  --fx-layer-popover: 100;\n  --fx-layer-dialog: 1000;\n  --fx-layer-toast: 1100;\n  --fx-layer-tooltip: 1200;\n  --fx-component-control-height-compact: 28px;\n  --fx-component-control-height-default: 32px;\n  --fx-component-control-height-large: 44px;\n  --fx-component-control-icon-size: 16px;\n  --fx-component-control-icon-hit-area-min: 24px;\n  --fx-component-field-height-default: 36px;\n  --fx-component-navigation-row-height: 36px;\n  --fx-component-navigation-rail-width: 64px;\n  --fx-component-editor-row-height: 28px;\n  --fx-component-panel-header-height: 40px;\n  --fx-component-panel-config-min-width: 246px;\n  --fx-component-panel-config-max-width: 272px;\n  --fx-component-panel-chat-min-width: 360px;\n  --fx-component-panel-chat-default-width: 420px;\n  --fx-component-conversation-max-width: 720px;\n  --fx-component-conversation-message-gap: var(--fx-ref-space-24);\n  --fx-component-composer-radius: var(--fx-radius-composer);\n  --fx-component-composer-min-height: 96px;\n  --fx-component-composer-text-max-height: 240px;\n  --fx-component-dialog-max-width: 560px;\n  --fx-component-dialog-padding: var(--fx-ref-space-24);\n  --fx-component-menu-min-width: 240px;\n  --fx-component-menu-row-height: 36px;\n  --fx-component-tooltip-delay: 400ms;\n  --fx-component-status-spinner-duration: 1000ms;\n  --fx-component-button-radius: var(--fx-radius-pill);\n  --fx-component-choice-size: 14px;\n  --fx-component-choice-dot-size: 8px;\n  --fx-component-range-width: 88px;\n}\n:root,\n[data-theme=light] {\n  color-scheme: light;\n  --fx-color-surface-canvas: var(--fx-ref-color-neutral-0);\n  --fx-color-surface-sidebar: var(--fx-ref-color-neutral-50);\n  --fx-color-surface-raised: var(--fx-ref-color-neutral-0);\n  --fx-color-surface-inset: var(--fx-ref-color-neutral-25);\n  --fx-color-surface-hover: var(--fx-ref-color-neutral-100);\n  --fx-color-surface-selected: var(--fx-ref-color-neutral-100);\n  --fx-color-text-primary: var(--fx-ref-color-neutral-950);\n  --fx-color-text-secondary: var(--fx-ref-color-neutral-600);\n  --fx-color-text-muted: var(--fx-ref-color-neutral-600);\n  --fx-color-text-disabled: var(--fx-ref-color-neutral-400);\n  --fx-color-text-inverse: var(--fx-ref-color-neutral-0);\n  --fx-color-text-link: var(--fx-ref-color-blue-700);\n  --fx-color-border-subtle: var(--fx-ref-color-neutral-100);\n  --fx-color-border-default: var(--fx-ref-color-neutral-200);\n  --fx-color-border-control: var(--fx-ref-color-neutral-200);\n  --fx-color-border-strong: var(--fx-ref-color-neutral-600);\n  --fx-color-border-focus: var(--fx-ref-color-neutral-600);\n  --fx-color-border-essential: var(--fx-ref-color-neutral-500);\n  --fx-color-action-primary-bg: var(--fx-ref-color-neutral-950);\n  --fx-color-action-primary-fg: var(--fx-ref-color-neutral-0);\n  --fx-color-action-primary-hover: var(--fx-ref-color-neutral-800);\n  --fx-color-action-primary-pressed: var(--fx-ref-color-neutral-1000);\n  --fx-color-action-secondary-bg: var(--fx-ref-color-neutral-0);\n  --fx-color-action-secondary-fg: var(--fx-ref-color-neutral-950);\n  --fx-color-action-secondary-hover: var(--fx-ref-color-neutral-100);\n  --fx-color-action-disabled-bg: var(--fx-ref-color-neutral-100);\n  --fx-color-action-disabled-fg: var(--fx-ref-color-neutral-400);\n  --fx-color-action-danger-bg: var(--fx-ref-color-red-700);\n  --fx-color-action-danger-fg: var(--fx-ref-color-neutral-0);\n  --fx-color-selection-bg: var(--fx-ref-color-neutral-100);\n  --fx-color-selection-fg: var(--fx-ref-color-neutral-950);\n  --fx-color-selection-indicator: var(--fx-ref-color-neutral-950);\n  --fx-color-brand-accent: var(--fx-ref-color-brand-400);\n  --fx-color-brand-text: var(--fx-ref-color-brand-700);\n  --fx-color-brand-soft: var(--fx-ref-color-brand-50);\n  --fx-color-brand-on-accent: var(--fx-ref-color-neutral-950);\n  --fx-color-status-success-fg: var(--fx-ref-color-green-700);\n  --fx-color-status-success-bg: var(--fx-ref-color-green-50);\n  --fx-color-status-warning-fg: var(--fx-ref-color-amber-800);\n  --fx-color-status-warning-bg: var(--fx-ref-color-amber-50);\n  --fx-color-status-error-fg: var(--fx-ref-color-red-700);\n  --fx-color-status-error-bg: var(--fx-ref-color-red-50);\n  --fx-color-status-info-fg: var(--fx-ref-color-blue-700);\n  --fx-color-status-info-bg: var(--fx-ref-color-blue-50);\n  --fx-color-scrim: #0F131A66;\n  --fx-color-choice-indicator: var(--fx-ref-color-blue-500);\n  --fx-shadow-subtle: 0px 1px 3px 0px #0000000D;\n  --fx-shadow-floating: 0px 8px 28px 0px #00000024;\n  --fx-shadow-dialog: 0px 16px 48px 0px #00000033;\n}\n[data-theme=dark] {\n  color-scheme: dark;\n  --fx-color-surface-canvas: var(--fx-ref-color-neutral-950);\n  --fx-color-surface-sidebar: var(--fx-ref-color-neutral-900);\n  --fx-color-surface-raised: var(--fx-ref-color-neutral-850);\n  --fx-color-surface-inset: var(--fx-ref-color-neutral-1000);\n  --fx-color-surface-hover: var(--fx-ref-color-neutral-800);\n  --fx-color-surface-selected: var(--fx-ref-color-neutral-800);\n  --fx-color-text-primary: var(--fx-ref-color-neutral-100);\n  --fx-color-text-secondary: var(--fx-ref-color-neutral-300);\n  --fx-color-text-muted: var(--fx-ref-color-neutral-400);\n  --fx-color-text-disabled: var(--fx-ref-color-neutral-600);\n  --fx-color-text-inverse: var(--fx-ref-color-neutral-950);\n  --fx-color-text-link: var(--fx-ref-color-blue-300);\n  --fx-color-border-subtle: var(--fx-ref-color-neutral-800);\n  --fx-color-border-default: var(--fx-ref-color-neutral-700);\n  --fx-color-border-control: var(--fx-ref-color-neutral-700);\n  --fx-color-border-strong: var(--fx-ref-color-neutral-300);\n  --fx-color-border-focus: var(--fx-ref-color-neutral-300);\n  --fx-color-border-essential: var(--fx-ref-color-neutral-400);\n  --fx-color-action-primary-bg: var(--fx-ref-color-neutral-100);\n  --fx-color-action-primary-fg: var(--fx-ref-color-neutral-950);\n  --fx-color-action-primary-hover: var(--fx-ref-color-neutral-0);\n  --fx-color-action-primary-pressed: var(--fx-ref-color-neutral-200);\n  --fx-color-action-secondary-bg: var(--fx-ref-color-neutral-850);\n  --fx-color-action-secondary-fg: var(--fx-ref-color-neutral-100);\n  --fx-color-action-secondary-hover: var(--fx-ref-color-neutral-800);\n  --fx-color-action-disabled-bg: var(--fx-ref-color-neutral-800);\n  --fx-color-action-disabled-fg: var(--fx-ref-color-neutral-500);\n  --fx-color-action-danger-bg: var(--fx-ref-color-red-300);\n  --fx-color-action-danger-fg: var(--fx-ref-color-neutral-1000);\n  --fx-color-selection-bg: var(--fx-ref-color-neutral-800);\n  --fx-color-selection-fg: var(--fx-ref-color-neutral-100);\n  --fx-color-selection-indicator: var(--fx-ref-color-neutral-300);\n  --fx-color-brand-accent: var(--fx-ref-color-brand-400);\n  --fx-color-brand-text: var(--fx-ref-color-brand-400);\n  --fx-color-brand-soft: var(--fx-ref-color-brand-950);\n  --fx-color-brand-on-accent: var(--fx-ref-color-neutral-950);\n  --fx-color-status-success-fg: var(--fx-ref-color-green-300);\n  --fx-color-status-success-bg: var(--fx-ref-color-green-950);\n  --fx-color-status-warning-fg: var(--fx-ref-color-amber-300);\n  --fx-color-status-warning-bg: var(--fx-ref-color-amber-950);\n  --fx-color-status-error-fg: var(--fx-ref-color-red-300);\n  --fx-color-status-error-bg: var(--fx-ref-color-red-950);\n  --fx-color-status-info-fg: var(--fx-ref-color-blue-300);\n  --fx-color-status-info-bg: var(--fx-ref-color-blue-950);\n  --fx-color-scrim: #00000099;\n  --fx-color-choice-indicator: var(--fx-ref-color-blue-400);\n  --fx-shadow-subtle: 0px 1px 3px 0px #00000033;\n  --fx-shadow-floating: 0px 8px 28px 0px #00000066;\n  --fx-shadow-dialog: 0px 16px 48px 0px #00000080;\n}\n@media (prefers-reduced-motion: reduce) {\n  :root,\n  [data-theme] {\n    --fx-motion-feedback: 0ms;\n    --fx-motion-hover: 0ms;\n    --fx-motion-expand: 0ms;\n    --fx-motion-panel: 0ms;\n  }\n}\n\n/* packages/view-components/src/styles/components.css */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n.fx-ui {\n  color: var(--fx-color-text-primary);\n  font-family: var(--fx-type-ui-font-family);\n  font-size: var(--fx-type-ui-font-size);\n  font-weight: var(--fx-type-ui-font-weight);\n  line-height: var(--fx-type-ui-line-height);\n}\n.fx-ui :where(button, input, select, textarea) {\n  color: inherit;\n  font: inherit;\n}\n.fx-ui :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\n  outline-offset: var(--fx-border-focus-offset);\n}\n.fx-text {\n  margin: 0;\n}\n.fx-text--title {\n  font: var(--fx-type-title-font-weight) var(--fx-type-title-font-size)/var(--fx-type-title-line-height) var(--fx-type-title-font-family);\n}\n.fx-text--heading {\n  font: var(--fx-type-heading-font-weight) var(--fx-type-heading-font-size)/var(--fx-type-heading-line-height) var(--fx-type-heading-font-family);\n}\n.fx-text--body {\n  font: var(--fx-type-body-font-weight) var(--fx-type-body-font-size)/var(--fx-type-body-line-height) var(--fx-type-body-font-family);\n}\n.fx-text--ui {\n  font: var(--fx-type-ui-font-weight) var(--fx-type-ui-font-size)/var(--fx-type-ui-line-height) var(--fx-type-ui-font-family);\n}\n.fx-text--label {\n  font: var(--fx-type-label-font-weight) var(--fx-type-label-font-size)/var(--fx-type-label-line-height) var(--fx-type-label-font-family);\n}\n.fx-text--compact {\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\n}\n.fx-text--caption {\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n}\n.fx-text--code {\n  font: var(--fx-type-code-font-weight) var(--fx-type-code-font-size)/var(--fx-type-code-line-height) var(--fx-type-code-font-family);\n}\n.fx-text--secondary {\n  color: var(--fx-color-text-secondary);\n}\n.fx-text--muted {\n  color: var(--fx-color-text-muted);\n}\n.fx-surface {\n  color: var(--fx-color-text-primary);\n}\n.fx-surface--canvas {\n  background: var(--fx-color-surface-canvas);\n}\n.fx-surface--sidebar {\n  background: var(--fx-color-surface-sidebar);\n}\n.fx-surface--raised {\n  background: var(--fx-color-surface-raised);\n}\n.fx-surface--inset {\n  background: var(--fx-color-surface-inset);\n}\n.fx-surface--card {\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-card);\n}\n.fx-divider {\n  width: 100%;\n  height: var(--fx-border-width);\n  border: 0;\n  background: var(--fx-color-border-subtle);\n}\n.fx-link {\n  color: var(--fx-color-text-link);\n  text-decoration: none;\n}\n.fx-link:hover {\n  text-decoration: underline;\n}\n.fx-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--fx-space-inline);\n  min-height: var(--fx-component-control-height-default);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-12);\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-component-button-radius);\n  background: var(--fx-color-action-secondary-bg);\n  color: var(--fx-color-action-secondary-fg);\n  cursor: pointer;\n  font-weight: 400;\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background-color var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.fx-button:hover:not(:disabled) {\n  background: var(--fx-color-action-secondary-hover);\n}\n.fx-button:active:not(:disabled) {\n  transform: translateY(var(--fx-border-width));\n}\n.fx-button--primary {\n  border-color: transparent;\n  background: var(--fx-color-action-primary-bg);\n  color: var(--fx-color-action-primary-fg);\n}\n.fx-button--primary:hover:not(:disabled) {\n  background: var(--fx-color-action-primary-hover);\n}\n.fx-button--primary:active:not(:disabled) {\n  background: var(--fx-color-action-primary-pressed);\n}\n.fx-button--quiet {\n  border-color: transparent;\n  background: transparent;\n}\n.fx-button--quiet:hover:not(:disabled) {\n  background: var(--fx-color-surface-hover);\n}\n.fx-button--danger {\n  border-color: transparent;\n  background: var(--fx-color-action-danger-bg);\n  color: var(--fx-color-action-danger-fg);\n}\n.fx-button:disabled:not([aria-busy=true]),\n.fx-button[aria-disabled=true] {\n  border-color: transparent;\n  background: var(--fx-color-action-disabled-bg);\n  color: var(--fx-color-action-disabled-fg);\n  cursor: not-allowed;\n}\n.fx-button[aria-busy=true] {\n  cursor: progress;\n}\n.fx-button--compact {\n  min-height: var(--fx-component-control-height-compact);\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-12);\n  font-size: var(--fx-type-caption-font-size);\n  line-height: var(--fx-type-caption-line-height);\n}\n.fx-button--large {\n  min-height: var(--fx-component-control-height-large);\n  padding: var(--fx-ref-space-8) calc(var(--fx-ref-space-16) + var(--fx-ref-space-2));\n}\n.fx-button--icon {\n  width: var(--fx-component-control-height-default);\n  padding: 0;\n}\n.fx-button--icon.fx-button--compact {\n  width: var(--fx-component-control-height-compact);\n}\n.fx-button--icon.fx-button--large {\n  width: var(--fx-component-control-height-large);\n}\n.fx-button__spinner {\n  width: var(--fx-component-choice-size);\n  height: var(--fx-component-choice-size);\n  animation: fx-spin var(--fx-component-status-spinner-duration) linear infinite;\n}\n.fx-icon {\n  width: var(--fx-component-control-icon-size);\n  height: var(--fx-component-control-icon-size);\n  flex: 0 0 auto;\n  stroke-width: 1.5;\n}\n.fx-field {\n  display: grid;\n  gap: var(--fx-ref-space-6);\n  min-width: 0;\n}\n.fx-field__label {\n  color: var(--fx-color-text-primary);\n  font: var(--fx-type-label-font-weight) var(--fx-type-label-font-size)/var(--fx-type-label-line-height) var(--fx-type-label-font-family);\n}\n.fx-field__note {\n  margin: 0;\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n}\n.fx-field__error {\n  color: var(--fx-color-status-error-fg);\n}\n.fx-input {\n  width: 100%;\n  min-width: 0;\n  height: var(--fx-component-field-height-default);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-12);\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-radius-control);\n  outline: 0;\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-primary);\n}\n.fx-input::placeholder {\n  color: var(--fx-color-text-muted);\n}\n.fx-input:focus-visible {\n  border-color: var(--fx-color-border-essential);\n}\n.fx-input:disabled {\n  color: var(--fx-color-text-disabled);\n  background: var(--fx-color-action-disabled-bg);\n}\ntextarea.fx-input {\n  min-height: calc(var(--fx-ref-space-48) + var(--fx-ref-space-32));\n  max-height: var(--fx-component-composer-text-max-height);\n  height: auto;\n  resize: vertical;\n  line-height: var(--fx-type-body-line-height);\n}\n.fx-choice {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--fx-space-control);\n  min-height: var(--fx-component-control-height-compact);\n  cursor: pointer;\n}\n.fx-choice__text {\n  display: grid;\n  gap: var(--fx-ref-space-2);\n  min-width: 0;\n  padding-top: calc((var(--fx-component-choice-size) - var(--fx-type-ui-line-height)) / 2);\n}\n.fx-choice__label {\n  color: var(--fx-color-text-primary);\n  font: var(--fx-type-ui-font-weight) var(--fx-type-ui-font-size)/var(--fx-type-ui-line-height) var(--fx-type-ui-font-family);\n}\n.fx-choice__description {\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n}\n.fx-choice input {\n  appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: 0 0 var(--fx-component-choice-size);\n  width: var(--fx-component-choice-size);\n  height: var(--fx-component-choice-size);\n  margin: 0;\n  border: var(--fx-border-width) solid var(--fx-color-border-essential);\n  background: var(--fx-color-surface-raised);\n  cursor: pointer;\n  transition: border-color var(--fx-motion-hover) var(--fx-motion-ease), background-color var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.fx-choice input:hover:not(:disabled) {\n  border-color: var(--fx-color-border-control);\n  background: var(--fx-color-surface-hover);\n}\n.fx-choice input:focus-visible {\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\n  outline-offset: var(--fx-border-focus-offset);\n}\n.fx-choice input::before {\n  content: "";\n  transition: transform var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.fx-choice--radio input {\n  border-radius: 50%;\n}\n.fx-choice--radio input::before {\n  width: var(--fx-component-choice-dot-size);\n  height: var(--fx-component-choice-dot-size);\n  border-radius: 50%;\n  background: var(--fx-color-choice-indicator);\n  transform: scale(0);\n}\n.fx-choice--radio input:checked {\n  border-color: var(--fx-color-choice-indicator);\n}\n.fx-choice--radio input:checked::before {\n  transform: scale(1);\n}\n.fx-choice--checkbox input {\n  border-radius: var(--fx-ref-radius-4);\n}\n.fx-choice--checkbox input::before {\n  width: 3px;\n  height: 7px;\n  margin-top: -1px;\n  border: solid var(--fx-color-surface-raised);\n  border-width: 0 2px 2px 0;\n  background: transparent;\n  transform: rotate(45deg) scale(0);\n}\n.fx-choice--checkbox input:checked {\n  border-color: var(--fx-color-choice-indicator);\n  background: var(--fx-color-choice-indicator);\n}\n.fx-choice--checkbox input:checked:hover:not(:disabled) {\n  background: var(--fx-color-choice-indicator);\n}\n.fx-choice--checkbox input:checked::before {\n  transform: rotate(45deg) scale(1);\n}\n.fx-choice--checkbox input[type=checkbox]:indeterminate {\n  border-color: var(--fx-color-choice-indicator);\n  background: var(--fx-color-surface-raised);\n}\n.fx-choice--checkbox input[type=checkbox]:indeterminate::before {\n  width: calc(var(--fx-component-choice-dot-size) + var(--fx-ref-space-2));\n  height: calc(var(--fx-ref-space-2) + var(--fx-border-width));\n  margin-top: 0;\n  border: 0;\n  border-radius: var(--fx-ref-radius-4);\n  background: var(--fx-color-choice-indicator);\n  transform: scale(1);\n}\n.fx-choice input:disabled {\n  cursor: not-allowed;\n  opacity: .45;\n}\n.fx-choice-set {\n  display: grid;\n  gap: var(--fx-ref-space-8);\n  min-width: 0;\n}\n.fx-choice-set__legend {\n  color: var(--fx-color-text-primary);\n  font: var(--fx-type-label-font-weight) var(--fx-type-label-font-size)/var(--fx-type-label-line-height) var(--fx-type-label-font-family);\n}\n.fx-choice-group {\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  gap: var(--fx-ref-space-16);\n}\n.fx-choice-group--vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--fx-ref-space-8);\n}\n.fx-range {\n  --fx-range-track-height: 3px;\n  --fx-range-thumb-size: 10px;\n  width: var(--fx-component-range-width, 88px);\n  height: var(--fx-component-control-height-compact);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.fx-range:focus-visible {\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\n  outline-offset: var(--fx-border-focus-offset);\n  border-radius: var(--fx-radius-control);\n}\n.fx-range:disabled {\n  cursor: not-allowed;\n  opacity: .45;\n}\n.fx-range::-webkit-slider-runnable-track {\n  height: var(--fx-range-track-height);\n  border-radius: 999px;\n  background: var(--fx-color-border-subtle);\n}\n.fx-range::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: var(--fx-range-thumb-size);\n  height: var(--fx-range-thumb-size);\n  margin-top: calc((var(--fx-range-track-height) - var(--fx-range-thumb-size)) / 2);\n  border: 0;\n  border-radius: 999px;\n  background: var(--fx-color-selection-indicator);\n}\n.fx-range::-moz-range-track {\n  height: var(--fx-range-track-height);\n  border: 0;\n  border-radius: 999px;\n  background: var(--fx-color-border-subtle);\n}\n.fx-range::-moz-range-thumb {\n  width: var(--fx-range-thumb-size);\n  height: var(--fx-range-thumb-size);\n  border: 0;\n  border-radius: 999px;\n  background: var(--fx-color-selection-indicator);\n}\n.fx-range::-moz-range-progress {\n  height: var(--fx-range-track-height);\n  border-radius: 999px;\n  background: var(--fx-color-text-muted);\n}\n.fx-switch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--fx-ref-space-12);\n  border: 0;\n  padding: 0;\n  background: transparent;\n  color: var(--fx-color-text-secondary);\n  cursor: pointer;\n  text-align: left;\n}\n.fx-switch:hover:not(:disabled) {\n  color: var(--fx-color-text-primary);\n}\n.fx-switch:disabled {\n  cursor: not-allowed;\n  opacity: .45;\n}\n.fx-switch--row {\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  border-radius: var(--fx-radius-control);\n}\n.fx-switch--row:hover:not(:disabled) {\n  background: var(--fx-color-surface-hover);\n}\n.fx-switch__label {\n  color: inherit;\n  font: inherit;\n}\n.fx-switch__track {\n  position: relative;\n  width: 28px;\n  height: 16px;\n  flex: 0 0 auto;\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: 999px;\n  background: var(--fx-color-surface-inset);\n  transition: background-color var(--fx-motion-hover) var(--fx-motion-ease), border-color var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.fx-switch__thumb {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 8px;\n  height: 8px;\n  border-radius: 999px;\n  background: var(--fx-color-text-muted);\n  transition: left var(--fx-motion-hover) var(--fx-motion-ease), background-color var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.fx-switch[aria-checked=true] .fx-switch__track {\n  border-color: var(--fx-color-border-default);\n  background: var(--fx-color-surface-selected);\n}\n.fx-switch[aria-checked=true] .fx-switch__thumb {\n  left: 15px;\n  background: var(--fx-color-selection-indicator);\n}\n.fx-segmented {\n  display: flex;\n  gap: var(--fx-ref-space-4);\n}\n.fx-segmented__item {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  gap: var(--fx-ref-space-4);\n  min-height: var(--fx-component-control-height-large);\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-muted);\n  cursor: pointer;\n  font-size: var(--fx-type-caption-font-size);\n  transition:\n    background-color var(--fx-motion-hover) var(--fx-motion-ease),\n    color var(--fx-motion-hover) var(--fx-motion-ease),\n    border-color var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.fx-segmented__item:hover:not(:disabled) {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.fx-segmented__item[data-checked=true] {\n  border-color: var(--fx-color-border-default);\n  background: var(--fx-color-surface-selected);\n  color: var(--fx-color-text-primary);\n}\n.fx-segmented__item--stacked {\n  flex-direction: column;\n  min-height: 48px;\n}\n.fx-segmented__item:disabled {\n  cursor: not-allowed;\n  color: var(--fx-color-text-disabled);\n}\n.fx-visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n.fx-status {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--fx-ref-space-6);\n  color: var(--fx-status-fg);\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\n}\n.fx-status--success {\n  --fx-status-fg: var(--fx-color-status-success-fg);\n  --fx-status-bg: var(--fx-color-status-success-bg);\n}\n.fx-status--warning {\n  --fx-status-fg: var(--fx-color-status-warning-fg);\n  --fx-status-bg: var(--fx-color-status-warning-bg);\n}\n.fx-status--error {\n  --fx-status-fg: var(--fx-color-status-error-fg);\n  --fx-status-bg: var(--fx-color-status-error-bg);\n}\n.fx-status--info {\n  --fx-status-fg: var(--fx-color-status-info-fg);\n  --fx-status-bg: var(--fx-color-status-info-bg);\n}\n.fx-status--pill {\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-8);\n  border-radius: var(--fx-radius-pill);\n  background: var(--fx-status-bg);\n}\n.fx-feedback {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--fx-space-stack);\n  padding: var(--fx-ref-space-12);\n  border-radius: var(--fx-radius-card);\n  background: var(--fx-status-bg);\n  color: var(--fx-status-fg);\n}\n.fx-feedback__body {\n  display: grid;\n  flex: 1;\n  gap: var(--fx-ref-space-4);\n  min-width: 0;\n}\n.fx-feedback__body p {\n  margin: 0;\n  color: var(--fx-color-text-secondary);\n}\n.fx-empty {\n  flex: 1;\n  display: grid;\n  place-items: center;\n  align-content: center;\n  gap: var(--fx-space-stack);\n  min-height: 160px;\n  padding: var(--fx-space-section);\n  text-align: center;\n}\n.fx-empty p {\n  max-width: 420px;\n  margin: 0;\n  color: var(--fx-color-text-secondary);\n}\n.fx-spinner {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--fx-color-border-default);\n  border-top-color: var(--fx-color-text-primary);\n  border-radius: 50%;\n  animation: fx-spin var(--fx-component-status-spinner-duration) linear infinite;\n}\n@keyframes fx-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.fx-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: var(--fx-component-panel-header-height);\n  padding: 0 var(--fx-ref-space-12);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  background: var(--fx-color-surface-sidebar);\n}\n.fx-panel-header__slot {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-space-control);\n  min-width: 0;\n}\n.fx-toolbar {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-4);\n}\n.fx-search {\n  position: relative;\n  min-width: 0;\n}\n.fx-search .fx-input {\n  padding-right: calc(var(--fx-ref-space-32) + var(--fx-ref-space-2));\n  padding-left: calc(var(--fx-ref-space-32) + var(--fx-ref-space-2));\n}\n.fx-search__leading,\n.fx-search__clear {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  transform: translateY(-50%);\n}\n.fx-search__leading {\n  left: var(--fx-ref-space-12);\n  color: var(--fx-color-text-muted);\n  pointer-events: none;\n}\n.fx-search__clear {\n  right: var(--fx-ref-space-2);\n}\n.fx-menu {\n  min-width: var(--fx-component-menu-min-width);\n  padding: var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  box-shadow: var(--fx-shadow-floating);\n}\n.fx-menu-position {\n  position: fixed;\n  z-index: var(--fx-layer-popover);\n}\n.fx-menu-dropdown__anchor {\n  display: inline-flex;\n  vertical-align: middle;\n}\n.fx-menu-dropdown-story-frame {\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-start;\n  width: 100%;\n  min-height: 10rem;\n  padding: var(--fx-ref-space-16);\n  box-sizing: border-box;\n}\n.fx-storybook-prefs {\n  position: fixed;\n  top: var(--fx-ref-space-8);\n  right: var(--fx-ref-space-8);\n  z-index: var(--fx-layer-popover);\n  display: flex;\n  gap: var(--fx-ref-space-2);\n}\n.fx-menu__title {\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-12);\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n}\n.fx-menu__separator {\n  height: var(--fx-border-width);\n  margin: var(--fx-ref-space-6) var(--fx-ref-space-4);\n  background: var(--fx-color-border-subtle);\n}\n.fx-menu__item {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: var(--fx-component-menu-row-height);\n  gap: var(--fx-space-control);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-12);\n  border: 0;\n  border-radius: var(--fx-radius-control);\n  background: transparent;\n  color: var(--fx-color-text-primary);\n  cursor: pointer;\n  text-align: left;\n}\n.fx-menu__item:hover:not(:disabled),\n.fx-menu__item[aria-selected=true],\n.fx-menu__item--selected {\n  background: var(--fx-color-surface-hover);\n}\n.fx-menu__item:disabled {\n  color: var(--fx-color-text-disabled);\n  cursor: not-allowed;\n}\n.fx-menu__item--danger {\n  color: var(--fx-color-status-error-fg);\n}\n.fx-menu__leading {\n  display: inline-flex;\n  width: var(--fx-ref-space-16);\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  color: var(--fx-color-text-muted);\n}\n.fx-menu__item--selected .fx-menu__leading {\n  color: var(--fx-color-text-primary);\n}\n.fx-menu__label {\n  flex: 1;\n}\n.fx-menu__shortcut {\n  color: var(--fx-color-text-muted);\n  font-family: var(--fx-type-code-font-family);\n  font-size: var(--fx-type-caption-font-size);\n}\n.fx-dialog {\n  width: min(calc(100vw - var(--fx-ref-space-32)), var(--fx-component-dialog-max-width));\n  max-height: calc(100vh - var(--fx-ref-space-32));\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-dialog);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-primary);\n  box-shadow: var(--fx-shadow-dialog);\n}\n.fx-dialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n.fx-dialog::backdrop {\n  background: var(--fx-color-scrim);\n}\n.fx-dialog__header,\n.fx-dialog__footer {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-space-control);\n  padding: var(--fx-component-dialog-padding);\n}\n.fx-dialog__header {\n  justify-content: space-between;\n  padding-bottom: var(--fx-ref-space-12);\n}\n.fx-dialog__body {\n  display: grid;\n  align-content: start;\n  gap: var(--fx-space-control);\n  min-width: 0;\n  padding: 0 var(--fx-component-dialog-padding) var(--fx-component-dialog-padding);\n  overflow: auto;\n}\n.fx-dialog__body > form {\n  display: grid;\n  gap: var(--fx-space-control);\n  min-width: 0;\n}\n.fx-dialog__footer {\n  justify-content: flex-end;\n  padding-top: 0;\n}\n.fx-tooltip-anchor {\n  position: relative;\n  display: inline-flex;\n}\n.fx-tooltip {\n  position: absolute;\n  left: 50%;\n  z-index: var(--fx-layer-tooltip);\n  box-sizing: border-box;\n  width: max-content;\n  min-width: 0;\n  max-width: min(280px, calc(100vw - var(--fx-ref-space-24)));\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-ref-color-neutral-950);\n  color: var(--fx-ref-color-neutral-0);\n  box-shadow: var(--fx-shadow-floating);\n  pointer-events: none;\n}\n.fx-tooltip__content {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--fx-ref-space-6);\n  text-align: left;\n}\n.fx-tooltip__header {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--fx-ref-space-6);\n  min-width: 0;\n}\n.fx-tooltip__header .fx-tooltip__title {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n.fx-tooltip__close {\n  flex: 0 0 auto;\n  margin: calc(var(--fx-ref-space-2) * -1) calc(var(--fx-ref-space-6) * -1) 0 0;\n}\n.fx-tooltip--interactive .fx-tooltip__close.fx-button--quiet {\n  color: var(--fx-ref-color-neutral-300);\n}\n.fx-tooltip--interactive .fx-tooltip__close.fx-button--quiet:hover:not(:disabled) {\n  color: var(--fx-ref-color-neutral-0);\n  background: rgb(255 255 255 / 12%);\n}\n.fx-tooltip__title {\n  display: block;\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/ var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\n  color: var(--fx-ref-color-neutral-0);\n}\n.fx-tooltip__description {\n  display: block;\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/ var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n  color: var(--fx-ref-color-neutral-300);\n}\n.fx-tooltip--top {\n  bottom: calc(100% + var(--fx-ref-space-10));\n  transform: translateX(-50%);\n}\n.fx-tooltip--bottom {\n  top: calc(100% + var(--fx-ref-space-10));\n  transform: translateX(-50%);\n}\n.fx-tooltip--fixed {\n  position: fixed;\n  left: 0;\n  top: 0;\n  margin: 0;\n  transform: none;\n}\n.fx-tooltip--fixed.fx-tooltip--top {\n  bottom: auto;\n}\n.fx-tooltip--fixed.fx-tooltip--bottom {\n  top: auto;\n}\n.fx-tooltip--interactive {\n  pointer-events: auto;\n}\n.fx-tooltip__actions {\n  display: flex;\n  justify-content: flex-end;\n  margin-top: var(--fx-ref-space-4);\n}\n.fx-toast-region {\n  position: fixed;\n  right: var(--fx-space-section);\n  bottom: var(--fx-space-section);\n  z-index: var(--fx-layer-toast);\n  display: grid;\n  width: min(360px, calc(100vw - 32px));\n  gap: var(--fx-space-control);\n}\n.fx-toast {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--fx-space-control);\n  padding: var(--fx-ref-space-12);\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-primary);\n  box-shadow: var(--fx-shadow-floating);\n}\n.fx-toast__body {\n  display: grid;\n  flex: 1;\n  gap: 2px;\n}\n.fx-toast--error {\n  border-color: var(--fx-color-status-error-fg);\n  background: var(--fx-color-status-error-bg);\n}\n.fx-error-notice-region {\n  position: fixed;\n  top: var(--fx-space-section);\n  right: var(--fx-space-section);\n  z-index: var(--fx-layer-toast);\n  width: min(420px, calc(100vw - 32px));\n  height: var(--fx-error-notice-stack-height, auto);\n  isolation: isolate;\n}\n.fx-error-notice-region--inline {\n  position: relative;\n  top: auto;\n  right: auto;\n}\n.fx-error-notice-slot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  transform: translate3d(0, var(--fx-error-notice-y, 0), 0);\n  transform-origin: top center;\n  z-index: var(--fx-error-notice-z, 1);\n}\n.fx-error-notice-region[data-ready] {\n  transition: height var(--fx-motion-panel) var(--fx-motion-ease);\n}\n.fx-error-notice-region[data-ready] .fx-error-notice-slot {\n  transition: transform var(--fx-motion-panel) var(--fx-motion-ease);\n}\n.fx-error-notice-slot[data-inert] {\n  pointer-events: none;\n}\n.fx-error-notice {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--fx-space-control);\n  padding: var(--fx-ref-space-12);\n  border: var(--fx-border-width) solid var(--fx-color-status-error-fg);\n  border-radius: var(--fx-radius-popover);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-primary);\n  box-shadow: var(--fx-shadow-floating);\n}\n.fx-error-notice__icon {\n  color: var(--fx-color-status-error-fg);\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n.fx-error-notice__body {\n  display: grid;\n  flex: 1;\n  gap: var(--fx-ref-space-4);\n  min-width: 0;\n}\n.fx-error-notice__title {\n  color: var(--fx-color-text-primary);\n}\n.fx-error-notice__code {\n  color: var(--fx-color-status-error-fg);\n  word-break: break-all;\n}\n.fx-error-notice__description {\n  margin: 0;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.fx-error-notice__hint {\n  margin: 0;\n}\n.fx-error-notice__details {\n  min-width: 0;\n  margin-right: calc(-1 * (var(--fx-space-control) + var(--fx-component-control-height-compact)));\n}\n.fx-error-notice__details-summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--fx-ref-space-8);\n  list-style-position: outside;\n  cursor: pointer;\n  color: var(--fx-color-text-secondary);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n}\n.fx-error-notice__copy {\n  flex-shrink: 0;\n}\n.fx-error-notice__details-body {\n  margin: var(--fx-ref-space-6) 0 0;\n  max-height: 160px;\n  overflow: auto;\n  padding: var(--fx-ref-space-8);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n  color: var(--fx-color-text-secondary);\n  font: var(--fx-type-code-font-weight) var(--fx-type-code-font-size)/var(--fx-type-code-line-height) var(--fx-type-code-font-family);\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n.fx-navigation-rail {\n  display: flex;\n  flex: 0 0 var(--fx-component-navigation-rail-width);\n  flex-direction: column;\n  align-items: center;\n  width: var(--fx-component-navigation-rail-width);\n  gap: var(--fx-ref-space-4);\n  padding: var(--fx-ref-space-8);\n  border-right: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  background: var(--fx-color-surface-sidebar);\n}\n.fx-navigation-rail__item {\n  position: relative;\n  width: 100%;\n  min-height: var(--fx-component-navigation-row-height);\n  border: 0;\n  border-radius: var(--fx-radius-control);\n  background: transparent;\n  color: var(--fx-color-text-muted);\n  cursor: pointer;\n}\n.fx-navigation-rail__item:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.fx-navigation-rail__item[aria-current=page] {\n  background: var(--fx-color-selection-bg);\n  color: var(--fx-color-selection-fg);\n}\n.fx-navigation-rail__item[aria-current=page]::before {\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: -8px;\n  width: 2px;\n  background: var(--fx-color-selection-indicator);\n  content: "";\n}\n.fx-config-preview {\n  display: grid;\n  grid-template-columns: minmax(var(--fx-component-panel-config-min-width), var(--fx-component-panel-config-max-width)) minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr);\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n.fx-config-preview__config {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  border-right: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  background: var(--fx-color-surface-sidebar);\n}\n.fx-config-preview__scroll {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--fx-ref-space-16);\n}\n.fx-config-preview__action {\n  padding: var(--fx-ref-space-16);\n  border-top: var(--fx-border-width) solid var(--fx-color-border-subtle);\n}\n.fx-config-preview__preview {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n  background: var(--fx-color-surface-canvas);\n}\n.fx-config-preview__preview-stage {\n  display: grid;\n  flex: 1;\n  min-height: 0;\n  place-items: center;\n  align-content: center;\n  gap: var(--fx-ref-space-8);\n  padding: var(--fx-ref-space-16);\n}\n.fx-file-row,\n.fx-property-row {\n  display: flex;\n  align-items: center;\n  min-height: var(--fx-component-editor-row-height);\n  gap: var(--fx-space-control);\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\n  border-radius: var(--fx-radius-control);\n}\n.fx-file-row:hover,\n.fx-property-row:hover {\n  background: var(--fx-color-surface-hover);\n}\n.fx-file-row__icon {\n  display: grid;\n  place-items: center;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n  color: var(--fx-color-text-secondary);\n}\n.fx-file-row__body {\n  display: grid;\n  flex: 1;\n  min-width: 0;\n  gap: 1px;\n}\n.fx-file-row__name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fx-property-row__label {\n  flex: 0 0 38%;\n  color: var(--fx-color-text-secondary);\n}\n.fx-property-row__control {\n  flex: 1;\n  min-width: 0;\n}\n.fx-collapsible {\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n}\n.fx-collapsible__trigger {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: var(--fx-component-navigation-row-height);\n  gap: var(--fx-space-control);\n  padding: 0 var(--fx-ref-space-12);\n  border: 0;\n  background: transparent;\n  color: var(--fx-color-text-primary);\n  cursor: pointer;\n  text-align: left;\n}\n.fx-collapsible__trigger:hover {\n  background: var(--fx-color-surface-hover);\n}\n.fx-collapsible__title {\n  flex: 1;\n  font-weight: 500;\n}\n.fx-collapsible__content {\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12) var(--fx-ref-space-12);\n}\n.fx-conversation {\n  width: min(100%, var(--fx-component-conversation-max-width));\n  margin: 0 auto;\n  display: grid;\n  gap: var(--fx-component-conversation-message-gap);\n  padding: var(--fx-space-section);\n}\n.fx-message {\n  display: grid;\n  gap: var(--fx-ref-space-6);\n}\n.fx-message--user {\n  justify-items: end;\n}\n.fx-message__bubble {\n  max-width: 84%;\n  padding: var(--fx-ref-space-12) var(--fx-ref-space-16);\n  border-radius: var(--fx-radius-card);\n  background: var(--fx-color-surface-inset);\n}\n.fx-message--user .fx-message__bubble {\n  background: var(--fx-color-selection-bg);\n}\n.fx-composer {\n  display: grid;\n  min-height: var(--fx-component-composer-min-height);\n  gap: var(--fx-space-control);\n  padding: var(--fx-ref-space-12);\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-component-composer-radius);\n  background: var(--fx-color-surface-raised);\n}\n.fx-composer textarea {\n  min-height: 52px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  resize: none;\n}\n.fx-composer__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--fx-space-control);\n}\n@media (max-width: 640px) {\n  .fx-config-preview {\n    grid-template-columns: 1fr;\n    grid-template-rows: auto minmax(260px, 1fr);\n  }\n  .fx-config-preview__config {\n    border-right: 0;\n    border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .fx-spinner {\n    animation: none;\n    border-top-color: var(--fx-color-text-primary);\n  }\n  .fx-button {\n    transition: none;\n  }\n  .fx-button__spinner {\n    animation: none;\n  }\n}\n.fx-collapsible__heading {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.fx-collapsible__heading > .fx-collapsible__trigger {\n  flex: 1;\n  min-width: 0;\n}\n.fx-collapsible__actions {\n  position: absolute;\n  flex: none;\n  right: var(--fx-space-2, 8px);\n}\n\n/* packages/view-components/src/styles/inspector-form.css */\n.fx-inspector-form {\n  --d-type: var(--fx-color-brand-accent);\n  --d-all: var(--fx-color-status-success-fg);\n  --d-cap: var(--fx-color-status-warning-fg);\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  min-width: 0;\n  overflow: auto;\n  overflow-x: hidden;\n  background: var(--fx-color-surface-canvas);\n  color: var(--fx-color-text-primary);\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\n}\n.fx-inspector-form * {\n  box-sizing: border-box;\n}\n.fx-inspector-form button,\n.fx-inspector-form input,\n.fx-inspector-form select {\n  font: inherit;\n}\n.fx-inspector-form__group {\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\n}\n.fx-inspector-form__group.is-nested {\n  border-bottom: 0;\n  margin: 0 var(--fx-ref-space-8);\n}\n.fx-inspector-form__group .fx-collapsible__trigger {\n  padding-left: var(--fx-ref-space-8);\n  background: var(--fx-color-surface-sidebar);\n  border-left: calc(var(--fx-border-width) * 3) solid transparent;\n}\n.fx-inspector-form__group--type .fx-collapsible__trigger {\n  border-left-color: var(--d-type);\n}\n.fx-inspector-form__group--all .fx-collapsible__trigger {\n  border-left-color: var(--d-all);\n}\n.fx-inspector-form__group--cap .fx-collapsible__trigger {\n  border-left-color: var(--d-cap);\n}\n.fx-inspector-form__group .fx-collapsible__content {\n  padding: var(--fx-ref-space-4) 0 var(--fx-ref-space-8);\n}\n.fx-inspector-form__title {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-8);\n}\n.fx-inspector-form__icon {\n  display: grid;\n  color: var(--fx-color-text-muted);\n}\n.fx-inspector-form__fields {\n  padding: 0;\n}\n.fx-inspector-form__row {\n  display: flex;\n  align-items: center;\n  min-height: var(--fx-component-editor-row-height);\n  padding: 0 var(--fx-ref-space-8);\n  gap: var(--fx-ref-space-4);\n}\n.fx-inspector-form__row:hover {\n  background: var(--fx-color-surface-hover);\n}\n.fx-inspector-form__property {\n  flex: 1;\n  min-width: 0;\n  padding: var(--fx-ref-space-2) 0;\n  gap: var(--fx-ref-space-8);\n}\n.fx-inspector-form__property:hover {\n  background: transparent;\n}\n.fx-inspector-form__property .fx-property-row__label {\n  flex-basis: 38%;\n  overflow: hidden;\n  color: var(--fx-color-text-secondary);\n  font-size: var(--fx-type-caption-font-size);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fx-inspector-form__property .fx-property-row__control {\n  display: flex;\n  min-width: 0;\n  overflow: hidden;\n}\n.fx-inspector-form__property .fx-property-row__control > * {\n  flex: 1;\n  min-width: 0;\n  max-width: 100%;\n}\n.fx-inspector-form__input {\n  height: var(--fx-component-control-height-compact);\n  min-width: 0;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-6);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n  font-family: var(--fx-type-code-font-family);\n  font-size: var(--fx-type-caption-font-size);\n  cursor: default;\n}\n.fx-inspector-form__input:read-only,\n.fx-inspector-form__input:disabled {\n  color: var(--fx-color-text-primary);\n  background: var(--fx-color-surface-inset);\n  opacity: 1;\n}\n.fx-inspector-form__input--text {\n  flex: 1;\n}\n.fx-inspector-form__vec {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-4);\n}\n.fx-inspector-form__vec--4 {\n  gap: var(--fx-ref-space-2);\n}\n.fx-inspector-form__vec--4 .fx-inspector-form__vcell {\n  min-width: 0;\n}\n.fx-inspector-form__vcell {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector-form__axis {\n  position: absolute;\n  z-index: var(--fx-layer-sticky);\n  top: var(--fx-ref-space-6);\n  left: var(--fx-ref-space-6);\n  color: var(--fx-color-text-muted);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\n  pointer-events: none;\n}\n.fx-inspector-form__vcell .fx-inspector-form__numfield {\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector-form__vcell .fx-inspector-form__input {\n  width: 100%;\n  padding-left: var(--fx-ref-space-16);\n  text-align: center;\n}\n.fx-inspector-form__vcell--x .fx-inspector-form__input {\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-error-fg);\n}\n.fx-inspector-form__vcell--y .fx-inspector-form__input {\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-success-fg);\n}\n.fx-inspector-form__vcell--z .fx-inspector-form__input {\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-info-fg);\n}\n.fx-inspector-form__numfield {\n  position: relative;\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector-form__numfield--solo {\n  flex: 0 0 calc(var(--fx-ref-space-48) + var(--fx-ref-space-32) + var(--fx-ref-space-8));\n}\n.fx-inspector-form__checkbox {\n  display: inline-flex;\n  width: auto;\n  height: auto;\n  flex: 0 0 auto;\n  min-height: var(--fx-component-control-height-compact);\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  opacity: 1;\n}\n.fx-inspector-form__checkbox input {\n  border-radius: var(--fx-ref-radius-4);\n  opacity: 1;\n  cursor: default;\n}\n.fx-inspector-form__select {\n  display: flex;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector-form__select .fx-inspector-form__input {\n  flex: 1;\n  width: 100%;\n}\n.fx-inspector-form__color {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-6);\n}\n.fx-inspector-form__swatch {\n  width: var(--fx-component-control-height-compact);\n  height: calc(var(--fx-ref-space-16) + var(--fx-ref-space-4));\n  flex: 0 0 var(--fx-component-control-height-compact);\n  padding: 0;\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-radius-control);\n  background: transparent;\n}\n.fx-inspector-form__input--hex {\n  flex: 1;\n  min-width: calc(var(--fx-ref-space-48) + var(--fx-ref-space-32));\n}\n.fx-inspector-form__asset {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  min-width: 0;\n  gap: var(--fx-ref-space-4);\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-4);\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-inset);\n}\n.fx-inspector-form__asset-thumb {\n  display: grid;\n  place-items: center;\n  width: var(--fx-component-control-height-compact);\n  height: var(--fx-component-control-height-compact);\n  flex: 0 0 var(--fx-component-control-height-compact);\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-raised);\n  color: var(--fx-color-text-muted);\n}\n.fx-inspector-form__asset-thumb.is-empty {\n  border-style: dashed;\n}\n.fx-inspector-form__asset-body {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n}\n.fx-inspector-form__asset-combo {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--fx-component-control-height-compact);\n  gap: var(--fx-ref-space-4);\n  padding: 0 var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\n  border-radius: var(--fx-radius-control);\n  background: var(--fx-color-surface-canvas);\n  color: var(--fx-color-text-primary);\n}\n.fx-inspector-form__asset-label {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.fx-inspector-form__asset-label.is-empty {\n  color: var(--fx-color-text-muted);\n}\n\n/* packages/view-components/src/styles/page-tab-strip.css */\n.fx-page-tab-strip {\n  --page-tab-local-height: calc(var(--fx-component-navigation-row-height) - var(--fx-ref-space-2));\n  --page-tab-local-tab-body: calc(var(--page-tab-local-height) - var(--fx-ref-space-6));\n  display: flex;\n  align-items: stretch;\n  min-width: 0;\n  height: var(--fx-component-navigation-row-height);\n  background: var(--fx-color-surface-canvas);\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-default);\n}\n.fx-page-tab-strip__scope {\n  display: flex;\n  align-items: flex-end;\n  min-width: 0;\n  flex: 1;\n  padding: 0 var(--fx-ref-space-6) 0 var(--fx-ref-space-8);\n  gap: var(--fx-ref-space-6);\n}\n.fx-page-tab-strip__list {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--fx-ref-space-2);\n  min-width: 0;\n  flex: 0 1 auto;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.fx-page-tab-strip__list::-webkit-scrollbar {\n  display: none;\n}\n.fx-page-tab {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-6);\n  height: var(--page-tab-local-tab-body);\n  max-width: var(--fx-component-panel-config-max-width);\n  padding: 0 var(--fx-ref-space-8) 0 calc(var(--fx-ref-space-8) + var(--fx-ref-space-2));\n  border: var(--fx-border-width) solid transparent;\n  border-bottom: none;\n  border-radius: var(--fx-radius-control) var(--fx-radius-control) 0 0;\n  background: transparent;\n  color: var(--fx-color-text-secondary);\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size) / var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\n  cursor: pointer;\n  white-space: nowrap;\n  flex-shrink: 0;\n  position: relative;\n  transition: background var(--fx-motion-hover) var(--fx-motion-ease), color var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.fx-page-tab:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.fx-page-tab.is-active,\n.fx-page-tab.is-active:hover {\n  background: var(--fx-color-surface-raised);\n  border-color: var(--fx-color-border-subtle);\n  color: var(--fx-color-text-primary);\n  box-shadow: inset 0 var(--fx-ref-space-2) 0 var(--fx-color-brand-accent);\n}\n.fx-page-tab.is-drag {\n  opacity: 0.45;\n}\n.fx-page-tab__icon {\n  width: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\n  height: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\n  flex-shrink: 0;\n}\n.fx-page-tab__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.fx-page-tab.is-dirty .fx-page-tab__label {\n  font-style: italic;\n}\n.fx-page-tab__dirty {\n  color: var(--fx-color-brand-accent);\n  flex-shrink: 0;\n}\n.fx-page-tab__pin {\n  width: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\n  height: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\n  color: var(--fx-color-text-muted);\n  flex-shrink: 0;\n}\n.fx-page-tab__close {\n  width: var(--fx-component-control-icon-size);\n  height: var(--fx-component-control-icon-size);\n  border-radius: var(--fx-ref-radius-4);\n  border: none;\n  background: transparent;\n  color: var(--fx-color-text-muted);\n  display: grid;\n  place-items: center;\n  visibility: hidden;\n  cursor: pointer;\n  flex-shrink: 0;\n  padding: 0;\n}\n.fx-page-tab:hover .fx-page-tab__close,\n.fx-page-tab.is-active .fx-page-tab__close {\n  visibility: visible;\n}\n.fx-page-tab__close:hover {\n  background: var(--fx-color-surface-selected);\n  color: var(--fx-color-text-primary);\n}\n.fx-page-tab__close-icon {\n  width: calc(var(--fx-ref-space-12) - var(--fx-ref-space-2));\n  height: calc(var(--fx-ref-space-12) - var(--fx-ref-space-2));\n}\n.fx-page-tab-strip__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--fx-ref-space-4);\n  flex-shrink: 0;\n  margin-left: auto;\n}\n.fx-page-tab-btn {\n  height: var(--page-tab-local-tab-body);\n  padding: 0 var(--fx-ref-space-6);\n  display: inline-flex;\n  align-items: center;\n  gap: var(--fx-ref-space-6);\n  border: var(--fx-border-width) solid var(--fx-color-border-subtle);\n  border-radius: var(--fx-ref-radius-4);\n  background: transparent;\n  color: var(--fx-color-text-secondary);\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n  cursor: pointer;\n  transition: background var(--fx-motion-hover) var(--fx-motion-ease), color var(--fx-motion-hover) var(--fx-motion-ease);\n}\n.fx-page-tab-btn:hover {\n  background: var(--fx-color-surface-hover);\n  color: var(--fx-color-text-primary);\n}\n.fx-page-tab-btn__icon {\n  width: var(--fx-ref-space-12);\n  height: var(--fx-ref-space-12);\n}\n.fx-page-tab-btn--new {\n  flex-shrink: 0;\n  width: calc(var(--fx-ref-space-16) + var(--fx-ref-space-8));\n  padding: 0;\n  justify-content: center;\n  border-color: transparent;\n  color: var(--fx-color-text-muted);\n}\n.fx-page-tab-btn--new .fx-page-tab-btn__icon {\n  width: var(--fx-component-control-icon-size);\n  height: var(--fx-component-control-icon-size);\n}\n.fx-page-tab-btn--new:hover {\n  color: var(--fx-color-text-primary);\n}\n.fx-page-tab-menu__mark {\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\n  color: var(--fx-color-text-muted);\n}\n.fx-page-tab-menu__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* packages/view-components/src/styles.css */\n';
+if (typeof document !== "undefined" && !document.querySelector('style[data-forgeax-css="L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LWNvbXBvbmVudHMvc3JjL3N0eWxlcy5jc3M"]')) {
+  const style = document.createElement("style");
+  style.dataset.forgeaxCss = "L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LWNvbXBvbmVudHMvc3JjL3N0eWxlcy5jc3M";
+  style.textContent = css;
+  document.head.append(style);
+}
+//# sourceMappingURL=chunk-ZLU5QW2O.mjs.map

package/dist/modules/chunks/chunk-ZLU5QW2O.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/view-components/src/styles.css"],
+  "sourcesContent": ["\n          const css = \"/* packages/view-components/src/styles/tokens.css */\\n:root {\\n  --fx-ref-color-neutral-0: #FFFFFF;\\n  --fx-ref-color-neutral-25: #FCFCFC;\\n  --fx-ref-color-neutral-50: #F5F5F6;\\n  --fx-ref-color-neutral-100: #EDEDED;\\n  --fx-ref-color-neutral-200: #E6E6E7;\\n  --fx-ref-color-neutral-300: #C7C7C8;\\n  --fx-ref-color-neutral-400: #A0A0A2;\\n  --fx-ref-color-neutral-500: #77777A;\\n  --fx-ref-color-neutral-600: #626366;\\n  --fx-ref-color-neutral-700: #48494C;\\n  --fx-ref-color-neutral-800: #333438;\\n  --fx-ref-color-neutral-850: #292A2D;\\n  --fx-ref-color-neutral-900: #222326;\\n  --fx-ref-color-neutral-950: #1A1C1F;\\n  --fx-ref-color-neutral-1000: #111214;\\n  --fx-ref-color-blue-50: #F0F5FB;\\n  --fx-ref-color-blue-300: #8CB7E8;\\n  --fx-ref-color-blue-400: #0A84FF;\\n  --fx-ref-color-blue-500: #007AFF;\\n  --fx-ref-color-blue-600: #2868AE;\\n  --fx-ref-color-blue-700: #2563A5;\\n  --fx-ref-color-blue-950: #1C2A3A;\\n  --fx-ref-color-brand-50: #EFF5DB;\\n  --fx-ref-color-brand-400: #C5DD78;\\n  --fx-ref-color-brand-700: #50631F;\\n  --fx-ref-color-brand-950: #29351D;\\n  --fx-ref-color-green-50: #EAF5EE;\\n  --fx-ref-color-green-300: #8ED6A7;\\n  --fx-ref-color-green-700: #246444;\\n  --fx-ref-color-green-950: #173327;\\n  --fx-ref-color-amber-50: #FFF4D9;\\n  --fx-ref-color-amber-300: #FFD387;\\n  --fx-ref-color-amber-800: #775014;\\n  --fx-ref-color-amber-950: #382B13;\\n  --fx-ref-color-red-50: #FFF0F1;\\n  --fx-ref-color-red-300: #FFADB3;\\n  --fx-ref-color-red-700: #B53440;\\n  --fx-ref-color-red-950: #3C2027;\\n  --fx-ref-space-0: 0px;\\n  --fx-ref-space-2: 2px;\\n  --fx-ref-space-4: 4px;\\n  --fx-ref-space-6: 6px;\\n  --fx-ref-space-8: 8px;\\n  --fx-ref-space-12: 12px;\\n  --fx-ref-space-16: 16px;\\n  --fx-ref-space-24: 24px;\\n  --fx-ref-space-32: 32px;\\n  --fx-ref-space-48: 48px;\\n  --fx-ref-space-64: 64px;\\n  --fx-ref-radius-0: 0px;\\n  --fx-ref-radius-4: 4px;\\n  --fx-ref-radius-8: 8px;\\n  --fx-ref-radius-12: 12px;\\n  --fx-ref-radius-16: 16px;\\n  --fx-ref-radius-24: 24px;\\n  --fx-ref-radius-9999: 9999px;\\n  --fx-ref-font-sans:\\n    -apple-system,\\n    BlinkMacSystemFont,\\n    \\\"Segoe UI\\\",\\n    \\\"PingFang SC\\\",\\n    \\\"Microsoft YaHei\\\",\\n    sans-serif;\\n  --fx-ref-font-mono:\\n    SFMono-Regular,\\n    Consolas,\\n    \\\"Liberation Mono\\\",\\n    Menlo,\\n    monospace;\\n  --fx-ref-font-size-12: 12px;\\n  --fx-ref-font-size-13: 13px;\\n  --fx-ref-font-size-14: 14px;\\n  --fx-ref-font-size-15: 15px;\\n  --fx-ref-font-size-16: 16px;\\n  --fx-ref-font-size-20: 20px;\\n  --fx-ref-font-size-24: 24px;\\n  --fx-ref-font-weight-400: 400;\\n  --fx-ref-font-weight-500: 500;\\n  --fx-ref-font-weight-600: 600;\\n  --fx-ref-duration-0: 0ms;\\n  --fx-ref-duration-80: 80ms;\\n  --fx-ref-duration-140: 140ms;\\n  --fx-ref-duration-200: 200ms;\\n  --fx-ref-duration-280: 280ms;\\n  --fx-ref-easing-standard: cubic-bezier(0.2, 0, 0, 1);\\n  --fx-ref-easing-linear: cubic-bezier(0, 0, 1, 1);\\n  --fx-type-body-font-family: var(--fx-ref-font-sans);\\n  --fx-type-body-font-size: var(--fx-ref-font-size-15);\\n  --fx-type-body-font-weight: var(--fx-ref-font-weight-400);\\n  --fx-type-body-line-height: 1.65;\\n  --fx-type-body-letter-spacing: 0px;\\n  --fx-type-ui-font-family: var(--fx-ref-font-sans);\\n  --fx-type-ui-font-size: var(--fx-ref-font-size-14);\\n  --fx-type-ui-font-weight: var(--fx-ref-font-weight-400);\\n  --fx-type-ui-line-height: 1.5;\\n  --fx-type-ui-letter-spacing: 0px;\\n  --fx-type-label-font-family: var(--fx-ref-font-sans);\\n  --fx-type-label-font-size: var(--fx-ref-font-size-14);\\n  --fx-type-label-font-weight: var(--fx-ref-font-weight-400);\\n  --fx-type-label-line-height: 1.5;\\n  --fx-type-label-letter-spacing: 0px;\\n  --fx-type-compact-font-family: var(--fx-ref-font-sans);\\n  --fx-type-compact-font-size: var(--fx-ref-font-size-13);\\n  --fx-type-compact-font-weight: var(--fx-ref-font-weight-400);\\n  --fx-type-compact-line-height: 1.5;\\n  --fx-type-compact-letter-spacing: 0px;\\n  --fx-type-caption-font-family: var(--fx-ref-font-sans);\\n  --fx-type-caption-font-size: var(--fx-ref-font-size-12);\\n  --fx-type-caption-font-weight: var(--fx-ref-font-weight-400);\\n  --fx-type-caption-line-height: 1.5;\\n  --fx-type-caption-letter-spacing: 0px;\\n  --fx-type-heading-font-family: var(--fx-ref-font-sans);\\n  --fx-type-heading-font-size: var(--fx-ref-font-size-16);\\n  --fx-type-heading-font-weight: var(--fx-ref-font-weight-500);\\n  --fx-type-heading-line-height: 1.5;\\n  --fx-type-heading-letter-spacing: 0px;\\n  --fx-type-title-font-family: var(--fx-ref-font-sans);\\n  --fx-type-title-font-size: var(--fx-ref-font-size-20);\\n  --fx-type-title-font-weight: var(--fx-ref-font-weight-500);\\n  --fx-type-title-line-height: 1.4;\\n  --fx-type-title-letter-spacing: 0px;\\n  --fx-type-code-font-family: var(--fx-ref-font-mono);\\n  --fx-type-code-font-size: var(--fx-ref-font-size-13);\\n  --fx-type-code-font-weight: var(--fx-ref-font-weight-400);\\n  --fx-type-code-line-height: 1.6;\\n  --fx-type-code-letter-spacing: 0px;\\n  --fx-space-inline: var(--fx-ref-space-6);\\n  --fx-space-control: var(--fx-ref-space-8);\\n  --fx-space-stack: var(--fx-ref-space-12);\\n  --fx-space-section: var(--fx-ref-space-24);\\n  --fx-space-page: var(--fx-ref-space-32);\\n  --fx-radius-control: var(--fx-ref-radius-8);\\n  --fx-radius-card: var(--fx-ref-radius-12);\\n  --fx-radius-popover: var(--fx-ref-radius-12);\\n  --fx-radius-dialog: var(--fx-ref-radius-16);\\n  --fx-radius-composer: var(--fx-ref-radius-24);\\n  --fx-radius-pill: var(--fx-ref-radius-9999);\\n  --fx-border-width: 1px;\\n  --fx-border-focus-width: 2px;\\n  --fx-border-focus-offset: 2px;\\n  --fx-motion-feedback: var(--fx-ref-duration-80);\\n  --fx-motion-hover: var(--fx-ref-duration-140);\\n  --fx-motion-expand: var(--fx-ref-duration-200);\\n  --fx-motion-panel: var(--fx-ref-duration-280);\\n  --fx-motion-ease: var(--fx-ref-easing-standard);\\n  --fx-layer-content: 0;\\n  --fx-layer-sticky: 10;\\n  --fx-layer-popover: 100;\\n  --fx-layer-dialog: 1000;\\n  --fx-layer-toast: 1100;\\n  --fx-layer-tooltip: 1200;\\n  --fx-component-control-height-compact: 28px;\\n  --fx-component-control-height-default: 32px;\\n  --fx-component-control-height-large: 44px;\\n  --fx-component-control-icon-size: 16px;\\n  --fx-component-control-icon-hit-area-min: 24px;\\n  --fx-component-field-height-default: 36px;\\n  --fx-component-navigation-row-height: 36px;\\n  --fx-component-navigation-rail-width: 64px;\\n  --fx-component-editor-row-height: 28px;\\n  --fx-component-panel-header-height: 40px;\\n  --fx-component-panel-config-min-width: 246px;\\n  --fx-component-panel-config-max-width: 272px;\\n  --fx-component-panel-chat-min-width: 360px;\\n  --fx-component-panel-chat-default-width: 420px;\\n  --fx-component-conversation-max-width: 720px;\\n  --fx-component-conversation-message-gap: var(--fx-ref-space-24);\\n  --fx-component-composer-radius: var(--fx-radius-composer);\\n  --fx-component-composer-min-height: 96px;\\n  --fx-component-composer-text-max-height: 240px;\\n  --fx-component-dialog-max-width: 560px;\\n  --fx-component-dialog-padding: var(--fx-ref-space-24);\\n  --fx-component-menu-min-width: 240px;\\n  --fx-component-menu-row-height: 36px;\\n  --fx-component-tooltip-delay: 400ms;\\n  --fx-component-status-spinner-duration: 1000ms;\\n  --fx-component-button-radius: var(--fx-radius-pill);\\n  --fx-component-choice-size: 14px;\\n  --fx-component-choice-dot-size: 8px;\\n  --fx-component-range-width: 88px;\\n}\\n:root,\\n[data-theme=light] {\\n  color-scheme: light;\\n  --fx-color-surface-canvas: var(--fx-ref-color-neutral-0);\\n  --fx-color-surface-sidebar: var(--fx-ref-color-neutral-50);\\n  --fx-color-surface-raised: var(--fx-ref-color-neutral-0);\\n  --fx-color-surface-inset: var(--fx-ref-color-neutral-25);\\n  --fx-color-surface-hover: var(--fx-ref-color-neutral-100);\\n  --fx-color-surface-selected: var(--fx-ref-color-neutral-100);\\n  --fx-color-text-primary: var(--fx-ref-color-neutral-950);\\n  --fx-color-text-secondary: var(--fx-ref-color-neutral-600);\\n  --fx-color-text-muted: var(--fx-ref-color-neutral-600);\\n  --fx-color-text-disabled: var(--fx-ref-color-neutral-400);\\n  --fx-color-text-inverse: var(--fx-ref-color-neutral-0);\\n  --fx-color-text-link: var(--fx-ref-color-blue-700);\\n  --fx-color-border-subtle: var(--fx-ref-color-neutral-100);\\n  --fx-color-border-default: var(--fx-ref-color-neutral-200);\\n  --fx-color-border-control: var(--fx-ref-color-neutral-200);\\n  --fx-color-border-strong: var(--fx-ref-color-neutral-600);\\n  --fx-color-border-focus: var(--fx-ref-color-neutral-600);\\n  --fx-color-border-essential: var(--fx-ref-color-neutral-500);\\n  --fx-color-action-primary-bg: var(--fx-ref-color-neutral-950);\\n  --fx-color-action-primary-fg: var(--fx-ref-color-neutral-0);\\n  --fx-color-action-primary-hover: var(--fx-ref-color-neutral-800);\\n  --fx-color-action-primary-pressed: var(--fx-ref-color-neutral-1000);\\n  --fx-color-action-secondary-bg: var(--fx-ref-color-neutral-0);\\n  --fx-color-action-secondary-fg: var(--fx-ref-color-neutral-950);\\n  --fx-color-action-secondary-hover: var(--fx-ref-color-neutral-100);\\n  --fx-color-action-disabled-bg: var(--fx-ref-color-neutral-100);\\n  --fx-color-action-disabled-fg: var(--fx-ref-color-neutral-400);\\n  --fx-color-action-danger-bg: var(--fx-ref-color-red-700);\\n  --fx-color-action-danger-fg: var(--fx-ref-color-neutral-0);\\n  --fx-color-selection-bg: var(--fx-ref-color-neutral-100);\\n  --fx-color-selection-fg: var(--fx-ref-color-neutral-950);\\n  --fx-color-selection-indicator: var(--fx-ref-color-neutral-950);\\n  --fx-color-brand-accent: var(--fx-ref-color-brand-400);\\n  --fx-color-brand-text: var(--fx-ref-color-brand-700);\\n  --fx-color-brand-soft: var(--fx-ref-color-brand-50);\\n  --fx-color-brand-on-accent: var(--fx-ref-color-neutral-950);\\n  --fx-color-status-success-fg: var(--fx-ref-color-green-700);\\n  --fx-color-status-success-bg: var(--fx-ref-color-green-50);\\n  --fx-color-status-warning-fg: var(--fx-ref-color-amber-800);\\n  --fx-color-status-warning-bg: var(--fx-ref-color-amber-50);\\n  --fx-color-status-error-fg: var(--fx-ref-color-red-700);\\n  --fx-color-status-error-bg: var(--fx-ref-color-red-50);\\n  --fx-color-status-info-fg: var(--fx-ref-color-blue-700);\\n  --fx-color-status-info-bg: var(--fx-ref-color-blue-50);\\n  --fx-color-scrim: #0F131A66;\\n  --fx-color-choice-indicator: var(--fx-ref-color-blue-500);\\n  --fx-shadow-subtle: 0px 1px 3px 0px #0000000D;\\n  --fx-shadow-floating: 0px 8px 28px 0px #00000024;\\n  --fx-shadow-dialog: 0px 16px 48px 0px #00000033;\\n}\\n[data-theme=dark] {\\n  color-scheme: dark;\\n  --fx-color-surface-canvas: var(--fx-ref-color-neutral-950);\\n  --fx-color-surface-sidebar: var(--fx-ref-color-neutral-900);\\n  --fx-color-surface-raised: var(--fx-ref-color-neutral-850);\\n  --fx-color-surface-inset: var(--fx-ref-color-neutral-1000);\\n  --fx-color-surface-hover: var(--fx-ref-color-neutral-800);\\n  --fx-color-surface-selected: var(--fx-ref-color-neutral-800);\\n  --fx-color-text-primary: var(--fx-ref-color-neutral-100);\\n  --fx-color-text-secondary: var(--fx-ref-color-neutral-300);\\n  --fx-color-text-muted: var(--fx-ref-color-neutral-400);\\n  --fx-color-text-disabled: var(--fx-ref-color-neutral-600);\\n  --fx-color-text-inverse: var(--fx-ref-color-neutral-950);\\n  --fx-color-text-link: var(--fx-ref-color-blue-300);\\n  --fx-color-border-subtle: var(--fx-ref-color-neutral-800);\\n  --fx-color-border-default: var(--fx-ref-color-neutral-700);\\n  --fx-color-border-control: var(--fx-ref-color-neutral-700);\\n  --fx-color-border-strong: var(--fx-ref-color-neutral-300);\\n  --fx-color-border-focus: var(--fx-ref-color-neutral-300);\\n  --fx-color-border-essential: var(--fx-ref-color-neutral-400);\\n  --fx-color-action-primary-bg: var(--fx-ref-color-neutral-100);\\n  --fx-color-action-primary-fg: var(--fx-ref-color-neutral-950);\\n  --fx-color-action-primary-hover: var(--fx-ref-color-neutral-0);\\n  --fx-color-action-primary-pressed: var(--fx-ref-color-neutral-200);\\n  --fx-color-action-secondary-bg: var(--fx-ref-color-neutral-850);\\n  --fx-color-action-secondary-fg: var(--fx-ref-color-neutral-100);\\n  --fx-color-action-secondary-hover: var(--fx-ref-color-neutral-800);\\n  --fx-color-action-disabled-bg: var(--fx-ref-color-neutral-800);\\n  --fx-color-action-disabled-fg: var(--fx-ref-color-neutral-500);\\n  --fx-color-action-danger-bg: var(--fx-ref-color-red-300);\\n  --fx-color-action-danger-fg: var(--fx-ref-color-neutral-1000);\\n  --fx-color-selection-bg: var(--fx-ref-color-neutral-800);\\n  --fx-color-selection-fg: var(--fx-ref-color-neutral-100);\\n  --fx-color-selection-indicator: var(--fx-ref-color-neutral-300);\\n  --fx-color-brand-accent: var(--fx-ref-color-brand-400);\\n  --fx-color-brand-text: var(--fx-ref-color-brand-400);\\n  --fx-color-brand-soft: var(--fx-ref-color-brand-950);\\n  --fx-color-brand-on-accent: var(--fx-ref-color-neutral-950);\\n  --fx-color-status-success-fg: var(--fx-ref-color-green-300);\\n  --fx-color-status-success-bg: var(--fx-ref-color-green-950);\\n  --fx-color-status-warning-fg: var(--fx-ref-color-amber-300);\\n  --fx-color-status-warning-bg: var(--fx-ref-color-amber-950);\\n  --fx-color-status-error-fg: var(--fx-ref-color-red-300);\\n  --fx-color-status-error-bg: var(--fx-ref-color-red-950);\\n  --fx-color-status-info-fg: var(--fx-ref-color-blue-300);\\n  --fx-color-status-info-bg: var(--fx-ref-color-blue-950);\\n  --fx-color-scrim: #00000099;\\n  --fx-color-choice-indicator: var(--fx-ref-color-blue-400);\\n  --fx-shadow-subtle: 0px 1px 3px 0px #00000033;\\n  --fx-shadow-floating: 0px 8px 28px 0px #00000066;\\n  --fx-shadow-dialog: 0px 16px 48px 0px #00000080;\\n}\\n@media (prefers-reduced-motion: reduce) {\\n  :root,\\n  [data-theme] {\\n    --fx-motion-feedback: 0ms;\\n    --fx-motion-hover: 0ms;\\n    --fx-motion-expand: 0ms;\\n    --fx-motion-panel: 0ms;\\n  }\\n}\\n\\n/* packages/view-components/src/styles/components.css */\\n*,\\n*::before,\\n*::after {\\n  box-sizing: border-box;\\n}\\n.fx-ui {\\n  color: var(--fx-color-text-primary);\\n  font-family: var(--fx-type-ui-font-family);\\n  font-size: var(--fx-type-ui-font-size);\\n  font-weight: var(--fx-type-ui-font-weight);\\n  line-height: var(--fx-type-ui-line-height);\\n}\\n.fx-ui :where(button, input, select, textarea) {\\n  color: inherit;\\n  font: inherit;\\n}\\n.fx-ui :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {\\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\\n  outline-offset: var(--fx-border-focus-offset);\\n}\\n.fx-text {\\n  margin: 0;\\n}\\n.fx-text--title {\\n  font: var(--fx-type-title-font-weight) var(--fx-type-title-font-size)/var(--fx-type-title-line-height) var(--fx-type-title-font-family);\\n}\\n.fx-text--heading {\\n  font: var(--fx-type-heading-font-weight) var(--fx-type-heading-font-size)/var(--fx-type-heading-line-height) var(--fx-type-heading-font-family);\\n}\\n.fx-text--body {\\n  font: var(--fx-type-body-font-weight) var(--fx-type-body-font-size)/var(--fx-type-body-line-height) var(--fx-type-body-font-family);\\n}\\n.fx-text--ui {\\n  font: var(--fx-type-ui-font-weight) var(--fx-type-ui-font-size)/var(--fx-type-ui-line-height) var(--fx-type-ui-font-family);\\n}\\n.fx-text--label {\\n  font: var(--fx-type-label-font-weight) var(--fx-type-label-font-size)/var(--fx-type-label-line-height) var(--fx-type-label-font-family);\\n}\\n.fx-text--compact {\\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\\n}\\n.fx-text--caption {\\n  color: var(--fx-color-text-muted);\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n}\\n.fx-text--code {\\n  font: var(--fx-type-code-font-weight) var(--fx-type-code-font-size)/var(--fx-type-code-line-height) var(--fx-type-code-font-family);\\n}\\n.fx-text--secondary {\\n  color: var(--fx-color-text-secondary);\\n}\\n.fx-text--muted {\\n  color: var(--fx-color-text-muted);\\n}\\n.fx-surface {\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-surface--canvas {\\n  background: var(--fx-color-surface-canvas);\\n}\\n.fx-surface--sidebar {\\n  background: var(--fx-color-surface-sidebar);\\n}\\n.fx-surface--raised {\\n  background: var(--fx-color-surface-raised);\\n}\\n.fx-surface--inset {\\n  background: var(--fx-color-surface-inset);\\n}\\n.fx-surface--card {\\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\\n  border-radius: var(--fx-radius-card);\\n}\\n.fx-divider {\\n  width: 100%;\\n  height: var(--fx-border-width);\\n  border: 0;\\n  background: var(--fx-color-border-subtle);\\n}\\n.fx-link {\\n  color: var(--fx-color-text-link);\\n  text-decoration: none;\\n}\\n.fx-link:hover {\\n  text-decoration: underline;\\n}\\n.fx-button {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  gap: var(--fx-space-inline);\\n  min-height: var(--fx-component-control-height-default);\\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-12);\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: var(--fx-component-button-radius);\\n  background: var(--fx-color-action-secondary-bg);\\n  color: var(--fx-color-action-secondary-fg);\\n  cursor: pointer;\\n  font-weight: 400;\\n  text-decoration: none;\\n  white-space: nowrap;\\n  transition: background-color var(--fx-motion-hover) var(--fx-motion-ease);\\n}\\n.fx-button:hover:not(:disabled) {\\n  background: var(--fx-color-action-secondary-hover);\\n}\\n.fx-button:active:not(:disabled) {\\n  transform: translateY(var(--fx-border-width));\\n}\\n.fx-button--primary {\\n  border-color: transparent;\\n  background: var(--fx-color-action-primary-bg);\\n  color: var(--fx-color-action-primary-fg);\\n}\\n.fx-button--primary:hover:not(:disabled) {\\n  background: var(--fx-color-action-primary-hover);\\n}\\n.fx-button--primary:active:not(:disabled) {\\n  background: var(--fx-color-action-primary-pressed);\\n}\\n.fx-button--quiet {\\n  border-color: transparent;\\n  background: transparent;\\n}\\n.fx-button--quiet:hover:not(:disabled) {\\n  background: var(--fx-color-surface-hover);\\n}\\n.fx-button--danger {\\n  border-color: transparent;\\n  background: var(--fx-color-action-danger-bg);\\n  color: var(--fx-color-action-danger-fg);\\n}\\n.fx-button:disabled:not([aria-busy=true]),\\n.fx-button[aria-disabled=true] {\\n  border-color: transparent;\\n  background: var(--fx-color-action-disabled-bg);\\n  color: var(--fx-color-action-disabled-fg);\\n  cursor: not-allowed;\\n}\\n.fx-button[aria-busy=true] {\\n  cursor: progress;\\n}\\n.fx-button--compact {\\n  min-height: var(--fx-component-control-height-compact);\\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-12);\\n  font-size: var(--fx-type-caption-font-size);\\n  line-height: var(--fx-type-caption-line-height);\\n}\\n.fx-button--large {\\n  min-height: var(--fx-component-control-height-large);\\n  padding: var(--fx-ref-space-8) calc(var(--fx-ref-space-16) + var(--fx-ref-space-2));\\n}\\n.fx-button--icon {\\n  width: var(--fx-component-control-height-default);\\n  padding: 0;\\n}\\n.fx-button--icon.fx-button--compact {\\n  width: var(--fx-component-control-height-compact);\\n}\\n.fx-button--icon.fx-button--large {\\n  width: var(--fx-component-control-height-large);\\n}\\n.fx-button__spinner {\\n  width: var(--fx-component-choice-size);\\n  height: var(--fx-component-choice-size);\\n  animation: fx-spin var(--fx-component-status-spinner-duration) linear infinite;\\n}\\n.fx-icon {\\n  width: var(--fx-component-control-icon-size);\\n  height: var(--fx-component-control-icon-size);\\n  flex: 0 0 auto;\\n  stroke-width: 1.5;\\n}\\n.fx-field {\\n  display: grid;\\n  gap: var(--fx-ref-space-6);\\n  min-width: 0;\\n}\\n.fx-field__label {\\n  color: var(--fx-color-text-primary);\\n  font: var(--fx-type-label-font-weight) var(--fx-type-label-font-size)/var(--fx-type-label-line-height) var(--fx-type-label-font-family);\\n}\\n.fx-field__note {\\n  margin: 0;\\n  color: var(--fx-color-text-muted);\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n}\\n.fx-field__error {\\n  color: var(--fx-color-status-error-fg);\\n}\\n.fx-input {\\n  width: 100%;\\n  min-width: 0;\\n  height: var(--fx-component-field-height-default);\\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-12);\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: var(--fx-radius-control);\\n  outline: 0;\\n  background: var(--fx-color-surface-raised);\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-input::placeholder {\\n  color: var(--fx-color-text-muted);\\n}\\n.fx-input:focus-visible {\\n  border-color: var(--fx-color-border-essential);\\n}\\n.fx-input:disabled {\\n  color: var(--fx-color-text-disabled);\\n  background: var(--fx-color-action-disabled-bg);\\n}\\ntextarea.fx-input {\\n  min-height: calc(var(--fx-ref-space-48) + var(--fx-ref-space-32));\\n  max-height: var(--fx-component-composer-text-max-height);\\n  height: auto;\\n  resize: vertical;\\n  line-height: var(--fx-type-body-line-height);\\n}\\n.fx-choice {\\n  display: inline-flex;\\n  align-items: flex-start;\\n  gap: var(--fx-space-control);\\n  min-height: var(--fx-component-control-height-compact);\\n  cursor: pointer;\\n}\\n.fx-choice__text {\\n  display: grid;\\n  gap: var(--fx-ref-space-2);\\n  min-width: 0;\\n  padding-top: calc((var(--fx-component-choice-size) - var(--fx-type-ui-line-height)) / 2);\\n}\\n.fx-choice__label {\\n  color: var(--fx-color-text-primary);\\n  font: var(--fx-type-ui-font-weight) var(--fx-type-ui-font-size)/var(--fx-type-ui-line-height) var(--fx-type-ui-font-family);\\n}\\n.fx-choice__description {\\n  color: var(--fx-color-text-muted);\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n}\\n.fx-choice input {\\n  appearance: none;\\n  display: inline-grid;\\n  place-content: center;\\n  flex: 0 0 var(--fx-component-choice-size);\\n  width: var(--fx-component-choice-size);\\n  height: var(--fx-component-choice-size);\\n  margin: 0;\\n  border: var(--fx-border-width) solid var(--fx-color-border-essential);\\n  background: var(--fx-color-surface-raised);\\n  cursor: pointer;\\n  transition: border-color var(--fx-motion-hover) var(--fx-motion-ease), background-color var(--fx-motion-hover) var(--fx-motion-ease);\\n}\\n.fx-choice input:hover:not(:disabled) {\\n  border-color: var(--fx-color-border-control);\\n  background: var(--fx-color-surface-hover);\\n}\\n.fx-choice input:focus-visible {\\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\\n  outline-offset: var(--fx-border-focus-offset);\\n}\\n.fx-choice input::before {\\n  content: \\\"\\\";\\n  transition: transform var(--fx-motion-hover) var(--fx-motion-ease);\\n}\\n.fx-choice--radio input {\\n  border-radius: 50%;\\n}\\n.fx-choice--radio input::before {\\n  width: var(--fx-component-choice-dot-size);\\n  height: var(--fx-component-choice-dot-size);\\n  border-radius: 50%;\\n  background: var(--fx-color-choice-indicator);\\n  transform: scale(0);\\n}\\n.fx-choice--radio input:checked {\\n  border-color: var(--fx-color-choice-indicator);\\n}\\n.fx-choice--radio input:checked::before {\\n  transform: scale(1);\\n}\\n.fx-choice--checkbox input {\\n  border-radius: var(--fx-ref-radius-4);\\n}\\n.fx-choice--checkbox input::before {\\n  width: 3px;\\n  height: 7px;\\n  margin-top: -1px;\\n  border: solid var(--fx-color-surface-raised);\\n  border-width: 0 2px 2px 0;\\n  background: transparent;\\n  transform: rotate(45deg) scale(0);\\n}\\n.fx-choice--checkbox input:checked {\\n  border-color: var(--fx-color-choice-indicator);\\n  background: var(--fx-color-choice-indicator);\\n}\\n.fx-choice--checkbox input:checked:hover:not(:disabled) {\\n  background: var(--fx-color-choice-indicator);\\n}\\n.fx-choice--checkbox input:checked::before {\\n  transform: rotate(45deg) scale(1);\\n}\\n.fx-choice--checkbox input[type=checkbox]:indeterminate {\\n  border-color: var(--fx-color-choice-indicator);\\n  background: var(--fx-color-surface-raised);\\n}\\n.fx-choice--checkbox input[type=checkbox]:indeterminate::before {\\n  width: calc(var(--fx-component-choice-dot-size) + var(--fx-ref-space-2));\\n  height: calc(var(--fx-ref-space-2) + var(--fx-border-width));\\n  margin-top: 0;\\n  border: 0;\\n  border-radius: var(--fx-ref-radius-4);\\n  background: var(--fx-color-choice-indicator);\\n  transform: scale(1);\\n}\\n.fx-choice input:disabled {\\n  cursor: not-allowed;\\n  opacity: .45;\\n}\\n.fx-choice-set {\\n  display: grid;\\n  gap: var(--fx-ref-space-8);\\n  min-width: 0;\\n}\\n.fx-choice-set__legend {\\n  color: var(--fx-color-text-primary);\\n  font: var(--fx-type-label-font-weight) var(--fx-type-label-font-size)/var(--fx-type-label-line-height) var(--fx-type-label-font-family);\\n}\\n.fx-choice-group {\\n  display: flex;\\n  align-items: flex-start;\\n  flex-wrap: wrap;\\n  gap: var(--fx-ref-space-16);\\n}\\n.fx-choice-group--vertical {\\n  flex-direction: column;\\n  align-items: flex-start;\\n  gap: var(--fx-ref-space-8);\\n}\\n.fx-range {\\n  --fx-range-track-height: 3px;\\n  --fx-range-thumb-size: 10px;\\n  width: var(--fx-component-range-width, 88px);\\n  height: var(--fx-component-control-height-compact);\\n  margin: 0;\\n  padding: 0;\\n  border: 0;\\n  background: transparent;\\n  cursor: pointer;\\n  -webkit-appearance: none;\\n  appearance: none;\\n}\\n.fx-range:focus-visible {\\n  outline: var(--fx-border-focus-width) solid var(--fx-color-border-focus);\\n  outline-offset: var(--fx-border-focus-offset);\\n  border-radius: var(--fx-radius-control);\\n}\\n.fx-range:disabled {\\n  cursor: not-allowed;\\n  opacity: .45;\\n}\\n.fx-range::-webkit-slider-runnable-track {\\n  height: var(--fx-range-track-height);\\n  border-radius: 999px;\\n  background: var(--fx-color-border-subtle);\\n}\\n.fx-range::-webkit-slider-thumb {\\n  -webkit-appearance: none;\\n  width: var(--fx-range-thumb-size);\\n  height: var(--fx-range-thumb-size);\\n  margin-top: calc((var(--fx-range-track-height) - var(--fx-range-thumb-size)) / 2);\\n  border: 0;\\n  border-radius: 999px;\\n  background: var(--fx-color-selection-indicator);\\n}\\n.fx-range::-moz-range-track {\\n  height: var(--fx-range-track-height);\\n  border: 0;\\n  border-radius: 999px;\\n  background: var(--fx-color-border-subtle);\\n}\\n.fx-range::-moz-range-thumb {\\n  width: var(--fx-range-thumb-size);\\n  height: var(--fx-range-thumb-size);\\n  border: 0;\\n  border-radius: 999px;\\n  background: var(--fx-color-selection-indicator);\\n}\\n.fx-range::-moz-range-progress {\\n  height: var(--fx-range-track-height);\\n  border-radius: 999px;\\n  background: var(--fx-color-text-muted);\\n}\\n.fx-switch {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: var(--fx-ref-space-12);\\n  border: 0;\\n  padding: 0;\\n  background: transparent;\\n  color: var(--fx-color-text-secondary);\\n  cursor: pointer;\\n  text-align: left;\\n}\\n.fx-switch:hover:not(:disabled) {\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-switch:disabled {\\n  cursor: not-allowed;\\n  opacity: .45;\\n}\\n.fx-switch--row {\\n  justify-content: space-between;\\n  width: 100%;\\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\\n  border-radius: var(--fx-radius-control);\\n}\\n.fx-switch--row:hover:not(:disabled) {\\n  background: var(--fx-color-surface-hover);\\n}\\n.fx-switch__label {\\n  color: inherit;\\n  font: inherit;\\n}\\n.fx-switch__track {\\n  position: relative;\\n  width: 28px;\\n  height: 16px;\\n  flex: 0 0 auto;\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: 999px;\\n  background: var(--fx-color-surface-inset);\\n  transition: background-color var(--fx-motion-hover) var(--fx-motion-ease), border-color var(--fx-motion-hover) var(--fx-motion-ease);\\n}\\n.fx-switch__thumb {\\n  position: absolute;\\n  top: 3px;\\n  left: 3px;\\n  width: 8px;\\n  height: 8px;\\n  border-radius: 999px;\\n  background: var(--fx-color-text-muted);\\n  transition: left var(--fx-motion-hover) var(--fx-motion-ease), background-color var(--fx-motion-hover) var(--fx-motion-ease);\\n}\\n.fx-switch[aria-checked=true] .fx-switch__track {\\n  border-color: var(--fx-color-border-default);\\n  background: var(--fx-color-surface-selected);\\n}\\n.fx-switch[aria-checked=true] .fx-switch__thumb {\\n  left: 15px;\\n  background: var(--fx-color-selection-indicator);\\n}\\n.fx-segmented {\\n  display: flex;\\n  gap: var(--fx-ref-space-4);\\n}\\n.fx-segmented__item {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex: 1;\\n  gap: var(--fx-ref-space-4);\\n  min-height: var(--fx-component-control-height-large);\\n  padding: var(--fx-ref-space-4) var(--fx-ref-space-6);\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: var(--fx-radius-control);\\n  background: var(--fx-color-surface-raised);\\n  color: var(--fx-color-text-muted);\\n  cursor: pointer;\\n  font-size: var(--fx-type-caption-font-size);\\n  transition:\\n    background-color var(--fx-motion-hover) var(--fx-motion-ease),\\n    color var(--fx-motion-hover) var(--fx-motion-ease),\\n    border-color var(--fx-motion-hover) var(--fx-motion-ease);\\n}\\n.fx-segmented__item:hover:not(:disabled) {\\n  background: var(--fx-color-surface-hover);\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-segmented__item[data-checked=true] {\\n  border-color: var(--fx-color-border-default);\\n  background: var(--fx-color-surface-selected);\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-segmented__item--stacked {\\n  flex-direction: column;\\n  min-height: 48px;\\n}\\n.fx-segmented__item:disabled {\\n  cursor: not-allowed;\\n  color: var(--fx-color-text-disabled);\\n}\\n.fx-visually-hidden {\\n  position: absolute;\\n  width: 1px;\\n  height: 1px;\\n  padding: 0;\\n  margin: -1px;\\n  overflow: hidden;\\n  clip: rect(0, 0, 0, 0);\\n  white-space: nowrap;\\n  border: 0;\\n}\\n.fx-status {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: var(--fx-ref-space-6);\\n  color: var(--fx-status-fg);\\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\\n}\\n.fx-status--success {\\n  --fx-status-fg: var(--fx-color-status-success-fg);\\n  --fx-status-bg: var(--fx-color-status-success-bg);\\n}\\n.fx-status--warning {\\n  --fx-status-fg: var(--fx-color-status-warning-fg);\\n  --fx-status-bg: var(--fx-color-status-warning-bg);\\n}\\n.fx-status--error {\\n  --fx-status-fg: var(--fx-color-status-error-fg);\\n  --fx-status-bg: var(--fx-color-status-error-bg);\\n}\\n.fx-status--info {\\n  --fx-status-fg: var(--fx-color-status-info-fg);\\n  --fx-status-bg: var(--fx-color-status-info-bg);\\n}\\n.fx-status--pill {\\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-8);\\n  border-radius: var(--fx-radius-pill);\\n  background: var(--fx-status-bg);\\n}\\n.fx-feedback {\\n  display: flex;\\n  align-items: flex-start;\\n  gap: var(--fx-space-stack);\\n  padding: var(--fx-ref-space-12);\\n  border-radius: var(--fx-radius-card);\\n  background: var(--fx-status-bg);\\n  color: var(--fx-status-fg);\\n}\\n.fx-feedback__body {\\n  display: grid;\\n  flex: 1;\\n  gap: var(--fx-ref-space-4);\\n  min-width: 0;\\n}\\n.fx-feedback__body p {\\n  margin: 0;\\n  color: var(--fx-color-text-secondary);\\n}\\n.fx-empty {\\n  flex: 1;\\n  display: grid;\\n  place-items: center;\\n  align-content: center;\\n  gap: var(--fx-space-stack);\\n  min-height: 160px;\\n  padding: var(--fx-space-section);\\n  text-align: center;\\n}\\n.fx-empty p {\\n  max-width: 420px;\\n  margin: 0;\\n  color: var(--fx-color-text-secondary);\\n}\\n.fx-spinner {\\n  width: 18px;\\n  height: 18px;\\n  border: 2px solid var(--fx-color-border-default);\\n  border-top-color: var(--fx-color-text-primary);\\n  border-radius: 50%;\\n  animation: fx-spin var(--fx-component-status-spinner-duration) linear infinite;\\n}\\n@keyframes fx-spin {\\n  to {\\n    transform: rotate(360deg);\\n  }\\n}\\n.fx-panel-header {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  min-height: var(--fx-component-panel-header-height);\\n  padding: 0 var(--fx-ref-space-12);\\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\\n  background: var(--fx-color-surface-sidebar);\\n}\\n.fx-panel-header__slot {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--fx-space-control);\\n  min-width: 0;\\n}\\n.fx-toolbar {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--fx-ref-space-4);\\n}\\n.fx-search {\\n  position: relative;\\n  min-width: 0;\\n}\\n.fx-search .fx-input {\\n  padding-right: calc(var(--fx-ref-space-32) + var(--fx-ref-space-2));\\n  padding-left: calc(var(--fx-ref-space-32) + var(--fx-ref-space-2));\\n}\\n.fx-search__leading,\\n.fx-search__clear {\\n  position: absolute;\\n  top: 50%;\\n  z-index: 1;\\n  transform: translateY(-50%);\\n}\\n.fx-search__leading {\\n  left: var(--fx-ref-space-12);\\n  color: var(--fx-color-text-muted);\\n  pointer-events: none;\\n}\\n.fx-search__clear {\\n  right: var(--fx-ref-space-2);\\n}\\n.fx-menu {\\n  min-width: var(--fx-component-menu-min-width);\\n  padding: var(--fx-ref-space-6);\\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\\n  border-radius: var(--fx-radius-popover);\\n  background: var(--fx-color-surface-raised);\\n  box-shadow: var(--fx-shadow-floating);\\n}\\n.fx-menu-position {\\n  position: fixed;\\n  z-index: var(--fx-layer-popover);\\n}\\n.fx-menu-dropdown__anchor {\\n  display: inline-flex;\\n  vertical-align: middle;\\n}\\n.fx-menu-dropdown-story-frame {\\n  display: flex;\\n  justify-content: flex-end;\\n  align-items: flex-start;\\n  width: 100%;\\n  min-height: 10rem;\\n  padding: var(--fx-ref-space-16);\\n  box-sizing: border-box;\\n}\\n.fx-storybook-prefs {\\n  position: fixed;\\n  top: var(--fx-ref-space-8);\\n  right: var(--fx-ref-space-8);\\n  z-index: var(--fx-layer-popover);\\n  display: flex;\\n  gap: var(--fx-ref-space-2);\\n}\\n.fx-menu__title {\\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-12);\\n  color: var(--fx-color-text-muted);\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n}\\n.fx-menu__separator {\\n  height: var(--fx-border-width);\\n  margin: var(--fx-ref-space-6) var(--fx-ref-space-4);\\n  background: var(--fx-color-border-subtle);\\n}\\n.fx-menu__item {\\n  display: flex;\\n  align-items: center;\\n  width: 100%;\\n  min-height: var(--fx-component-menu-row-height);\\n  gap: var(--fx-space-control);\\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-12);\\n  border: 0;\\n  border-radius: var(--fx-radius-control);\\n  background: transparent;\\n  color: var(--fx-color-text-primary);\\n  cursor: pointer;\\n  text-align: left;\\n}\\n.fx-menu__item:hover:not(:disabled),\\n.fx-menu__item[aria-selected=true],\\n.fx-menu__item--selected {\\n  background: var(--fx-color-surface-hover);\\n}\\n.fx-menu__item:disabled {\\n  color: var(--fx-color-text-disabled);\\n  cursor: not-allowed;\\n}\\n.fx-menu__item--danger {\\n  color: var(--fx-color-status-error-fg);\\n}\\n.fx-menu__leading {\\n  display: inline-flex;\\n  width: var(--fx-ref-space-16);\\n  flex-shrink: 0;\\n  align-items: center;\\n  justify-content: center;\\n  color: var(--fx-color-text-muted);\\n}\\n.fx-menu__item--selected .fx-menu__leading {\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-menu__label {\\n  flex: 1;\\n}\\n.fx-menu__shortcut {\\n  color: var(--fx-color-text-muted);\\n  font-family: var(--fx-type-code-font-family);\\n  font-size: var(--fx-type-caption-font-size);\\n}\\n.fx-dialog {\\n  width: min(calc(100vw - var(--fx-ref-space-32)), var(--fx-component-dialog-max-width));\\n  max-height: calc(100vh - var(--fx-ref-space-32));\\n  margin: auto;\\n  padding: 0;\\n  overflow: hidden;\\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\\n  border-radius: var(--fx-radius-dialog);\\n  background: var(--fx-color-surface-raised);\\n  color: var(--fx-color-text-primary);\\n  box-shadow: var(--fx-shadow-dialog);\\n}\\n.fx-dialog[open] {\\n  display: flex;\\n  flex-direction: column;\\n}\\n.fx-dialog::backdrop {\\n  background: var(--fx-color-scrim);\\n}\\n.fx-dialog__header,\\n.fx-dialog__footer {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--fx-space-control);\\n  padding: var(--fx-component-dialog-padding);\\n}\\n.fx-dialog__header {\\n  justify-content: space-between;\\n  padding-bottom: var(--fx-ref-space-12);\\n}\\n.fx-dialog__body {\\n  display: grid;\\n  align-content: start;\\n  gap: var(--fx-space-control);\\n  min-width: 0;\\n  padding: 0 var(--fx-component-dialog-padding) var(--fx-component-dialog-padding);\\n  overflow: auto;\\n}\\n.fx-dialog__body > form {\\n  display: grid;\\n  gap: var(--fx-space-control);\\n  min-width: 0;\\n}\\n.fx-dialog__footer {\\n  justify-content: flex-end;\\n  padding-top: 0;\\n}\\n.fx-tooltip-anchor {\\n  position: relative;\\n  display: inline-flex;\\n}\\n.fx-tooltip {\\n  position: absolute;\\n  left: 50%;\\n  z-index: var(--fx-layer-tooltip);\\n  box-sizing: border-box;\\n  width: max-content;\\n  min-width: 0;\\n  max-width: min(280px, calc(100vw - var(--fx-ref-space-24)));\\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12);\\n  border-radius: var(--fx-radius-control);\\n  background: var(--fx-ref-color-neutral-950);\\n  color: var(--fx-ref-color-neutral-0);\\n  box-shadow: var(--fx-shadow-floating);\\n  pointer-events: none;\\n}\\n.fx-tooltip__content {\\n  display: flex;\\n  flex-direction: column;\\n  align-items: stretch;\\n  gap: var(--fx-ref-space-6);\\n  text-align: left;\\n}\\n.fx-tooltip__header {\\n  display: flex;\\n  align-items: flex-start;\\n  gap: var(--fx-ref-space-6);\\n  min-width: 0;\\n}\\n.fx-tooltip__header .fx-tooltip__title {\\n  flex: 1 1 auto;\\n  min-width: 0;\\n}\\n.fx-tooltip__close {\\n  flex: 0 0 auto;\\n  margin: calc(var(--fx-ref-space-2) * -1) calc(var(--fx-ref-space-6) * -1) 0 0;\\n}\\n.fx-tooltip--interactive .fx-tooltip__close.fx-button--quiet {\\n  color: var(--fx-ref-color-neutral-300);\\n}\\n.fx-tooltip--interactive .fx-tooltip__close.fx-button--quiet:hover:not(:disabled) {\\n  color: var(--fx-ref-color-neutral-0);\\n  background: rgb(255 255 255 / 12%);\\n}\\n.fx-tooltip__title {\\n  display: block;\\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/ var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\\n  color: var(--fx-ref-color-neutral-0);\\n}\\n.fx-tooltip__description {\\n  display: block;\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/ var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n  color: var(--fx-ref-color-neutral-300);\\n}\\n.fx-tooltip--top {\\n  bottom: calc(100% + var(--fx-ref-space-10));\\n  transform: translateX(-50%);\\n}\\n.fx-tooltip--bottom {\\n  top: calc(100% + var(--fx-ref-space-10));\\n  transform: translateX(-50%);\\n}\\n.fx-tooltip--fixed {\\n  position: fixed;\\n  left: 0;\\n  top: 0;\\n  margin: 0;\\n  transform: none;\\n}\\n.fx-tooltip--fixed.fx-tooltip--top {\\n  bottom: auto;\\n}\\n.fx-tooltip--fixed.fx-tooltip--bottom {\\n  top: auto;\\n}\\n.fx-tooltip--interactive {\\n  pointer-events: auto;\\n}\\n.fx-tooltip__actions {\\n  display: flex;\\n  justify-content: flex-end;\\n  margin-top: var(--fx-ref-space-4);\\n}\\n.fx-toast-region {\\n  position: fixed;\\n  right: var(--fx-space-section);\\n  bottom: var(--fx-space-section);\\n  z-index: var(--fx-layer-toast);\\n  display: grid;\\n  width: min(360px, calc(100vw - 32px));\\n  gap: var(--fx-space-control);\\n}\\n.fx-toast {\\n  display: flex;\\n  align-items: flex-start;\\n  gap: var(--fx-space-control);\\n  padding: var(--fx-ref-space-12);\\n  border: var(--fx-border-width) solid var(--fx-color-border-default);\\n  border-radius: var(--fx-radius-popover);\\n  background: var(--fx-color-surface-raised);\\n  color: var(--fx-color-text-primary);\\n  box-shadow: var(--fx-shadow-floating);\\n}\\n.fx-toast__body {\\n  display: grid;\\n  flex: 1;\\n  gap: 2px;\\n}\\n.fx-toast--error {\\n  border-color: var(--fx-color-status-error-fg);\\n  background: var(--fx-color-status-error-bg);\\n}\\n.fx-error-notice-region {\\n  position: fixed;\\n  top: var(--fx-space-section);\\n  right: var(--fx-space-section);\\n  z-index: var(--fx-layer-toast);\\n  width: min(420px, calc(100vw - 32px));\\n  height: var(--fx-error-notice-stack-height, auto);\\n  isolation: isolate;\\n}\\n.fx-error-notice-region--inline {\\n  position: relative;\\n  top: auto;\\n  right: auto;\\n}\\n.fx-error-notice-slot {\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  width: 100%;\\n  transform: translate3d(0, var(--fx-error-notice-y, 0), 0);\\n  transform-origin: top center;\\n  z-index: var(--fx-error-notice-z, 1);\\n}\\n.fx-error-notice-region[data-ready] {\\n  transition: height var(--fx-motion-panel) var(--fx-motion-ease);\\n}\\n.fx-error-notice-region[data-ready] .fx-error-notice-slot {\\n  transition: transform var(--fx-motion-panel) var(--fx-motion-ease);\\n}\\n.fx-error-notice-slot[data-inert] {\\n  pointer-events: none;\\n}\\n.fx-error-notice {\\n  display: flex;\\n  align-items: flex-start;\\n  gap: var(--fx-space-control);\\n  padding: var(--fx-ref-space-12);\\n  border: var(--fx-border-width) solid var(--fx-color-status-error-fg);\\n  border-radius: var(--fx-radius-popover);\\n  background: var(--fx-color-surface-raised);\\n  color: var(--fx-color-text-primary);\\n  box-shadow: var(--fx-shadow-floating);\\n}\\n.fx-error-notice__icon {\\n  color: var(--fx-color-status-error-fg);\\n  flex-shrink: 0;\\n  margin-top: 2px;\\n}\\n.fx-error-notice__body {\\n  display: grid;\\n  flex: 1;\\n  gap: var(--fx-ref-space-4);\\n  min-width: 0;\\n}\\n.fx-error-notice__title {\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-error-notice__code {\\n  color: var(--fx-color-status-error-fg);\\n  word-break: break-all;\\n}\\n.fx-error-notice__description {\\n  margin: 0;\\n  white-space: pre-wrap;\\n  overflow-wrap: anywhere;\\n}\\n.fx-error-notice__hint {\\n  margin: 0;\\n}\\n.fx-error-notice__details {\\n  min-width: 0;\\n  margin-right: calc(-1 * (var(--fx-space-control) + var(--fx-component-control-height-compact)));\\n}\\n.fx-error-notice__details-summary {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  gap: var(--fx-ref-space-8);\\n  list-style-position: outside;\\n  cursor: pointer;\\n  color: var(--fx-color-text-secondary);\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size)/var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n}\\n.fx-error-notice__copy {\\n  flex-shrink: 0;\\n}\\n.fx-error-notice__details-body {\\n  margin: var(--fx-ref-space-6) 0 0;\\n  max-height: 160px;\\n  overflow: auto;\\n  padding: var(--fx-ref-space-8);\\n  border-radius: var(--fx-radius-control);\\n  background: var(--fx-color-surface-inset);\\n  color: var(--fx-color-text-secondary);\\n  font: var(--fx-type-code-font-weight) var(--fx-type-code-font-size)/var(--fx-type-code-line-height) var(--fx-type-code-font-family);\\n  white-space: pre-wrap;\\n  overflow-wrap: anywhere;\\n}\\n.fx-navigation-rail {\\n  display: flex;\\n  flex: 0 0 var(--fx-component-navigation-rail-width);\\n  flex-direction: column;\\n  align-items: center;\\n  width: var(--fx-component-navigation-rail-width);\\n  gap: var(--fx-ref-space-4);\\n  padding: var(--fx-ref-space-8);\\n  border-right: var(--fx-border-width) solid var(--fx-color-border-subtle);\\n  background: var(--fx-color-surface-sidebar);\\n}\\n.fx-navigation-rail__item {\\n  position: relative;\\n  width: 100%;\\n  min-height: var(--fx-component-navigation-row-height);\\n  border: 0;\\n  border-radius: var(--fx-radius-control);\\n  background: transparent;\\n  color: var(--fx-color-text-muted);\\n  cursor: pointer;\\n}\\n.fx-navigation-rail__item:hover {\\n  background: var(--fx-color-surface-hover);\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-navigation-rail__item[aria-current=page] {\\n  background: var(--fx-color-selection-bg);\\n  color: var(--fx-color-selection-fg);\\n}\\n.fx-navigation-rail__item[aria-current=page]::before {\\n  position: absolute;\\n  top: 8px;\\n  bottom: 8px;\\n  left: -8px;\\n  width: 2px;\\n  background: var(--fx-color-selection-indicator);\\n  content: \\\"\\\";\\n}\\n.fx-config-preview {\\n  display: grid;\\n  grid-template-columns: minmax(var(--fx-component-panel-config-min-width), var(--fx-component-panel-config-max-width)) minmax(0, 1fr);\\n  grid-template-rows: minmax(0, 1fr);\\n  flex: 1;\\n  min-width: 0;\\n  min-height: 0;\\n  height: 100%;\\n}\\n.fx-config-preview__config {\\n  display: flex;\\n  min-width: 0;\\n  flex-direction: column;\\n  border-right: var(--fx-border-width) solid var(--fx-color-border-subtle);\\n  background: var(--fx-color-surface-sidebar);\\n}\\n.fx-config-preview__scroll {\\n  flex: 1;\\n  min-height: 0;\\n  overflow: auto;\\n  padding: var(--fx-ref-space-16);\\n}\\n.fx-config-preview__action {\\n  padding: var(--fx-ref-space-16);\\n  border-top: var(--fx-border-width) solid var(--fx-color-border-subtle);\\n}\\n.fx-config-preview__preview {\\n  display: flex;\\n  flex-direction: column;\\n  min-width: 0;\\n  min-height: 0;\\n  background: var(--fx-color-surface-canvas);\\n}\\n.fx-config-preview__preview-stage {\\n  display: grid;\\n  flex: 1;\\n  min-height: 0;\\n  place-items: center;\\n  align-content: center;\\n  gap: var(--fx-ref-space-8);\\n  padding: var(--fx-ref-space-16);\\n}\\n.fx-file-row,\\n.fx-property-row {\\n  display: flex;\\n  align-items: center;\\n  min-height: var(--fx-component-editor-row-height);\\n  gap: var(--fx-space-control);\\n  padding: var(--fx-ref-space-6) var(--fx-ref-space-8);\\n  border-radius: var(--fx-radius-control);\\n}\\n.fx-file-row:hover,\\n.fx-property-row:hover {\\n  background: var(--fx-color-surface-hover);\\n}\\n.fx-file-row__icon {\\n  display: grid;\\n  place-items: center;\\n  width: 32px;\\n  height: 32px;\\n  border-radius: var(--fx-radius-control);\\n  background: var(--fx-color-surface-inset);\\n  color: var(--fx-color-text-secondary);\\n}\\n.fx-file-row__body {\\n  display: grid;\\n  flex: 1;\\n  min-width: 0;\\n  gap: 1px;\\n}\\n.fx-file-row__name {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n.fx-property-row__label {\\n  flex: 0 0 38%;\\n  color: var(--fx-color-text-secondary);\\n}\\n.fx-property-row__control {\\n  flex: 1;\\n  min-width: 0;\\n}\\n.fx-collapsible {\\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\\n}\\n.fx-collapsible__trigger {\\n  display: flex;\\n  align-items: center;\\n  width: 100%;\\n  min-height: var(--fx-component-navigation-row-height);\\n  gap: var(--fx-space-control);\\n  padding: 0 var(--fx-ref-space-12);\\n  border: 0;\\n  background: transparent;\\n  color: var(--fx-color-text-primary);\\n  cursor: pointer;\\n  text-align: left;\\n}\\n.fx-collapsible__trigger:hover {\\n  background: var(--fx-color-surface-hover);\\n}\\n.fx-collapsible__title {\\n  flex: 1;\\n  font-weight: 500;\\n}\\n.fx-collapsible__content {\\n  padding: var(--fx-ref-space-8) var(--fx-ref-space-12) var(--fx-ref-space-12);\\n}\\n.fx-conversation {\\n  width: min(100%, var(--fx-component-conversation-max-width));\\n  margin: 0 auto;\\n  display: grid;\\n  gap: var(--fx-component-conversation-message-gap);\\n  padding: var(--fx-space-section);\\n}\\n.fx-message {\\n  display: grid;\\n  gap: var(--fx-ref-space-6);\\n}\\n.fx-message--user {\\n  justify-items: end;\\n}\\n.fx-message__bubble {\\n  max-width: 84%;\\n  padding: var(--fx-ref-space-12) var(--fx-ref-space-16);\\n  border-radius: var(--fx-radius-card);\\n  background: var(--fx-color-surface-inset);\\n}\\n.fx-message--user .fx-message__bubble {\\n  background: var(--fx-color-selection-bg);\\n}\\n.fx-composer {\\n  display: grid;\\n  min-height: var(--fx-component-composer-min-height);\\n  gap: var(--fx-space-control);\\n  padding: var(--fx-ref-space-12);\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: var(--fx-component-composer-radius);\\n  background: var(--fx-color-surface-raised);\\n}\\n.fx-composer textarea {\\n  min-height: 52px;\\n  padding: 0;\\n  border: 0;\\n  background: transparent;\\n  resize: none;\\n}\\n.fx-composer__footer {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  gap: var(--fx-space-control);\\n}\\n@media (max-width: 640px) {\\n  .fx-config-preview {\\n    grid-template-columns: 1fr;\\n    grid-template-rows: auto minmax(260px, 1fr);\\n  }\\n  .fx-config-preview__config {\\n    border-right: 0;\\n    border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\\n  }\\n}\\n@media (prefers-reduced-motion: reduce) {\\n  .fx-spinner {\\n    animation: none;\\n    border-top-color: var(--fx-color-text-primary);\\n  }\\n  .fx-button {\\n    transition: none;\\n  }\\n  .fx-button__spinner {\\n    animation: none;\\n  }\\n}\\n.fx-collapsible__heading {\\n  position: relative;\\n  display: flex;\\n  align-items: center;\\n}\\n.fx-collapsible__heading > .fx-collapsible__trigger {\\n  flex: 1;\\n  min-width: 0;\\n}\\n.fx-collapsible__actions {\\n  position: absolute;\\n  flex: none;\\n  right: var(--fx-space-2, 8px);\\n}\\n\\n/* packages/view-components/src/styles/inspector-form.css */\\n.fx-inspector-form {\\n  --d-type: var(--fx-color-brand-accent);\\n  --d-all: var(--fx-color-status-success-fg);\\n  --d-cap: var(--fx-color-status-warning-fg);\\n  display: flex;\\n  flex: 1 1 auto;\\n  flex-direction: column;\\n  min-height: 0;\\n  min-width: 0;\\n  overflow: auto;\\n  overflow-x: hidden;\\n  background: var(--fx-color-surface-canvas);\\n  color: var(--fx-color-text-primary);\\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size)/var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\\n}\\n.fx-inspector-form * {\\n  box-sizing: border-box;\\n}\\n.fx-inspector-form button,\\n.fx-inspector-form input,\\n.fx-inspector-form select {\\n  font: inherit;\\n}\\n.fx-inspector-form__group {\\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-subtle);\\n}\\n.fx-inspector-form__group.is-nested {\\n  border-bottom: 0;\\n  margin: 0 var(--fx-ref-space-8);\\n}\\n.fx-inspector-form__group .fx-collapsible__trigger {\\n  padding-left: var(--fx-ref-space-8);\\n  background: var(--fx-color-surface-sidebar);\\n  border-left: calc(var(--fx-border-width) * 3) solid transparent;\\n}\\n.fx-inspector-form__group--type .fx-collapsible__trigger {\\n  border-left-color: var(--d-type);\\n}\\n.fx-inspector-form__group--all .fx-collapsible__trigger {\\n  border-left-color: var(--d-all);\\n}\\n.fx-inspector-form__group--cap .fx-collapsible__trigger {\\n  border-left-color: var(--d-cap);\\n}\\n.fx-inspector-form__group .fx-collapsible__content {\\n  padding: var(--fx-ref-space-4) 0 var(--fx-ref-space-8);\\n}\\n.fx-inspector-form__title {\\n  display: flex;\\n  align-items: center;\\n  flex: 1;\\n  min-width: 0;\\n  gap: var(--fx-ref-space-8);\\n}\\n.fx-inspector-form__icon {\\n  display: grid;\\n  color: var(--fx-color-text-muted);\\n}\\n.fx-inspector-form__fields {\\n  padding: 0;\\n}\\n.fx-inspector-form__row {\\n  display: flex;\\n  align-items: center;\\n  min-height: var(--fx-component-editor-row-height);\\n  padding: 0 var(--fx-ref-space-8);\\n  gap: var(--fx-ref-space-4);\\n}\\n.fx-inspector-form__row:hover {\\n  background: var(--fx-color-surface-hover);\\n}\\n.fx-inspector-form__property {\\n  flex: 1;\\n  min-width: 0;\\n  padding: var(--fx-ref-space-2) 0;\\n  gap: var(--fx-ref-space-8);\\n}\\n.fx-inspector-form__property:hover {\\n  background: transparent;\\n}\\n.fx-inspector-form__property .fx-property-row__label {\\n  flex-basis: 38%;\\n  overflow: hidden;\\n  color: var(--fx-color-text-secondary);\\n  font-size: var(--fx-type-caption-font-size);\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n.fx-inspector-form__property .fx-property-row__control {\\n  display: flex;\\n  min-width: 0;\\n  overflow: hidden;\\n}\\n.fx-inspector-form__property .fx-property-row__control > * {\\n  flex: 1;\\n  min-width: 0;\\n  max-width: 100%;\\n}\\n.fx-inspector-form__input {\\n  height: var(--fx-component-control-height-compact);\\n  min-width: 0;\\n  max-width: 100%;\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-6);\\n  border-radius: var(--fx-radius-control);\\n  background: var(--fx-color-surface-inset);\\n  font-family: var(--fx-type-code-font-family);\\n  font-size: var(--fx-type-caption-font-size);\\n  cursor: default;\\n}\\n.fx-inspector-form__input:read-only,\\n.fx-inspector-form__input:disabled {\\n  color: var(--fx-color-text-primary);\\n  background: var(--fx-color-surface-inset);\\n  opacity: 1;\\n}\\n.fx-inspector-form__input--text {\\n  flex: 1;\\n}\\n.fx-inspector-form__vec {\\n  display: flex;\\n  flex: 1;\\n  min-width: 0;\\n  gap: var(--fx-ref-space-4);\\n}\\n.fx-inspector-form__vec--4 {\\n  gap: var(--fx-ref-space-2);\\n}\\n.fx-inspector-form__vec--4 .fx-inspector-form__vcell {\\n  min-width: 0;\\n}\\n.fx-inspector-form__vcell {\\n  position: relative;\\n  display: flex;\\n  flex: 1;\\n  min-width: 0;\\n}\\n.fx-inspector-form__axis {\\n  position: absolute;\\n  z-index: var(--fx-layer-sticky);\\n  top: var(--fx-ref-space-6);\\n  left: var(--fx-ref-space-6);\\n  color: var(--fx-color-text-muted);\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-code-font-family);\\n  pointer-events: none;\\n}\\n.fx-inspector-form__vcell .fx-inspector-form__numfield {\\n  flex: 1;\\n  min-width: 0;\\n}\\n.fx-inspector-form__vcell .fx-inspector-form__input {\\n  width: 100%;\\n  padding-left: var(--fx-ref-space-16);\\n  text-align: center;\\n}\\n.fx-inspector-form__vcell--x .fx-inspector-form__input {\\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-error-fg);\\n}\\n.fx-inspector-form__vcell--y .fx-inspector-form__input {\\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-success-fg);\\n}\\n.fx-inspector-form__vcell--z .fx-inspector-form__input {\\n  border-bottom: var(--fx-border-focus-width) solid var(--fx-color-status-info-fg);\\n}\\n.fx-inspector-form__numfield {\\n  position: relative;\\n  display: flex;\\n  flex: 1;\\n  min-width: 0;\\n}\\n.fx-inspector-form__numfield--solo {\\n  flex: 0 0 calc(var(--fx-ref-space-48) + var(--fx-ref-space-32) + var(--fx-ref-space-8));\\n}\\n.fx-inspector-form__checkbox {\\n  display: inline-flex;\\n  width: auto;\\n  height: auto;\\n  flex: 0 0 auto;\\n  min-height: var(--fx-component-control-height-compact);\\n  border: 0;\\n  border-radius: 0;\\n  background: transparent;\\n  color: inherit;\\n  opacity: 1;\\n}\\n.fx-inspector-form__checkbox input {\\n  border-radius: var(--fx-ref-radius-4);\\n  opacity: 1;\\n  cursor: default;\\n}\\n.fx-inspector-form__select {\\n  display: flex;\\n  flex: 1;\\n  min-width: 0;\\n}\\n.fx-inspector-form__select .fx-inspector-form__input {\\n  flex: 1;\\n  width: 100%;\\n}\\n.fx-inspector-form__color {\\n  display: flex;\\n  align-items: center;\\n  flex: 1;\\n  min-width: 0;\\n  gap: var(--fx-ref-space-6);\\n}\\n.fx-inspector-form__swatch {\\n  width: var(--fx-component-control-height-compact);\\n  height: calc(var(--fx-ref-space-16) + var(--fx-ref-space-4));\\n  flex: 0 0 var(--fx-component-control-height-compact);\\n  padding: 0;\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: var(--fx-radius-control);\\n  background: transparent;\\n}\\n.fx-inspector-form__input--hex {\\n  flex: 1;\\n  min-width: calc(var(--fx-ref-space-48) + var(--fx-ref-space-32));\\n}\\n.fx-inspector-form__asset {\\n  display: flex;\\n  align-items: stretch;\\n  flex: 1;\\n  min-width: 0;\\n  gap: var(--fx-ref-space-4);\\n  padding: var(--fx-ref-space-2) var(--fx-ref-space-4);\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: var(--fx-radius-control);\\n  background: var(--fx-color-surface-inset);\\n}\\n.fx-inspector-form__asset-thumb {\\n  display: grid;\\n  place-items: center;\\n  width: var(--fx-component-control-height-compact);\\n  height: var(--fx-component-control-height-compact);\\n  flex: 0 0 var(--fx-component-control-height-compact);\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: var(--fx-radius-control);\\n  background: var(--fx-color-surface-raised);\\n  color: var(--fx-color-text-muted);\\n}\\n.fx-inspector-form__asset-thumb.is-empty {\\n  border-style: dashed;\\n}\\n.fx-inspector-form__asset-body {\\n  display: flex;\\n  align-items: center;\\n  flex: 1;\\n  min-width: 0;\\n}\\n.fx-inspector-form__asset-combo {\\n  display: flex;\\n  align-items: center;\\n  width: 100%;\\n  min-width: 0;\\n  height: var(--fx-component-control-height-compact);\\n  gap: var(--fx-ref-space-4);\\n  padding: 0 var(--fx-ref-space-6);\\n  border: var(--fx-border-width) solid var(--fx-color-border-control);\\n  border-radius: var(--fx-radius-control);\\n  background: var(--fx-color-surface-canvas);\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-inspector-form__asset-label {\\n  flex: 1;\\n  min-width: 0;\\n  overflow: hidden;\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n  text-align: left;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n.fx-inspector-form__asset-label.is-empty {\\n  color: var(--fx-color-text-muted);\\n}\\n\\n/* packages/view-components/src/styles/page-tab-strip.css */\\n.fx-page-tab-strip {\\n  --page-tab-local-height: calc(var(--fx-component-navigation-row-height) - var(--fx-ref-space-2));\\n  --page-tab-local-tab-body: calc(var(--page-tab-local-height) - var(--fx-ref-space-6));\\n  display: flex;\\n  align-items: stretch;\\n  min-width: 0;\\n  height: var(--fx-component-navigation-row-height);\\n  background: var(--fx-color-surface-canvas);\\n  border-bottom: var(--fx-border-width) solid var(--fx-color-border-default);\\n}\\n.fx-page-tab-strip__scope {\\n  display: flex;\\n  align-items: flex-end;\\n  min-width: 0;\\n  flex: 1;\\n  padding: 0 var(--fx-ref-space-6) 0 var(--fx-ref-space-8);\\n  gap: var(--fx-ref-space-6);\\n}\\n.fx-page-tab-strip__list {\\n  display: flex;\\n  align-items: flex-end;\\n  gap: var(--fx-ref-space-2);\\n  min-width: 0;\\n  flex: 0 1 auto;\\n  overflow-x: auto;\\n  scrollbar-width: none;\\n}\\n.fx-page-tab-strip__list::-webkit-scrollbar {\\n  display: none;\\n}\\n.fx-page-tab {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--fx-ref-space-6);\\n  height: var(--page-tab-local-tab-body);\\n  max-width: var(--fx-component-panel-config-max-width);\\n  padding: 0 var(--fx-ref-space-8) 0 calc(var(--fx-ref-space-8) + var(--fx-ref-space-2));\\n  border: var(--fx-border-width) solid transparent;\\n  border-bottom: none;\\n  border-radius: var(--fx-radius-control) var(--fx-radius-control) 0 0;\\n  background: transparent;\\n  color: var(--fx-color-text-secondary);\\n  font: var(--fx-type-compact-font-weight) var(--fx-type-compact-font-size) / var(--fx-type-compact-line-height) var(--fx-type-compact-font-family);\\n  cursor: pointer;\\n  white-space: nowrap;\\n  flex-shrink: 0;\\n  position: relative;\\n  transition: background var(--fx-motion-hover) var(--fx-motion-ease), color var(--fx-motion-hover) var(--fx-motion-ease);\\n}\\n.fx-page-tab:hover {\\n  background: var(--fx-color-surface-hover);\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-page-tab.is-active,\\n.fx-page-tab.is-active:hover {\\n  background: var(--fx-color-surface-raised);\\n  border-color: var(--fx-color-border-subtle);\\n  color: var(--fx-color-text-primary);\\n  box-shadow: inset 0 var(--fx-ref-space-2) 0 var(--fx-color-brand-accent);\\n}\\n.fx-page-tab.is-drag {\\n  opacity: 0.45;\\n}\\n.fx-page-tab__icon {\\n  width: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\\n  height: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\\n  flex-shrink: 0;\\n}\\n.fx-page-tab__label {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n}\\n.fx-page-tab.is-dirty .fx-page-tab__label {\\n  font-style: italic;\\n}\\n.fx-page-tab__dirty {\\n  color: var(--fx-color-brand-accent);\\n  flex-shrink: 0;\\n}\\n.fx-page-tab__pin {\\n  width: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\\n  height: calc(var(--fx-ref-space-12) + var(--fx-ref-space-2));\\n  color: var(--fx-color-text-muted);\\n  flex-shrink: 0;\\n}\\n.fx-page-tab__close {\\n  width: var(--fx-component-control-icon-size);\\n  height: var(--fx-component-control-icon-size);\\n  border-radius: var(--fx-ref-radius-4);\\n  border: none;\\n  background: transparent;\\n  color: var(--fx-color-text-muted);\\n  display: grid;\\n  place-items: center;\\n  visibility: hidden;\\n  cursor: pointer;\\n  flex-shrink: 0;\\n  padding: 0;\\n}\\n.fx-page-tab:hover .fx-page-tab__close,\\n.fx-page-tab.is-active .fx-page-tab__close {\\n  visibility: visible;\\n}\\n.fx-page-tab__close:hover {\\n  background: var(--fx-color-surface-selected);\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-page-tab__close-icon {\\n  width: calc(var(--fx-ref-space-12) - var(--fx-ref-space-2));\\n  height: calc(var(--fx-ref-space-12) - var(--fx-ref-space-2));\\n}\\n.fx-page-tab-strip__actions {\\n  display: flex;\\n  align-items: center;\\n  gap: var(--fx-ref-space-4);\\n  flex-shrink: 0;\\n  margin-left: auto;\\n}\\n.fx-page-tab-btn {\\n  height: var(--page-tab-local-tab-body);\\n  padding: 0 var(--fx-ref-space-6);\\n  display: inline-flex;\\n  align-items: center;\\n  gap: var(--fx-ref-space-6);\\n  border: var(--fx-border-width) solid var(--fx-color-border-subtle);\\n  border-radius: var(--fx-ref-radius-4);\\n  background: transparent;\\n  color: var(--fx-color-text-secondary);\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n  cursor: pointer;\\n  transition: background var(--fx-motion-hover) var(--fx-motion-ease), color var(--fx-motion-hover) var(--fx-motion-ease);\\n}\\n.fx-page-tab-btn:hover {\\n  background: var(--fx-color-surface-hover);\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-page-tab-btn__icon {\\n  width: var(--fx-ref-space-12);\\n  height: var(--fx-ref-space-12);\\n}\\n.fx-page-tab-btn--new {\\n  flex-shrink: 0;\\n  width: calc(var(--fx-ref-space-16) + var(--fx-ref-space-8));\\n  padding: 0;\\n  justify-content: center;\\n  border-color: transparent;\\n  color: var(--fx-color-text-muted);\\n}\\n.fx-page-tab-btn--new .fx-page-tab-btn__icon {\\n  width: var(--fx-component-control-icon-size);\\n  height: var(--fx-component-control-icon-size);\\n}\\n.fx-page-tab-btn--new:hover {\\n  color: var(--fx-color-text-primary);\\n}\\n.fx-page-tab-menu__mark {\\n  font: var(--fx-type-caption-font-weight) var(--fx-type-caption-font-size) / var(--fx-type-caption-line-height) var(--fx-type-caption-font-family);\\n  color: var(--fx-color-text-muted);\\n}\\n.fx-page-tab-menu__label {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n/* packages/view-components/src/styles.css */\\n\";\n          if (typeof document !== 'undefined' && !document.querySelector('style[data-forgeax-css=\"L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LWNvbXBvbmVudHMvc3JjL3N0eWxlcy5jc3M\"]')) {\n            const style = document.createElement('style');\n            style.dataset.forgeaxCss = \"L2RhdGEvaG9tZS9nYWhvdWxpYW8vYWN0aW9ucy1ydW5uZXIvX3dvcmsvZm9yZ2VheC12aWV3L2ZvcmdlYXgtdmlldy9wYWNrYWdlcy92aWV3LWNvbXBvbmVudHMvc3JjL3N0eWxlcy5jc3M\";\n            style.textContent = css;\n            document.head.append(style);\n          }\n          export default css;\n        "],
+  "mappings": ";AACU,IAAM,MAAM;AACZ,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,cAAc,2KAA2K,GAAG;AAC3O,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,QAAQ,aAAa;AAC3B,QAAM,cAAc;AACpB,WAAS,KAAK,OAAO,KAAK;AAC5B;",
+  "names": []
+}

package/dist/modules/chunks/chunk-ZNZPYE2V.mjs

@@ -0,0 +1,28 @@
+import {
+  FRONTEND_MODULE,
+  FRONTEND_PLUGIN_ID,
+  identity_exports
+} from "./chunk-NBLGKTEM.mjs";
+import {
+  applyResourcePagePlugin
+} from "./chunk-YYXQDUVT.mjs";
+
+// packages/view-plugin-material/src/frontend.mjs
+var VIEW_MATERIAL_FRONTEND_PLUGIN_ID = FRONTEND_PLUGIN_ID;
+var VIEW_MATERIAL_FRONTEND_MODULE = FRONTEND_MODULE;
+var viewMaterialFrontendPlugin = {
+  name: VIEW_MATERIAL_FRONTEND_PLUGIN_ID,
+  inject: ["viewOperationClient"],
+  async apply(ctx, config = {}) {
+    await applyResourcePagePlugin(ctx, config, identity_exports);
+  }
+};
+var frontend_default = viewMaterialFrontendPlugin;
+
+export {
+  VIEW_MATERIAL_FRONTEND_PLUGIN_ID,
+  VIEW_MATERIAL_FRONTEND_MODULE,
+  viewMaterialFrontendPlugin,
+  frontend_default
+};
+//# sourceMappingURL=chunk-ZNZPYE2V.mjs.map

package/dist/modules/chunks/chunk-ZNZPYE2V.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/view-plugin-material/src/frontend.mjs"],
+  "sourcesContent": ["import * as identity from './identity.mjs';\nimport { applyResourcePagePlugin } from '@forgeax/view-workspace-core/resource-page';\n\nexport const VIEW_MATERIAL_FRONTEND_PLUGIN_ID = identity.FRONTEND_PLUGIN_ID;\nexport const VIEW_MATERIAL_FRONTEND_MODULE = identity.FRONTEND_MODULE;\n\nconst viewMaterialFrontendPlugin = {\n  name: VIEW_MATERIAL_FRONTEND_PLUGIN_ID,\n  inject: ['viewOperationClient'],\n  async apply(ctx, config = {}) {\n    await applyResourcePagePlugin(ctx, config, identity);\n  },\n};\n\nexport { viewMaterialFrontendPlugin };\nexport default viewMaterialFrontendPlugin;\n"],
+  "mappings": ";;;;;;;;;;AAGO,IAAM,mCAA4C;AAClD,IAAM,gCAAyC;AAEtD,IAAM,6BAA6B;AAAA,EACjC,MAAM;AAAA,EACN,QAAQ,CAAC,qBAAqB;AAAA,EAC9B,MAAM,MAAM,KAAK,SAAS,CAAC,GAAG;AAC5B,UAAM,wBAAwB,KAAK,QAAQ,gBAAQ;AAAA,EACrD;AACF;AAGA,IAAO,mBAAQ;",
+  "names": []
+}