@cairntale/chimeling-react 1.0.0-alpha.1 → 1.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @cairntale/chimeling-react
 
+## 1.0.0-alpha.3
+
+### Patch Changes
+
+- 1247d56: Fix `dialkit/styles.css?raw` leaking into dist output by configuring `deps.alwaysBundle` in `tsdown.config.ts`
+
+## 1.0.0-alpha.2
+
+### Minor Changes
+
+- 1cbe90a: Export utility functions and types including `getShowablePresence`, `formatActivityDuration`, and `iconImageUrl`
+- 1cbe90a: Add `ChimelingPlayground` component for interactive testing and development
+- 1cbe90a: Add Emotion CSS-in-JS integration to `ChimelingProvider` with `nonce` support
+
 ## 1.0.0-alpha.1
 
 ### Patch Changes

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
-import { ChimelingProvider } from "./provider.js";
-import { PresenceActivity, ShowablePresence } from "../lib/showable-presence.js";
+import { ChimelingProvider, ChimelingProviderProps } from "./provider.js";
 import { ChimelingRoot, ChimelingRootProps } from "./root.js";
 import { ChimelingTrigger, ChimelingTriggerProps } from "./trigger.js";
 import { ChimelingPopover, ChimelingPopoverProps } from "./popover.js";
 import { Chimeling } from "./chimeling.js";
-export { Chimeling, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps, type PresenceActivity, type ShowablePresence };
+import { ChimelingPlayground } from "./playground/playground.js";
+export { Chimeling, ChimelingPlayground, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, type ChimelingProviderProps, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps };

package/dist/components/index.js

@@ -4,4 +4,6 @@ import { ChimelingRoot } from "./root.js";
 import { ChimelingTrigger } from "./trigger.js";
 import { ChimelingPopover } from "./popover.js";
 import { Chimeling } from "./chimeling.js";
-export { Chimeling, ChimelingPopover, ChimelingProvider, ChimelingRoot, ChimelingTrigger };
+import { ChimelingPlayground } from "./playground/playground.js";
+import "./playground/index.js";
+export { Chimeling, ChimelingPlayground, ChimelingPopover, ChimelingProvider, ChimelingRoot, ChimelingTrigger };

package/dist/components/playground/index.js

@@ -0,0 +1,2 @@
+import { ChimelingPlayground } from "./playground.js";
+export { ChimelingPlayground };

package/dist/components/playground/panel.js

@@ -0,0 +1,173 @@
+"use client";
+import styles_default from "../../node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.js";
+import useTweaks from "./store.js";
+import { ClassNames, Global } from "@emotion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ButtonGroup, Folder, SelectControl, Slider, TextControl, Toggle } from "dialkit";
+//#region src/components/playground/panel.tsx
+function PlaygroundPanel() {
+	const tweaks = useTweaks();
+	return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ jsxs("div", {
+		className: cx("dialkit-root", css({
+			width: 320,
+			display: "flex",
+			flexDirection: "column",
+			gap: "var(--dial-row-gap)",
+			position: "fixed",
+			top: "calc(var(--dial-row-gap) * 1.5)",
+			right: "calc(var(--dial-row-gap) * 1.5)",
+			boxShadow: "var(--dial-shadow)",
+			background: "var(--dial-glass-bg)",
+			border: "1px solid var(--dial-border)",
+			backdropFilter: "blur(var(--dial-backdrop-blur))",
+			padding: "calc(var(--dial-row-gap) * 1.5)",
+			borderRadius: 14
+		})),
+		"data-theme": "system",
+		children: [
+			/* @__PURE__ */ jsx(Global, { styles: styles_default }),
+			/* @__PURE__ */ jsx(SelectControl, {
+				label: "Mode",
+				value: tweaks.mode,
+				options: [{
+					label: "Live",
+					value: "live"
+				}, {
+					label: "Mock",
+					value: "mock"
+				}],
+				onChange: (v) => tweaks.set("mode", v)
+			}),
+			tweaks.mode === "live" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TextControl, {
+				label: "Base URL",
+				value: tweaks.baseUrl,
+				onChange: (v) => tweaks.set("baseUrl", v)
+			}), /* @__PURE__ */ jsx(TextControl, {
+				label: "User ID",
+				value: tweaks.userId,
+				onChange: (v) => tweaks.set("userId", v)
+			})] }),
+			tweaks.mode === "mock" && /* @__PURE__ */ jsxs(Folder, {
+				title: "Presence",
+				children: [/* @__PURE__ */ jsx(SelectControl, {
+					label: "Status",
+					value: tweaks.presence.status,
+					options: [
+						{
+							label: "Online",
+							value: "online"
+						},
+						{
+							label: "Idle",
+							value: "idle"
+						},
+						{
+							label: "Offline",
+							value: "offline"
+						}
+					],
+					onChange: (v) => tweaks.set("presence.status", v)
+				}), tweaks.presence.status !== "offline" && tweaks.presence.activity !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(TextControl, {
+						label: "Gerund",
+						value: tweaks.presence.activity.gerund,
+						onChange: (v) => tweaks.set("presence.activity.gerund", v)
+					}),
+					/* @__PURE__ */ jsx(TextControl, {
+						label: "App Name",
+						value: tweaks.presence.activity.appName,
+						onChange: (v) => tweaks.set("presence.activity.appName", v)
+					}),
+					/* @__PURE__ */ jsx(TextControl, {
+						label: "Icon Hash",
+						value: tweaks.presence.activity.iconHash,
+						onChange: (v) => tweaks.set("presence.activity.iconHash", v)
+					})
+				] })]
+			}),
+			/* @__PURE__ */ jsxs(Folder, {
+				title: "Behavior",
+				children: [
+					/* @__PURE__ */ jsx(SelectControl, {
+						label: "Side",
+						value: tweaks.behavior.side,
+						options: [
+							{
+								label: "Top",
+								value: "top"
+							},
+							{
+								label: "Bottom",
+								value: "bottom"
+							},
+							{
+								label: "Left",
+								value: "left"
+							},
+							{
+								label: "Right",
+								value: "right"
+							},
+							{
+								label: "Inline Start",
+								value: "inline-start"
+							},
+							{
+								label: "Inline End",
+								value: "inline-end"
+							}
+						],
+						onChange: (v) => tweaks.set("behavior.side", v)
+					}),
+					/* @__PURE__ */ jsx(SelectControl, {
+						label: "Align",
+						value: tweaks.behavior.align,
+						options: [
+							{
+								label: "Start",
+								value: "start"
+							},
+							{
+								label: "Center",
+								value: "center"
+							},
+							{
+								label: "End",
+								value: "end"
+							}
+						],
+						onChange: (v) => tweaks.set("behavior.align", v)
+					}),
+					/* @__PURE__ */ jsx(Toggle, {
+						label: "Open on Hover",
+						checked: tweaks.behavior.openOnHover,
+						onChange: (v) => tweaks.set("behavior.openOnHover", v)
+					}),
+					tweaks.behavior.openOnHover && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Slider, {
+						label: "Hover Open Delay",
+						min: 0,
+						max: 1500,
+						step: 100,
+						value: tweaks.behavior.hoverOpenDelay,
+						onChange: (v) => tweaks.set("behavior.hoverOpenDelay", v)
+					}), /* @__PURE__ */ jsx(Slider, {
+						label: "Hover Close Delay",
+						min: 0,
+						max: 1500,
+						step: 100,
+						value: tweaks.behavior.hoverCloseDelay,
+						onChange: (v) => tweaks.set("behavior.hoverCloseDelay", v)
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsx(ButtonGroup, { buttons: [{
+				label: "Reset",
+				onClick: tweaks.reset
+			}] })
+		]
+	}) });
+}
+//#endregion
+export { PlaygroundPanel };
+
+//# sourceMappingURL=panel.js.map

package/dist/components/playground/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":["dialkitStyles"],"sources":["../../../src/components/playground/panel.tsx"],"sourcesContent":["'use client'\n\nimport dialkitStyles from 'dialkit/styles.css?raw'\nimport { Global, ClassNames } from '@emotion/react'\nimport { TextControl, SelectControl, Folder, Toggle, Slider, ButtonGroup } from 'dialkit'\nimport useTweaks from './store'\n\nexport function PlaygroundPanel() {\n  const tweaks = useTweaks()\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            'dialkit-root',\n            css({\n              width: 320,\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 'var(--dial-row-gap)',\n              position: 'fixed',\n              top: 'calc(var(--dial-row-gap) * 1.5)',\n              right: 'calc(var(--dial-row-gap) * 1.5)',\n              boxShadow: 'var(--dial-shadow)',\n              background: 'var(--dial-glass-bg)',\n              border: '1px solid var(--dial-border)',\n              backdropFilter: 'blur(var(--dial-backdrop-blur))',\n              padding: 'calc(var(--dial-row-gap) * 1.5)',\n              borderRadius: 14,\n            }),\n          )}\n          data-theme=\"system\"\n        >\n          <Global styles={dialkitStyles} />\n          <SelectControl\n            label=\"Mode\"\n            value={tweaks.mode}\n            options={[\n              {\n                label: 'Live',\n                value: 'live',\n              },\n              { label: 'Mock', value: 'mock' },\n            ]}\n            onChange={v => tweaks.set('mode', v)}\n          />\n          {tweaks.mode === 'live' && (\n            <>\n              <TextControl\n                label=\"Base URL\"\n                value={tweaks.baseUrl}\n                onChange={v => tweaks.set('baseUrl', v)}\n              />\n              <TextControl\n                label=\"User ID\"\n                value={tweaks.userId}\n                onChange={v => tweaks.set('userId', v)}\n              />\n            </>\n          )}\n          {tweaks.mode === 'mock' && (\n            <Folder title=\"Presence\">\n              <SelectControl\n                label=\"Status\"\n                value={tweaks.presence.status}\n                options={[\n                  {\n                    label: 'Online',\n                    value: 'online',\n                  },\n                  { label: 'Idle', value: 'idle' },\n                  { label: 'Offline', value: 'offline' },\n                ]}\n                onChange={v => tweaks.set('presence.status', v)}\n              />\n              {tweaks.presence.status !== 'offline' && tweaks.presence.activity !== null && (\n                <>\n                  <TextControl\n                    label=\"Gerund\"\n                    value={tweaks.presence.activity.gerund}\n                    onChange={v => tweaks.set('presence.activity.gerund', v)}\n                  />\n                  <TextControl\n                    label=\"App Name\"\n                    value={tweaks.presence.activity.appName}\n                    onChange={v => tweaks.set('presence.activity.appName', v)}\n                  />\n                  <TextControl\n                    label=\"Icon Hash\"\n                    value={tweaks.presence.activity.iconHash!}\n                    onChange={v => tweaks.set('presence.activity.iconHash', v)}\n                  />\n                </>\n              )}\n            </Folder>\n          )}\n          <Folder title=\"Behavior\">\n            <SelectControl\n              label=\"Side\"\n              value={tweaks.behavior.side}\n              options={[\n                { label: 'Top', value: 'top' },\n                { label: 'Bottom', value: 'bottom' },\n                { label: 'Left', value: 'left' },\n                { label: 'Right', value: 'right' },\n                { label: 'Inline Start', value: 'inline-start' },\n                { label: 'Inline End', value: 'inline-end' },\n              ]}\n              onChange={v => tweaks.set('behavior.side', v)}\n            />\n            <SelectControl\n              label=\"Align\"\n              value={tweaks.behavior.align}\n              options={[\n                { label: 'Start', value: 'start' },\n                { label: 'Center', value: 'center' },\n                { label: 'End', value: 'end' },\n              ]}\n              onChange={v => tweaks.set('behavior.align', v)}\n            />\n            <Toggle\n              label=\"Open on Hover\"\n              checked={tweaks.behavior.openOnHover}\n              onChange={v => tweaks.set('behavior.openOnHover', v)}\n            />\n            {tweaks.behavior.openOnHover && (\n              <>\n                <Slider\n                  label=\"Hover Open Delay\"\n                  min={0}\n                  max={1500}\n                  step={100}\n                  value={tweaks.behavior.hoverOpenDelay}\n                  onChange={v => tweaks.set('behavior.hoverOpenDelay', v)}\n                />\n                <Slider\n                  label=\"Hover Close Delay\"\n                  min={0}\n                  max={1500}\n                  step={100}\n                  value={tweaks.behavior.hoverCloseDelay}\n                  onChange={v => tweaks.set('behavior.hoverCloseDelay', v)}\n                />\n              </>\n            )}\n          </Folder>\n          <ButtonGroup buttons={[{ label: 'Reset', onClick: tweaks.reset }]} />\n        </div>\n      )}\n    </ClassNames>\n  )\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,kBAAkB;CAChC,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,gBACA,IAAI;GACF,OAAO;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,UAAU;GACV,KAAK;GACL,OAAO;GACP,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,gBAAgB;GAChB,SAAS;GACT,cAAc;EAChB,CAAC,CACH;EACA,cAAW;EAnBb,UAAA;GAqBE,oBAAC,QAAD,EAAQ,QAAQA,eAAgB,CAAA;GAChC,oBAAC,eAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,SAAS,CACP;KACE,OAAO;KACP,OAAO;IACT,GACA;KAAE,OAAO;KAAQ,OAAO;IAAO,CACjC;IACA,WAAU,MAAK,OAAO,IAAI,QAAQ,CAAC;GACpC,CAAA;GACA,OAAO,SAAS,UACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,aAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,WAAU,MAAK,OAAO,IAAI,WAAW,CAAC;GACvC,CAAA,GACD,oBAAC,aAAD;IACE,OAAM;IACN,OAAO,OAAO;IACd,WAAU,MAAK,OAAO,IAAI,UAAU,CAAC;GACtC,CAAA,CACD,EAAA,CAAA;GAEH,OAAO,SAAS,UACf,qBAAC,QAAD;IAAQ,OAAM;IAAd,UAAA,CACE,oBAAC,eAAD;KACE,OAAM;KACN,OAAO,OAAO,SAAS;KACvB,SAAS;MACP;OACE,OAAO;OACP,OAAO;MACT;MACA;OAAE,OAAO;OAAQ,OAAO;MAAO;MAC/B;OAAE,OAAO;OAAW,OAAO;MAAU;KACvC;KACA,WAAU,MAAK,OAAO,IAAI,mBAAmB,CAAC;IAC/C,CAAA,GACA,OAAO,SAAS,WAAW,aAAa,OAAO,SAAS,aAAa,QACpE,qBAAA,UAAA,EAAA,UAAA;KACE,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,4BAA4B,CAAC;KACxD,CAAA;KACD,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,6BAA6B,CAAC;KACzD,CAAA;KACD,oBAAC,aAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS,SAAS;MAChC,WAAU,MAAK,OAAO,IAAI,8BAA8B,CAAC;KAC1D,CAAA;IACD,EAAA,CAAA,CAEE;;GAEV,qBAAC,QAAD;IAAQ,OAAM;IAAd,UAAA;KACE,oBAAC,eAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS;MACvB,SAAS;OACP;QAAE,OAAO;QAAO,OAAO;OAAM;OAC7B;QAAE,OAAO;QAAU,OAAO;OAAS;OACnC;QAAE,OAAO;QAAQ,OAAO;OAAO;OAC/B;QAAE,OAAO;QAAS,OAAO;OAAQ;OACjC;QAAE,OAAO;QAAgB,OAAO;OAAe;OAC/C;QAAE,OAAO;QAAc,OAAO;OAAa;MAC7C;MACA,WAAU,MAAK,OAAO,IAAI,iBAAiB,CAAC;KAC7C,CAAA;KACD,oBAAC,eAAD;MACE,OAAM;MACN,OAAO,OAAO,SAAS;MACvB,SAAS;OACP;QAAE,OAAO;QAAS,OAAO;OAAQ;OACjC;QAAE,OAAO;QAAU,OAAO;OAAS;OACnC;QAAE,OAAO;QAAO,OAAO;OAAM;MAC/B;MACA,WAAU,MAAK,OAAO,IAAI,kBAAkB,CAAC;KAC9C,CAAA;KACD,oBAAC,QAAD;MACE,OAAM;MACN,SAAS,OAAO,SAAS;MACzB,WAAU,MAAK,OAAO,IAAI,wBAAwB,CAAC;KACpD,CAAA;KACA,OAAO,SAAS,eACf,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;MACE,OAAM;MACN,KAAK;MACL,KAAK;MACL,MAAM;MACN,OAAO,OAAO,SAAS;MACvB,WAAU,MAAK,OAAO,IAAI,2BAA2B,CAAC;KACvD,CAAA,GACD,oBAAC,QAAD;MACE,OAAM;MACN,KAAK;MACL,KAAK;MACL,MAAM;MACN,OAAO,OAAO,SAAS;MACvB,WAAU,MAAK,OAAO,IAAI,4BAA4B,CAAC;KACxD,CAAA,CACD,EAAA,CAAA;IAEE;;GACR,oBAAC,aAAD,EAAa,SAAS,CAAC;IAAE,OAAO;IAAS,SAAS,OAAO;GAAM,CAAC,EAAI,CAAA;EACjE;CAEG,CAAA,EAAA,CAAA;AAEhB"}

package/dist/components/playground/playground.d.ts

@@ -0,0 +1,8 @@
+//#region src/components/playground/playground.d.ts
+type ChimelingPlaygroundProps = {
+  className?: string;
+};
+declare function ChimelingPlayground({ className }: ChimelingPlaygroundProps): import("react").JSX.Element;
+//#endregion
+export { ChimelingPlayground, ChimelingPlaygroundProps };
+//# sourceMappingURL=playground.d.ts.map

package/dist/components/playground/playground.js

@@ -0,0 +1,35 @@
+"use client";
+import { ChimelingProvider } from "../provider.js";
+import { Chimeling } from "../chimeling.js";
+import useTweaks from "./store.js";
+import { PlaygroundPanel } from "./panel.js";
+import { ClassNames } from "@emotion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/playground/playground.tsx
+function ChimelingPlayground({ className }) {
+	const tweaks = useTweaks();
+	return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ jsxs("div", {
+		className: cx(css({
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		}), className),
+		children: [/* @__PURE__ */ jsx(PlaygroundPanel, {}), /* @__PURE__ */ jsx(ChimelingProvider, {
+			baseUrl: tweaks.baseUrl,
+			children: /* @__PURE__ */ jsxs(Chimeling.Root, {
+				userId: tweaks.userId,
+				presence: tweaks.mode === "mock" ? tweaks.presence : void 0,
+				side: tweaks.behavior.side,
+				align: tweaks.behavior.align,
+				openOnHover: tweaks.behavior.openOnHover,
+				hoverOpenDelay: tweaks.behavior.hoverOpenDelay,
+				hoverCloseDelay: tweaks.behavior.hoverCloseDelay,
+				children: [/* @__PURE__ */ jsx(Chimeling.Trigger, {}), /* @__PURE__ */ jsx(Chimeling.Popover, {})]
+			})
+		})]
+	}) });
+}
+//#endregion
+export { ChimelingPlayground };
+
+//# sourceMappingURL=playground.js.map

package/dist/components/playground/playground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.js","names":[],"sources":["../../../src/components/playground/playground.tsx"],"sourcesContent":["'use client'\n\nimport { ClassNames } from '@emotion/react'\nimport { Chimeling } from '../chimeling'\nimport { ChimelingProvider } from '../provider'\nimport { PlaygroundPanel } from './panel'\nimport useTweaks from './store'\n\nexport type ChimelingPlaygroundProps = {\n  className?: string\n}\n\nexport function ChimelingPlayground({ className }: ChimelingPlaygroundProps) {\n  const tweaks = useTweaks()\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            css({\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n            }),\n            className,\n          )}\n        >\n          <PlaygroundPanel />\n          <ChimelingProvider baseUrl={tweaks.baseUrl}>\n            <Chimeling.Root\n              userId={tweaks.userId}\n              presence={tweaks.mode === 'mock' ? tweaks.presence : undefined}\n              side={tweaks.behavior.side}\n              align={tweaks.behavior.align}\n              openOnHover={tweaks.behavior.openOnHover}\n              hoverOpenDelay={tweaks.behavior.hoverOpenDelay}\n              hoverCloseDelay={tweaks.behavior.hoverCloseDelay}\n            >\n              <Chimeling.Trigger />\n              <Chimeling.Popover />\n            </Chimeling.Root>\n          </ChimelingProvider>\n        </div>\n      )}\n    </ClassNames>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,oBAAoB,EAAE,aAAuC;CAC3E,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB,CAAC,GACD,SACF;EARF,UAAA,CAUE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,mBAAD;GAAmB,SAAS,OAAO;GACjC,UAAA,qBAAC,UAAU,MAAX;IACE,QAAQ,OAAO;IACf,UAAU,OAAO,SAAS,SAAS,OAAO,WAAW,KAAA;IACrD,MAAM,OAAO,SAAS;IACtB,OAAO,OAAO,SAAS;IACvB,aAAa,OAAO,SAAS;IAC7B,gBAAgB,OAAO,SAAS;IAChC,iBAAiB,OAAO,SAAS;IAPnC,UAAA,CASE,oBAAC,UAAU,SAAX,CAAoB,CAAA,GACpB,oBAAC,UAAU,SAAX,CAAoB,CAAA,CACN;;EACC,CAAA,CAChB;CAEG,CAAA,EAAA,CAAA;AAEhB"}

package/dist/components/playground/store.js

@@ -0,0 +1,43 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { cloneDeep, get, set } from "es-toolkit/compat";
+//#region src/components/playground/store.ts
+const defaults = {
+	baseUrl: "https://chimeling.app",
+	userId: "user_3GA6hha0H3nrk9rTeCJ3pR6DcvY",
+	mode: "mock",
+	behavior: {
+		openOnHover: false,
+		hoverOpenDelay: 300,
+		hoverCloseDelay: 0,
+		side: "bottom",
+		align: "center"
+	},
+	presence: {
+		status: "online",
+		activity: {
+			gerund: "writing code",
+			appName: "Xcode",
+			iconHash: "9e769c255c3afb5b435502f8294229c78e7514cf51051c16ddf368d72f757b1d",
+			startedAt: /* @__PURE__ */ new Date()
+		}
+	}
+};
+const useTweaks = create()(persist((set$1, getState) => ({
+	...defaults,
+	get: (path) => get(getState(), path),
+	set: (path, value) => set$1((state) => {
+		const next = cloneDeep(state);
+		set(next, path, value);
+		return next;
+	}),
+	reset: () => set$1(defaults)
+}), {
+	name: "chimeling-playground",
+	storage: createJSONStorage(() => localStorage, { reviver: (key, value) => key === "startedAt" && typeof value === "string" ? new Date(value) : value }),
+	partialize: ({ get, set, reset, ...tweaks }) => tweaks
+}));
+//#endregion
+export { useTweaks as default };
+
+//# sourceMappingURL=store.js.map

package/dist/components/playground/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":["lodashGet","set","lodashCloneDeep"],"sources":["../../../src/components/playground/store.ts"],"sourcesContent":["import { create } from 'zustand'\nimport { persist, createJSONStorage } from 'zustand/middleware'\nimport { get as lodashGet, set as lodashSet, cloneDeep as lodashCloneDeep } from 'es-toolkit/compat'\nimport type { GetResolvedUserPresenceResponse } from '@cairntale/chimeling-js'\nimport type { Chimeling } from '../chimeling'\n\ninterface Tweaks {\n  baseUrl: string\n  userId: string\n  mode: 'live' | 'mock'\n  behavior: Required<\n    Pick<\n      React.ComponentProps<typeof Chimeling.Root>,\n      'openOnHover' | 'hoverOpenDelay' | 'hoverCloseDelay' | 'align' | 'side'\n    >\n  >\n  presence: GetResolvedUserPresenceResponse\n}\n\nconst NOW = new Date()\n\nconst defaults: Tweaks = {\n  baseUrl: 'https://chimeling.app',\n  userId: 'user_3GA6hha0H3nrk9rTeCJ3pR6DcvY',\n  mode: 'mock',\n  behavior: {\n    openOnHover: false,\n    hoverOpenDelay: 300,\n    hoverCloseDelay: 0,\n    side: 'bottom',\n    align: 'center',\n  },\n  presence: {\n    status: 'online',\n    activity: {\n      gerund: 'writing code',\n      appName: 'Xcode',\n      iconHash: '9e769c255c3afb5b435502f8294229c78e7514cf51051c16ddf368d72f757b1d',\n      startedAt: NOW,\n    },\n  },\n}\n\nconst useTweaks = create<\n  Tweaks & {\n    get: (path: string) => any\n    set: (path: string, value: any) => void\n    reset: () => void\n  }\n>()(\n  persist(\n    (set, getState) => ({\n      ...defaults,\n      get: (path: string): any => lodashGet(getState(), path),\n      set: (path: string, value: any) =>\n        set(state => {\n          const next = lodashCloneDeep(state)\n          lodashSet(next, path, value)\n          return next\n        }),\n      reset: () => set(defaults),\n    }),\n    {\n      name: 'chimeling-playground',\n      storage: createJSONStorage(() => localStorage, {\n        reviver: (key, value) =>\n          key === 'startedAt' && typeof value === 'string' ? new Date(value) : value, // TODO: a more robust date parsing\n      }),\n      partialize: ({ get, set, reset, ...tweaks }) => tweaks,\n    },\n  ),\n)\n\nexport default useTweaks\n"],"mappings":";;;;AAqBA,MAAM,WAAmB;CACvB,SAAS;CACT,QAAQ;CACR,MAAM;CACN,UAAU;EACR,aAAa;EACb,gBAAgB;EAChB,iBAAiB;EACjB,MAAM;EACN,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,UAAU;GACR,QAAQ;GACR,SAAS;GACT,UAAU;GACV,2BAAW,IAnBD,KAmBG;EACf;CACF;AACF;AAEA,MAAM,YAAY,OAMhB,CAAC,CACD,SACG,OAAK,cAAc;CAClB,GAAG;CACH,MAAM,SAAsBA,IAAU,SAAS,GAAG,IAAI;CACtD,MAAM,MAAc,UAClBC,OAAI,UAAS;EACX,MAAM,OAAOC,UAAgB,KAAK;EAClC,IAAU,MAAM,MAAM,KAAK;EAC3B,OAAO;CACT,CAAC;CACH,aAAaD,MAAI,QAAQ;AAC3B,IACA;CACE,MAAM;CACN,SAAS,wBAAwB,cAAc,EAC7C,UAAU,KAAK,UACb,QAAQ,eAAe,OAAO,UAAU,WAAW,IAAI,KAAK,KAAK,IAAI,MACzE,CAAC;CACD,aAAa,EAAE,KAAK,KAAK,OAAO,GAAG,aAAa;AAClD,CACF,CACF"}

package/dist/components/provider.d.ts

@@ -3,9 +3,10 @@ import { ReactNode } from "react";
 type ChimelingProviderProps = {
   baseUrl?: string;
   refreshInterval?: number;
-  children: ReactNode;
+  children?: ReactNode;
+  nonce?: string;
 };
-declare function ChimelingProvider({ baseUrl, refreshInterval, children }: ChimelingProviderProps): import("react").JSX.Element;
+declare function ChimelingProvider({ baseUrl, refreshInterval, children, nonce }: ChimelingProviderProps): import("react").JSX.Element;
 //#endregion
-export { ChimelingProvider };
+export { ChimelingProvider, ChimelingProviderProps };
 //# sourceMappingURL=provider.d.ts.map

package/dist/components/provider.js

@@ -3,17 +3,31 @@ import { DEFAULT_PRESENCE_REFRESH_INTERVAL } from "../lib/config.js";
 import { ChimelingContext } from "../lib/context.js";
 import { useMemo } from "react";
 import { createClient, createConfig } from "@cairntale/chimeling-js/client";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/provider.tsx
-function ChimelingProvider({ baseUrl, refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL, children }) {
+function ChimelingProvider({ baseUrl, refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL, children, nonce }) {
 	const client = useMemo(() => createClient(createConfig({ baseUrl: baseUrl ?? "https://chimeling.app" })), [baseUrl]);
 	const value = useMemo(() => ({
 		client,
 		refreshInterval
 	}), [client, refreshInterval]);
-	return /* @__PURE__ */ jsx(ChimelingContext.Provider, {
-		value,
-		children
+	const emotionCache = useMemo(() => {
+		const insertionPoint = typeof document !== "undefined" ? document.querySelector(`style#chl-style-insertion-point`) ?? void 0 : void 0;
+		return createCache({
+			key: "chl-internal",
+			prepend: !insertionPoint,
+			insertionPoint,
+			nonce
+		});
+	}, [nonce]);
+	return /* @__PURE__ */ jsx(CacheProvider, {
+		value: emotionCache,
+		children: /* @__PURE__ */ jsx(ChimelingContext.Provider, {
+			value,
+			children
+		})
 	});
 }
 //#endregion

package/dist/components/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":[],"sources":["../../src/components/provider.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ReactNode } from 'react'\nimport { createClient, createConfig } from '@cairntale/chimeling-js/client'\nimport { DEFAULT_PRESENCE_REFRESH_INTERVAL } from '../lib/config'\nimport { ChimelingContext } from '../lib/context'\n\ntype ChimelingProviderProps = {\n  baseUrl?: string\n  refreshInterval?: number\n  children: ReactNode\n}\n\nexport function ChimelingProvider({\n  baseUrl,\n  refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL,\n  children,\n}: ChimelingProviderProps) {\n  const client = useMemo(\n    () => createClient(createConfig({ baseUrl: baseUrl ?? 'https://chimeling.app' })),\n    [baseUrl],\n  )\n  const value = useMemo(() => ({ client, refreshInterval }), [client, refreshInterval])\n\n  return <ChimelingContext.Provider value={value}>{children}</ChimelingContext.Provider>\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,kBAAkB,EAChC,SACA,kBAAkB,mCAClB,YACyB;CACzB,MAAM,SAAS,cACP,aAAa,aAAa,EAAE,SAAS,WAAW,wBAAwB,CAAC,CAAC,GAChF,CAAC,OAAO,CACV;CACA,MAAM,QAAQ,eAAe;EAAE;EAAQ;CAAgB,IAAI,CAAC,QAAQ,eAAe,CAAC;CAEpF,OAAO,oBAAC,iBAAiB,UAAlB;EAAkC;EAAQ;CAAoC,CAAA;AACvF"}
+{"version":3,"file":"provider.js","names":[],"sources":["../../src/components/provider.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ReactNode } from 'react'\nimport { createClient, createConfig } from '@cairntale/chimeling-js/client'\nimport { DEFAULT_PRESENCE_REFRESH_INTERVAL } from '../lib/config'\nimport { ChimelingContext } from '../lib/context'\nimport createCache from '@emotion/cache'\nimport { CacheProvider } from '@emotion/react'\n\nexport type ChimelingProviderProps = {\n  baseUrl?: string\n  refreshInterval?: number\n  children?: ReactNode\n  nonce?: string\n}\n\nexport function ChimelingProvider({\n  baseUrl,\n  refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL,\n  children,\n  nonce,\n}: ChimelingProviderProps) {\n  const client = useMemo(\n    () => createClient(createConfig({ baseUrl: baseUrl ?? 'https://chimeling.app' })),\n    [baseUrl],\n  )\n  const value = useMemo(() => ({ client, refreshInterval }), [client, refreshInterval])\n\n  const emotionCache = useMemo(() => {\n    const insertionPoint =\n      typeof document !== 'undefined'\n        ? (document.querySelector<HTMLElement>(`style#chl-style-insertion-point`) ?? undefined)\n        : undefined\n\n    return createCache({\n      key: 'chl-internal',\n      prepend: !insertionPoint,\n      insertionPoint,\n      nonce,\n    })\n  }, [nonce])\n\n  return (\n    <CacheProvider value={emotionCache}>\n      <ChimelingContext.Provider value={value}>{children}</ChimelingContext.Provider>\n    </CacheProvider>\n  )\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,kBAAkB,EAChC,SACA,kBAAkB,mCAClB,UACA,SACyB;CACzB,MAAM,SAAS,cACP,aAAa,aAAa,EAAE,SAAS,WAAW,wBAAwB,CAAC,CAAC,GAChF,CAAC,OAAO,CACV;CACA,MAAM,QAAQ,eAAe;EAAE;EAAQ;CAAgB,IAAI,CAAC,QAAQ,eAAe,CAAC;CAEpF,MAAM,eAAe,cAAc;EACjC,MAAM,iBACJ,OAAO,aAAa,cACf,SAAS,cAA2B,iCAAiC,KAAK,KAAA,IAC3E,KAAA;EAEN,OAAO,YAAY;GACjB,KAAK;GACL,SAAS,CAAC;GACV;GACA;EACF,CAAC;CACH,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,eAAD;EAAe,OAAO;EACpB,UAAA,oBAAC,iBAAiB,UAAlB;GAAkC;GAAQ;EAAoC,CAAA;CACjE,CAAA;AAEnB"}

package/dist/hooks/use-resolved-user-presence.js

@@ -1,13 +1,18 @@
 "use client";
+import { PACKAGE_NAME } from "../lib/config.js";
 import { useChimelingContext } from "../lib/context.js";
-import { resolvedUserPresenceKey } from "../lib/presence-key.js";
 import useSWR from "swr";
 import { getResolvedUserPresence } from "@cairntale/chimeling-js";
 //#region src/hooks/use-resolved-user-presence.ts
 function useResolvedUserPresence(userId, options) {
 	const { client, refreshInterval } = useChimelingContext();
 	const baseUrl = client.getConfig().baseUrl ?? "";
-	return useSWR(userId ? resolvedUserPresenceKey(userId, baseUrl) : null, async ([, , , id]) => {
+	return useSWR(userId ? [
+		PACKAGE_NAME,
+		"resolved-user-presence",
+		baseUrl,
+		userId
+	] : null, async ([, , , id]) => {
 		const { data } = await getResolvedUserPresence({ userId: id }, {
 			client,
 			throwOnError: true

package/dist/hooks/use-resolved-user-presence.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-resolved-user-presence.js","names":[],"sources":["../../src/hooks/use-resolved-user-presence.ts"],"sourcesContent":["'use client'\n\nimport useSWR from 'swr'\nimport { getResolvedUserPresence } from '@cairntale/chimeling-js'\nimport { useChimelingContext } from '../lib/context'\nimport { resolvedUserPresenceKey } from '../lib/presence-key'\n\nexport function useResolvedUserPresence(\n  userId: string,\n  options?: {\n    refreshInterval?: number\n  },\n) {\n  const { client, refreshInterval } = useChimelingContext()\n  const baseUrl = client.getConfig().baseUrl ?? ''\n\n  return useSWR(\n    userId ? resolvedUserPresenceKey(userId, baseUrl) : null,\n    async ([, , , id]) => {\n      const { data } = await getResolvedUserPresence({ userId: id }, { client, throwOnError: true })\n      return data\n    },\n    {\n      refreshInterval: options?.refreshInterval ?? refreshInterval,\n    },\n  )\n}\n"],"mappings":";;;;;;AAOA,SAAgB,wBACd,QACA,SAGA;CACA,MAAM,EAAE,QAAQ,oBAAoB,oBAAoB;CACxD,MAAM,UAAU,OAAO,UAAU,CAAC,CAAC,WAAW;CAE9C,OAAO,OACL,SAAS,wBAAwB,QAAQ,OAAO,IAAI,MACpD,OAAO,OAAO,QAAQ;EACpB,MAAM,EAAE,SAAS,MAAM,wBAAwB,EAAE,QAAQ,GAAG,GAAG;GAAE;GAAQ,cAAc;EAAK,CAAC;EAC7F,OAAO;CACT,GACA,EACE,iBAAiB,SAAS,mBAAmB,gBAC/C,CACF;AACF"}
+{"version":3,"file":"use-resolved-user-presence.js","names":[],"sources":["../../src/hooks/use-resolved-user-presence.ts"],"sourcesContent":["'use client'\n\nimport useSWR from 'swr'\nimport { getResolvedUserPresence } from '@cairntale/chimeling-js'\nimport { useChimelingContext } from '../lib/context'\nimport { PACKAGE_NAME } from '../lib/config'\n\nexport function useResolvedUserPresence(\n  userId: string,\n  options?: {\n    refreshInterval?: number\n  },\n) {\n  const { client, refreshInterval } = useChimelingContext()\n  const baseUrl = client.getConfig().baseUrl ?? ''\n\n  return useSWR(\n    userId ? [PACKAGE_NAME, 'resolved-user-presence', baseUrl, userId] : null,\n    async ([, , , id]) => {\n      const { data } = await getResolvedUserPresence({ userId: id }, { client, throwOnError: true })\n      return data\n    },\n    {\n      refreshInterval: options?.refreshInterval ?? refreshInterval,\n    },\n  )\n}\n"],"mappings":";;;;;;AAOA,SAAgB,wBACd,QACA,SAGA;CACA,MAAM,EAAE,QAAQ,oBAAoB,oBAAoB;CACxD,MAAM,UAAU,OAAO,UAAU,CAAC,CAAC,WAAW;CAE9C,OAAO,OACL,SAAS;EAAC;EAAc;EAA0B;EAAS;CAAM,IAAI,MACrE,OAAO,OAAO,QAAQ;EACpB,MAAM,EAAE,SAAS,MAAM,wBAAwB,EAAE,QAAQ,GAAG,GAAG;GAAE;GAAQ,cAAc;EAAK,CAAC;EAC7F,OAAO;CACT,GACA,EACE,iBAAiB,SAAS,mBAAmB,gBAC/C,CACF;AACF"}

package/dist/index.d.ts

@@ -1,11 +1,15 @@
-import { ChimelingProvider } from "./components/provider.js";
-import { PresenceActivity, ShowablePresence } from "./lib/showable-presence.js";
+import { ChimelingProvider, ChimelingProviderProps } from "./components/provider.js";
+import { PresenceActivity, ShowablePresence, getShowablePresence } from "./lib/showable-presence.js";
 import { ChimelingRoot, ChimelingRootProps } from "./components/root.js";
 import { ChimelingTrigger, ChimelingTriggerProps } from "./components/trigger.js";
 import { ChimelingPopover, ChimelingPopoverProps } from "./components/popover.js";
 import { Chimeling } from "./components/chimeling.js";
+import { ChimelingPlayground } from "./components/playground/playground.js";
 import "./components/index.js";
 import { useChimelingClient } from "./hooks/use-client.js";
 import { useResolvedUserPresence } from "./hooks/use-resolved-user-presence.js";
 import "./hooks/index.js";
-export { Chimeling, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps, type PresenceActivity, type ShowablePresence, useChimelingClient, useResolvedUserPresence };
+import { formatActivityDuration } from "./lib/format-activity-duration.js";
+import { iconImageUrl } from "./lib/icon-url.js";
+import "./lib/index.js";
+export { Chimeling, ChimelingPlayground, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, type ChimelingProviderProps, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps, type PresenceActivity, type ShowablePresence, formatActivityDuration, getShowablePresence, iconImageUrl, useChimelingClient, useResolvedUserPresence };

package/dist/index.js

@@ -1,11 +1,16 @@
 "use client";
 import { ChimelingProvider } from "./components/provider.js";
 import { useResolvedUserPresence } from "./hooks/use-resolved-user-presence.js";
+import { getShowablePresence } from "./lib/showable-presence.js";
 import { ChimelingRoot } from "./components/root.js";
 import { ChimelingTrigger } from "./components/trigger.js";
+import { formatActivityDuration } from "./lib/format-activity-duration.js";
+import { iconImageUrl } from "./lib/icon-url.js";
 import { ChimelingPopover } from "./components/popover.js";
 import { Chimeling } from "./components/chimeling.js";
+import { ChimelingPlayground } from "./components/playground/playground.js";
 import "./components/index.js";
 import { useChimelingClient } from "./hooks/use-client.js";
 import "./hooks/index.js";
-export { Chimeling, ChimelingPopover, ChimelingProvider, ChimelingRoot, ChimelingTrigger, useChimelingClient, useResolvedUserPresence };
+import "./lib/index.js";
+export { Chimeling, ChimelingPlayground, ChimelingPopover, ChimelingProvider, ChimelingRoot, ChimelingTrigger, formatActivityDuration, getShowablePresence, iconImageUrl, useChimelingClient, useResolvedUserPresence };

package/dist/lib/config.js

@@ -1,4 +1,4 @@
-import { name } from "../package.js";
+import { name } from "../packages/react/package.js";
 //#region src/lib/config.ts
 const PACKAGE_NAME = name;
 const DEFAULT_PRESENCE_REFRESH_INTERVAL = 5e3;

package/dist/lib/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["packageJson.name"],"sources":["../../src/lib/config.ts"],"sourcesContent":["import packageJson from '../../package.json' with { type: 'json' }\n\nexport const PACKAGE_NAME = packageJson.name\n\nexport const DEFAULT_PRESENCE_REFRESH_INTERVAL = 5_000\n\nexport function packageErrorMessage(message: string): string {\n  return `${PACKAGE_NAME}: ${message}`\n}\n"],"mappings":";;AAEA,MAAa,eAAeA;AAE5B,MAAa,oCAAoC;AAEjD,SAAgB,oBAAoB,SAAyB;CAC3D,OAAO,GAAG,aAAa,IAAI;AAC7B"}
+{"version":3,"file":"config.js","names":["packageJson.name"],"sources":["../../src/lib/config.ts"],"sourcesContent":["import packageJson from '../../package.json' with { type: 'json' }\nexport const PACKAGE_NAME = packageJson.name\n\nexport const DEFAULT_PRESENCE_REFRESH_INTERVAL = 5000\n\nexport function packageErrorMessage(message: string): string {\n  return `${PACKAGE_NAME}: ${message}`\n}\n"],"mappings":";;AACA,MAAa,eAAeA;AAE5B,MAAa,oCAAoC;AAEjD,SAAgB,oBAAoB,SAAyB;CAC3D,OAAO,GAAG,aAAa,IAAI;AAC7B"}

package/dist/lib/format-activity-duration.d.ts

@@ -0,0 +1,5 @@
+//#region src/lib/format-activity-duration.d.ts
+declare function formatActivityDuration(startedAt: Date, now: Date): string;
+//#endregion
+export { formatActivityDuration };
+//# sourceMappingURL=format-activity-duration.d.ts.map

package/dist/lib/format-activity-duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-activity-duration.js","names":[],"sources":["../../src/lib/format-activity-duration.ts"],"sourcesContent":["import { formatDuration, intervalToDuration } from 'date-fns'\n\nconst UNITS = ['years', 'months', 'weeks', 'days', 'hours', 'minutes'] as const\n\nconst JUST_NOW_MS = 60_000\n\nexport function formatActivityDuration(startedAt: Date, now: Date): string {\n  const start = startedAt instanceof Date ? startedAt : new Date(startedAt)\n  const elapsedMs = now.getTime() - start.getTime()\n  if (elapsedMs < JUST_NOW_MS) {\n    return 'just now'\n  }\n\n  const duration = intervalToDuration({ start, end: now })\n  const unit = UNITS.find(name => (duration[name] ?? 0) > 0)\n  if (!unit) {\n    return 'just now'\n  }\n\n  return `for ${formatDuration({ [unit]: duration[unit] }, { format: [unit] })}`\n}\n"],"mappings":";;AAEA,MAAM,QAAQ;CAAC;CAAS;CAAU;CAAS;CAAQ;CAAS;AAAS;AAErE,MAAM,cAAc;AAEpB,SAAgB,uBAAuB,WAAiB,KAAmB;CACzE,MAAM,QAAQ,qBAAqB,OAAO,YAAY,IAAI,KAAK,SAAS;CAExE,IADkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,IAChC,aACd,OAAO;CAGT,MAAM,WAAW,mBAAmB;EAAE;EAAO,KAAK;CAAI,CAAC;CACvD,MAAM,OAAO,MAAM,MAAK,UAAS,SAAS,SAAS,KAAK,CAAC;CACzD,IAAI,CAAC,MACH,OAAO;CAGT,OAAO,OAAO,eAAe,GAAG,OAAO,SAAS,MAAM,GAAG,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC;AAC7E"}
+{"version":3,"file":"format-activity-duration.js","names":[],"sources":["../../src/lib/format-activity-duration.ts"],"sourcesContent":["import { formatDuration, intervalToDuration } from 'date-fns'\n\nconst UNITS = ['years', 'months', 'weeks', 'days', 'hours', 'minutes'] as const\n\nconst JUST_NOW_MS = 60000\n\nexport function formatActivityDuration(startedAt: Date, now: Date): string {\n  const start = startedAt instanceof Date ? startedAt : new Date(startedAt)\n  const elapsedMs = now.getTime() - start.getTime()\n  if (elapsedMs < JUST_NOW_MS) {\n    return 'just now'\n  }\n\n  const duration = intervalToDuration({ start, end: now })\n  const unit = UNITS.find(name => (duration[name] ?? 0) > 0)\n  if (!unit) {\n    return 'just now'\n  }\n\n  return `for ${formatDuration({ [unit]: duration[unit] }, { format: [unit] })}`\n}\n"],"mappings":";;AAEA,MAAM,QAAQ;CAAC;CAAS;CAAU;CAAS;CAAQ;CAAS;AAAS;AAErE,MAAM,cAAc;AAEpB,SAAgB,uBAAuB,WAAiB,KAAmB;CACzE,MAAM,QAAQ,qBAAqB,OAAO,YAAY,IAAI,KAAK,SAAS;CAExE,IADkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,IAChC,aACd,OAAO;CAGT,MAAM,WAAW,mBAAmB;EAAE;EAAO,KAAK;CAAI,CAAC;CACvD,MAAM,OAAO,MAAM,MAAK,UAAS,SAAS,SAAS,KAAK,CAAC;CACzD,IAAI,CAAC,MACH,OAAO;CAGT,OAAO,OAAO,eAAe,GAAG,OAAO,SAAS,MAAM,GAAG,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC;AAC7E"}

package/dist/lib/icon-url.d.ts

@@ -0,0 +1,5 @@
+//#region src/lib/icon-url.d.ts
+declare function iconImageUrl(baseUrl: string, hash: string): string;
+//#endregion
+export { iconImageUrl };
+//# sourceMappingURL=icon-url.d.ts.map

package/dist/lib/index.d.ts

@@ -0,0 +1,4 @@
+import { PresenceActivity, ShowablePresence, getShowablePresence } from "./showable-presence.js";
+import { formatActivityDuration } from "./format-activity-duration.js";
+import { iconImageUrl } from "./icon-url.js";
+export { type PresenceActivity, type ShowablePresence, formatActivityDuration, getShowablePresence, iconImageUrl };

package/dist/lib/index.js

@@ -0,0 +1,4 @@
+import { getShowablePresence } from "./showable-presence.js";
+import { formatActivityDuration } from "./format-activity-duration.js";
+import { iconImageUrl } from "./icon-url.js";
+export { formatActivityDuration, getShowablePresence, iconImageUrl };

package/dist/lib/showable-presence.d.ts

@@ -7,6 +7,7 @@ type PresenceActivity = NonNullable<PresenceWithActivity['activity']>;
 type ShowablePresence = Omit<PresenceWithActivity, 'activity'> & {
   activity: PresenceActivity;
 };
+declare function getShowablePresence(presence: GetResolvedUserPresenceResponse | undefined): ShowablePresence | null;
 //#endregion
-export { PresenceActivity, ShowablePresence };
+export { PresenceActivity, ShowablePresence, getShowablePresence };
 //# sourceMappingURL=showable-presence.d.ts.map

package/dist/node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.js

@@ -0,0 +1,6 @@
+//#region ../../node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.css?raw
+var styles_default = "@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');\n\n/* Dialkit Theme - Dark glassmorphic design */\n.dialkit-root {\n  position: relative;\n\n  /* Surfaces */\n  --dial-surface: rgba(255, 255, 255, 0.05);\n  --dial-surface-hover: rgba(255, 255, 255, 0.1);\n  --dial-surface-active: rgba(255, 255, 255, 0.11);\n  --dial-surface-subtle: rgba(255, 255, 255, 0.06);\n\n  /* Text hierarchy - 3 levels */\n  --dial-text-root: #FFFFFF;   /* Root title */\n  --dial-text-section: rgba(255, 255, 255, 0.7); /* Section titles + carets */\n  --dial-text-label: rgba(255, 255, 255, 0.7);   /* Input labels */\n  --dial-text-focus: #ffffff;\n\n  /* Legacy aliases */\n  --dial-text-primary: rgba(255, 255, 255, 0.95);\n  --dial-text-secondary: rgba(255, 255, 255, 0.6);\n  --dial-text-tertiary: rgba(255, 255, 255, 0.4);\n\n  /* Borders */\n  --dial-border: rgba(255, 255, 255, 0.1);\n  --dial-border-hover: rgba(255, 255, 255, 0.15);\n  --dial-focus-ring: rgba(255, 255, 255, 0.6);\n\n  /* Timeline clips are light by default; light themes add a dark tint so\n     their shape stays distinct from the lane without replacing custom hues. */\n  --dial-timeline-clip-overlay: transparent;\n\n  /* Glassmorphic panel */\n  --dial-glass-bg: #212121;\n  --dial-dropdown-bg: #2a2a2a;\n  --dial-backdrop-blur: 20px;\n  --dial-radius: 8px;\n  --dial-row-height: 36px;\n  --dial-row-gap: 6px;\n  --dial-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n  --dial-shadow-collapsed: 0 4px 16px rgba(0, 0, 0, 0.25);\n  --dial-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);\n\n  /* Fonts */\n  font-family: system-ui, -apple-system, 'SF Pro Display', sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.dialkit-panel {\n  position: fixed;\n  z-index: 9999;\n  max-height: calc(100vh - 32px);\n  overflow: visible;\n}\n\n/* Inline mode */\n.dialkit-root[data-mode=\"inline\"] {\n  max-height: 100%;\n}\n\n.dialkit-panel[data-mode=\"inline\"] {\n  position: static;\n  z-index: auto;\n  max-height: inherit;\n  height: auto;\n  overflow: visible;\n}\n\n.dialkit-panel-inner {\n  box-sizing: border-box;\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  padding: 10px 12px;\n  transform: translateZ(0);\n  transform-origin: var(--dial-origin-y, top) var(--dial-origin-x, right);\n}\n\n.dialkit-panel[data-origin-x=\"left\"] {\n  --dial-origin-x: left;\n}\n\n.dialkit-panel[data-origin-x=\"right\"] {\n  --dial-origin-x: right;\n}\n\n.dialkit-panel[data-origin-y=\"top\"] {\n  --dial-origin-y: top;\n}\n\n.dialkit-panel[data-origin-y=\"bottom\"] {\n  --dial-origin-y: bottom;\n}\n\n.dialkit-panel[data-position=\"top-left\"] .dialkit-panel-inner {\n  max-height: calc(100vh - 80px);\n  overflow-y: auto;\n}\n\n\n.dialkit-panel-inner[data-collapsed=\"true\"] {\n  border-radius: 50%;\n  padding: 12px;\n  box-sizing: border-box;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-title-row {\n  display: none;\n}\n\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-header-top {\n  justify-content: center;\n  padding: 0;\n}\n\n.dialkit-panel-inner::-webkit-scrollbar {\n  display: none;\n}\n\n.dialkit-panel-inner {\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n\n.dialkit-panel-inline {\n  width: 100%;\n  height: auto;\n  max-height: inherit;\n  overflow-y: auto;\n  box-shadow: none;\n  border-radius: 0;\n  border: none;\n  box-sizing: border-box;\n}\n\n.dialkit-panel[data-mode=\"inline\"] .dialkit-panel-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: inherit;\n  height: auto;\n}\n\n/* Position variants */\n.dialkit-panel[data-position=\"top-right\"] {\n  top: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"top-left\"] {\n  top: 16px;\n  left: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-right\"] {\n  bottom: 16px;\n  right: 16px;\n}\n\n.dialkit-panel[data-position=\"bottom-left\"] {\n  bottom: 16px;\n  left: 16px;\n}\n\n/* Folder */\n.dialkit-folder {\n  padding-bottom: 8px;\n  margin-bottom: 8px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-folder:last-child:not(.dialkit-folder-root) {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-folder-root {\n  padding-bottom: 0;\n  margin-bottom: 0;\n  border-bottom: none;\n}\n\n.dialkit-panel-header {\n  padding-bottom: 6px;\n  margin-bottom: 12px;\n  border-bottom: 1px solid var(--dial-surface-subtle);\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-inner:not([data-collapsed=\"true\"]) > .dialkit-folder-root > .dialkit-panel-header {\n  cursor: grab;\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-inner:not([data-collapsed=\"true\"]) > .dialkit-folder-root > .dialkit-panel-header:active {\n  cursor: grabbing;\n}\n\n.dialkit-panel:not([data-mode=\"inline\"]) .dialkit-panel-icon {\n  cursor: pointer;\n}\n\n.dialkit-folder-header {\n  cursor: pointer;\n  user-select: none;\n}\n\n.dialkit-folder-header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 0 8px 0;\n}\n\n\n.dialkit-folder-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--dial-text-section);\n  letter-spacing: -0.01em;\n  transform: translateY(-0.5px);\n  transition: color 0.15s;\n}\n\n.dialkit-folder-title-root {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-folder-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n.dialkit-folder-copy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.dialkit-folder-copy svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-section);\n}\n\n.dialkit-folder-icon {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  color: var(--dial-text-label);\n  opacity: 0.6;\n}\n\n.dialkit-panel-icon {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-focus);\n  z-index: 1;\n}\n\n.dialkit-folder-content {\n  will-change: transform;\n}\n\n.dialkit-folder-inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dial-row-gap);\n  padding-bottom: 10px;\n}\n\n/* Non-root folders - top & bottom HR dividers */\n.dialkit-folder:not(.dialkit-folder-root) {\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: 1px solid var(--dial-surface-subtle);\n  margin-top: 4px;\n  margin-bottom: 4px;\n  padding-bottom: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root):last-child {\n  border-bottom: none;\n  margin-bottom: 0;\n}\n\n/* Adjacent non-root folders collapse gap and share a single divider */\n.dialkit-folder:not(.dialkit-folder-root) + .dialkit-folder:not(.dialkit-folder-root) {\n  margin-top: -10px;\n  border-top: none;\n}\n\n/* Non-root folder header - match row height */\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header {\n  height: var(--dial-row-height);\n  padding: 0;\n}\n\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header > .dialkit-folder-header-top {\n  padding: 0;\n  height: 100%;\n}\n\n/* Root folder inner needs no extra bottom padding */\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-bottom: 0;\n}\n\n/* A sole group that comes first can share the panel header's divider. */\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child:not(:has(~ .dialkit-folder)) {\n  border-top: none;\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-panel-inner:not([data-collapsed=\"true\"]) {\n  padding: 0 12px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-panel-inner:not([data-collapsed=\"true\"]) .dialkit-panel-icon {\n  top: 14px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-panel-header {\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-panel-header > .dialkit-folder-header-top,\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header > .dialkit-folder-header-top {\n  height: 44px;\n  padding: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header {\n  height: 44px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\n  gap: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder {\n  margin: 0;\n  padding-bottom: 0;\n  border-top: 1px solid var(--dial-surface-subtle);\n  border-bottom: none;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header .dialkit-folder-title {\n  font-size: 15px;\n  font-weight: 600;\n  line-height: 20px;\n  color: var(--dial-text-root);\n  transform: translateZ(0);\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-title-root {\n  line-height: 20px;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child {\n  border-top: none;\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder + .dialkit-folder {\n  margin-top: 0;\n}\n\n.dialkit-panel[data-multiple=\"true\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-content > .dialkit-folder-inner {\n  padding-top: 4px;\n  padding-bottom: 12px;\n}\n\n/* Content spacing handled by folder-inner gap */\n\n\n/* Slider */\n.dialkit-slider-wrapper {\n  position: relative;\n  height: var(--dial-row-height);\n}\n\n.dialkit-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  user-select: none;\n  overflow: hidden;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  touch-action: none;\n}\n\n.dialkit-slider-hashmarks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.dialkit-slider-hashmark {\n  position: absolute;\n  top: 50%;\n  width: 1px;\n  height: 8px;\n  border-radius: 999px;\n  transform: translateX(-50%) translateY(-50%);\n  background: rgba(255, 255, 255, 0);\n  transition: background 200ms;\n}\n\n.dialkit-slider-active .dialkit-slider-hashmark {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-active .dialkit-slider-value {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-slider-fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--dial-surface-active);\n  transition: background 0.15s;\n  pointer-events: none;\n}\n\n.dialkit-slider-active .dialkit-slider-fill {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-slider-handle {\n  position: absolute;\n  top: 50%;\n  width: 3px;\n  height: 20px;\n  border-radius: 999px;\n  background: var(--dial-text-primary);\n  pointer-events: none;\n}\n\n.dialkit-slider-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(calc(-50% - 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  pointer-events: none;\n  transition: color 0.15s;\n  display: inline-flex;\n  align-items: center;\n}\n\n.dialkit-slider-value {\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(calc(-50% + 0.5px));\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  pointer-events: auto;\n  transition: color 0.15s, border-color 0.15s;\n  border-bottom: 1px solid transparent;\n  padding-bottom: 1px;\n}\n\n.dialkit-slider-value-editable {\n  border-bottom-color: var(--dial-text-label);\n}\n\n.dialkit-slider-input {\n  position: absolute;\n  right: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 4ch;\n  min-width: 3ch;\n  max-width: 6ch;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: 'Geist Mono', monospace;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--dial-text-label);\n  padding: 0 0 1px 0;\n  outline: none;\n  text-align: right;\n}\n\n.dialkit-slider-input:focus {\n  color: var(--dial-text-focus);\n}\n\n/* Segmented Control */\n.dialkit-segmented {\n  position: relative;\n  display: flex;\n  padding: 2px;\n  background: transparent;\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-segmented-pill {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  background: var(--dial-surface-active);\n  border-radius: 6px;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.dialkit-segmented-button {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 auto;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s;\n}\n\n.dialkit-segmented-button[data-active=\"true\"] {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-segmented-button[data-active=\"false\"] {\n  color: var(--dial-text-label);\n}\n\n/* Toggle */\n.dialkit-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s;\n}\n\n.dialkit-toggle:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toggle-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transition: color 0.15s;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-label {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-toggle-track {\n  width: 36px;\n  height: 20px;\n  border-radius: 10px;\n  background: var(--dial-surface-active);\n  transition: background 0.2s;\n  position: relative;\n}\n\n.dialkit-toggle[data-checked=\"true\"] .dialkit-toggle-track {\n  background: var(--dial-border-hover);\n}\n\n.dialkit-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 8px;\n  background: var(--dial-text-primary);\n}\n\n/* Button Group */\n.dialkit-button-group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-button {\n  flex: 1;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-button:active {\n  background: var(--dial-surface-active);\n}\n\n/* Labeled Control Row (label + control side by side) */\n.dialkit-labeled-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 2px 10px 2px 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-labeled-control-label {\n  display: flex;\n  align-items: center;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  line-height: 17px;\n}\n\n.dialkit-labeled-control .dialkit-segmented {\n  flex-shrink: 0;\n  margin-right: -6px;\n}\n\n.dialkit-action-button {\n  width: 160px;\n  flex-shrink: 0;\n  padding: 10px 16px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-action-button:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-action-button:active {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-actions-group {\n  align-items: flex-start;\n}\n\n.dialkit-actions-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  width: 160px;\n}\n\n/* Spring Visualization */\n.dialkit-spring-viz {\n  width: 100%;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  overflow: visible;\n}\n\n.dialkit-easing-viz {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 256 / 180;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  overflow: hidden;\n  isolation: isolate;\n}\n\n.dialkit-easing-viz svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n\n.dialkit-easing-reference {\n  stroke: var(--dial-text-tertiary);\n  stroke-width: 1;\n  stroke-dasharray: 3 4;\n  opacity: 0.4;\n}\n\n.dialkit-easing-tangent {\n  stroke: var(--dial-text-tertiary);\n  stroke-width: 1;\n}\n\n.dialkit-easing-curve {\n  fill: none;\n  stroke: var(--dial-text-primary);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n\n.dialkit-easing-endpoint {\n  fill: var(--dial-text-secondary);\n}\n\n.dialkit-easing-handle {\n  position: absolute;\n  display: grid;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  transform: translate(-50%, -50%);\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-easing-handle::after {\n  content: '';\n  width: 10px;\n  height: 10px;\n  box-sizing: border-box;\n  border: 1.5px solid var(--dial-text-secondary);\n  border-radius: 50%;\n  background: var(--dial-surface);\n}\n\n.dialkit-easing-handle:hover::after,\n.dialkit-easing-handle:focus-visible::after,\n.dialkit-easing-handle[data-dragging]::after {\n  border-color: var(--dial-text-primary);\n  background: var(--dial-text-primary);\n}\n\n.dialkit-easing-handle[data-dragging] {\n  cursor: grabbing;\n  z-index: 1;\n}\n\n.dialkit-easing-handle:disabled {\n  pointer-events: none;\n}\n\n.dialkit-easing-instructions {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n/* Panel Wrapper (contains panel + toolbar) */\n.dialkit-panel-wrapper {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Panel Toolbar */\n.dialkit-panel-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  margin-bottom: 6px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-panel-section-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  height: var(--dial-row-height);\n  min-width: 0;\n  overflow: hidden;\n}\n\n.dialkit-toolbar-add {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-add:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-timeline-toolbar-toggle[data-active] {\n  background: var(--dial-surface-active);\n  color: var(--dial-text-root);\n}\n\n.dialkit-toolbar-add svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n.dialkit-timeline-toolkit-only {\n  height: var(--dial-row-height);\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface-subtle);\n  color: var(--dial-text-secondary);\n  font-size: 12px;\n}\n\n.dialkit-toolbar-copy {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-toolbar-copy:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-toolbar-copy-icon-wrap {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.dialkit-toolbar-copy-icon {\n  position: absolute;\n  inset: 0;\n  width: 16px;\n  height: 16px;\n}\n\n/* Text Control */\n.dialkit-text-control {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  min-height: var(--dial-row-height);\n  /* Hidden overflow still lets caret navigation scroll this animated row. */\n  overflow: clip;\n  padding: calc((var(--dial-row-height) - 18px) / 2) 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n}\n\n.dialkit-text-label {\n  line-height: 18px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n}\n\n.dialkit-text-input {\n  display: block;\n  box-sizing: border-box;\n  margin: 0;\n  margin-right: calc(-1 * var(--dial-text-gutter, 0px));\n  flex: 1;\n  width: 0;\n  min-width: 0;\n  height: 18px;\n  line-height: 18px;\n  resize: none;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-gutter: stable;\n  scrollbar-color: var(--dial-text-tertiary) transparent;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  padding: 0;\n  outline: none;\n  text-align: right;\n  cursor: text;\n}\n\n.dialkit-text-control[data-autosized] {\n  transition: height 180ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n.dialkit-text-input::-webkit-scrollbar { width: 6px; }\n.dialkit-text-input::-webkit-scrollbar-track { background: transparent; }\n.dialkit-text-input::-webkit-scrollbar-thumb {\n  background: var(--dial-text-tertiary);\n  border-radius: 3px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dialkit-text-control[data-autosized] { transition: none; }\n}\n\n.dialkit-text-input:focus {\n  color: var(--dial-text-focus);\n}\n\n.dialkit-text-input:focus-visible {\n  background-image: linear-gradient(var(--dial-focus-ring), var(--dial-focus-ring));\n  background-repeat: no-repeat;\n  background-position: 4px bottom;\n  background-size: calc(100% - var(--dial-text-gutter, 0px) - 4px) 1px;\n}\n\n.dialkit-text-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n/* Select Control - Full-width row */\n.dialkit-select-row {\n}\n\n.dialkit-select-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-select-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-select-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-select-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.dialkit-select-value {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  transform: translateY(-0.5px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-select-chevron {\n  width: 20px;\n  height: 20px;\n  padding: 2px;\n  box-sizing: border-box;\n  flex-shrink: 0;\n  opacity: 0.6;\n}\n\n/* Select Dropdown (portaled to body) */\n.dialkit-select-dropdown {\n  margin: 0;\n  inset: auto;\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--dial-border-hover) transparent;\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: var(--dial-radius);\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-select-option {\n  min-height: 36px;\n  display: block;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-select-option:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-select-option[data-selected=\"true\"] {\n  color: var(--dial-text-primary);\n  background: var(--dial-surface-active);\n}\n\n/* Image selector: shared by React, Solid, Vue, and Svelte. */\n.dialkit-image-control {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 6px 0 12px;\n  border: 0;\n  border-radius: var(--dial-radius);\n  background: var(--dial-surface);\n  color: var(--dial-text-label);\n  font: 500 13px system-ui, -apple-system, sans-serif;\n  text-align: left;\n  cursor: pointer;\n  transition: background 0.15s, box-shadow 0.15s;\n}\n.dialkit-image-control:hover { background: var(--dial-surface-hover); }\n.dialkit-image-control[data-open=\"true\"] { background: var(--dial-surface-active); box-shadow: inset 0 0 0 1px var(--dial-border-hover); color: var(--dial-text-primary); }\n.dialkit-image-label { flex-shrink: 0; }\n.dialkit-image-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--dial-text-secondary); font-size: 12px; }\n.dialkit-image-frame { position: relative; display: block; overflow: hidden; border-radius: var(--dial-radius); background: repeating-conic-gradient(var(--dial-surface) 0% 25%, transparent 0% 50%) 0 / 12px 12px, var(--dial-surface); }\n.dialkit-image-img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.dialkit-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dial-text-tertiary); }\n.dialkit-image-fallback svg { width: 24px; height: 24px; }\n.dialkit-image-thumbnail { flex: 0 0 38px; height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--dial-border); }\n.dialkit-image-thumbnail svg { width: 16px; height: 16px; }\n.dialkit-image-popover {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  position: fixed;\n  margin: 0;\n  inset: auto;\n  z-index: 10002;\n  box-sizing: border-box;\n  padding: 12px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--dial-border-hover) transparent;\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  background: var(--dial-glass-bg);\n  box-shadow: var(--dial-shadow);\n  color: var(--dial-text-label);\n  font: 500 13px system-ui, -apple-system, sans-serif;\n  animation: dialkit-color-enter 0.16s ease-out;\n}\n.dialkit-image-popover *, .dialkit-image-popover *::before, .dialkit-image-popover *::after { box-sizing: border-box; }\n.dialkit-image-popover > * { flex-shrink: 0; }\n.dialkit-image-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }\n.dialkit-image-title { color: var(--dial-text-primary); }\n.dialkit-image-clear { margin: -4px -4px -4px 0; padding: 4px; border: 0; border-radius: 4px; background: none; color: var(--dial-text-tertiary); font: inherit; font-size: 11px; cursor: pointer; }\n.dialkit-image-clear:hover { color: var(--dial-text-primary); }\n.dialkit-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dial-row-gap); }\n.dialkit-image-option { position: relative; display: block; width: 100%; padding: 3px; border: 1px solid transparent; border-radius: calc(var(--dial-radius) + 3px); background: transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s; }\n.dialkit-image-option-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: calc(var(--dial-radius) - 1px); }\n.dialkit-image-option:hover { background: var(--dial-surface-hover); border-color: var(--dial-border-hover); }\n.dialkit-image-option[aria-pressed=\"true\"] { border-color: var(--dial-text-label); background: var(--dial-surface-active); }\n.dialkit-image-upload { display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; width: 100%; }\n.dialkit-image-upload svg { width: 15px; height: 15px; }\n.dialkit-image-popover[data-dragging=\"true\"] .dialkit-image-upload { background: var(--dial-surface-hover); color: var(--dial-text-primary); }\n.dialkit-image-upload[aria-disabled=\"true\"] { opacity: 0.6; cursor: progress; }\n.dialkit-image-empty { padding: 28px 12px; border-radius: var(--dial-radius); background: var(--dial-surface); color: var(--dial-text-tertiary); font-weight: 400; text-align: center; }\n.dialkit-image-status { font-size: 11px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }\n.dialkit-image-popover [hidden], .dialkit-image-frame [hidden], .dialkit-image-file { display: none; }\n@media (prefers-reduced-motion: reduce) { .dialkit-image-popover { animation: none; } }\n\n/* DialPad: a continuous two-axis field, shared across frameworks. */\n.dialkit-pad { display: grid; gap: var(--dial-row-gap); min-width: 0; }\n.dialkit-pad-caption { display: flex; align-items: center; min-width: 0; height: var(--dial-row-height); padding: 0 12px; border-radius: var(--dial-radius); background: var(--dial-surface); }\n.dialkit-pad-label { flex: 1; min-width: 0; color: var(--dial-text-label); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dialkit-pad-surface { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--dial-radius); background: var(--dial-surface); cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }\n.dialkit-pad-plane { position: absolute; inset: 12px; pointer-events: none; }\n.dialkit-pad-grid { position: absolute; inset: 0; pointer-events: none; }\n.dialkit-pad-grid-line { position: absolute; background: var(--dial-border); opacity: 0.65; }\n.dialkit-pad-grid-vertical { top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }\n.dialkit-pad-grid-horizontal { left: 0; right: 0; height: 1px; transform: translateY(-50%); }\n.dialkit-pad-center { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--dial-text-tertiary); transform: translate(-50%, -50%); }\n.dialkit-pad-point { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--dial-text-primary); box-shadow: 0 0 0 0 transparent, 0 2px 4px #0003; transform: translate(-50%, -50%); transition: box-shadow 0.15s; pointer-events: auto; cursor: grab; }\n.dialkit-pad-surface[data-dragging=\"true\"], .dialkit-pad-surface[data-dragging=\"true\"] .dialkit-pad-point { cursor: grabbing; }\n.dialkit-pad-surface[data-dragging=\"true\"] .dialkit-pad-point { box-shadow: 0 0 0 6px var(--dial-border-hover), 0 2px 6px #0003; }\n.dialkit-pad-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dial-row-gap); }\n.dialkit-pad-field { display: flex; align-items: center; gap: 4px; min-width: 0; height: var(--dial-row-height); padding: 0 12px 0 10px; border-radius: var(--dial-radius); background: var(--dial-surface); }\n.dialkit-pad-axis { min-width: 0; max-width: 35%; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--dial-text-label); }\n.dialkit-pad-value { min-width: 0; width: 100%; border: 0; padding: 0 0 1px; background: transparent; color: var(--dial-text-label); text-align: right; font: 500 13px 'Geist Mono', monospace; }\n.dialkit-pad-field:focus-within { background: var(--dial-surface-hover); }\n.dialkit-pad-value:focus-visible { box-shadow: inset 0 -1px var(--dial-focus-ring); }\n.dialkit-pad-value:focus { color: var(--dial-text-focus); }\n.dialkit-pad-instructions { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n@media (prefers-reduced-motion: reduce) { .dialkit-pad-point { transition: none; } }\n\n/* Color Control */\n.dialkit-color-control {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  background: var(--dial-surface);\n  border-radius: var(--dial-radius);\n  transition: background 0.15s, box-shadow 0.15s;\n}\n\n.dialkit-color-control[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n  box-shadow: inset 0 0 0 1px var(--dial-border-hover);\n}\n.dialkit-color-control[data-open=\"true\"] .dialkit-color-label,\n.dialkit-color-control[data-open=\"true\"] .dialkit-color-value { color: var(--dial-text-primary); }\n\n.dialkit-color-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  flex-shrink: 0;\n  transform: translateY(-0.5px);\n}\n\n.dialkit-color-inputs {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Color picker: shared by React, Solid, Vue, and Svelte. */\n.dialkit-color-inputs { min-width: 0; flex: 1; justify-content: flex-end; }\n.dialkit-color-value {\n  min-width: 0;\n  width: 100%;\n  padding: 4px 0;\n  border: 0;\n  outline: none;\n  background: transparent;\n  color: var(--dial-text-label);\n  font: 500 13px 'Geist Mono', monospace;\n  text-align: right;\n  text-overflow: ellipsis;\n}\n.dialkit-color-value:focus { color: var(--dial-text-focus); }\n.dialkit-color-swatch {\n  flex: 0 0 20px;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border-radius: 5px;\n  border: 1px solid var(--dial-border-hover);\n  background: linear-gradient(var(--dial-color), var(--dial-color)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\n  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);\n  cursor: pointer;\n  transition: transform 0.15s;\n}\n.dialkit-color-swatch:hover { transform: scale(1.08); }\n.dialkit-color-popover {\n  display: grid;\n  gap: var(--dial-row-gap);\n  position: fixed;\n  margin: 0;\n  inset: auto;\n  z-index: 10002;\n  box-sizing: border-box;\n  padding: 10px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  background: var(--dial-glass-bg);\n  box-shadow: var(--dial-shadow);\n  color: var(--dial-text-label);\n  animation: dialkit-color-enter 0.16s ease-out;\n}\n.dialkit-color-popover *, .dialkit-color-popover *::before, .dialkit-color-popover *::after { box-sizing: border-box; }\n.dialkit-color-plane { position: relative; height: 160px; border-radius: var(--dial-radius); touch-action: none; cursor: crosshair; user-select: none; }\n.dialkit-color-canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }\n.dialkit-color-plane::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); pointer-events: none; }\n.dialkit-color-marker { position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); pointer-events: none; }\n.dialkit-color-tracks { display: grid; gap: var(--dial-row-gap); }\n.dialkit-color-track-row { display: flex; align-items: center; gap: 12px; height: var(--dial-row-height); padding: 0 12px; border-radius: var(--dial-radius); background: var(--dial-surface); font-size: 13px; font-weight: 500; }\n.dialkit-color-track-row > span { flex: 0 0 52px; color: var(--dial-text-label); }\n.dialkit-color-track {\n  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; touch-action: none;\n}\n.dialkit-color-hue {\n  --dial-color-thumb-bg: var(--dial-color-thumb);\n}\n.dialkit-color-opacity {\n  --dial-color-track-bg: linear-gradient(to right, transparent, var(--dial-color-opaque)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\n  --dial-color-thumb-bg: linear-gradient(var(--dial-color-thumb), var(--dial-color-thumb)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\n}\n.dialkit-color-track::-webkit-slider-runnable-track { height: 16px; border-radius: 4px; background: var(--dial-color-track-bg); }\n.dialkit-color-track::-moz-range-track { height: 16px; border: 0; border-radius: 4px; background: var(--dial-color-track-bg); }\n.dialkit-color-track::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 16px; height: 24px; margin-top: -4px; border-radius: 5px; background: var(--dial-color-thumb-bg); background-clip: padding-box; border: 2px solid white; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }\n.dialkit-color-track::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 24px; border-radius: 5px; background: var(--dial-color-thumb-bg); background-clip: padding-box; border: 2px solid white; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }\n/* The same row, buttons, and pill as Enabled, with no label and equal segments. */\n.dialkit-color-format-row { padding: 2px; }\n.dialkit-color-format-row .dialkit-color-formats { flex: 1; min-width: 0; margin-right: 0; }\n.dialkit-color-formats .dialkit-segmented-pill { left: 2px; width: calc((100% - 4px) / 3); transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); }\n.dialkit-color-format { flex: 1 1 0; min-width: 0; white-space: nowrap; }\n.dialkit-color-format:hover { color: var(--dial-text-primary); }\n.dialkit-color-css-input { display: block; width: 100%; height: var(--dial-row-height); padding: 0 12px; border: 0; border-radius: var(--dial-radius); background: var(--dial-surface); outline: none; color: var(--dial-text-label); font: 500 13px 'Geist Mono', monospace; }\n.dialkit-color-css-input:focus { color: var(--dial-text-focus); }\n.dialkit-color-popover input[aria-invalid=\"true\"], .dialkit-color-value[aria-invalid=\"true\"] { color: #ef7777; }\n@keyframes dialkit-color-enter { from { opacity: 0; transform: translateY(3px) scale(0.98); } to { opacity: 1; transform: none; } }\n@media (prefers-reduced-motion: reduce) {\n  .dialkit-color-popover { animation: none; }\n  .dialkit-color-formats .dialkit-segmented-pill { transition: none; }\n}\n\n/* Preset Manager */\n.dialkit-preset-manager {\n  position: relative;\n  flex: 1;\n}\n\n.dialkit-preset-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: var(--dial-row-height);\n  padding: 0 12px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"] {\n  cursor: default;\n}\n\n.dialkit-preset-trigger[data-disabled=\"true\"]:hover {\n  background: var(--dial-surface);\n}\n\n.dialkit-preset-trigger[data-open=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n.dialkit-preset-dropdown {\n  margin: 0;\n  inset: auto;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  width: max-content;\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 4px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n}\n\n.dialkit-preset-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 4px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--dial-border);\n}\n\n.dialkit-preset-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 10px 8px 10px;\n  gap: 8px;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-item:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-item[data-active=\"true\"] {\n  background: var(--dial-surface-active);\n}\n\n.dialkit-preset-name {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background: transparent;\n  font-family: inherit;\n  text-align: left;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.dialkit-preset-item[data-active=\"true\"] .dialkit-preset-name {\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-delete {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n}\n\n.dialkit-preset-item:hover .dialkit-preset-delete {\n  opacity: 0.6;\n}\n\n.dialkit-preset-item:focus-within .dialkit-preset-delete { opacity: 0.6; }\n.dialkit-preset-item:focus-within { background: var(--dial-surface-hover); }\n\n.dialkit-preset-delete:hover {\n  opacity: 1 !important;\n}\n\n.dialkit-preset-delete svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-focus);\n  pointer-events: none;\n}\n\n.dialkit-preset-save-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  width: 100%;\n  padding: 8px 10px;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  background: transparent;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.dialkit-preset-save-btn:hover {\n  background: var(--dial-surface-hover);\n  color: var(--dial-text-primary);\n}\n\n.dialkit-preset-save-btn svg {\n  width: 12px;\n  height: 12px;\n}\n\n.dialkit-preset-save-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px;\n}\n\n.dialkit-preset-input {\n  flex: 1;\n  min-width: 0;\n  padding: 6px 8px;\n  font-family: inherit;\n  font-size: 13px;\n  color: var(--dial-text-primary);\n  background: var(--dial-surface);\n  border: 1px solid var(--dial-border);\n  border-radius: 6px;\n  outline: none;\n}\n\n.dialkit-preset-input:focus {\n  border-color: var(--dial-text-label);\n}\n\n.dialkit-preset-input::placeholder {\n  color: var(--dial-text-tertiary);\n}\n\n.dialkit-preset-confirm {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-preset-confirm:hover:not(:disabled) {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-preset-confirm:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.dialkit-preset-confirm svg {\n  width: 14px;\n  height: 14px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcut Pill */\n.dialkit-shortcut-pill {\n  display: inline-block;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: system-ui, -apple-system, sans-serif;\n  color: var(--dial-text-tertiary);\n  background: var(--dial-surface-subtle);\n  padding: 1px 5px;\n  border-radius: 4px;\n  margin-left: 6px;\n  letter-spacing: 0.02em;\n  line-height: 16px;\n  white-space: nowrap;\n  vertical-align: middle;\n  transition: color 0.15s, background 0.15s;\n}\n\n.dialkit-shortcut-pill-active {\n  color: var(--dial-text-primary);\n  background: var(--dial-border-hover);\n}\n\n/* Shortcuts Menu Trigger */\n.dialkit-shortcuts-trigger {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dial-row-height);\n  height: var(--dial-row-height);\n  padding: 0;\n  flex-shrink: 0;\n  background: var(--dial-surface);\n  border: none;\n  border-radius: var(--dial-radius);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.dialkit-shortcuts-trigger:hover {\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-shortcuts-trigger svg {\n  width: 16px;\n  height: 16px;\n  color: var(--dial-text-label);\n}\n\n/* Shortcuts Dropdown */\n.dialkit-shortcuts-dropdown {\n  background: var(--dial-dropdown-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 12px;\n  padding: 8px;\n  z-index: 10000;\n  box-shadow: var(--dial-shadow-dropdown);\n  min-width: 200px;\n}\n\n.dialkit-shortcuts-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--dial-text-tertiary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 4px 8px 8px;\n}\n\n.dialkit-shortcuts-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.dialkit-shortcuts-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 6px 8px;\n  border-radius: 6px;\n}\n\n.dialkit-shortcuts-row-key {\n  font-size: 11px;\n  font-weight: 600;\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\n  color: var(--dial-text-secondary);\n  background: var(--dial-surface-subtle);\n  padding: 2px 6px;\n  border-radius: 4px;\n  min-width: 28px;\n  text-align: center;\n}\n\n.dialkit-shortcuts-row-label {\n  flex: 1;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n}\n\n.dialkit-shortcuts-row-mode {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--dial-text-tertiary);\n  font-style: italic;\n}\n\n.dialkit-shortcuts-hint {\n  font-size: 11px;\n  color: var(--dial-text-tertiary);\n  padding: 6px 8px 2px;\n  border-top: 1px solid var(--dial-border);\n  margin-top: 4px;\n}\n\n/* ── Light Theme ── */\n.dialkit-root[data-theme=\"light\"] {\n  --dial-surface: rgba(0, 0, 0, 0.04);\n  --dial-surface-hover: rgba(0, 0, 0, 0.08);\n  --dial-surface-active: rgba(0, 0, 0, 0.1);\n  --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n  --dial-text-root: #000000;\n  --dial-text-section: rgba(0, 0, 0, 0.65);\n  --dial-text-label: rgba(0, 0, 0, 0.6);\n  --dial-text-focus: #000000;\n\n  --dial-text-primary: rgba(0, 0, 0, 0.9);\n  --dial-text-secondary: rgba(0, 0, 0, 0.55);\n  --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n  --dial-border: rgba(0, 0, 0, 0.1);\n  --dial-border-hover: rgba(0, 0, 0, 0.15);\n  --dial-focus-ring: rgba(0, 0, 0, 0.55);\n\n  --dial-timeline-clip-overlay: rgba(0, 0, 0, 0.28);\n\n  --dial-glass-bg: #fafafa;\n  --dial-dropdown-bg: #ffffff;\n  --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n  --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n  --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n}\n\n/* Light mode: SVG visualization overrides */\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line {\n  stroke: rgba(0, 0, 0, 0.08);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz line[stroke-dasharray] {\n  stroke: rgba(0, 0, 0, 0.15);\n}\n\n.dialkit-root[data-theme=\"light\"] .dialkit-spring-viz path {\n  stroke: rgba(0, 0, 0, 0.5);\n}\n\n/* Light mode: toggle thumb needs shadow for definition */\n.dialkit-root[data-theme=\"light\"] .dialkit-toggle-thumb {\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* ── System preference: light ── */\n@media (prefers-color-scheme: light) {\n  .dialkit-root[data-theme=\"system\"] {\n    --dial-surface: rgba(0, 0, 0, 0.04);\n    --dial-surface-hover: rgba(0, 0, 0, 0.08);\n    --dial-surface-active: rgba(0, 0, 0, 0.1);\n    --dial-surface-subtle: rgba(0, 0, 0, 0.06);\n\n    --dial-text-root: #000000;\n    --dial-text-section: rgba(0, 0, 0, 0.65);\n    --dial-text-label: rgba(0, 0, 0, 0.6);\n    --dial-text-focus: #000000;\n\n    --dial-text-primary: rgba(0, 0, 0, 0.9);\n    --dial-text-secondary: rgba(0, 0, 0, 0.55);\n    --dial-text-tertiary: rgba(0, 0, 0, 0.35);\n\n    --dial-border: rgba(0, 0, 0, 0.1);\n    --dial-border-hover: rgba(0, 0, 0, 0.15);\n    --dial-focus-ring: rgba(0, 0, 0, 0.55);\n\n    --dial-timeline-clip-overlay: rgba(0, 0, 0, 0.28);\n\n    --dial-glass-bg: #fafafa;\n    --dial-dropdown-bg: #ffffff;\n    --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n    --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\n    --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line {\n    stroke: rgba(0, 0, 0, 0.08);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz line[stroke-dasharray] {\n    stroke: rgba(0, 0, 0, 0.15);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-spring-viz path {\n    stroke: rgba(0, 0, 0, 0.5);\n  }\n\n  .dialkit-root[data-theme=\"system\"] .dialkit-toggle-thumb {\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\n  }\n\n}\n\n/* ── Timeline dock ── */\n.dialkit-timeline {\n  position: fixed;\n  left: 12px;\n  right: 12px;\n  bottom: 12px;\n  z-index: 9998;\n}\n\n.dialkit-timeline[hidden] {\n  display: none;\n}\n\n.dialkit-timeline-dock {\n  position: relative;\n  box-sizing: border-box;\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  padding: 0 12px 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  scrollbar-width: thin;\n  scrollbar-color: var(--dial-text-tertiary) transparent;\n}\n\n.dialkit-timeline-resize-handle {\n  position: absolute;\n  top: -4px;\n  left: 0;\n  right: 0;\n  z-index: 9;\n  height: 10px;\n  cursor: ns-resize;\n  touch-action: none;\n}\n\n.dialkit-timeline-dock::-webkit-scrollbar {\n  width: 8px;\n}\n\n.dialkit-timeline-dock::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.dialkit-timeline-dock::-webkit-scrollbar-thumb {\n  border-radius: 999px;\n  background: var(--dial-text-tertiary);\n}\n\n.dialkit-timeline-section {\n  --dial-timeline-label-w: 96px;\n  --dial-timeline-actions-w: 284px;\n  --dial-timeline-header-h: calc(var(--dial-row-height) + 4px);\n}\n\n.dialkit-timeline-section + .dialkit-timeline-section {\n  border-top: 1px solid var(--dial-border);\n  padding-top: 10px;\n}\n\n.dialkit-timeline-header {\n  display: grid;\n  grid-template-columns: auto minmax(100px, 1fr) auto;\n  align-items: center;\n  gap: 12px;\n  position: sticky;\n  top: 0;\n  z-index: 7;\n  box-sizing: border-box;\n  height: var(--dial-timeline-header-h);\n  padding: 4px 0 0;\n  margin: 0;\n  background: var(--dial-glass-bg);\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n}\n\n.dialkit-timeline-header[data-open] {\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 12px;\n}\n\n.dialkit-timeline-header:not([data-open]) {\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr) auto;\n  gap: 0;\n}\n\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-identity {\n  width: var(--dial-timeline-label-w);\n  box-sizing: border-box;\n  padding-right: 10px;\n  overflow: hidden;\n}\n\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-overview {\n  margin-right: 12px;\n}\n\n.dialkit-timeline-identity {\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dialkit-timeline-title {\n  display: block;\n  min-width: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n}\n\n.dialkit-timeline-header[data-open] .dialkit-timeline-identity {\n  width: 100%;\n  overflow: hidden;\n}\n\n.dialkit-timeline-header[data-open] .dialkit-timeline-title {\n  display: inline-block;\n  flex: 0 1 auto;\n  width: fit-content;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.dialkit-timeline-time {\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 13px;\n  font-weight: 500;\n  font-variant-numeric: tabular-nums;\n  color: var(--dial-text-label);\n  white-space: nowrap;\n}\n\n.dialkit-timeline-overview {\n  position: relative;\n  min-width: 60px;\n  height: 12px;\n  border-radius: 999px;\n  background: var(--dial-surface-subtle);\n  overflow: hidden;\n  cursor: col-resize;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-timeline-overview-viewport {\n  position: absolute;\n  inset-block: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.dialkit-timeline-overview-viewport[data-zoomed] {\n  background: color-mix(in srgb, var(--dial-text-tertiary) 18%, transparent);\n  box-shadow: inset 0 0 0 1px var(--dial-border);\n}\n\n.dialkit-timeline-overview-progress {\n  position: absolute;\n  inset: 0 auto 0 0;\n  border-radius: 999px 0 0 999px;\n  background: var(--dial-text-tertiary);\n  opacity: 0.35;\n  pointer-events: none;\n}\n\n.dialkit-timeline-overview-playhead {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  border-radius: 2px;\n  background: var(--dial-text-root);\n  transform: translateX(-1px);\n  pointer-events: none;\n}\n\n.dialkit-timeline-actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.dialkit-timeline-header[data-open] .dialkit-timeline-actions {\n  width: auto;\n  box-sizing: border-box;\n  justify-content: flex-end;\n  padding-left: 0;\n}\n\n.dialkit-timeline-actions .dialkit-preset-manager {\n  flex: 0 0 120px;\n  width: 120px;\n}\n\n.dialkit-timeline-chevron {\n  background: none;\n  border: none;\n  width: 20px;\n  height: var(--dial-row-height);\n  padding: 2px;\n  cursor: pointer;\n  color: var(--dial-text-label);\n  opacity: 0.6;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s;\n}\n\n.dialkit-timeline-chevron:hover {\n  opacity: 1;\n}\n\n.dialkit-timeline-chevron svg {\n  width: 16px;\n  height: 16px;\n  transition: transform 0.18s ease;\n}\n\n.dialkit-timeline-chevron[data-open=\"true\"] svg {\n  transform: rotate(180deg);\n}\n\n.dialkit-timeline-body {\n  margin-top: 0;\n  overflow: visible;\n}\n\n.dialkit-timeline-scroll-row {\n  position: sticky;\n  bottom: -10px;\n  z-index: 6;\n  display: grid;\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr);\n  margin-top: 6px;\n  margin-bottom: -10px;\n  padding: 4px 0 10px;\n  background: var(--dial-glass-bg);\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n}\n\n.dialkit-timeline-horizontal-scroll {\n  min-width: 0;\n  height: 10px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  scrollbar-color: var(--dial-text-tertiary) transparent;\n  overscroll-behavior-x: contain;\n}\n\n.dialkit-timeline-horizontal-scroll > div {\n  height: 1px;\n}\n\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar {\n  height: 8px;\n}\n\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar-thumb {\n  border-radius: 999px;\n  background: var(--dial-text-tertiary);\n}\n\n.dialkit-timeline-grid {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-timeline-row {\n  display: grid;\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr);\n  align-items: stretch;\n}\n\n.dialkit-timeline-label {\n  flex: 0 0 var(--dial-timeline-label-w);\n  box-sizing: border-box; /* indent padding must not widen the column — every lane starts at the same x */\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--dial-text-label);\n  padding-right: 10px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-timeline-ruler {\n  position: relative;\n  min-width: 0;\n  height: 28px;\n  cursor: col-resize;\n  touch-action: none;\n  overflow: visible;\n  user-select: none;\n  -webkit-user-select: none;\n  z-index: 5;\n}\n\n.dialkit-timeline-ruler-row {\n  position: sticky;\n  top: var(--dial-timeline-header-h);\n  z-index: 6;\n  height: 28px;\n  background: var(--dial-glass-bg);\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n}\n\n.dialkit-timeline-tick {\n  position: absolute;\n  top: 50%;\n  width: 1px;\n  height: 100%;\n  background: var(--dial-text-tertiary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n.dialkit-timeline-tick-medium {\n  height: 16px;\n  background: var(--dial-border-hover);\n}\n\n.dialkit-timeline-tick-fine {\n  height: 8px;\n  background: var(--dial-border);\n}\n\n.dialkit-timeline-tick-label {\n  position: absolute;\n  top: 50%;\n  left: 4px;\n  display: flex;\n  align-items: center;\n  height: 18px;\n  transform: translateY(-50%);\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 9.5px;\n  line-height: 18px;\n  font-variant-numeric: tabular-nums;\n  color: var(--dial-text-tertiary);\n  white-space: nowrap;\n}\n\n.dialkit-timeline-row {\n  height: 28px;\n}\n\n/* ── Layer groups ── */\n\n.dialkit-timeline-group-row {\n  height: 22px;\n}\n\n.dialkit-timeline-group-row .dialkit-timeline-label {\n  gap: 4px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n}\n\n.dialkit-timeline-group-row .dialkit-timeline-lane {\n  background: none;\n}\n\n.dialkit-timeline-group-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  margin-left: -2px;\n  cursor: pointer;\n  color: var(--dial-text-tertiary);\n}\n\n.dialkit-timeline-group-toggle svg {\n  width: 10px;\n  height: 10px;\n  transform: rotate(-90deg);\n  transition: transform 0.15s ease;\n}\n\n.dialkit-timeline-group-toggle[data-open=\"true\"] svg {\n  transform: rotate(0deg);\n}\n\n.dialkit-timeline-row[data-grouped] .dialkit-timeline-label {\n  padding-left: 14px;\n}\n\n.dialkit-timeline-lane {\n  position: relative;\n  flex: 1;\n  background: var(--dial-surface-subtle);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.dialkit-timeline-clip {\n  position: absolute;\n  top: 3px;\n  bottom: 3px;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0 9px;\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n  box-sizing: border-box;\n  overflow: hidden;\n  z-index: 1;\n  box-shadow: inset 0 0 0 999px var(--dial-timeline-clip-overlay);\n}\n\n.dialkit-timeline-clip-ghost {\n  position: absolute;\n  top: 4px;\n  bottom: 4px;\n  display: flex;\n  border-radius: 5px;\n  box-sizing: border-box;\n  overflow: hidden;\n  opacity: 0.18;\n  pointer-events: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-timeline-clip-ghost-segment {\n  height: 100%;\n  flex-shrink: 0;\n  box-sizing: border-box;\n}\n\n.dialkit-timeline-clip-ghost-segment + .dialkit-timeline-clip-ghost-segment {\n  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.5);\n}\n\n.dialkit-timeline-loop-infinity {\n  position: absolute;\n  top: 50%;\n  right: 7px;\n  z-index: 2;\n  color: var(--dial-text-tertiary);\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: 1;\n  transform: translateY(-50%);\n  pointer-events: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialkit-timeline-clip[data-dragging] {\n  cursor: grabbing;\n}\n\n.dialkit-timeline-clip[data-selected] {\n  box-shadow:\n    0 0 0 2px var(--dial-text-root),\n    inset 0 0 0 999px var(--dial-timeline-clip-overlay);\n}\n\n.dialkit-timeline-clip-duration {\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 9.5px;\n  font-variant-numeric: tabular-nums;\n  color: rgba(0, 0, 0, 0.55);\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n/* ── Sequence segments ──\n   A steps clip is one bar sliced into legs; boundaries between legs are\n   drag handles that retime the leg to their left. */\n\n.dialkit-timeline-clip[data-steps] {\n  padding: 0;\n  justify-content: flex-start;\n}\n\n.dialkit-timeline-clip-segment {\n  position: relative;\n  height: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0 8px;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.dialkit-timeline-clip-segment + .dialkit-timeline-clip-segment {\n  box-shadow: inset 1.5px 0 0 rgba(0, 0, 0, 0.25);\n}\n\n.dialkit-timeline-clip-segment:hover {\n  background: rgba(0, 0, 0, 0.06);\n}\n\n.dialkit-timeline-clip-segment[data-selected] {\n  background: rgba(0, 0, 0, 0.12);\n}\n\n/* ── Property tracks ──\n   A props clip's row is a read-only composite — click to expand. Each\n   property expands into a full track row: a complete clip bar whose\n   position is the track's delay. */\n\n.dialkit-timeline-clip[data-composite] {\n  cursor: pointer;\n}\n\n.dialkit-timeline-track-row .dialkit-timeline-label {\n  font-size: 13px;\n  color: var(--dial-text-tertiary);\n  padding-left: 26px;\n}\n\n.dialkit-timeline-track-row[data-grouped] .dialkit-timeline-label {\n  padding-left: 32px;\n}\n\n.dialkit-timeline-clip-handle {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 8px;\n  cursor: ew-resize;\n}\n\n.dialkit-timeline-clip-handle[data-edge=\"start\"] {\n  left: 0;\n}\n\n.dialkit-timeline-clip-handle[data-edge=\"end\"] {\n  right: 0;\n}\n\n.dialkit-timeline-playhead-control {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 12px;\n  margin-left: -6px;\n  cursor: ew-resize;\n  touch-action: none;\n}\n\n.dialkit-timeline-playhead-anchor {\n  position: sticky;\n  top: calc(var(--dial-timeline-header-h) + 14px);\n  z-index: 8;\n  width: 0;\n  height: 0;\n  margin-left: 6px;\n}\n\n.dialkit-timeline-playhead-anchor::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: -1px;\n  width: 2px;\n  height: 15px;\n  background: var(--dial-text-root);\n  pointer-events: none;\n}\n\n.dialkit-timeline-playhead-flag {\n  position: absolute;\n  top: 0;\n  left: calc(var(--dial-timeline-playhead-flag-offset, 0px) - 26px);\n  z-index: 1;\n  width: 52px;\n  height: 18px;\n  padding: 0 7px;\n  box-sizing: border-box;\n  border: 1px solid rgba(255, 255, 255, 0.75);\n  border-radius: 6px;\n  background: #f3f3f3;\n  color: #414141;\n  font-family: 'Geist Mono', ui-monospace, monospace;\n  font-size: 9.5px;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum' 1;\n  line-height: 16px;\n  text-align: center;\n  white-space: nowrap;\n  transform: translateY(-50%);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n  transition: top 0.12s ease;\n}\n\n.dialkit-timeline-playhead-stem {\n  position: absolute;\n  top: 27px;\n  bottom: 0;\n  left: 5px;\n  z-index: 5;\n  width: 2px;\n  background: var(--dial-text-root);\n  pointer-events: none;\n}\n\n/* ── Timeline clip popover ── */\n.dialkit-timeline-popover {\n  position: fixed;\n  z-index: 10000;\n  background: var(--dial-glass-bg);\n  border: 1px solid var(--dial-border);\n  border-radius: 14px;\n  backdrop-filter: blur(var(--dial-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\n  box-shadow: var(--dial-shadow);\n  padding: 10px 12px;\n  box-sizing: border-box;\n  max-height: 60vh;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.dialkit-timeline-popover::-webkit-scrollbar {\n  display: none;\n}\n\n.dialkit-timeline-popover-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 2px 2px 8px;\n  margin-bottom: 6px;\n  border-bottom: 1px solid var(--dial-border);\n}\n\n.dialkit-timeline-popover-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dial-text-root);\n  letter-spacing: -0.01em;\n}\n\n.dialkit-timeline-popover-close {\n  width: 24px;\n  height: 24px;\n  margin-left: auto;\n  padding: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: 6px;\n  background: none;\n  color: var(--dial-text-tertiary);\n  cursor: pointer;\n}\n\n.dialkit-timeline-popover-close:hover {\n  color: var(--dial-text-root);\n  background: var(--dial-surface-hover);\n}\n\n.dialkit-timeline-popover-close svg {\n  width: 14px;\n  height: 14px;\n}\n\n.dialkit-timeline-popover-body {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.dialkit-timeline-popover-body > .dialkit-folder:first-child {\n  margin-top: 0;\n  border-top: none;\n}\n\n@media (max-width: 720px) {\n  .dialkit-timeline-dock {\n    padding: 0 10px 10px;\n  }\n\n  .dialkit-timeline-header {\n    grid-template-columns: auto minmax(40px, 1fr) auto;\n    gap: 8px;\n  }\n\n  .dialkit-timeline-section {\n    --dial-timeline-label-w: 76px;\n    --dial-timeline-actions-w: 270px;\n  }\n\n  .dialkit-timeline-identity {\n    overflow: hidden;\n    gap: 7px;\n  }\n\n  .dialkit-timeline-title {\n    font-size: 13px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .dialkit-timeline-time {\n    font-size: 11px;\n  }\n\n  .dialkit-timeline-overview {\n    height: 12px;\n  }\n\n  .dialkit-timeline-actions {\n    min-width: 0;\n  }\n\n  .dialkit-timeline-actions .dialkit-preset-manager {\n    flex-basis: 100px;\n    width: 100px;\n  }\n\n  .dialkit-timeline-chevron {\n    width: 26px;\n    height: 28px;\n    justify-content: center;\n    padding: 0;\n  }\n\n  .dialkit-timeline-grid {\n    min-width: 0;\n  }\n}\n\n/* Keyboard focus stays inside each control so scrolling never clips its edge. */\n.dialkit-root :where(button, input, textarea, [tabindex]):focus {\n  outline: none;\n}\n.dialkit-root :where(button, [role=\"slider\"], [role=\"button\"], .dialkit-color-plane, .dialkit-pad-surface):focus-visible {\n  outline: 2px solid var(--dial-focus-ring);\n  outline-offset: -2px;\n}\n.dialkit-folder-header-top[role=\"button\"] { border-radius: 5px; }\n.dialkit-panel-inner[data-collapsed=\"true\"] .dialkit-folder-header-top { border-radius: 50%; }\n.dialkit-slider:focus-visible .dialkit-slider-value,\n.dialkit-slider:focus-within .dialkit-slider-value { color: var(--dial-text-focus); }\n.dialkit-slider:focus-visible .dialkit-slider-fill { background: var(--dial-border-hover); }\n.dialkit-select-option:focus-visible { background: var(--dial-surface-hover); color: var(--dial-text-focus); }\n.dialkit-root :where(.dialkit-slider-input, .dialkit-color-value, .dialkit-preset-input):focus-visible {\n  box-shadow: inset 0 -1px var(--dial-focus-ring);\n}\n.dialkit-color-css-input:focus-visible { outline: none; }\n.dialkit-shortcuts-dropdown { margin: 0; inset: auto; overflow-y: auto; }\n@media (forced-colors: active) {\n  .dialkit-root { --dial-focus-ring: Highlight; }\n}\n";
+//#endregion
+export { styles_default as default };
+
+//# sourceMappingURL=styles.js.map

package/dist/node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../../../../../../../../node_modules/.pnpm/dialkit@2.0.0_motion@13.2.0_react-dom@19.2.8_react@19.2.8__react@19.2.8__react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/dialkit/dist/styles.css?raw"],"sourcesContent":["export default \"@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');\\n\\n/* Dialkit Theme - Dark glassmorphic design */\\n.dialkit-root {\\n  position: relative;\\n\\n  /* Surfaces */\\n  --dial-surface: rgba(255, 255, 255, 0.05);\\n  --dial-surface-hover: rgba(255, 255, 255, 0.1);\\n  --dial-surface-active: rgba(255, 255, 255, 0.11);\\n  --dial-surface-subtle: rgba(255, 255, 255, 0.06);\\n\\n  /* Text hierarchy - 3 levels */\\n  --dial-text-root: #FFFFFF;   /* Root title */\\n  --dial-text-section: rgba(255, 255, 255, 0.7); /* Section titles + carets */\\n  --dial-text-label: rgba(255, 255, 255, 0.7);   /* Input labels */\\n  --dial-text-focus: #ffffff;\\n\\n  /* Legacy aliases */\\n  --dial-text-primary: rgba(255, 255, 255, 0.95);\\n  --dial-text-secondary: rgba(255, 255, 255, 0.6);\\n  --dial-text-tertiary: rgba(255, 255, 255, 0.4);\\n\\n  /* Borders */\\n  --dial-border: rgba(255, 255, 255, 0.1);\\n  --dial-border-hover: rgba(255, 255, 255, 0.15);\\n  --dial-focus-ring: rgba(255, 255, 255, 0.6);\\n\\n  /* Timeline clips are light by default; light themes add a dark tint so\\n     their shape stays distinct from the lane without replacing custom hues. */\\n  --dial-timeline-clip-overlay: transparent;\\n\\n  /* Glassmorphic panel */\\n  --dial-glass-bg: #212121;\\n  --dial-dropdown-bg: #2a2a2a;\\n  --dial-backdrop-blur: 20px;\\n  --dial-radius: 8px;\\n  --dial-row-height: 36px;\\n  --dial-row-gap: 6px;\\n  --dial-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\\n  --dial-shadow-collapsed: 0 4px 16px rgba(0, 0, 0, 0.25);\\n  --dial-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4);\\n\\n  /* Fonts */\\n  font-family: system-ui, -apple-system, 'SF Pro Display', sans-serif;\\n  -webkit-font-smoothing: antialiased;\\n  -moz-osx-font-smoothing: grayscale;\\n}\\n\\n.dialkit-panel {\\n  position: fixed;\\n  z-index: 9999;\\n  max-height: calc(100vh - 32px);\\n  overflow: visible;\\n}\\n\\n/* Inline mode */\\n.dialkit-root[data-mode=\\\"inline\\\"] {\\n  max-height: 100%;\\n}\\n\\n.dialkit-panel[data-mode=\\\"inline\\\"] {\\n  position: static;\\n  z-index: auto;\\n  max-height: inherit;\\n  height: auto;\\n  overflow: visible;\\n}\\n\\n.dialkit-panel-inner {\\n  box-sizing: border-box;\\n  background: var(--dial-glass-bg);\\n  border: 1px solid var(--dial-border);\\n  border-radius: 14px;\\n  backdrop-filter: blur(var(--dial-backdrop-blur));\\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\\n  padding: 10px 12px;\\n  transform: translateZ(0);\\n  transform-origin: var(--dial-origin-y, top) var(--dial-origin-x, right);\\n}\\n\\n.dialkit-panel[data-origin-x=\\\"left\\\"] {\\n  --dial-origin-x: left;\\n}\\n\\n.dialkit-panel[data-origin-x=\\\"right\\\"] {\\n  --dial-origin-x: right;\\n}\\n\\n.dialkit-panel[data-origin-y=\\\"top\\\"] {\\n  --dial-origin-y: top;\\n}\\n\\n.dialkit-panel[data-origin-y=\\\"bottom\\\"] {\\n  --dial-origin-y: bottom;\\n}\\n\\n.dialkit-panel[data-position=\\\"top-left\\\"] .dialkit-panel-inner {\\n  max-height: calc(100vh - 80px);\\n  overflow-y: auto;\\n}\\n\\n\\n.dialkit-panel-inner[data-collapsed=\\\"true\\\"] {\\n  border-radius: 50%;\\n  padding: 12px;\\n  box-sizing: border-box;\\n}\\n\\n.dialkit-panel-inner[data-collapsed=\\\"true\\\"] .dialkit-panel-header {\\n  padding-bottom: 0;\\n  margin-bottom: 0;\\n  border-bottom: none;\\n}\\n\\n.dialkit-panel-inner[data-collapsed=\\\"true\\\"] .dialkit-folder-title-row {\\n  display: none;\\n}\\n\\n.dialkit-panel-inner[data-collapsed=\\\"true\\\"] .dialkit-folder-header-top {\\n  justify-content: center;\\n  padding: 0;\\n}\\n\\n.dialkit-panel-inner::-webkit-scrollbar {\\n  display: none;\\n}\\n\\n.dialkit-panel-inner {\\n  -ms-overflow-style: none;\\n  scrollbar-width: none;\\n}\\n\\n.dialkit-panel-inline {\\n  width: 100%;\\n  height: auto;\\n  max-height: inherit;\\n  overflow-y: auto;\\n  box-shadow: none;\\n  border-radius: 0;\\n  border: none;\\n  box-sizing: border-box;\\n}\\n\\n.dialkit-panel[data-mode=\\\"inline\\\"] .dialkit-panel-wrapper {\\n  display: flex;\\n  flex-direction: column;\\n  width: 100%;\\n  max-height: inherit;\\n  height: auto;\\n}\\n\\n/* Position variants */\\n.dialkit-panel[data-position=\\\"top-right\\\"] {\\n  top: 16px;\\n  right: 16px;\\n}\\n\\n.dialkit-panel[data-position=\\\"top-left\\\"] {\\n  top: 16px;\\n  left: 16px;\\n}\\n\\n.dialkit-panel[data-position=\\\"bottom-right\\\"] {\\n  bottom: 16px;\\n  right: 16px;\\n}\\n\\n.dialkit-panel[data-position=\\\"bottom-left\\\"] {\\n  bottom: 16px;\\n  left: 16px;\\n}\\n\\n/* Folder */\\n.dialkit-folder {\\n  padding-bottom: 8px;\\n  margin-bottom: 8px;\\n  border-bottom: 1px solid var(--dial-surface-subtle);\\n}\\n\\n.dialkit-folder:last-child:not(.dialkit-folder-root) {\\n  padding-bottom: 0;\\n  margin-bottom: 0;\\n}\\n\\n.dialkit-folder-root {\\n  padding-bottom: 0;\\n  margin-bottom: 0;\\n  border-bottom: none;\\n}\\n\\n.dialkit-panel-header {\\n  padding-bottom: 6px;\\n  margin-bottom: 12px;\\n  border-bottom: 1px solid var(--dial-surface-subtle);\\n}\\n\\n.dialkit-panel:not([data-mode=\\\"inline\\\"]) .dialkit-panel-inner:not([data-collapsed=\\\"true\\\"]) > .dialkit-folder-root > .dialkit-panel-header {\\n  cursor: grab;\\n}\\n\\n.dialkit-panel:not([data-mode=\\\"inline\\\"]) .dialkit-panel-inner:not([data-collapsed=\\\"true\\\"]) > .dialkit-folder-root > .dialkit-panel-header:active {\\n  cursor: grabbing;\\n}\\n\\n.dialkit-panel:not([data-mode=\\\"inline\\\"]) .dialkit-panel-icon {\\n  cursor: pointer;\\n}\\n\\n.dialkit-folder-header {\\n  cursor: pointer;\\n  user-select: none;\\n}\\n\\n.dialkit-folder-header-top {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  padding: 0 0 8px 0;\\n}\\n\\n\\n.dialkit-folder-title {\\n  font-size: 13px;\\n  font-weight: 600;\\n  color: var(--dial-text-section);\\n  letter-spacing: -0.01em;\\n  transform: translateY(-0.5px);\\n  transition: color 0.15s;\\n}\\n\\n.dialkit-folder-title-root {\\n  font-size: 15px;\\n  font-weight: 600;\\n  color: var(--dial-text-root);\\n  transform: translateZ(0);\\n}\\n\\n.dialkit-folder-title-row {\\n  display: flex;\\n  align-items: center;\\n  gap: 6px;\\n  flex: 1;\\n  white-space: nowrap;\\n  overflow: hidden;\\n}\\n\\n.dialkit-folder-copy {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  width: 20px;\\n  height: 20px;\\n  padding: 0;\\n  background: transparent;\\n  border: none;\\n  cursor: pointer;\\n}\\n\\n.dialkit-folder-copy svg {\\n  width: 14px;\\n  height: 14px;\\n  color: var(--dial-text-section);\\n}\\n\\n.dialkit-folder-icon {\\n  width: 20px;\\n  height: 20px;\\n  padding: 2px;\\n  box-sizing: border-box;\\n  flex-shrink: 0;\\n  color: var(--dial-text-label);\\n  opacity: 0.6;\\n}\\n\\n.dialkit-panel-icon {\\n  position: absolute;\\n  top: 12px;\\n  right: 12px;\\n  width: 16px;\\n  height: 16px;\\n  color: var(--dial-text-focus);\\n  z-index: 1;\\n}\\n\\n.dialkit-folder-content {\\n  will-change: transform;\\n}\\n\\n.dialkit-folder-inner {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--dial-row-gap);\\n  padding-bottom: 10px;\\n}\\n\\n/* Non-root folders - top & bottom HR dividers */\\n.dialkit-folder:not(.dialkit-folder-root) {\\n  border-top: 1px solid var(--dial-surface-subtle);\\n  border-bottom: 1px solid var(--dial-surface-subtle);\\n  margin-top: 4px;\\n  margin-bottom: 4px;\\n  padding-bottom: 0;\\n}\\n\\n.dialkit-folder:not(.dialkit-folder-root):last-child {\\n  border-bottom: none;\\n  margin-bottom: 0;\\n}\\n\\n/* Adjacent non-root folders collapse gap and share a single divider */\\n.dialkit-folder:not(.dialkit-folder-root) + .dialkit-folder:not(.dialkit-folder-root) {\\n  margin-top: -10px;\\n  border-top: none;\\n}\\n\\n/* Non-root folder header - match row height */\\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header {\\n  height: var(--dial-row-height);\\n  padding: 0;\\n}\\n\\n.dialkit-folder:not(.dialkit-folder-root) > .dialkit-folder-header > .dialkit-folder-header-top {\\n  padding: 0;\\n  height: 100%;\\n}\\n\\n/* Root folder inner needs no extra bottom padding */\\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\\n  padding-bottom: 0;\\n}\\n\\n/* A sole group that comes first can share the panel header's divider. */\\n.dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child:not(:has(~ .dialkit-folder)) {\\n  border-top: none;\\n  margin-top: 0;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-panel-inner:not([data-collapsed=\\\"true\\\"]) {\\n  padding: 0 12px;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-panel-inner:not([data-collapsed=\\\"true\\\"]) .dialkit-panel-icon {\\n  top: 14px;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-panel-header {\\n  padding-bottom: 0;\\n  margin-bottom: 0;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-panel-header > .dialkit-folder-header-top,\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header > .dialkit-folder-header-top {\\n  height: 44px;\\n  padding: 0;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header {\\n  height: 44px;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner {\\n  gap: 0;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder {\\n  margin: 0;\\n  padding-bottom: 0;\\n  border-top: 1px solid var(--dial-surface-subtle);\\n  border-bottom: none;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-header .dialkit-folder-title {\\n  font-size: 15px;\\n  font-weight: 600;\\n  line-height: 20px;\\n  color: var(--dial-text-root);\\n  transform: translateZ(0);\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-title-root {\\n  line-height: 20px;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder:first-child {\\n  border-top: none;\\n  margin-top: 0;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder + .dialkit-folder {\\n  margin-top: 0;\\n}\\n\\n.dialkit-panel[data-multiple=\\\"true\\\"] .dialkit-folder-root > .dialkit-folder-content > .dialkit-folder-inner > .dialkit-folder > .dialkit-folder-content > .dialkit-folder-inner {\\n  padding-top: 4px;\\n  padding-bottom: 12px;\\n}\\n\\n/* Content spacing handled by folder-inner gap */\\n\\n\\n/* Slider */\\n.dialkit-slider-wrapper {\\n  position: relative;\\n  height: var(--dial-row-height);\\n}\\n\\n.dialkit-slider {\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  width: 100%;\\n  height: 100%;\\n  cursor: pointer;\\n  user-select: none;\\n  overflow: hidden;\\n  background: var(--dial-surface);\\n  border-radius: var(--dial-radius);\\n  touch-action: none;\\n}\\n\\n.dialkit-slider-hashmarks {\\n  position: absolute;\\n  inset: 0;\\n  pointer-events: none;\\n}\\n\\n.dialkit-slider-hashmark {\\n  position: absolute;\\n  top: 50%;\\n  width: 1px;\\n  height: 8px;\\n  border-radius: 999px;\\n  transform: translateX(-50%) translateY(-50%);\\n  background: rgba(255, 255, 255, 0);\\n  transition: background 200ms;\\n}\\n\\n.dialkit-slider-active .dialkit-slider-hashmark {\\n  background: var(--dial-border-hover);\\n}\\n\\n.dialkit-slider-active .dialkit-slider-value {\\n  color: var(--dial-text-focus);\\n}\\n\\n.dialkit-slider-fill {\\n  position: absolute;\\n  top: 0;\\n  bottom: 0;\\n  left: 0;\\n  background: var(--dial-surface-active);\\n  transition: background 0.15s;\\n  pointer-events: none;\\n}\\n\\n.dialkit-slider-active .dialkit-slider-fill {\\n  background: var(--dial-border-hover);\\n}\\n\\n.dialkit-slider-handle {\\n  position: absolute;\\n  top: 50%;\\n  width: 3px;\\n  height: 20px;\\n  border-radius: 999px;\\n  background: var(--dial-text-primary);\\n  pointer-events: none;\\n}\\n\\n.dialkit-slider-label {\\n  position: absolute;\\n  left: 10px;\\n  top: 50%;\\n  transform: translateY(calc(-50% - 0.5px));\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  pointer-events: none;\\n  transition: color 0.15s;\\n  display: inline-flex;\\n  align-items: center;\\n}\\n\\n.dialkit-slider-value {\\n  position: absolute;\\n  right: 12px;\\n  top: 50%;\\n  transform: translateY(calc(-50% + 0.5px));\\n  font-size: 13px;\\n  font-weight: 500;\\n  font-family: 'Geist Mono', monospace;\\n  color: var(--dial-text-label);\\n  pointer-events: auto;\\n  transition: color 0.15s, border-color 0.15s;\\n  border-bottom: 1px solid transparent;\\n  padding-bottom: 1px;\\n}\\n\\n.dialkit-slider-value-editable {\\n  border-bottom-color: var(--dial-text-label);\\n}\\n\\n.dialkit-slider-input {\\n  position: absolute;\\n  right: 12px;\\n  top: 50%;\\n  transform: translateY(-50%);\\n  width: 4ch;\\n  min-width: 3ch;\\n  max-width: 6ch;\\n  font-size: 13px;\\n  font-weight: 500;\\n  font-family: 'Geist Mono', monospace;\\n  color: var(--dial-text-label);\\n  background: transparent;\\n  border: none;\\n  border-bottom: 1px solid var(--dial-text-label);\\n  padding: 0 0 1px 0;\\n  outline: none;\\n  text-align: right;\\n}\\n\\n.dialkit-slider-input:focus {\\n  color: var(--dial-text-focus);\\n}\\n\\n/* Segmented Control */\\n.dialkit-segmented {\\n  position: relative;\\n  display: flex;\\n  padding: 2px;\\n  background: transparent;\\n  border-radius: var(--dial-radius);\\n}\\n\\n.dialkit-segmented-pill {\\n  position: absolute;\\n  top: 2px;\\n  bottom: 2px;\\n  background: var(--dial-surface-active);\\n  border-radius: 6px;\\n  z-index: 0;\\n  pointer-events: none;\\n}\\n\\n.dialkit-segmented-button {\\n  position: relative;\\n  z-index: 1;\\n  flex: 0 0 auto;\\n  padding: 6px 8px;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  background: transparent;\\n  border: none;\\n  cursor: pointer;\\n  transition: color 0.15s;\\n}\\n\\n.dialkit-segmented-button[data-active=\\\"true\\\"] {\\n  color: var(--dial-text-primary);\\n}\\n\\n.dialkit-segmented-button[data-active=\\\"false\\\"] {\\n  color: var(--dial-text-label);\\n}\\n\\n/* Toggle */\\n.dialkit-toggle {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  padding: 10px 16px;\\n  background: var(--dial-surface);\\n  border-radius: var(--dial-radius);\\n  cursor: pointer;\\n  user-select: none;\\n  transition: background 0.15s;\\n}\\n\\n.dialkit-toggle:hover {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-toggle-label {\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  transition: color 0.15s;\\n}\\n\\n.dialkit-toggle[data-checked=\\\"true\\\"] .dialkit-toggle-label {\\n  color: var(--dial-text-primary);\\n}\\n\\n.dialkit-toggle-track {\\n  width: 36px;\\n  height: 20px;\\n  border-radius: 10px;\\n  background: var(--dial-surface-active);\\n  transition: background 0.2s;\\n  position: relative;\\n}\\n\\n.dialkit-toggle[data-checked=\\\"true\\\"] .dialkit-toggle-track {\\n  background: var(--dial-border-hover);\\n}\\n\\n.dialkit-toggle-thumb {\\n  position: absolute;\\n  top: 2px;\\n  width: 16px;\\n  height: 16px;\\n  border-radius: 8px;\\n  background: var(--dial-text-primary);\\n}\\n\\n/* Button Group */\\n.dialkit-button-group {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 6px;\\n}\\n\\n.dialkit-button {\\n  flex: 1;\\n  padding: 10px 16px;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-secondary);\\n  background: var(--dial-surface);\\n  border: none;\\n  border-radius: var(--dial-radius);\\n  cursor: pointer;\\n  transition: background 0.15s, color 0.15s;\\n}\\n\\n.dialkit-button:hover {\\n  background: var(--dial-surface-hover);\\n  color: var(--dial-text-primary);\\n}\\n\\n.dialkit-button:active {\\n  background: var(--dial-surface-active);\\n}\\n\\n/* Labeled Control Row (label + control side by side) */\\n.dialkit-labeled-control {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  gap: 12px;\\n  height: var(--dial-row-height);\\n  padding: 2px 10px 2px 12px;\\n  background: var(--dial-surface);\\n  border-radius: var(--dial-radius);\\n}\\n\\n.dialkit-labeled-control-label {\\n  display: flex;\\n  align-items: center;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  flex-shrink: 0;\\n  line-height: 17px;\\n}\\n\\n.dialkit-labeled-control .dialkit-segmented {\\n  flex-shrink: 0;\\n  margin-right: -6px;\\n}\\n\\n.dialkit-action-button {\\n  width: 160px;\\n  flex-shrink: 0;\\n  padding: 10px 16px;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-secondary);\\n  background: var(--dial-surface);\\n  border: none;\\n  border-radius: var(--dial-radius);\\n  cursor: pointer;\\n  transition: background 0.15s, color 0.15s;\\n}\\n\\n.dialkit-action-button:hover {\\n  background: var(--dial-surface-hover);\\n  color: var(--dial-text-primary);\\n}\\n\\n.dialkit-action-button:active {\\n  background: var(--dial-surface-active);\\n}\\n\\n.dialkit-actions-group {\\n  align-items: flex-start;\\n}\\n\\n.dialkit-actions-stack {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 6px;\\n  width: 160px;\\n}\\n\\n/* Spring Visualization */\\n.dialkit-spring-viz {\\n  width: 100%;\\n  border-radius: var(--dial-radius);\\n  background: var(--dial-surface);\\n  overflow: visible;\\n}\\n\\n.dialkit-easing-viz {\\n  position: relative;\\n  width: 100%;\\n  aspect-ratio: 256 / 180;\\n  border-radius: var(--dial-radius);\\n  background: var(--dial-surface);\\n  overflow: hidden;\\n  isolation: isolate;\\n}\\n\\n.dialkit-easing-viz svg {\\n  position: absolute;\\n  inset: 0;\\n  width: 100%;\\n  height: 100%;\\n  pointer-events: none;\\n}\\n\\n.dialkit-easing-reference {\\n  stroke: var(--dial-text-tertiary);\\n  stroke-width: 1;\\n  stroke-dasharray: 3 4;\\n  opacity: 0.4;\\n}\\n\\n.dialkit-easing-tangent {\\n  stroke: var(--dial-text-tertiary);\\n  stroke-width: 1;\\n}\\n\\n.dialkit-easing-curve {\\n  fill: none;\\n  stroke: var(--dial-text-primary);\\n  stroke-width: 2;\\n  stroke-linecap: round;\\n}\\n\\n.dialkit-easing-endpoint {\\n  fill: var(--dial-text-secondary);\\n}\\n\\n.dialkit-easing-handle {\\n  position: absolute;\\n  display: grid;\\n  place-items: center;\\n  width: 24px;\\n  height: 24px;\\n  padding: 0;\\n  border: 0;\\n  border-radius: 50%;\\n  background: transparent;\\n  transform: translate(-50%, -50%);\\n  cursor: grab;\\n  touch-action: none;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n.dialkit-easing-handle::after {\\n  content: '';\\n  width: 10px;\\n  height: 10px;\\n  box-sizing: border-box;\\n  border: 1.5px solid var(--dial-text-secondary);\\n  border-radius: 50%;\\n  background: var(--dial-surface);\\n}\\n\\n.dialkit-easing-handle:hover::after,\\n.dialkit-easing-handle:focus-visible::after,\\n.dialkit-easing-handle[data-dragging]::after {\\n  border-color: var(--dial-text-primary);\\n  background: var(--dial-text-primary);\\n}\\n\\n.dialkit-easing-handle[data-dragging] {\\n  cursor: grabbing;\\n  z-index: 1;\\n}\\n\\n.dialkit-easing-handle:disabled {\\n  pointer-events: none;\\n}\\n\\n.dialkit-easing-instructions {\\n  position: absolute;\\n  width: 1px;\\n  height: 1px;\\n  padding: 0;\\n  overflow: hidden;\\n  clip-path: inset(50%);\\n  white-space: nowrap;\\n}\\n\\n/* Panel Wrapper (contains panel + toolbar) */\\n.dialkit-panel-wrapper {\\n  display: inline-flex;\\n  flex-direction: column;\\n}\\n\\n/* Panel Toolbar */\\n.dialkit-panel-toolbar {\\n  display: flex;\\n  align-items: center;\\n  gap: 6px;\\n  height: var(--dial-row-height);\\n  margin-bottom: 6px;\\n  min-width: 0;\\n  overflow: hidden;\\n}\\n\\n.dialkit-panel-section-toolbar {\\n  display: flex;\\n  align-items: center;\\n  gap: 6px;\\n  width: 100%;\\n  height: var(--dial-row-height);\\n  min-width: 0;\\n  overflow: hidden;\\n}\\n\\n.dialkit-toolbar-add {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  width: var(--dial-row-height);\\n  height: var(--dial-row-height);\\n  padding: 0;\\n  flex-shrink: 0;\\n  background: var(--dial-surface);\\n  border: none;\\n  border-radius: var(--dial-radius);\\n  cursor: pointer;\\n  transition: background 0.15s;\\n}\\n\\n.dialkit-toolbar-add:hover {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-timeline-toolbar-toggle[data-active] {\\n  background: var(--dial-surface-active);\\n  color: var(--dial-text-root);\\n}\\n\\n.dialkit-toolbar-add svg {\\n  width: 16px;\\n  height: 16px;\\n  color: var(--dial-text-label);\\n}\\n\\n.dialkit-timeline-toolkit-only {\\n  height: var(--dial-row-height);\\n  display: flex;\\n  align-items: center;\\n  padding: 0 12px;\\n  border-radius: var(--dial-radius);\\n  background: var(--dial-surface-subtle);\\n  color: var(--dial-text-secondary);\\n  font-size: 12px;\\n}\\n\\n.dialkit-toolbar-copy {\\n  position: relative;\\n  display: flex;\\n  align-items: center;\\n  gap: 6px;\\n  height: var(--dial-row-height);\\n  padding: 0 12px;\\n  flex-shrink: 0;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  background: var(--dial-surface);\\n  border: none;\\n  border-radius: var(--dial-radius);\\n  cursor: pointer;\\n  transition: background 0.15s;\\n}\\n\\n.dialkit-toolbar-copy:hover {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-toolbar-copy-icon-wrap {\\n  position: relative;\\n  width: 16px;\\n  height: 16px;\\n  flex-shrink: 0;\\n}\\n\\n.dialkit-toolbar-copy-icon {\\n  position: absolute;\\n  inset: 0;\\n  width: 16px;\\n  height: 16px;\\n}\\n\\n/* Text Control */\\n.dialkit-text-control {\\n  position: relative;\\n  box-sizing: border-box;\\n  display: flex;\\n  align-items: flex-start;\\n  justify-content: space-between;\\n  gap: 12px;\\n  height: var(--dial-row-height);\\n  min-height: var(--dial-row-height);\\n  /* Hidden overflow still lets caret navigation scroll this animated row. */\\n  overflow: clip;\\n  padding: calc((var(--dial-row-height) - 18px) / 2) 12px;\\n  background: var(--dial-surface);\\n  border-radius: var(--dial-radius);\\n}\\n\\n.dialkit-text-label {\\n  line-height: 18px;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  flex-shrink: 0;\\n}\\n\\n.dialkit-text-input {\\n  display: block;\\n  box-sizing: border-box;\\n  margin: 0;\\n  margin-right: calc(-1 * var(--dial-text-gutter, 0px));\\n  flex: 1;\\n  width: 0;\\n  min-width: 0;\\n  height: 18px;\\n  line-height: 18px;\\n  resize: none;\\n  overflow: hidden;\\n  overflow-wrap: anywhere;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  scrollbar-gutter: stable;\\n  scrollbar-color: var(--dial-text-tertiary) transparent;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  background: transparent;\\n  border: none;\\n  padding: 0;\\n  outline: none;\\n  text-align: right;\\n  cursor: text;\\n}\\n\\n.dialkit-text-control[data-autosized] {\\n  transition: height 180ms cubic-bezier(0.2, 0, 0, 1);\\n}\\n\\n.dialkit-text-input::-webkit-scrollbar { width: 6px; }\\n.dialkit-text-input::-webkit-scrollbar-track { background: transparent; }\\n.dialkit-text-input::-webkit-scrollbar-thumb {\\n  background: var(--dial-text-tertiary);\\n  border-radius: 3px;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n  .dialkit-text-control[data-autosized] { transition: none; }\\n}\\n\\n.dialkit-text-input:focus {\\n  color: var(--dial-text-focus);\\n}\\n\\n.dialkit-text-input:focus-visible {\\n  background-image: linear-gradient(var(--dial-focus-ring), var(--dial-focus-ring));\\n  background-repeat: no-repeat;\\n  background-position: 4px bottom;\\n  background-size: calc(100% - var(--dial-text-gutter, 0px) - 4px) 1px;\\n}\\n\\n.dialkit-text-input::placeholder {\\n  color: var(--dial-text-tertiary);\\n}\\n\\n/* Select Control - Full-width row */\\n.dialkit-select-row {\\n}\\n\\n.dialkit-select-trigger {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  width: 100%;\\n  height: var(--dial-row-height);\\n  padding: 0 12px;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  background: var(--dial-surface);\\n  border: none;\\n  border-radius: var(--dial-radius);\\n  cursor: pointer;\\n  transition: background 0.15s;\\n}\\n\\n.dialkit-select-trigger:hover {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-select-trigger[data-open=\\\"true\\\"] {\\n  background: var(--dial-surface-active);\\n}\\n\\n.dialkit-select-label {\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  flex-shrink: 0;\\n  transform: translateY(-0.5px);\\n}\\n\\n.dialkit-select-right {\\n  display: flex;\\n  align-items: center;\\n  gap: 8px;\\n}\\n\\n.dialkit-select-value {\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  transform: translateY(-0.5px);\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n.dialkit-select-chevron {\\n  width: 20px;\\n  height: 20px;\\n  padding: 2px;\\n  box-sizing: border-box;\\n  flex-shrink: 0;\\n  opacity: 0.6;\\n}\\n\\n/* Select Dropdown (portaled to body) */\\n.dialkit-select-dropdown {\\n  margin: 0;\\n  inset: auto;\\n  box-sizing: border-box;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  scrollbar-color: var(--dial-border-hover) transparent;\\n  background: var(--dial-glass-bg);\\n  border: 1px solid var(--dial-border);\\n  border-radius: var(--dial-radius);\\n  padding: 4px;\\n  z-index: 10000;\\n  box-shadow: var(--dial-shadow-dropdown);\\n}\\n\\n.dialkit-select-option {\\n  min-height: 36px;\\n  display: block;\\n  width: 100%;\\n  padding: 8px 10px;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  background: transparent;\\n  border: none;\\n  border-radius: 6px;\\n  cursor: pointer;\\n  text-align: left;\\n  transition: background 0.15s, color 0.15s;\\n}\\n\\n.dialkit-select-option:hover {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-select-option[data-selected=\\\"true\\\"] {\\n  color: var(--dial-text-primary);\\n  background: var(--dial-surface-active);\\n}\\n\\n/* Image selector: shared by React, Solid, Vue, and Svelte. */\\n.dialkit-image-control {\\n  display: flex;\\n  align-items: center;\\n  gap: 8px;\\n  width: 100%;\\n  height: var(--dial-row-height);\\n  padding: 0 6px 0 12px;\\n  border: 0;\\n  border-radius: var(--dial-radius);\\n  background: var(--dial-surface);\\n  color: var(--dial-text-label);\\n  font: 500 13px system-ui, -apple-system, sans-serif;\\n  text-align: left;\\n  cursor: pointer;\\n  transition: background 0.15s, box-shadow 0.15s;\\n}\\n.dialkit-image-control:hover { background: var(--dial-surface-hover); }\\n.dialkit-image-control[data-open=\\\"true\\\"] { background: var(--dial-surface-active); box-shadow: inset 0 0 0 1px var(--dial-border-hover); color: var(--dial-text-primary); }\\n.dialkit-image-label { flex-shrink: 0; }\\n.dialkit-image-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--dial-text-secondary); font-size: 12px; }\\n.dialkit-image-frame { position: relative; display: block; overflow: hidden; border-radius: var(--dial-radius); background: repeating-conic-gradient(var(--dial-surface) 0% 25%, transparent 0% 50%) 0 / 12px 12px, var(--dial-surface); }\\n.dialkit-image-img { display: block; width: 100%; height: 100%; object-fit: cover; }\\n.dialkit-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dial-text-tertiary); }\\n.dialkit-image-fallback svg { width: 24px; height: 24px; }\\n.dialkit-image-thumbnail { flex: 0 0 38px; height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--dial-border); }\\n.dialkit-image-thumbnail svg { width: 16px; height: 16px; }\\n.dialkit-image-popover {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 10px;\\n  position: fixed;\\n  margin: 0;\\n  inset: auto;\\n  z-index: 10002;\\n  box-sizing: border-box;\\n  padding: 12px;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  scrollbar-color: var(--dial-border-hover) transparent;\\n  border: 1px solid var(--dial-border);\\n  border-radius: 14px;\\n  background: var(--dial-glass-bg);\\n  box-shadow: var(--dial-shadow);\\n  color: var(--dial-text-label);\\n  font: 500 13px system-ui, -apple-system, sans-serif;\\n  animation: dialkit-color-enter 0.16s ease-out;\\n}\\n.dialkit-image-popover *, .dialkit-image-popover *::before, .dialkit-image-popover *::after { box-sizing: border-box; }\\n.dialkit-image-popover > * { flex-shrink: 0; }\\n.dialkit-image-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }\\n.dialkit-image-title { color: var(--dial-text-primary); }\\n.dialkit-image-clear { margin: -4px -4px -4px 0; padding: 4px; border: 0; border-radius: 4px; background: none; color: var(--dial-text-tertiary); font: inherit; font-size: 11px; cursor: pointer; }\\n.dialkit-image-clear:hover { color: var(--dial-text-primary); }\\n.dialkit-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dial-row-gap); }\\n.dialkit-image-option { position: relative; display: block; width: 100%; padding: 3px; border: 1px solid transparent; border-radius: calc(var(--dial-radius) + 3px); background: transparent; cursor: pointer; transition: border-color 0.15s, background 0.15s; }\\n.dialkit-image-option-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: calc(var(--dial-radius) - 1px); }\\n.dialkit-image-option:hover { background: var(--dial-surface-hover); border-color: var(--dial-border-hover); }\\n.dialkit-image-option[aria-pressed=\\\"true\\\"] { border-color: var(--dial-text-label); background: var(--dial-surface-active); }\\n.dialkit-image-upload { display: flex; flex: none; align-items: center; justify-content: center; gap: 8px; width: 100%; }\\n.dialkit-image-upload svg { width: 15px; height: 15px; }\\n.dialkit-image-popover[data-dragging=\\\"true\\\"] .dialkit-image-upload { background: var(--dial-surface-hover); color: var(--dial-text-primary); }\\n.dialkit-image-upload[aria-disabled=\\\"true\\\"] { opacity: 0.6; cursor: progress; }\\n.dialkit-image-empty { padding: 28px 12px; border-radius: var(--dial-radius); background: var(--dial-surface); color: var(--dial-text-tertiary); font-weight: 400; text-align: center; }\\n.dialkit-image-status { font-size: 11px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }\\n.dialkit-image-popover [hidden], .dialkit-image-frame [hidden], .dialkit-image-file { display: none; }\\n@media (prefers-reduced-motion: reduce) { .dialkit-image-popover { animation: none; } }\\n\\n/* DialPad: a continuous two-axis field, shared across frameworks. */\\n.dialkit-pad { display: grid; gap: var(--dial-row-gap); min-width: 0; }\\n.dialkit-pad-caption { display: flex; align-items: center; min-width: 0; height: var(--dial-row-height); padding: 0 12px; border-radius: var(--dial-radius); background: var(--dial-surface); }\\n.dialkit-pad-label { flex: 1; min-width: 0; color: var(--dial-text-label); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\\n.dialkit-pad-surface { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--dial-radius); background: var(--dial-surface); cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }\\n.dialkit-pad-plane { position: absolute; inset: 12px; pointer-events: none; }\\n.dialkit-pad-grid { position: absolute; inset: 0; pointer-events: none; }\\n.dialkit-pad-grid-line { position: absolute; background: var(--dial-border); opacity: 0.65; }\\n.dialkit-pad-grid-vertical { top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }\\n.dialkit-pad-grid-horizontal { left: 0; right: 0; height: 1px; transform: translateY(-50%); }\\n.dialkit-pad-center { position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--dial-text-tertiary); transform: translate(-50%, -50%); }\\n.dialkit-pad-point { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--dial-text-primary); box-shadow: 0 0 0 0 transparent, 0 2px 4px #0003; transform: translate(-50%, -50%); transition: box-shadow 0.15s; pointer-events: auto; cursor: grab; }\\n.dialkit-pad-surface[data-dragging=\\\"true\\\"], .dialkit-pad-surface[data-dragging=\\\"true\\\"] .dialkit-pad-point { cursor: grabbing; }\\n.dialkit-pad-surface[data-dragging=\\\"true\\\"] .dialkit-pad-point { box-shadow: 0 0 0 6px var(--dial-border-hover), 0 2px 6px #0003; }\\n.dialkit-pad-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dial-row-gap); }\\n.dialkit-pad-field { display: flex; align-items: center; gap: 4px; min-width: 0; height: var(--dial-row-height); padding: 0 12px 0 10px; border-radius: var(--dial-radius); background: var(--dial-surface); }\\n.dialkit-pad-axis { min-width: 0; max-width: 35%; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--dial-text-label); }\\n.dialkit-pad-value { min-width: 0; width: 100%; border: 0; padding: 0 0 1px; background: transparent; color: var(--dial-text-label); text-align: right; font: 500 13px 'Geist Mono', monospace; }\\n.dialkit-pad-field:focus-within { background: var(--dial-surface-hover); }\\n.dialkit-pad-value:focus-visible { box-shadow: inset 0 -1px var(--dial-focus-ring); }\\n.dialkit-pad-value:focus { color: var(--dial-text-focus); }\\n.dialkit-pad-instructions { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\\n@media (prefers-reduced-motion: reduce) { .dialkit-pad-point { transition: none; } }\\n\\n/* Color Control */\\n.dialkit-color-control {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  gap: 12px;\\n  height: var(--dial-row-height);\\n  padding: 0 12px;\\n  background: var(--dial-surface);\\n  border-radius: var(--dial-radius);\\n  transition: background 0.15s, box-shadow 0.15s;\\n}\\n\\n.dialkit-color-control[data-open=\\\"true\\\"] {\\n  background: var(--dial-surface-active);\\n  box-shadow: inset 0 0 0 1px var(--dial-border-hover);\\n}\\n.dialkit-color-control[data-open=\\\"true\\\"] .dialkit-color-label,\\n.dialkit-color-control[data-open=\\\"true\\\"] .dialkit-color-value { color: var(--dial-text-primary); }\\n\\n.dialkit-color-label {\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  flex-shrink: 0;\\n  transform: translateY(-0.5px);\\n}\\n\\n.dialkit-color-inputs {\\n  display: flex;\\n  align-items: center;\\n  gap: 8px;\\n}\\n\\n/* Color picker: shared by React, Solid, Vue, and Svelte. */\\n.dialkit-color-inputs { min-width: 0; flex: 1; justify-content: flex-end; }\\n.dialkit-color-value {\\n  min-width: 0;\\n  width: 100%;\\n  padding: 4px 0;\\n  border: 0;\\n  outline: none;\\n  background: transparent;\\n  color: var(--dial-text-label);\\n  font: 500 13px 'Geist Mono', monospace;\\n  text-align: right;\\n  text-overflow: ellipsis;\\n}\\n.dialkit-color-value:focus { color: var(--dial-text-focus); }\\n.dialkit-color-swatch {\\n  flex: 0 0 20px;\\n  width: 20px;\\n  height: 20px;\\n  padding: 0;\\n  border-radius: 5px;\\n  border: 1px solid var(--dial-border-hover);\\n  background: linear-gradient(var(--dial-color), var(--dial-color)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\\n  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);\\n  cursor: pointer;\\n  transition: transform 0.15s;\\n}\\n.dialkit-color-swatch:hover { transform: scale(1.08); }\\n.dialkit-color-popover {\\n  display: grid;\\n  gap: var(--dial-row-gap);\\n  position: fixed;\\n  margin: 0;\\n  inset: auto;\\n  z-index: 10002;\\n  box-sizing: border-box;\\n  padding: 10px;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  border: 1px solid var(--dial-border);\\n  border-radius: 14px;\\n  background: var(--dial-glass-bg);\\n  box-shadow: var(--dial-shadow);\\n  color: var(--dial-text-label);\\n  animation: dialkit-color-enter 0.16s ease-out;\\n}\\n.dialkit-color-popover *, .dialkit-color-popover *::before, .dialkit-color-popover *::after { box-sizing: border-box; }\\n.dialkit-color-plane { position: relative; height: 160px; border-radius: var(--dial-radius); touch-action: none; cursor: crosshair; user-select: none; }\\n.dialkit-color-canvas { display: block; width: 100%; height: 100%; border-radius: inherit; }\\n.dialkit-color-plane::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); pointer-events: none; }\\n.dialkit-color-marker { position: absolute; z-index: 1; width: 12px; height: 12px; margin: -6px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); pointer-events: none; }\\n.dialkit-color-tracks { display: grid; gap: var(--dial-row-gap); }\\n.dialkit-color-track-row { display: flex; align-items: center; gap: 12px; height: var(--dial-row-height); padding: 0 12px; border-radius: var(--dial-radius); background: var(--dial-surface); font-size: 13px; font-weight: 500; }\\n.dialkit-color-track-row > span { flex: 0 0 52px; color: var(--dial-text-label); }\\n.dialkit-color-track {\\n  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 100%; padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; touch-action: none;\\n}\\n.dialkit-color-hue {\\n  --dial-color-thumb-bg: var(--dial-color-thumb);\\n}\\n.dialkit-color-opacity {\\n  --dial-color-track-bg: linear-gradient(to right, transparent, var(--dial-color-opaque)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\\n  --dial-color-thumb-bg: linear-gradient(var(--dial-color-thumb), var(--dial-color-thumb)), repeating-conic-gradient(#aaa 0% 25%, #eee 0% 50%) 0 / 8px 8px;\\n}\\n.dialkit-color-track::-webkit-slider-runnable-track { height: 16px; border-radius: 4px; background: var(--dial-color-track-bg); }\\n.dialkit-color-track::-moz-range-track { height: 16px; border: 0; border-radius: 4px; background: var(--dial-color-track-bg); }\\n.dialkit-color-track::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 16px; height: 24px; margin-top: -4px; border-radius: 5px; background: var(--dial-color-thumb-bg); background-clip: padding-box; border: 2px solid white; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }\\n.dialkit-color-track::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 24px; border-radius: 5px; background: var(--dial-color-thumb-bg); background-clip: padding-box; border: 2px solid white; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }\\n/* The same row, buttons, and pill as Enabled, with no label and equal segments. */\\n.dialkit-color-format-row { padding: 2px; }\\n.dialkit-color-format-row .dialkit-color-formats { flex: 1; min-width: 0; margin-right: 0; }\\n.dialkit-color-formats .dialkit-segmented-pill { left: 2px; width: calc((100% - 4px) / 3); transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); }\\n.dialkit-color-format { flex: 1 1 0; min-width: 0; white-space: nowrap; }\\n.dialkit-color-format:hover { color: var(--dial-text-primary); }\\n.dialkit-color-css-input { display: block; width: 100%; height: var(--dial-row-height); padding: 0 12px; border: 0; border-radius: var(--dial-radius); background: var(--dial-surface); outline: none; color: var(--dial-text-label); font: 500 13px 'Geist Mono', monospace; }\\n.dialkit-color-css-input:focus { color: var(--dial-text-focus); }\\n.dialkit-color-popover input[aria-invalid=\\\"true\\\"], .dialkit-color-value[aria-invalid=\\\"true\\\"] { color: #ef7777; }\\n@keyframes dialkit-color-enter { from { opacity: 0; transform: translateY(3px) scale(0.98); } to { opacity: 1; transform: none; } }\\n@media (prefers-reduced-motion: reduce) {\\n  .dialkit-color-popover { animation: none; }\\n  .dialkit-color-formats .dialkit-segmented-pill { transition: none; }\\n}\\n\\n/* Preset Manager */\\n.dialkit-preset-manager {\\n  position: relative;\\n  flex: 1;\\n}\\n\\n.dialkit-preset-trigger {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  width: 100%;\\n  height: var(--dial-row-height);\\n  padding: 0 12px;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  background: var(--dial-surface);\\n  border: none;\\n  border-radius: var(--dial-radius);\\n  cursor: pointer;\\n  transition: background 0.15s;\\n}\\n\\n.dialkit-preset-trigger:hover {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-preset-trigger[data-disabled=\\\"true\\\"] {\\n  cursor: default;\\n}\\n\\n.dialkit-preset-trigger[data-disabled=\\\"true\\\"]:hover {\\n  background: var(--dial-surface);\\n}\\n\\n.dialkit-preset-trigger[data-open=\\\"true\\\"] {\\n  background: var(--dial-surface-active);\\n}\\n\\n.dialkit-preset-label {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n\\n.dialkit-preset-dropdown {\\n  margin: 0;\\n  inset: auto;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\n  width: max-content;\\n  background: var(--dial-dropdown-bg);\\n  border: 1px solid var(--dial-border);\\n  border-radius: 12px;\\n  padding: 4px;\\n  z-index: 10000;\\n  box-shadow: var(--dial-shadow-dropdown);\\n}\\n\\n.dialkit-preset-list {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 2px;\\n  margin-bottom: 4px;\\n  padding-bottom: 4px;\\n  border-bottom: 1px solid var(--dial-border);\\n}\\n\\n.dialkit-preset-item {\\n  display: flex;\\n  align-items: center;\\n  justify-content: space-between;\\n  padding: 8px 10px 8px 10px;\\n  gap: 8px;\\n  border-radius: 8px;\\n  cursor: pointer;\\n  transition: background 0.15s;\\n}\\n\\n.dialkit-preset-item:hover {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-preset-item[data-active=\\\"true\\\"] {\\n  background: var(--dial-surface-active);\\n}\\n\\n.dialkit-preset-name {\\n  flex: 1;\\n  min-width: 0;\\n  padding: 0;\\n  border: 0;\\n  border-radius: 4px;\\n  background: transparent;\\n  font-family: inherit;\\n  text-align: left;\\n  cursor: pointer;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n.dialkit-preset-item[data-active=\\\"true\\\"] .dialkit-preset-name {\\n  color: var(--dial-text-primary);\\n}\\n\\n.dialkit-preset-delete {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  width: 24px;\\n  height: 24px;\\n  padding: 0;\\n  background: transparent;\\n  border: none;\\n  cursor: pointer;\\n  opacity: 0;\\n  transition: opacity 0.15s;\\n  flex-shrink: 0;\\n}\\n\\n.dialkit-preset-item:hover .dialkit-preset-delete {\\n  opacity: 0.6;\\n}\\n\\n.dialkit-preset-item:focus-within .dialkit-preset-delete { opacity: 0.6; }\\n.dialkit-preset-item:focus-within { background: var(--dial-surface-hover); }\\n\\n.dialkit-preset-delete:hover {\\n  opacity: 1 !important;\\n}\\n\\n.dialkit-preset-delete svg {\\n  width: 14px;\\n  height: 14px;\\n  color: var(--dial-text-focus);\\n  pointer-events: none;\\n}\\n\\n.dialkit-preset-save-btn {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  gap: 6px;\\n  width: 100%;\\n  padding: 8px 10px;\\n  font-family: inherit;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  background: transparent;\\n  border: none;\\n  border-radius: 6px;\\n  cursor: pointer;\\n  transition: background 0.15s, color 0.15s;\\n}\\n\\n.dialkit-preset-save-btn:hover {\\n  background: var(--dial-surface-hover);\\n  color: var(--dial-text-primary);\\n}\\n\\n.dialkit-preset-save-btn svg {\\n  width: 12px;\\n  height: 12px;\\n}\\n\\n.dialkit-preset-save-row {\\n  display: flex;\\n  align-items: center;\\n  gap: 6px;\\n  padding: 4px;\\n}\\n\\n.dialkit-preset-input {\\n  flex: 1;\\n  min-width: 0;\\n  padding: 6px 8px;\\n  font-family: inherit;\\n  font-size: 13px;\\n  color: var(--dial-text-primary);\\n  background: var(--dial-surface);\\n  border: 1px solid var(--dial-border);\\n  border-radius: 6px;\\n  outline: none;\\n}\\n\\n.dialkit-preset-input:focus {\\n  border-color: var(--dial-text-label);\\n}\\n\\n.dialkit-preset-input::placeholder {\\n  color: var(--dial-text-tertiary);\\n}\\n\\n.dialkit-preset-confirm {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  width: 28px;\\n  height: 28px;\\n  padding: 0;\\n  background: var(--dial-surface);\\n  border: none;\\n  border-radius: 6px;\\n  cursor: pointer;\\n  transition: background 0.15s;\\n}\\n\\n.dialkit-preset-confirm:hover:not(:disabled) {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-preset-confirm:disabled {\\n  opacity: 0.4;\\n  cursor: not-allowed;\\n}\\n\\n.dialkit-preset-confirm svg {\\n  width: 14px;\\n  height: 14px;\\n  color: var(--dial-text-label);\\n}\\n\\n/* Shortcut Pill */\\n.dialkit-shortcut-pill {\\n  display: inline-block;\\n  font-size: 10px;\\n  font-weight: 600;\\n  font-family: system-ui, -apple-system, sans-serif;\\n  color: var(--dial-text-tertiary);\\n  background: var(--dial-surface-subtle);\\n  padding: 1px 5px;\\n  border-radius: 4px;\\n  margin-left: 6px;\\n  letter-spacing: 0.02em;\\n  line-height: 16px;\\n  white-space: nowrap;\\n  vertical-align: middle;\\n  transition: color 0.15s, background 0.15s;\\n}\\n\\n.dialkit-shortcut-pill-active {\\n  color: var(--dial-text-primary);\\n  background: var(--dial-border-hover);\\n}\\n\\n/* Shortcuts Menu Trigger */\\n.dialkit-shortcuts-trigger {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  width: var(--dial-row-height);\\n  height: var(--dial-row-height);\\n  padding: 0;\\n  flex-shrink: 0;\\n  background: var(--dial-surface);\\n  border: none;\\n  border-radius: var(--dial-radius);\\n  cursor: pointer;\\n  transition: background 0.15s;\\n}\\n\\n.dialkit-shortcuts-trigger:hover {\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-shortcuts-trigger svg {\\n  width: 16px;\\n  height: 16px;\\n  color: var(--dial-text-label);\\n}\\n\\n/* Shortcuts Dropdown */\\n.dialkit-shortcuts-dropdown {\\n  background: var(--dial-dropdown-bg);\\n  border: 1px solid var(--dial-border);\\n  border-radius: 12px;\\n  padding: 8px;\\n  z-index: 10000;\\n  box-shadow: var(--dial-shadow-dropdown);\\n  min-width: 200px;\\n}\\n\\n.dialkit-shortcuts-title {\\n  font-size: 11px;\\n  font-weight: 600;\\n  color: var(--dial-text-tertiary);\\n  text-transform: uppercase;\\n  letter-spacing: 0.05em;\\n  padding: 4px 8px 8px;\\n}\\n\\n.dialkit-shortcuts-list {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 2px;\\n}\\n\\n.dialkit-shortcuts-row {\\n  display: flex;\\n  align-items: center;\\n  gap: 10px;\\n  padding: 6px 8px;\\n  border-radius: 6px;\\n}\\n\\n.dialkit-shortcuts-row-key {\\n  font-size: 11px;\\n  font-weight: 600;\\n  font-family: ui-monospace, 'SF Mono', 'Courier New', monospace;\\n  color: var(--dial-text-secondary);\\n  background: var(--dial-surface-subtle);\\n  padding: 2px 6px;\\n  border-radius: 4px;\\n  min-width: 28px;\\n  text-align: center;\\n}\\n\\n.dialkit-shortcuts-row-label {\\n  flex: 1;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n}\\n\\n.dialkit-shortcuts-row-mode {\\n  font-size: 11px;\\n  font-weight: 500;\\n  color: var(--dial-text-tertiary);\\n  font-style: italic;\\n}\\n\\n.dialkit-shortcuts-hint {\\n  font-size: 11px;\\n  color: var(--dial-text-tertiary);\\n  padding: 6px 8px 2px;\\n  border-top: 1px solid var(--dial-border);\\n  margin-top: 4px;\\n}\\n\\n/* ── Light Theme ── */\\n.dialkit-root[data-theme=\\\"light\\\"] {\\n  --dial-surface: rgba(0, 0, 0, 0.04);\\n  --dial-surface-hover: rgba(0, 0, 0, 0.08);\\n  --dial-surface-active: rgba(0, 0, 0, 0.1);\\n  --dial-surface-subtle: rgba(0, 0, 0, 0.06);\\n\\n  --dial-text-root: #000000;\\n  --dial-text-section: rgba(0, 0, 0, 0.65);\\n  --dial-text-label: rgba(0, 0, 0, 0.6);\\n  --dial-text-focus: #000000;\\n\\n  --dial-text-primary: rgba(0, 0, 0, 0.9);\\n  --dial-text-secondary: rgba(0, 0, 0, 0.55);\\n  --dial-text-tertiary: rgba(0, 0, 0, 0.35);\\n\\n  --dial-border: rgba(0, 0, 0, 0.1);\\n  --dial-border-hover: rgba(0, 0, 0, 0.15);\\n  --dial-focus-ring: rgba(0, 0, 0, 0.55);\\n\\n  --dial-timeline-clip-overlay: rgba(0, 0, 0, 0.28);\\n\\n  --dial-glass-bg: #fafafa;\\n  --dial-dropdown-bg: #ffffff;\\n  --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\\n  --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\\n  --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\\n}\\n\\n/* Light mode: SVG visualization overrides */\\n.dialkit-root[data-theme=\\\"light\\\"] .dialkit-spring-viz line {\\n  stroke: rgba(0, 0, 0, 0.08);\\n}\\n\\n.dialkit-root[data-theme=\\\"light\\\"] .dialkit-spring-viz line[stroke-dasharray] {\\n  stroke: rgba(0, 0, 0, 0.15);\\n}\\n\\n.dialkit-root[data-theme=\\\"light\\\"] .dialkit-spring-viz path {\\n  stroke: rgba(0, 0, 0, 0.5);\\n}\\n\\n/* Light mode: toggle thumb needs shadow for definition */\\n.dialkit-root[data-theme=\\\"light\\\"] .dialkit-toggle-thumb {\\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\\n}\\n\\n/* ── System preference: light ── */\\n@media (prefers-color-scheme: light) {\\n  .dialkit-root[data-theme=\\\"system\\\"] {\\n    --dial-surface: rgba(0, 0, 0, 0.04);\\n    --dial-surface-hover: rgba(0, 0, 0, 0.08);\\n    --dial-surface-active: rgba(0, 0, 0, 0.1);\\n    --dial-surface-subtle: rgba(0, 0, 0, 0.06);\\n\\n    --dial-text-root: #000000;\\n    --dial-text-section: rgba(0, 0, 0, 0.65);\\n    --dial-text-label: rgba(0, 0, 0, 0.6);\\n    --dial-text-focus: #000000;\\n\\n    --dial-text-primary: rgba(0, 0, 0, 0.9);\\n    --dial-text-secondary: rgba(0, 0, 0, 0.55);\\n    --dial-text-tertiary: rgba(0, 0, 0, 0.35);\\n\\n    --dial-border: rgba(0, 0, 0, 0.1);\\n    --dial-border-hover: rgba(0, 0, 0, 0.15);\\n    --dial-focus-ring: rgba(0, 0, 0, 0.55);\\n\\n    --dial-timeline-clip-overlay: rgba(0, 0, 0, 0.28);\\n\\n    --dial-glass-bg: #fafafa;\\n    --dial-dropdown-bg: #ffffff;\\n    --dial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\\n    --dial-shadow-collapsed: 0 2px 10px rgba(0, 0, 0, 0.06);\\n    --dial-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);\\n  }\\n\\n  .dialkit-root[data-theme=\\\"system\\\"] .dialkit-spring-viz line {\\n    stroke: rgba(0, 0, 0, 0.08);\\n  }\\n\\n  .dialkit-root[data-theme=\\\"system\\\"] .dialkit-spring-viz line[stroke-dasharray] {\\n    stroke: rgba(0, 0, 0, 0.15);\\n  }\\n\\n  .dialkit-root[data-theme=\\\"system\\\"] .dialkit-spring-viz path {\\n    stroke: rgba(0, 0, 0, 0.5);\\n  }\\n\\n  .dialkit-root[data-theme=\\\"system\\\"] .dialkit-toggle-thumb {\\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);\\n  }\\n\\n}\\n\\n/* ── Timeline dock ── */\\n.dialkit-timeline {\\n  position: fixed;\\n  left: 12px;\\n  right: 12px;\\n  bottom: 12px;\\n  z-index: 9998;\\n}\\n\\n.dialkit-timeline[hidden] {\\n  display: none;\\n}\\n\\n.dialkit-timeline-dock {\\n  position: relative;\\n  box-sizing: border-box;\\n  background: var(--dial-glass-bg);\\n  border: 1px solid var(--dial-border);\\n  border-radius: 14px;\\n  backdrop-filter: blur(var(--dial-backdrop-blur));\\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\\n  padding: 0 12px 10px;\\n  display: flex;\\n  flex-direction: column;\\n  gap: 10px;\\n  overflow-x: hidden;\\n  overflow-y: auto;\\n  overscroll-behavior: contain;\\n  scrollbar-width: thin;\\n  scrollbar-color: var(--dial-text-tertiary) transparent;\\n}\\n\\n.dialkit-timeline-resize-handle {\\n  position: absolute;\\n  top: -4px;\\n  left: 0;\\n  right: 0;\\n  z-index: 9;\\n  height: 10px;\\n  cursor: ns-resize;\\n  touch-action: none;\\n}\\n\\n.dialkit-timeline-dock::-webkit-scrollbar {\\n  width: 8px;\\n}\\n\\n.dialkit-timeline-dock::-webkit-scrollbar-track {\\n  background: transparent;\\n}\\n\\n.dialkit-timeline-dock::-webkit-scrollbar-thumb {\\n  border-radius: 999px;\\n  background: var(--dial-text-tertiary);\\n}\\n\\n.dialkit-timeline-section {\\n  --dial-timeline-label-w: 96px;\\n  --dial-timeline-actions-w: 284px;\\n  --dial-timeline-header-h: calc(var(--dial-row-height) + 4px);\\n}\\n\\n.dialkit-timeline-section + .dialkit-timeline-section {\\n  border-top: 1px solid var(--dial-border);\\n  padding-top: 10px;\\n}\\n\\n.dialkit-timeline-header {\\n  display: grid;\\n  grid-template-columns: auto minmax(100px, 1fr) auto;\\n  align-items: center;\\n  gap: 12px;\\n  position: sticky;\\n  top: 0;\\n  z-index: 7;\\n  box-sizing: border-box;\\n  height: var(--dial-timeline-header-h);\\n  padding: 4px 0 0;\\n  margin: 0;\\n  background: var(--dial-glass-bg);\\n  backdrop-filter: blur(var(--dial-backdrop-blur));\\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\\n}\\n\\n.dialkit-timeline-header[data-open] {\\n  grid-template-columns: minmax(0, 1fr) auto;\\n  gap: 12px;\\n}\\n\\n.dialkit-timeline-header:not([data-open]) {\\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr) auto;\\n  gap: 0;\\n}\\n\\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-identity {\\n  width: var(--dial-timeline-label-w);\\n  box-sizing: border-box;\\n  padding-right: 10px;\\n  overflow: hidden;\\n}\\n\\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-title {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n}\\n\\n.dialkit-timeline-header:not([data-open]) .dialkit-timeline-overview {\\n  margin-right: 12px;\\n}\\n\\n.dialkit-timeline-identity {\\n  min-width: 0;\\n  display: flex;\\n  align-items: center;\\n  gap: 10px;\\n}\\n\\n.dialkit-timeline-title {\\n  display: block;\\n  min-width: 0;\\n  font-size: 15px;\\n  font-weight: 600;\\n  color: var(--dial-text-root);\\n  letter-spacing: -0.01em;\\n  white-space: nowrap;\\n}\\n\\n.dialkit-timeline-header[data-open] .dialkit-timeline-identity {\\n  width: 100%;\\n  overflow: hidden;\\n}\\n\\n.dialkit-timeline-header[data-open] .dialkit-timeline-title {\\n  display: inline-block;\\n  flex: 0 1 auto;\\n  width: fit-content;\\n  max-width: 100%;\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n}\\n\\n.dialkit-timeline-time {\\n  font-family: 'Geist Mono', ui-monospace, monospace;\\n  font-size: 13px;\\n  font-weight: 500;\\n  font-variant-numeric: tabular-nums;\\n  color: var(--dial-text-label);\\n  white-space: nowrap;\\n}\\n\\n.dialkit-timeline-overview {\\n  position: relative;\\n  min-width: 60px;\\n  height: 12px;\\n  border-radius: 999px;\\n  background: var(--dial-surface-subtle);\\n  overflow: hidden;\\n  cursor: col-resize;\\n  touch-action: none;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n.dialkit-timeline-overview-viewport {\\n  position: absolute;\\n  inset-block: 0;\\n  border-radius: inherit;\\n  pointer-events: none;\\n}\\n\\n.dialkit-timeline-overview-viewport[data-zoomed] {\\n  background: color-mix(in srgb, var(--dial-text-tertiary) 18%, transparent);\\n  box-shadow: inset 0 0 0 1px var(--dial-border);\\n}\\n\\n.dialkit-timeline-overview-progress {\\n  position: absolute;\\n  inset: 0 auto 0 0;\\n  border-radius: 999px 0 0 999px;\\n  background: var(--dial-text-tertiary);\\n  opacity: 0.35;\\n  pointer-events: none;\\n}\\n\\n.dialkit-timeline-overview-playhead {\\n  position: absolute;\\n  top: 0;\\n  bottom: 0;\\n  width: 2px;\\n  border-radius: 2px;\\n  background: var(--dial-text-root);\\n  transform: translateX(-1px);\\n  pointer-events: none;\\n}\\n\\n.dialkit-timeline-actions {\\n  display: flex;\\n  align-items: center;\\n  gap: 6px;\\n}\\n\\n.dialkit-timeline-header[data-open] .dialkit-timeline-actions {\\n  width: auto;\\n  box-sizing: border-box;\\n  justify-content: flex-end;\\n  padding-left: 0;\\n}\\n\\n.dialkit-timeline-actions .dialkit-preset-manager {\\n  flex: 0 0 120px;\\n  width: 120px;\\n}\\n\\n.dialkit-timeline-chevron {\\n  background: none;\\n  border: none;\\n  width: 20px;\\n  height: var(--dial-row-height);\\n  padding: 2px;\\n  cursor: pointer;\\n  color: var(--dial-text-label);\\n  opacity: 0.6;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  transition: opacity 0.15s;\\n}\\n\\n.dialkit-timeline-chevron:hover {\\n  opacity: 1;\\n}\\n\\n.dialkit-timeline-chevron svg {\\n  width: 16px;\\n  height: 16px;\\n  transition: transform 0.18s ease;\\n}\\n\\n.dialkit-timeline-chevron[data-open=\\\"true\\\"] svg {\\n  transform: rotate(180deg);\\n}\\n\\n.dialkit-timeline-body {\\n  margin-top: 0;\\n  overflow: visible;\\n}\\n\\n.dialkit-timeline-scroll-row {\\n  position: sticky;\\n  bottom: -10px;\\n  z-index: 6;\\n  display: grid;\\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr);\\n  margin-top: 6px;\\n  margin-bottom: -10px;\\n  padding: 4px 0 10px;\\n  background: var(--dial-glass-bg);\\n  backdrop-filter: blur(var(--dial-backdrop-blur));\\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\\n}\\n\\n.dialkit-timeline-horizontal-scroll {\\n  min-width: 0;\\n  height: 10px;\\n  overflow-x: auto;\\n  overflow-y: hidden;\\n  scrollbar-width: thin;\\n  scrollbar-color: var(--dial-text-tertiary) transparent;\\n  overscroll-behavior-x: contain;\\n}\\n\\n.dialkit-timeline-horizontal-scroll > div {\\n  height: 1px;\\n}\\n\\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar {\\n  height: 8px;\\n}\\n\\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar-track {\\n  background: transparent;\\n}\\n\\n.dialkit-timeline-horizontal-scroll::-webkit-scrollbar-thumb {\\n  border-radius: 999px;\\n  background: var(--dial-text-tertiary);\\n}\\n\\n.dialkit-timeline-grid {\\n  position: relative;\\n  display: flex;\\n  flex-direction: column;\\n  gap: 6px;\\n}\\n\\n.dialkit-timeline-row {\\n  display: grid;\\n  grid-template-columns: var(--dial-timeline-label-w) minmax(0, 1fr);\\n  align-items: stretch;\\n}\\n\\n.dialkit-timeline-label {\\n  flex: 0 0 var(--dial-timeline-label-w);\\n  box-sizing: border-box; /* indent padding must not widen the column — every lane starts at the same x */\\n  display: flex;\\n  align-items: center;\\n  gap: 4px;\\n  font-size: 13px;\\n  font-weight: 500;\\n  color: var(--dial-text-label);\\n  padding-right: 10px;\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n.dialkit-timeline-ruler {\\n  position: relative;\\n  min-width: 0;\\n  height: 28px;\\n  cursor: col-resize;\\n  touch-action: none;\\n  overflow: visible;\\n  user-select: none;\\n  -webkit-user-select: none;\\n  z-index: 5;\\n}\\n\\n.dialkit-timeline-ruler-row {\\n  position: sticky;\\n  top: var(--dial-timeline-header-h);\\n  z-index: 6;\\n  height: 28px;\\n  background: var(--dial-glass-bg);\\n  backdrop-filter: blur(var(--dial-backdrop-blur));\\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\\n}\\n\\n.dialkit-timeline-tick {\\n  position: absolute;\\n  top: 50%;\\n  width: 1px;\\n  height: 100%;\\n  background: var(--dial-text-tertiary);\\n  transform: translateY(-50%);\\n  pointer-events: none;\\n}\\n\\n.dialkit-timeline-tick-medium {\\n  height: 16px;\\n  background: var(--dial-border-hover);\\n}\\n\\n.dialkit-timeline-tick-fine {\\n  height: 8px;\\n  background: var(--dial-border);\\n}\\n\\n.dialkit-timeline-tick-label {\\n  position: absolute;\\n  top: 50%;\\n  left: 4px;\\n  display: flex;\\n  align-items: center;\\n  height: 18px;\\n  transform: translateY(-50%);\\n  font-family: 'Geist Mono', ui-monospace, monospace;\\n  font-size: 9.5px;\\n  line-height: 18px;\\n  font-variant-numeric: tabular-nums;\\n  color: var(--dial-text-tertiary);\\n  white-space: nowrap;\\n}\\n\\n.dialkit-timeline-row {\\n  height: 28px;\\n}\\n\\n/* ── Layer groups ── */\\n\\n.dialkit-timeline-group-row {\\n  height: 22px;\\n}\\n\\n.dialkit-timeline-group-row .dialkit-timeline-label {\\n  gap: 4px;\\n  font-weight: 600;\\n  color: var(--dial-text-root);\\n}\\n\\n.dialkit-timeline-group-row .dialkit-timeline-lane {\\n  background: none;\\n}\\n\\n.dialkit-timeline-group-toggle {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  background: none;\\n  border: none;\\n  padding: 0;\\n  margin-left: -2px;\\n  cursor: pointer;\\n  color: var(--dial-text-tertiary);\\n}\\n\\n.dialkit-timeline-group-toggle svg {\\n  width: 10px;\\n  height: 10px;\\n  transform: rotate(-90deg);\\n  transition: transform 0.15s ease;\\n}\\n\\n.dialkit-timeline-group-toggle[data-open=\\\"true\\\"] svg {\\n  transform: rotate(0deg);\\n}\\n\\n.dialkit-timeline-row[data-grouped] .dialkit-timeline-label {\\n  padding-left: 14px;\\n}\\n\\n.dialkit-timeline-lane {\\n  position: relative;\\n  flex: 1;\\n  background: var(--dial-surface-subtle);\\n  border-radius: 8px;\\n  overflow: hidden;\\n}\\n\\n.dialkit-timeline-clip {\\n  position: absolute;\\n  top: 3px;\\n  bottom: 3px;\\n  border-radius: 6px;\\n  display: flex;\\n  align-items: center;\\n  justify-content: flex-end;\\n  padding: 0 9px;\\n  cursor: grab;\\n  user-select: none;\\n  -webkit-user-select: none;\\n  touch-action: none;\\n  box-sizing: border-box;\\n  overflow: hidden;\\n  z-index: 1;\\n  box-shadow: inset 0 0 0 999px var(--dial-timeline-clip-overlay);\\n}\\n\\n.dialkit-timeline-clip-ghost {\\n  position: absolute;\\n  top: 4px;\\n  bottom: 4px;\\n  display: flex;\\n  border-radius: 5px;\\n  box-sizing: border-box;\\n  overflow: hidden;\\n  opacity: 0.18;\\n  pointer-events: none;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n.dialkit-timeline-clip-ghost-segment {\\n  height: 100%;\\n  flex-shrink: 0;\\n  box-sizing: border-box;\\n}\\n\\n.dialkit-timeline-clip-ghost-segment + .dialkit-timeline-clip-ghost-segment {\\n  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.5);\\n}\\n\\n.dialkit-timeline-loop-infinity {\\n  position: absolute;\\n  top: 50%;\\n  right: 7px;\\n  z-index: 2;\\n  color: var(--dial-text-tertiary);\\n  font-family: 'Geist Mono', ui-monospace, monospace;\\n  font-size: 13px;\\n  font-weight: 600;\\n  line-height: 1;\\n  transform: translateY(-50%);\\n  pointer-events: none;\\n  user-select: none;\\n  -webkit-user-select: none;\\n}\\n\\n.dialkit-timeline-clip[data-dragging] {\\n  cursor: grabbing;\\n}\\n\\n.dialkit-timeline-clip[data-selected] {\\n  box-shadow:\\n    0 0 0 2px var(--dial-text-root),\\n    inset 0 0 0 999px var(--dial-timeline-clip-overlay);\\n}\\n\\n.dialkit-timeline-clip-duration {\\n  font-family: 'Geist Mono', ui-monospace, monospace;\\n  font-size: 9.5px;\\n  font-variant-numeric: tabular-nums;\\n  color: rgba(0, 0, 0, 0.55);\\n  white-space: nowrap;\\n  pointer-events: none;\\n}\\n\\n/* ── Sequence segments ──\\n   A steps clip is one bar sliced into legs; boundaries between legs are\\n   drag handles that retime the leg to their left. */\\n\\n.dialkit-timeline-clip[data-steps] {\\n  padding: 0;\\n  justify-content: flex-start;\\n}\\n\\n.dialkit-timeline-clip-segment {\\n  position: relative;\\n  height: 100%;\\n  flex-shrink: 0;\\n  display: flex;\\n  align-items: center;\\n  justify-content: flex-end;\\n  padding: 0 8px;\\n  box-sizing: border-box;\\n  overflow: hidden;\\n}\\n\\n.dialkit-timeline-clip-segment + .dialkit-timeline-clip-segment {\\n  box-shadow: inset 1.5px 0 0 rgba(0, 0, 0, 0.25);\\n}\\n\\n.dialkit-timeline-clip-segment:hover {\\n  background: rgba(0, 0, 0, 0.06);\\n}\\n\\n.dialkit-timeline-clip-segment[data-selected] {\\n  background: rgba(0, 0, 0, 0.12);\\n}\\n\\n/* ── Property tracks ──\\n   A props clip's row is a read-only composite — click to expand. Each\\n   property expands into a full track row: a complete clip bar whose\\n   position is the track's delay. */\\n\\n.dialkit-timeline-clip[data-composite] {\\n  cursor: pointer;\\n}\\n\\n.dialkit-timeline-track-row .dialkit-timeline-label {\\n  font-size: 13px;\\n  color: var(--dial-text-tertiary);\\n  padding-left: 26px;\\n}\\n\\n.dialkit-timeline-track-row[data-grouped] .dialkit-timeline-label {\\n  padding-left: 32px;\\n}\\n\\n.dialkit-timeline-clip-handle {\\n  position: absolute;\\n  top: 0;\\n  bottom: 0;\\n  width: 8px;\\n  cursor: ew-resize;\\n}\\n\\n.dialkit-timeline-clip-handle[data-edge=\\\"start\\\"] {\\n  left: 0;\\n}\\n\\n.dialkit-timeline-clip-handle[data-edge=\\\"end\\\"] {\\n  right: 0;\\n}\\n\\n.dialkit-timeline-playhead-control {\\n  position: absolute;\\n  top: 0;\\n  bottom: 0;\\n  width: 12px;\\n  margin-left: -6px;\\n  cursor: ew-resize;\\n  touch-action: none;\\n}\\n\\n.dialkit-timeline-playhead-anchor {\\n  position: sticky;\\n  top: calc(var(--dial-timeline-header-h) + 14px);\\n  z-index: 8;\\n  width: 0;\\n  height: 0;\\n  margin-left: 6px;\\n}\\n\\n.dialkit-timeline-playhead-anchor::before {\\n  content: '';\\n  position: absolute;\\n  top: 0;\\n  left: -1px;\\n  width: 2px;\\n  height: 15px;\\n  background: var(--dial-text-root);\\n  pointer-events: none;\\n}\\n\\n.dialkit-timeline-playhead-flag {\\n  position: absolute;\\n  top: 0;\\n  left: calc(var(--dial-timeline-playhead-flag-offset, 0px) - 26px);\\n  z-index: 1;\\n  width: 52px;\\n  height: 18px;\\n  padding: 0 7px;\\n  box-sizing: border-box;\\n  border: 1px solid rgba(255, 255, 255, 0.75);\\n  border-radius: 6px;\\n  background: #f3f3f3;\\n  color: #414141;\\n  font-family: 'Geist Mono', ui-monospace, monospace;\\n  font-size: 9.5px;\\n  font-weight: 600;\\n  font-variant-numeric: tabular-nums;\\n  font-feature-settings: 'tnum' 1;\\n  line-height: 16px;\\n  text-align: center;\\n  white-space: nowrap;\\n  transform: translateY(-50%);\\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\\n  transition: top 0.12s ease;\\n}\\n\\n.dialkit-timeline-playhead-stem {\\n  position: absolute;\\n  top: 27px;\\n  bottom: 0;\\n  left: 5px;\\n  z-index: 5;\\n  width: 2px;\\n  background: var(--dial-text-root);\\n  pointer-events: none;\\n}\\n\\n/* ── Timeline clip popover ── */\\n.dialkit-timeline-popover {\\n  position: fixed;\\n  z-index: 10000;\\n  background: var(--dial-glass-bg);\\n  border: 1px solid var(--dial-border);\\n  border-radius: 14px;\\n  backdrop-filter: blur(var(--dial-backdrop-blur));\\n  -webkit-backdrop-filter: blur(var(--dial-backdrop-blur));\\n  box-shadow: var(--dial-shadow);\\n  padding: 10px 12px;\\n  box-sizing: border-box;\\n  max-height: 60vh;\\n  overflow-y: auto;\\n  scrollbar-width: none;\\n  -ms-overflow-style: none;\\n}\\n\\n.dialkit-timeline-popover::-webkit-scrollbar {\\n  display: none;\\n}\\n\\n.dialkit-timeline-popover-header {\\n  display: flex;\\n  align-items: center;\\n  gap: 8px;\\n  padding: 2px 2px 8px;\\n  margin-bottom: 6px;\\n  border-bottom: 1px solid var(--dial-border);\\n}\\n\\n.dialkit-timeline-popover-title {\\n  font-size: 15px;\\n  font-weight: 600;\\n  color: var(--dial-text-root);\\n  letter-spacing: -0.01em;\\n}\\n\\n.dialkit-timeline-popover-close {\\n  width: 24px;\\n  height: 24px;\\n  margin-left: auto;\\n  padding: 5px;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  border: none;\\n  border-radius: 6px;\\n  background: none;\\n  color: var(--dial-text-tertiary);\\n  cursor: pointer;\\n}\\n\\n.dialkit-timeline-popover-close:hover {\\n  color: var(--dial-text-root);\\n  background: var(--dial-surface-hover);\\n}\\n\\n.dialkit-timeline-popover-close svg {\\n  width: 14px;\\n  height: 14px;\\n}\\n\\n.dialkit-timeline-popover-body {\\n  display: flex;\\n  flex-direction: column;\\n  gap: 6px;\\n}\\n\\n.dialkit-timeline-popover-body > .dialkit-folder:first-child {\\n  margin-top: 0;\\n  border-top: none;\\n}\\n\\n@media (max-width: 720px) {\\n  .dialkit-timeline-dock {\\n    padding: 0 10px 10px;\\n  }\\n\\n  .dialkit-timeline-header {\\n    grid-template-columns: auto minmax(40px, 1fr) auto;\\n    gap: 8px;\\n  }\\n\\n  .dialkit-timeline-section {\\n    --dial-timeline-label-w: 76px;\\n    --dial-timeline-actions-w: 270px;\\n  }\\n\\n  .dialkit-timeline-identity {\\n    overflow: hidden;\\n    gap: 7px;\\n  }\\n\\n  .dialkit-timeline-title {\\n    font-size: 13px;\\n    overflow: hidden;\\n    text-overflow: ellipsis;\\n  }\\n\\n  .dialkit-timeline-time {\\n    font-size: 11px;\\n  }\\n\\n  .dialkit-timeline-overview {\\n    height: 12px;\\n  }\\n\\n  .dialkit-timeline-actions {\\n    min-width: 0;\\n  }\\n\\n  .dialkit-timeline-actions .dialkit-preset-manager {\\n    flex-basis: 100px;\\n    width: 100px;\\n  }\\n\\n  .dialkit-timeline-chevron {\\n    width: 26px;\\n    height: 28px;\\n    justify-content: center;\\n    padding: 0;\\n  }\\n\\n  .dialkit-timeline-grid {\\n    min-width: 0;\\n  }\\n}\\n\\n/* Keyboard focus stays inside each control so scrolling never clips its edge. */\\n.dialkit-root :where(button, input, textarea, [tabindex]):focus {\\n  outline: none;\\n}\\n.dialkit-root :where(button, [role=\\\"slider\\\"], [role=\\\"button\\\"], .dialkit-color-plane, .dialkit-pad-surface):focus-visible {\\n  outline: 2px solid var(--dial-focus-ring);\\n  outline-offset: -2px;\\n}\\n.dialkit-folder-header-top[role=\\\"button\\\"] { border-radius: 5px; }\\n.dialkit-panel-inner[data-collapsed=\\\"true\\\"] .dialkit-folder-header-top { border-radius: 50%; }\\n.dialkit-slider:focus-visible .dialkit-slider-value,\\n.dialkit-slider:focus-within .dialkit-slider-value { color: var(--dial-text-focus); }\\n.dialkit-slider:focus-visible .dialkit-slider-fill { background: var(--dial-border-hover); }\\n.dialkit-select-option:focus-visible { background: var(--dial-surface-hover); color: var(--dial-text-focus); }\\n.dialkit-root :where(.dialkit-slider-input, .dialkit-color-value, .dialkit-preset-input):focus-visible {\\n  box-shadow: inset 0 -1px var(--dial-focus-ring);\\n}\\n.dialkit-color-css-input:focus-visible { outline: none; }\\n.dialkit-shortcuts-dropdown { margin: 0; inset: auto; overflow-y: auto; }\\n@media (forced-colors: active) {\\n  .dialkit-root { --dial-focus-ring: Highlight; }\\n}\\n\""],"x_google_ignoreList":[0],"mappings":";AAAA,IAAA,iBAAe"}

package/dist/packages/react/package.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"package.js","names":[],"sources":["../../../package.json"],"sourcesContent":[""],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cairntale/chimeling-react",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "private": false,
   "description": "Chimeling React library",
   "homepage": "https://chimeling.app/",
@@ -26,26 +26,37 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "date-fns": "^4.4.0",
+    "dialkit": "^2.0.0",
+    "es-toolkit": "^1.52.0",
     "swr": "^2.3.6",
     "ufo": "^1.6.4",
+    "zustand": "^5.0.15",
     "@cairntale/chimeling-js": "1.0.0-alpha.1"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.5",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "motion": "^13.2.0",
     "publint": "^0.3.24",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsdown": "^0.22.14",
-    "typescript": "6.0.3"
+    "typescript": "6.0.3",
+    "unplugin-raw": "^0.8.0"
   },
   "peerDependencies": {
+    "@emotion/cache": "^11.0.0",
+    "@emotion/react": "^11.0.0",
+    "motion": "^13.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "scripts": {
     "build": "tsdown",
+    "dev": "tsdown --watch",
     "typecheck": "tsc"
   }
 }

package/dist/lib/presence-key.js

@@ -1,14 +0,0 @@
-import { PACKAGE_NAME } from "./config.js";
-//#region src/lib/presence-key.ts
-function resolvedUserPresenceKey(userId, baseUrl) {
-	return [
-		PACKAGE_NAME,
-		"resolved-user-presence",
-		baseUrl,
-		userId
-	];
-}
-//#endregion
-export { resolvedUserPresenceKey };
-
-//# sourceMappingURL=presence-key.js.map

package/dist/lib/presence-key.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"presence-key.js","names":[],"sources":["../../src/lib/presence-key.ts"],"sourcesContent":["import { PACKAGE_NAME } from './config'\n\nexport function resolvedUserPresenceKey(userId: string, baseUrl: string) {\n  return [PACKAGE_NAME, 'resolved-user-presence', baseUrl, userId] as const\n}\n"],"mappings":";;AAEA,SAAgB,wBAAwB,QAAgB,SAAiB;CACvE,OAAO;EAAC;EAAc;EAA0B;EAAS;CAAM;AACjE"}

package/dist/package.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"package.js","names":[],"sources":["../package.json"],"sourcesContent":[""],"mappings":""}