@open-mercato/ui 0.7.1-develop.7191.1.3c9346566b → 0.7.1-develop.7194.1.ab4fc81f82

package/dist/primitives/sheet.js

@@ -12,6 +12,7 @@ const SheetPortal = DialogPrimitive.Portal;
 const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
+    "data-slot": "sheet-overlay",
     className: cn(
       "fixed inset-x-0 bottom-0 top-[var(--topbar-height,0px)] z-overlay bg-black/40 backdrop-blur-sm",
       "data-[state=open]:animate-in data-[state=closed]:animate-out",
@@ -45,17 +46,26 @@ const sheetVariants = cva(
 );
 const SheetContent = React.forwardRef(({ side = "right", className, children, hideClose = false, closeLabel = "Close", ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
   /* @__PURE__ */ jsx(SheetOverlay, {}),
-  /* @__PURE__ */ jsxs(DialogPrimitive.Content, { ref, className: cn(sheetVariants({ side }), className), ...props, children: [
-    children,
-    !hideClose ? /* @__PURE__ */ jsx(
-      DialogPrimitive.Close,
-      {
-        className: "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:shadow-focus",
-        "aria-label": closeLabel,
-        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
-      }
-    ) : null
-  ] })
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      "data-slot": "sheet-content",
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        !hideClose ? /* @__PURE__ */ jsx(
+          DialogPrimitive.Close,
+          {
+            className: "absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:shadow-focus",
+            "aria-label": closeLabel,
+            children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+          }
+        ) : null
+      ]
+    }
+  )
 ] }));
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 const SheetHeader = React.forwardRef(

package/dist/primitives/sheet.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/sheet.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { X } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst Sheet = DialogPrimitive.Root\n\nconst SheetTrigger = DialogPrimitive.Trigger\n\nconst SheetClose = DialogPrimitive.Close\n\nconst SheetPortal = DialogPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    className={cn(\n      'fixed inset-x-0 bottom-0 top-[var(--topbar-height,0px)] z-overlay bg-black/40 backdrop-blur-sm',\n      'data-[state=open]:animate-in data-[state=closed]:animate-out',\n      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className,\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  cn(\n    'fixed z-modal flex flex-col gap-4 bg-background shadow-lg transition ease-in-out',\n    'data-[state=open]:animate-in data-[state=closed]:animate-out',\n    'data-[state=closed]:duration-200 data-[state=open]:duration-300',\n  ),\n  {\n    variants: {\n      side: {\n        top:\n          'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left:\n          'top-[var(--topbar-height,0px)] bottom-0 left-0 w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',\n        right:\n          'top-[var(--topbar-height,0px)] bottom-0 right-0 w-full sm:max-w-md border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  }\n)\n\nexport type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &\n  VariantProps<typeof sheetVariants> & {\n    /** Hide the built-in close (X) button \u2014 useful when the consumer renders its own close affordance. */\n    hideClose?: boolean\n    /** Override the aria-label for the built-in close button. */\n    closeLabel?: string\n  }\n\n/**\n * SheetContent \u2014 side-anchored Radix Dialog wrapper.\n *\n * Topbar integration: the `left` and `right` variants anchor at\n * `top: var(--topbar-height, 0px)` so a sticky app topbar stays visible above\n * the panel. Consumers that render inside `AppShell` get the correct offset\n * because the shell sets `--topbar-height` on the outer container. Surfaces\n * outside the shell (portal modals, marketing pages, standalone embeds) keep\n * the default `0px` fallback and align to the viewport top \u2014 that is the\n * correct behavior when there is no topbar to clear.\n *\n * To opt into the offset from your own layout, set the CSS variable on any\n * ancestor of `<SheetContent>`:\n *\n * ```css\n * .my-shell { --topbar-height: 60px; }\n * ```\n */\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  SheetContentProps\n>(({ side = 'right', className, children, hideClose = false, closeLabel = 'Close', ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <DialogPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>\n      {children}\n      {!hideClose ? (\n        <DialogPrimitive.Close\n          className=\"absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:shadow-focus\"\n          aria-label={closeLabel}\n        >\n          <X className=\"size-4\" aria-hidden=\"true\" />\n        </DialogPrimitive.Close>\n      ) : null}\n    </DialogPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = DialogPrimitive.Content.displayName\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex flex-col gap-1.5 border-b px-4 py-3 pr-12 text-left', className)}\n      {...props}\n    />\n  ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex flex-col-reverse gap-2 border-t px-4 py-3 sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  ),\n)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-base font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = DialogPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n  sheetVariants,\n}\n"],
-  "mappings": ";AAoBE,cAuEE,YAvEF;AAlBF,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,WAA8B;AACvC,SAAS,SAAS;AAClB,SAAS,UAAU;AAEnB,MAAM,QAAQ,gBAAgB;AAE9B,MAAM,eAAe,gBAAgB;AAErC,MAAM,aAAa,gBAAgB;AAEnC,MAAM,cAAc,gBAAgB;AAEpC,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IACJ;AAAA;AACF,CACD;AACD,aAAa,cAAc,gBAAgB,QAAQ;AAEnD,MAAM,gBAAgB;AAAA,EACpB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KACE;AAAA,QACF,QACE;AAAA,QACF,MACE;AAAA,QACF,OACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AA6BA,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,OAAO,SAAS,WAAW,UAAU,YAAY,OAAO,aAAa,SAAS,GAAG,MAAM,GAAG,QAC7F,qBAAC,eACC;AAAA,sBAAC,gBAAa;AAAA,EACd,qBAAC,gBAAgB,SAAhB,EAAwB,KAAU,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS,GAAI,GAAG,OACvF;AAAA;AAAA,IACA,CAAC,YACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAU;AAAA,QACV,cAAY;AAAA,QAEZ,8BAAC,KAAE,WAAU,UAAS,eAAY,QAAO;AAAA;AAAA,IAC3C,IACE;AAAA,KACN;AAAA,GACF,CACD;AACD,aAAa,cAAc,gBAAgB,QAAQ;AAEnD,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,4DAA4D,SAAS;AAAA,MAClF,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,YAAY,cAAc;AAE1B,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,6EAA6E,SAAS;AAAA,MACnG,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,YAAY,cAAc;AAE1B,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,IACjE,GAAG;AAAA;AACN,CACD;AACD,WAAW,cAAc,gBAAgB,MAAM;AAE/C,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAAc,gBAAgB,YAAY;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { X } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst Sheet = DialogPrimitive.Root\n\nconst SheetTrigger = DialogPrimitive.Trigger\n\nconst SheetClose = DialogPrimitive.Close\n\nconst SheetPortal = DialogPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    data-slot=\"sheet-overlay\"\n    className={cn(\n      'fixed inset-x-0 bottom-0 top-[var(--topbar-height,0px)] z-overlay bg-black/40 backdrop-blur-sm',\n      'data-[state=open]:animate-in data-[state=closed]:animate-out',\n      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className,\n    )}\n    {...props}\n    ref={ref}\n  />\n))\nSheetOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n  cn(\n    'fixed z-modal flex flex-col gap-4 bg-background shadow-lg transition ease-in-out',\n    'data-[state=open]:animate-in data-[state=closed]:animate-out',\n    'data-[state=closed]:duration-200 data-[state=open]:duration-300',\n  ),\n  {\n    variants: {\n      side: {\n        top:\n          'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left:\n          'top-[var(--topbar-height,0px)] bottom-0 left-0 w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',\n        right:\n          'top-[var(--topbar-height,0px)] bottom-0 right-0 w-full sm:max-w-md border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  }\n)\n\nexport type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &\n  VariantProps<typeof sheetVariants> & {\n    /** Hide the built-in close (X) button \u2014 useful when the consumer renders its own close affordance. */\n    hideClose?: boolean\n    /** Override the aria-label for the built-in close button. */\n    closeLabel?: string\n  }\n\n/**\n * SheetContent \u2014 side-anchored Radix Dialog wrapper.\n *\n * Topbar integration: the `left` and `right` variants anchor at\n * `top: var(--topbar-height, 0px)` so a sticky app topbar stays visible above\n * the panel. Consumers that render inside `AppShell` get the correct offset\n * because the shell sets `--topbar-height` on the outer container. Surfaces\n * outside the shell (portal modals, marketing pages, standalone embeds) keep\n * the default `0px` fallback and align to the viewport top \u2014 that is the\n * correct behavior when there is no topbar to clear.\n *\n * To opt into the offset from your own layout, set the CSS variable on any\n * ancestor of `<SheetContent>`:\n *\n * ```css\n * .my-shell { --topbar-height: 60px; }\n * ```\n */\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  SheetContentProps\n>(({ side = 'right', className, children, hideClose = false, closeLabel = 'Close', ...props }, ref) => (\n  <SheetPortal>\n    <SheetOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      data-slot=\"sheet-content\"\n      className={cn(sheetVariants({ side }), className)}\n      {...props}\n    >\n      {children}\n      {!hideClose ? (\n        <DialogPrimitive.Close\n          className=\"absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:shadow-focus\"\n          aria-label={closeLabel}\n        >\n          <X className=\"size-4\" aria-hidden=\"true\" />\n        </DialogPrimitive.Close>\n      ) : null}\n    </DialogPrimitive.Content>\n  </SheetPortal>\n))\nSheetContent.displayName = DialogPrimitive.Content.displayName\n\nconst SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex flex-col gap-1.5 border-b px-4 py-3 pr-12 text-left', className)}\n      {...props}\n    />\n  ),\n)\nSheetHeader.displayName = 'SheetHeader'\n\nconst SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex flex-col-reverse gap-2 border-t px-4 py-3 sm:flex-row sm:justify-end', className)}\n      {...props}\n    />\n  ),\n)\nSheetFooter.displayName = 'SheetFooter'\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-base font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nSheetTitle.displayName = DialogPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n))\nSheetDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n  sheetVariants,\n}\n"],
+  "mappings": ";AAoBE,cAwEE,YAxEF;AAlBF,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,WAA8B;AACvC,SAAS,SAAS;AAClB,SAAS,UAAU;AAEnB,MAAM,QAAQ,gBAAgB;AAE9B,MAAM,eAAe,gBAAgB;AAErC,MAAM,aAAa,gBAAgB;AAEnC,MAAM,cAAc,gBAAgB;AAEpC,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC,aAAU;AAAA,IACV,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IACJ;AAAA;AACF,CACD;AACD,aAAa,cAAc,gBAAgB,QAAQ;AAEnD,MAAM,gBAAgB;AAAA,EACpB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KACE;AAAA,QACF,QACE;AAAA,QACF,MACE;AAAA,QACF,OACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AA6BA,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,OAAO,SAAS,WAAW,UAAU,YAAY,OAAO,aAAa,SAAS,GAAG,MAAM,GAAG,QAC7F,qBAAC,eACC;AAAA,sBAAC,gBAAa;AAAA,EACd;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MAC/C,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,CAAC,YACA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,WAAU;AAAA,YACV,cAAY;AAAA,YAEZ,8BAAC,KAAE,WAAU,UAAS,eAAY,QAAO;AAAA;AAAA,QAC3C,IACE;AAAA;AAAA;AAAA,EACN;AAAA,GACF,CACD;AACD,aAAa,cAAc,gBAAgB,QAAQ;AAEnD,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,4DAA4D,SAAS;AAAA,MAClF,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,YAAY,cAAc;AAE1B,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,6EAA6E,SAAS;AAAA,MACnG,GAAG;AAAA;AAAA,EACN;AAEJ;AACA,YAAY,cAAc;AAE1B,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,2CAA2C,SAAS;AAAA,IACjE,GAAG;AAAA;AACN,CACD;AACD,WAAW,cAAc,gBAAgB,MAAM;AAE/C,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B;AAAA,EAAC,gBAAgB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAAc,gBAAgB,YAAY;",
   "names": []
 }

package/dist/primitives/textarea.js

@@ -3,29 +3,79 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "@open-mercato/shared/lib/utils";
 const baseTextareaClass = "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-colors placeholder:text-muted-foreground outline-none focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground hover:bg-muted/40 disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive resize-y min-h-[80px]";
+const DEFAULT_AUTO_RESIZE_MAX_ROWS = 12;
+const FALLBACK_LINE_HEIGHT_PX = 20;
+function readPixels(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function applyAutoResize(element, maxRows) {
+  if (!element) return;
+  const computed = typeof window !== "undefined" ? window.getComputedStyle(element) : null;
+  const lineHeight = computed ? readPixels(computed.lineHeight) || FALLBACK_LINE_HEIGHT_PX : FALLBACK_LINE_HEIGHT_PX;
+  const padding = computed ? readPixels(computed.paddingTop) + readPixels(computed.paddingBottom) : 0;
+  const border = computed ? readPixels(computed.borderTopWidth) + readPixels(computed.borderBottomWidth) : 0;
+  const maxContentHeight = lineHeight * Math.max(1, maxRows) + padding;
+  element.style.height = "auto";
+  const contentHeight = element.scrollHeight;
+  const cappedHeight = Math.min(contentHeight, maxContentHeight);
+  element.style.height = `${cappedHeight + border}px`;
+  element.style.overflowY = contentHeight > maxContentHeight ? "auto" : "hidden";
+}
 const Textarea = React.forwardRef(
-  ({ className, showCount, wrapperClassName, value, defaultValue, maxLength, onChange, ...props }, ref) => {
+  ({
+    className,
+    showCount,
+    wrapperClassName,
+    autoResize,
+    maxRows = DEFAULT_AUTO_RESIZE_MAX_ROWS,
+    value,
+    defaultValue,
+    maxLength,
+    onChange,
+    ...props
+  }, ref) => {
     const [internalValue, setInternalValue] = React.useState(
       typeof defaultValue === "string" ? defaultValue : typeof value === "string" ? value : ""
     );
     const isControlled = value !== void 0;
     const currentValue = isControlled ? String(value ?? "") : internalValue;
+    const elementRef = React.useRef(null);
+    const setElementRef = React.useCallback(
+      (node) => {
+        elementRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    React.useLayoutEffect(() => {
+      if (!autoResize) return;
+      applyAutoResize(elementRef.current, maxRows);
+    }, [autoResize, maxRows, currentValue]);
+    React.useEffect(() => {
+      if (!autoResize || typeof window === "undefined") return;
+      const onWindowResize = () => applyAutoResize(elementRef.current, maxRows);
+      window.addEventListener("resize", onWindowResize);
+      return () => window.removeEventListener("resize", onWindowResize);
+    }, [autoResize, maxRows]);
     const handleChange = React.useCallback(
       (event) => {
         if (!isControlled) setInternalValue(event.target.value);
+        if (autoResize) applyAutoResize(event.currentTarget, maxRows);
         onChange?.(event);
       },
-      [isControlled, onChange]
+      [isControlled, onChange, autoResize, maxRows]
     );
     const textarea = /* @__PURE__ */ jsx(
       "textarea",
       {
-        ref,
+        ref: setElementRef,
         value,
         defaultValue: isControlled ? void 0 : defaultValue,
         maxLength,
         onChange: handleChange,
-        className: cn(baseTextareaClass, className),
+        className: cn(baseTextareaClass, autoResize && "resize-none overflow-hidden", className),
         ...props
       }
     );

package/dist/primitives/textarea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/textarea.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst baseTextareaClass =\n  'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-colors placeholder:text-muted-foreground outline-none focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground hover:bg-muted/40 disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive resize-y min-h-[80px]'\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  /** Show character counter (`current/max`) below the textarea. Requires `maxLength`. */\n  showCount?: boolean\n  /** Optional className applied to the outer wrapper (when counter is shown). */\n  wrapperClassName?: string\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, showCount, wrapperClassName, value, defaultValue, maxLength, onChange, ...props }, ref) => {\n    const [internalValue, setInternalValue] = React.useState<string>(\n      typeof defaultValue === 'string' ? defaultValue : typeof value === 'string' ? value : ''\n    )\n\n    const isControlled = value !== undefined\n    const currentValue = isControlled ? String(value ?? '') : internalValue\n\n    const handleChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        if (!isControlled) setInternalValue(event.target.value)\n        onChange?.(event)\n      },\n      [isControlled, onChange]\n    )\n\n    const textarea = (\n      <textarea\n        ref={ref}\n        value={value}\n        defaultValue={isControlled ? undefined : defaultValue}\n        maxLength={maxLength}\n        onChange={handleChange}\n        className={cn(baseTextareaClass, className)}\n        {...props}\n      />\n    )\n\n    if (!showCount) return textarea\n\n    const length = currentValue.length\n    const max = typeof maxLength === 'number' ? maxLength : undefined\n    const isError = max != null && length > max\n    const isDisabled = props.disabled\n\n    return (\n      <div className={cn('flex flex-col gap-1', wrapperClassName)}>\n        {textarea}\n        <div className=\"flex justify-end\">\n          <span\n            className={cn(\n              'text-overline uppercase',\n              isDisabled\n                ? 'text-text-disabled'\n                : isError\n                  ? 'text-destructive'\n                  : 'text-muted-foreground'\n            )}\n            aria-live=\"polite\"\n          >\n            {max != null ? `${length}/${max}` : `${length}`}\n          </span>\n        </div>\n      </div>\n    )\n  }\n)\n\nTextarea.displayName = 'Textarea'\n"],
-  "mappings": ";AAkCM,cAmBA,YAnBA;AAhCN,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,oBACJ;AASK,MAAM,WAAW,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,WAAW,kBAAkB,OAAO,cAAc,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AACvG,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM;AAAA,MAC9C,OAAO,iBAAiB,WAAW,eAAe,OAAO,UAAU,WAAW,QAAQ;AAAA,IACxF;AAEA,UAAM,eAAe,UAAU;AAC/B,UAAM,eAAe,eAAe,OAAO,SAAS,EAAE,IAAI;AAE1D,UAAM,eAAe,MAAM;AAAA,MACzB,CAAC,UAAkD;AACjD,YAAI,CAAC,aAAc,kBAAiB,MAAM,OAAO,KAAK;AACtD,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,CAAC,cAAc,QAAQ;AAAA,IACzB;AAEA,UAAM,WACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,cAAc,eAAe,SAAY;AAAA,QACzC;AAAA,QACA,UAAU;AAAA,QACV,WAAW,GAAG,mBAAmB,SAAS;AAAA,QACzC,GAAG;AAAA;AAAA,IACN;AAGF,QAAI,CAAC,UAAW,QAAO;AAEvB,UAAM,SAAS,aAAa;AAC5B,UAAM,MAAM,OAAO,cAAc,WAAW,YAAY;AACxD,UAAM,UAAU,OAAO,QAAQ,SAAS;AACxC,UAAM,aAAa,MAAM;AAEzB,WACE,qBAAC,SAAI,WAAW,GAAG,uBAAuB,gBAAgB,GACvD;AAAA;AAAA,MACD,oBAAC,SAAI,WAAU,oBACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,aACI,uBACA,UACE,qBACA;AAAA,UACR;AAAA,UACA,aAAU;AAAA,UAET,iBAAO,OAAO,GAAG,MAAM,IAAI,GAAG,KAAK,GAAG,MAAM;AAAA;AAAA,MAC/C,GACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\n\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst baseTextareaClass =\n  'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-colors placeholder:text-muted-foreground outline-none focus-visible:outline-none focus-visible:shadow-focus focus-visible:border-foreground hover:bg-muted/40 disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:border-border-disabled disabled:shadow-none disabled:hover:bg-bg-disabled aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive resize-y min-h-[80px]'\n\nconst DEFAULT_AUTO_RESIZE_MAX_ROWS = 12\nconst FALLBACK_LINE_HEIGHT_PX = 20\n\nfunction readPixels(value: string): number {\n  const parsed = Number.parseFloat(value)\n  return Number.isFinite(parsed) ? parsed : 0\n}\n\n/**\n * Grow a textarea to fit its content, capped at `maxRows` rendered lines.\n * The cap is expressed in rows rather than pixels so it follows the element's\n * own type scale instead of a magic height, and the element only scrolls once\n * the cap is reached.\n */\nfunction applyAutoResize(element: HTMLTextAreaElement | null, maxRows: number): void {\n  if (!element) return\n  const computed = typeof window !== 'undefined' ? window.getComputedStyle(element) : null\n  const lineHeight = computed ? readPixels(computed.lineHeight) || FALLBACK_LINE_HEIGHT_PX : FALLBACK_LINE_HEIGHT_PX\n  const padding = computed ? readPixels(computed.paddingTop) + readPixels(computed.paddingBottom) : 0\n  const border = computed ? readPixels(computed.borderTopWidth) + readPixels(computed.borderBottomWidth) : 0\n  const maxContentHeight = lineHeight * Math.max(1, maxRows) + padding\n\n  element.style.height = 'auto'\n  const contentHeight = element.scrollHeight\n  const cappedHeight = Math.min(contentHeight, maxContentHeight)\n  element.style.height = `${cappedHeight + border}px`\n  element.style.overflowY = contentHeight > maxContentHeight ? 'auto' : 'hidden'\n}\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  /** Show character counter (`current/max`) below the textarea. Requires `maxLength`. */\n  showCount?: boolean\n  /** Optional className applied to the outer wrapper (when counter is shown). */\n  wrapperClassName?: string\n  /**\n   * Grow the field to fit its content instead of scrolling inside a fixed box.\n   * Disables the manual resize handle \u2014 the height is owned by the content.\n   */\n  autoResize?: boolean\n  /** Rows to grow to before the field starts scrolling. Only used with `autoResize`. */\n  maxRows?: number\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      className,\n      showCount,\n      wrapperClassName,\n      autoResize,\n      maxRows = DEFAULT_AUTO_RESIZE_MAX_ROWS,\n      value,\n      defaultValue,\n      maxLength,\n      onChange,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = React.useState<string>(\n      typeof defaultValue === 'string' ? defaultValue : typeof value === 'string' ? value : ''\n    )\n\n    const isControlled = value !== undefined\n    const currentValue = isControlled ? String(value ?? '') : internalValue\n\n    const elementRef = React.useRef<HTMLTextAreaElement | null>(null)\n    const setElementRef = React.useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        elementRef.current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node\n      },\n      [ref]\n    )\n\n    React.useLayoutEffect(() => {\n      if (!autoResize) return\n      applyAutoResize(elementRef.current, maxRows)\n    }, [autoResize, maxRows, currentValue])\n\n    React.useEffect(() => {\n      if (!autoResize || typeof window === 'undefined') return\n      const onWindowResize = () => applyAutoResize(elementRef.current, maxRows)\n      window.addEventListener('resize', onWindowResize)\n      return () => window.removeEventListener('resize', onWindowResize)\n    }, [autoResize, maxRows])\n\n    const handleChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        if (!isControlled) setInternalValue(event.target.value)\n        if (autoResize) applyAutoResize(event.currentTarget, maxRows)\n        onChange?.(event)\n      },\n      [isControlled, onChange, autoResize, maxRows]\n    )\n\n    const textarea = (\n      <textarea\n        ref={setElementRef}\n        value={value}\n        defaultValue={isControlled ? undefined : defaultValue}\n        maxLength={maxLength}\n        onChange={handleChange}\n        className={cn(baseTextareaClass, autoResize && 'resize-none overflow-hidden', className)}\n        {...props}\n      />\n    )\n\n    if (!showCount) return textarea\n\n    const length = currentValue.length\n    const max = typeof maxLength === 'number' ? maxLength : undefined\n    const isError = max != null && length > max\n    const isDisabled = props.disabled\n\n    return (\n      <div className={cn('flex flex-col gap-1', wrapperClassName)}>\n        {textarea}\n        <div className=\"flex justify-end\">\n          <span\n            className={cn(\n              'text-overline uppercase',\n              isDisabled\n                ? 'text-text-disabled'\n                : isError\n                  ? 'text-destructive'\n                  : 'text-muted-foreground'\n            )}\n            aria-live=\"polite\"\n          >\n            {max != null ? `${length}/${max}` : `${length}`}\n          </span>\n        </div>\n      </div>\n    )\n  }\n)\n\nTextarea.displayName = 'Textarea'\n"],
+  "mappings": ";AA2GM,cAmBA,YAnBA;AAzGN,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,oBACJ;AAEF,MAAM,+BAA+B;AACrC,MAAM,0BAA0B;AAEhC,SAAS,WAAW,OAAuB;AACzC,QAAM,SAAS,OAAO,WAAW,KAAK;AACtC,SAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC5C;AAQA,SAAS,gBAAgB,SAAqC,SAAuB;AACnF,MAAI,CAAC,QAAS;AACd,QAAM,WAAW,OAAO,WAAW,cAAc,OAAO,iBAAiB,OAAO,IAAI;AACpF,QAAM,aAAa,WAAW,WAAW,SAAS,UAAU,KAAK,0BAA0B;AAC3F,QAAM,UAAU,WAAW,WAAW,SAAS,UAAU,IAAI,WAAW,SAAS,aAAa,IAAI;AAClG,QAAM,SAAS,WAAW,WAAW,SAAS,cAAc,IAAI,WAAW,SAAS,iBAAiB,IAAI;AACzG,QAAM,mBAAmB,aAAa,KAAK,IAAI,GAAG,OAAO,IAAI;AAE7D,UAAQ,MAAM,SAAS;AACvB,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,eAAe,KAAK,IAAI,eAAe,gBAAgB;AAC7D,UAAQ,MAAM,SAAS,GAAG,eAAe,MAAM;AAC/C,UAAQ,MAAM,YAAY,gBAAgB,mBAAmB,SAAS;AACxE;AAgBO,MAAM,WAAW,MAAM;AAAA,EAC5B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM;AAAA,MAC9C,OAAO,iBAAiB,WAAW,eAAe,OAAO,UAAU,WAAW,QAAQ;AAAA,IACxF;AAEA,UAAM,eAAe,UAAU;AAC/B,UAAM,eAAe,eAAe,OAAO,SAAS,EAAE,IAAI;AAE1D,UAAM,aAAa,MAAM,OAAmC,IAAI;AAChE,UAAM,gBAAgB,MAAM;AAAA,MAC1B,CAAC,SAAqC;AACpC,mBAAW,UAAU;AACrB,YAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,iBAC9B,IAAK,CAAC,IAA2D,UAAU;AAAA,MACtF;AAAA,MACA,CAAC,GAAG;AAAA,IACN;AAEA,UAAM,gBAAgB,MAAM;AAC1B,UAAI,CAAC,WAAY;AACjB,sBAAgB,WAAW,SAAS,OAAO;AAAA,IAC7C,GAAG,CAAC,YAAY,SAAS,YAAY,CAAC;AAEtC,UAAM,UAAU,MAAM;AACpB,UAAI,CAAC,cAAc,OAAO,WAAW,YAAa;AAClD,YAAM,iBAAiB,MAAM,gBAAgB,WAAW,SAAS,OAAO;AACxE,aAAO,iBAAiB,UAAU,cAAc;AAChD,aAAO,MAAM,OAAO,oBAAoB,UAAU,cAAc;AAAA,IAClE,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,UAAM,eAAe,MAAM;AAAA,MACzB,CAAC,UAAkD;AACjD,YAAI,CAAC,aAAc,kBAAiB,MAAM,OAAO,KAAK;AACtD,YAAI,WAAY,iBAAgB,MAAM,eAAe,OAAO;AAC5D,mBAAW,KAAK;AAAA,MAClB;AAAA,MACA,CAAC,cAAc,UAAU,YAAY,OAAO;AAAA,IAC9C;AAEA,UAAM,WACJ;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,cAAc,eAAe,SAAY;AAAA,QACzC;AAAA,QACA,UAAU;AAAA,QACV,WAAW,GAAG,mBAAmB,cAAc,+BAA+B,SAAS;AAAA,QACtF,GAAG;AAAA;AAAA,IACN;AAGF,QAAI,CAAC,UAAW,QAAO;AAEvB,UAAM,SAAS,aAAa;AAC5B,UAAM,MAAM,OAAO,cAAc,WAAW,YAAY;AACxD,UAAM,UAAU,OAAO,QAAQ,SAAS;AACxC,UAAM,aAAa,MAAM;AAEzB,WACE,qBAAC,SAAI,WAAW,GAAG,uBAAuB,gBAAgB,GACvD;AAAA;AAAA,MACD,oBAAC,SAAI,WAAU,oBACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,aACI,uBACA,UACE,qBACA;AAAA,UACR;AAAA,UACA,aAAU;AAAA,UAET,iBAAO,OAAO,GAAG,MAAM,IAAI,GAAG,KAAK,GAAG,MAAM;AAAA;AAAA,MAC/C,GACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.7.1-develop.7191.1.3c9346566b",
+  "version": "0.7.1-develop.7194.1.ab4fc81f82",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.7.1-develop.7191.1.3c9346566b",
+    "@open-mercato/shared": "0.7.1-develop.7194.1.ab4fc81f82",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.7.1-develop.7191.1.3c9346566b",
+    "@open-mercato/shared": "0.7.1-develop.7194.1.ab4fc81f82",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/backend/AppShell.tsx

@@ -37,6 +37,7 @@ import { readVersionedPreference, writeVersionedPreference } from '@open-mercato
 import { cloneSidebarGroups } from './sidebar/customization-helpers'
 import type { SectionNavGroup } from './section-page/types'
 import { InjectionSpot } from './injection/InjectionSpot'
+import { useNavBadge } from './nav/navBadges'
 import {
   BackendRecordInjectionContextProvider,
   type RecordInjectionContext,
@@ -64,6 +65,7 @@ import {
   BACKEND_TOPBAR_ACTIONS_INJECTION_SPOT_ID,
   GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID,
   GLOBAL_SIDEBAR_STATUS_BADGES_INJECTION_SPOT_ID,
+  BACKEND_NAV_BADGES_INJECTION_SPOT_ID,
 } from './injection/spotIds'
 
 // Versioned-envelope discriminator for the persisted sidebar open/closed group
@@ -418,6 +420,32 @@ function sidebarBlockPadding(compact: boolean): string {
   return `${compact ? 'px-2' : 'px-3'} transition-[padding] duration-200 ease-out`
 }
 
+/**
+ * The live count a module published for this nav item, or nothing at all.
+ *
+ * Zero and absent both render nothing: a "0" chip is noise dressed as
+ * information. Collapsed sidebars keep the chip — it is the only thing left
+ * saying something needs you.
+ */
+function NavItemBadge({ href, compact }: { href: string; compact: boolean }) {
+  const badge = useNavBadge(href)
+  if (!badge || badge.count <= 0) return null
+  const display = badge.count > 99 ? '99+' : String(badge.count)
+  const tone = badge.tone === 'attention'
+    ? 'bg-status-warning-bg text-status-warning-text'
+    : 'bg-muted text-muted-foreground'
+  return (
+    <span
+      className={`ml-auto inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium ${tone} ${
+        compact ? 'absolute right-0 top-0 -mr-1 -mt-1' : ''
+      }`}
+      aria-label={badge.label ?? display}
+    >
+      {display}
+    </span>
+  )
+}
+
 // An InjectionSpot renders nothing when no widget is registered, so its wrapper must collapse
 // instead of surviving as an empty flex child that still costs a full `gap-3`.
 function sidebarInjectionWrapper(compact: boolean): string {
@@ -448,6 +476,38 @@ const HeaderContext = createContext<{
   setTitle: (t?: string) => void
 } | null>(null)
 
+/**
+ * Additive contract that lets a page under the backend shell drive the desktop
+ * sidebar collapse without owning the shell. `requestCollapse(true)` forces the
+ * sidebar to render collapsed without overwriting the user's persisted manual
+ * preference; `releaseRequest()` drops the request and falls back to whatever
+ * the underlying state is (including any active settings/profile force-collapse).
+ */
+export type SidebarCollapseContextValue = {
+  collapsed: boolean
+  setCollapsed: (next: boolean) => void
+  requestCollapse: (next: boolean) => void
+  releaseRequest: () => void
+}
+
+const noopSidebarCollapse: SidebarCollapseContextValue = {
+  collapsed: false,
+  setCollapsed: () => {},
+  requestCollapse: () => {},
+  releaseRequest: () => {},
+}
+
+const SidebarCollapseContext = createContext<SidebarCollapseContextValue | null>(null)
+
+/**
+ * Read the backend shell's sidebar-collapse controls. Returns a safe no-op
+ * default when called outside `AppShell` so standalone renders and tests never
+ * crash.
+ */
+export function useSidebarCollapse(): SidebarCollapseContextValue {
+  return useContext(SidebarCollapseContext) ?? noopSidebarCollapse
+}
+
 export function ApplyBreadcrumb({ breadcrumb, title, titleKey }: { breadcrumb?: Array<{ label: string; href?: string; labelKey?: string }>; title?: string; titleKey?: string }) {
   const ctx = useContext(HeaderContext)
   const t = useT()
@@ -567,6 +627,17 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
   }, [mobileOpen])
   // Initialize from server-provided prop only to avoid hydration flicker
   const [collapsed, setCollapsed] = React.useState(sidebarCollapsedDefault)
+  // External collapse request (additive). A page under the shell can force the
+  // sidebar collapsed via `useSidebarCollapse().requestCollapse(true)` without
+  // touching `collapsed` (the user's persisted manual preference) — so nothing
+  // is written to localStorage/cookie and `releaseRequest()` restores the prior
+  // underlying state. Default `null` means "no request", keeping behavior
+  // byte-for-byte identical when no page consumes the context.
+  const [externalCollapseRequest, setExternalCollapseRequest] = React.useState<boolean | null>(null)
+  // Remember the value the user manually had before an external request took
+  // over, mirroring `collapsedBeforeSectionRef`. Not required for correctness
+  // (the request never mutates `collapsed`) but keeps the intent explicit.
+  const collapsedBeforeExternalRequestRef = React.useRef<boolean | null>(null)
   // Maintain internal nav state so we can augment it client-side
   const [navGroups, setNavGroups] = React.useState(resolvedGroups)
   const [openGroups, setOpenGroups] = React.useState<Record<string, boolean>>(() =>
@@ -582,9 +653,29 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
     if (!label) return false
     return label.toLowerCase().includes(navQueryNorm)
   }, [navQueryActive, navQueryNorm])
-  const effectiveCollapsed = collapsed
+  // An active external collapse request wins over the manual/section state
+  // ("collapsed wins"); when released (`null`) we fall back to `collapsed`,
+  // which already reflects any settings/profile force-collapse.
+  const effectiveCollapsed = externalCollapseRequest === true ? true : collapsed
   const expandedSidebarWidth = '240px'
 
+  const requestCollapse = React.useCallback((next: boolean) => {
+    setExternalCollapseRequest((prev) => {
+      if (prev === null) collapsedBeforeExternalRequestRef.current = collapsed
+      return next
+    })
+  }, [collapsed])
+  const releaseRequest = React.useCallback(() => {
+    collapsedBeforeExternalRequestRef.current = null
+    setExternalCollapseRequest(null)
+  }, [])
+  const sidebarCollapseValue = React.useMemo<SidebarCollapseContextValue>(() => ({
+    collapsed: effectiveCollapsed,
+    setCollapsed: (next: boolean) => setCollapsed(next),
+    requestCollapse,
+    releaseRequest,
+  }), [effectiveCollapsed, requestCollapse, releaseRequest])
+
   // Track scroll position of the desktop sidebar's inner scroll container so we can
   // flip the affordance chevron between down/up (and hide it entirely when content
   // fits without scrolling). The inner div is rendered deep in renderSidebar /
@@ -918,6 +1009,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
                       )}
                     </span>
                     {!compact && <span className="truncate">{label}</span>}
+                    <NavItemBadge href={item.href} compact={compact} />
                   </Link>
                   {showChildren ? childItems.map((child) => renderSectionItem(child, depth + 1)) : null}
                 </React.Fragment>
@@ -1320,9 +1412,19 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
 
   return (
     <HeaderContext.Provider value={headerCtxValue}>
+    <SidebarCollapseContext.Provider value={sidebarCollapseValue}>
     <div
       className={`relative min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`}
-      style={{ '--topbar-height': '61px' } as React.CSSProperties}
+      style={{
+        '--topbar-height': '61px',
+        // Left offset of the content column (sidebar, plus the section sidebar on
+        // settings/profile routes). Exposed so full-bleed pages — e.g. the
+        // workflow visual editor — can size themselves to the content column with
+        // `calc(100vw - var(--app-content-offset))` instead of being capped by
+        // `main`'s centered max-width. Only meaningful at `lg` and up, where the
+        // grid (and the sidebar) is active.
+        '--app-content-offset': isSectionView ? `calc(${asideWidth} + 240px)` : asideWidth,
+      } as React.CSSProperties}
     >
       <a
         href="#main-content"
@@ -1506,6 +1608,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
         </header>
         <ProgressTopBar t={t} className="sticky top-0 z-sticky" completedAutoHideMs={progressCompletedAutoHideMs} />
         <main id="main-content" tabIndex={-1} className="flex-1 p-4 lg:p-6 mx-auto w-full max-w-screen-2xl">
+          <InjectionSpot spotId={BACKEND_NAV_BADGES_INJECTION_SPOT_ID} context={injectionContext} />
           <InjectionSpot spotId={BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID} context={injectionContext} />
           <FlashMessages />
           <PartialIndexBanner />
@@ -1620,6 +1723,7 @@ function AppShellBody({ productName, logo, email, canManageUpgradeActions = fals
       )}
     </div>
     <UmesDevToolsPanel />
+    </SidebarCollapseContext.Provider>
     </HeaderContext.Provider>
   )
 }

package/src/backend/CrudForm.tsx

@@ -378,6 +378,17 @@ export type CrudFormProps<TValues extends Record<string, unknown>> = {
   embedded?: boolean
   // Hide the footer action bar (Save/Cancel/Delete) when embedding in a custom layout
   hideFooterActions?: boolean
+  /**
+   * Vertical rhythm of the form body.
+   *
+   * `default` is the page-width layout every existing host renders today and is
+   * unchanged byte-for-byte. `compact` tightens the between-group and
+   * between-field spacing and the group-card padding for narrow hosts — a docked
+   * inspector rail, a side panel — where the page rhythm reads as airy and costs
+   * the host a third of its column. It changes SPACING only: no label, helper
+   * text, control size or copy differs between the two.
+   */
+  density?: 'default' | 'compact'
   /**
    * Opt-in: track dirty state even when `embedded` is true, AND enable the form's built-in
    * navigation protection (beforeunload, link-click intercept, pushState/replaceState/popstate).
@@ -738,6 +749,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   loadingMessage,
   customEntity = false,
   embedded = false,
+  density = 'default',
   hideFooterActions = false,
   trackDirtyWhenEmbedded = false,
   onDirtyChange,
@@ -1330,6 +1342,13 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   // handles the overflow case on its own: when content scrolls, the footer stays pinned
   // to the dialog's bottom and the user can scroll fields above it.
   const dialogFormPadding = ''
+  // One step down the DS scale each, never an arbitrary value. `default` returns
+  // the exact strings that were inline before this prop existed.
+  const isCompactDensity = density === 'compact'
+  const densityStackLg = isCompactDensity ? 'space-y-3' : 'space-y-4'
+  const densityStackMd = isCompactDensity ? 'space-y-2' : 'space-y-3'
+  const densityCardPadding = isCompactDensity ? 'p-3' : 'p-4'
+  const densityGroupCardPadding = isCompactDensity ? 'px-3 py-2' : 'px-4 py-3'
 
   const buildCustomFieldsManageHref = React.useCallback(
     (targetEntityId: string | null) => {
@@ -3345,7 +3364,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           const sectionKey = `${entityLayout.entityId}:${section.fieldsetCode ?? 'default'}`
           const manageDisabled = !manageHref
           nodes.push(
-            <div key={sectionKey} className="rounded-lg border bg-card p-4 space-y-4">
+            <div key={sectionKey} className={`rounded-lg border bg-card ${densityCardPadding} ${densityStackLg}`}>
               <div className="flex items-start justify-between gap-3">
                 <div className="flex items-start gap-2">
                   {FieldsetIcon ? (
@@ -3587,7 +3606,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                 fieldCount={customFieldCount}
                 chevronPosition={collapsibleChevronPosition}
               >
-                <div className="space-y-3">
+                <div className={densityStackMd}>
                   {customFieldsInnerNodes}
                 </div>
               </CollapsibleGroup>,
@@ -3641,14 +3660,14 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               fieldCount={groupFields.length}
               chevronPosition={collapsibleChevronPosition}
             >
-              <div className="space-y-3">
+              <div className={densityStackMd}>
                 {groupContent}
               </div>
             </CollapsibleGroup>,
           )
         } else {
           nodes.push(
-            <div key={g.id} className="rounded-lg border bg-card px-4 py-3 space-y-3">
+            <div key={g.id} className={`rounded-lg border bg-card ${densityGroupCardPadding} ${densityStackMd}`}>
               {g.title ? (
                 <div className="text-sm font-medium">{t(g.title, g.title)}</div>
               ) : null}
@@ -3703,7 +3722,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           className={embedded ? 'min-h-[1px]' : 'min-h-[400px]'}
         >
           {wrapFormBody(
-            <form id={formId} onSubmit={handleSubmit} className={`space-y-4 ${dialogFormPadding}`}>
+            <form id={formId} onSubmit={handleSubmit} className={`${densityStackLg} ${dialogFormPadding}`}>
             {resolvedInjectionSpotId ? (
               <InjectionSpot
                 spotId={resolvedInjectionSpotId}
@@ -3722,13 +3741,13 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               {sortableGroupsEnabled ? (
                 <DndContext sensors={sortableSensors} collisionDetection={closestCenter} onDragEnd={handleGroupDragEnd}>
                   <SortableContext items={col1Ids} strategy={verticalListSortingStrategy}>
-                    <div className="space-y-3">{col1Content}</div>
+                    <div className={densityStackMd}>{col1Content}</div>
                   </SortableContext>
                 </DndContext>
               ) : (
-                <div className="space-y-3">{col1Content}</div>
+                <div className={densityStackMd}>{col1Content}</div>
               )}
-              {hasSecondaryColumn ? <div className="space-y-3" data-crud-injection-region>{col2Content}</div> : null}
+              {hasSecondaryColumn ? <div className={densityStackMd} data-crud-injection-region>{col2Content}</div> : null}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
             {hideFooterActions || formReadOnly ? null : (
@@ -3790,7 +3809,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           <form
             id={formId}
             onSubmit={handleSubmit}
-            className={`${embedded ? 'space-y-4' : 'rounded-lg border bg-card p-4 space-y-4'} ${dialogFormPadding}`}
+            className={`${embedded ? densityStackLg : `rounded-lg border bg-card ${densityCardPadding} ${densityStackLg}`} ${dialogFormPadding}`}
           >
             {resolvedInjectionSpotId ? (
               <InjectionSpot