@flanksource/clicky-ui 0.3.9 → 0.3.11

package/dist/tailwind-preset.cjs

@@ -70,6 +70,14 @@ const preset = {
       },
       fontSize: {
         "density-base": "var(--font-size-base)"
+      },
+      // Bind Tailwind's font utilities to the Flanksource token stacks so
+      // `font-sans` / `font-mono` render Open Sans / Fira Code. Without this the
+      // utilities fall back to Tailwind's default families (e.g. `font-mono`
+      // resolves to ui-monospace/SF Mono instead of Fira Code).
+      fontFamily: {
+        sans: "var(--fs-font-sans)",
+        mono: "var(--fs-font-mono)"
       }
     }
   },

package/dist/tailwind-preset.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-preset.cjs","sources":["../src/tailwind-preset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst preset: Partial<Config> = {\n  darkMode: [\"selector\", '[data-theme=\"dark\"]'],\n  theme: {\n    extend: {\n      // Tokens are full-color aliases of the Flanksource fs-tokens (see\n      // styles/tokens.css), so they are referenced directly with var(--token)\n      // — no hsl() wrapper. Tailwind v4 applies opacity modifiers via color-mix.\n      colors: {\n        border: \"var(--border)\",\n        input: \"var(--input)\",\n        ring: \"var(--ring)\",\n        background: \"var(--background)\",\n        foreground: \"var(--foreground)\",\n        primary: {\n          DEFAULT: \"var(--primary)\",\n          foreground: \"var(--primary-foreground)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--secondary)\",\n          foreground: \"var(--secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--destructive)\",\n          foreground: \"var(--destructive-foreground)\",\n        },\n        muted: {\n          DEFAULT: \"var(--muted)\",\n          foreground: \"var(--muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--accent)\",\n          foreground: \"var(--accent-foreground)\",\n        },\n        popover: {\n          DEFAULT: \"var(--popover)\",\n          foreground: \"var(--popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--card)\",\n          foreground: \"var(--card-foreground)\",\n        },\n        sidebar: {\n          DEFAULT: \"var(--sidebar)\",\n          foreground: \"var(--sidebar-foreground)\",\n          border: \"var(--sidebar-border)\",\n          ring: \"var(--sidebar-ring)\",\n          accent: {\n            DEFAULT: \"var(--sidebar-accent)\",\n            foreground: \"var(--sidebar-accent-foreground)\",\n          },\n          primary: {\n            DEFAULT: \"var(--sidebar-primary)\",\n            foreground: \"var(--sidebar-primary-foreground)\",\n          },\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      spacing: {\n        \"control-h\": \"var(--control-height)\",\n        \"control-px\": \"var(--control-padding-x)\",\n        \"density-1\": \"var(--spacing-unit)\",\n        \"density-2\": \"calc(var(--spacing-unit) * 2)\",\n        \"density-3\": \"calc(var(--spacing-unit) * 3)\",\n        \"density-4\": \"calc(var(--spacing-unit) * 4)\",\n      },\n      fontSize: {\n        \"density-base\": \"var(--font-size-base)\",\n      },\n    },\n  },\n  plugins: [\n    ({ addVariant }: { addVariant: (name: string, selector: string) => void }) => {\n      addVariant(\"density-compact\", '[data-density=\"compact\"] &');\n      addVariant(\"density-comfortable\", '[data-density=\"comfortable\"] &');\n      addVariant(\"density-spacious\", '[data-density=\"spacious\"] &');\n    },\n  ],\n};\n\nexport default preset;\n"],"names":[],"mappings":";AAEA,MAAM,SAA0B;AAAA,EAC9B,UAAU,CAAC,YAAY,qBAAqB;AAAA,EAC5C,OAAO;AAAA,IACL,QAAQ;AAAA;AAAA;AAAA;AAAA,MAIN,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,aAAa;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,UAEd,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,MAEF,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,aAAa;AAAA,QACb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,MAAA;AAAA,MAEf,UAAU;AAAA,QACR,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAAA,EAEF,SAAS;AAAA,IACP,CAAC,EAAE,WAAA,MAA2E;AAC5E,iBAAW,mBAAmB,4BAA4B;AAC1D,iBAAW,uBAAuB,gCAAgC;AAClE,iBAAW,oBAAoB,6BAA6B;AAAA,IAC9D;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"tailwind-preset.cjs","sources":["../src/tailwind-preset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst preset: Partial<Config> = {\n  darkMode: [\"selector\", '[data-theme=\"dark\"]'],\n  theme: {\n    extend: {\n      // Tokens are full-color aliases of the Flanksource fs-tokens (see\n      // styles/tokens.css), so they are referenced directly with var(--token)\n      // — no hsl() wrapper. Tailwind v4 applies opacity modifiers via color-mix.\n      colors: {\n        border: \"var(--border)\",\n        input: \"var(--input)\",\n        ring: \"var(--ring)\",\n        background: \"var(--background)\",\n        foreground: \"var(--foreground)\",\n        primary: {\n          DEFAULT: \"var(--primary)\",\n          foreground: \"var(--primary-foreground)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--secondary)\",\n          foreground: \"var(--secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--destructive)\",\n          foreground: \"var(--destructive-foreground)\",\n        },\n        muted: {\n          DEFAULT: \"var(--muted)\",\n          foreground: \"var(--muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--accent)\",\n          foreground: \"var(--accent-foreground)\",\n        },\n        popover: {\n          DEFAULT: \"var(--popover)\",\n          foreground: \"var(--popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--card)\",\n          foreground: \"var(--card-foreground)\",\n        },\n        sidebar: {\n          DEFAULT: \"var(--sidebar)\",\n          foreground: \"var(--sidebar-foreground)\",\n          border: \"var(--sidebar-border)\",\n          ring: \"var(--sidebar-ring)\",\n          accent: {\n            DEFAULT: \"var(--sidebar-accent)\",\n            foreground: \"var(--sidebar-accent-foreground)\",\n          },\n          primary: {\n            DEFAULT: \"var(--sidebar-primary)\",\n            foreground: \"var(--sidebar-primary-foreground)\",\n          },\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      spacing: {\n        \"control-h\": \"var(--control-height)\",\n        \"control-px\": \"var(--control-padding-x)\",\n        \"density-1\": \"var(--spacing-unit)\",\n        \"density-2\": \"calc(var(--spacing-unit) * 2)\",\n        \"density-3\": \"calc(var(--spacing-unit) * 3)\",\n        \"density-4\": \"calc(var(--spacing-unit) * 4)\",\n      },\n      fontSize: {\n        \"density-base\": \"var(--font-size-base)\",\n      },\n      // Bind Tailwind's font utilities to the Flanksource token stacks so\n      // `font-sans` / `font-mono` render Open Sans / Fira Code. Without this the\n      // utilities fall back to Tailwind's default families (e.g. `font-mono`\n      // resolves to ui-monospace/SF Mono instead of Fira Code).\n      fontFamily: {\n        sans: \"var(--fs-font-sans)\",\n        mono: \"var(--fs-font-mono)\",\n      },\n    },\n  },\n  plugins: [\n    ({ addVariant }: { addVariant: (name: string, selector: string) => void }) => {\n      addVariant(\"density-compact\", '[data-density=\"compact\"] &');\n      addVariant(\"density-comfortable\", '[data-density=\"comfortable\"] &');\n      addVariant(\"density-spacious\", '[data-density=\"spacious\"] &');\n    },\n  ],\n};\n\nexport default preset;\n"],"names":[],"mappings":";AAEA,MAAM,SAA0B;AAAA,EAC9B,UAAU,CAAC,YAAY,qBAAqB;AAAA,EAC5C,OAAO;AAAA,IACL,QAAQ;AAAA;AAAA;AAAA;AAAA,MAIN,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,aAAa;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,UAEd,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,MAEF,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,aAAa;AAAA,QACb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,MAAA;AAAA,MAEf,UAAU;AAAA,QACR,gBAAgB;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMlB,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAAA,EAEF,SAAS;AAAA,IACP,CAAC,EAAE,WAAA,MAA2E;AAC5E,iBAAW,mBAAmB,4BAA4B;AAC1D,iBAAW,uBAAuB,gCAAgC;AAClE,iBAAW,oBAAoB,6BAA6B;AAAA,IAC9D;AAAA,EAAA;AAEJ;;"}

package/dist/tailwind-preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-preset.d.ts","sourceRoot":"","sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAiF3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"tailwind-preset.d.ts","sourceRoot":"","sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAyF3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/tailwind-preset.js

@@ -69,6 +69,14 @@ const preset = {
       },
       fontSize: {
         "density-base": "var(--font-size-base)"
+      },
+      // Bind Tailwind's font utilities to the Flanksource token stacks so
+      // `font-sans` / `font-mono` render Open Sans / Fira Code. Without this the
+      // utilities fall back to Tailwind's default families (e.g. `font-mono`
+      // resolves to ui-monospace/SF Mono instead of Fira Code).
+      fontFamily: {
+        sans: "var(--fs-font-sans)",
+        mono: "var(--fs-font-mono)"
       }
     }
   },

package/dist/tailwind-preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-preset.js","sources":["../src/tailwind-preset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst preset: Partial<Config> = {\n  darkMode: [\"selector\", '[data-theme=\"dark\"]'],\n  theme: {\n    extend: {\n      // Tokens are full-color aliases of the Flanksource fs-tokens (see\n      // styles/tokens.css), so they are referenced directly with var(--token)\n      // — no hsl() wrapper. Tailwind v4 applies opacity modifiers via color-mix.\n      colors: {\n        border: \"var(--border)\",\n        input: \"var(--input)\",\n        ring: \"var(--ring)\",\n        background: \"var(--background)\",\n        foreground: \"var(--foreground)\",\n        primary: {\n          DEFAULT: \"var(--primary)\",\n          foreground: \"var(--primary-foreground)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--secondary)\",\n          foreground: \"var(--secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--destructive)\",\n          foreground: \"var(--destructive-foreground)\",\n        },\n        muted: {\n          DEFAULT: \"var(--muted)\",\n          foreground: \"var(--muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--accent)\",\n          foreground: \"var(--accent-foreground)\",\n        },\n        popover: {\n          DEFAULT: \"var(--popover)\",\n          foreground: \"var(--popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--card)\",\n          foreground: \"var(--card-foreground)\",\n        },\n        sidebar: {\n          DEFAULT: \"var(--sidebar)\",\n          foreground: \"var(--sidebar-foreground)\",\n          border: \"var(--sidebar-border)\",\n          ring: \"var(--sidebar-ring)\",\n          accent: {\n            DEFAULT: \"var(--sidebar-accent)\",\n            foreground: \"var(--sidebar-accent-foreground)\",\n          },\n          primary: {\n            DEFAULT: \"var(--sidebar-primary)\",\n            foreground: \"var(--sidebar-primary-foreground)\",\n          },\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      spacing: {\n        \"control-h\": \"var(--control-height)\",\n        \"control-px\": \"var(--control-padding-x)\",\n        \"density-1\": \"var(--spacing-unit)\",\n        \"density-2\": \"calc(var(--spacing-unit) * 2)\",\n        \"density-3\": \"calc(var(--spacing-unit) * 3)\",\n        \"density-4\": \"calc(var(--spacing-unit) * 4)\",\n      },\n      fontSize: {\n        \"density-base\": \"var(--font-size-base)\",\n      },\n    },\n  },\n  plugins: [\n    ({ addVariant }: { addVariant: (name: string, selector: string) => void }) => {\n      addVariant(\"density-compact\", '[data-density=\"compact\"] &');\n      addVariant(\"density-comfortable\", '[data-density=\"comfortable\"] &');\n      addVariant(\"density-spacious\", '[data-density=\"spacious\"] &');\n    },\n  ],\n};\n\nexport default preset;\n"],"names":[],"mappings":"AAEA,MAAM,SAA0B;AAAA,EAC9B,UAAU,CAAC,YAAY,qBAAqB;AAAA,EAC5C,OAAO;AAAA,IACL,QAAQ;AAAA;AAAA;AAAA;AAAA,MAIN,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,aAAa;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,UAEd,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,MAEF,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,aAAa;AAAA,QACb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,MAAA;AAAA,MAEf,UAAU;AAAA,QACR,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EACF;AAAA,EAEF,SAAS;AAAA,IACP,CAAC,EAAE,WAAA,MAA2E;AAC5E,iBAAW,mBAAmB,4BAA4B;AAC1D,iBAAW,uBAAuB,gCAAgC;AAClE,iBAAW,oBAAoB,6BAA6B;AAAA,IAC9D;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"tailwind-preset.js","sources":["../src/tailwind-preset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst preset: Partial<Config> = {\n  darkMode: [\"selector\", '[data-theme=\"dark\"]'],\n  theme: {\n    extend: {\n      // Tokens are full-color aliases of the Flanksource fs-tokens (see\n      // styles/tokens.css), so they are referenced directly with var(--token)\n      // — no hsl() wrapper. Tailwind v4 applies opacity modifiers via color-mix.\n      colors: {\n        border: \"var(--border)\",\n        input: \"var(--input)\",\n        ring: \"var(--ring)\",\n        background: \"var(--background)\",\n        foreground: \"var(--foreground)\",\n        primary: {\n          DEFAULT: \"var(--primary)\",\n          foreground: \"var(--primary-foreground)\",\n        },\n        secondary: {\n          DEFAULT: \"var(--secondary)\",\n          foreground: \"var(--secondary-foreground)\",\n        },\n        destructive: {\n          DEFAULT: \"var(--destructive)\",\n          foreground: \"var(--destructive-foreground)\",\n        },\n        muted: {\n          DEFAULT: \"var(--muted)\",\n          foreground: \"var(--muted-foreground)\",\n        },\n        accent: {\n          DEFAULT: \"var(--accent)\",\n          foreground: \"var(--accent-foreground)\",\n        },\n        popover: {\n          DEFAULT: \"var(--popover)\",\n          foreground: \"var(--popover-foreground)\",\n        },\n        card: {\n          DEFAULT: \"var(--card)\",\n          foreground: \"var(--card-foreground)\",\n        },\n        sidebar: {\n          DEFAULT: \"var(--sidebar)\",\n          foreground: \"var(--sidebar-foreground)\",\n          border: \"var(--sidebar-border)\",\n          ring: \"var(--sidebar-ring)\",\n          accent: {\n            DEFAULT: \"var(--sidebar-accent)\",\n            foreground: \"var(--sidebar-accent-foreground)\",\n          },\n          primary: {\n            DEFAULT: \"var(--sidebar-primary)\",\n            foreground: \"var(--sidebar-primary-foreground)\",\n          },\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      spacing: {\n        \"control-h\": \"var(--control-height)\",\n        \"control-px\": \"var(--control-padding-x)\",\n        \"density-1\": \"var(--spacing-unit)\",\n        \"density-2\": \"calc(var(--spacing-unit) * 2)\",\n        \"density-3\": \"calc(var(--spacing-unit) * 3)\",\n        \"density-4\": \"calc(var(--spacing-unit) * 4)\",\n      },\n      fontSize: {\n        \"density-base\": \"var(--font-size-base)\",\n      },\n      // Bind Tailwind's font utilities to the Flanksource token stacks so\n      // `font-sans` / `font-mono` render Open Sans / Fira Code. Without this the\n      // utilities fall back to Tailwind's default families (e.g. `font-mono`\n      // resolves to ui-monospace/SF Mono instead of Fira Code).\n      fontFamily: {\n        sans: \"var(--fs-font-sans)\",\n        mono: \"var(--fs-font-mono)\",\n      },\n    },\n  },\n  plugins: [\n    ({ addVariant }: { addVariant: (name: string, selector: string) => void }) => {\n      addVariant(\"density-compact\", '[data-density=\"compact\"] &');\n      addVariant(\"density-comfortable\", '[data-density=\"comfortable\"] &');\n      addVariant(\"density-spacious\", '[data-density=\"spacious\"] &');\n    },\n  ],\n};\n\nexport default preset;\n"],"names":[],"mappings":"AAEA,MAAM,SAA0B;AAAA,EAC9B,UAAU,CAAC,YAAY,qBAAqB;AAAA,EAC5C,OAAO;AAAA,IACL,QAAQ;AAAA;AAAA;AAAA;AAAA,MAIN,QAAQ;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,WAAW;AAAA,UACT,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,aAAa;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,QAAQ;AAAA,UACN,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAEd,SAAS;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,UAEd,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,QACd;AAAA,MACF;AAAA,MAEF,cAAc;AAAA,QACZ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,aAAa;AAAA,QACb,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,MAAA;AAAA,MAEf,UAAU;AAAA,QACR,gBAAgB;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMlB,YAAY;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EACF;AAAA,EAEF,SAAS;AAAA,IACP,CAAC,EAAE,WAAA,MAA2E;AAC5E,iBAAW,mBAAmB,4BAA4B;AAC1D,iBAAW,uBAAuB,gCAAgC;AAClE,iBAAW,oBAAoB,6BAA6B;AAAA,IAC9D;AAAA,EAAA;AAEJ;"}

package/oxlint-plugins/README.md

@@ -12,17 +12,32 @@ without copying anything.
 ## Setup
 
 These rules require oxlint's [JS plugins](https://oxc.rs/docs/guide/usage/linter/js-plugins.html)
-(oxlint `>=1.50`, Node `>=20.19`). Add the plugin and the rules you want to your
-downstream `.oxlintrc.json`:
+(oxlint `>=1.50`, Node `>=20.19`). Install oxlint in the consumer project. If
+the project does not already depend on `@flanksource/clicky-ui`, add that as
+the normal runtime dependency too:
+
+```bash
+pnpm add @flanksource/clicky-ui
+pnpm add -D oxlint
+```
+
+For npm or yarn, install `@flanksource/clicky-ui` as a regular dependency and
+`oxlint` with your package manager's development-dependency flag.
+
+Add the plugin and the rules you want to the downstream `.oxlintrc.json`:
 
 ```json
 {
   "jsPlugins": [
-    { "name": "clicky-ui", "specifier": "@flanksource/clicky-ui/oxlint-plugins" }
+    {
+      "name": "clicky-ui",
+      "specifier": "@flanksource/clicky-ui/oxlint-plugins"
+    }
   ],
   "rules": {
     "clicky-ui/prefer-clicky-components": "warn",
     "clicky-ui/no-adhoc-overlay": "error",
+    "clicky-ui/no-direct-z-index": "error",
     "clicky-ui/prefer-tailwind-classes": "warn",
     "clicky-ui/prefer-theme-tokens": "error",
     "clicky-ui/prefer-clicky-icons": "warn"
@@ -30,27 +45,50 @@ downstream `.oxlintrc.json`:
 }
 ```
 
+Add a script that points oxlint at the consumer source:
+
+```json
+{
+  "scripts": {
+    "lint:clicky-ui": "oxlint -c .oxlintrc.json src --deny-warnings"
+  }
+}
+```
+
+Run it with:
+
+```bash
+pnpm run lint:clicky-ui
+```
+
 The `specifier` form resolves through the package's `exports` map. If your
 toolchain can't resolve it, point `jsPlugins` at the file directly instead:
 
 ```json
 {
-  "jsPlugins": ["./node_modules/@flanksource/clicky-ui/oxlint-plugins/clicky-ui.js"]
+  "jsPlugins": [
+    "./node_modules/@flanksource/clicky-ui/oxlint-plugins/clicky-ui.js"
+  ]
 }
 ```
 
+In a monorepo or local sibling checkout, use the relative path from the consumer
+project to `clicky-ui/packages/ui/oxlint-plugins/clicky-ui.js`.
+
 Every rule is **opt-in** — nothing is enabled until you list it. Choose the
-severity (`"warn"` / `"error"`) per rule.
+severity (`"warn"` / `"error"`) per rule. If your script uses
+`--deny-warnings`, warning-level rules will still fail the command.
 
 ## Rules
 
-| Rule | Flags | Use instead |
-| --- | --- | --- |
-| `clicky-ui/prefer-clicky-components` | Native `<button>`, `<select>`, `<table>`, `<dialog>` that re-implement a shipped component | `Button`/`IconButton`, `Select`/`Combobox`, `DataTable`, `Modal` |
-| `clicky-ui/no-adhoc-overlay` | `role="dialog"`/`"alertdialog"`, arbitrary `z-[N]` classes, `style={{ zIndex: N }}` | `Modal`, `DropdownMenu`, `Toast`, and the `zIndex` scale |
-| `clicky-ui/prefer-tailwind-classes` | Inline `style` with **static** spacing/layout/typography values (`padding`, `margin`, `gap`, `display`, `fontWeight`, …) | Tailwind utilities + density utilities (`p-density-4`, `gap-density-2`) |
-| `clicky-ui/prefer-theme-tokens` | Hardcoded colors (`text-[#fff]`, `style={{ color: "#fff" }}`) and hand-reading the `clicky-ui-theme`/`clicky-ui-density` storage keys | Semantic tokens (`text-foreground`, `bg-background`, …) and the `useTheme`/`useDensity` hooks |
-| `clicky-ui/prefer-clicky-icons` | Icon imports from third-party libraries (lucide, react-icons, heroicons, MUI, phosphor, tabler, font-awesome, …), emoji used as icons, and raw iconify name strings (`codicon:clock`, `lucide:activity`, …) passed as a value/argument | `@flanksource/clicky-ui/icons` (`Ui*`), `@flanksource/icons/mi`, or `@iconify/react` |
+| Rule                                 | Flags                                                                                                                                                                                                                                  | Use instead                                                                                   |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `clicky-ui/prefer-clicky-components` | Native `<button>`, `<select>`, `<table>`, `<dialog>` that re-implement a shipped component                                                                                                                                             | `Button`/`IconButton`, `Select`/`Combobox`, `DataTable`, `Modal`                              |
+| `clicky-ui/no-adhoc-overlay`         | `role="dialog"`/`"alertdialog"`                                                                                                                                                                                                        | `Modal`                                                                                       |
+| `clicky-ui/no-direct-z-index`        | Overlay-scale arbitrary `z-[N]` classes, dynamic arbitrary z-index classes, raw `zIndex` imports, and `style={{ zIndex: ... }}` values that do not come from `useFloatingZIndex`                                                       | `Modal`, `DropdownMenu`, `Toast`, or `useFloatingZIndex` for floating overlay internals       |
+| `clicky-ui/prefer-tailwind-classes`  | Inline `style` with **static** spacing/layout/typography values (`padding`, `margin`, `gap`, `display`, `fontWeight`, …)                                                                                                               | Tailwind utilities + density utilities (`p-density-4`, `gap-density-2`)                       |
+| `clicky-ui/prefer-theme-tokens`      | Hardcoded colors (`text-[#fff]`, `style={{ color: "#fff" }}`) and hand-reading the `clicky-ui-theme`/`clicky-ui-density` storage keys                                                                                                  | Semantic tokens (`text-foreground`, `bg-background`, …) and the `useTheme`/`useDensity` hooks |
+| `clicky-ui/prefer-clicky-icons`      | Icon imports from third-party libraries (lucide, react-icons, heroicons, MUI, phosphor, tabler, font-awesome, …), emoji used as icons, and raw iconify name strings (`codicon:clock`, `lucide:activity`, …) passed as a value/argument | `@flanksource/clicky-ui/icons` (`Ui*`), `@flanksource/icons/mi`, or `@iconify/react`          |
 
 ### `prefer-clicky-components`
 
@@ -68,19 +106,44 @@ import { Button } from "@flanksource/clicky-ui/components";
 
 ### `no-adhoc-overlay`
 
-Overlays must share clicky-ui's centralized z-index scale (`overlay/zIndex.ts`)
-so a dropdown opened inside a modal can't render behind it. Arbitrary `z-[N]`
-Tailwind classes are doubly bad: a consumer's Tailwind build only emits the
-arbitrary classes it can scan from the published dist, so a fresh `z-[N]` may
-compile to nothing.
+Dialogs must go through `Modal` so focus handling, Escape handling and modal
+stacking are owned by clicky-ui.
 
 ```tsx
 // ✗ flagged
-<div role="dialog" className="z-[9999]">…</div>;
+<div role="dialog">
+  …
+</div>;
 
 // ✓
 import { Modal } from "@flanksource/clicky-ui/components";
-<Modal open={open} onClose={close}>…</Modal>;
+<Modal open={open} onClose={close}>
+  …
+</Modal>;
+```
+
+### `no-direct-z-index`
+
+Floating content must use clicky-ui's overlay stack so a dropdown opened inside
+a modal can't render behind it. Overlay-scale arbitrary `z-[N]` Tailwind classes
+are doubly bad: a consumer's Tailwind build only emits the arbitrary classes it
+can scan from the published dist, so a fresh global stack value may compile to
+nothing. Small local offsets such as `z-[1]` are allowed for isolated stacking
+contexts like timeline markers.
+
+```tsx
+// ✗ flagged
+<div className="z-[9999]" />;
+<div style={{ zIndex: 9999 }} />;
+<div style={{ zIndex: zIndex.popover }} />;
+
+// ✓
+import { DropdownMenu } from "@flanksource/clicky-ui/components";
+<DropdownMenu trigger={<button type="button">Open</button>}>{() => <>…</>}</DropdownMenu>;
+
+// ✓ for clicky-ui overlay internals
+const floatingZ = useFloatingZIndex();
+<div style={{ zIndex: floatingZ }} />;
 ```
 
 ### `prefer-tailwind-classes`

package/oxlint-plugins/clicky-ui-no-adhoc-overlay.js

@@ -1,58 +1,16 @@
-// clicky-ui/no-adhoc-overlay — keep overlays going through clicky-ui's Modal and
-// its centralized z-index scale (overlay/zIndex.ts) instead of hand-rolled
-// dialogs and arbitrary stacking values that silently fight the modal stack.
+// clicky-ui/no-adhoc-overlay — keep dialogs going through clicky-ui's Modal
+// instead of hand-rolled dialog markup. Z-index guardrails live in
+// clicky-ui/no-direct-z-index.
 
-import {
-  attributeName,
-  classTokens,
-  collectStrings,
-  numericLiteral,
-  propertyKey,
-  styleObject,
-} from "./clicky-ui-shared.js";
+import { attributeName } from "./clicky-ui-shared.js";
 
-// `z-[999]`, `hover:z-[999]`, `md:z-[var(--x)]` — an arbitrary Tailwind z-index.
-// Named utilities (`z-50`) are fine; only escape-hatch arbitrary values are flagged.
-const ARBITRARY_Z_CLASS = /(?:^|:)z-\[[^\]]+\]$/;
 const DIALOG_ROLES = new Set(["dialog", "alertdialog"]);
 
-/** True for an arbitrary `z-[…]` Tailwind class token (variant prefixes allowed). */
-export function isArbitraryZIndexClass(token) {
-  return typeof token === "string" && ARBITRARY_Z_CLASS.test(token);
-}
-
 /** True for a `role` value that turns a plain element into an ad-hoc dialog. */
 export function isDialogRole(value) {
   return typeof value === "string" && DIALOG_ROLES.has(value);
 }
 
-const Z_INDEX_MESSAGE =
-  "Hardcoded z-index. Use clicky-ui's overlay components (Modal, DropdownMenu, " +
-  "Toast) or the `zIndex` scale from @flanksource/clicky-ui so stacking stays " +
-  "consistent — arbitrary z-[N] classes can also be dropped by a consumer's " +
-  "Tailwind build.";
-
-function checkClassName(node, context) {
-  if (attributeName(node) !== "className" && attributeName(node) !== "class") return;
-  for (const token of classTokens(collectStrings(node.value))) {
-    if (isArbitraryZIndexClass(token)) {
-      context.report({ message: Z_INDEX_MESSAGE, node });
-      return;
-    }
-  }
-}
-
-function checkStyleZIndex(node, context) {
-  if (attributeName(node) !== "style") return;
-  const object = styleObject(node);
-  if (!object) return;
-  for (const prop of object.properties) {
-    if (propertyKey(prop) === "zIndex" && numericLiteral(prop.value) !== undefined) {
-      context.report({ message: Z_INDEX_MESSAGE, node: prop });
-    }
-  }
-}
-
 function checkDialogRole(node, context) {
   if (attributeName(node) !== "role") return;
   const value = node.value?.type === "Literal" ? node.value.value : undefined;
@@ -70,15 +28,12 @@ const rule = {
   meta: {
     type: "problem",
     docs: {
-      description:
-        "Use clicky-ui overlays and the centralized z-index scale instead of ad-hoc dialogs",
+      description: "Use clicky-ui Modal instead of hand-rolled dialog markup",
     },
   },
   create(context) {
     return {
       JSXAttribute(node) {
-        checkClassName(node, context);
-        checkStyleZIndex(node, context);
         checkDialogRole(node, context);
       },
     };

package/oxlint-plugins/clicky-ui-no-direct-z-index.js

@@ -0,0 +1,134 @@
+// clicky-ui/no-direct-z-index — prevent local stacking fixes from bypassing
+// clicky-ui's modal stack. Floating content should use DropdownMenu/Combobox/etc.
+// or `useFloatingZIndex`; raw z-index values are reserved for overlay internals.
+
+import {
+  attributeName,
+  classTokens,
+  collectStrings,
+  literalString,
+  propertyKey,
+  styleObject,
+} from "./clicky-ui-shared.js";
+
+// `z-[999]`, `hover:z-[999]`, `md:z-[var(--x)]` — overlay-scale or dynamic
+// arbitrary Tailwind z-index values. Tiny local offsets (`z-[1]`) are allowed
+// because they stay inside an isolated stacking context.
+// Anchored to the final `:`-delimited variant segment; matching the whole token
+// with `(?:^|:)` was polynomial (ReDoS) on unclosed `z-[` repetitions.
+const ARBITRARY_Z_CLASS = /^z-\[([^\]]+)\]$/;
+const FLOATING_Z_NAMES = new Set(["floatingZ", "floatingZIndex"]);
+
+/** True for an overlay-scale/dynamic arbitrary `z-[…]` token (variants allowed). */
+export function isArbitraryZIndexClass(token) {
+  if (typeof token !== "string") return false;
+  const segment = token.slice(token.lastIndexOf(":") + 1);
+  const match = ARBITRARY_Z_CLASS.exec(segment);
+  if (!match) return false;
+  const value = match[1]?.trim();
+  const numeric = Number(value);
+  if (Number.isFinite(numeric)) return Math.abs(numeric) >= 50;
+  return true;
+}
+
+/** True for imports of the raw zIndex scale, which should stay internal. */
+export function isRawZIndexImport(source, importedName, localName) {
+  if (importedName !== "zIndex" && localName !== "zIndex") return false;
+  if (typeof source !== "string") return false;
+  return source === "@flanksource/clicky-ui" || /(?:^|\/)zIndex$/.test(source);
+}
+
+function identifierName(node) {
+  return node?.type === "Identifier" ? node.name : undefined;
+}
+
+function propertyName(node) {
+  if (!node) return undefined;
+  if (node.type === "Identifier") return node.name;
+  if (node.type === "Literal" && typeof node.value === "string") return node.value;
+  return undefined;
+}
+
+function isFloatingZReference(node) {
+  const name = identifierName(node);
+  if (name && FLOATING_Z_NAMES.has(name)) return true;
+  if (node?.type !== "MemberExpression" || node.computed) return false;
+  return FLOATING_Z_NAMES.has(propertyName(node.property));
+}
+
+function isStaticLiteral(node) {
+  return (
+    node?.type === "Literal" &&
+    (typeof node.value === "number" || typeof node.value === "string")
+  );
+}
+
+/**
+ * True when a `style={{ zIndex: … }}` value sets stacking directly instead of
+ * flowing through the shared floating-layer hook.
+ */
+export function isDirectZIndexValue(node) {
+  if (!node || isFloatingZReference(node)) return false;
+  if (isStaticLiteral(node)) return true;
+  if (node.type === "Identifier") return true;
+  if (node.type === "MemberExpression") return true;
+  return false;
+}
+
+const MESSAGE =
+  "Direct z-index usage. Use clicky-ui overlay components or useFloatingZIndex " +
+  "for floating content so menus and popovers stack above active modals.";
+
+function report(context, node) {
+  context.report({ message: MESSAGE, node });
+}
+
+function checkClassName(node, context) {
+  if (attributeName(node) !== "className" && attributeName(node) !== "class") return;
+  for (const token of classTokens(collectStrings(node.value))) {
+    if (isArbitraryZIndexClass(token)) {
+      report(context, node);
+      return;
+    }
+  }
+}
+
+function checkStyleZIndex(node, context) {
+  if (attributeName(node) !== "style") return;
+  const object = styleObject(node);
+  if (!object) return;
+  for (const prop of object.properties) {
+    if (propertyKey(prop) === "zIndex" && isDirectZIndexValue(prop.value)) {
+      report(context, prop);
+    }
+  }
+}
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Use clicky-ui overlay components or useFloatingZIndex instead of direct z-index values",
+    },
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        const source = literalString(node.source);
+        for (const specifier of node.specifiers ?? []) {
+          if (specifier.type !== "ImportSpecifier") continue;
+          const importedName = propertyName(specifier.imported);
+          const localName = identifierName(specifier.local);
+          if (isRawZIndexImport(source, importedName, localName)) report(context, specifier);
+        }
+      },
+      JSXAttribute(node) {
+        checkClassName(node, context);
+        checkStyleZIndex(node, context);
+      },
+    };
+  },
+};
+
+export default rule;

package/oxlint-plugins/clicky-ui.js

@@ -8,6 +8,7 @@
 //     "rules": {
 //       "clicky-ui/prefer-clicky-components": "warn",
 //       "clicky-ui/no-adhoc-overlay": "error",
+//       "clicky-ui/no-direct-z-index": "error",
 //       "clicky-ui/prefer-tailwind-classes": "warn",
 //       "clicky-ui/prefer-theme-tokens": "error",
 //       "clicky-ui/prefer-clicky-icons": "warn"
@@ -18,6 +19,7 @@
 
 import preferClickyComponents from "./clicky-ui-prefer-components.js";
 import noAdhocOverlay from "./clicky-ui-no-adhoc-overlay.js";
+import noDirectZIndex from "./clicky-ui-no-direct-z-index.js";
 import preferTailwindClasses from "./clicky-ui-prefer-tailwind.js";
 import preferThemeTokens from "./clicky-ui-prefer-theme.js";
 import preferClickyIcons from "./clicky-ui-prefer-icons.js";
@@ -27,6 +29,7 @@ export default {
   rules: {
     "prefer-clicky-components": preferClickyComponents,
     "no-adhoc-overlay": noAdhocOverlay,
+    "no-direct-z-index": noDirectZIndex,
     "prefer-tailwind-classes": preferTailwindClasses,
     "prefer-theme-tokens": preferThemeTokens,
     "prefer-clicky-icons": preferClickyIcons,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flanksource/clicky-ui",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "description": "Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.",
   "homepage": "https://github.com/flanksource/clicky-ui#readme",
   "bugs": "https://github.com/flanksource/clicky-ui/issues",
@@ -82,6 +82,16 @@
       "import": "./dist/rpc.js",
       "require": "./dist/rpc.cjs"
     },
+    "./monaco": {
+      "types": "./dist/monaco.d.ts",
+      "import": "./dist/monaco.js",
+      "require": "./dist/monaco.cjs"
+    },
+    "./monaco/schema": {
+      "types": "./dist/monaco-schema.d.ts",
+      "import": "./dist/monaco-schema.js",
+      "require": "./dist/monaco-schema.cjs"
+    },
     "./chat": {
       "types": "./dist/chat.d.ts",
       "import": "./dist/chat.js",
@@ -106,8 +116,15 @@
     "access": "public"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/state": "^6.7.0",
+    "@codemirror/view": "^6.43.4",
     "@flanksource/icons": "1.0.60",
     "@floating-ui/react": "^0.27.19",
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@tanstack/react-query": "^5.66.8",
@@ -115,7 +132,9 @@
     "clsx": "^2.1.1",
     "dompurify": "^3.4.11",
     "jotai": "^2.20.1",
-    "tailwind-merge": "^2.6.0"
+    "monaco-yaml": "5.1.1",
+    "tailwind-merge": "^2.6.0",
+    "yaml": "^2.8.3"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.201",
@@ -129,6 +148,7 @@
     "@types/react-dom": "^18.3.1",
     "ai": "^6.0.199",
     "jsdom": "^26.0.0",
+    "monaco-editor": "0.48.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-rnd": "^10.5.3",
@@ -152,6 +172,7 @@
     "marked": "^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "monaco-editor": ">=0.48 <1",
     "react-rnd": "^10.5.0",
     "recharts": "^3.0.0",
     "shiki": "^1.24.0",
@@ -195,7 +216,9 @@
     "build": "pnpm run build:icons && vite build && vite build --mode cjs && node scripts/build-styles.mjs",
     "build:icons": "tsx scripts/build-icons.ts",
     "build:icons:force": "tsx scripts/build-icons.ts --force",
+    "build:storybook-schemas": "tsx scripts/build-storybook-schemas.ts",
     "test": "pnpm run build:icons && vitest run",
-    "check": "pnpm run build:icons && tsc -b --noEmit && oxlint src --deny-warnings"
+    "lint": "oxlint -c .oxlintrc.json src --deny-warnings",
+    "check": "pnpm run build:icons && tsc -b --noEmit && pnpm run lint"
   }
 }