@tanstack/devtools 0.5.1 → 0.6.0

package/dist/esm/components/main-panel.js

@@ -1,5 +1,6 @@
-import { template, setAttribute, insert, effect, className } from "solid-js/web";
+import { template, setAttribute, insert, createComponent, effect, className } from "solid-js/web";
 import clsx from "clsx";
+import { DrawClientProvider } from "../context/draw-context.js";
 import { useHeight, useDevtoolsSettings } from "../context/use-devtools-context.js";
 import { useStyles } from "../styles/use-styles.js";
 import { TANSTACK_DEVTOOLS } from "../utils/storage.js";
@@ -17,7 +18,12 @@ const MainPanel = (props) => {
   return (() => {
     var _el$ = _tmpl$();
     setAttribute(_el$, "id", TANSTACK_DEVTOOLS);
-    insert(_el$, () => props.children);
+    insert(_el$, createComponent(DrawClientProvider, {
+      animationMs: 400,
+      get children() {
+        return props.children;
+      }
+    }));
     effect((_p$) => {
       var _v$ = pip().pipWindow ? "100vh" : height() + "px", _v$2 = clsx(styles().devtoolsPanelContainer(settings().panelLocation, Boolean(pip().pipWindow)), styles().devtoolsPanelContainerAnimation(props.isOpen(), height()), styles().devtoolsPanelContainerVisibility(props.isOpen()), styles().devtoolsPanelContainerResizing(props.isResizing));
       _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("height", _v$) : _el$.style.removeProperty("height"));

package/dist/esm/components/main-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport { usePiPWindow } from '../context/pip-context'\nimport type { Accessor, JSX } from 'solid-js'\n\nexport const MainPanel = (props: {\n  isOpen: Accessor<boolean>\n  children: JSX.Element\n  isResizing: Accessor<boolean>\n}) => {\n  const styles = useStyles()\n  const { height } = useHeight()\n  const { settings } = useDevtoolsSettings()\n  const pip = usePiPWindow()\n  return (\n    <div\n      id={TANSTACK_DEVTOOLS}\n      style={{\n        height: pip().pipWindow ? '100vh' : height() + 'px',\n      }}\n      class={clsx(\n        styles().devtoolsPanelContainer(\n          settings().panelLocation,\n          Boolean(pip().pipWindow),\n        ),\n        styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),\n        styles().devtoolsPanelContainerVisibility(props.isOpen()),\n        styles().devtoolsPanelContainerResizing(props.isResizing),\n      )}\n    >\n      {props.children}\n    </div>\n  )\n}\n"],"names":["MainPanel","props","styles","useStyles","height","useHeight","settings","useDevtoolsSettings","pip","usePiPWindow","_el$","_tmpl$","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","children","_$effect","_p$","_v$","pipWindow","_v$2","clsx","devtoolsPanelContainer","panelLocation","Boolean","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;;AAOO,MAAMA,YAAYA,CAACC,UAIpB;AACJ,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,UAAAA;AACnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,QAAMC,MAAMC,aAAAA;AACZ,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,iBAAAF,MAAA,MAEQG,iBAAiB;AAAAC,WAAAJ,MAAA,MAcpBT,MAAMc,QAAQ;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAZLV,MAAMW,YAAY,UAAUf,OAAAA,IAAW,MAAIgB,OAE9CC,KACLnB,OAAAA,EAASoB,uBACPhB,SAAAA,EAAWiB,eACXC,QAAQhB,IAAAA,EAAMW,SAAS,CACzB,GACAjB,OAAAA,EAASuB,gCAAgCxB,MAAMyB,OAAAA,GAAUtB,OAAAA,CAAQ,GACjEF,OAAAA,EAASyB,iCAAiC1B,MAAMyB,OAAAA,CAAQ,GACxDxB,OAAAA,EAAS0B,+BAA+B3B,MAAM4B,UAAU,CAC1D;AAACX,cAAAD,IAAAa,OAAAb,IAAAa,IAAAZ,QAAA,OAAAR,KAAAqB,MAAAC,YAAA,UAAAd,GAAA,IAAAR,KAAAqB,MAAAE,eAAA,QAAA;AAAAb,eAAAH,IAAAiB,KAAAC,UAAAzB,MAAAO,IAAAiB,IAAAd,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAa,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAA1B;AAAAA,EAAA,GAAA;AAKP;"}
+{"version":3,"file":"main-panel.js","sources":["../../../src/components/main-panel.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { DrawClientProvider } from '../context/draw-context'\nimport { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'\nimport { useStyles } from '../styles/use-styles'\nimport { TANSTACK_DEVTOOLS } from '../utils/storage'\nimport { usePiPWindow } from '../context/pip-context'\n\nimport type { Accessor, JSX } from 'solid-js'\n\nexport const MainPanel = (props: {\n  isOpen: Accessor<boolean>\n  children: JSX.Element\n  isResizing: Accessor<boolean>\n}) => {\n  const styles = useStyles()\n  const { height } = useHeight()\n  const { settings } = useDevtoolsSettings()\n  const pip = usePiPWindow()\n  return (\n    <div\n      id={TANSTACK_DEVTOOLS}\n      style={{\n        height: pip().pipWindow ? '100vh' : height() + 'px',\n      }}\n      class={clsx(\n        styles().devtoolsPanelContainer(\n          settings().panelLocation,\n          Boolean(pip().pipWindow),\n        ),\n        styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),\n        styles().devtoolsPanelContainerVisibility(props.isOpen()),\n        styles().devtoolsPanelContainerResizing(props.isResizing),\n      )}\n    >\n      <DrawClientProvider animationMs={400}>\n        {props.children}\n      </DrawClientProvider>\n    </div>\n  )\n}\n"],"names":["MainPanel","props","styles","useStyles","height","useHeight","settings","useDevtoolsSettings","pip","usePiPWindow","_el$","_tmpl$","_$setAttribute","TANSTACK_DEVTOOLS","_$insert","_$createComponent","DrawClientProvider","animationMs","children","_$effect","_p$","_v$","pipWindow","_v$2","clsx","devtoolsPanelContainer","panelLocation","Boolean","devtoolsPanelContainerAnimation","isOpen","devtoolsPanelContainerVisibility","devtoolsPanelContainerResizing","isResizing","e","style","setProperty","removeProperty","t","_$className","undefined"],"mappings":";;;;;;;;AASO,MAAMA,YAAYA,CAACC,UAIpB;AACJ,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAWC,UAAAA;AACnB,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAaC,oBAAAA;AACrB,QAAMC,MAAMC,aAAAA;AACZ,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,iBAAAF,MAAA,MAEQG,iBAAiB;AAAAC,WAAAJ,MAAAK,gBAcpBC,oBAAkB;AAAA,MAACC,aAAa;AAAA,MAAG,IAAAC,WAAA;AAAA,eACjCjB,MAAMiB;AAAAA,MAAQ;AAAA,IAAA,CAAA,CAAA;AAAAC,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAbPb,MAAMc,YAAY,UAAUlB,OAAAA,IAAW,MAAImB,OAE9CC,KACLtB,OAAAA,EAASuB,uBACPnB,SAAAA,EAAWoB,eACXC,QAAQnB,IAAAA,EAAMc,SAAS,CACzB,GACApB,OAAAA,EAAS0B,gCAAgC3B,MAAM4B,OAAAA,GAAUzB,OAAAA,CAAQ,GACjEF,OAAAA,EAAS4B,iCAAiC7B,MAAM4B,OAAAA,CAAQ,GACxD3B,OAAAA,EAAS6B,+BAA+B9B,MAAM+B,UAAU,CAC1D;AAACX,cAAAD,IAAAa,OAAAb,IAAAa,IAAAZ,QAAA,OAAAX,KAAAwB,MAAAC,YAAA,UAAAd,GAAA,IAAAX,KAAAwB,MAAAE,eAAA,QAAA;AAAAb,eAAAH,IAAAiB,KAAAC,UAAA5B,MAAAU,IAAAiB,IAAAd,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAa,GAAAM;AAAAA,MAAAF,GAAAE;AAAAA,IAAAA,CAAA;AAAA,WAAA7B;AAAAA,EAAA,GAAA;AAOP;"}

package/dist/esm/components/tabs.js

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { For } from "solid-js";
 import { useStyles } from "../styles/use-styles.js";
 import { useDevtoolsState } from "../context/use-devtools-context.js";
+import { useDrawContext } from "../context/draw-context.js";
 import { tabs } from "../tabs/index.js";
 import { usePiPWindow } from "../context/pip-context.js";
 var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$3 = /* @__PURE__ */ template(`<div><button type=button><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="lucide lucide-picture-in-picture-icon lucide-picture-in-picture"><path d="M2 10h6V4"></path><path d="m2 4 6 6"></path><path d="M21 10V7a2 2 0 0 0-2-2h-7"></path><path d="M3 14v2a2 2 0 0 0 2 2h3"></path><rect x=12 y=14 width=10 height=7 rx=1></rect></svg></button><button type=button><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M18 6 6 18"></path><path d="m6 6 12 12">`);
@@ -16,12 +17,21 @@ const Tabs = (props) => {
   const handleDetachment = () => {
     pipWindow().requestPipWindow(`width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`);
   };
+  const {
+    hoverUtils
+  } = useDrawContext();
   return (() => {
     var _el$ = _tmpl$();
     insert(_el$, createComponent(For, {
       each: tabs,
       children: (tab) => (() => {
         var _el$2 = _tmpl$2();
+        _el$2.addEventListener("mouseleave", () => {
+          if (tab.id === "plugins") hoverUtils.leave();
+        });
+        _el$2.addEventListener("mouseenter", () => {
+          if (tab.id === "plugins") hoverUtils.enter();
+        });
         _el$2.$$click = () => setState({
           activeTab: tab.id
         });

package/dist/esm/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { tabs } from '../tabs'\nimport { usePiPWindow } from '../context/pip-context'\n\ninterface TabsProps {\n  toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n  const styles = useStyles()\n  const { state, setState } = useDevtoolsState()\n  const pipWindow = usePiPWindow()\n  const handleDetachment = () => {\n    pipWindow().requestPipWindow(\n      `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,\n    )\n  }\n  return (\n    <div class={styles().tabContainer}>\n      <For each={tabs}>\n        {(tab) => (\n          <button\n            type=\"button\"\n            onClick={() => setState({ activeTab: tab.id })}\n            class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n          >\n            {tab.icon}\n          </button>\n        )}\n      </For>\n      {pipWindow().pipWindow !== null ? null : (\n        <div\n          style={{\n            'margin-top': 'auto',\n          }}\n        >\n          <button\n            type=\"button\"\n            class={clsx(styles().tab, 'detach')}\n            onClick={handleDetachment}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              class=\"lucide lucide-picture-in-picture-icon lucide-picture-in-picture\"\n            >\n              <path d=\"M2 10h6V4\" />\n              <path d=\"m2 4 6 6\" />\n              <path d=\"M21 10V7a2 2 0 0 0-2-2h-7\" />\n              <path d=\"M3 14v2a2 2 0 0 0 2 2h3\" />\n              <rect x=\"12\" y=\"14\" width=\"10\" height=\"7\" rx=\"1\" />\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            class={clsx(styles().tab, 'close')}\n            onClick={() => props.toggleOpen()}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","pipWindow","usePiPWindow","handleDetachment","requestPipWindow","window","innerWidth","height","screen","screenLeft","_el$","_tmpl$","_$insert","_$createComponent","For","each","tabs","children","tab","_el$2","_tmpl$2","$$click","activeTab","id","icon","_$effect","_$className","clsx","active","_c$","_$memo","_el$3","_tmpl$3","_el$4","firstChild","_el$5","nextSibling","style","setProperty","toggleOpen","_p$","_v$","_v$2","e","t","undefined","tabContainer","_$delegateEvents"],"mappings":";;;;;;;;AAWO,MAAMA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,iBAAAA;AAC5B,QAAMC,YAAYC,aAAAA;AAClB,QAAMC,mBAAmBA,MAAM;AAC7BF,cAAAA,EAAYG,iBACV,SAASC,OAAOC,UAAU,WAAWR,MAAAA,EAAQS,MAAM,QAAQF,OAAOG,OAAOD,MAAM,SAASF,OAAOI,UAAU,GAC3G;AAAA,EACF;AACA,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,UAGQ,MAAMtB,SAAS;AAAA,UAAEuB,WAAWJ,IAAIK;AAAAA,QAAAA,CAAI;AAACX,eAAAO,OAAA,MAG7CD,IAAIM,IAAI;AAAAC,eAAA,MAAAC,UAAAP,OAFFQ,KAAK/B,OAAAA,EAASsB,KAAK;AAAA,UAAEU,QAAQ9B,MAAAA,EAAQwB,cAAcJ,IAAIK;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAJ;AAAAA,MAAA,GAAA;AAAA,IAAA,CAItE,GAAA,IAAA;AAAAP,WAAAF,OAAA,MAAA;AAAA,UAAAmB,MAAAC,KAAA,MAEF7B,UAAAA,EAAYA,cAAc,IAAI;AAAA,aAAA,MAA9B4B,IAAAA,IAAiC,QAAI,MAAA;AAAA,YAAAE,QAAAC,QAAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAL,cAAAM,MAAAC,YAAA,cAAA,MAAA;AAAAL,cAAAZ,UASvBlB;AAAgBgC,cAAAd,UAwBhB,MAAM1B,MAAM4C,WAAAA;AAAYd,eAAAe,CAAAA,QAAA;AAAA,cAAAC,MAzB1Bd,KAAK/B,OAAAA,EAASsB,KAAK,QAAQ,GAACwB,OAwB5Bf,KAAK/B,SAASsB,KAAK,OAAO;AAACuB,kBAAAD,IAAAG,KAAAjB,UAAAO,OAAAO,IAAAG,IAAAF,GAAA;AAAAC,mBAAAF,IAAAI,KAAAlB,UAAAS,OAAAK,IAAAI,IAAAF,IAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAE;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAA,eAAAd;AAAAA,MAAA,GAAA;AAAA,IAmBvC,GAAA,GAAA,IAAA;AAAAN,WAAA,MAAAC,UAAAhB,MA/DSd,OAAAA,EAASkD,YAAY,CAAA;AAAA,WAAApC;AAAAA,EAAA,GAAA;AAkErC;AAACqC,eAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { useDrawContext } from '../context/draw-context'\nimport { tabs } from '../tabs'\nimport { usePiPWindow } from '../context/pip-context'\n\ninterface TabsProps {\n  toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n  const styles = useStyles()\n  const { state, setState } = useDevtoolsState()\n  const pipWindow = usePiPWindow()\n  const handleDetachment = () => {\n    pipWindow().requestPipWindow(\n      `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,\n    )\n  }\n  const { hoverUtils } = useDrawContext()\n\n  return (\n    <div class={styles().tabContainer}>\n      <For each={tabs}>\n        {(tab) => (\n          <button\n            type=\"button\"\n            onClick={() => setState({ activeTab: tab.id })}\n            class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n            onMouseEnter={() => {\n              if (tab.id === 'plugins') hoverUtils.enter()\n            }}\n            onMouseLeave={() => {\n              if (tab.id === 'plugins') hoverUtils.leave()\n            }}\n          >\n            {tab.icon}\n          </button>\n        )}\n      </For>\n      {pipWindow().pipWindow !== null ? null : (\n        <div\n          style={{\n            'margin-top': 'auto',\n          }}\n        >\n          <button\n            type=\"button\"\n            class={clsx(styles().tab, 'detach')}\n            onClick={handleDetachment}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              class=\"lucide lucide-picture-in-picture-icon lucide-picture-in-picture\"\n            >\n              <path d=\"M2 10h6V4\" />\n              <path d=\"m2 4 6 6\" />\n              <path d=\"M21 10V7a2 2 0 0 0-2-2h-7\" />\n              <path d=\"M3 14v2a2 2 0 0 0 2 2h3\" />\n              <rect x=\"12\" y=\"14\" width=\"10\" height=\"7\" rx=\"1\" />\n            </svg>\n          </button>\n          <button\n            type=\"button\"\n            class={clsx(styles().tab, 'close')}\n            onClick={() => props.toggleOpen()}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M18 6 6 18\" />\n              <path d=\"m6 6 12 12\" />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","pipWindow","usePiPWindow","handleDetachment","requestPipWindow","window","innerWidth","height","screen","screenLeft","hoverUtils","useDrawContext","_el$","_tmpl$","_$insert","_$createComponent","For","each","tabs","children","tab","_el$2","_tmpl$2","addEventListener","id","leave","enter","$$click","activeTab","icon","_$effect","_$className","clsx","active","_c$","_$memo","_el$3","_tmpl$3","_el$4","firstChild","_el$5","nextSibling","style","setProperty","toggleOpen","_p$","_v$","_v$2","e","t","undefined","tabContainer","_$delegateEvents"],"mappings":";;;;;;;;;AAYO,MAAMA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,iBAAAA;AAC5B,QAAMC,YAAYC,aAAAA;AAClB,QAAMC,mBAAmBA,MAAM;AAC7BF,cAAAA,EAAYG,iBACV,SAASC,OAAOC,UAAU,WAAWR,MAAAA,EAAQS,MAAM,QAAQF,OAAOG,OAAOD,MAAM,SAASF,OAAOI,UAAU,GAC3G;AAAA,EACF;AACA,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAeC,eAAAA;AAEvB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,iBAAA,cAQa,MAAM;AAClB,cAAIH,IAAII,OAAO,UAAWd,YAAWe,MAAAA;AAAAA,QACvC,CAAC;AAAAJ,cAAAE,iBAAA,cALa,MAAM;AAClB,cAAIH,IAAII,OAAO,UAAWd,YAAWgB,MAAAA;AAAAA,QACvC,CAAC;AAAAL,cAAAM,UAJQ,MAAM5B,SAAS;AAAA,UAAE6B,WAAWR,IAAII;AAAAA,QAAAA,CAAI;AAACV,eAAAO,OAAA,MAS7CD,IAAIS,IAAI;AAAAC,eAAA,MAAAC,UAAAV,OARFW,KAAKpC,OAAAA,EAASwB,KAAK;AAAA,UAAEa,QAAQnC,MAAAA,EAAQ8B,cAAcR,IAAII;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAH;AAAAA,MAAA,GAAA;AAAA,IAAA,CAUtE,GAAA,IAAA;AAAAP,WAAAF,OAAA,MAAA;AAAA,UAAAsB,MAAAC,KAAA,MAEFlC,UAAAA,EAAYA,cAAc,IAAI;AAAA,aAAA,MAA9BiC,IAAAA,IAAiC,QAAI,MAAA;AAAA,YAAAE,QAAAC,QAAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAL,cAAAM,MAAAC,YAAA,cAAA,MAAA;AAAAL,cAAAX,UASvBxB;AAAgBqC,cAAAb,UAwBhB,MAAMhC,MAAMiD,WAAAA;AAAYd,eAAAe,CAAAA,QAAA;AAAA,cAAAC,MAzB1Bd,KAAKpC,OAAAA,EAASwB,KAAK,QAAQ,GAAC2B,OAwB5Bf,KAAKpC,SAASwB,KAAK,OAAO;AAAC0B,kBAAAD,IAAAG,KAAAjB,UAAAO,OAAAO,IAAAG,IAAAF,GAAA;AAAAC,mBAAAF,IAAAI,KAAAlB,UAAAS,OAAAK,IAAAI,IAAAF,IAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAE;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAA,eAAAd;AAAAA,MAAA,GAAA;AAAA,IAmBvC,GAAA,GAAA,IAAA;AAAAN,WAAA,MAAAC,UAAAnB,MArEShB,OAAAA,EAASuD,YAAY,CAAA;AAAA,WAAAvC;AAAAA,EAAA,GAAA;AAwErC;AAACwC,eAAA,CAAA,OAAA,CAAA;"}

package/dist/esm/context/draw-context.d.ts

@@ -0,0 +1,13 @@
+import { ParentComponent } from 'solid-js';
+export declare const DrawClientProvider: ParentComponent<{
+    animationMs: number;
+}>;
+export declare function useDrawContext(): {
+    expanded: import('solid-js').Accessor<boolean>;
+    setForceExpand: import('solid-js').Setter<boolean>;
+    hoverUtils: {
+        enter: () => void;
+        leave: () => void;
+    };
+    animationMs: number;
+};

package/dist/esm/context/draw-context.js

@@ -0,0 +1,55 @@
+import { createComponent } from "solid-js/web";
+import { createContext, useContext, createSignal, createMemo, onCleanup } from "solid-js";
+const useDraw = (props) => {
+  const [activeHover, setActiveHover] = createSignal(false);
+  const [forceExpand, setForceExpand] = createSignal(false);
+  const expanded = createMemo(() => activeHover() || forceExpand());
+  let hoverTimeout = null;
+  onCleanup(() => {
+    if (hoverTimeout) clearTimeout(hoverTimeout);
+  });
+  const hoverUtils = {
+    enter: () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = null;
+      }
+      setActiveHover(true);
+    },
+    leave: () => {
+      hoverTimeout = setTimeout(() => {
+        setActiveHover(false);
+      }, props.animationMs);
+    }
+  };
+  return {
+    expanded,
+    setForceExpand,
+    hoverUtils,
+    animationMs: props.animationMs
+  };
+};
+const DrawContext = createContext(void 0);
+const DrawClientProvider = (props) => {
+  const value = useDraw({
+    animationMs: props.animationMs
+  });
+  return createComponent(DrawContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+};
+function useDrawContext() {
+  const context = useContext(DrawContext);
+  if (context === void 0) {
+    throw new Error(`useDrawContext must be used within a DrawClientProvider`);
+  }
+  return context;
+}
+export {
+  DrawClientProvider,
+  useDrawContext
+};
+//# sourceMappingURL=draw-context.js.map

package/dist/esm/context/draw-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw-context.js","sources":["../../../src/context/draw-context.tsx"],"sourcesContent":["import {\n  createContext,\n  createMemo,\n  createSignal,\n  onCleanup,\n  useContext,\n} from 'solid-js'\nimport type { ParentComponent } from 'solid-js'\n\nconst useDraw = (props: { animationMs: number }) => {\n  const [activeHover, setActiveHover] = createSignal<boolean>(false)\n  const [forceExpand, setForceExpand] = createSignal<boolean>(false)\n\n  const expanded = createMemo(() => activeHover() || forceExpand())\n\n  let hoverTimeout: ReturnType<typeof setTimeout> | null = null\n  onCleanup(() => {\n    if (hoverTimeout) clearTimeout(hoverTimeout)\n  })\n\n  const hoverUtils = {\n    enter: () => {\n      if (hoverTimeout) {\n        clearTimeout(hoverTimeout)\n        hoverTimeout = null\n      }\n      setActiveHover(true)\n    },\n\n    leave: () => {\n      hoverTimeout = setTimeout(() => {\n        setActiveHover(false)\n      }, props.animationMs)\n    },\n  }\n\n  return {\n    expanded,\n    setForceExpand,\n    hoverUtils,\n    animationMs: props.animationMs,\n  }\n}\n\ntype ContextType = ReturnType<typeof useDraw>\n\nconst DrawContext = createContext<ContextType | undefined>(undefined)\n\nexport const DrawClientProvider: ParentComponent<{\n  animationMs: number\n}> = (props) => {\n  const value = useDraw({ animationMs: props.animationMs })\n\n  return (\n    <DrawContext.Provider value={value}>{props.children}</DrawContext.Provider>\n  )\n}\n\nexport function useDrawContext() {\n  const context = useContext(DrawContext)\n\n  if (context === undefined) {\n    throw new Error(`useDrawContext must be used within a DrawClientProvider`)\n  }\n\n  return context\n}\n"],"names":["useDraw","props","activeHover","setActiveHover","createSignal","forceExpand","setForceExpand","expanded","createMemo","hoverTimeout","onCleanup","hoverUtils","enter","clearTimeout","leave","setTimeout","animationMs","DrawContext","createContext","undefined","DrawClientProvider","value","_$createComponent","Provider","children","useDrawContext","context","useContext","Error"],"mappings":";;AASA,MAAMA,UAAUA,CAACC,UAAmC;AAClD,QAAM,CAACC,aAAaC,cAAc,IAAIC,aAAsB,KAAK;AACjE,QAAM,CAACC,aAAaC,cAAc,IAAIF,aAAsB,KAAK;AAEjE,QAAMG,WAAWC,WAAW,MAAMN,YAAAA,KAAiBG,aAAa;AAEhE,MAAII,eAAqD;AACzDC,YAAU,MAAM;AACd,QAAID,2BAA2BA,YAAY;AAAA,EAC7C,CAAC;AAED,QAAME,aAAa;AAAA,IACjBC,OAAOA,MAAM;AACX,UAAIH,cAAc;AAChBI,qBAAaJ,YAAY;AACzBA,uBAAe;AAAA,MACjB;AACAN,qBAAe,IAAI;AAAA,IACrB;AAAA,IAEAW,OAAOA,MAAM;AACXL,qBAAeM,WAAW,MAAM;AAC9BZ,uBAAe,KAAK;AAAA,MACtB,GAAGF,MAAMe,WAAW;AAAA,IACtB;AAAA,EAAA;AAGF,SAAO;AAAA,IACLT;AAAAA,IACAD;AAAAA,IACAK;AAAAA,IACAK,aAAaf,MAAMe;AAAAA,EAAAA;AAEvB;AAIA,MAAMC,cAAcC,cAAuCC,MAAS;AAE7D,MAAMC,qBAEPnB,CAAAA,UAAU;AACd,QAAMoB,QAAQrB,QAAQ;AAAA,IAAEgB,aAAaf,MAAMe;AAAAA,EAAAA,CAAa;AAExD,SAAAM,gBACGL,YAAYM,UAAQ;AAAA,IAACF;AAAAA,IAAY,IAAAG,WAAA;AAAA,aAAGvB,MAAMuB;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAEvD;AAEO,SAASC,iBAAiB;AAC/B,QAAMC,UAAUC,WAAWV,WAAW;AAEtC,MAAIS,YAAYP,QAAW;AACzB,UAAM,IAAIS,MAAM,yDAAyD;AAAA,EAC3E;AAEA,SAAOF;AACT;"}

package/dist/esm/context/use-devtools-context.js

@@ -1,5 +1,6 @@
-import { createMemo, useContext } from "solid-js";
+import { createMemo, useContext, createEffect } from "solid-js";
 import { DevtoolsContext } from "./devtools-context.js";
+import { useDrawContext } from "./draw-context.js";
 const useDevtoolsContext = () => {
   const context = useContext(DevtoolsContext);
   if (context === void 0) {
@@ -11,8 +12,16 @@ const useDevtoolsContext = () => {
 };
 const usePlugins = () => {
   const { store, setStore } = useDevtoolsContext();
+  const { setForceExpand } = useDrawContext();
   const plugins = createMemo(() => store.plugins);
   const activePlugin = createMemo(() => store.state.activePlugin);
+  createEffect(() => {
+    if (activePlugin() == null) {
+      setForceExpand(false);
+    } else {
+      setForceExpand(true);
+    }
+  });
   const setActivePlugin = (pluginId) => {
     setStore((prev) => ({
       ...prev,

package/dist/esm/context/use-devtools-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-devtools-context.js","sources":["../../../src/context/use-devtools-context.ts"],"sourcesContent":["import { createMemo, useContext } from 'solid-js'\nimport { DevtoolsContext } from './devtools-context.jsx'\n/* import type { DevtoolsPlugin } from './devtools-context' */\nimport type { DevtoolsStore } from './devtools-store.js'\n\n/**\n * Returns an object containing the current state and setState function of the ShellContext.\n * Throws an error if used outside of a ShellContextProvider.\n */\nconst useDevtoolsContext = () => {\n  const context = useContext(DevtoolsContext)\n  if (context === undefined) {\n    throw new Error(\n      'useDevtoolsShellContext must be used within a ShellContextProvider',\n    )\n  }\n  return context\n}\n\nexport const usePlugins = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const plugins = createMemo(() => store.plugins)\n  const activePlugin = createMemo(() => store.state.activePlugin)\n\n  const setActivePlugin = (pluginId: string) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        activePlugin: pluginId,\n      },\n    }))\n  }\n\n  return { plugins, setActivePlugin, activePlugin }\n}\n\nexport const useDevtoolsState = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const state = createMemo(() => store.state)\n  const setState = (newState: Partial<DevtoolsStore['state']>) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        ...newState,\n      },\n    }))\n  }\n  return { state, setState }\n}\n\nexport const useDevtoolsSettings = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const settings = createMemo(() => store.settings)\n\n  const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {\n    setStore((prev) => ({\n      ...prev,\n      settings: {\n        ...prev.settings,\n        ...newSettings,\n      },\n    }))\n  }\n\n  return { setSettings, settings }\n}\n\nexport const usePersistOpen = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const persistOpen = createMemo(() => state().persistOpen)\n\n  const setPersistOpen = (value: boolean) => {\n    setState({ persistOpen: value })\n  }\n\n  return { persistOpen, setPersistOpen }\n}\n\nexport const useHeight = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const height = createMemo(() => state().height)\n\n  const setHeight = (newHeight: number) => {\n    setState({ height: newHeight })\n  }\n\n  return { height, setHeight }\n}\n"],"names":[],"mappings":";;AASA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,UAAU,WAAW,MAAM,MAAM,OAAO;AAC9C,QAAM,eAAe,WAAW,MAAM,MAAM,MAAM,YAAY;AAE9D,QAAM,kBAAkB,CAAC,aAAqB;AAC5C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,SAAS,iBAAiB,aAAA;AACrC;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,QAAQ,WAAW,MAAM,MAAM,KAAK;AAC1C,QAAM,WAAW,CAAC,aAA8C;AAC9D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AACA,SAAO,EAAE,OAAO,SAAA;AAClB;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,WAAW,WAAW,MAAM,MAAM,QAAQ;AAEhD,QAAM,cAAc,CAAC,gBAAoD;AACvE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,aAAa,SAAA;AACxB;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,cAAc,WAAW,MAAM,MAAA,EAAQ,WAAW;AAExD,QAAM,iBAAiB,CAAC,UAAmB;AACzC,aAAS,EAAE,aAAa,OAAO;AAAA,EACjC;AAEA,SAAO,EAAE,aAAa,eAAA;AACxB;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,SAAS,WAAW,MAAM,MAAA,EAAQ,MAAM;AAE9C,QAAM,YAAY,CAAC,cAAsB;AACvC,aAAS,EAAE,QAAQ,WAAW;AAAA,EAChC;AAEA,SAAO,EAAE,QAAQ,UAAA;AACnB;"}
+{"version":3,"file":"use-devtools-context.js","sources":["../../../src/context/use-devtools-context.ts"],"sourcesContent":["import { createEffect, createMemo, useContext } from 'solid-js'\nimport { DevtoolsContext } from './devtools-context.jsx'\nimport { useDrawContext } from './draw-context.jsx'\n\nimport type { DevtoolsStore } from './devtools-store.js'\n\n/**\n * Returns an object containing the current state and setState function of the ShellContext.\n * Throws an error if used outside of a ShellContextProvider.\n */\nconst useDevtoolsContext = () => {\n  const context = useContext(DevtoolsContext)\n  if (context === undefined) {\n    throw new Error(\n      'useDevtoolsShellContext must be used within a ShellContextProvider',\n    )\n  }\n  return context\n}\n\nexport const usePlugins = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const { setForceExpand } = useDrawContext()\n\n  const plugins = createMemo(() => store.plugins)\n  const activePlugin = createMemo(() => store.state.activePlugin)\n\n  createEffect(() => {\n    if (activePlugin() == null) {\n      setForceExpand(false)\n    } else {\n      setForceExpand(true)\n    }\n  })\n\n  const setActivePlugin = (pluginId: string) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        activePlugin: pluginId,\n      },\n    }))\n  }\n\n  return { plugins, setActivePlugin, activePlugin }\n}\n\nexport const useDevtoolsState = () => {\n  const { store, setStore } = useDevtoolsContext()\n  const state = createMemo(() => store.state)\n  const setState = (newState: Partial<DevtoolsStore['state']>) => {\n    setStore((prev) => ({\n      ...prev,\n      state: {\n        ...prev.state,\n        ...newState,\n      },\n    }))\n  }\n  return { state, setState }\n}\n\nexport const useDevtoolsSettings = () => {\n  const { store, setStore } = useDevtoolsContext()\n\n  const settings = createMemo(() => store.settings)\n\n  const setSettings = (newSettings: Partial<DevtoolsStore['settings']>) => {\n    setStore((prev) => ({\n      ...prev,\n      settings: {\n        ...prev.settings,\n        ...newSettings,\n      },\n    }))\n  }\n\n  return { setSettings, settings }\n}\n\nexport const usePersistOpen = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const persistOpen = createMemo(() => state().persistOpen)\n\n  const setPersistOpen = (value: boolean) => {\n    setState({ persistOpen: value })\n  }\n\n  return { persistOpen, setPersistOpen }\n}\n\nexport const useHeight = () => {\n  const { state, setState } = useDevtoolsState()\n\n  const height = createMemo(() => state().height)\n\n  const setHeight = (newHeight: number) => {\n    setState({ height: newHeight })\n  }\n\n  return { height, setHeight }\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,qBAAqB,MAAM;AAC/B,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,EAAE,eAAA,IAAmB,eAAA;AAE3B,QAAM,UAAU,WAAW,MAAM,MAAM,OAAO;AAC9C,QAAM,eAAe,WAAW,MAAM,MAAM,MAAM,YAAY;AAE9D,eAAa,MAAM;AACjB,QAAI,aAAA,KAAkB,MAAM;AAC1B,qBAAe,KAAK;AAAA,IACtB,OAAO;AACL,qBAAe,IAAI;AAAA,IACrB;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,CAAC,aAAqB;AAC5C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,cAAc;AAAA,MAAA;AAAA,IAChB,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,SAAS,iBAAiB,aAAA;AACrC;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAC5B,QAAM,QAAQ,WAAW,MAAM,MAAM,KAAK;AAC1C,QAAM,WAAW,CAAC,aAA8C;AAC9D,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,OAAO;AAAA,QACL,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AACA,SAAO,EAAE,OAAO,SAAA;AAClB;AAEO,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,OAAO,SAAA,IAAa,mBAAA;AAE5B,QAAM,WAAW,WAAW,MAAM,MAAM,QAAQ;AAEhD,QAAM,cAAc,CAAC,gBAAoD;AACvE,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,UAAU;AAAA,QACR,GAAG,KAAK;AAAA,QACR,GAAG;AAAA,MAAA;AAAA,IACL,EACA;AAAA,EACJ;AAEA,SAAO,EAAE,aAAa,SAAA;AACxB;AAEO,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,cAAc,WAAW,MAAM,MAAA,EAAQ,WAAW;AAExD,QAAM,iBAAiB,CAAC,UAAmB;AACzC,aAAS,EAAE,aAAa,OAAO;AAAA,EACjC;AAEA,SAAO,EAAE,aAAa,eAAA;AACxB;AAEO,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,OAAO,SAAA,IAAa,iBAAA;AAE5B,QAAM,SAAS,WAAW,MAAM,MAAA,EAAQ,MAAM;AAE9C,QAAM,YAAY,CAAC,cAAsB;AACvC,aAAS,EAAE,QAAQ,WAAW;AAAA,EAChC;AAEA,SAAO,EAAE,QAAQ,UAAA;AACnB;"}

package/dist/esm/hooks/use-head-changes.d.ts

@@ -0,0 +1,39 @@
+type HeadChange = {
+    kind: 'added';
+    node: Node;
+} | {
+    kind: 'removed';
+    node: Node;
+} | {
+    kind: 'attr';
+    target: Element;
+    name: string | null;
+    oldValue: string | null;
+} | {
+    kind: 'title';
+    title: string;
+};
+type UseHeadChangesOptions = {
+    /**
+     * Observe attribute changes on elements inside <head>
+     * Default: true
+     */
+    attributes?: boolean;
+    /**
+     * Observe added/removed nodes in <head>
+     * Default: true
+     */
+    childList?: boolean;
+    /**
+     * Observe descendants of <head>
+     * Default: true
+     */
+    subtree?: boolean;
+    /**
+     * Also observe <title> changes explicitly
+     * Default: true
+     */
+    observeTitle?: boolean;
+};
+export declare function useHeadChanges(onChange: (change: HeadChange, raw?: MutationRecord) => void, opts?: UseHeadChangesOptions): void;
+export {};

package/dist/esm/hooks/use-head-changes.js

@@ -0,0 +1,65 @@
+import { onMount, onCleanup } from "solid-js";
+function useHeadChanges(onChange, opts = {}) {
+  const {
+    attributes = true,
+    childList = true,
+    subtree = true,
+    observeTitle = true
+  } = opts;
+  onMount(() => {
+    const headObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === "childList") {
+          m.addedNodes.forEach((node) => onChange({ kind: "added", node }, m));
+          m.removedNodes.forEach(
+            (node) => onChange({ kind: "removed", node }, m)
+          );
+        } else if (m.type === "attributes") {
+          const el = m.target;
+          onChange(
+            {
+              kind: "attr",
+              target: el,
+              name: m.attributeName,
+              oldValue: m.oldValue ?? null
+            },
+            m
+          );
+        } else {
+          const isInTitle = m.target.parentNode && m.target.parentNode.tagName.toLowerCase() === "title";
+          if (isInTitle) onChange({ kind: "title", title: document.title }, m);
+        }
+      }
+    });
+    headObserver.observe(document.head, {
+      childList,
+      attributes,
+      subtree,
+      attributeOldValue: attributes,
+      characterData: true,
+      // helps catch <title> text node edits
+      characterDataOldValue: false
+    });
+    let titleObserver;
+    if (observeTitle) {
+      const titleEl = document.head.querySelector("title") || // create a <title> if missing so future changes are observable
+      document.head.appendChild(document.createElement("title"));
+      titleObserver = new MutationObserver(() => {
+        onChange({ kind: "title", title: document.title });
+      });
+      titleObserver.observe(titleEl, {
+        childList: true,
+        characterData: true,
+        subtree: true
+      });
+    }
+    onCleanup(() => {
+      headObserver.disconnect();
+      titleObserver?.disconnect();
+    });
+  });
+}
+export {
+  useHeadChanges
+};
+//# sourceMappingURL=use-head-changes.js.map

package/dist/esm/hooks/use-head-changes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-head-changes.js","sources":["../../../src/hooks/use-head-changes.ts"],"sourcesContent":["import { onCleanup, onMount } from 'solid-js'\n\ntype HeadChange =\n  | { kind: 'added'; node: Node }\n  | { kind: 'removed'; node: Node }\n  | {\n      kind: 'attr'\n      target: Element\n      name: string | null\n      oldValue: string | null\n    }\n  | { kind: 'title'; title: string }\n\ntype UseHeadChangesOptions = {\n  /**\n   * Observe attribute changes on elements inside <head>\n   * Default: true\n   */\n  attributes?: boolean\n  /**\n   * Observe added/removed nodes in <head>\n   * Default: true\n   */\n  childList?: boolean\n  /**\n   * Observe descendants of <head>\n   * Default: true\n   */\n  subtree?: boolean\n  /**\n   * Also observe <title> changes explicitly\n   * Default: true\n   */\n  observeTitle?: boolean\n}\n\nexport function useHeadChanges(\n  onChange: (change: HeadChange, raw?: MutationRecord) => void,\n  opts: UseHeadChangesOptions = {},\n) {\n  const {\n    attributes = true,\n    childList = true,\n    subtree = true,\n    observeTitle = true,\n  } = opts\n\n  onMount(() => {\n    const headObserver = new MutationObserver((mutations) => {\n      for (const m of mutations) {\n        if (m.type === 'childList') {\n          m.addedNodes.forEach((node) => onChange({ kind: 'added', node }, m))\n          m.removedNodes.forEach((node) =>\n            onChange({ kind: 'removed', node }, m),\n          )\n        } else if (m.type === 'attributes') {\n          const el = m.target as Element\n          onChange(\n            {\n              kind: 'attr',\n              target: el,\n              name: m.attributeName,\n              oldValue: m.oldValue ?? null,\n            },\n            m,\n          )\n        } else {\n          // If someone mutates a Text node inside <title>, surface it as a title change.\n          const isInTitle =\n            m.target.parentNode &&\n            (m.target.parentNode as Element).tagName.toLowerCase() === 'title'\n          if (isInTitle) onChange({ kind: 'title', title: document.title }, m)\n        }\n      }\n    })\n\n    headObserver.observe(document.head, {\n      childList,\n      attributes,\n      subtree,\n      attributeOldValue: attributes,\n      characterData: true, // helps catch <title> text node edits\n      characterDataOldValue: false,\n    })\n\n    // Extra explicit observer for <title>, since `document.title = \"...\"`\n    // may not always bubble as a head mutation in all setups.\n    let titleObserver: MutationObserver | undefined\n    if (observeTitle) {\n      const titleEl =\n        document.head.querySelector('title') ||\n        // create a <title> if missing so future changes are observable\n        document.head.appendChild(document.createElement('title'))\n\n      titleObserver = new MutationObserver(() => {\n        onChange({ kind: 'title', title: document.title })\n      })\n      titleObserver.observe(titleEl, {\n        childList: true,\n        characterData: true,\n        subtree: true,\n      })\n    }\n\n    onCleanup(() => {\n      headObserver.disconnect()\n      titleObserver?.disconnect()\n    })\n  })\n}\n"],"names":[],"mappings":";AAoCO,SAAS,eACd,UACA,OAA8B,IAC9B;AACA,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,eAAe;AAAA,EAAA,IACb;AAEJ,UAAQ,MAAM;AACZ,UAAM,eAAe,IAAI,iBAAiB,CAAC,cAAc;AACvD,iBAAW,KAAK,WAAW;AACzB,YAAI,EAAE,SAAS,aAAa;AAC1B,YAAE,WAAW,QAAQ,CAAC,SAAS,SAAS,EAAE,MAAM,SAAS,KAAA,GAAQ,CAAC,CAAC;AACnE,YAAE,aAAa;AAAA,YAAQ,CAAC,SACtB,SAAS,EAAE,MAAM,WAAW,KAAA,GAAQ,CAAC;AAAA,UAAA;AAAA,QAEzC,WAAW,EAAE,SAAS,cAAc;AAClC,gBAAM,KAAK,EAAE;AACb;AAAA,YACE;AAAA,cACE,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,MAAM,EAAE;AAAA,cACR,UAAU,EAAE,YAAY;AAAA,YAAA;AAAA,YAE1B;AAAA,UAAA;AAAA,QAEJ,OAAO;AAEL,gBAAM,YACJ,EAAE,OAAO,cACR,EAAE,OAAO,WAAuB,QAAQ,YAAA,MAAkB;AAC7D,cAAI,oBAAoB,EAAE,MAAM,SAAS,OAAO,SAAS,MAAA,GAAS,CAAC;AAAA,QACrE;AAAA,MACF;AAAA,IACF,CAAC;AAED,iBAAa,QAAQ,SAAS,MAAM;AAAA,MAClC;AAAA,MACA;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB,eAAe;AAAA;AAAA,MACf,uBAAuB;AAAA,IAAA,CACxB;AAID,QAAI;AACJ,QAAI,cAAc;AAChB,YAAM,UACJ,SAAS,KAAK,cAAc,OAAO;AAAA,MAEnC,SAAS,KAAK,YAAY,SAAS,cAAc,OAAO,CAAC;AAE3D,sBAAgB,IAAI,iBAAiB,MAAM;AACzC,iBAAS,EAAE,MAAM,SAAS,OAAO,SAAS,OAAO;AAAA,MACnD,CAAC;AACD,oBAAc,QAAQ,SAAS;AAAA,QAC7B,WAAW;AAAA,QACX,eAAe;AAAA,QACf,SAAS;AAAA,MAAA,CACV;AAAA,IACH;AAEA,cAAU,MAAM;AACd,mBAAa,WAAA;AACb,qBAAe,WAAA;AAAA,IACjB,CAAC;AAAA,EACH,CAAC;AACH;"}

package/dist/esm/styles/tokens.js

@@ -2,12 +2,14 @@ const tokens = {
   colors: {
     darkGray: {
       700: "#191c24",
-      800: "#111318"
+      800: "#111318",
+      900: "#0b0d10"
     },
     gray: {
       100: "#f2f4f7",
       300: "#d0d5dd",
       400: "#98a2b3",
+      500: "#667085",
       700: "#344054"
     },
     blue: {
@@ -17,6 +19,7 @@ const tokens = {
       500: "#12B76A"
     },
     red: {
+      400: "#f87171",
       500: "#ef4444"
     },
     purple: {

package/dist/esm/styles/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAkBN,UAAU;AAAA,MAQR,KAAK;AAAA,MACL,KAAK;AAAA,IAEP;AAAA,IACA,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MAGL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IACA,OAAO;AAAA,MAOL,KAAK;AAAA,IAKP;AAAA,IACA,KAAK;AAAA,MAMH,KAAK;AAAA,IAMP;AAAA,IAcA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,EAwCF;AAAA,EACA,OAAO;AAAA,IAEL,IAAI;AAAA,EAUN;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAYN;AAAA,IA6BA,YAAY;AAAA,MACV,MAAM;AAAA,IAER;AAAA,EAAA;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAMJ,GAAG;AAAA,IAaH,IAAI;AAAA,IAYJ,IAAI;AAAA,EAQN;AAiCF;"}
+{"version":3,"file":"tokens.js","sources":["../../../src/styles/tokens.ts"],"sourcesContent":["export const tokens = {\n  colors: {\n    inherit: 'inherit',\n    current: 'currentColor',\n    transparent: 'transparent',\n    black: '#000000',\n    white: '#ffffff',\n    neutral: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    darkGray: {\n      50: '#525c7a',\n      100: '#49536e',\n      200: '#414962',\n      300: '#394056',\n      400: '#313749',\n      500: '#292e3d',\n      600: '#212530',\n      700: '#191c24',\n      800: '#111318',\n      900: '#0b0d10',\n    },\n    gray: {\n      50: '#f9fafb',\n      100: '#f2f4f7',\n      200: '#eaecf0',\n      300: '#d0d5dd',\n      400: '#98a2b3',\n      500: '#667085',\n      600: '#475467',\n      700: '#344054',\n      800: '#1d2939',\n      900: '#101828',\n    },\n    blue: {\n      25: '#F5FAFF',\n      50: '#EFF8FF',\n      100: '#D1E9FF',\n      200: '#B2DDFF',\n      300: '#84CAFF',\n      400: '#53B1FD',\n      500: '#2E90FA',\n      600: '#1570EF',\n      700: '#175CD3',\n      800: '#1849A9',\n      900: '#194185',\n    },\n    green: {\n      25: '#F6FEF9',\n      50: '#ECFDF3',\n      100: '#D1FADF',\n      200: '#A6F4C5',\n      300: '#6CE9A6',\n      400: '#32D583',\n      500: '#12B76A',\n      600: '#039855',\n      700: '#027A48',\n      800: '#05603A',\n      900: '#054F31',\n    },\n    red: {\n      50: '#fef2f2',\n      100: '#fee2e2',\n      200: '#fecaca',\n      300: '#fca5a5',\n      400: '#f87171',\n      500: '#ef4444',\n      600: '#dc2626',\n      700: '#b91c1c',\n      800: '#991b1b',\n      900: '#7f1d1d',\n      950: '#450a0a',\n    },\n    yellow: {\n      25: '#FFFCF5',\n      50: '#FFFAEB',\n      100: '#FEF0C7',\n      200: '#FEDF89',\n      300: '#FEC84B',\n      400: '#FDB022',\n      500: '#F79009',\n      600: '#DC6803',\n      700: '#B54708',\n      800: '#93370D',\n      900: '#7A2E0E',\n    },\n    purple: {\n      25: '#FAFAFF',\n      50: '#F4F3FF',\n      100: '#EBE9FE',\n      200: '#D9D6FE',\n      300: '#BDB4FE',\n      400: '#9B8AFB',\n      500: '#7A5AF8',\n      600: '#6938EF',\n      700: '#5925DC',\n      800: '#4A1FB8',\n      900: '#3E1C96',\n    },\n    teal: {\n      25: '#F6FEFC',\n      50: '#F0FDF9',\n      100: '#CCFBEF',\n      200: '#99F6E0',\n      300: '#5FE9D0',\n      400: '#2ED3B7',\n      500: '#15B79E',\n      600: '#0E9384',\n      700: '#107569',\n      800: '#125D56',\n      900: '#134E48',\n    },\n    pink: {\n      25: '#fdf2f8',\n      50: '#fce7f3',\n      100: '#fbcfe8',\n      200: '#f9a8d4',\n      300: '#f472b6',\n      400: '#ec4899',\n      500: '#db2777',\n      600: '#be185d',\n      700: '#9d174d',\n      800: '#831843',\n      900: '#500724',\n    },\n    cyan: {\n      25: '#ecfeff',\n      50: '#cffafe',\n      100: '#a5f3fc',\n      200: '#67e8f9',\n      300: '#22d3ee',\n      400: '#06b6d4',\n      500: '#0891b2',\n      600: '#0e7490',\n      700: '#155e75',\n      800: '#164e63',\n      900: '#083344',\n    },\n  },\n  alpha: {\n    100: 'ff',\n    90: 'e5',\n    80: 'cc',\n    70: 'b3',\n    60: '99',\n    50: '80',\n    40: '66',\n    30: '4d',\n    20: '33',\n    10: '1a',\n    0: '00',\n  },\n  font: {\n    size: {\n      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',\n      xs: 'calc(var(--tsrd-font-size) * 0.75)',\n      sm: 'calc(var(--tsrd-font-size) * 0.875)',\n      md: 'var(--tsrd-font-size)',\n      lg: 'calc(var(--tsrd-font-size) * 1.125)',\n      xl: 'calc(var(--tsrd-font-size) * 1.25)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 6)',\n      '9xl': 'calc(var(--tsrd-font-size) * 8)',\n    },\n    lineHeight: {\n      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',\n      xs: 'calc(var(--tsrd-font-size) * 1)',\n      sm: 'calc(var(--tsrd-font-size) * 1.25)',\n      md: 'calc(var(--tsrd-font-size) * 1.5)',\n      lg: 'calc(var(--tsrd-font-size) * 1.75)',\n      xl: 'calc(var(--tsrd-font-size) * 2)',\n      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',\n      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',\n      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',\n      '5xl': 'calc(var(--tsrd-font-size) * 3)',\n      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',\n      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',\n      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',\n      '9xl': 'calc(var(--tsrd-font-size) * 4)',\n    },\n    weight: {\n      thin: '100',\n      extralight: '200',\n      light: '300',\n      normal: '400',\n      medium: '500',\n      semibold: '600',\n      bold: '700',\n      extrabold: '800',\n      black: '900',\n    },\n    fontFamily: {\n      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',\n      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,\n    },\n  },\n  breakpoints: {\n    xs: '320px',\n    sm: '640px',\n    md: '768px',\n    lg: '1024px',\n    xl: '1280px',\n    '2xl': '1536px',\n  },\n  border: {\n    radius: {\n      none: '0px',\n      xs: 'calc(var(--tsrd-font-size) * 0.125)',\n      sm: 'calc(var(--tsrd-font-size) * 0.25)',\n      md: 'calc(var(--tsrd-font-size) * 0.375)',\n      lg: 'calc(var(--tsrd-font-size) * 0.5)',\n      xl: 'calc(var(--tsrd-font-size) * 0.75)',\n      '2xl': 'calc(var(--tsrd-font-size) * 1)',\n      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',\n      full: '9999px',\n    },\n  },\n  size: {\n    0: '0px',\n    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',\n    0.5: 'calc(var(--tsrd-font-size) * 0.125)',\n    1: 'calc(var(--tsrd-font-size) * 0.25)',\n    1.5: 'calc(var(--tsrd-font-size) * 0.375)',\n    2: 'calc(var(--tsrd-font-size) * 0.5)',\n    2.5: 'calc(var(--tsrd-font-size) * 0.625)',\n    3: 'calc(var(--tsrd-font-size) * 0.75)',\n    3.5: 'calc(var(--tsrd-font-size) * 0.875)',\n    4: 'calc(var(--tsrd-font-size) * 1)',\n    4.5: 'calc(var(--tsrd-font-size) * 1.125)',\n    5: 'calc(var(--tsrd-font-size) * 1.25)',\n    5.5: 'calc(var(--tsrd-font-size) * 1.375)',\n    6: 'calc(var(--tsrd-font-size) * 1.5)',\n    6.5: 'calc(var(--tsrd-font-size) * 1.625)',\n    7: 'calc(var(--tsrd-font-size) * 1.75)',\n    8: 'calc(var(--tsrd-font-size) * 2)',\n    9: 'calc(var(--tsrd-font-size) * 2.25)',\n    10: 'calc(var(--tsrd-font-size) * 2.5)',\n    11: 'calc(var(--tsrd-font-size) * 2.75)',\n    12: 'calc(var(--tsrd-font-size) * 3)',\n    14: 'calc(var(--tsrd-font-size) * 3.5)',\n    16: 'calc(var(--tsrd-font-size) * 4)',\n    20: 'calc(var(--tsrd-font-size) * 5)',\n    24: 'calc(var(--tsrd-font-size) * 6)',\n    28: 'calc(var(--tsrd-font-size) * 7)',\n    32: 'calc(var(--tsrd-font-size) * 8)',\n    36: 'calc(var(--tsrd-font-size) * 9)',\n    40: 'calc(var(--tsrd-font-size) * 10)',\n    44: 'calc(var(--tsrd-font-size) * 11)',\n    48: 'calc(var(--tsrd-font-size) * 12)',\n    52: 'calc(var(--tsrd-font-size) * 13)',\n    56: 'calc(var(--tsrd-font-size) * 14)',\n    60: 'calc(var(--tsrd-font-size) * 15)',\n    64: 'calc(var(--tsrd-font-size) * 16)',\n    72: 'calc(var(--tsrd-font-size) * 18)',\n    80: 'calc(var(--tsrd-font-size) * 20)',\n    96: 'calc(var(--tsrd-font-size) * 24)',\n  },\n  shadow: {\n    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,\n    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,\n    md: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,\n    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,\n    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>\n      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,\n    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>\n      `0 25px 50px -12px ${color}` as const,\n    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>\n      `inset 0 2px 4px 0 ${color}` as const,\n    none: () => `none` as const,\n  },\n  zIndices: {\n    hide: -1,\n    auto: 'auto',\n    base: 0,\n    docked: 10,\n    dropdown: 1000,\n    sticky: 1100,\n    banner: 1200,\n    overlay: 1300,\n    modal: 1400,\n    popover: 1500,\n    skipLink: 1600,\n    toast: 1700,\n    tooltip: 1800,\n  },\n} as const\n"],"names":[],"mappings":"AAAO,MAAM,SAAS;AAAA,EACpB,QAAQ;AAAA,IAkBN,UAAU;AAAA,MAQR,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,MAAM;AAAA,MAEJ,KAAK;AAAA,MAEL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MAEL,KAAK;AAAA,IAGP;AAAA,IACA,MAAM;AAAA,MAUJ,KAAK;AAAA,IAEP;AAAA,IACA,OAAO;AAAA,MAOL,KAAK;AAAA,IAKP;AAAA,IACA,KAAK;AAAA,MAKH,KAAK;AAAA,MACL,KAAK;AAAA,IAMP;AAAA,IAcA,QAAQ;AAAA,MAMN,KAAK;AAAA,MACL,KAAK;AAAA,IAKP;AAAA,EAwCF;AAAA,EACA,OAAO;AAAA,IAEL,IAAI;AAAA,EAUN;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MAEJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAYN;AAAA,IA6BA,YAAY;AAAA,MACV,MAAM;AAAA,IAER;AAAA,EAAA;AAAA,EAUF,QAAQ;AAAA,IACN,QAAQ;AAAA,MASN,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,MAAM;AAAA,IAMJ,GAAG;AAAA,IAaH,IAAI;AAAA,IAYJ,IAAI;AAAA,EAQN;AAiCF;"}

package/dist/esm/styles/use-styles.d.ts

@@ -1,6 +1,20 @@
 import { TanStackDevtoolsConfig } from '../context/devtools-context.js';
 import { Accessor } from 'solid-js';
 export declare function useStyles(): Accessor<{
+    seoTabContainer: string;
+    seoTabTitle: string;
+    seoTabSection: string;
+    seoPreviewSection: string;
+    seoPreviewCard: string;
+    seoPreviewHeader: string;
+    seoPreviewImage: string;
+    seoPreviewTitle: string;
+    seoPreviewDesc: string;
+    seoPreviewUrl: string;
+    seoMissingTagsSection: string;
+    seoMissingTagsList: string;
+    seoMissingTag: string;
+    seoAllTagsFound: string;
     devtoolsPanelContainer: (panelLocation: TanStackDevtoolsConfig["panelLocation"], isDetached: boolean) => string;
     devtoolsPanelContainerVisibility: (isOpen: boolean) => string;
     devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => string;
@@ -14,7 +28,12 @@ export declare function useStyles(): Accessor<{
     tab: string;
     tabContent: string;
     pluginsTabPanel: string;
+    pluginsTabDraw: string;
+    pluginsTabDrawExpanded: string;
+    pluginsTabDrawTransition: (mSeconds: number) => string;
     pluginsTabSidebar: string;
+    pluginsTabSidebarExpanded: string;
+    pluginsTabSidebarTransition: (mSeconds: number) => string;
     pluginName: string;
     pluginsTabContent: string;
     settingsContainer: string;

package/dist/esm/styles/use-styles.js

@@ -1,11 +1,130 @@
 import * as goober from "goober";
 import { createSignal } from "solid-js";
 import { tokens } from "./tokens.js";
+const mSecondsToCssSeconds = (mSeconds) => `${(mSeconds / 1e3).toFixed(2)}s`;
 const stylesFactory = () => {
   const { colors, font, size, alpha, border } = tokens;
   const { fontFamily, size: fontSize } = font;
   const css = goober.css;
   return {
+    seoTabContainer: css`
+      padding: 0;
+      margin: 0 auto;
+      background: ${colors.darkGray[700]};
+      border-radius: 12px;
+      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
+      overflow-y: auto;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      width: 100%;
+      overflow-y: auto;
+    `,
+    seoTabTitle: css`
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: ${colors.purple[400]};
+      margin: 0;
+      padding: 1rem 1.5rem 0.5rem 1.5rem;
+      text-align: left;
+      border-bottom: 1px solid ${colors.gray[700]};
+    `,
+    seoTabSection: css`
+      padding: 1.5rem;
+      background: ${colors.darkGray[800]};
+      border: 1px solid ${colors.gray[700]};
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin: 1.5rem;
+      margin-bottom: 2rem;
+      border-radius: 0.75rem;
+    `,
+    seoPreviewSection: css`
+      display: flex;
+      flex-direction: row;
+      gap: 16px;
+      margin-bottom: 0;
+      justify-content: flex-start;
+      align-items: flex-start;
+      overflow-x: auto;
+      flex-wrap: wrap;
+      padding-bottom: 0.5rem;
+    `,
+    seoPreviewCard: css`
+      border: 1px solid ${colors.gray[700]};
+      border-radius: 8px;
+      padding: 12px 10px;
+      background: ${colors.darkGray[900]};
+      margin-bottom: 0;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      min-width: 200px;
+      max-width: 240px;
+      font-size: 0.95rem;
+      gap: 4px;
+    `,
+    seoPreviewHeader: css`
+      font-size: 1rem;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: ${colors.purple[400]};
+    `,
+    seoPreviewImage: css`
+      max-width: 100%;
+      border-radius: 6px;
+      margin-bottom: 6px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+      height: 160px;
+    `,
+    seoPreviewTitle: css`
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 2px;
+      color: ${colors.gray[100]};
+    `,
+    seoPreviewDesc: css`
+      color: ${colors.gray[300]};
+      margin-bottom: 2px;
+      font-size: 0.95rem;
+    `,
+    seoPreviewUrl: css`
+      color: ${colors.gray[500]};
+      font-size: 0.9rem;
+      margin-bottom: 2px;
+      word-break: break-all;
+    `,
+    seoMissingTagsSection: css`
+      margin-top: 4px;
+      font-size: 0.95rem;
+      color: ${colors.red[400]};
+    `,
+    seoMissingTagsList: css`
+      margin: 4px 0 0 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      max-width: 240px;
+    `,
+    seoMissingTag: css`
+      background: ${colors.red[500]}22;
+      color: ${colors.red[500]};
+      border-radius: 4px;
+      padding: 1px 6px;
+      font-size: 0.9rem;
+      font-weight: 500;
+    `,
+    seoAllTagsFound: css`
+      color: ${colors.green[500]};
+      font-weight: 500;
+      margin-left: 6px;
+      font-size: 0.95rem;
+    `,
     devtoolsPanelContainer: (panelLocation, isDetached) => css`
       direction: ltr;
       position: fixed;
@@ -211,13 +330,34 @@ const stylesFactory = () => {
       height: 100%;
       overflow: hidden;
     `,
-    pluginsTabSidebar: css`
-      width: ${size[48]};
+    pluginsTabDraw: css`
+      width: 0px;
+      height: 100%;
       background-color: ${colors.darkGray[800]};
-      border-right: 1px solid ${colors.gray[700]};
       box-shadow: 0 1px 0 ${colors.gray[700]};
+    `,
+    pluginsTabDrawExpanded: css`
+      width: ${size[48]};
+      border-right: 1px solid ${colors.gray[700]};
+    `,
+    pluginsTabDrawTransition: (mSeconds) => {
+      return css`
+        transition: width ${mSecondsToCssSeconds(mSeconds)} ease;
+      `;
+    },
+    pluginsTabSidebar: css`
+      width: ${size[48]};
       overflow-y: auto;
+      transform: translateX(-100%);
+    `,
+    pluginsTabSidebarExpanded: css`
+      transform: translateX(0);
     `,
+    pluginsTabSidebarTransition: (mSeconds) => {
+      return css`
+        transition: transform ${mSecondsToCssSeconds(mSeconds)} ease;
+      `;
+    },
     pluginName: css`
       font-size: ${fontSize.xs};
       font-family: ${fontFamily.sans};