@open-mercato/ui 0.6.2-develop.3372.1.de9a169973 → 0.6.2-develop.3380.1.bb14509041

package/dist/primitives/breadcrumb.js

@@ -0,0 +1,161 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+const BreadcrumbContext = React.createContext({
+  divider: "slash"
+});
+function Breadcrumb({
+  divider = "slash",
+  className,
+  children,
+  ...props
+}) {
+  const contextValue = React.useMemo(
+    () => ({ divider }),
+    [divider]
+  );
+  return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      "data-slot": "breadcrumb",
+      "data-divider": divider,
+      className: cn("min-w-0", className),
+      ...props,
+      children
+    }
+  ) });
+}
+function BreadcrumbList({ className, children, ...props }) {
+  if (React.Children.count(children) === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "flex items-center gap-1.5 text-sm font-medium leading-5 tracking-tight min-w-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn("inline-flex items-center gap-1.5 min-w-0", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "breadcrumb-link",
+      className: cn(
+        "inline-flex items-center gap-1.5 max-w-[40vw] md:max-w-[28vw] truncate text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:text-foreground rounded-sm focus-visible:shadow-focus [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-current": "page",
+      "data-slot": "breadcrumb-page",
+      className: cn(
+        "inline-block text-foreground truncate min-w-0 max-w-[45vw] md:max-w-[60vw] [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 [&_svg]:inline-block [&_svg]:align-middle",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbStatic({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-static",
+      className: cn(
+        "inline-flex items-center gap-1.5 max-w-[40vw] md:max-w-[28vw] truncate text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  divider: dividerProp,
+  className,
+  children,
+  ...props
+}) {
+  const { divider: contextDivider } = React.useContext(BreadcrumbContext);
+  const divider = dividerProp ?? contextDivider;
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      "data-slot": "breadcrumb-separator",
+      "data-divider": divider,
+      className: cn(
+        "inline-flex items-center text-text-disabled select-none [&_svg:not([class*='size-'])]:size-5",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(DefaultSeparator, { divider })
+    }
+  );
+}
+function DefaultSeparator({ divider }) {
+  if (divider === "arrow") return /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" });
+  if (divider === "dot") return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "/" });
+}
+function BreadcrumbEllipsis({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "presentation",
+      "data-slot": "breadcrumb-ellipsis",
+      className: cn(
+        "inline-flex size-5 items-center justify-center text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children ?? /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true", className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbStatic
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/primitives/breadcrumb.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/primitives/breadcrumb.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, MoreHorizontal } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport type BreadcrumbDivider = 'slash' | 'arrow' | 'dot'\n\ntype BreadcrumbContextValue = {\n  divider: BreadcrumbDivider\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({\n  divider: 'slash',\n})\n\nexport type BreadcrumbProps = React.ComponentProps<'nav'> & {\n  divider?: BreadcrumbDivider\n}\n\nexport function Breadcrumb({\n  divider = 'slash',\n  className,\n  children,\n  ...props\n}: BreadcrumbProps) {\n  const contextValue = React.useMemo<BreadcrumbContextValue>(\n    () => ({ divider }),\n    [divider],\n  )\n  return (\n    <BreadcrumbContext.Provider value={contextValue}>\n      <nav\n        aria-label=\"Breadcrumb\"\n        data-slot=\"breadcrumb\"\n        data-divider={divider}\n        className={cn('min-w-0', className)}\n        {...props}\n      >\n        {children}\n      </nav>\n    </BreadcrumbContext.Provider>\n  )\n}\n\nexport type BreadcrumbListProps = React.ComponentProps<'ol'>\n\nexport function BreadcrumbList({ className, children, ...props }: BreadcrumbListProps) {\n  if (React.Children.count(children) === 0) return null\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        'flex items-center gap-1.5 text-sm font-medium leading-5 tracking-tight min-w-0',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </ol>\n  )\n}\n\nexport type BreadcrumbItemProps = React.ComponentProps<'li'>\n\nexport function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn('inline-flex items-center gap-1.5 min-w-0', className)}\n      {...props}\n    />\n  )\n}\n\nexport type BreadcrumbLinkProps = React.ComponentProps<'a'> & {\n  asChild?: boolean\n}\n\nexport function BreadcrumbLink({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: BreadcrumbLinkProps) {\n  const Comp = asChild ? Slot : 'a'\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        \"inline-flex items-center gap-1.5 max-w-[40vw] md:max-w-[28vw] truncate text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:text-foreground rounded-sm focus-visible:shadow-focus [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nexport type BreadcrumbPageProps = React.ComponentProps<'span'>\n\nexport function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {\n  return (\n    <span\n      aria-current=\"page\"\n      data-slot=\"breadcrumb-page\"\n      className={cn(\n        \"inline-block text-foreground truncate min-w-0 max-w-[45vw] md:max-w-[60vw] [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 [&_svg]:inline-block [&_svg]:align-middle\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport type BreadcrumbStaticProps = React.ComponentProps<'span'>\n\nexport function BreadcrumbStatic({ className, ...props }: BreadcrumbStaticProps) {\n  return (\n    <span\n      data-slot=\"breadcrumb-static\"\n      className={cn(\n        \"inline-flex items-center gap-1.5 max-w-[40vw] md:max-w-[28vw] truncate text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport type BreadcrumbSeparatorProps = React.ComponentProps<'li'> & {\n  divider?: BreadcrumbDivider\n}\n\nexport function BreadcrumbSeparator({\n  divider: dividerProp,\n  className,\n  children,\n  ...props\n}: BreadcrumbSeparatorProps) {\n  const { divider: contextDivider } = React.useContext(BreadcrumbContext)\n  const divider = dividerProp ?? contextDivider\n  return (\n    <li\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      data-slot=\"breadcrumb-separator\"\n      data-divider={divider}\n      className={cn(\n        \"inline-flex items-center text-text-disabled select-none [&_svg:not([class*='size-'])]:size-5\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <DefaultSeparator divider={divider} />}\n    </li>\n  )\n}\n\nfunction DefaultSeparator({ divider }: { divider: BreadcrumbDivider }) {\n  if (divider === 'arrow') return <ChevronRight aria-hidden=\"true\" />\n  if (divider === 'dot') return <span aria-hidden=\"true\">\u00B7</span>\n  return <span aria-hidden=\"true\">/</span>\n}\n\nexport type BreadcrumbEllipsisProps = React.ComponentProps<'span'>\n\nexport function BreadcrumbEllipsis({ className, children, ...props }: BreadcrumbEllipsisProps) {\n  return (\n    <span\n      role=\"presentation\"\n      data-slot=\"breadcrumb-ellipsis\"\n      className={cn(\n        'inline-flex size-5 items-center justify-center text-muted-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MoreHorizontal aria-hidden=\"true\" className=\"size-4\" />}\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/primitives/sheet.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@open-mercato/shared/lib/utils";
+const Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
+const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.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",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const sheetVariants = cva(
+  cn(
+    "fixed z-modal flex flex-col gap-4 bg-background shadow-lg transition ease-in-out",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "data-[state=closed]:duration-200 data-[state=open]:duration-300"
+  ),
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "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",
+        right: "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"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+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
+  ] })
+] }));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+const SheetHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-1.5 border-b px-4 py-3 pr-12 text-left", className),
+      ...props
+    }
+  )
+);
+SheetHeader.displayName = "SheetHeader";
+const SheetFooter = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col-reverse gap-2 border-t px-4 py-3 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  )
+);
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-base font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  sheetVariants
+};
+//# sourceMappingURL=sheet.js.map

package/dist/primitives/sheet.js.map

@@ -0,0 +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;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.2-develop.3372.1.de9a169973",
+  "version": "0.6.2-develop.3380.1.bb14509041",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -141,13 +141,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.2-develop.3372.1.de9a169973",
+    "@open-mercato/shared": "0.6.2-develop.3380.1.bb14509041",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.2-develop.3372.1.de9a169973",
+    "@open-mercato/shared": "0.6.2-develop.3380.1.bb14509041",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/ai/AiIcon.tsx

@@ -6,7 +6,7 @@ export function AiIcon({ className, ...props }: LucideProps) {
     <Sparkles
       aria-hidden
       {...props}
-      className={cn(className, 'text-brand-violet')}
+      className={cn(className, 'text-accent-indigo')}
     />
   )
 }

package/src/backend/AppShell.tsx

@@ -3,8 +3,17 @@ import * as React from 'react'
 import { createContext, useContext } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
-import { ChevronDown, ChevronLeft, Search, X } from 'lucide-react'
+import { ChevronDown, ChevronLeft, Home, PanelLeftClose, PanelLeftOpen, Search, X } from 'lucide-react'
 import { Button } from '../primitives/button'
+import {
+  Breadcrumb as BreadcrumbNav,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '../primitives/breadcrumb'
 import { IconButton } from '../primitives/icon-button'
 import { Input } from '../primitives/input'
 import { SearchInput } from '../primitives/search-input'
@@ -428,6 +437,13 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
   useEventBridge() // SSE DOM Event Bridge — singleton SSE connection for real-time server events
   const resolvedProductName = productName ?? t('appShell.productName')
   const [mobileOpen, setMobileOpen] = React.useState(false)
+  // When the mobile drawer opens on a settings/profile route, it follows the
+  // section sidebar by default. Set to 'main' to force-show the main nav even
+  // when the route is in a section context. Reset on close.
+  const [mobileDrawerView, setMobileDrawerView] = React.useState<'auto' | 'main'>('auto')
+  React.useEffect(() => {
+    if (!mobileOpen) setMobileDrawerView('auto')
+  }, [mobileOpen])
   // Initialize from server-provided prop only to avoid hydration flicker
   const [collapsed, setCollapsed] = React.useState(sidebarCollapsedDefault)
   // Maintain internal nav state so we can augment it client-side
@@ -670,7 +686,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
               aria-label={t('appShell.goToDashboard')}
             >
               <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={40} height={40} className="rounded-full shrink-0" />
-              {!compact && <span className="text-sm font-medium text-foreground">{resolvedProductName}</span>}
+              {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedProductName}</span>}
             </Link>
           </div>
         )}
@@ -803,7 +819,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
                 aria-label={t('appShell.goToDashboard')}
               >
                 <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={40} height={40} className="rounded-full shrink-0" />
-                {!compact && <span className="text-sm font-medium text-foreground">{resolvedProductName}</span>}
+                {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedProductName}</span>}
               </Link>
             </div>
           ) : null}
@@ -869,7 +885,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
               aria-label={t('appShell.goToDashboard')}
             >
               <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={40} height={40} className="rounded-full shrink-0" />
-              {!compact && <span className="text-sm font-medium text-foreground">{resolvedProductName}</span>}
+              {!compact && <span className="truncate text-sm font-medium text-foreground">{resolvedProductName}</span>}
             </Link>
           </div>
         )}
@@ -1130,7 +1146,6 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
             type="button"
             variant="outline"
             size="sm"
-            className="h-7 text-xs"
             data-menu-item-id={item.id}
             onClick={() => item.onClick?.()}
           >
@@ -1143,7 +1158,22 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
 
   return (
     <HeaderContext.Provider value={headerCtxValue}>
-    <div className={`min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`}>
+    <div
+      className={`relative min-h-svh lg:grid transition-[grid-template-columns] duration-200 ease-out ${gridColsClass}`}
+      style={{ '--topbar-height': '61px' } as React.CSSProperties}
+    >
+      {/* Desktop sidebar collapse/expand toggle — sits on the divider line between
+          sidebar and content, like Notion/Vercel. Hidden on mobile (hamburger in
+          topbar handles the drawer). */}
+      <button
+        type="button"
+        onClick={() => setCollapsed((c) => !c)}
+        aria-label={t('appShell.toggleSidebar')}
+        className="hidden lg:flex fixed top-4 z-dropdown size-7 items-center justify-center rounded-md border bg-background text-muted-foreground shadow-sm transition-all hover:text-foreground hover:bg-muted focus:outline-none focus-visible:shadow-focus"
+        style={{ left: `calc(${asideWidth} - 14px)` }}
+      >
+        {effectiveCollapsed ? <PanelLeftOpen className="size-4" /> : <PanelLeftClose className="size-4" />}
+      </button>
       {/* Desktop main sidebar */}
       <aside ref={sidebarAsideRef} className={`${asideClassesBase} ${effectiveCollapsed ? 'px-2' : 'px-3'} hidden lg:block lg:sticky lg:top-0 lg:h-svh lg:self-start lg:overflow-hidden lg:relative transition-[width,padding] duration-200 ease-out`} style={{ width: asideWidth }}>
         {renderSidebar(effectiveCollapsed, false, isSectionView)}
@@ -1206,7 +1236,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       ) : null}
 
       <div className="flex min-h-svh flex-col min-w-0">
-        <header className="border-b bg-background/80 px-3 lg:px-4 py-2 lg:py-3 flex items-center justify-between gap-2">
+        <header className="sticky top-0 z-sticky border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 px-3 sm:px-4 lg:px-6 py-3 flex items-center justify-between gap-2 sm:gap-3">
           <div
             data-testid="backend-chrome-ready"
             data-ready={isChromeReady ? 'true' : 'false'}
@@ -1214,22 +1244,9 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           />
           <div className="flex items-center gap-2 min-w-0">
             {/* Mobile menu button */}
-            <IconButton variant="outline" size="sm" className="lg:hidden" aria-label={t('appShell.openMenu')} onClick={() => setMobileOpen(true)}>
+            <IconButton variant="ghost" size="sm" className="lg:hidden" aria-label={t('appShell.openMenu')} onClick={() => setMobileOpen(true)}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
             </IconButton>
-            {/* Desktop collapse toggle */}
-            <IconButton
-              variant="outline"
-              size="sm"
-              className="hidden lg:inline-flex"
-              aria-label={t('appShell.toggleSidebar')}
-              onClick={() => setCollapsed((c) => !c)}
-            >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="4" width="18" height="16" rx="2"/>
-                <path d="M9 4v16"/>
-              </svg>
-            </IconButton>
             {/* Header breadcrumb: always starts with Dashboard */}
             {(() => {
               const dashboardLabel = t('dashboard.title')
@@ -1243,30 +1260,65 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
                 rest = [{ label: headerTitle }]
               }
               const items = [...root, ...rest]
-              const lastIndex = items.length - 1
+              if (items.length === 0) return null
+              const home = items[0]
+              const current = items.length > 1 ? items[items.length - 1] : null
+              const mid = items.slice(1, -1)
+              const hasMid = mid.length > 0
               return (
-                <nav className="flex items-center gap-2 text-sm min-w-0">
-                  {items.map((b, i) => {
-                    const isLast = i === lastIndex
-                    const hiddenOnMobile = !isLast ? 'hidden md:inline' : ''
-                    return (
-                      <React.Fragment key={i}>
-                        {i > 0 && <span className={`text-muted-foreground hidden md:inline`}>/</span>}
-                        {b.href ? (
-                          <Link href={b.href} className={`text-muted-foreground hover:text-foreground ${hiddenOnMobile}`}>
-                            {b.label}
+                <BreadcrumbNav divider="arrow" className="ml-2 lg:ml-3 text-sm">
+                  <BreadcrumbList className="[&_[data-slot=breadcrumb-separator]_svg]:size-4">
+                    <BreadcrumbItem>
+                      {home.href && current ? (
+                        <BreadcrumbLink asChild aria-label={home.label}>
+                          <Link href={home.href}>
+                            <Home className="size-4" aria-hidden="true" />
                           </Link>
-                        ) : (
-                          <span className={`font-medium truncate max-w-[45vw] md:max-w-[60vw]`}>{b.label}</span>
-                        )}
-                      </React.Fragment>
-                    )
-                  })}
-                </nav>
+                        </BreadcrumbLink>
+                      ) : (
+                        <BreadcrumbPage aria-label={home.label}>
+                          <Home className="size-4" aria-hidden="true" />
+                        </BreadcrumbPage>
+                      )}
+                    </BreadcrumbItem>
+                    {current ? (
+                      <>
+                        {hasMid ? (
+                          <>
+                            <BreadcrumbSeparator className="md:hidden" />
+                            <BreadcrumbItem className="md:hidden">
+                              <BreadcrumbEllipsis aria-label={t('appShell.breadcrumb.collapsed', { count: mid.length })} />
+                            </BreadcrumbItem>
+                            {mid.map((b, i) => (
+                              <React.Fragment key={`mid-${i}`}>
+                                <BreadcrumbSeparator className="hidden md:inline-flex" />
+                                <BreadcrumbItem className="hidden md:inline-flex">
+                                  {b.href ? (
+                                    <BreadcrumbLink asChild title={b.label}>
+                                      <Link href={b.href}>{b.label}</Link>
+                                    </BreadcrumbLink>
+                                  ) : (
+                                    <BreadcrumbLink title={b.label} aria-disabled="true" tabIndex={-1}>
+                                      {b.label}
+                                    </BreadcrumbLink>
+                                  )}
+                                </BreadcrumbItem>
+                              </React.Fragment>
+                            ))}
+                          </>
+                        ) : null}
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                          <BreadcrumbPage title={current.label}>{current.label}</BreadcrumbPage>
+                        </BreadcrumbItem>
+                      </>
+                    ) : null}
+                  </BreadcrumbList>
+                </BreadcrumbNav>
               )
             })()}
           </div>
-          <div className="flex items-center gap-1 md:gap-2 text-sm shrink-0">
+          <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3 text-sm shrink-0">
             <StatusBadgeInjectionSpot
               spotId={GLOBAL_HEADER_STATUS_INDICATORS_INJECTION_SPOT_ID}
               context={injectionContext}
@@ -1320,23 +1372,73 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       {/* Mobile drawer */}
       {mobileOpen && (
         <div className="lg:hidden fixed inset-0 z-modal">
-          <div className="absolute inset-0 bg-black/20" onClick={() => setMobileOpen(false)} aria-hidden="true" />
-          <aside className="absolute left-0 top-0 flex h-full w-[260px] flex-col bg-background border-r overflow-hidden">
-            <div className="shrink-0 p-3 pb-2 flex items-center justify-between border-b">
-              <Link href="/backend" className="flex items-center gap-2 text-sm font-semibold" onClick={() => setMobileOpen(false)} aria-label={t('appShell.goToDashboard')}>
-                <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={28} height={28} className="rounded" />
-                {resolvedProductName}
+          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setMobileOpen(false)} aria-hidden="true" />
+          <aside className="absolute left-0 top-0 flex h-full w-[280px] max-w-[85vw] flex-col bg-background border-r shadow-lg overflow-hidden">
+            <div className="shrink-0 flex items-center justify-between gap-2 border-b px-4 py-3">
+              <Link href="/backend" className="flex items-center gap-2 min-w-0 text-sm font-semibold" onClick={() => setMobileOpen(false)} aria-label={t('appShell.goToDashboard')}>
+                <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? resolvedProductName} width={28} height={28} className="rounded shrink-0" />
+                <span className="truncate">{resolvedProductName}</span>
               </Link>
-              <IconButton variant="outline" size="sm" onClick={() => setMobileOpen(false)} aria-label={t('appShell.closeMenu')}>✕</IconButton>
+              <IconButton variant="ghost" size="sm" onClick={() => setMobileOpen(false)} aria-label={t('appShell.closeMenu')}>
+                <X className="size-4" />
+              </IconButton>
             </div>
             {mobileSidebarSlot && (
               <div className="shrink-0 border-b px-3 py-2">
                 {mobileSidebarSlot}
               </div>
             )}
-            <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-3">
+            {sidebarMode !== 'main' ? (
+              <div className="shrink-0 flex items-center gap-5 border-b px-4 pt-3 pb-0" role="tablist">
+                {([
+                  { id: 'main' as const, label: t('backend.nav.main', 'Main') },
+                  {
+                    id: 'section' as const,
+                    label:
+                      sidebarMode === 'settings'
+                        ? settingsSectionTitle ?? t('backend.nav.settings', 'Settings')
+                        : profileSectionTitle ?? t('backend.nav.profile', 'Profile'),
+                  },
+                ]).map((tab) => {
+                  const isActive =
+                    tab.id === 'main' ? mobileDrawerView === 'main' : mobileDrawerView === 'auto'
+                  const tabId = `mobile-drawer-tab-${tab.id}`
+                  return (
+                    <button
+                      key={tab.id}
+                      id={tabId}
+                      type="button"
+                      role="tab"
+                      aria-selected={isActive}
+                      aria-controls="mobile-drawer-tabpanel"
+                      onClick={() => setMobileDrawerView(tab.id === 'main' ? 'main' : 'auto')}
+                      className="relative inline-flex items-center pb-2 text-sm font-medium leading-5 tracking-tight transition-colors focus:outline-none data-[active=true]:text-foreground data-[active=false]:text-muted-foreground hover:text-foreground"
+                      data-active={isActive}
+                    >
+                      <span>{tab.label}</span>
+                      {isActive ? (
+                        <span
+                          className="absolute -bottom-px left-0 right-0 h-0.5 bg-foreground"
+                          aria-hidden="true"
+                        />
+                      ) : null}
+                    </button>
+                  )
+                })}
+              </div>
+            ) : null}
+            <div
+              id="mobile-drawer-tabpanel"
+              role={sidebarMode !== 'main' ? 'tabpanel' : undefined}
+              aria-labelledby={
+                sidebarMode !== 'main'
+                  ? `mobile-drawer-tab-${mobileDrawerView === 'main' ? 'main' : 'section'}`
+                  : undefined
+              }
+              className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-3"
+            >
               {/* Force expanded sidebar in mobile drawer, hide its header and collapse toggle */}
-              {renderSidebar(false, true)}
+              {renderSidebar(false, true, mobileDrawerView === 'main')}
             </div>
           </aside>
         </div>