@olwiba/ui 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -41,7 +41,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@olwiba/dx": "0.0.18",
+    "@olwiba/dx": "0.0.19",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
@@ -64,7 +64,7 @@
   "devDependencies": {
     "@content-collections/mdx": "^0.2.2",
     "@olwiba/cn": "0.1.21",
-    "@olwiba/docs": "0.1.29",
+    "@olwiba/docs": "0.1.31",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/app/AuthSection.tsx

@@ -113,7 +113,8 @@ function DefaultForm({
   return (
     <Card className="w-full">
       {hasPrefill && (
-        <style>{`@keyframes auth-prefill{0%{box-shadow:0 0 0 0 hsl(var(--primary)/0)}40%{box-shadow:0 0 0 3px hsl(var(--primary)/0.4)}100%{box-shadow:0 0 0 0 hsl(var(--primary)/0)}}`}</style>
+        // Theme tokens hold full color values (oklch), so opacity must come from color-mix, not hsl(var()/a)
+        <style>{`@keyframes auth-prefill{0%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 45%,transparent),0 0 16px 2px color-mix(in oklab,var(--primary) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}`}</style>
       )}
       <CardHeader>
         {brand && <div className="mb-2">{brand}</div>}

package/src/components/BrandColorSwitchMinimal.tsx

@@ -129,7 +129,9 @@ export function BrandColorSwitchMinimal() {
           <span className="relative inline-flex size-4 items-center justify-center">
             <Palette className="size-4" />
             <span
-              className="absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background"
+              className={`absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background${
+                active === 'zinc' ? ' dark:ring-white/25' : ''
+              }`}
               style={{ background: activeHex }}
             />
           </span>
@@ -147,7 +149,11 @@ export function BrandColorSwitchMinimal() {
               className="group flex flex-col items-center gap-1"
             >
               <span
-                className="flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110"
+                // Zinc's swatch is near-black — give it a border in dark mode so it
+                // doesn't vanish into the popover background (transparent in light)
+                className={`flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110${
+                  color.name === 'zinc' ? ' border border-transparent dark:border-white/25' : ''
+                }`}
                 style={{
                   background: PREVIEW_HEX[color.name],
                   boxShadow:

package/src/components/FlowBracket.tsx

@@ -8,6 +8,10 @@ export interface FlowBracketProps {
    * Defaults to 8 (near the top of the first child).
    */
   anchorTop?: number;
+  /** Per-side override for the top anchor of the left bracket. Falls back to anchorTop. */
+  anchorTopLeft?: number;
+  /** Per-side override for the top anchor of the right bracket. Falls back to anchorTop. */
+  anchorTopRight?: number;
   /**
    * Vertical anchor for the bottom connection as a percentage of the wrapper height (0–100).
    * Defaults to 92 (near the bottom of the last child).
@@ -57,6 +61,8 @@ export interface FlowBracketProps {
  */
 export function FlowBracket({
   anchorTop = 8,
+  anchorTopLeft,
+  anchorTopRight,
   anchorBottom = 92,
   extent = 22,
   arrow = true,
@@ -77,13 +83,15 @@ export function FlowBracket({
 
   const cl = colorLeft ?? color;
   const cr = colorRight ?? color;
+  const aTL = anchorTopLeft ?? anchorTop;
+  const aTR = anchorTopRight ?? anchorTop;
 
   // Left bracket: bottom → top (arrowhead at top, pointing right into genesis)
-  const leftD  = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${anchorTop} L 0,${anchorTop}`;
+  const leftD  = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${aTL} L 0,${aTL}`;
   // Right bracket: reversed = top → bottom (arrowhead at bottom, pointing left into sync)
   const rightD = reverseRight
-    ? `M 1000,${anchorTop} L ${R},${anchorTop} L ${R},${anchorBottom} L 1000,${anchorBottom}`
-    : `M 1000,${anchorBottom} L ${R},${anchorBottom} L ${R},${anchorTop} L 1000,${anchorTop}`;
+    ? `M 1000,${aTR} L ${R},${aTR} L ${R},${anchorBottom} L 1000,${anchorBottom}`
+    : `M 1000,${anchorBottom} L ${R},${anchorBottom} L ${R},${aTR} L 1000,${aTR}`;
 
   // CSS dot: extent as % of container width
   const ep = `${(extent / 10).toFixed(1)}%`;
@@ -92,22 +100,22 @@ export function FlowBracket({
   0%{top:${anchorBottom}%;left:0;opacity:0}
   6%{opacity:1}
   20%{top:${anchorBottom}%;left:-${ep}}
-  80%{top:${anchorTop}%;left:-${ep};opacity:1}
-  94%{top:${anchorTop}%;left:0;opacity:0}
-  100%{top:${anchorTop}%;left:0;opacity:0}
+  80%{top:${aTL}%;left:-${ep};opacity:1}
+  94%{top:${aTL}%;left:0;opacity:0}
+  100%{top:${aTL}%;left:0;opacity:0}
 }
 @keyframes fb-dr{
   0%{top:${anchorBottom}%;left:100%;opacity:0}
   6%{opacity:1}
   20%{top:${anchorBottom}%;left:calc(100% + ${ep})}
-  80%{top:${anchorTop}%;left:calc(100% + ${ep});opacity:1}
-  94%{top:${anchorTop}%;left:100%;opacity:0}
-  100%{top:${anchorTop}%;left:100%;opacity:0}
+  80%{top:${aTR}%;left:calc(100% + ${ep});opacity:1}
+  94%{top:${aTR}%;left:100%;opacity:0}
+  100%{top:${aTR}%;left:100%;opacity:0}
 }
 @keyframes fb-drr{
-  0%{top:${anchorTop}%;left:100%;opacity:0}
+  0%{top:${aTR}%;left:100%;opacity:0}
   6%{opacity:1}
-  20%{top:${anchorTop}%;left:calc(100% + ${ep})}
+  20%{top:${aTR}%;left:calc(100% + ${ep})}
   80%{top:${anchorBottom}%;left:calc(100% + ${ep});opacity:1}
   94%{top:${anchorBottom}%;left:100%;opacity:0}
   100%{top:${anchorBottom}%;left:100%;opacity:0}
@@ -167,7 +175,7 @@ export function FlowBracket({
         <svg
           aria-hidden
           viewBox="0 0 10 8"
-          style={{ ...arrowBase, top: `${anchorTop}%`, left: 0 }}
+          style={{ ...arrowBase, top: `${aTL}%`, left: 0 }}
         >
           <polyline points="1,1 8,4 1,7" style={{ stroke: cl }} {...chevronProps} />
         </svg>
@@ -180,7 +188,7 @@ export function FlowBracket({
           viewBox="0 0 10 8"
           style={{
             ...arrowBase,
-            top: reverseRight ? `${anchorBottom}%` : `${anchorTop}%`,
+            top: reverseRight ? `${anchorBottom}%` : `${aTR}%`,
             left: '100%',
           }}
         >

package/src/marketing/Navbar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Menu, X } from 'lucide-react';
+import { Menu } from 'lucide-react';
 import { Button, Separator, Sheet, SheetContent, SheetTrigger } from '@olwiba/cn';
 import type { AppShellRenderLink } from '../app/AppShell';
 
@@ -81,16 +81,17 @@ export function Navbar({
           </div>
         )}
 
-        {/* Mobile drawer — right column on small screens */}
+        {/* Mobile drawer — trigger on the right, panel slides in from the left */}
         <Sheet open={open} onOpenChange={setOpen}>
           <SheetTrigger asChild>
-            <Button variant="ghost" size="icon" className="justify-self-end md:hidden">
+            <Button variant="ghost" size="icon" className="col-start-3 justify-self-end md:hidden">
               <Menu className="size-5" />
               <span className="sr-only">Open menu</span>
             </Button>
           </SheetTrigger>
-          <SheetContent side="right" className="w-72">
-            <div className="flex items-center justify-between pb-4">
+          <SheetContent side="left" className="w-72">
+            {/* Brand row alone at the top — leaves the top-right corner to the built-in close */}
+            <div className="flex items-center pb-4">
               <span onClick={() => setOpen(false)} className="cursor-pointer">
                 {renderLink({
                   href: brandHref,
@@ -102,16 +103,14 @@ export function Navbar({
                   ),
                 })}
               </span>
-              <div className="flex items-center gap-1">
-                {controls?.map((control, i) => (
+            </div>
+            {controls?.length ? (
+              <div className="mb-4 flex w-full items-center justify-between gap-1">
+                {controls.map((control, i) => (
                   <React.Fragment key={i}>{control}</React.Fragment>
                 ))}
-                <Button variant="ghost" size="icon" onClick={() => setOpen(false)}>
-                  <X className="size-4" />
-                  <span className="sr-only">Close menu</span>
-                </Button>
               </div>
-            </div>
+            ) : null}
             <Separator />
             <nav className="mt-4 flex flex-col gap-1">
               {navLinks.map((link) => (