@evinvest/uikit 0.32.0 → 0.33.0

package/dist/components/derived/item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/derived/item.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Slot } from \"../../primitives/slot\";\nimport { Separator } from \"../atomic/separator\";\nimport {\n  ITEM_ACTIONS,\n  ITEM_BASE,\n  ITEM_CONTENT,\n  ITEM_DESCRIPTION,\n  ITEM_FOOTER,\n  ITEM_GROUP,\n  ITEM_HEADER,\n  ITEM_MEDIA_BASE,\n  ITEM_SEPARATOR,\n  ITEM_TITLE,\n  itemMediaVariants,\n  itemSizes,\n  itemVariants,\n  type ItemMediaVariant,\n  type ItemSize,\n  type ItemVariant,\n} from \"../../generated/item\";\n\nexport type { ItemMediaVariant, ItemSize, ItemVariant };\n\nexport function ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(ITEM_GROUP, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(ITEM_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ItemProps extends React.ComponentProps<\"div\"> {\n  variant?: ItemVariant;\n  size?: ItemSize;\n  asChild?: boolean;\n}\n\nexport function Item({\n  className,\n  variant = \"bare\",\n  size = \"md\",\n  asChild = false,\n  ...props\n}: ItemProps) {\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(ITEM_BASE, itemVariants[variant], itemSizes[size], className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface ItemMediaProps extends React.ComponentProps<\"div\"> {\n  variant?: ItemMediaVariant;\n}\n\nexport function ItemMedia({\n  className,\n  variant = \"bare\",\n  ...props\n}: ItemMediaProps) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(ITEM_MEDIA_BASE, itemMediaVariants[variant], className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(ITEM_CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(ITEM_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(ITEM_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(ITEM_ACTIONS, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(ITEM_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(ITEM_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/derived/item.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Slot } from \"../../primitives/slot\";\nimport { Separator } from \"../atomic/separator\";\nimport {\n  ITEM_ACTIONS,\n  ITEM_BASE,\n  ITEM_CONTENT,\n  ITEM_DESCRIPTION,\n  ITEM_FOOTER,\n  ITEM_GROUP,\n  ITEM_HEADER,\n  ITEM_MEDIA_BASE,\n  ITEM_SEPARATOR,\n  ITEM_TITLE,\n  itemMediaVariants,\n  itemSizes,\n  itemVariants,\n  type ItemMediaVariant,\n  type ItemSize,\n  type ItemVariant,\n} from \"../../generated/item\";\n\nexport type { ItemMediaVariant, ItemSize, ItemVariant };\n\nexport function ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(ITEM_GROUP, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      orientation=\"horizontal\"\n      className={cn(ITEM_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ItemProps extends React.ComponentProps<\"div\"> {\n  variant?: ItemVariant;\n  size?: ItemSize;\n  asChild?: boolean;\n}\n\nexport function Item({\n  className,\n  variant = \"bare\",\n  size = \"md\",\n  asChild = false,\n  ...props\n}: ItemProps) {\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(ITEM_BASE, itemVariants[variant], itemSizes[size], className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface ItemMediaProps extends React.ComponentProps<\"div\"> {\n  variant?: ItemMediaVariant;\n}\n\nexport function ItemMedia({\n  className,\n  variant = \"bare\",\n  ...props\n}: ItemMediaProps) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(ITEM_MEDIA_BASE, itemMediaVariants[variant], className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(ITEM_CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(ITEM_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(ITEM_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(ITEM_ACTIONS, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(ITEM_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(ITEM_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"AA2BI;AA3BJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAIA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAY;AAAA,MACZ,WAAW,GAAG,gBAAgB,SAAS;AAAA,MACtC,GAAG;AAAA;AAAA,EACN;AAEJ;AAQO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,GAAc;AACZ,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,WAAW,GAAG,WAAW,aAAa,OAAO,GAAG,UAAU,IAAI,GAAG,SAAS;AAAA,MACzE,GAAI;AAAA;AAAA,EACP;AAEJ;AAMO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,iBAAiB,kBAAkB,OAAO,GAAG,SAAS;AAAA,MACnE,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,SAAS;AAAA,MACpC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,YAAY,SAAS;AAAA,MAClC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,cAAc,SAAS;AAAA,MACpC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,aAAa,SAAS;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,aAAa,SAAS;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/derived/popover-form.js

@@ -7,7 +7,8 @@ import {
   POPOVER_FORM_CONTENT,
   POPOVER_FORM_FIELDS,
   POPOVER_FORM_FORM,
-  POPOVER_FORM_TITLE
+  POPOVER_FORM_TITLE,
+  POPOVER_FORM_LABELS
 } from "../../generated/popover-form.js";
 import { useControllableState } from "../../primitives/use-controllable-state.js";
 import { Button } from "../atomic/button.js";
@@ -46,8 +47,8 @@ function PopoverForm({
           /* @__PURE__ */ jsx("h3", { id: titleId, className: POPOVER_FORM_TITLE, children: title }),
           /* @__PURE__ */ jsx("div", { className: POPOVER_FORM_FIELDS, children }),
           /* @__PURE__ */ jsxs("div", { className: POPOVER_FORM_ACTIONS, children: [
-            /* @__PURE__ */ jsx(Button, { type: "reset", variant: "ghost", size: "sm", children: labels.reset ?? "Reset" }),
-            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "sm", children: labels.submit ?? "Apply" })
+            /* @__PURE__ */ jsx(Button, { type: "reset", variant: "ghost", size: "sm", children: labels.reset ?? POPOVER_FORM_LABELS.reset }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "sm", children: labels.submit ?? POPOVER_FORM_LABELS.submit })
           ] })
         ]
       }

package/dist/components/derived/popover-form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/derived/popover-form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  POPOVER_FORM_ACTIONS,\n  POPOVER_FORM_CONTENT,\n  POPOVER_FORM_FIELDS,\n  POPOVER_FORM_FORM,\n  POPOVER_FORM_TITLE,\n} from \"../../generated/popover-form\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { Button } from \"../atomic/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../atomic/popover\";\n\nexport interface PopoverFormLabels {\n  submit?: string;\n  reset?: string;\n}\n\nexport interface PopoverFormProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The button that opens the form; wrapped with `asChild`, so pass one element. */\n  trigger: React.ReactNode;\n  title: React.ReactNode;\n  /** The fields: `Field`s with an `Input`, `Select` or `Checkbox`. */\n  children: React.ReactNode;\n  /** Called on submit; the popover closes afterwards. */\n  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  /** Called when Reset is pressed; native fields are reset by the browser first. */\n  onReset?: () => void;\n  labels?: PopoverFormLabels;\n  className?: string;\n}\n\n/** A filter-style form in a popover: a title, fields, Reset and Apply. */\nexport function PopoverForm({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  children,\n  onSubmit,\n  onReset,\n  labels = {},\n  className,\n}: PopoverFormProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const titleId = React.useId();\n  return (\n    <Popover open={isOpen} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverContent align=\"start\" className={cn(POPOVER_FORM_CONTENT, className)} aria-labelledby={titleId} role=\"dialog\">\n        <form\n          className={POPOVER_FORM_FORM}\n          onSubmit={(e) => {\n            e.preventDefault();\n            onSubmit?.(e);\n            setOpen(false);\n          }}\n          onReset={() => onReset?.()}\n        >\n          <h3 id={titleId} className={POPOVER_FORM_TITLE}>\n            {title}\n          </h3>\n          <div className={POPOVER_FORM_FIELDS}>{children}</div>\n          <div className={POPOVER_FORM_ACTIONS}>\n            <Button type=\"reset\" variant=\"ghost\" size=\"sm\">\n              {labels.reset ?? \"Reset\"}\n            </Button>\n            <Button type=\"submit\" variant=\"primary\" size=\"sm\">\n              {labels.submit ?? \"Apply\"}\n            </Button>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AA0DM,cAeI,YAfJ;AAxDN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAyBjD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,UAAU,MAAM,MAAM;AAC5B,SACE,qBAAC,WAAQ,MAAM,QAAQ,cAAc,SACnC;AAAA,wBAAC,kBAAe,SAAO,MAAE,mBAAQ;AAAA,IACjC,oBAAC,kBAAe,OAAM,SAAQ,WAAW,GAAG,sBAAsB,SAAS,GAAG,mBAAiB,SAAS,MAAK,UAC3G;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU,CAAC,MAAM;AACf,YAAE,eAAe;AACjB,qBAAW,CAAC;AACZ,kBAAQ,KAAK;AAAA,QACf;AAAA,QACA,SAAS,MAAM,UAAU;AAAA,QAEzB;AAAA,8BAAC,QAAG,IAAI,SAAS,WAAW,oBACzB,iBACH;AAAA,UACA,oBAAC,SAAI,WAAW,qBAAsB,UAAS;AAAA,UAC/C,qBAAC,SAAI,WAAW,sBACd;AAAA,gCAAC,UAAO,MAAK,SAAQ,SAAQ,SAAQ,MAAK,MACvC,iBAAO,SAAS,SACnB;AAAA,YACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAC1C,iBAAO,UAAU,SACpB;AAAA,aACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/derived/popover-form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  POPOVER_FORM_ACTIONS,\n  POPOVER_FORM_CONTENT,\n  POPOVER_FORM_FIELDS,\n  POPOVER_FORM_FORM,\n  POPOVER_FORM_TITLE,\n  POPOVER_FORM_LABELS,\n} from \"../../generated/popover-form\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { Button } from \"../atomic/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../atomic/popover\";\n\nexport interface PopoverFormLabels {\n  submit?: string;\n  reset?: string;\n}\n\nexport interface PopoverFormProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The button that opens the form; wrapped with `asChild`, so pass one element. */\n  trigger: React.ReactNode;\n  title: React.ReactNode;\n  /** The fields: `Field`s with an `Input`, `Select` or `Checkbox`. */\n  children: React.ReactNode;\n  /** Called on submit; the popover closes afterwards. */\n  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  /** Called when Reset is pressed; native fields are reset by the browser first. */\n  onReset?: () => void;\n  labels?: PopoverFormLabels;\n  className?: string;\n}\n\n/** A filter-style form in a popover: a title, fields, Reset and Apply. */\nexport function PopoverForm({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  children,\n  onSubmit,\n  onReset,\n  labels = {},\n  className,\n}: PopoverFormProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const titleId = React.useId();\n  return (\n    <Popover open={isOpen} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverContent align=\"start\" className={cn(POPOVER_FORM_CONTENT, className)} aria-labelledby={titleId} role=\"dialog\">\n        <form\n          className={POPOVER_FORM_FORM}\n          onSubmit={(e) => {\n            e.preventDefault();\n            onSubmit?.(e);\n            setOpen(false);\n          }}\n          onReset={() => onReset?.()}\n        >\n          <h3 id={titleId} className={POPOVER_FORM_TITLE}>\n            {title}\n          </h3>\n          <div className={POPOVER_FORM_FIELDS}>{children}</div>\n          <div className={POPOVER_FORM_ACTIONS}>\n            <Button type=\"reset\" variant=\"ghost\" size=\"sm\">\n              {labels.reset ?? POPOVER_FORM_LABELS.reset}\n            </Button>\n            <Button type=\"submit\" variant=\"primary\" size=\"sm\">\n              {labels.submit ?? POPOVER_FORM_LABELS.submit}\n            </Button>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AA2DM,cAeI,YAfJ;AAzDN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAyBjD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,UAAU,MAAM,MAAM;AAC5B,SACE,qBAAC,WAAQ,MAAM,QAAQ,cAAc,SACnC;AAAA,wBAAC,kBAAe,SAAO,MAAE,mBAAQ;AAAA,IACjC,oBAAC,kBAAe,OAAM,SAAQ,WAAW,GAAG,sBAAsB,SAAS,GAAG,mBAAiB,SAAS,MAAK,UAC3G;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU,CAAC,MAAM;AACf,YAAE,eAAe;AACjB,qBAAW,CAAC;AACZ,kBAAQ,KAAK;AAAA,QACf;AAAA,QACA,SAAS,MAAM,UAAU;AAAA,QAEzB;AAAA,8BAAC,QAAG,IAAI,SAAS,WAAW,oBACzB,iBACH;AAAA,UACA,oBAAC,SAAI,WAAW,qBAAsB,UAAS;AAAA,UAC/C,qBAAC,SAAI,WAAW,sBACd;AAAA,gCAAC,UAAO,MAAK,SAAQ,SAAQ,SAAQ,MAAK,MACvC,iBAAO,SAAS,oBAAoB,OACvC;AAAA,YACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAC1C,iBAAO,UAAU,oBAAoB,QACxC;AAAA,aACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/derived/settings.js

@@ -16,9 +16,9 @@ import {
   SETTINGS_SECTION_HEADER,
   SETTINGS_SECTION_HEADER_FLUSH,
   SETTINGS_SECTION_HEADING,
-  SETTINGS_SECTION_TITLE,
-  settingsSectionToneClasses
+  SETTINGS_SECTION_TITLE
 } from "../../generated/settings.js";
+import { toneClasses } from "../../generated/tone.js";
 import { FormRow } from "../atomic/form-row.js";
 function SettingsLayout({ nav, className, children, ...props }) {
   return /* @__PURE__ */ jsxs(
@@ -41,7 +41,7 @@ function SettingsSection({
   title,
   description,
   action,
-  tone = "default",
+  tone = "neutral",
   flush = false,
   className,
   children,
@@ -56,7 +56,7 @@ function SettingsSection({
       "aria-labelledby": headingId,
       className: cn(
         SETTINGS_SECTION_BASE,
-        settingsSectionToneClasses[tone],
+        toneClasses[tone],
         className
       ),
       ...props,

package/dist/components/derived/settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/derived/settings.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  SETTINGS_LAYOUT,\n  SETTINGS_MAIN,\n  SETTINGS_NAV,\n  SETTINGS_ROW_INLINE,\n  SETTINGS_SECTION_ACTION,\n  SETTINGS_SECTION_BASE,\n  SETTINGS_SECTION_BODY,\n  SETTINGS_SECTION_BODY_FLUSH,\n  SETTINGS_SECTION_BODY_PADDED,\n  SETTINGS_SECTION_DESCRIPTION,\n  SETTINGS_SECTION_HEADER,\n  SETTINGS_SECTION_HEADER_FLUSH,\n  SETTINGS_SECTION_HEADING,\n  SETTINGS_SECTION_TITLE,\n  settingsSectionToneClasses,\n  type SettingsSectionTone,\n} from \"../../generated/settings\";\nimport { FormRow, type FormRowProps } from \"../atomic/form-row\";\n\nexport interface SettingsLayoutProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  /** The section rail (`SectionNav`), 256 wide from `lg` up and on top below it. */\n  nav: React.ReactNode;\n}\n\n/**\n * Rail on the left, cards in the main column; centres a 1408 px measure. The column is a\n * div: `AppShell` already renders the page's `<main>`.\n */\nexport function SettingsLayout({ nav, className, children, ...props }: SettingsLayoutProps) {\n  return (\n    <div\n      data-slot=\"settings-layout\"\n      className={cn(\n        SETTINGS_LAYOUT,\n        className,\n      )}\n      {...props}\n    >\n      <div data-slot=\"settings-nav\" className={SETTINGS_NAV}>\n        {nav}\n      </div>\n      <div data-slot=\"settings-main\" className={SETTINGS_MAIN}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport interface SettingsSectionProps extends Omit<React.ComponentProps<\"section\">, \"title\"> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Top-right control, e.g. a \"Create team\" button. */\n  action?: React.ReactNode;\n  /** `danger` draws the destructive-zone edge. */\n  tone?: SettingsSectionTone;\n  /** Rows run edge to edge with their hairlines; otherwise the body is padded. */\n  flush?: boolean;\n}\n\n/** A settings card: title, a line saying what it is for, then the body. */\nexport function SettingsSection({\n  title,\n  description,\n  action,\n  tone = \"default\",\n  flush = false,\n  className,\n  children,\n  ...props\n}: SettingsSectionProps) {\n  const headingId = React.useId();\n  return (\n    <section\n      data-slot=\"settings-section\"\n      data-tone={tone}\n      aria-labelledby={headingId}\n      className={cn(\n        SETTINGS_SECTION_BASE,\n        settingsSectionToneClasses[tone],\n        className,\n      )}\n      {...props}\n    >\n      <header className={cn(SETTINGS_SECTION_HEADER, flush && SETTINGS_SECTION_HEADER_FLUSH)}>\n        <div className={SETTINGS_SECTION_HEADING}>\n          <h3 id={headingId} className={SETTINGS_SECTION_TITLE}>\n            {title}\n          </h3>\n          {description != null && <p className={SETTINGS_SECTION_DESCRIPTION}>{description}</p>}\n        </div>\n        {action != null && <div className={SETTINGS_SECTION_ACTION}>{action}</div>}\n      </header>\n      {children != null && (\n        <div className={cn(SETTINGS_SECTION_BODY, flush ? SETTINGS_SECTION_BODY_FLUSH : SETTINGS_SECTION_BODY_PADDED)}>\n          {children}\n        </div>\n      )}\n    </section>\n  );\n}\n\nexport interface SettingsRowProps extends FormRowProps {\n  /** Keeps label and control on one line at every width, control at the end: for a switch or a button. */\n  inline?: boolean;\n}\n\n/** A `FormRow` for settings; `inline` suits toggles. */\nexport function SettingsRow({ inline = false, className, ...props }: SettingsRowProps) {\n  return (\n    <FormRow\n      data-inline={inline}\n      className={cn(\n        inline && SETTINGS_ROW_INLINE,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAmCI,SAQE,KARF;AAjCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,eAAkC;AAWpC,SAAS,eAAe,EAAE,KAAK,WAAW,UAAU,GAAG,MAAM,GAAwB;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAI,aAAU,gBAAe,WAAW,cACtC,eACH;AAAA,QACA,oBAAC,SAAI,aAAU,iBAAgB,WAAW,eACvC,UACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAcO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,YAAY,MAAM,MAAM;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,2BAA2B,IAAI;AAAA,QAC/B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,YAAO,WAAW,GAAG,yBAAyB,SAAS,6BAA6B,GACnF;AAAA,+BAAC,SAAI,WAAW,0BACd;AAAA,gCAAC,QAAG,IAAI,WAAW,WAAW,wBAC3B,iBACH;AAAA,YACC,eAAe,QAAQ,oBAAC,OAAE,WAAW,8BAA+B,uBAAY;AAAA,aACnF;AAAA,UACC,UAAU,QAAQ,oBAAC,SAAI,WAAW,yBAA0B,kBAAO;AAAA,WACtE;AAAA,QACC,YAAY,QACX,oBAAC,SAAI,WAAW,GAAG,uBAAuB,QAAQ,8BAA8B,4BAA4B,GACzG,UACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAQO,SAAS,YAAY,EAAE,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AACrF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW;AAAA,QACT,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/derived/settings.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  SETTINGS_LAYOUT,\n  SETTINGS_MAIN,\n  SETTINGS_NAV,\n  SETTINGS_ROW_INLINE,\n  SETTINGS_SECTION_ACTION,\n  SETTINGS_SECTION_BASE,\n  SETTINGS_SECTION_BODY,\n  SETTINGS_SECTION_BODY_FLUSH,\n  SETTINGS_SECTION_BODY_PADDED,\n  SETTINGS_SECTION_DESCRIPTION,\n  SETTINGS_SECTION_HEADER,\n  SETTINGS_SECTION_HEADER_FLUSH,\n  SETTINGS_SECTION_HEADING,\n  SETTINGS_SECTION_TITLE,\n} from \"../../generated/settings\";\nimport { toneClasses, type Tone } from \"../../generated/tone\";\nimport { FormRow, type FormRowProps } from \"../atomic/form-row\";\n\nexport interface SettingsLayoutProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  /** The section rail (`SectionNav`), 256 wide from `lg` up and on top below it. */\n  nav: React.ReactNode;\n}\n\n/**\n * Rail on the left, cards in the main column; centres a 1408 px measure. The column is a\n * div: `AppShell` already renders the page's `<main>`.\n */\nexport function SettingsLayout({ nav, className, children, ...props }: SettingsLayoutProps) {\n  return (\n    <div\n      data-slot=\"settings-layout\"\n      className={cn(\n        SETTINGS_LAYOUT,\n        className,\n      )}\n      {...props}\n    >\n      <div data-slot=\"settings-nav\" className={SETTINGS_NAV}>\n        {nav}\n      </div>\n      <div data-slot=\"settings-main\" className={SETTINGS_MAIN}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport interface SettingsSectionProps extends Omit<React.ComponentProps<\"section\">, \"title\"> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Top-right control, e.g. a \"Create team\" button. */\n  action?: React.ReactNode;\n  /** `error` draws the destructive-zone edge. */\n  tone?: Tone;\n  /** Rows run edge to edge with their hairlines; otherwise the body is padded. */\n  flush?: boolean;\n}\n\n/** A settings card: title, a line saying what it is for, then the body. */\nexport function SettingsSection({\n  title,\n  description,\n  action,\n  tone = \"neutral\",\n  flush = false,\n  className,\n  children,\n  ...props\n}: SettingsSectionProps) {\n  const headingId = React.useId();\n  return (\n    <section\n      data-slot=\"settings-section\"\n      data-tone={tone}\n      aria-labelledby={headingId}\n      className={cn(\n        SETTINGS_SECTION_BASE,\n        toneClasses[tone],\n        className,\n      )}\n      {...props}\n    >\n      <header className={cn(SETTINGS_SECTION_HEADER, flush && SETTINGS_SECTION_HEADER_FLUSH)}>\n        <div className={SETTINGS_SECTION_HEADING}>\n          <h3 id={headingId} className={SETTINGS_SECTION_TITLE}>\n            {title}\n          </h3>\n          {description != null && <p className={SETTINGS_SECTION_DESCRIPTION}>{description}</p>}\n        </div>\n        {action != null && <div className={SETTINGS_SECTION_ACTION}>{action}</div>}\n      </header>\n      {children != null && (\n        <div className={cn(SETTINGS_SECTION_BODY, flush ? SETTINGS_SECTION_BODY_FLUSH : SETTINGS_SECTION_BODY_PADDED)}>\n          {children}\n        </div>\n      )}\n    </section>\n  );\n}\n\nexport interface SettingsRowProps extends FormRowProps {\n  /** Keeps label and control on one line at every width, control at the end: for a switch or a button. */\n  inline?: boolean;\n}\n\n/** A `FormRow` for settings; `inline` suits toggles. */\nexport function SettingsRow({ inline = false, className, ...props }: SettingsRowProps) {\n  return (\n    <FormRow\n      data-inline={inline}\n      className={cn(\n        inline && SETTINGS_ROW_INLINE,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAkCI,SAQE,KARF;AAhCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAA8B;AACvC,SAAS,eAAkC;AAWpC,SAAS,eAAe,EAAE,KAAK,WAAW,UAAU,GAAG,MAAM,GAAwB;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAI,aAAU,gBAAe,WAAW,cACtC,eACH;AAAA,QACA,oBAAC,SAAI,aAAU,iBAAgB,WAAW,eACvC,UACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAcO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,YAAY,MAAM,MAAM;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,YAAY,IAAI;AAAA,QAChB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,YAAO,WAAW,GAAG,yBAAyB,SAAS,6BAA6B,GACnF;AAAA,+BAAC,SAAI,WAAW,0BACd;AAAA,gCAAC,QAAG,IAAI,WAAW,WAAW,wBAC3B,iBACH;AAAA,YACC,eAAe,QAAQ,oBAAC,OAAE,WAAW,8BAA+B,uBAAY;AAAA,aACnF;AAAA,UACC,UAAU,QAAQ,oBAAC,SAAI,WAAW,yBAA0B,kBAAO;AAAA,WACtE;AAAA,QACC,YAAY,QACX,oBAAC,SAAI,WAAW,GAAG,uBAAuB,QAAQ,8BAA8B,4BAA4B,GACzG,UACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAQO,SAAS,YAAY,EAAE,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AACrF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW;AAAA,QACT,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/shell/account-menu-profile.js

@@ -44,7 +44,7 @@ function ProfileTabs({
         onClick: () => onChange(t.id),
         onKeyDown: (e) => move(e, i),
         className: cn(
-          "-mb-px h-8 flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "-mb-px h-(--control-h-sm) flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring",
           selected ? "border-primary text-ink" : "border-transparent text-ink-mid hover:text-ink"
         ),
         children: t.label

package/dist/components/shell/account-menu-profile.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/account-menu-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Avatar, AvatarFallback } from \"../atomic/avatar\";\nimport { Badge } from \"../atomic/badge\";\nimport {\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n} from \"../atomic/dropdown-menu\";\nimport { Switch } from \"../atomic/switch\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface AccountMenuTab {\n  id: string;\n  label: React.ReactNode;\n  /** Shown instead of the menu body when this tab is current; the first tab is always the menu itself. */\n  content?: React.ReactNode;\n}\n\nexport interface AccountMenuProfile {\n  /** Under the name on the profile card, e.g. \"Free\". */\n  plan?: string;\n  /** Makes the card a menu item that runs this and closes the menu, e.g. to open the account settings. */\n  onOpenProfile?: () => void;\n  tabs?: readonly AccountMenuTab[];\n  /** Names the tab row for assistive tech. Default `\"Sections\"`. */\n  tabsLabel?: string;\n  /** Current tab id (controlled). */\n  tab?: string;\n  onTabChange?: (id: string) => void;\n  /** A row with a short value badge on the right (\"EN\"); picking it runs `onSelect`. */\n  language?: { label: string; value: string; onSelect?: () => void };\n  /** A row with a switch; the menu closes after a toggle. */\n  darkTheme?: { label: string; checked: boolean; onCheckedChange: (checked: boolean) => void };\n  /** A submenu of radio options; the current one's label shows on the row. */\n  colorTheme?: {\n    label: string;\n    value: string;\n    options: readonly { id: string; label: string }[];\n    onValueChange: (id: string) => void;\n  };\n  /** Glyphs for the rows, so the kit carries no icon set. */\n  icons?: { language?: React.ReactNode; darkTheme?: React.ReactNode; colorTheme?: React.ReactNode };\n}\n\n/**\n * The tabs are `menuitemradio` items in a group, not a tablist: a menu may only\n * hold items, and this way the menu's own arrow-key roving reaches them.\n * Selecting one does not close the menu.\n */\nexport function ProfileTabs({\n  tabs,\n  value,\n  onChange,\n  label = \"Sections\",\n}: {\n  tabs: readonly AccountMenuTab[];\n  value: string;\n  onChange: (id: string) => void;\n  label?: string | undefined;\n}) {\n  const move = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const step = e.key === \"ArrowRight\" ? 1 : e.key === \"ArrowLeft\" ? -1 : 0;\n    if (step === 0) return;\n    // Up and Down belong to the menu; Left and Right stay in the row.\n    e.stopPropagation();\n    e.preventDefault();\n    const target = (index + step + tabs.length) % tabs.length;\n    const next = tabs[target];\n    if (!next) return;\n    onChange(next.id);\n    e.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role=\"menuitemradio\"]')[target]?.focus();\n  };\n  return (\n    <div role=\"group\" aria-label={label} data-slot=\"account-menu-tabs\" className=\"flex border-b border-border-subtle\">\n      {tabs.map((t, i) => {\n        const selected = t.id === value;\n        return (\n          <button\n            key={t.id}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={selected}\n            tabIndex={-1}\n            onClick={() => onChange(t.id)}\n            onKeyDown={(e) => move(e, i)}\n            className={cn(\n              \"-mb-px h-8 flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              selected ? \"border-primary text-ink\" : \"border-transparent text-ink-mid hover:text-ink\",\n            )}\n          >\n            {t.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function ProfileCard({\n  name,\n  plan,\n  initials,\n  onOpen,\n}: {\n  name: string;\n  plan?: string | undefined;\n  initials: string;\n  onOpen?: (() => void) | undefined;\n}) {\n  const content = (\n    <>\n      <Avatar className=\"size-14 shrink-0 rounded-full\">\n        <AvatarFallback className=\"font-serif text-h2 font-light text-ink\">{initials.slice(0, 1)}</AvatarFallback>\n      </Avatar>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span className=\"truncate text-body font-medium text-ink\">{name}</span>\n        {plan && <span className=\"text-caption text-ink-soft\">{plan}</span>}\n      </span>\n      {onOpen && <UiIcon name=\"chevron-right\" className=\"size-4 text-ink-soft\" />}\n    </>\n  );\n  if (!onOpen) {\n    return (\n      <div data-slot=\"account-menu-card\" className=\"flex w-full items-center gap-2.5 p-2\">\n        {content}\n      </div>\n    );\n  }\n  // A real menu item: it joins the arrow-key order and closes the menu, so a dialog opened from it is not left under the menu.\n  return (\n    <DropdownMenuItem data-slot=\"account-menu-card\" className=\"h-auto gap-2.5 p-2\" onClick={onOpen}>\n      {content}\n    </DropdownMenuItem>\n  );\n}\n\nexport function ProfileSettingRows({ profile }: { profile: AccountMenuProfile }) {\n  const { language, darkTheme, colorTheme, icons } = profile;\n  if (!language && !darkTheme && !colorTheme) return null;\n  const currentColor = colorTheme?.options.find((o) => o.id === colorTheme.value)?.label;\n  return (\n    <>\n      <DropdownMenuSeparator />\n      {language && (\n        <DropdownMenuItem onClick={() => language.onSelect?.()}>\n          {icons?.language}\n          <span className=\"flex-1\">{language.label}</span>\n          <Badge>{language.value}</Badge>\n        </DropdownMenuItem>\n      )}\n      {darkTheme && (\n        <DropdownMenuItem\n          role=\"menuitemcheckbox\"\n          aria-checked={darkTheme.checked}\n          onClick={() => darkTheme.onCheckedChange(!darkTheme.checked)}\n        >\n          {icons?.darkTheme}\n          <span className=\"flex-1\">{darkTheme.label}</span>\n          {/* Presentational: the row is the control, so the switch stays out of the tab order. */}\n          <Switch checked={darkTheme.checked} tabIndex={-1} aria-hidden className=\"pointer-events-none\" />\n        </DropdownMenuItem>\n      )}\n      {colorTheme && (\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            {icons?.colorTheme}\n            <span className=\"flex-1\">{colorTheme.label}</span>\n            {currentColor && <span className=\"text-body-s text-ink-soft\">{currentColor}</span>}\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuRadioGroup value={colorTheme.value} onValueChange={colorTheme.onValueChange}>\n              {colorTheme.options.map((o) => (\n                <DropdownMenuRadioItem key={o.id} value={o.id}>\n                  {o.label}\n                </DropdownMenuRadioItem>\n              ))}\n            </DropdownMenuRadioGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      )}\n    </>\n  );\n}\n"],"mappings":";AAoFU,SAiCN,UAjCM,KAqCJ,YArCI;AAlFV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,QAAQ,sBAAsB;AACvC,SAAS,aAAa;AACtB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,cAAc;AAwChB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAKG;AACD,QAAM,OAAO,CAAC,GAA2C,UAAkB;AACzE,UAAM,OAAO,EAAE,QAAQ,eAAe,IAAI,EAAE,QAAQ,cAAc,KAAK;AACvE,QAAI,SAAS,EAAG;AAEhB,MAAE,gBAAgB;AAClB,MAAE,eAAe;AACjB,UAAM,UAAU,QAAQ,OAAO,KAAK,UAAU,KAAK;AACnD,UAAM,OAAO,KAAK,MAAM;AACxB,QAAI,CAAC,KAAM;AACX,aAAS,KAAK,EAAE;AAChB,MAAE,cAAc,eAAe,iBAA8B,wBAAwB,EAAE,MAAM,GAAG,MAAM;AAAA,EACxG;AACA,SACE,oBAAC,SAAI,MAAK,SAAQ,cAAY,OAAO,aAAU,qBAAoB,WAAU,sCAC1E,eAAK,IAAI,CAAC,GAAG,MAAM;AAClB,UAAM,WAAW,EAAE,OAAO;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,UAAU;AAAA,QACV,SAAS,MAAM,SAAS,EAAE,EAAE;AAAA,QAC5B,WAAW,CAAC,MAAM,KAAK,GAAG,CAAC;AAAA,QAC3B,WAAW;AAAA,UACT;AAAA,UACA,WAAW,4BAA4B;AAAA,QACzC;AAAA,QAEC,YAAE;AAAA;AAAA,MAZE,EAAE;AAAA,IAaT;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,UACJ,iCACE;AAAA,wBAAC,UAAO,WAAU,iCAChB,8BAAC,kBAAe,WAAU,0CAA0C,mBAAS,MAAM,GAAG,CAAC,GAAE,GAC3F;AAAA,IACA,qBAAC,UAAK,WAAU,wCACd;AAAA,0BAAC,UAAK,WAAU,2CAA2C,gBAAK;AAAA,MAC/D,QAAQ,oBAAC,UAAK,WAAU,8BAA8B,gBAAK;AAAA,OAC9D;AAAA,IACC,UAAU,oBAAC,UAAO,MAAK,iBAAgB,WAAU,wBAAuB;AAAA,KAC3E;AAEF,MAAI,CAAC,QAAQ;AACX,WACE,oBAAC,SAAI,aAAU,qBAAoB,WAAU,wCAC1C,mBACH;AAAA,EAEJ;AAEA,SACE,oBAAC,oBAAiB,aAAU,qBAAoB,WAAU,sBAAqB,SAAS,QACrF,mBACH;AAEJ;AAEO,SAAS,mBAAmB,EAAE,QAAQ,GAAoC;AAC/E,QAAM,EAAE,UAAU,WAAW,YAAY,MAAM,IAAI;AACnD,MAAI,CAAC,YAAY,CAAC,aAAa,CAAC,WAAY,QAAO;AACnD,QAAM,eAAe,YAAY,QAAQ,KAAK,CAAC,MAAM,EAAE,OAAO,WAAW,KAAK,GAAG;AACjF,SACE,iCACE;AAAA,wBAAC,yBAAsB;AAAA,IACtB,YACC,qBAAC,oBAAiB,SAAS,MAAM,SAAS,WAAW,GAClD;AAAA,aAAO;AAAA,MACR,oBAAC,UAAK,WAAU,UAAU,mBAAS,OAAM;AAAA,MACzC,oBAAC,SAAO,mBAAS,OAAM;AAAA,OACzB;AAAA,IAED,aACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,gBAAc,UAAU;AAAA,QACxB,SAAS,MAAM,UAAU,gBAAgB,CAAC,UAAU,OAAO;AAAA,QAE1D;AAAA,iBAAO;AAAA,UACR,oBAAC,UAAK,WAAU,UAAU,oBAAU,OAAM;AAAA,UAE1C,oBAAC,UAAO,SAAS,UAAU,SAAS,UAAU,IAAI,eAAW,MAAC,WAAU,uBAAsB;AAAA;AAAA;AAAA,IAChG;AAAA,IAED,cACC,qBAAC,mBACC;AAAA,2BAAC,0BACE;AAAA,eAAO;AAAA,QACR,oBAAC,UAAK,WAAU,UAAU,qBAAW,OAAM;AAAA,QAC1C,gBAAgB,oBAAC,UAAK,WAAU,6BAA6B,wBAAa;AAAA,SAC7E;AAAA,MACA,oBAAC,0BACC,8BAAC,0BAAuB,OAAO,WAAW,OAAO,eAAe,WAAW,eACxE,qBAAW,QAAQ,IAAI,CAAC,MACvB,oBAAC,yBAAiC,OAAO,EAAE,IACxC,YAAE,SADuB,EAAE,EAE9B,CACD,GACH,GACF;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/shell/account-menu-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Avatar, AvatarFallback } from \"../atomic/avatar\";\nimport { Badge } from \"../atomic/badge\";\nimport {\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n} from \"../atomic/dropdown-menu\";\nimport { Switch } from \"../atomic/switch\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface AccountMenuTab {\n  id: string;\n  label: React.ReactNode;\n  /** Shown instead of the menu body when this tab is current; the first tab is always the menu itself. */\n  content?: React.ReactNode;\n}\n\nexport interface AccountMenuProfile {\n  /** Under the name on the profile card, e.g. \"Free\". */\n  plan?: string;\n  /** Makes the card a menu item that runs this and closes the menu, e.g. to open the account settings. */\n  onOpenProfile?: () => void;\n  tabs?: readonly AccountMenuTab[];\n  /** Names the tab row for assistive tech. Default `\"Sections\"`. */\n  tabsLabel?: string;\n  /** Current tab id (controlled). */\n  tab?: string;\n  onTabChange?: (id: string) => void;\n  /** A row with a short value badge on the right (\"EN\"); picking it runs `onSelect`. */\n  language?: { label: string; value: string; onSelect?: () => void };\n  /** A row with a switch; the menu closes after a toggle. */\n  darkTheme?: { label: string; checked: boolean; onCheckedChange: (checked: boolean) => void };\n  /** A submenu of radio options; the current one's label shows on the row. */\n  colorTheme?: {\n    label: string;\n    value: string;\n    options: readonly { id: string; label: string }[];\n    onValueChange: (id: string) => void;\n  };\n  /** Glyphs for the rows, so the kit carries no icon set. */\n  icons?: { language?: React.ReactNode; darkTheme?: React.ReactNode; colorTheme?: React.ReactNode };\n}\n\n/**\n * The tabs are `menuitemradio` items in a group, not a tablist: a menu may only\n * hold items, and this way the menu's own arrow-key roving reaches them.\n * Selecting one does not close the menu.\n */\nexport function ProfileTabs({\n  tabs,\n  value,\n  onChange,\n  label = \"Sections\",\n}: {\n  tabs: readonly AccountMenuTab[];\n  value: string;\n  onChange: (id: string) => void;\n  label?: string | undefined;\n}) {\n  const move = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const step = e.key === \"ArrowRight\" ? 1 : e.key === \"ArrowLeft\" ? -1 : 0;\n    if (step === 0) return;\n    // Up and Down belong to the menu; Left and Right stay in the row.\n    e.stopPropagation();\n    e.preventDefault();\n    const target = (index + step + tabs.length) % tabs.length;\n    const next = tabs[target];\n    if (!next) return;\n    onChange(next.id);\n    e.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role=\"menuitemradio\"]')[target]?.focus();\n  };\n  return (\n    <div role=\"group\" aria-label={label} data-slot=\"account-menu-tabs\" className=\"flex border-b border-border-subtle\">\n      {tabs.map((t, i) => {\n        const selected = t.id === value;\n        return (\n          <button\n            key={t.id}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={selected}\n            tabIndex={-1}\n            onClick={() => onChange(t.id)}\n            onKeyDown={(e) => move(e, i)}\n            className={cn(\n              \"-mb-px h-(--control-h-sm) flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              selected ? \"border-primary text-ink\" : \"border-transparent text-ink-mid hover:text-ink\",\n            )}\n          >\n            {t.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function ProfileCard({\n  name,\n  plan,\n  initials,\n  onOpen,\n}: {\n  name: string;\n  plan?: string | undefined;\n  initials: string;\n  onOpen?: (() => void) | undefined;\n}) {\n  const content = (\n    <>\n      <Avatar className=\"size-14 shrink-0 rounded-full\">\n        <AvatarFallback className=\"font-serif text-h2 font-light text-ink\">{initials.slice(0, 1)}</AvatarFallback>\n      </Avatar>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span className=\"truncate text-body font-medium text-ink\">{name}</span>\n        {plan && <span className=\"text-caption text-ink-soft\">{plan}</span>}\n      </span>\n      {onOpen && <UiIcon name=\"chevron-right\" className=\"size-4 text-ink-soft\" />}\n    </>\n  );\n  if (!onOpen) {\n    return (\n      <div data-slot=\"account-menu-card\" className=\"flex w-full items-center gap-2.5 p-2\">\n        {content}\n      </div>\n    );\n  }\n  // A real menu item: it joins the arrow-key order and closes the menu, so a dialog opened from it is not left under the menu.\n  return (\n    <DropdownMenuItem data-slot=\"account-menu-card\" className=\"h-auto gap-2.5 p-2\" onClick={onOpen}>\n      {content}\n    </DropdownMenuItem>\n  );\n}\n\nexport function ProfileSettingRows({ profile }: { profile: AccountMenuProfile }) {\n  const { language, darkTheme, colorTheme, icons } = profile;\n  if (!language && !darkTheme && !colorTheme) return null;\n  const currentColor = colorTheme?.options.find((o) => o.id === colorTheme.value)?.label;\n  return (\n    <>\n      <DropdownMenuSeparator />\n      {language && (\n        <DropdownMenuItem onClick={() => language.onSelect?.()}>\n          {icons?.language}\n          <span className=\"flex-1\">{language.label}</span>\n          <Badge>{language.value}</Badge>\n        </DropdownMenuItem>\n      )}\n      {darkTheme && (\n        <DropdownMenuItem\n          role=\"menuitemcheckbox\"\n          aria-checked={darkTheme.checked}\n          onClick={() => darkTheme.onCheckedChange(!darkTheme.checked)}\n        >\n          {icons?.darkTheme}\n          <span className=\"flex-1\">{darkTheme.label}</span>\n          {/* Presentational: the row is the control, so the switch stays out of the tab order. */}\n          <Switch checked={darkTheme.checked} tabIndex={-1} aria-hidden className=\"pointer-events-none\" />\n        </DropdownMenuItem>\n      )}\n      {colorTheme && (\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            {icons?.colorTheme}\n            <span className=\"flex-1\">{colorTheme.label}</span>\n            {currentColor && <span className=\"text-body-s text-ink-soft\">{currentColor}</span>}\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuRadioGroup value={colorTheme.value} onValueChange={colorTheme.onValueChange}>\n              {colorTheme.options.map((o) => (\n                <DropdownMenuRadioItem key={o.id} value={o.id}>\n                  {o.label}\n                </DropdownMenuRadioItem>\n              ))}\n            </DropdownMenuRadioGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/shell/account-settings-dialog.js

@@ -12,7 +12,8 @@ import {
   ACCOUNT_SETTINGS_DIALOG_PANEL,
   ACCOUNT_SETTINGS_DIALOG_SIDEBAR,
   ACCOUNT_SETTINGS_DIALOG_TABS,
-  ACCOUNT_SETTINGS_DIALOG_TITLE
+  ACCOUNT_SETTINGS_DIALOG_TITLE,
+  ACCOUNT_SETTINGS_DIALOG_LABELS
 } from "../../generated/account-settings-dialog.js";
 import { cn } from "../../lib/cn.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "../atomic/dialog.js";
@@ -71,7 +72,7 @@ function AccountSettingsDialog({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? "Close", className: ACCOUNT_SETTINGS_DIALOG_CLOSE, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) }) })
+            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? ACCOUNT_SETTINGS_DIALOG_LABELS.close, className: ACCOUNT_SETTINGS_DIALOG_CLOSE, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) }) })
           ]
         }
       )

package/dist/components/shell/account-settings-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/account-settings-dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ACCOUNT_SETTINGS_DIALOG_CLOSE,\n  ACCOUNT_SETTINGS_DIALOG_CONTENT,\n  ACCOUNT_SETTINGS_DIALOG_DESCRIPTION,\n  ACCOUNT_SETTINGS_DIALOG_ENTRY,\n  ACCOUNT_SETTINGS_DIALOG_FOOTER,\n  ACCOUNT_SETTINGS_DIALOG_HEADING,\n  ACCOUNT_SETTINGS_DIALOG_LIST,\n  ACCOUNT_SETTINGS_DIALOG_PANE,\n  ACCOUNT_SETTINGS_DIALOG_PANEL,\n  ACCOUNT_SETTINGS_DIALOG_SIDEBAR,\n  ACCOUNT_SETTINGS_DIALOG_TABS,\n  ACCOUNT_SETTINGS_DIALOG_TITLE,\n} from \"../../generated/account-settings-dialog\";\nimport { cn } from \"../../lib/cn\";\nimport { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from \"../atomic/dialog\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../atomic/tabs\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface AccountSettingsSection {\n  id: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface AccountSettingsDialogLabels {\n  /** The close button. Default `\"Close\"`. */\n  close?: string;\n}\n\nexport interface AccountSettingsDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The heading of the content pane. */\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** One sidebar entry each; the active one's `content` fills the pane. */\n  sections: readonly AccountSettingsSection[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** Pinned under the sidebar entries: sign out, language. */\n  sidebarFooter?: React.ReactNode;\n  labels?: AccountSettingsDialogLabels;\n  className?: string;\n}\n\n/**\n * The account modal: a vertical tab rail on the left, the active section on\n * the right. Sections are the caller's, so Profile and Security (or any other)\n * are built from `SettingsSection` and `SettingsRow` inside `content`.\n */\nexport function AccountSettingsDialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  description,\n  sections,\n  value,\n  defaultValue,\n  onValueChange,\n  sidebarFooter,\n  labels = {},\n  className,\n}: AccountSettingsDialogProps) {\n  const first = sections[0]?.id ?? \"\";\n  return (\n    <Dialog\n      {...(open !== undefined ? { open } : {})}\n      {...(defaultOpen !== undefined ? { defaultOpen } : {})}\n      {...(onOpenChange ? { onOpenChange } : {})}\n    >\n      <DialogContent\n        showCloseButton={false}\n        className={cn(ACCOUNT_SETTINGS_DIALOG_CONTENT, className)}\n      >\n        <Tabs\n          orientation=\"vertical\"\n          {...(value !== undefined ? { value } : { defaultValue: defaultValue ?? first })}\n          {...(onValueChange ? { onValueChange } : {})}\n          className={ACCOUNT_SETTINGS_DIALOG_TABS}\n        >\n          <div className={ACCOUNT_SETTINGS_DIALOG_SIDEBAR}>\n            <TabsList className={ACCOUNT_SETTINGS_DIALOG_LIST}>\n              {sections.map((s) => (\n                <TabsTrigger key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_ENTRY}>\n                  {s.icon}\n                  {s.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            {sidebarFooter != null && (\n              <div className={ACCOUNT_SETTINGS_DIALOG_FOOTER}>{sidebarFooter}</div>\n            )}\n          </div>\n          <div className={ACCOUNT_SETTINGS_DIALOG_PANE}>\n            <div className={ACCOUNT_SETTINGS_DIALOG_HEADING}>\n              <DialogTitle className={ACCOUNT_SETTINGS_DIALOG_TITLE}>{title}</DialogTitle>\n              {description != null && (\n                <DialogDescription className={ACCOUNT_SETTINGS_DIALOG_DESCRIPTION}>{description}</DialogDescription>\n              )}\n            </div>\n            {sections.map((s) => (\n              <TabsContent key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_PANEL}>\n                {s.content}\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n        <DialogClose asChild>\n          <IconButton aria-label={labels.close ?? \"Close\"} className={ACCOUNT_SETTINGS_DIALOG_CLOSE}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        </DialogClose>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"AAwFY,cAEI,YAFJ;AAxFZ,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,QAAQ,aAAa,eAAe,mBAAmB,mBAAmB;AACnF,SAAS,MAAM,aAAa,UAAU,mBAAmB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAqChB,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAA+B;AAC7B,QAAM,QAAQ,SAAS,CAAC,GAAG,MAAM;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,SAAS,SAAY,EAAE,KAAK,IAAI,CAAC;AAAA,MACrC,GAAI,gBAAgB,SAAY,EAAE,YAAY,IAAI,CAAC;AAAA,MACnD,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA,MAExC;AAAA,QAAC;AAAA;AAAA,UACC,iBAAiB;AAAA,UACjB,WAAW,GAAG,iCAAiC,SAAS;AAAA,UAExD;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACX,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,MAAM;AAAA,gBAC5E,GAAI,gBAAgB,EAAE,cAAc,IAAI,CAAC;AAAA,gBAC1C,WAAW;AAAA,gBAEX;AAAA,uCAAC,SAAI,WAAW,iCACd;AAAA,wCAAC,YAAS,WAAW,8BAClB,mBAAS,IAAI,CAAC,MACb,qBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C;AAAA,wBAAE;AAAA,sBACF,EAAE;AAAA,yBAFa,EAAE,EAGpB,CACD,GACH;AAAA,oBACC,iBAAiB,QAChB,oBAAC,SAAI,WAAW,gCAAiC,yBAAc;AAAA,qBAEnE;AAAA,kBACA,qBAAC,SAAI,WAAW,8BACd;AAAA,yCAAC,SAAI,WAAW,iCACd;AAAA,0CAAC,eAAY,WAAW,+BAAgC,iBAAM;AAAA,sBAC7D,eAAe,QACd,oBAAC,qBAAkB,WAAW,qCAAsC,uBAAY;AAAA,uBAEpF;AAAA,oBACC,SAAS,IAAI,CAAC,MACb,oBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C,YAAE,WADa,EAAE,EAEpB,CACD;AAAA,qBACH;AAAA;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,eAAY,SAAO,MAClB,8BAAC,cAAW,cAAY,OAAO,SAAS,SAAS,WAAW,+BAC1D,8BAAC,UAAO,MAAK,KAAI,GACnB,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/shell/account-settings-dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ACCOUNT_SETTINGS_DIALOG_CLOSE,\n  ACCOUNT_SETTINGS_DIALOG_CONTENT,\n  ACCOUNT_SETTINGS_DIALOG_DESCRIPTION,\n  ACCOUNT_SETTINGS_DIALOG_ENTRY,\n  ACCOUNT_SETTINGS_DIALOG_FOOTER,\n  ACCOUNT_SETTINGS_DIALOG_HEADING,\n  ACCOUNT_SETTINGS_DIALOG_LIST,\n  ACCOUNT_SETTINGS_DIALOG_PANE,\n  ACCOUNT_SETTINGS_DIALOG_PANEL,\n  ACCOUNT_SETTINGS_DIALOG_SIDEBAR,\n  ACCOUNT_SETTINGS_DIALOG_TABS,\n  ACCOUNT_SETTINGS_DIALOG_TITLE,\n  ACCOUNT_SETTINGS_DIALOG_LABELS,\n} from \"../../generated/account-settings-dialog\";\nimport { cn } from \"../../lib/cn\";\nimport { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from \"../atomic/dialog\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../atomic/tabs\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface AccountSettingsSection {\n  id: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface AccountSettingsDialogLabels {\n  /** The close button. Default `\"Close\"`. */\n  close?: string;\n}\n\nexport interface AccountSettingsDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The heading of the content pane. */\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** One sidebar entry each; the active one's `content` fills the pane. */\n  sections: readonly AccountSettingsSection[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** Pinned under the sidebar entries: sign out, language. */\n  sidebarFooter?: React.ReactNode;\n  labels?: AccountSettingsDialogLabels;\n  className?: string;\n}\n\n/**\n * The account modal: a vertical tab rail on the left, the active section on\n * the right. Sections are the caller's, so Profile and Security (or any other)\n * are built from `SettingsSection` and `SettingsRow` inside `content`.\n */\nexport function AccountSettingsDialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  description,\n  sections,\n  value,\n  defaultValue,\n  onValueChange,\n  sidebarFooter,\n  labels = {},\n  className,\n}: AccountSettingsDialogProps) {\n  const first = sections[0]?.id ?? \"\";\n  return (\n    <Dialog\n      {...(open !== undefined ? { open } : {})}\n      {...(defaultOpen !== undefined ? { defaultOpen } : {})}\n      {...(onOpenChange ? { onOpenChange } : {})}\n    >\n      <DialogContent\n        showCloseButton={false}\n        className={cn(ACCOUNT_SETTINGS_DIALOG_CONTENT, className)}\n      >\n        <Tabs\n          orientation=\"vertical\"\n          {...(value !== undefined ? { value } : { defaultValue: defaultValue ?? first })}\n          {...(onValueChange ? { onValueChange } : {})}\n          className={ACCOUNT_SETTINGS_DIALOG_TABS}\n        >\n          <div className={ACCOUNT_SETTINGS_DIALOG_SIDEBAR}>\n            <TabsList className={ACCOUNT_SETTINGS_DIALOG_LIST}>\n              {sections.map((s) => (\n                <TabsTrigger key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_ENTRY}>\n                  {s.icon}\n                  {s.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            {sidebarFooter != null && (\n              <div className={ACCOUNT_SETTINGS_DIALOG_FOOTER}>{sidebarFooter}</div>\n            )}\n          </div>\n          <div className={ACCOUNT_SETTINGS_DIALOG_PANE}>\n            <div className={ACCOUNT_SETTINGS_DIALOG_HEADING}>\n              <DialogTitle className={ACCOUNT_SETTINGS_DIALOG_TITLE}>{title}</DialogTitle>\n              {description != null && (\n                <DialogDescription className={ACCOUNT_SETTINGS_DIALOG_DESCRIPTION}>{description}</DialogDescription>\n              )}\n            </div>\n            {sections.map((s) => (\n              <TabsContent key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_PANEL}>\n                {s.content}\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n        <DialogClose asChild>\n          <IconButton aria-label={labels.close ?? ACCOUNT_SETTINGS_DIALOG_LABELS.close} className={ACCOUNT_SETTINGS_DIALOG_CLOSE}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        </DialogClose>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"AAyFY,cAEI,YAFJ;AAzFZ,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,QAAQ,aAAa,eAAe,mBAAmB,mBAAmB;AACnF,SAAS,MAAM,aAAa,UAAU,mBAAmB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAqChB,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAA+B;AAC7B,QAAM,QAAQ,SAAS,CAAC,GAAG,MAAM;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,SAAS,SAAY,EAAE,KAAK,IAAI,CAAC;AAAA,MACrC,GAAI,gBAAgB,SAAY,EAAE,YAAY,IAAI,CAAC;AAAA,MACnD,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA,MAExC;AAAA,QAAC;AAAA;AAAA,UACC,iBAAiB;AAAA,UACjB,WAAW,GAAG,iCAAiC,SAAS;AAAA,UAExD;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACX,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,MAAM;AAAA,gBAC5E,GAAI,gBAAgB,EAAE,cAAc,IAAI,CAAC;AAAA,gBAC1C,WAAW;AAAA,gBAEX;AAAA,uCAAC,SAAI,WAAW,iCACd;AAAA,wCAAC,YAAS,WAAW,8BAClB,mBAAS,IAAI,CAAC,MACb,qBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C;AAAA,wBAAE;AAAA,sBACF,EAAE;AAAA,yBAFa,EAAE,EAGpB,CACD,GACH;AAAA,oBACC,iBAAiB,QAChB,oBAAC,SAAI,WAAW,gCAAiC,yBAAc;AAAA,qBAEnE;AAAA,kBACA,qBAAC,SAAI,WAAW,8BACd;AAAA,yCAAC,SAAI,WAAW,iCACd;AAAA,0CAAC,eAAY,WAAW,+BAAgC,iBAAM;AAAA,sBAC7D,eAAe,QACd,oBAAC,qBAAkB,WAAW,qCAAsC,uBAAY;AAAA,uBAEpF;AAAA,oBACC,SAAS,IAAI,CAAC,MACb,oBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C,YAAE,WADa,EAAE,EAEpB,CACD;AAAA,qBACH;AAAA;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,eAAY,SAAO,MAClB,8BAAC,cAAW,cAAY,OAAO,SAAS,+BAA+B,OAAO,WAAW,+BACvF,8BAAC,UAAO,MAAK,KAAI,GACnB,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/shell/aside.js

@@ -13,12 +13,14 @@ import {
   ASIDE_PANEL_SHEET,
   ASIDE_RAIL_BASE,
   ASIDE_RAIL_SPACER,
-  asidePanelSideClasses
+  asidePanelSideClasses,
+  ASIDE_HEADER_LABELS
 } from "../../generated/aside.js";
 import { Drawer, DrawerContent } from "../atomic/drawer.js";
 import { IconButton } from "../derived/icon-button.js";
 import { Sheet, SheetContent } from "../atomic/sheet.js";
 import { UiIcon } from "../../icons/ui-icons.js";
+import * as copy from "../../generated/copy.js";
 function AsideHeader({ title, onBack, onClose, actions, labels = {}, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -27,10 +29,10 @@ function AsideHeader({ title, onBack, onClose, actions, labels = {}, className,
       className: cn(ASIDE_HEADER_BASE, className),
       ...props,
       children: [
-        onBack && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.back ?? "Back", size: "sm", onClick: onBack, children: /* @__PURE__ */ jsx(UiIcon, { name: "chevron-right", className: ASIDE_HEADER_BACK_ICON }) }),
+        onBack && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.back ?? ASIDE_HEADER_LABELS.back, size: "sm", onClick: onBack, children: /* @__PURE__ */ jsx(UiIcon, { name: "chevron-right", className: ASIDE_HEADER_BACK_ICON }) }),
         /* @__PURE__ */ jsx("h2", { className: ASIDE_HEADER_TITLE, children: title }),
         actions,
-        onClose && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? "Close", size: "sm", onClick: onClose, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) })
+        onClose && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? ASIDE_HEADER_LABELS.close, size: "sm", onClick: onClose, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) })
       ]
     }
   );
@@ -41,7 +43,7 @@ function AsideRail({
   value,
   onValueChange,
   className,
-  "aria-label": ariaLabel = "Panels",
+  "aria-label": ariaLabel = copy.ASIDE_RAIL,
   ...props
 }) {
   const button = (item) => /* @__PURE__ */ jsx(

package/dist/components/shell/aside.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/aside.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  ASIDE_BODY,\n  ASIDE_FOOTER,\n  ASIDE_HEADER_BACK_ICON,\n  ASIDE_HEADER_BASE,\n  ASIDE_HEADER_TITLE,\n  ASIDE_PANEL_DOCKED,\n  ASIDE_PANEL_DRAWER,\n  ASIDE_PANEL_SHEET,\n  ASIDE_RAIL_BASE,\n  ASIDE_RAIL_SPACER,\n  asidePanelSideClasses,\n  type AsidePanelSide,\n} from \"../../generated/aside\";\nimport { Drawer, DrawerContent } from \"../atomic/drawer\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Sheet, SheetContent } from \"../atomic/sheet\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface AsideHeaderLabels {\n  back?: string;\n  close?: string;\n}\n\nexport interface AsideHeaderProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  title: React.ReactNode;\n  /** Shows the back button first. */\n  onBack?: () => void;\n  /** Shows the close button last. */\n  onClose?: () => void;\n  /** `IconButton`s between the title and the close button: pin, more. */\n  actions?: React.ReactNode;\n  labels?: AsideHeaderLabels;\n}\n\n/** The 44 px title row of an aside. */\nexport function AsideHeader({ title, onBack, onClose, actions, labels = {}, className, ...props }: AsideHeaderProps) {\n  return (\n    <div\n      data-slot=\"aside-header\"\n      className={cn(ASIDE_HEADER_BASE, className)}\n      {...props}\n    >\n      {onBack && (\n        <IconButton aria-label={labels.back ?? \"Back\"} size=\"sm\" onClick={onBack}>\n          <UiIcon name=\"chevron-right\" className={ASIDE_HEADER_BACK_ICON} />\n        </IconButton>\n      )}\n      <h2 className={ASIDE_HEADER_TITLE}>{title}</h2>\n      {actions}\n      {onClose && (\n        <IconButton aria-label={labels.close ?? \"Close\"} size=\"sm\" onClick={onClose}>\n          <UiIcon name=\"x\" />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n\nexport interface AsideRailItem {\n  id: string;\n  /** Names the button and fills its tooltip. */\n  label: string;\n  icon: React.ReactNode;\n}\n\nexport interface AsideRailProps extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  items: readonly AsideRailItem[];\n  /** Pinned to the bottom, e.g. settings. */\n  endItems?: readonly AsideRailItem[];\n  /** The open aside's id; `null` when all are closed. */\n  value: string | null;\n  /** Pressing the open item's button asks for `null`. */\n  onValueChange: (id: string | null) => void;\n  /** Accessible name of the rail. Default `\"Panels\"`. */\n  \"aria-label\"?: string;\n}\n\n/** The 44 px strip of icon buttons that opens and closes the asides. */\nexport function AsideRail({\n  items,\n  endItems = [],\n  value,\n  onValueChange,\n  className,\n  \"aria-label\": ariaLabel = \"Panels\",\n  ...props\n}: AsideRailProps) {\n  const button = (item: AsideRailItem) => (\n    <IconButton\n      key={item.id}\n      aria-label={item.label}\n      tooltip={item.label}\n      pressed={value === item.id}\n      onClick={() => onValueChange(value === item.id ? null : item.id)}\n    >\n      {item.icon}\n    </IconButton>\n  );\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      data-slot=\"aside-rail\"\n      className={cn(ASIDE_RAIL_BASE, className)}\n      {...props}\n    >\n      {items.map(button)}\n      <span className={ASIDE_RAIL_SPACER} />\n      {endItems.map(button)}\n    </div>\n  );\n}\n\nfunction useAtLeast(query: string): boolean {\n  return React.useSyncExternalStore(\n    (notify) => {\n      if (typeof window.matchMedia !== \"function\") return () => {};\n      const mq = window.matchMedia(query);\n      mq.addEventListener(\"change\", notify);\n      return () => mq.removeEventListener(\"change\", notify);\n    },\n    () => typeof window.matchMedia !== \"function\" || window.matchMedia(query).matches,\n    // Server and first paint assume a wide screen; a phone swaps to the drawer on hydrate.\n    () => true,\n  );\n}\n\nexport type AsidePanelMode = \"docked\" | \"overlay\";\n\nexport interface AsidePanelProps extends Omit<React.ComponentProps<\"aside\">, \"title\"> {\n  /** Names the panel. */\n  \"aria-label\": string;\n  mode?: AsidePanelMode;\n  /** Which edge of the screen it hugs. Default `right`. */\n  side?: AsidePanelSide;\n  open?: boolean;\n  /**\n   * Escape, the scrim and the drawer drag call it with `false`. A docked panel\n   * is only dismissable this way where it falls back to the drawer (below `md`).\n   */\n  onOpenChange?: (open: boolean) => void;\n  /** An `AsideHeader`. */\n  header?: React.ReactNode;\n  /** Sticky under the body: actions. */\n  footer?: React.ReactNode;\n  /**\n   * Below this width the panel floats on a drawer so the content keeps its room.\n   * `false` keeps it docked (or on a sheet) at every width, for a framed preview\n   * or an embedded layout where the viewport says nothing about the room.\n   */\n  collapseBelow?: \"md\" | false;\n  /** Docked 380 (260 for a left navigation), overlay 420: a width class overrides it. */\n  className?: string;\n}\n\n/**\n * A side panel. `docked` sits in the layout and takes room from the content;\n * `overlay` floats over a scrim on a Sheet. Below `md` both use a bottom Drawer.\n * The edge facing the content is the only border.\n */\nexport function AsidePanel({\n  mode = \"docked\",\n  side = \"right\",\n  open = true,\n  onOpenChange,\n  header,\n  footer,\n  collapseBelow = \"md\",\n  className,\n  children,\n  ...props\n}: AsidePanelProps) {\n  const viewportWide = useAtLeast(\"(min-width: 768px)\");\n  const wide = collapseBelow === false || viewportWide;\n  const body = (\n    <>\n      {header}\n      <div data-slot=\"aside-body\" className={ASIDE_BODY}>\n        {children}\n      </div>\n      {footer != null && (\n        <div data-slot=\"aside-footer\" className={ASIDE_FOOTER}>\n          {footer}\n        </div>\n      )}\n    </>\n  );\n\n  if (mode === \"docked\" && wide) {\n    if (!open) return null;\n    return (\n      <aside\n        data-slot=\"aside-panel\"\n        data-mode=\"docked\"\n        data-side={side}\n        className={cn(ASIDE_PANEL_DOCKED, asidePanelSideClasses[side], className)}\n        {...props}\n      >\n        {body}\n      </aside>\n    );\n  }\n\n  // Below md there is no room beside the content, so a docked panel floats like an overlay.\n  const label = props[\"aria-label\"];\n  if (!wide) {\n    return (\n      <Drawer open={open} {...(onOpenChange ? { onOpenChange } : {})} direction=\"bottom\">\n        <DrawerContent aria-label={label} className={ASIDE_PANEL_DRAWER}>\n          {body}\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n  return (\n    <Sheet open={open} {...(onOpenChange ? { onOpenChange } : {})}>\n      <SheetContent\n        side={side}\n        aria-label={label}\n        className={cn(ASIDE_PANEL_SHEET, className)}\n      >\n        {body}\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":";AA0CI,SA0IA,UAnIM,KAPN;AAxCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,QAAQ,qBAAqB;AACtC,SAAS,kBAAkB;AAC3B,SAAS,OAAO,oBAAoB;AACpC,SAAS,cAAc;AAmBhB,SAAS,YAAY,EAAE,OAAO,QAAQ,SAAS,SAAS,SAAS,CAAC,GAAG,WAAW,GAAG,MAAM,GAAqB;AACnH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mBAAmB,SAAS;AAAA,MACzC,GAAG;AAAA,MAEH;AAAA,kBACC,oBAAC,cAAW,cAAY,OAAO,QAAQ,QAAQ,MAAK,MAAK,SAAS,QAChE,8BAAC,UAAO,MAAK,iBAAgB,WAAW,wBAAwB,GAClE;AAAA,QAEF,oBAAC,QAAG,WAAW,oBAAqB,iBAAM;AAAA,QACzC;AAAA,QACA,WACC,oBAAC,cAAW,cAAY,OAAO,SAAS,SAAS,MAAK,MAAK,SAAS,SAClE,8BAAC,UAAO,MAAK,KAAI,GACnB;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAsBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,WAAW,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,GAAG;AACL,GAAmB;AACjB,QAAM,SAAS,CAAC,SACd;AAAA,IAAC;AAAA;AAAA,MAEC,cAAY,KAAK;AAAA,MACjB,SAAS,KAAK;AAAA,MACd,SAAS,UAAU,KAAK;AAAA,MACxB,SAAS,MAAM,cAAc,UAAU,KAAK,KAAK,OAAO,KAAK,EAAE;AAAA,MAE9D,eAAK;AAAA;AAAA,IAND,KAAK;AAAA,EAOZ;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,WAAW,GAAG,iBAAiB,SAAS;AAAA,MACvC,GAAG;AAAA,MAEH;AAAA,cAAM,IAAI,MAAM;AAAA,QACjB,oBAAC,UAAK,WAAW,mBAAmB;AAAA,QACnC,SAAS,IAAI,MAAM;AAAA;AAAA;AAAA,EACtB;AAEJ;AAEA,SAAS,WAAW,OAAwB;AAC1C,SAAO,MAAM;AAAA,IACX,CAAC,WAAW;AACV,UAAI,OAAO,OAAO,eAAe,WAAY,QAAO,MAAM;AAAA,MAAC;AAC3D,YAAM,KAAK,OAAO,WAAW,KAAK;AAClC,SAAG,iBAAiB,UAAU,MAAM;AACpC,aAAO,MAAM,GAAG,oBAAoB,UAAU,MAAM;AAAA,IACtD;AAAA,IACA,MAAM,OAAO,OAAO,eAAe,cAAc,OAAO,WAAW,KAAK,EAAE;AAAA;AAAA,IAE1E,MAAM;AAAA,EACR;AACF;AAmCO,SAAS,WAAW;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,eAAe,WAAW,oBAAoB;AACpD,QAAM,OAAO,kBAAkB,SAAS;AACxC,QAAM,OACJ,iCACG;AAAA;AAAA,IACD,oBAAC,SAAI,aAAU,cAAa,WAAW,YACpC,UACH;AAAA,IACC,UAAU,QACT,oBAAC,SAAI,aAAU,gBAAe,WAAW,cACtC,kBACH;AAAA,KAEJ;AAGF,MAAI,SAAS,YAAY,MAAM;AAC7B,QAAI,CAAC,KAAM,QAAO;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,aAAU;AAAA,QACV,aAAW;AAAA,QACX,WAAW,GAAG,oBAAoB,sBAAsB,IAAI,GAAG,SAAS;AAAA,QACvE,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAGA,QAAM,QAAQ,MAAM,YAAY;AAChC,MAAI,CAAC,MAAM;AACT,WACE,oBAAC,UAAO,MAAa,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC,GAAI,WAAU,UACxE,8BAAC,iBAAc,cAAY,OAAO,WAAW,oBAC1C,gBACH,GACF;AAAA,EAEJ;AACA,SACE,oBAAC,SAAM,MAAa,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC,GACzD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAEzC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/shell/aside.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  ASIDE_BODY,\n  ASIDE_FOOTER,\n  ASIDE_HEADER_BACK_ICON,\n  ASIDE_HEADER_BASE,\n  ASIDE_HEADER_TITLE,\n  ASIDE_PANEL_DOCKED,\n  ASIDE_PANEL_DRAWER,\n  ASIDE_PANEL_SHEET,\n  ASIDE_RAIL_BASE,\n  ASIDE_RAIL_SPACER,\n  asidePanelSideClasses,\n  type AsidePanelSide,\n  ASIDE_HEADER_LABELS,\n} from \"../../generated/aside\";\nimport { Drawer, DrawerContent } from \"../atomic/drawer\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Sheet, SheetContent } from \"../atomic/sheet\";\nimport { UiIcon } from \"../../icons/ui-icons\";\nimport type { AsidePanelMode } from \"../../generated/aside\";\nimport * as copy from \"../../generated/copy\";\n\nexport interface AsideHeaderLabels {\n  back?: string;\n  close?: string;\n}\n\nexport interface AsideHeaderProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  title: React.ReactNode;\n  /** Shows the back button first. */\n  onBack?: () => void;\n  /** Shows the close button last. */\n  onClose?: () => void;\n  /** `IconButton`s between the title and the close button: pin, more. */\n  actions?: React.ReactNode;\n  labels?: AsideHeaderLabels;\n}\n\n/** The 44 px title row of an aside. */\nexport function AsideHeader({ title, onBack, onClose, actions, labels = {}, className, ...props }: AsideHeaderProps) {\n  return (\n    <div\n      data-slot=\"aside-header\"\n      className={cn(ASIDE_HEADER_BASE, className)}\n      {...props}\n    >\n      {onBack && (\n        <IconButton aria-label={labels.back ?? ASIDE_HEADER_LABELS.back} size=\"sm\" onClick={onBack}>\n          <UiIcon name=\"chevron-right\" className={ASIDE_HEADER_BACK_ICON} />\n        </IconButton>\n      )}\n      <h2 className={ASIDE_HEADER_TITLE}>{title}</h2>\n      {actions}\n      {onClose && (\n        <IconButton aria-label={labels.close ?? ASIDE_HEADER_LABELS.close} size=\"sm\" onClick={onClose}>\n          <UiIcon name=\"x\" />\n        </IconButton>\n      )}\n    </div>\n  );\n}\n\nexport interface AsideRailItem {\n  id: string;\n  /** Names the button and fills its tooltip. */\n  label: string;\n  icon: React.ReactNode;\n}\n\nexport interface AsideRailProps extends Omit<React.ComponentProps<\"div\">, \"onChange\"> {\n  items: readonly AsideRailItem[];\n  /** Pinned to the bottom, e.g. settings. */\n  endItems?: readonly AsideRailItem[];\n  /** The open aside's id; `null` when all are closed. */\n  value: string | null;\n  /** Pressing the open item's button asks for `null`. */\n  onValueChange: (id: string | null) => void;\n  /** Accessible name of the rail. Default `\"Panels\"`. */\n  \"aria-label\"?: string;\n}\n\n/** The 44 px strip of icon buttons that opens and closes the asides. */\nexport function AsideRail({\n  items,\n  endItems = [],\n  value,\n  onValueChange,\n  className,\n  \"aria-label\": ariaLabel = copy.ASIDE_RAIL,\n  ...props\n}: AsideRailProps) {\n  const button = (item: AsideRailItem) => (\n    <IconButton\n      key={item.id}\n      aria-label={item.label}\n      tooltip={item.label}\n      pressed={value === item.id}\n      onClick={() => onValueChange(value === item.id ? null : item.id)}\n    >\n      {item.icon}\n    </IconButton>\n  );\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      data-slot=\"aside-rail\"\n      className={cn(ASIDE_RAIL_BASE, className)}\n      {...props}\n    >\n      {items.map(button)}\n      <span className={ASIDE_RAIL_SPACER} />\n      {endItems.map(button)}\n    </div>\n  );\n}\n\nfunction useAtLeast(query: string): boolean {\n  return React.useSyncExternalStore(\n    (notify) => {\n      if (typeof window.matchMedia !== \"function\") return () => {};\n      const mq = window.matchMedia(query);\n      mq.addEventListener(\"change\", notify);\n      return () => mq.removeEventListener(\"change\", notify);\n    },\n    () => typeof window.matchMedia !== \"function\" || window.matchMedia(query).matches,\n    // Server and first paint assume a wide screen; a phone swaps to the drawer on hydrate.\n    () => true,\n  );\n}\n\nexport type { AsidePanelMode };\n\nexport interface AsidePanelProps extends Omit<React.ComponentProps<\"aside\">, \"title\"> {\n  /** Names the panel. */\n  \"aria-label\": string;\n  mode?: AsidePanelMode;\n  /** Which edge of the screen it hugs. Default `right`. */\n  side?: AsidePanelSide;\n  open?: boolean;\n  /**\n   * Escape, the scrim and the drawer drag call it with `false`. A docked panel\n   * is only dismissable this way where it falls back to the drawer (below `md`).\n   */\n  onOpenChange?: (open: boolean) => void;\n  /** An `AsideHeader`. */\n  header?: React.ReactNode;\n  /** Sticky under the body: actions. */\n  footer?: React.ReactNode;\n  /**\n   * Below this width the panel floats on a drawer so the content keeps its room.\n   * `false` keeps it docked (or on a sheet) at every width, for a framed preview\n   * or an embedded layout where the viewport says nothing about the room.\n   */\n  collapseBelow?: \"md\" | false;\n  /** Docked 380 (260 for a left navigation), overlay 420: a width class overrides it. */\n  className?: string;\n}\n\n/**\n * A side panel. `docked` sits in the layout and takes room from the content;\n * `overlay` floats over a scrim on a Sheet. Below `md` both use a bottom Drawer.\n * The edge facing the content is the only border.\n */\nexport function AsidePanel({\n  mode = \"docked\",\n  side = \"right\",\n  open = true,\n  onOpenChange,\n  header,\n  footer,\n  collapseBelow = \"md\",\n  className,\n  children,\n  ...props\n}: AsidePanelProps) {\n  const viewportWide = useAtLeast(\"(min-width: 768px)\");\n  const wide = collapseBelow === false || viewportWide;\n  const body = (\n    <>\n      {header}\n      <div data-slot=\"aside-body\" className={ASIDE_BODY}>\n        {children}\n      </div>\n      {footer != null && (\n        <div data-slot=\"aside-footer\" className={ASIDE_FOOTER}>\n          {footer}\n        </div>\n      )}\n    </>\n  );\n\n  if (mode === \"docked\" && wide) {\n    if (!open) return null;\n    return (\n      <aside\n        data-slot=\"aside-panel\"\n        data-mode=\"docked\"\n        data-side={side}\n        className={cn(ASIDE_PANEL_DOCKED, asidePanelSideClasses[side], className)}\n        {...props}\n      >\n        {body}\n      </aside>\n    );\n  }\n\n  // Below md there is no room beside the content, so a docked panel floats like an overlay.\n  const label = props[\"aria-label\"];\n  if (!wide) {\n    return (\n      <Drawer open={open} {...(onOpenChange ? { onOpenChange } : {})} direction=\"bottom\">\n        <DrawerContent aria-label={label} className={ASIDE_PANEL_DRAWER}>\n          {body}\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n  return (\n    <Sheet open={open} {...(onOpenChange ? { onOpenChange } : {})}>\n      <SheetContent\n        side={side}\n        aria-label={label}\n        className={cn(ASIDE_PANEL_SHEET, className)}\n      >\n        {body}\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/shell/auth-wall.js

@@ -8,6 +8,7 @@ import {
   EmptyMedia,
   EmptyTitle
 } from "../atomic/empty.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
 function AuthWall({ title, description, children, ...props }) {
   return /* @__PURE__ */ jsxs(Empty, { ...props, children: [
     /* @__PURE__ */ jsxs(EmptyHeader, { children: [
@@ -19,7 +20,7 @@ function AuthWall({ title, description, children, ...props }) {
   ] });
 }
 function LockIcon() {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -29,10 +30,7 @@ function LockIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
-      ]
+      children: iconShapes("lock")
     }
   );
 }

package/dist/components/shell/auth-wall.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/auth-wall.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"../atomic/empty\";\n\n/**\n * What a section shows a caller it is not for: an `Empty` with a lock, a title, why,\n * and an action slot. A guest gets the sign-in button there; a signed-in caller\n * without the permission gets no action, or the host's own (request access).\n */\nexport interface AuthWallProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  title: React.ReactNode;\n  description: React.ReactNode;\n}\n\nexport function AuthWall({ title, description, children, ...props }: AuthWallProps) {\n  return (\n    <Empty {...props}>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <LockIcon />\n        </EmptyMedia>\n        <EmptyTitle>{title}</EmptyTitle>\n        <EmptyDescription>{description}</EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>{children}</EmptyContent>\n    </Empty>\n  );\n}\n\n// lucide `lock`, inlined so the kit keeps its zero-icon-dep footprint.\nfunction LockIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\" />\n      <path d=\"M7 11V7a5 5 0 0 1 10 0v4\" />\n    </svg>\n  );\n}\n"],"mappings":"AAuBM,SAEI,KAFJ;AAvBN,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAYA,SAAS,SAAS,EAAE,OAAO,aAAa,UAAU,GAAG,MAAM,GAAkB;AAClF,SACE,qBAAC,SAAO,GAAG,OACT;AAAA,yBAAC,eACC;AAAA,0BAAC,cAAW,SAAQ,QAClB,8BAAC,YAAS,GACZ;AAAA,MACA,oBAAC,cAAY,iBAAM;AAAA,MACnB,oBAAC,oBAAkB,uBAAY;AAAA,OACjC;AAAA,IACA,oBAAC,gBAAc,UAAS;AAAA,KAC1B;AAEJ;AAGA,SAAS,WAAW;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MAEX;AAAA,4BAAC,UAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,QACxD,oBAAC,UAAK,GAAE,4BAA2B;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/shell/auth-wall.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"../atomic/empty\";\nimport { iconShapes } from \"../../icons/icon-shapes\";\n\n/**\n * What a section shows a caller it is not for: an `Empty` with a lock, a title, why,\n * and an action slot. A guest gets the sign-in button there; a signed-in caller\n * without the permission gets no action, or the host's own (request access).\n */\nexport interface AuthWallProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  title: React.ReactNode;\n  description: React.ReactNode;\n}\n\nexport function AuthWall({ title, description, children, ...props }: AuthWallProps) {\n  return (\n    <Empty {...props}>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <LockIcon />\n        </EmptyMedia>\n        <EmptyTitle>{title}</EmptyTitle>\n        <EmptyDescription>{description}</EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>{children}</EmptyContent>\n    </Empty>\n  );\n}\n\nfunction LockIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      {iconShapes(\"lock\")}\n    </svg>\n  );\n}\n"],"mappings":"AAwBM,SAEI,KAFJ;AAxBN,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAYpB,SAAS,SAAS,EAAE,OAAO,aAAa,UAAU,GAAG,MAAM,GAAkB;AAClF,SACE,qBAAC,SAAO,GAAG,OACT;AAAA,yBAAC,eACC;AAAA,0BAAC,cAAW,SAAQ,QAClB,8BAAC,YAAS,GACZ;AAAA,MACA,oBAAC,cAAY,iBAAM;AAAA,MACnB,oBAAC,oBAAkB,uBAAY;AAAA,OACjC;AAAA,IACA,oBAAC,gBAAc,UAAS;AAAA,KAC1B;AAEJ;AAEA,SAAS,WAAW;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MAEV,qBAAW,MAAM;AAAA;AAAA,EACpB;AAEJ;","names":[]}

package/dist/components/shell/bottom-tab-bar.js

@@ -25,7 +25,7 @@ function BottomTabBar({
       "data-slot": "tab-bar",
       "aria-label": labels.nav ?? "Main",
       className: cn(
-        "relative box-content flex h-(--shell-tab-bar-h) items-center border-t border-border bg-secondary px-2 pb-[env(safe-area-inset-bottom,0px)]",
+        "relative box-content flex h-(--shell-tab-bar-h) items-center border-t border-border bg-card px-2 pb-[env(safe-area-inset-bottom,0px)]",
         className
       ),
       ...props,
@@ -58,10 +58,10 @@ function BottomTabBar({
               onItemIntent,
               onNavigate,
               className: cn(
-                "flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg py-1 font-medium transition-colors",
+                "flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-row py-1 font-medium transition-colors",
                 "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary",
                 active ? "text-primary-ink" : "text-ink-soft hover:text-ink",
-                item.disabled && "cursor-not-allowed opacity-50"
+                item.disabled && "cursor-not-allowed opacity-(--disabled-opacity)"
               ),
               children: [
                 /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [

package/dist/components/shell/bottom-tab-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/bottom-tab-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { NavBadge } from \"./nav-badge\";\nimport { labelTitle, NavLink, type NavLinkCallbacks } from \"./nav-link\";\nimport { resolveActiveNavItem, type NavItem } from \"./nav-model\";\nimport { usePendingNavigation } from \"./use-shell-nav\";\n\nexport interface BottomTabBarLabels {\n  /** Accessible name of the bar. Default `\"Main\"`. */\n  nav?: string;\n  /** Spoken text of a numeric badge, given the real count. Default `\"{n} new\"`. */\n  badge?: (count: number) => string;\n}\n\nexport interface BottomTabBarProps\n  extends Omit<React.ComponentProps<\"nav\">, \"children\">,\n    NavLinkCallbacks {\n  /**\n   * The tabs, in order. Five is the most a phone holds — every label gets a\n   * fifth of ~390px. A tab standing in for several rail rows lists their paths\n   * in `also`. `trailing` is not drawn here; `badge` sits on the icon's corner.\n   */\n  items: readonly NavItem[];\n  pathname: string;\n  linkComponent?: React.ElementType;\n  labels?: BottomTabBarLabels;\n}\n\n/**\n * The mobile tab bar: equal tabs, one rule that slides between them, and a\n * corner badge. Position-agnostic — `AppShell` pins it to the bottom of the\n * viewport and hides it from its breakpoint up; the bar itself reserves the\n * bottom safe area under its `--shell-tab-bar-h`.\n *\n * The rule is a single node translated by whole tab widths (it is exactly one\n * tab wide, so the two cannot drift); on a route no tab claims it fades out\n * where it stands. That is why each tab is `min-w-0`: a long label must\n * truncate, never widen its tab off the rule's arithmetic.\n */\nexport function BottomTabBar({\n  items,\n  pathname,\n  linkComponent,\n  onItemIntent,\n  onNavigate,\n  labels = {},\n  className,\n  ...props\n}: BottomTabBarProps) {\n  const [pendingId, markPending] = usePendingNavigation(pathname);\n  const currentId =\n    (pendingId !== null && items.some((i) => i.id === pendingId) ? pendingId : undefined) ??\n    resolveActiveNavItem(items, pathname)?.id;\n  const at = items.findIndex((i) => i.id === currentId);\n  return (\n    <nav\n      data-slot=\"tab-bar\"\n      aria-label={labels.nav ?? \"Main\"}\n      className={cn(\n        \"relative box-content flex h-(--shell-tab-bar-h) items-center border-t border-border bg-secondary px-2 pb-[env(safe-area-inset-bottom,0px)]\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"tab-bar-marker\"\n        data-state={at >= 0 ? \"active\" : \"idle\"}\n        aria-hidden\n        className=\"pointer-events-none absolute left-2 top-0 flex justify-center\"\n        // `left-2` + `1rem` restate the bar's `px-2`: the rule is one tab wide.\n        style={{\n          width: `calc((100% - 1rem) / ${Math.max(items.length, 1)})`,\n          translate: `${Math.max(at, 0) * 100}% 0`,\n        }}\n      >\n        <span className=\"h-0.5 w-10 rounded-full bg-primary-ink\" />\n      </span>\n      {items.map((item) => {\n        const Icon = item.icon;\n        const active = item.id === currentId;\n        return (\n          <NavLink\n            key={item.id}\n            item={item}\n            current={active}\n            pending={item.id === pendingId}\n            linkComponent={linkComponent}\n            markPending={markPending}\n            onItemIntent={onItemIntent}\n            onNavigate={onNavigate}\n            className={cn(\n              \"flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg py-1 font-medium transition-colors\",\n              \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary\",\n              active ? \"text-primary-ink\" : \"text-ink-soft hover:text-ink\",\n              item.disabled && \"cursor-not-allowed opacity-50\",\n            )}\n          >\n            <span className=\"relative shrink-0\">\n              {Icon ? <Icon className=\"size-5\" /> : <span className=\"block size-5\" />}\n              {typeof item.badge === \"number\" ? (\n                <NavBadge\n                  count={item.badge}\n                  variant=\"corner\"\n                  {...(labels.badge ? { label: labels.badge } : {})}\n                />\n              ) : (\n                item.badge\n              )}\n            </span>\n            <span className=\"w-full truncate text-center text-xs\" title={labelTitle(item.label)}>\n              {item.label}\n            </span>\n          </NavLink>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";AA6EQ,cAsBI,YAtBJ;AA3ER,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,YAAY,eAAsC;AAC3D,SAAS,4BAA0C;AACnD,SAAS,4BAA4B;AAkC9B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,CAAC,WAAW,WAAW,IAAI,qBAAqB,QAAQ;AAC9D,QAAM,aACH,cAAc,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS,IAAI,YAAY,WAC3E,qBAAqB,OAAO,QAAQ,GAAG;AACzC,QAAM,KAAK,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,SAAS;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,OAAO;AAAA,MAC1B,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,cAAY,MAAM,IAAI,WAAW;AAAA,YACjC,eAAW;AAAA,YACX,WAAU;AAAA,YAEV,OAAO;AAAA,cACL,OAAO,wBAAwB,KAAK,IAAI,MAAM,QAAQ,CAAC,CAAC;AAAA,cACxD,WAAW,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI,GAAG;AAAA,YACrC;AAAA,YAEA,8BAAC,UAAK,WAAU,0CAAyC;AAAA;AAAA,QAC3D;AAAA,QACC,MAAM,IAAI,CAAC,SAAS;AACnB,gBAAM,OAAO,KAAK;AAClB,gBAAM,SAAS,KAAK,OAAO;AAC3B,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,SAAS;AAAA,cACT,SAAS,KAAK,OAAO;AAAA,cACrB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,SAAS,qBAAqB;AAAA,gBAC9B,KAAK,YAAY;AAAA,cACnB;AAAA,cAEA;AAAA,qCAAC,UAAK,WAAU,qBACb;AAAA,yBAAO,oBAAC,QAAK,WAAU,UAAS,IAAK,oBAAC,UAAK,WAAU,gBAAe;AAAA,kBACpE,OAAO,KAAK,UAAU,WACrB;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO,KAAK;AAAA,sBACZ,SAAQ;AAAA,sBACP,GAAI,OAAO,QAAQ,EAAE,OAAO,OAAO,MAAM,IAAI,CAAC;AAAA;AAAA,kBACjD,IAEA,KAAK;AAAA,mBAET;AAAA,gBACA,oBAAC,UAAK,WAAU,uCAAsC,OAAO,WAAW,KAAK,KAAK,GAC/E,eAAK,OACR;AAAA;AAAA;AAAA,YA7BK,KAAK;AAAA,UA8BZ;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/shell/bottom-tab-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { NavBadge } from \"./nav-badge\";\nimport { labelTitle, NavLink, type NavLinkCallbacks } from \"./nav-link\";\nimport { resolveActiveNavItem, type NavItem } from \"./nav-model\";\nimport { usePendingNavigation } from \"./use-shell-nav\";\n\nexport interface BottomTabBarLabels {\n  /** Accessible name of the bar. Default `\"Main\"`. */\n  nav?: string;\n  /** Spoken text of a numeric badge, given the real count. Default `\"{n} new\"`. */\n  badge?: (count: number) => string;\n}\n\nexport interface BottomTabBarProps\n  extends Omit<React.ComponentProps<\"nav\">, \"children\">,\n    NavLinkCallbacks {\n  /**\n   * The tabs, in order. Five is the most a phone holds — every label gets a\n   * fifth of ~390px. A tab standing in for several rail rows lists their paths\n   * in `also`. `trailing` is not drawn here; `badge` sits on the icon's corner.\n   */\n  items: readonly NavItem[];\n  pathname: string;\n  linkComponent?: React.ElementType;\n  labels?: BottomTabBarLabels;\n}\n\n/**\n * The mobile tab bar: equal tabs, one rule that slides between them, and a\n * corner badge. Position-agnostic — `AppShell` pins it to the bottom of the\n * viewport and hides it from its breakpoint up; the bar itself reserves the\n * bottom safe area under its `--shell-tab-bar-h`.\n *\n * The rule is a single node translated by whole tab widths (it is exactly one\n * tab wide, so the two cannot drift); on a route no tab claims it fades out\n * where it stands. That is why each tab is `min-w-0`: a long label must\n * truncate, never widen its tab off the rule's arithmetic.\n */\nexport function BottomTabBar({\n  items,\n  pathname,\n  linkComponent,\n  onItemIntent,\n  onNavigate,\n  labels = {},\n  className,\n  ...props\n}: BottomTabBarProps) {\n  const [pendingId, markPending] = usePendingNavigation(pathname);\n  const currentId =\n    (pendingId !== null && items.some((i) => i.id === pendingId) ? pendingId : undefined) ??\n    resolveActiveNavItem(items, pathname)?.id;\n  const at = items.findIndex((i) => i.id === currentId);\n  return (\n    <nav\n      data-slot=\"tab-bar\"\n      aria-label={labels.nav ?? \"Main\"}\n      className={cn(\n        \"relative box-content flex h-(--shell-tab-bar-h) items-center border-t border-border bg-card px-2 pb-[env(safe-area-inset-bottom,0px)]\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"tab-bar-marker\"\n        data-state={at >= 0 ? \"active\" : \"idle\"}\n        aria-hidden\n        className=\"pointer-events-none absolute left-2 top-0 flex justify-center\"\n        // `left-2` + `1rem` restate the bar's `px-2`: the rule is one tab wide.\n        style={{\n          width: `calc((100% - 1rem) / ${Math.max(items.length, 1)})`,\n          translate: `${Math.max(at, 0) * 100}% 0`,\n        }}\n      >\n        <span className=\"h-0.5 w-10 rounded-full bg-primary-ink\" />\n      </span>\n      {items.map((item) => {\n        const Icon = item.icon;\n        const active = item.id === currentId;\n        return (\n          <NavLink\n            key={item.id}\n            item={item}\n            current={active}\n            pending={item.id === pendingId}\n            linkComponent={linkComponent}\n            markPending={markPending}\n            onItemIntent={onItemIntent}\n            onNavigate={onNavigate}\n            className={cn(\n              \"flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-row py-1 font-medium transition-colors\",\n              \"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-secondary\",\n              active ? \"text-primary-ink\" : \"text-ink-soft hover:text-ink\",\n              item.disabled && \"cursor-not-allowed opacity-(--disabled-opacity)\",\n            )}\n          >\n            <span className=\"relative shrink-0\">\n              {Icon ? <Icon className=\"size-5\" /> : <span className=\"block size-5\" />}\n              {typeof item.badge === \"number\" ? (\n                <NavBadge\n                  count={item.badge}\n                  variant=\"corner\"\n                  {...(labels.badge ? { label: labels.badge } : {})}\n                />\n              ) : (\n                item.badge\n              )}\n            </span>\n            <span className=\"w-full truncate text-center text-xs\" title={labelTitle(item.label)}>\n              {item.label}\n            </span>\n          </NavLink>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";AA6EQ,cAsBI,YAtBJ;AA3ER,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,YAAY,eAAsC;AAC3D,SAAS,4BAA0C;AACnD,SAAS,4BAA4B;AAkC9B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,CAAC,WAAW,WAAW,IAAI,qBAAqB,QAAQ;AAC9D,QAAM,aACH,cAAc,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS,IAAI,YAAY,WAC3E,qBAAqB,OAAO,QAAQ,GAAG;AACzC,QAAM,KAAK,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,SAAS;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,OAAO;AAAA,MAC1B,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,cAAY,MAAM,IAAI,WAAW;AAAA,YACjC,eAAW;AAAA,YACX,WAAU;AAAA,YAEV,OAAO;AAAA,cACL,OAAO,wBAAwB,KAAK,IAAI,MAAM,QAAQ,CAAC,CAAC;AAAA,cACxD,WAAW,GAAG,KAAK,IAAI,IAAI,CAAC,IAAI,GAAG;AAAA,YACrC;AAAA,YAEA,8BAAC,UAAK,WAAU,0CAAyC;AAAA;AAAA,QAC3D;AAAA,QACC,MAAM,IAAI,CAAC,SAAS;AACnB,gBAAM,OAAO,KAAK;AAClB,gBAAM,SAAS,KAAK,OAAO;AAC3B,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,SAAS;AAAA,cACT,SAAS,KAAK,OAAO;AAAA,cACrB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,SAAS,qBAAqB;AAAA,gBAC9B,KAAK,YAAY;AAAA,cACnB;AAAA,cAEA;AAAA,qCAAC,UAAK,WAAU,qBACb;AAAA,yBAAO,oBAAC,QAAK,WAAU,UAAS,IAAK,oBAAC,UAAK,WAAU,gBAAe;AAAA,kBACpE,OAAO,KAAK,UAAU,WACrB;AAAA,oBAAC;AAAA;AAAA,sBACC,OAAO,KAAK;AAAA,sBACZ,SAAQ;AAAA,sBACP,GAAI,OAAO,QAAQ,EAAE,OAAO,OAAO,MAAM,IAAI,CAAC;AAAA;AAAA,kBACjD,IAEA,KAAK;AAAA,mBAET;AAAA,gBACA,oBAAC,UAAK,WAAU,uCAAsC,OAAO,WAAW,KAAK,KAAK,GAC/E,eAAK,OACR;AAAA;AAAA;AAAA,YA7BK,KAAK;AAAA,UA8BZ;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/shell/chat-composer.js

@@ -10,7 +10,8 @@ import {
   CHAT_COMPOSER_SPACER,
   CHAT_COMPOSER_STREAMING,
   CHAT_COMPOSER_TOOLBAR,
-  MODEL_CHIP_BASE
+  MODEL_CHIP_BASE,
+  CHAT_COMPOSER_LABELS
 } from "../../generated/chat-composer.js";
 import { cn } from "../../lib/cn.js";
 import { useControllableState } from "../../primitives/use-controllable-state.js";
@@ -24,7 +25,8 @@ import {
 import { IconButton } from "../derived/icon-button.js";
 import { Textarea } from "../atomic/textarea.js";
 import { UiIcon } from "../../icons/ui-icons.js";
-function ModelChip({ models, value, onValueChange, "aria-label": ariaLabel = "Model", className }) {
+import * as copy from "../../generated/copy.js";
+function ModelChip({ models, value, onValueChange, "aria-label": ariaLabel = copy.MODEL_CHIP, className }) {
   const current = models.find((m) => m.id === value);
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsxs(
@@ -49,7 +51,7 @@ function ChatComposer({
   onSend,
   streaming = false,
   onStop,
-  placeholder = "Ask the assistant\u2026",
+  placeholder = copy.CHAT_COMPOSER_PLACEHOLDER,
   onAttach,
   attachments,
   tools,
@@ -92,7 +94,7 @@ function ChatComposer({
             value: text,
             disabled,
             placeholder,
-            "aria-label": labels.field ?? "Message",
+            "aria-label": labels.field ?? CHAT_COMPOSER_LABELS.field,
             onChange: (e) => setText(e.target.value),
             onKeyDown: (e) => {
               if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.keyCode !== 229) {
@@ -104,7 +106,7 @@ function ChatComposer({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: CHAT_COMPOSER_TOOLBAR, children: [
-          onAttach && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.attach ?? "Attach file", size: "sm", onClick: onAttach, disabled, children: /* @__PURE__ */ jsx(UiIcon, { name: "plus" }) }),
+          onAttach && /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.attach ?? CHAT_COMPOSER_LABELS.attach, size: "sm", onClick: onAttach, disabled, children: /* @__PURE__ */ jsx(UiIcon, { name: "plus" }) }),
           tools,
           /* @__PURE__ */ jsx("span", { className: CHAT_COMPOSER_SPACER }),
           hint != null && /* @__PURE__ */ jsx("span", { className: CHAT_COMPOSER_HINT, children: hint }),
@@ -112,7 +114,7 @@ function ChatComposer({
             IconButton,
             {
               variant: "outline",
-              "aria-label": labels.stop ?? "Stop",
+              "aria-label": labels.stop ?? CHAT_COMPOSER_LABELS.stop,
               onClick: () => {
                 onStop?.();
                 root.current?.querySelector("textarea")?.focus();
@@ -123,7 +125,7 @@ function ChatComposer({
             IconButton,
             {
               variant: "outline",
-              "aria-label": labels.send ?? "Send",
+              "aria-label": labels.send ?? CHAT_COMPOSER_LABELS.send,
               onClick: send,
               disabled: disabled || trimmed === "",
               children: /* @__PURE__ */ jsx(UiIcon, { name: "arrow-up" })

package/dist/components/shell/chat-composer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/chat-composer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CHAT_COMPOSER_ATTACHMENTS,\n  CHAT_COMPOSER_BASE,\n  CHAT_COMPOSER_FIELD,\n  CHAT_COMPOSER_HINT,\n  CHAT_COMPOSER_IDLE,\n  CHAT_COMPOSER_SPACER,\n  CHAT_COMPOSER_STREAMING,\n  CHAT_COMPOSER_TOOLBAR,\n  MODEL_CHIP_BASE,\n} from \"../../generated/chat-composer\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"../atomic/dropdown-menu\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Textarea } from \"../atomic/textarea\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface ModelOption {\n  id: string;\n  label: string;\n}\n\nexport interface ModelChipProps {\n  models: readonly ModelOption[];\n  value: string;\n  onValueChange: (id: string) => void;\n  /** Names the menu. Default `\"Model\"`. */\n  \"aria-label\"?: string;\n  className?: string;\n}\n\n/** The small bordered button naming the model; opens a radio menu of the options. */\nexport function ModelChip({ models, value, onValueChange, \"aria-label\": ariaLabel = \"Model\", className }: ModelChipProps) {\n  const current = models.find((m) => m.id === value);\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        aria-label={`${ariaLabel}: ${current?.label ?? value}`}\n        data-slot=\"model-chip\"\n        className={cn(MODEL_CHIP_BASE, className)}\n      >\n        {current?.label ?? value}\n        <UiIcon name=\"chevron-down\" />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\">\n        <DropdownMenuRadioGroup value={value} onValueChange={onValueChange}>\n          {models.map((m) => (\n            <DropdownMenuRadioItem key={m.id} value={m.id}>\n              {m.label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport interface ChatComposerLabels {\n  /** Names the message field. Default `\"Message\"`. */\n  field?: string;\n  send?: string;\n  stop?: string;\n  attach?: string;\n}\n\nexport interface ChatComposerProps extends Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Enter or the send button, with the trimmed text. The field clears afterwards. */\n  onSend: (text: string) => void;\n  /** The assistant is answering: the button becomes Stop. Enter still queues a follow-up. */\n  streaming?: boolean;\n  onStop?: () => void;\n  placeholder?: string;\n  /** Shows the attach button. */\n  onAttach?: () => void;\n  /** A row of `ChatAttachment`s above the field. */\n  attachments?: React.ReactNode;\n  /** Model chips and other toolbar controls, after the attach button. */\n  tools?: React.ReactNode;\n  /** A caption in the toolbar: \"Enter to send · Shift+Enter for a new line\". */\n  hint?: React.ReactNode;\n  disabled?: boolean;\n  labels?: ChatComposerLabels;\n}\n\nexport function ChatComposer({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  onSend,\n  streaming = false,\n  onStop,\n  placeholder = \"Ask the assistant…\",\n  onAttach,\n  attachments,\n  tools,\n  hint,\n  disabled = false,\n  labels = {},\n  className,\n  ...props\n}: ChatComposerProps) {\n  const [text, setText] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n  const trimmed = text.trim();\n  const root = React.useRef<HTMLDivElement>(null);\n\n  const send = () => {\n    if (trimmed === \"\" || disabled) return;\n    onSend(trimmed);\n    setText(\"\");\n  };\n\n  return (\n    <div\n      ref={root}\n      data-slot=\"chat-composer\"\n      data-state={streaming ? \"streaming\" : \"default\"}\n      className={cn(\n        CHAT_COMPOSER_BASE,\n        streaming ? CHAT_COMPOSER_STREAMING : CHAT_COMPOSER_IDLE,\n        className,\n      )}\n      {...props}\n    >\n      {attachments != null && <div className={CHAT_COMPOSER_ATTACHMENTS}>{attachments}</div>}\n      <Textarea\n        rows={1}\n        value={text}\n        disabled={disabled}\n        placeholder={placeholder}\n        aria-label={labels.field ?? \"Message\"}\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          // Enter during IME composition confirms the candidate; it must not send. Safari reports the\n          // confirming Enter after compositionend, with isComposing already false and keyCode 229.\n          if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing && e.keyCode !== 229) {\n            e.preventDefault();\n            send();\n          }\n        }}\n        className={CHAT_COMPOSER_FIELD}\n      />\n      <div className={CHAT_COMPOSER_TOOLBAR}>\n        {onAttach && (\n          <IconButton aria-label={labels.attach ?? \"Attach file\"} size=\"sm\" onClick={onAttach} disabled={disabled}>\n            <UiIcon name=\"plus\" />\n          </IconButton>\n        )}\n        {tools}\n        <span className={CHAT_COMPOSER_SPACER} />\n        {hint != null && <span className={CHAT_COMPOSER_HINT}>{hint}</span>}\n        {streaming ? (\n          <IconButton\n            variant=\"outline\"\n            aria-label={labels.stop ?? \"Stop\"}\n            onClick={() => {\n              onStop?.();\n              // The Stop button turns into Send, so focus would otherwise stay on a swapped-out element.\n              root.current?.querySelector(\"textarea\")?.focus();\n            }}\n          >\n            <UiIcon name=\"stop\" />\n          </IconButton>\n        ) : (\n          <IconButton\n            variant=\"outline\"\n            aria-label={labels.send ?? \"Send\"}\n            onClick={send}\n            disabled={disabled || trimmed === \"\"}\n          >\n            <UiIcon name=\"arrow-up\" />\n          </IconButton>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/shell/chat-composer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  CHAT_COMPOSER_ATTACHMENTS,\n  CHAT_COMPOSER_BASE,\n  CHAT_COMPOSER_FIELD,\n  CHAT_COMPOSER_HINT,\n  CHAT_COMPOSER_IDLE,\n  CHAT_COMPOSER_SPACER,\n  CHAT_COMPOSER_STREAMING,\n  CHAT_COMPOSER_TOOLBAR,\n  MODEL_CHIP_BASE,\n  CHAT_COMPOSER_LABELS,\n} from \"../../generated/chat-composer\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"../atomic/dropdown-menu\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Textarea } from \"../atomic/textarea\";\nimport { UiIcon } from \"../../icons/ui-icons\";\nimport * as copy from \"../../generated/copy\";\n\nexport interface ModelOption {\n  id: string;\n  label: string;\n}\n\nexport interface ModelChipProps {\n  models: readonly ModelOption[];\n  value: string;\n  onValueChange: (id: string) => void;\n  /** Names the menu. Default `\"Model\"`. */\n  \"aria-label\"?: string;\n  className?: string;\n}\n\n/** The small bordered button naming the model; opens a radio menu of the options. */\nexport function ModelChip({ models, value, onValueChange, \"aria-label\": ariaLabel = copy.MODEL_CHIP, className }: ModelChipProps) {\n  const current = models.find((m) => m.id === value);\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        aria-label={`${ariaLabel}: ${current?.label ?? value}`}\n        data-slot=\"model-chip\"\n        className={cn(MODEL_CHIP_BASE, className)}\n      >\n        {current?.label ?? value}\n        <UiIcon name=\"chevron-down\" />\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\">\n        <DropdownMenuRadioGroup value={value} onValueChange={onValueChange}>\n          {models.map((m) => (\n            <DropdownMenuRadioItem key={m.id} value={m.id}>\n              {m.label}\n            </DropdownMenuRadioItem>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport interface ChatComposerLabels {\n  /** Names the message field. Default `\"Message\"`. */\n  field?: string;\n  send?: string;\n  stop?: string;\n  attach?: string;\n}\n\nexport interface ChatComposerProps extends Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Enter or the send button, with the trimmed text. The field clears afterwards. */\n  onSend: (text: string) => void;\n  /** The assistant is answering: the button becomes Stop. Enter still queues a follow-up. */\n  streaming?: boolean;\n  onStop?: () => void;\n  placeholder?: string;\n  /** Shows the attach button. */\n  onAttach?: () => void;\n  /** A row of `ChatAttachment`s above the field. */\n  attachments?: React.ReactNode;\n  /** Model chips and other toolbar controls, after the attach button. */\n  tools?: React.ReactNode;\n  /** A caption in the toolbar: \"Enter to send · Shift+Enter for a new line\". */\n  hint?: React.ReactNode;\n  disabled?: boolean;\n  labels?: ChatComposerLabels;\n}\n\nexport function ChatComposer({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  onSend,\n  streaming = false,\n  onStop,\n  placeholder = copy.CHAT_COMPOSER_PLACEHOLDER,\n  onAttach,\n  attachments,\n  tools,\n  hint,\n  disabled = false,\n  labels = {},\n  className,\n  ...props\n}: ChatComposerProps) {\n  const [text, setText] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n  const trimmed = text.trim();\n  const root = React.useRef<HTMLDivElement>(null);\n\n  const send = () => {\n    if (trimmed === \"\" || disabled) return;\n    onSend(trimmed);\n    setText(\"\");\n  };\n\n  return (\n    <div\n      ref={root}\n      data-slot=\"chat-composer\"\n      data-state={streaming ? \"streaming\" : \"default\"}\n      className={cn(\n        CHAT_COMPOSER_BASE,\n        streaming ? CHAT_COMPOSER_STREAMING : CHAT_COMPOSER_IDLE,\n        className,\n      )}\n      {...props}\n    >\n      {attachments != null && <div className={CHAT_COMPOSER_ATTACHMENTS}>{attachments}</div>}\n      <Textarea\n        rows={1}\n        value={text}\n        disabled={disabled}\n        placeholder={placeholder}\n        aria-label={labels.field ?? CHAT_COMPOSER_LABELS.field}\n        onChange={(e) => setText(e.target.value)}\n        onKeyDown={(e) => {\n          // Enter during IME composition confirms the candidate; it must not send. Safari reports the\n          // confirming Enter after compositionend, with isComposing already false and keyCode 229.\n          if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing && e.keyCode !== 229) {\n            e.preventDefault();\n            send();\n          }\n        }}\n        className={CHAT_COMPOSER_FIELD}\n      />\n      <div className={CHAT_COMPOSER_TOOLBAR}>\n        {onAttach && (\n          <IconButton aria-label={labels.attach ?? CHAT_COMPOSER_LABELS.attach} size=\"sm\" onClick={onAttach} disabled={disabled}>\n            <UiIcon name=\"plus\" />\n          </IconButton>\n        )}\n        {tools}\n        <span className={CHAT_COMPOSER_SPACER} />\n        {hint != null && <span className={CHAT_COMPOSER_HINT}>{hint}</span>}\n        {streaming ? (\n          <IconButton\n            variant=\"outline\"\n            aria-label={labels.stop ?? CHAT_COMPOSER_LABELS.stop}\n            onClick={() => {\n              onStop?.();\n              // The Stop button turns into Send, so focus would otherwise stay on a swapped-out element.\n              root.current?.querySelector(\"textarea\")?.focus();\n            }}\n          >\n            <UiIcon name=\"stop\" />\n          </IconButton>\n        ) : (\n          <IconButton\n            variant=\"outline\"\n            aria-label={labels.send ?? CHAT_COMPOSER_LABELS.send}\n            onClick={send}\n            disabled={disabled || trimmed === \"\"}\n          >\n            <UiIcon name=\"arrow-up\" />\n          </IconButton>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}