@nqlib/nqui 0.4.3 → 0.4.5

package/dist/sonner-CpmECDBk.js

@@ -0,0 +1,179 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as i from "react";
+import { Toaster as T } from "sonner";
+import { HugeiconsIcon as s } from "@hugeicons/react";
+import { Loading03Icon as S, MultiplicationSignCircleIcon as I, Alert02Icon as E, InformationCircleIcon as C, CheckmarkCircle02Icon as N } from "@hugeicons/core-free-icons";
+var z = (t, n, p, c, l, r, u, f) => {
+  let e = document.documentElement, g = ["light", "dark"];
+  function d(o) {
+    (Array.isArray(t) ? t : [t]).forEach((m) => {
+      let v = m === "class", k = v && r ? l.map((x) => r[x] || x) : l;
+      v ? (e.classList.remove(...k), e.classList.add(r && r[o] ? r[o] : o)) : e.setAttribute(m, o);
+    }), w(o);
+  }
+  function w(o) {
+    f && g.includes(o) && (e.style.colorScheme = o);
+  }
+  function y() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  if (c) d(c);
+  else try {
+    let o = localStorage.getItem(n) || p, m = u && o === "system" ? y() : o;
+    d(m);
+  } catch {
+  }
+}, W = i.createContext(void 0), A = { setTheme: (t) => {
+}, themes: [] }, L = () => {
+  var t;
+  return (t = i.useContext(W)) != null ? t : A;
+};
+i.memo(({ forcedTheme: t, storageKey: n, attribute: p, enableSystem: c, enableColorScheme: l, defaultTheme: r, value: u, themes: f, nonce: e, scriptProps: g }) => {
+  let d = JSON.stringify([p, n, r, t, f, u, c, l]).slice(1, -1);
+  return i.createElement("script", { ...g, suppressHydrationWarning: !0, nonce: typeof window > "u" ? e : "", dangerouslySetInnerHTML: { __html: `(${z.toString()})(${d})` } });
+});
+const b = "nqui-toast-styles-v2";
+function M() {
+  if (typeof document > "u" || document.getElementById(b)) return;
+  const t = document.createElement("style");
+  t.id = b, t.textContent = `
+      /* Pill toast — inverted surface: dark-on-light app, light-on-dark app */
+      [data-sonner-toast] .cn-toast {
+        border: 1px solid color-mix(in oklch, var(--normal-text) 18%, transparent) !important;
+        border-radius: 9999px !important;
+        box-shadow:
+          0 1px 0 0 color-mix(in oklch, var(--normal-text) 12%, transparent),
+          0 1px 2px 0 oklch(0.15 0 0 / 0.08);
+        transition: all 200ms ease-in-out !important;
+      }
+
+      .dark [data-sonner-toast] .cn-toast {
+        box-shadow:
+          0 1px 0 0 color-mix(in oklch, var(--normal-text) 14%, transparent),
+          0 1px 2px 0 oklch(0.15 0 0 / 0.12);
+      }
+
+      [data-sonner-toast] .cn-toast.toast-success {
+        border-left-width: 3px !important;
+        border-left-color: var(--success-500) !important;
+      }
+
+      [data-sonner-toast] .cn-toast.toast-error {
+        border-left-width: 3px !important;
+        border-left-color: var(--danger-500) !important;
+      }
+
+      [data-sonner-toast] .cn-toast.toast-warning {
+        border-left-width: 3px !important;
+        border-left-color: var(--warning-500) !important;
+      }
+
+      [data-sonner-toast] .cn-toast.toast-info {
+        border-left-width: 3px !important;
+        border-left-color: var(--info-500) !important;
+      }
+
+      [data-sonner-toast] .cn-toast.toast-loading {
+        border-left-width: 3px !important;
+        border-left-color: var(--primary-500) !important;
+      }
+
+      .cn-toast .toast-icon-success { color: var(--success); }
+      .cn-toast .toast-icon-error { color: var(--destructive); }
+      .cn-toast .toast-icon-warning { color: var(--warning); }
+      .cn-toast .toast-icon-info { color: var(--info); }
+      .cn-toast .toast-icon-loading { color: var(--primary); }
+    `, document.head.appendChild(t);
+}
+const h = ({ ...t }) => {
+  const { theme: n = "system" } = L();
+  return i.useEffect(() => {
+    M();
+  }, []), /* @__PURE__ */ a(
+    T,
+    {
+      theme: n,
+      className: "toaster group",
+      icons: {
+        success: /* @__PURE__ */ a(
+          s,
+          {
+            icon: N,
+            strokeWidth: 2,
+            className: "size-4 text-success toast-icon-success"
+          }
+        ),
+        info: /* @__PURE__ */ a(
+          s,
+          {
+            icon: C,
+            strokeWidth: 2,
+            className: "size-4 text-info toast-icon-info"
+          }
+        ),
+        warning: /* @__PURE__ */ a(
+          s,
+          {
+            icon: E,
+            strokeWidth: 2,
+            className: "size-4 text-warning toast-icon-warning"
+          }
+        ),
+        error: /* @__PURE__ */ a(
+          s,
+          {
+            icon: I,
+            strokeWidth: 2,
+            className: "size-4 text-destructive toast-icon-error"
+          }
+        ),
+        loading: /* @__PURE__ */ a(
+          s,
+          {
+            icon: S,
+            strokeWidth: 2,
+            className: "size-4 text-primary toast-icon-loading animate-spin"
+          }
+        )
+      },
+      style: {
+        /* Invert page chrome: light UI → dark toast; dark UI → light toast */
+        "--normal-bg": "var(--foreground)",
+        "--normal-text": "var(--background)",
+        "--normal-border": "color-mix(in oklch, var(--background) 25%, transparent)",
+        "--border-radius": "9999px",
+        "--success-bg": "var(--success)",
+        "--success-text": "var(--success-foreground)",
+        "--success-border": "var(--success-400)",
+        "--error-bg": "var(--destructive)",
+        "--error-text": "var(--destructive-foreground)",
+        "--error-border": "var(--danger-400)",
+        "--warning-bg": "var(--warning)",
+        "--warning-text": "var(--warning-foreground)",
+        "--warning-border": "var(--warning-400)",
+        "--info-bg": "var(--info)",
+        "--info-text": "var(--info-foreground)",
+        "--info-border": "var(--info-400)"
+      },
+      toastOptions: {
+        classNames: {
+          toast: "cn-toast",
+          success: "toast-success",
+          error: "toast-error",
+          warning: "toast-warning",
+          info: "toast-info",
+          loading: "toast-loading"
+        }
+      },
+      ...t
+    }
+  );
+};
+h.displayName = "Toaster";
+const j = h, P = h;
+export {
+  P as E,
+  h as T,
+  j as a,
+  L as z
+};

package/dist/sonner-nE9hIalJ.cjs

@@ -0,0 +1,48 @@
+"use strict";const c=require("react/jsx-runtime"),T=require("react"),j=require("sonner"),i=require("@hugeicons/react"),l=require("@hugeicons/core-free-icons");function E(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(o,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return o.default=t,Object.freeze(o)}const d=E(T);var N=(t,o,r,n,u,a,f,x)=>{let s=document.documentElement,h=["light","dark"];function m(e){(Array.isArray(t)?t:[t]).forEach(p=>{let v=p==="class",S=v&&a?u.map(b=>a[b]||b):u;v?(s.classList.remove(...S),s.classList.add(a&&a[e]?a[e]:e)):s.setAttribute(p,e)}),k(e)}function k(e){x&&h.includes(e)&&(s.style.colorScheme=e)}function I(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(n)m(n);else try{let e=localStorage.getItem(o)||r,p=f&&e==="system"?I():e;m(p)}catch{}},C=d.createContext(void 0),O={setTheme:t=>{},themes:[]},y=()=>{var t;return(t=d.useContext(C))!=null?t:O};d.memo(({forcedTheme:t,storageKey:o,attribute:r,enableSystem:n,enableColorScheme:u,defaultTheme:a,value:f,themes:x,nonce:s,scriptProps:h})=>{let m=JSON.stringify([r,o,a,t,x,f,n,u]).slice(1,-1);return d.createElement("script",{...h,suppressHydrationWarning:!0,nonce:typeof window>"u"?s:"",dangerouslySetInnerHTML:{__html:`(${N.toString()})(${m})`}})});const w="nqui-toast-styles-v2";function z(){if(typeof document>"u"||document.getElementById(w))return;const t=document.createElement("style");t.id=w,t.textContent=`
+      /* Pill toast — inverted surface: dark-on-light app, light-on-dark app */
+      [data-sonner-toast] .cn-toast {
+        border: 1px solid color-mix(in oklch, var(--normal-text) 18%, transparent) !important;
+        border-radius: 9999px !important;
+        box-shadow:
+          0 1px 0 0 color-mix(in oklch, var(--normal-text) 12%, transparent),
+          0 1px 2px 0 oklch(0.15 0 0 / 0.08);
+        transition: all 200ms ease-in-out !important;
+      }
+
+      .dark [data-sonner-toast] .cn-toast {
+        box-shadow:
+          0 1px 0 0 color-mix(in oklch, var(--normal-text) 14%, transparent),
+          0 1px 2px 0 oklch(0.15 0 0 / 0.12);
+      }
+
+      [data-sonner-toast] .cn-toast.toast-success {
+        border-left-width: 3px !important;
+        border-left-color: var(--success-500) !important;
+      }
+
+      [data-sonner-toast] .cn-toast.toast-error {
+        border-left-width: 3px !important;
+        border-left-color: var(--danger-500) !important;
+      }
+
+      [data-sonner-toast] .cn-toast.toast-warning {
+        border-left-width: 3px !important;
+        border-left-color: var(--warning-500) !important;
+      }
+
+      [data-sonner-toast] .cn-toast.toast-info {
+        border-left-width: 3px !important;
+        border-left-color: var(--info-500) !important;
+      }
+
+      [data-sonner-toast] .cn-toast.toast-loading {
+        border-left-width: 3px !important;
+        border-left-color: var(--primary-500) !important;
+      }
+
+      .cn-toast .toast-icon-success { color: var(--success); }
+      .cn-toast .toast-icon-error { color: var(--destructive); }
+      .cn-toast .toast-icon-warning { color: var(--warning); }
+      .cn-toast .toast-icon-info { color: var(--info); }
+      .cn-toast .toast-icon-loading { color: var(--primary); }
+    `,document.head.appendChild(t)}const g=({...t})=>{const{theme:o="system"}=y();return d.useEffect(()=>{z()},[]),c.jsx(j.Toaster,{theme:o,className:"toaster group",icons:{success:c.jsx(i.HugeiconsIcon,{icon:l.CheckmarkCircle02Icon,strokeWidth:2,className:"size-4 text-success toast-icon-success"}),info:c.jsx(i.HugeiconsIcon,{icon:l.InformationCircleIcon,strokeWidth:2,className:"size-4 text-info toast-icon-info"}),warning:c.jsx(i.HugeiconsIcon,{icon:l.Alert02Icon,strokeWidth:2,className:"size-4 text-warning toast-icon-warning"}),error:c.jsx(i.HugeiconsIcon,{icon:l.MultiplicationSignCircleIcon,strokeWidth:2,className:"size-4 text-destructive toast-icon-error"}),loading:c.jsx(i.HugeiconsIcon,{icon:l.Loading03Icon,strokeWidth:2,className:"size-4 text-primary toast-icon-loading animate-spin"})},style:{"--normal-bg":"var(--foreground)","--normal-text":"var(--background)","--normal-border":"color-mix(in oklch, var(--background) 25%, transparent)","--border-radius":"9999px","--success-bg":"var(--success)","--success-text":"var(--success-foreground)","--success-border":"var(--success-400)","--error-bg":"var(--destructive)","--error-text":"var(--destructive-foreground)","--error-border":"var(--danger-400)","--warning-bg":"var(--warning)","--warning-text":"var(--warning-foreground)","--warning-border":"var(--warning-400)","--info-bg":"var(--info)","--info-text":"var(--info-foreground)","--info-border":"var(--info-400)"},toastOptions:{classNames:{toast:"cn-toast",success:"toast-success",error:"toast-error",warning:"toast-warning",info:"toast-info",loading:"toast-loading"}},...t})};g.displayName="Toaster";const H=g,_=g;exports.EnhancedSonner=_;exports.EnhancedToaster=H;exports.Toaster=g;exports.z=y;

package/dist/sonner.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./sonner-DbQhVp8m.cjs");exports.CoreToaster=e.Toaster;exports.EnhancedSonner=e.EnhancedToaster;exports.Toaster=e.EnhancedToaster;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./sonner-nE9hIalJ.cjs");exports.CoreToaster=e.Toaster;exports.EnhancedSonner=e.EnhancedSonner;exports.EnhancedToaster=e.EnhancedToaster;exports.Toaster=e.Toaster;

package/dist/sonner.es.js

@@ -1,6 +1,7 @@
-import { T as o, E as r, E as s } from "./sonner-Co6YpYVs.js";
+import { T as o, E as r, a as s, T as n } from "./sonner-CpmECDBk.js";
 export {
   o as CoreToaster,
   r as EnhancedSonner,
-  s as Toaster
+  s as EnhancedToaster,
+  n as Toaster
 };

package/dist/styles.css

@@ -12,6 +12,7 @@
  * - Light and dark mode support
  * - Base layer styles
  * - Utility animations
+ * - Hit-area @utility blocks (inlined from src/styles/hit-area.css)
  * - @source inline() directives for zero-config Tailwind utility generation
  *
  * Generated by: npm run build:lib
@@ -36,13 +37,13 @@
 @source inline("border border-primary border-secondary border-destructive border-success border-warning border-info border-border border-input border-ring rounded-md rounded-lg rounded-full");
 
 /* Background color utilities */
-@source inline("bg-primary bg-secondary bg-destructive bg-success bg-warning bg-info bg-background bg-accent bg-transparent bg-none bg-muted bg-input bg-input/20 dark:bg-input/30");
+@source inline("bg-primary bg-secondary bg-destructive bg-success bg-warning bg-info bg-background bg-accent bg-transparent bg-none bg-muted bg-input bg-input/20 dark:bg-input/30 mid:bg-input/30");
 
 /* Text color utilities */
 @source inline("text-primary-foreground text-secondary-foreground text-destructive-foreground text-success-foreground text-warning-foreground text-info-foreground text-accent-foreground text-muted-foreground text-foreground");
 
 /* Hover state utilities */
-@source inline("hover:opacity-100 hover:bg-primary/90 hover:bg-secondary/90 hover:bg-destructive/90 hover:bg-success/90 hover:bg-warning/90 hover:bg-info/90 hover:bg-accent hover:bg-muted hover:border-primary/90 hover:border-secondary/90 hover:border-destructive/90 hover:border-success/90 hover:border-warning/90 hover:border-info/90 hover:border-border hover:text-accent-foreground hover:text-muted-foreground hover:underline dark:hover:bg-muted/50");
+@source inline("hover:opacity-100 hover:bg-primary/90 hover:bg-secondary/90 hover:bg-destructive/90 hover:bg-success/90 hover:bg-warning/90 hover:bg-info/90 hover:bg-accent hover:bg-muted hover:border-primary/90 hover:border-secondary/90 hover:border-destructive/90 hover:border-success/90 hover:border-warning/90 hover:border-info/90 hover:border-border hover:text-accent-foreground hover:text-muted-foreground hover:underline dark:hover:bg-muted/50 mid:hover:bg-muted/50");
 
 /* Focus state utilities */
 @source inline("focus:bg-primary/80 focus:bg-secondary/80 focus:bg-destructive/80 focus:bg-success/80 focus:bg-warning/80 focus:bg-info/80 focus:border-primary/80 focus:border-secondary/80 focus:border-destructive/80 focus:border-success/80 focus:border-warning/80 focus:border-info/80 focus:border-border focus:outline-0 focus-visible:outline-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]");
@@ -63,14 +64,154 @@
 @source inline("[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&>svg]:size-2.5");
 
 /* Group & State utilities */
-@source inline("group/badge has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive");
+@source inline("group/badge has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 mid:aria-invalid:ring-destructive/40 aria-invalid:border-destructive");
 
 /* Z-index elevation utilities */
 @source inline("z-[var(--z-debug)] z-[var(--z-sticky-page)] z-[var(--z-background)] z-[var(--z-content)] z-[var(--z-popover)] z-[var(--z-modal-backdrop)] z-[var(--z-modal)] z-[var(--z-tooltip)] z-[var(--z-sticky-content)] z-[var(--z-floating)]");
 
+/* Hit-area utilities (referenced from TSX / docs; @utility defines behavior) */
+@source inline("hit-area-4 hit-area-6 hit-area-debug");
+
 
 
 /* Custom dark mode variant - matches when .dark class is on element or ancestor */
+/* Mid theme (warm paper) — matches when .mid class is on element or ancestor; palette from mind-canvas */
+/* Hit-area — https://bazza.dev/craft/2026/hit-area */
+/* Bazza hit-area utilities — https://bazza.dev/craft/2026/hit-area */
+
+@utility hit-area-debug {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+    @apply border border-dashed border-blue-500 bg-blue-500/10;
+  }
+  &:hover::before {
+    @apply border border-dashed border-green-500 bg-green-500/10;
+  }
+}
+
+@utility hit-area {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1);
+  --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-l-* {
+  position: relative;
+  --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-r-* {
+  position: relative;
+  --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-t-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-b-* {
+  position: relative;
+  --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-x-* {
+  position: relative;
+  --hit-area-l: --spacing(--value(number) * -1); --hit-area-l: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1); --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-y-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1); --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1); --hit-area-b: calc(--value([*]) * -1);
+  &::before {
+    content: "";
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
 @theme inline {
     --font-sans: 'Inter Variable', sans-serif;
     --color-sidebar-ring: var(--sidebar-ring);
@@ -455,6 +596,48 @@
     }
   }
 
+  /* Spinner — dual arc (Uiverse-style), primary gradient */
+  @keyframes nqui-spinner-rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes nqui-spinner-dash-first {
+    0%,
+    100% {
+      stroke-dashoffset: 50;
+    }
+    50% {
+      stroke-dashoffset: 625;
+    }
+  }
+
+  @keyframes nqui-spinner-dash-second {
+    0%,
+    100% {
+      stroke-dashoffset: -625;
+    }
+    50% {
+      stroke-dashoffset: -50;
+    }
+  }
+
+  .nqui-spinner-rotate {
+    animation: nqui-spinner-rotate 2s linear infinite;
+  }
+
+  .nqui-spinner-arc-first circle {
+    animation: nqui-spinner-dash-first 3s ease-in-out infinite;
+  }
+
+  .nqui-spinner-arc-second circle {
+    animation: nqui-spinner-dash-second 3s ease-in-out infinite;
+  }
+
   /* Toast Icon Animations */
   .toast-icon-success {
     animation: toast-checkmark 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
@@ -541,6 +724,7 @@
     position: absolute;
     z-index: 0;
     pointer-events: none;
+    overflow: visible;
     transition:
       left 0.3s ease-in-out,
       top 0.3s ease-in-out,
@@ -550,6 +734,8 @@
 
   .sliding-indicator-container {
     position: relative;
+    overflow: hidden;
+    min-width: 0;
   }
 
   .sliding-indicator-target {
@@ -838,13 +1024,13 @@
     /* System UI colors (unique to index.css) */
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
-    --card: oklch(0.99 0 0);
+    --card: oklch(0.98 0 0);
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
     --secondary: oklch(0.967 0.001 286.375);
     --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.97 0 0);
+    --muted: oklch(0.95 0 0);
     --muted-foreground: oklch(0.556 0 0);
     --accent: oklch(0.96 0 0);
     --accent-foreground: oklch(0.205 0 0);
@@ -862,7 +1048,7 @@
     --radius: 0.45rem;
 
     /* Sidebar */
-    --sidebar: oklch(0.985 0 0);
+    --sidebar: oklch(0.98 0 0);
     --sidebar-foreground: oklch(0.145 0 0);
     --sidebar-primary: var(--primary);
     --sidebar-primary-foreground: var(--primary-foreground);
@@ -948,7 +1134,7 @@
     /* Additional variables from index.css */
     /* System UI colors for dark mode (unique to index.css)
        Softened foreground (oklch 0.92 ≈ #e6e6e6) for reduced eye strain vs near-pure white */
-    --background: oklch(0.145 0 0);
+    --background: oklch(0.16 0 0);
     --foreground: oklch(0.92 0 0);
     --card: oklch(0.205 0 0);
     --card-foreground: oklch(0.92 0 0);
@@ -956,12 +1142,12 @@
     --popover-foreground: oklch(0.92 0 0);
     --secondary: oklch(0.274 0.006 286.033);
     --secondary-foreground: oklch(0.92 0 0);
-    --muted: oklch(0.269 0 0);
+    --muted: oklch(0.24 0 0);
     --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.371 0 0);
+    --accent: oklch(0.27 0 0);
     --accent-foreground: oklch(0.92 0 0);
     --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
+    --input: oklch(1 0 0 / 0.07);
 
     /* Chart colors (same for both modes) */
     --chart-1: oklch(0.809 0.105 251.813);
@@ -980,3 +1166,44 @@
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
 }
+
+/*
+ * Mid theme — light-mode layout (same token roles as :root), with warm paper chroma
+ * (mind-canvas–inspired oklch). Use class="mid" on <html> or an ancestor; do not
+ * combine with .dark on the same root. Destructive/success/warning/info come from
+ * colors.css like default light.
+ */
+.mid {
+    /* Surfaces: parallel to :root — slightly lower L and mild hue vs neutral light */
+    --background: oklch(0.9574 0.0081 73.16);
+    --foreground: oklch(0.2416 0.0219 57);
+    --card: oklch(0.9792 0.0042 78.3);
+    --card-foreground: oklch(0.2416 0.0219 57);
+    --popover: oklch(0.9792 0.0042 78.3);
+    --popover-foreground: oklch(0.2416 0.0219 57);
+    --secondary: oklch(0.927 0.009 73.15);
+    --secondary-foreground: oklch(0.3067 0.0309 56.81);
+    --muted: oklch(0.9111 0.0082 73.15);
+    --muted-foreground: oklch(0.5576 0.0222 57.81);
+    --accent: oklch(0.4789 0.0623 56.16);
+    --accent-foreground: oklch(0.9792 0.0042 78.3);
+    --border: oklch(0.89 0.0137 73.1);
+    --input: oklch(0.89 0.0137 73.1);
+
+    /* Charts: same as light (:root) */
+    --chart-1: oklch(0.809 0.105 251.813);
+    --chart-2: oklch(0.623 0.214 259.815);
+    --chart-3: oklch(0.546 0.245 262.881);
+    --chart-4: oklch(0.488 0.243 264.376);
+    --chart-5: oklch(0.424 0.199 265.638);
+
+    /* Sidebar: same structure as :root (light) — primary via semantic tokens, ring follows focus */
+    --sidebar: oklch(0.985 0.002 78);
+    --sidebar-foreground: oklch(0.2416 0.0219 57);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--primary-foreground);
+    --sidebar-accent: oklch(0.96 0.004 75);
+    --sidebar-accent-foreground: oklch(0.205 0.015 55);
+    --sidebar-border: oklch(0.89 0.0137 73.1);
+    --sidebar-ring: var(--ring);
+}