@hachej/boring-ui-kit 0.1.104 → 0.1.107

package/dist/index.js

@@ -252,7 +252,12 @@ function DialogContent({
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          // Compact viewports top-align: `fixed` resolves against the layout viewport, which
+          // the software keyboard never shrinks, so a centred dialog puts its lower half (and
+          // any footer) behind the keyboard. `sm:` restores the classic centred dialog.
+          // The height cap only subtracts `--keyboard-inset` (published on <html> by the host
+          // app, `0px` by default) so it stays a no-op for full-bleed `h-[100dvh]` consumers.
+          "fixed top-[max(1rem,env(safe-area-inset-top,0px))] left-[50%] z-50 grid max-h-[calc(100dvh-var(--keyboard-inset,0px))] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-0 gap-4 overflow-y-auto rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:top-[50%] sm:max-w-lg sm:translate-y-[-50%]",
           className
         ),
         ...props,
@@ -743,7 +748,8 @@ function CommandInput({
           {
             "data-slot": "command-input",
             className: cn(
-              "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+              // text-base below md: iOS auto-zooms the page on focus for inputs under 16px.
+              "flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-hidden md:text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
               className
             ),
             ...props
@@ -1481,10 +1487,12 @@ function Toaster({ position = "bottom-right", className }) {
       "data-testid": "toaster",
       className: cn(
         "pointer-events-none fixed z-[1000] flex w-[340px] max-w-[calc(100vw-2rem)] flex-col gap-2",
-        position === "bottom-right" && "bottom-4 right-4 items-end",
-        position === "bottom-left" && "bottom-4 left-4 items-start",
-        position === "top-right" && "top-4 right-4 items-end",
-        position === "top-left" && "top-4 left-4 items-start",
+        // Offsets stack on top of the safe area so toasts never sit in the home-indicator
+        // gesture strip, where a dismiss swipe would hit the OS instead of the toast.
+        position === "bottom-right" && "bottom-[calc(1rem+env(safe-area-inset-bottom,0px))] right-[calc(1rem+env(safe-area-inset-right,0px))] items-end",
+        position === "bottom-left" && "bottom-[calc(1rem+env(safe-area-inset-bottom,0px))] left-[calc(1rem+env(safe-area-inset-left,0px))] items-start",
+        position === "top-right" && "top-[calc(1rem+env(safe-area-inset-top,0px))] right-[calc(1rem+env(safe-area-inset-right,0px))] items-end",
+        position === "top-left" && "top-[calc(1rem+env(safe-area-inset-top,0px))] left-[calc(1rem+env(safe-area-inset-left,0px))] items-start",
         className
       ),
       children: items.map((item) => {
@@ -1802,7 +1810,10 @@ function AlertDialogContent({
         "data-slot": "alert-dialog-content",
         "data-size": size,
         className: cn(
-          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          // Mirrors dialog.tsx: compact viewports top-align so confirm dialogs
+          // (and their action buttons) cannot land behind the software keyboard;
+          // `sm:` restores the classic centred dialog.
+          "group/alert-dialog-content fixed top-[max(1rem,env(safe-area-inset-top,0px))] left-[50%] z-50 grid max-h-[calc(100dvh-var(--keyboard-inset,0px))] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-0 gap-4 overflow-y-auto rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg sm:top-[50%] sm:translate-y-[-50%]",
           className
         ),
         ...props
@@ -2099,16 +2110,20 @@ function SheetContent({
         "data-slot": "sheet-content",
         className: cn(
           "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
-          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          side === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          // Safe-area insets live on the root so the background/border still bleed to the
+          // physical screen edge while content clears the notch and home indicator.
+          side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l pt-[env(safe-area-inset-top,0px)] pr-[env(safe-area-inset-right,0px)] pb-[env(safe-area-inset-bottom,0px)] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r pt-[env(safe-area-inset-top,0px)] pb-[env(safe-area-inset-bottom,0px)] pl-[env(safe-area-inset-left,0px)] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          side === "top" && "inset-x-0 top-0 h-auto border-b pt-[env(safe-area-inset-top,0px)] pr-[env(safe-area-inset-right,0px)] pl-[env(safe-area-inset-left,0px)] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          side === "bottom" && "inset-x-0 bottom-0 h-auto border-t pr-[env(safe-area-inset-right,0px)] pb-[calc(1rem+env(safe-area-inset-bottom,0px))] pl-[env(safe-area-inset-left,0px)] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           className
         ),
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsxs15(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          showCloseButton && // Absolute positioning resolves against the padding box, so the root insets above
+          // do not move this button; it needs its own offsets to clear the notch.
+          /* @__PURE__ */ jsxs15(SheetPrimitive.Close, { className: "absolute top-[calc(1rem+env(safe-area-inset-top,0px))] right-[calc(1rem+env(safe-area-inset-right,0px))] rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
             /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", className: "text-base leading-none", children: "\xD7" }),
             /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Close" })
           ] })

package/dist/styles.css

@@ -80,8 +80,11 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
-  .top-\[50\%\] {
-    top: 50%;
+  .top-\[calc\(1rem\+env\(safe-area-inset-top\,0px\)\)\] {
+    top: calc(1rem + env(safe-area-inset-top,0px));
+  }
+  .top-\[max\(1rem\,env\(safe-area-inset-top\,0px\)\)\] {
+    top: max(1rem, env(safe-area-inset-top,0px));
   }
   .right-0 {
     right: 0px;
@@ -92,11 +95,14 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .right-\[calc\(1rem\+env\(safe-area-inset-right\,0px\)\)\] {
+    right: calc(1rem + env(safe-area-inset-right,0px));
+  }
   .bottom-0 {
     bottom: 0px;
   }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
+  .bottom-\[calc\(1rem\+env\(safe-area-inset-bottom\,0px\)\)\] {
+    bottom: calc(1rem + env(safe-area-inset-bottom,0px));
   }
   .left-0 {
     left: 0px;
@@ -104,12 +110,12 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
-  .left-4 {
-    left: calc(var(--spacing) * 4);
-  }
   .left-\[50\%\] {
     left: 50%;
   }
+  .left-\[calc\(1rem\+env\(safe-area-inset-left\,0px\)\)\] {
+    left: calc(1rem + env(safe-area-inset-left,0px));
+  }
   .z-50 {
     z-index: 50;
   }
@@ -249,6 +255,9 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
+  .h-\[100dvh\] {
+    height: 100dvh;
+  }
   .h-\[calc\(100\%-1px\)\] {
     height: calc(100% - 1px);
   }
@@ -276,6 +285,9 @@
   .max-h-\[300px\] {
     max-height: 300px;
   }
+  .max-h-\[calc\(100dvh-var\(--keyboard-inset\,0px\)\)\] {
+    max-height: calc(100dvh - var(--keyboard-inset,0px));
+  }
   .min-h-0 {
     min-height: 0px;
   }
@@ -379,8 +391,8 @@
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .translate-y-\[-50\%\] {
-    --tw-translate-y: -50%;
+  .translate-y-0 {
+    --tw-translate-y: 0px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .translate-y-\[calc\(-50\%_-_2px\)\] {
@@ -885,6 +897,9 @@
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
+  .pt-\[env\(safe-area-inset-top\,0px\)\] {
+    padding-top: env(safe-area-inset-top,0px);
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -894,12 +909,21 @@
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
+  .pr-\[env\(safe-area-inset-right\,0px\)\] {
+    padding-right: env(safe-area-inset-right,0px);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
+  .pb-\[calc\(1rem\+env\(safe-area-inset-bottom\,0px\)\)\] {
+    padding-bottom: calc(1rem + env(safe-area-inset-bottom,0px));
+  }
+  .pb-\[env\(safe-area-inset-bottom\,0px\)\] {
+    padding-bottom: env(safe-area-inset-bottom,0px);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -909,6 +933,9 @@
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
+  .pl-\[env\(safe-area-inset-left\,0px\)\] {
+    padding-left: env(safe-area-inset-left,0px);
+  }
   .text-center {
     text-align: center;
   }
@@ -1708,12 +1735,19 @@
     border-radius: 0;
   }
   @media (width >= 40rem) {
+    .sm\:top-\[50\%\] {
+      top: 50%;
+    }
     .sm\:max-w-lg {
       max-width: var(--container-lg);
     }
     .sm\:max-w-sm {
       max-width: var(--container-sm);
     }
+    .sm\:translate-y-\[-50\%\] {
+      --tw-translate-y: -50%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
     .sm\:flex-row {
       flex-direction: row;
     }

package/dist/tokens.css

@@ -8,8 +8,15 @@
  *   @import '@hachej/boring-ui-kit/tokens.css';
  *   :root { --boring-accent: oklch(0.55 0.18 250); }
  *
- * Values mirror @hachej/boring-workspace/src/globals.css (the canonical
- * theme). This file is plain CSS — no Tailwind required; the utility-name
+ * This file is the palette source of truth. Two other places restate these
+ * values and must be kept in step:
+ *   - packages/workspace/src/globals.css (the workspace :root palette)
+ *   - packages/agent/src/front/styles/globals.css (var() fallbacks that keep
+ *     standalone agent panes themed with no workspace CSS loaded)
+ * Both are enforced against this file by
+ * packages/agent/src/__tests__/theme-token-parity.test.ts.
+ *
+ * This file is plain CSS — no Tailwind required; the utility-name
  * mapping lives in styles.css (@theme inline → --boring-*).
  */
 
@@ -28,6 +35,8 @@
   --boring-muted-foreground: oklch(0.52 0.008 72);
   --boring-destructive: oklch(0.577 0.245 27.325);
   --boring-destructive-foreground: oklch(0.985 0.002 72);
+  /* Waiting-for-human attention, distinct from selected/active accent. */
+  --boring-attention: oklch(0.55 0.11 75);
   --boring-border: oklch(0.915 0.004 72);
   --boring-input: oklch(0.915 0.004 72);
   --boring-accent: oklch(0.62 0.14 65);
@@ -64,6 +73,7 @@
   --muted-foreground: var(--boring-muted-foreground);
   --destructive: var(--boring-destructive);
   --destructive-foreground: var(--boring-destructive-foreground);
+  --attention: var(--boring-attention);
   --border: var(--boring-border);
   --input: var(--boring-input);
   --accent: var(--boring-accent);
@@ -103,6 +113,7 @@
   --boring-success-soft: oklch(0.22 0.04 145);
   --boring-destructive: oklch(0.396 0.141 25.768);
   --boring-destructive-foreground: oklch(0.985 0 0);
+  --boring-attention: oklch(0.8 0.11 75);
   --boring-border: oklch(0.269 0.006 285.885);
   --boring-input: oklch(0.269 0.006 285.885);
   --boring-ring: oklch(0.72 0.13 65);
@@ -127,6 +138,7 @@
   --muted-foreground: var(--boring-muted-foreground);
   --destructive: var(--boring-destructive);
   --destructive-foreground: var(--boring-destructive-foreground);
+  --attention: var(--boring-attention);
   --border: var(--boring-border);
   --input: var(--boring-input);
   --accent: var(--boring-accent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.1.104",
+  "version": "0.1.107",
   "type": "module",
   "license": "MIT",
   "description": "Shared shadcn-style UI primitives for Boring packages and app-generated panes.",
@@ -60,7 +60,7 @@
     "react-dom": "^19.2.8",
     "tsup": "^8.4.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.9",
+    "vitest": "^4.1.11",
     "@tailwindcss/postcss": "^4.3.3",
     "postcss": "^8.5.25",
     "tailwindcss": "^4.3.3"