@evinvest/uikit 0.32.0 → 0.33.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/chat-message.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  CHAT_ATTACHMENT_BASE,\n  CHAT_ATTACHMENT_BODY,\n  CHAT_ATTACHMENT_ICON,\n  CHAT_ATTACHMENT_META,\n  CHAT_ATTACHMENT_NAME,\n  CHAT_ATTACHMENT_PROGRESS,\n  CHAT_ATTACHMENT_PROGRESS_FILL,\n  CHAT_ATTACHMENT_ROW,\n  CHAT_BUBBLE_BASE,\n  CHAT_MARKER_DOT,\n  CHAT_MARKER_RULE,\n  CHAT_MARKER_SEPARATOR,\n  CHAT_MARKER_SEPARATOR_LABEL,\n  CHAT_MARKER_STATUS,\n  CHAT_MARKER_TOOL,\n  CHAT_MARKER_TOOL_BODY,\n  CHAT_MARKER_TOOL_BORDER,\n  CHAT_MARKER_TOOL_CHECK,\n  CHAT_MARKER_TOOL_DETAIL,\n  CHAT_MARKER_TOOL_ERROR_BORDER,\n  CHAT_MARKER_TOOL_ICON,\n  CHAT_MARKER_TOOL_META,\n  CHAT_MARKER_TOOL_TITLE,\n  CHAT_MESSAGE_AVATAR,\n  CHAT_MESSAGE_AVATAR_TILE,\n  CHAT_MESSAGE_BASE,\n  CHAT_MESSAGE_BODY,\n  CHAT_MESSAGE_BODY_ASSISTANT,\n  CHAT_MESSAGE_BODY_USER,\n  CHAT_MESSAGE_HEADER,\n  CHAT_MESSAGE_NAME,\n  CHAT_MESSAGE_TIME,\n  CHAT_MESSAGE_USER,\n  chatBubbleVariantClasses,\n  chatStatusDotClasses,\n  chatToolMetaClasses,\n} from \"../../generated/chat-message\";\nimport type { ChatBubbleVariant, ChatStatusState, ChatToolState } from \"../../generated/chat-message\";\nimport { ChatStreamText } from \"./chat-stream-text\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport type { ChatBubbleVariant };\n\nexport interface ChatBubbleProps extends React.ComponentProps<\"div\"> {\n  variant?: ChatBubbleVariant;\n  /**\n   * Still receiving text: a soft caret pulses after it, and string children\n   * fade in word by word (`ChatStreamText`). Stays set until the text is complete.\n   */\n  streaming?: boolean;\n}\n\n/** One block of message text; `assistant` has no box so long answers read as a page. */\nexport function ChatBubble({ variant = \"assistant\", streaming = false, className, children, ...props }: ChatBubbleProps) {\n  // Once a bubble has streamed it keeps its word wrappers and its caret slot, so\n  // the last words finish landing and the caret fades out instead of vanishing.\n  const [live, setLive] = React.useState(streaming);\n  if (streaming && !live) setLive(true);\n  return (\n    <div\n      data-slot=\"chat-bubble\"\n      data-variant={variant}\n      data-streaming={streaming ? \"\" : undefined}\n      data-caret={live ? \"\" : undefined}\n      className={cn(CHAT_BUBBLE_BASE, chatBubbleVariantClasses[variant], className)}\n      {...props}\n    >\n      {live && typeof children === \"string\" ? <ChatStreamText text={children} streaming={streaming} /> : children}\n    </div>\n  );\n}\n\nexport interface ChatMessageProps extends Omit<React.ComponentProps<\"div\">, \"role\"> {\n  role: \"assistant\" | \"user\";\n  /** \"Assistant\", \"You\". */\n  name?: React.ReactNode;\n  /** Already formatted: \"13:04\". */\n  time?: React.ReactNode;\n  /** The assistant's tile; a default sparkle tile when omitted. */\n  avatar?: React.ReactNode;\n  /** Drops the name row and the avatar, for a narrow dock. */\n  compact?: boolean;\n}\n\n/** A turn: who spoke, when, then the bubbles and markers. Fades in and rises once when it mounts. */\nexport function ChatMessage({ role, name, time, avatar, compact = false, className, children, ...props }: ChatMessageProps) {\n  const user = role === \"user\";\n  return (\n    <div\n      data-slot=\"chat-message\"\n      data-role={role}\n      data-enter=\"rise\"\n      className={cn(CHAT_MESSAGE_BASE, user && CHAT_MESSAGE_USER, className)}\n      {...props}\n    >\n      {!user && !compact && (\n        <div className={CHAT_MESSAGE_AVATAR}>\n          {avatar ?? (\n            <span className={CHAT_MESSAGE_AVATAR_TILE}>\n              <UiIcon name=\"sparkles\" />\n            </span>\n          )}\n        </div>\n      )}\n      <div className={cn(CHAT_MESSAGE_BODY, user ? CHAT_MESSAGE_BODY_USER : CHAT_MESSAGE_BODY_ASSISTANT)}>\n        {!compact && (name != null || time != null) && (\n          <div className={CHAT_MESSAGE_HEADER}>\n            {name != null && <span className={CHAT_MESSAGE_NAME}>{name}</span>}\n            {time != null && <span className={CHAT_MESSAGE_TIME}>{time}</span>}\n          </div>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport type ChatMarkerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  (\n    | { type: \"status\"; state?: ChatStatusState }\n    | {\n        type: \"tool\";\n        state?: ChatToolState;\n        /** The tool's name. */\n        title: React.ReactNode;\n        detail?: React.ReactNode;\n        /** The right-hand note: \"Running…\", \"0.4s\", \"Failed · 1.2s\". */\n        meta?: React.ReactNode;\n      }\n    | { type: \"separator\" }\n  );\n\n/** The quiet lines between messages: progress, a tool call, or a day break. */\nexport function ChatMarker(allProps: ChatMarkerProps) {\n  if (allProps.type === \"separator\") {\n    const { type: _type, className, children, ...rest } = allProps;\n    return (\n      <div data-slot=\"chat-marker\" data-type=\"separator\" className={cn(CHAT_MARKER_SEPARATOR, className)} {...rest}>\n        <span className={CHAT_MARKER_RULE} />\n        <span className={CHAT_MARKER_SEPARATOR_LABEL}>{children}</span>\n        <span className={CHAT_MARKER_RULE} />\n      </div>\n    );\n  }\n  if (allProps.type === \"status\") {\n    const { type: _type, state = \"done\", className, children, ...rest } = allProps;\n    return (\n      <div\n        data-slot=\"chat-marker\"\n        data-type=\"status\"\n        data-state={state}\n        role={state === \"running\" ? \"status\" : undefined}\n        className={cn(CHAT_MARKER_STATUS, className)}\n        {...rest}\n      >\n        <span\n          aria-hidden\n          className={cn(CHAT_MARKER_DOT, chatStatusDotClasses[state])}\n        />\n        {children}\n      </div>\n    );\n  }\n  const { type: _type, state = \"done\", title, detail, meta, className, children, ...rest } = allProps;\n  return (\n    <div\n      data-slot=\"chat-marker\"\n      data-type=\"tool\"\n      data-state={state}\n      className={cn(\n        CHAT_MARKER_TOOL,\n        state === \"error\" ? CHAT_MARKER_TOOL_ERROR_BORDER : CHAT_MARKER_TOOL_BORDER,\n        className,\n      )}\n      {...rest}\n    >\n      <UiIcon name={state === \"error\" ? \"alert\" : \"sparkles\"} className={CHAT_MARKER_TOOL_ICON} />\n      <div className={CHAT_MARKER_TOOL_BODY}>\n        <span className={CHAT_MARKER_TOOL_TITLE}>{title}</span>\n        {detail != null && <span className={CHAT_MARKER_TOOL_DETAIL}>{detail}</span>}\n        {children}\n      </div>\n      {meta != null && (\n        <span className={cn(CHAT_MARKER_TOOL_META, chatToolMetaClasses[state])}>{meta}\n        </span>\n      )}\n      {state === \"done\" && <UiIcon name=\"check\" className={CHAT_MARKER_TOOL_CHECK} />}\n    </div>\n  );\n}\n\nexport interface ChatAttachmentProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  type?: \"file\" | \"image\";\n  state?: \"ready\" | \"uploading\";\n  name: string;\n  /** \"PDF · 1.2 MB\"; while uploading, defaults to the percentage. */\n  meta?: React.ReactNode;\n  /** 0 to 100, while uploading. */\n  progress?: number;\n  /** Shows the remove button. */\n  onRemove?: () => void;\n  /** Default `\"Remove {name}\"`. */\n  removeLabel?: string;\n}\n\n/** A card for a file in a message or in the composer. */\nexport function ChatAttachment({\n  type = \"file\",\n  state = \"ready\",\n  name,\n  meta,\n  progress = 0,\n  onRemove,\n  removeLabel,\n  className,\n  ...props\n}: ChatAttachmentProps) {\n  const pct = Math.min(100, Math.max(0, Math.round(progress)));\n  return (\n    <div\n      data-slot=\"chat-attachment\"\n      data-type={type}\n      data-state={state}\n      className={cn(CHAT_ATTACHMENT_BASE, className)}\n      {...props}\n    >\n      <div className={CHAT_ATTACHMENT_ROW}>\n        <span className={CHAT_ATTACHMENT_ICON}>\n          <UiIcon name={type === \"image\" ? \"image\" : \"file\"} />\n        </span>\n        <div className={CHAT_ATTACHMENT_BODY}>\n          <span className={CHAT_ATTACHMENT_NAME}>{name}</span>\n          <span className={CHAT_ATTACHMENT_META}>{meta ?? (state === \"uploading\" ? `Uploading… ${pct}%` : null)}</span>\n        </div>\n        {onRemove && (\n          <IconButton aria-label={removeLabel ?? `Remove ${name}`} size=\"sm\" onClick={onRemove}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        )}\n      </div>\n      {state === \"uploading\" && (\n        <div\n          role=\"progressbar\"\n          aria-label={name}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={pct}\n          className={CHAT_ATTACHMENT_PROGRESS}\n        >\n          <div className={CHAT_ATTACHMENT_PROGRESS_FILL} style={{ width: `${pct}%` }} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_type","className","children","rest","state"]}
+{"version":3,"sources":["../../../src/components/shell/chat-message.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  CHAT_ATTACHMENT_BASE,\n  CHAT_ATTACHMENT_BODY,\n  CHAT_ATTACHMENT_ICON,\n  CHAT_ATTACHMENT_META,\n  CHAT_ATTACHMENT_NAME,\n  CHAT_ATTACHMENT_PROGRESS,\n  CHAT_ATTACHMENT_PROGRESS_FILL,\n  CHAT_ATTACHMENT_ROW,\n  CHAT_BUBBLE_BASE,\n  CHAT_MARKER_DOT,\n  CHAT_MARKER_RULE,\n  CHAT_MARKER_SEPARATOR,\n  CHAT_MARKER_SEPARATOR_LABEL,\n  CHAT_MARKER_STATUS,\n  CHAT_MARKER_TOOL,\n  CHAT_MARKER_TOOL_BODY,\n  CHAT_MARKER_TOOL_BORDER,\n  CHAT_MARKER_TOOL_CHECK,\n  CHAT_MARKER_TOOL_DETAIL,\n  CHAT_MARKER_TOOL_ERROR_BORDER,\n  CHAT_MARKER_TOOL_ICON,\n  CHAT_MARKER_TOOL_META,\n  CHAT_MARKER_TOOL_TITLE,\n  CHAT_MESSAGE_AVATAR,\n  CHAT_MESSAGE_AVATAR_TILE,\n  CHAT_MESSAGE_BASE,\n  CHAT_MESSAGE_BODY,\n  CHAT_MESSAGE_BODY_ASSISTANT,\n  CHAT_MESSAGE_BODY_USER,\n  CHAT_MESSAGE_HEADER,\n  CHAT_MESSAGE_NAME,\n  CHAT_MESSAGE_TIME,\n  CHAT_MESSAGE_USER,\n  chatBubbleVariantClasses,\n  chatStatusDotClasses,\n  chatToolMetaClasses,\n} from \"../../generated/chat-message\";\nimport type { ChatBubbleVariant, ChatStatusState, ChatToolState } from \"../../generated/chat-message\";\nimport { ChatStreamText } from \"./chat-stream-text\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { UiIcon } from \"../../icons/ui-icons\";\nimport type { ChatAttachmentState, ChatAttachmentType, ChatMessageRole } from \"../../generated/chat-message\";\n\nexport type { ChatBubbleVariant };\n\nexport interface ChatBubbleProps extends React.ComponentProps<\"div\"> {\n  variant?: ChatBubbleVariant;\n  /**\n   * Still receiving text: a soft caret pulses after it, and string children\n   * fade in word by word (`ChatStreamText`). Stays set until the text is complete.\n   */\n  streaming?: boolean;\n}\n\n/** One block of message text; `assistant` has no box so long answers read as a page. */\nexport function ChatBubble({ variant = \"assistant\", streaming = false, className, children, ...props }: ChatBubbleProps) {\n  // Once a bubble has streamed it keeps its word wrappers and its caret slot, so\n  // the last words finish landing and the caret fades out instead of vanishing.\n  const [live, setLive] = React.useState(streaming);\n  if (streaming && !live) setLive(true);\n  return (\n    <div\n      data-slot=\"chat-bubble\"\n      data-variant={variant}\n      data-streaming={streaming ? \"\" : undefined}\n      data-caret={live ? \"\" : undefined}\n      className={cn(CHAT_BUBBLE_BASE, chatBubbleVariantClasses[variant], className)}\n      {...props}\n    >\n      {live && typeof children === \"string\" ? <ChatStreamText text={children} streaming={streaming} /> : children}\n    </div>\n  );\n}\n\nexport interface ChatMessageProps extends Omit<React.ComponentProps<\"div\">, \"role\"> {\n  role: ChatMessageRole;\n  /** \"Assistant\", \"You\". */\n  name?: React.ReactNode;\n  /** Already formatted: \"13:04\". */\n  time?: React.ReactNode;\n  /** The assistant's tile; a default sparkle tile when omitted. */\n  avatar?: React.ReactNode;\n  /** Drops the name row and the avatar, for a narrow dock. */\n  compact?: boolean;\n}\n\n/** A turn: who spoke, when, then the bubbles and markers. Fades in and rises once when it mounts. */\nexport function ChatMessage({ role, name, time, avatar, compact = false, className, children, ...props }: ChatMessageProps) {\n  const user = role === \"user\";\n  return (\n    <div\n      data-slot=\"chat-message\"\n      data-role={role}\n      data-enter=\"rise\"\n      className={cn(CHAT_MESSAGE_BASE, user && CHAT_MESSAGE_USER, className)}\n      {...props}\n    >\n      {!user && !compact && (\n        <div className={CHAT_MESSAGE_AVATAR}>\n          {avatar ?? (\n            <span className={CHAT_MESSAGE_AVATAR_TILE}>\n              <UiIcon name=\"sparkles\" />\n            </span>\n          )}\n        </div>\n      )}\n      <div className={cn(CHAT_MESSAGE_BODY, user ? CHAT_MESSAGE_BODY_USER : CHAT_MESSAGE_BODY_ASSISTANT)}>\n        {!compact && (name != null || time != null) && (\n          <div className={CHAT_MESSAGE_HEADER}>\n            {name != null && <span className={CHAT_MESSAGE_NAME}>{name}</span>}\n            {time != null && <span className={CHAT_MESSAGE_TIME}>{time}</span>}\n          </div>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport type ChatMarkerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  (\n    | { type: \"status\"; state?: ChatStatusState }\n    | {\n        type: \"tool\";\n        state?: ChatToolState;\n        /** The tool's name. */\n        title: React.ReactNode;\n        detail?: React.ReactNode;\n        /** The right-hand note: \"Running…\", \"0.4s\", \"Failed · 1.2s\". */\n        meta?: React.ReactNode;\n      }\n    | { type: \"separator\" }\n  );\n\n/** The quiet lines between messages: progress, a tool call, or a day break. */\nexport function ChatMarker(allProps: ChatMarkerProps) {\n  if (allProps.type === \"separator\") {\n    const { type: _type, className, children, ...rest } = allProps;\n    return (\n      <div data-slot=\"chat-marker\" data-type=\"separator\" className={cn(CHAT_MARKER_SEPARATOR, className)} {...rest}>\n        <span className={CHAT_MARKER_RULE} />\n        <span className={CHAT_MARKER_SEPARATOR_LABEL}>{children}</span>\n        <span className={CHAT_MARKER_RULE} />\n      </div>\n    );\n  }\n  if (allProps.type === \"status\") {\n    const { type: _type, state = \"done\", className, children, ...rest } = allProps;\n    return (\n      <div\n        data-slot=\"chat-marker\"\n        data-type=\"status\"\n        data-state={state}\n        role={state === \"running\" ? \"status\" : undefined}\n        className={cn(CHAT_MARKER_STATUS, className)}\n        {...rest}\n      >\n        <span\n          aria-hidden\n          className={cn(CHAT_MARKER_DOT, chatStatusDotClasses[state])}\n        />\n        {children}\n      </div>\n    );\n  }\n  const { type: _type, state = \"done\", title, detail, meta, className, children, ...rest } = allProps;\n  return (\n    <div\n      data-slot=\"chat-marker\"\n      data-type=\"tool\"\n      data-state={state}\n      className={cn(\n        CHAT_MARKER_TOOL,\n        state === \"error\" ? CHAT_MARKER_TOOL_ERROR_BORDER : CHAT_MARKER_TOOL_BORDER,\n        className,\n      )}\n      {...rest}\n    >\n      <UiIcon name={state === \"error\" ? \"alert\" : \"sparkles\"} className={CHAT_MARKER_TOOL_ICON} />\n      <div className={CHAT_MARKER_TOOL_BODY}>\n        <span className={CHAT_MARKER_TOOL_TITLE}>{title}</span>\n        {detail != null && <span className={CHAT_MARKER_TOOL_DETAIL}>{detail}</span>}\n        {children}\n      </div>\n      {meta != null && (\n        <span className={cn(CHAT_MARKER_TOOL_META, chatToolMetaClasses[state])}>{meta}\n        </span>\n      )}\n      {state === \"done\" && <UiIcon name=\"check\" className={CHAT_MARKER_TOOL_CHECK} />}\n    </div>\n  );\n}\n\nexport interface ChatAttachmentProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  type?: ChatAttachmentType;\n  state?: ChatAttachmentState;\n  name: string;\n  /** \"PDF · 1.2 MB\"; while uploading, defaults to the percentage. */\n  meta?: React.ReactNode;\n  /** 0 to 100, while uploading. */\n  progress?: number;\n  /** Shows the remove button. */\n  onRemove?: () => void;\n  /** Default `\"Remove {name}\"`. */\n  removeLabel?: string;\n}\n\n/** A card for a file in a message or in the composer. */\nexport function ChatAttachment({\n  type = \"file\",\n  state = \"ready\",\n  name,\n  meta,\n  progress = 0,\n  onRemove,\n  removeLabel,\n  className,\n  ...props\n}: ChatAttachmentProps) {\n  const pct = Math.min(100, Math.max(0, Math.round(progress)));\n  return (\n    <div\n      data-slot=\"chat-attachment\"\n      data-type={type}\n      data-state={state}\n      className={cn(CHAT_ATTACHMENT_BASE, className)}\n      {...props}\n    >\n      <div className={CHAT_ATTACHMENT_ROW}>\n        <span className={CHAT_ATTACHMENT_ICON}>\n          <UiIcon name={type === \"image\" ? \"image\" : \"file\"} />\n        </span>\n        <div className={CHAT_ATTACHMENT_BODY}>\n          <span className={CHAT_ATTACHMENT_NAME}>{name}</span>\n          <span className={CHAT_ATTACHMENT_META}>{meta ?? (state === \"uploading\" ? `Uploading… ${pct}%` : null)}</span>\n        </div>\n        {onRemove && (\n          <IconButton aria-label={removeLabel ?? `Remove ${name}`} size=\"sm\" onClick={onRemove}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        )}\n      </div>\n      {state === \"uploading\" && (\n        <div\n          role=\"progressbar\"\n          aria-label={name}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={pct}\n          className={CHAT_ATTACHMENT_PROGRESS}\n        >\n          <div className={CHAT_ATTACHMENT_PROGRESS_FILL} style={{ width: `${pct}%` }} />\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_type","className","children","rest","state"]}

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

@@ -2,7 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CHAT_TYPING_BASE, CHAT_TYPING_DOT, CHAT_TYPING_STILL } from "../../generated/chat-typing.js";
 import { cn } from "../../lib/cn.js";
-function ChatTyping({ label = "Assistant is thinking", className, ...props }) {
+import * as copy from "../../generated/copy.js";
+function ChatTyping({ label = copy.CHAT_TYPING, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "span",
     {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/chat-typing.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CHAT_TYPING_BASE, CHAT_TYPING_DOT, CHAT_TYPING_STILL } from \"../../generated/chat-typing\";\nimport { cn } from \"../../lib/cn\";\n\nexport interface ChatTypingProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  /** Names the state for assistive tech. Default `\"Assistant is thinking\"`. */\n  label?: string;\n}\n\n/**\n * The wait before the first token: three dots whose opacity ripples. Under\n * reduced motion CSS swaps them for a still \"…\". It is a status region, so a\n * screen reader hears the label once when it appears.\n */\nexport function ChatTyping({ label = \"Assistant is thinking\", className, ...props }: ChatTypingProps) {\n  return (\n    <span\n      role=\"status\"\n      aria-label={label}\n      data-slot=\"chat-typing\"\n      className={cn(CHAT_TYPING_BASE, className)}\n      {...props}\n    >\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-still className={CHAT_TYPING_STILL}>\n        …\n      </span>\n    </span>\n  );\n}\n"],"mappings":"AAgBI,SAOE,KAPF;AAhBJ,YAAY,WAAW;AACvB,SAAS,kBAAkB,iBAAiB,yBAAyB;AACrE,SAAS,UAAU;AAYZ,SAAS,WAAW,EAAE,QAAQ,yBAAyB,WAAW,GAAG,MAAM,GAAoB;AACpG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,cAAU,MAAC,WAAW,mBAAmB,oBAE3D;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/shell/chat-typing.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { CHAT_TYPING_BASE, CHAT_TYPING_DOT, CHAT_TYPING_STILL } from \"../../generated/chat-typing\";\nimport { cn } from \"../../lib/cn\";\nimport * as copy from \"../../generated/copy\";\n\nexport interface ChatTypingProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  /** Names the state for assistive tech. Default `\"Assistant is thinking\"`. */\n  label?: string;\n}\n\n/**\n * The wait before the first token: three dots whose opacity ripples. Under\n * reduced motion CSS swaps them for a still \"…\". It is a status region, so a\n * screen reader hears the label once when it appears.\n */\nexport function ChatTyping({ label = copy.CHAT_TYPING, className, ...props }: ChatTypingProps) {\n  return (\n    <span\n      role=\"status\"\n      aria-label={label}\n      data-slot=\"chat-typing\"\n      className={cn(CHAT_TYPING_BASE, className)}\n      {...props}\n    >\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-dot className={CHAT_TYPING_DOT} />\n      <span aria-hidden data-still className={CHAT_TYPING_STILL}>\n        …\n      </span>\n    </span>\n  );\n}\n"],"mappings":"AAiBI,SAOE,KAPF;AAjBJ,YAAY,WAAW;AACvB,SAAS,kBAAkB,iBAAiB,yBAAyB;AACrE,SAAS,UAAU;AACnB,YAAY,UAAU;AAYf,SAAS,WAAW,EAAE,QAAQ,KAAK,aAAa,WAAW,GAAG,MAAM,GAAoB;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,YAAQ,MAAC,WAAW,iBAAiB;AAAA,QACvD,oBAAC,UAAK,eAAW,MAAC,cAAU,MAAC,WAAW,mBAAmB,oBAE3D;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/shell/footer.js

@@ -1,7 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Container } from "../atomic/container.js";
-const HEADING = "font-mono text-xs text-ink uppercase tracking-widest mb-6";
+import * as copy from "../../generated/copy.js";
+import { FOOTER_BRAND, FOOTER_COPYRIGHT, FOOTER_DESCRIPTION, FOOTER_GRID, FOOTER_HEADING, FOOTER_LEGAL_LINK, FOOTER_LEGAL_LINKS, FOOTER_LEGAL_SEPARATOR, FOOTER_LOCKUP, FOOTER_LOCKUP_TEXT, FOOTER_NAV_COLUMN, FOOTER_NAV_LINK, FOOTER_NAV_LIST, FOOTER_NEWSLETTER_BLURB, FOOTER_NEWSLETTER_COLUMN, FOOTER_OFFICES_LIST, FOOTER_OFFICE_NAME, FOOTER_ROOT, FOOTER_TAGLINE, FOOTER_VERSION, FOOTER_WIDE_COLUMN } from "../../generated/footer.js";
+const HEADING = FOOTER_HEADING;
 function Footer({
   lockup,
   brand,
@@ -11,10 +13,10 @@ function Footer({
   copyright,
   nav = [],
   offices = [],
-  officesHeading = "Offices",
+  officesHeading = copy.FOOTER_OFFICES,
   legalLinks = [],
   newsletter,
-  newsletterHeading = "Newsletter",
+  newsletterHeading = copy.FOOTER_NEWSLETTER,
   newsletterBlurb = "",
   version,
   commitHref,
@@ -24,47 +26,47 @@ function Footer({
   const L = linkComponent ?? "a";
   const composed = brand !== void 0 || mark !== void 0;
   const hasBrandColumn = lockup !== void 0 || composed || description !== void 0 || legalLinks.length > 0;
-  return /* @__PURE__ */ jsxs("footer", { "data-slot": "footer", className: "bg-background border-t border-ink/10 py-16", children: [
+  return /* @__PURE__ */ jsxs("footer", { "data-slot": "footer", className: FOOTER_ROOT, children: [
     children,
     /* @__PURE__ */ jsxs(Container, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-8 gap-y-8 lg:grid-cols-12 mb-12", children: [
-        hasBrandColumn && /* @__PURE__ */ jsxs("div", { className: "col-span-2 lg:col-span-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: FOOTER_GRID, children: [
+        hasBrandColumn && /* @__PURE__ */ jsxs("div", { className: FOOTER_WIDE_COLUMN, children: [
           lockup !== void 0 ? /* @__PURE__ */ jsx("div", { "data-slot": "footer-lockup", className: "mb-6", children: lockup }) : composed && /* @__PURE__ */ jsx(FooterLockup, { brand, mark, tagline }),
-          description !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-ink/40 text-xs font-light max-w-sm leading-relaxed mb-6", children: description }),
-          legalLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-4 text-xs font-mono text-primary-ink", children: legalLinks.map((link, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            i > 0 && /* @__PURE__ */ jsx("span", { className: "text-ink/20", children: "|" }),
-            /* @__PURE__ */ jsx(L, { href: link.href, className: "hover:underline", children: link.label })
+          description !== void 0 && /* @__PURE__ */ jsx("p", { className: FOOTER_DESCRIPTION, children: description }),
+          legalLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: FOOTER_LEGAL_LINKS, children: legalLinks.map((link, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            i > 0 && /* @__PURE__ */ jsx("span", { className: FOOTER_LEGAL_SEPARATOR, children: "|" }),
+            /* @__PURE__ */ jsx(L, { href: link.href, className: FOOTER_LEGAL_LINK, children: link.label })
           ] }, link.label)) })
         ] }),
-        nav.map((group) => /* @__PURE__ */ jsxs("nav", { "aria-label": `Footer ${group.heading} links`, className: "lg:col-span-2", children: [
+        nav.map((group) => /* @__PURE__ */ jsxs("nav", { "aria-label": `Footer ${group.heading} links`, className: FOOTER_NAV_COLUMN, children: [
           /* @__PURE__ */ jsx("h4", { className: HEADING, children: group.heading }),
-          /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("ul", { className: FOOTER_NAV_LIST, children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             L,
             {
               href: link.href,
-              className: "text-xs font-light text-ink/70 hover:text-primary-ink transition-colors",
+              className: FOOTER_NAV_LINK,
               children: link.label
             }
           ) }, link.href)) })
         ] }, group.heading)),
-        offices.length > 0 && /* @__PURE__ */ jsxs("div", { className: "col-span-2 lg:col-span-3", children: [
+        offices.length > 0 && /* @__PURE__ */ jsxs("div", { className: FOOTER_WIDE_COLUMN, children: [
           /* @__PURE__ */ jsx("h4", { className: HEADING, children: officesHeading }),
-          /* @__PURE__ */ jsx("ul", { className: "space-y-4 text-xs text-ink/70 font-light leading-relaxed", children: offices.map((office) => /* @__PURE__ */ jsxs("li", { children: [
-            /* @__PURE__ */ jsx("strong", { className: "text-ink block font-mono text-[10px] uppercase tracking-wider mb-1", children: office.name }),
+          /* @__PURE__ */ jsx("ul", { className: FOOTER_OFFICES_LIST, children: offices.map((office) => /* @__PURE__ */ jsxs("li", { children: [
+            /* @__PURE__ */ jsx("strong", { className: FOOTER_OFFICE_NAME, children: office.name }),
             office.address
           ] }, office.name)) })
         ] }),
-        newsletter && /* @__PURE__ */ jsxs("div", { className: "col-span-2 lg:col-span-2", children: [
+        newsletter && /* @__PURE__ */ jsxs("div", { className: FOOTER_NEWSLETTER_COLUMN, children: [
           /* @__PURE__ */ jsx("h4", { className: HEADING, children: newsletterHeading }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm sm:text-xs font-light leading-relaxed text-ink/70 mb-4", children: newsletterBlurb }),
+          /* @__PURE__ */ jsx("p", { className: FOOTER_NEWSLETTER_BLURB, children: newsletterBlurb }),
           newsletter
         ] })
       ] }),
-      (copyright !== void 0 || version !== void 0) && /* @__PURE__ */ jsx("div", { className: "border-t border-ink/10 pt-8 text-[10px] font-mono text-ink/40", children: /* @__PURE__ */ jsxs("p", { children: [
+      (copyright !== void 0 || version !== void 0) && /* @__PURE__ */ jsx("div", { className: FOOTER_COPYRIGHT, children: /* @__PURE__ */ jsxs("p", { children: [
         copyright,
         version && /* @__PURE__ */ jsxs(Fragment, { children: [
           copyright !== void 0 && " ",
-          /* @__PURE__ */ jsx("a", { href: commitHref, className: "text-ink/30", children: version })
+          /* @__PURE__ */ jsx("a", { href: commitHref, className: FOOTER_VERSION, children: version })
         ] })
       ] }) })
     ] })
@@ -75,11 +77,11 @@ function FooterLockup({
   mark,
   tagline
 }) {
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "footer-lockup", className: "flex items-center gap-3 mb-6", children: [
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "footer-lockup", className: FOOTER_LOCKUP, children: [
     mark,
-    (brand !== void 0 || tagline !== void 0) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      brand !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-serif font-bold text-base tracking-wider text-ink", children: brand }),
-      tagline !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[8px] font-mono tracking-[0.3em] text-primary-ink uppercase", children: tagline })
+    (brand !== void 0 || tagline !== void 0) && /* @__PURE__ */ jsxs("div", { className: FOOTER_LOCKUP_TEXT, children: [
+      brand !== void 0 && /* @__PURE__ */ jsx("span", { className: FOOTER_BRAND, children: brand }),
+      tagline !== void 0 && /* @__PURE__ */ jsx("span", { className: FOOTER_TAGLINE, children: tagline })
     ] })
   ] });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Container } from \"../atomic/container\";\n\n/**\n * A 12-col footer grid — brand 3 | sitemap groups 2 each | offices 3 |\n * newsletter 2 — with the legal links and copyright line. On mobile the sitemap\n * columns sit side by side. The kit brings no content of its own: every string,\n * the mark and the lock-up are the caller's, and each column renders only when\n * it has something in it. `children` render right after the `<footer>` tag —\n * the slot for app-side extras like a build-version easter egg.\n *\n * The lock-up is either composed from `mark` + `brand` + `tagline`, or handed\n * over whole as `lockup` when a brand's arrangement is not that one.\n *\n * `linkComponent` lets Next hosts pass `next/link`; everyone else gets `<a>`.\n */\nexport interface FooterLink {\n  label: string;\n  href: string;\n}\n\nexport interface FooterLinkGroup {\n  heading: string;\n  links: readonly FooterLink[];\n}\n\nexport interface FooterOffice {\n  name: string;\n  address: string;\n}\n\nexport interface FooterProps {\n  /** The whole lock-up; replaces the one `mark` + `brand` + `tagline` compose. */\n  lockup?: React.ReactNode;\n  /** The wordmark beside the mark, set in the display family. */\n  brand?: string;\n  /** The mark beside the brand name. Sized by the caller. */\n  mark?: React.ReactNode;\n  tagline?: string;\n  description?: React.ReactNode;\n  copyright?: React.ReactNode;\n  nav?: readonly FooterLinkGroup[];\n  offices?: readonly FooterOffice[];\n  officesHeading?: string;\n  legalLinks?: readonly FooterLink[];\n  /** The newsletter form; the newsletter column renders only when present. */\n  newsletter?: React.ReactNode;\n  newsletterHeading?: string;\n  newsletterBlurb?: string;\n  version?: string;\n  commitHref?: string;\n  linkComponent?: React.ElementType;\n  children?: React.ReactNode;\n}\n\nconst HEADING = \"font-mono text-xs text-ink uppercase tracking-widest mb-6\";\n\nexport function Footer({\n  lockup,\n  brand,\n  mark,\n  tagline,\n  description,\n  copyright,\n  nav = [],\n  offices = [],\n  officesHeading = \"Offices\",\n  legalLinks = [],\n  newsletter,\n  newsletterHeading = \"Newsletter\",\n  newsletterBlurb = \"\",\n  version,\n  commitHref,\n  linkComponent,\n  children,\n}: FooterProps) {\n  const L = linkComponent ?? \"a\";\n  const composed = brand !== undefined || mark !== undefined;\n  const hasBrandColumn = lockup !== undefined || composed || description !== undefined || legalLinks.length > 0;\n\n  return (\n    <footer data-slot=\"footer\" className=\"bg-background border-t border-ink/10 py-16\">\n      {children}\n      <Container>\n        <div className=\"grid grid-cols-2 gap-x-8 gap-y-8 lg:grid-cols-12 mb-12\">\n          {hasBrandColumn && (\n            <div className=\"col-span-2 lg:col-span-3\">\n              {lockup !== undefined ? (\n                <div data-slot=\"footer-lockup\" className=\"mb-6\">{lockup}</div>\n              ) : (\n                composed && <FooterLockup brand={brand} mark={mark} tagline={tagline} />\n              )}\n              {description !== undefined && (\n                <p className=\"text-ink/40 text-xs font-light max-w-sm leading-relaxed mb-6\">\n                  {description}\n                </p>\n              )}\n              {legalLinks.length > 0 && (\n                <div className=\"flex gap-4 text-xs font-mono text-primary-ink\">\n                  {legalLinks.map((link, i) => (\n                    <React.Fragment key={link.label}>\n                      {i > 0 && <span className=\"text-ink/20\">|</span>}\n                      <L href={link.href} className=\"hover:underline\">\n                        {link.label}\n                      </L>\n                    </React.Fragment>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n\n          {nav.map((group) => (\n            <nav key={group.heading} aria-label={`Footer ${group.heading} links`} className=\"lg:col-span-2\">\n              <h4 className={HEADING}>{group.heading}</h4>\n              <ul className=\"space-y-3\">\n                {group.links.map((link) => (\n                  <li key={link.href}>\n                    <L\n                      href={link.href}\n                      className=\"text-xs font-light text-ink/70 hover:text-primary-ink transition-colors\"\n                    >\n                      {link.label}\n                    </L>\n                  </li>\n                ))}\n              </ul>\n            </nav>\n          ))}\n\n          {offices.length > 0 && (\n            <div className=\"col-span-2 lg:col-span-3\">\n              <h4 className={HEADING}>{officesHeading}</h4>\n              <ul className=\"space-y-4 text-xs text-ink/70 font-light leading-relaxed\">\n                {offices.map((office) => (\n                  <li key={office.name}>\n                    <strong className=\"text-ink block font-mono text-[10px] uppercase tracking-wider mb-1\">\n                      {office.name}\n                    </strong>\n                    {office.address}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n\n          {newsletter && (\n            <div className=\"col-span-2 lg:col-span-2\">\n              <h4 className={HEADING}>{newsletterHeading}</h4>\n              {/* What the source's <Tier tier=\"alt\"><Text> emits: alt body size\n                  + the info variant, then the mb-4 the caller adds. */}\n              <p className=\"text-sm sm:text-xs font-light leading-relaxed text-ink/70 mb-4\">\n                {newsletterBlurb}\n              </p>\n              {newsletter}\n            </div>\n          )}\n        </div>\n\n        {(copyright !== undefined || version !== undefined) && (\n          <div className=\"border-t border-ink/10 pt-8 text-[10px] font-mono text-ink/40\">\n            <p>\n              {copyright}\n              {version && (\n                <>\n                  {copyright !== undefined && \" \"}\n                  <a href={commitHref} className=\"text-ink/30\">\n                    {version}\n                  </a>\n                </>\n              )}\n            </p>\n          </div>\n        )}\n      </Container>\n    </footer>\n  );\n}\n\nfunction FooterLockup({\n  brand,\n  mark,\n  tagline,\n}: {\n  brand: string | undefined;\n  mark: React.ReactNode;\n  tagline: string | undefined;\n}) {\n  return (\n    <div data-slot=\"footer-lockup\" className=\"flex items-center gap-3 mb-6\">\n      {mark}\n      {(brand !== undefined || tagline !== undefined) && (\n        <div className=\"flex flex-col\">\n          {brand !== undefined && (\n            <span className=\"font-serif font-bold text-base tracking-wider text-ink\">{brand}</span>\n          )}\n          {tagline !== undefined && (\n            <span className=\"text-[8px] font-mono tracking-[0.3em] text-primary-ink uppercase\">\n              {tagline}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/shell/footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Container } from \"../atomic/container\";\nimport * as copy from \"../../generated/copy\";\nimport type { FooterLink, FooterLinkGroup, FooterOffice } from \"../../generated/footer\";\nimport { FOOTER_BRAND, FOOTER_COPYRIGHT, FOOTER_DESCRIPTION, FOOTER_GRID, FOOTER_HEADING, FOOTER_LEGAL_LINK, FOOTER_LEGAL_LINKS, FOOTER_LEGAL_SEPARATOR, FOOTER_LOCKUP, FOOTER_LOCKUP_TEXT, FOOTER_NAV_COLUMN, FOOTER_NAV_LINK, FOOTER_NAV_LIST, FOOTER_NEWSLETTER_BLURB, FOOTER_NEWSLETTER_COLUMN, FOOTER_OFFICES_LIST, FOOTER_OFFICE_NAME, FOOTER_ROOT, FOOTER_TAGLINE, FOOTER_VERSION, FOOTER_WIDE_COLUMN } from \"../../generated/footer\";\n\nexport type { FooterLink, FooterLinkGroup, FooterOffice };\n\nexport interface FooterProps {\n  /** The whole lock-up; replaces the one `mark` + `brand` + `tagline` compose. */\n  lockup?: React.ReactNode;\n  /** The wordmark beside the mark, set in the display family. */\n  brand?: string;\n  /** The mark beside the brand name. Sized by the caller. */\n  mark?: React.ReactNode;\n  tagline?: string;\n  description?: React.ReactNode;\n  copyright?: React.ReactNode;\n  nav?: readonly FooterLinkGroup[];\n  offices?: readonly FooterOffice[];\n  officesHeading?: string;\n  legalLinks?: readonly FooterLink[];\n  /** The newsletter form; the newsletter column renders only when present. */\n  newsletter?: React.ReactNode;\n  newsletterHeading?: string;\n  newsletterBlurb?: string;\n  version?: string;\n  commitHref?: string;\n  linkComponent?: React.ElementType;\n  children?: React.ReactNode;\n}\n\nconst HEADING = FOOTER_HEADING;\n\n/**\n * A 12-col footer grid — brand 3 | sitemap groups 2 each | offices 3 |\n * newsletter 2 — with the legal links and copyright line. On mobile the sitemap\n * columns sit side by side. The kit brings no content of its own: every string,\n * the mark and the lock-up are the caller's, and each column renders only when\n * it has something in it. `children` render right after the `<footer>` tag —\n * the slot for app-side extras like a build-version easter egg.\n *\n * The lock-up is either composed from `mark` + `brand` + `tagline`, or handed\n * over whole as `lockup` when a brand's arrangement is not that one.\n *\n * `linkComponent` lets Next hosts pass `next/link`; everyone else gets `<a>`.\n */\nexport function Footer({\n  lockup,\n  brand,\n  mark,\n  tagline,\n  description,\n  copyright,\n  nav = [],\n  offices = [],\n  officesHeading = copy.FOOTER_OFFICES,\n  legalLinks = [],\n  newsletter,\n  newsletterHeading = copy.FOOTER_NEWSLETTER,\n  newsletterBlurb = \"\",\n  version,\n  commitHref,\n  linkComponent,\n  children,\n}: FooterProps) {\n  const L = linkComponent ?? \"a\";\n  const composed = brand !== undefined || mark !== undefined;\n  const hasBrandColumn = lockup !== undefined || composed || description !== undefined || legalLinks.length > 0;\n\n  return (\n    <footer data-slot=\"footer\" className={FOOTER_ROOT}>\n      {children}\n      <Container>\n        <div className={FOOTER_GRID}>\n          {hasBrandColumn && (\n            <div className={FOOTER_WIDE_COLUMN}>\n              {lockup !== undefined ? (\n                <div data-slot=\"footer-lockup\" className=\"mb-6\">{lockup}</div>\n              ) : (\n                composed && <FooterLockup brand={brand} mark={mark} tagline={tagline} />\n              )}\n              {description !== undefined && (\n                <p className={FOOTER_DESCRIPTION}>\n                  {description}\n                </p>\n              )}\n              {legalLinks.length > 0 && (\n                <div className={FOOTER_LEGAL_LINKS}>\n                  {legalLinks.map((link, i) => (\n                    <React.Fragment key={link.label}>\n                      {i > 0 && <span className={FOOTER_LEGAL_SEPARATOR}>|</span>}\n                      <L href={link.href} className={FOOTER_LEGAL_LINK}>\n                        {link.label}\n                      </L>\n                    </React.Fragment>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n\n          {nav.map((group) => (\n            <nav key={group.heading} aria-label={`Footer ${group.heading} links`} className={FOOTER_NAV_COLUMN}>\n              <h4 className={HEADING}>{group.heading}</h4>\n              <ul className={FOOTER_NAV_LIST}>\n                {group.links.map((link) => (\n                  <li key={link.href}>\n                    <L\n                      href={link.href}\n                      className={FOOTER_NAV_LINK}\n                    >\n                      {link.label}\n                    </L>\n                  </li>\n                ))}\n              </ul>\n            </nav>\n          ))}\n\n          {offices.length > 0 && (\n            <div className={FOOTER_WIDE_COLUMN}>\n              <h4 className={HEADING}>{officesHeading}</h4>\n              <ul className={FOOTER_OFFICES_LIST}>\n                {offices.map((office) => (\n                  <li key={office.name}>\n                    <strong className={FOOTER_OFFICE_NAME}>\n                      {office.name}\n                    </strong>\n                    {office.address}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n\n          {newsletter && (\n            <div className={FOOTER_NEWSLETTER_COLUMN}>\n              <h4 className={HEADING}>{newsletterHeading}</h4>\n              {/* What the source's <Tier tier=\"alt\"><Text> emits: alt body size\n                  + the info variant, then the mb-4 the caller adds. */}\n              <p className={FOOTER_NEWSLETTER_BLURB}>\n                {newsletterBlurb}\n              </p>\n              {newsletter}\n            </div>\n          )}\n        </div>\n\n        {(copyright !== undefined || version !== undefined) && (\n          <div className={FOOTER_COPYRIGHT}>\n            <p>\n              {copyright}\n              {version && (\n                <>\n                  {copyright !== undefined && \" \"}\n                  <a href={commitHref} className={FOOTER_VERSION}>\n                    {version}\n                  </a>\n                </>\n              )}\n            </p>\n          </div>\n        )}\n      </Container>\n    </footer>\n  );\n}\n\nfunction FooterLockup({\n  brand,\n  mark,\n  tagline,\n}: {\n  brand: string | undefined;\n  mark: React.ReactNode;\n  tagline: string | undefined;\n}) {\n  return (\n    <div data-slot=\"footer-lockup\" className={FOOTER_LOCKUP}>\n      {mark}\n      {(brand !== undefined || tagline !== undefined) && (\n        <div className={FOOTER_LOCKUP_TEXT}>\n          {brand !== undefined && (\n            <span className={FOOTER_BRAND}>{brand}</span>\n          )}\n          {tagline !== undefined && (\n            <span className={FOOTER_TAGLINE}>\n              {tagline}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/shell/header-controls.js

@@ -26,9 +26,9 @@ import {
   NOTIFICATION_BELL_ITEM_TITLE_UNREAD,
   NOTIFICATION_BELL_LIST,
   NOTIFICATION_BELL_TRIGGER,
-  NOTIFICATION_DOT,
-  headerBalanceToneClasses
+  NOTIFICATION_DOT
 } from "../../generated/header-controls.js";
+import { toneClasses } from "../../generated/tone.js";
 import { AnimatedNumber } from "../derived/animated-number.js";
 import { IconButton } from "../derived/icon-button.js";
 import { Kbd } from "../atomic/kbd.js";
@@ -36,22 +36,23 @@ import { Popover, PopoverContent, PopoverTrigger } from "../atomic/popover.js";
 import { Settled } from "./settled.js";
 import { Skeleton } from "../atomic/skeleton.js";
 import { UiIcon } from "../../icons/ui-icons.js";
+import * as copy from "../../generated/copy.js";
 const USD = { style: "currency", currency: "USD" };
 function HeaderBalance({
-  label = "Balance:",
+  label = copy.HEADER_BALANCE,
   value,
   amount,
   format = USD,
   locales,
   loading = false,
   icon,
-  tone = "default",
+  tone = "neutral",
   onClick,
   disabled,
   className,
   ...props
 }) {
-  const face = cn(HEADER_BALANCE_BASE, onClick && HEADER_BALANCE_INTERACTIVE, className);
+  const face = cn(HEADER_BALANCE_BASE, toneClasses[tone], onClick && HEADER_BALANCE_INTERACTIVE, className);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon,
     /* @__PURE__ */ jsx("span", { className: HEADER_BALANCE_LABEL, children: label }),
@@ -61,7 +62,7 @@ function HeaderBalance({
         loading,
         skeleton: /* @__PURE__ */ jsx(Skeleton, { className: HEADER_BALANCE_SKELETON }),
         className: HEADER_BALANCE_SETTLED,
-        children: /* @__PURE__ */ jsx("span", { className: cn(HEADER_BALANCE_FIGURE, headerBalanceToneClasses[tone]), children: amount === void 0 ? value : /* @__PURE__ */ jsx(AnimatedNumber, { value: amount, format, locales }) })
+        children: /* @__PURE__ */ jsx("span", { className: HEADER_BALANCE_FIGURE, children: amount === void 0 ? value : /* @__PURE__ */ jsx(AnimatedNumber, { value: amount, format, locales }) })
       }
     ),
     onClick && /* @__PURE__ */ jsx(UiIcon, { name: "chevron-down", className: HEADER_BALANCE_CHEVRON })
@@ -73,7 +74,7 @@ function HeaderBalance({
 }
 function NotificationBell({ notifications, onSelect, labels = {}, footer, className }) {
   const unread = notifications.filter((n) => n.unread).length;
-  const name = labels.trigger ?? "Notifications";
+  const name = labels.trigger ?? copy.NOTIFICATION_BELL_TRIGGER;
   const spoken = unread > 0 ? `${name}, ${(labels.unread ?? ((n) => `${n} unread`))(unread)}` : name;
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(IconButton, { "aria-label": spoken, variant: "outline", className: cn(NOTIFICATION_BELL_TRIGGER, className), children: [
@@ -81,7 +82,7 @@ function NotificationBell({ notifications, onSelect, labels = {}, footer, classN
       unread > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "notification-dot", "aria-hidden": true, className: NOTIFICATION_DOT })
     ] }) }),
     /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: NOTIFICATION_BELL_CONTENT, children: [
-      notifications.length === 0 ? /* @__PURE__ */ jsx("p", { className: NOTIFICATION_BELL_EMPTY, children: labels.empty ?? "No notifications" }) : /* @__PURE__ */ jsx("ul", { className: NOTIFICATION_BELL_LIST, children: notifications.map((n) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      notifications.length === 0 ? /* @__PURE__ */ jsx("p", { className: NOTIFICATION_BELL_EMPTY, children: labels.empty ?? copy.NOTIFICATION_BELL_EMPTY }) : /* @__PURE__ */ jsx("ul", { className: NOTIFICATION_BELL_LIST, children: notifications.map((n) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -111,21 +112,21 @@ function NotificationBell({ notifications, onSelect, labels = {}, footer, classN
   ] });
 }
 const APPLE = /Mac|iPhone|iPad|iPod/;
-function usePlatformShortcut() {
-  const [shortcut, setShortcut] = React.useState("Ctrl K");
+function useAppleKeys() {
+  const [apple, setApple] = React.useState(false);
   React.useEffect(() => {
     const nav = navigator;
-    if (APPLE.test(nav.userAgentData?.platform ?? nav.platform ?? "")) setShortcut("\u2318K");
+    setApple(APPLE.test(nav.userAgentData?.platform ?? nav.platform ?? ""));
   }, []);
-  return shortcut;
+  return apple;
 }
 function HeaderSearch({
-  placeholder = "Search or jump to\u2026",
+  placeholder = copy.HEADER_SEARCH,
   shortcut,
   className,
   ...props
 }) {
-  const platformShortcut = usePlatformShortcut();
+  const platformShortcut = useAppleKeys() ? copy.COMMAND_K : copy.CTRL_K;
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -144,6 +145,7 @@ function HeaderSearch({
 export {
   HeaderBalance,
   HeaderSearch,
-  NotificationBell
+  NotificationBell,
+  useAppleKeys
 };
 //# sourceMappingURL=header-controls.js.map

package/dist/components/shell/header-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shell/header-controls.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  HEADER_BALANCE_BASE,\n  HEADER_BALANCE_CHEVRON,\n  HEADER_BALANCE_FIGURE,\n  HEADER_BALANCE_INTERACTIVE,\n  HEADER_BALANCE_LABEL,\n  HEADER_BALANCE_SETTLED,\n  HEADER_BALANCE_SKELETON,\n  HEADER_SEARCH_BASE,\n  HEADER_SEARCH_PLACEHOLDER,\n  NOTIFICATION_BELL_CONTENT,\n  NOTIFICATION_BELL_EMPTY,\n  NOTIFICATION_BELL_FOOTER,\n  NOTIFICATION_BELL_ITEM,\n  NOTIFICATION_BELL_ITEM_BODY,\n  NOTIFICATION_BELL_ITEM_DESCRIPTION,\n  NOTIFICATION_BELL_ITEM_DOT,\n  NOTIFICATION_BELL_ITEM_DOT_READ,\n  NOTIFICATION_BELL_ITEM_DOT_UNREAD,\n  NOTIFICATION_BELL_ITEM_TIME,\n  NOTIFICATION_BELL_ITEM_TITLE,\n  NOTIFICATION_BELL_ITEM_TITLE_UNREAD,\n  NOTIFICATION_BELL_LIST,\n  NOTIFICATION_BELL_TRIGGER,\n  NOTIFICATION_DOT,\n  headerBalanceToneClasses,\n  type HeaderBalanceTone,\n} from \"../../generated/header-controls\";\nimport { AnimatedNumber } from \"../derived/animated-number\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Kbd } from \"../atomic/kbd\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../atomic/popover\";\nimport { Settled } from \"./settled\";\nimport { Skeleton } from \"../atomic/skeleton\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\nexport interface HeaderBalanceProps extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  /** Only meaningful with `onClick`. */\n  disabled?: boolean;\n  label?: React.ReactNode;\n  /** The figure, already formatted: \"$0.00\". Ignored when `amount` is given. */\n  value?: React.ReactNode;\n  /** The figure as a number: it rolls to each new amount, formatted by `format` and `locales`. */\n  amount?: number;\n  /** Formatting for `amount`. Default: USD currency. */\n  format?: Intl.NumberFormatOptions;\n  locales?: Intl.LocalesArgument;\n  /** True until the balance is known; the figure then reveals in place of the skeleton. */\n  loading?: boolean;\n  /** A glyph before the label. */\n  icon?: React.ReactNode;\n  /** `warn` colours the figure as a low-funds signal. */\n  tone?: HeaderBalanceTone;\n}\n\nconst USD: Intl.NumberFormatOptions = { style: \"currency\", currency: \"USD\" };\n\n/** \"Balance: $0.00\" in the header; a button only when given `onClick`. */\nexport function HeaderBalance({\n  label = \"Balance:\",\n  value,\n  amount,\n  format = USD,\n  locales,\n  loading = false,\n  icon,\n  tone = \"default\",\n  onClick,\n  disabled,\n  className,\n  ...props\n}: HeaderBalanceProps) {\n  const face = cn(HEADER_BALANCE_BASE, onClick && HEADER_BALANCE_INTERACTIVE, className);\n  const body = (\n    <>\n      {icon}\n      <span className={HEADER_BALANCE_LABEL}>{label}</span>\n      <Settled\n        loading={loading}\n        skeleton={<Skeleton className={HEADER_BALANCE_SKELETON} />}\n        className={HEADER_BALANCE_SETTLED}\n      >\n        <span className={cn(HEADER_BALANCE_FIGURE, headerBalanceToneClasses[tone])}>\n          {amount === undefined ? value : <AnimatedNumber value={amount} format={format} locales={locales} />}\n        </span>\n      </Settled>\n      {onClick && <UiIcon name=\"chevron-down\" className={HEADER_BALANCE_CHEVRON} />}\n    </>\n  );\n  if (!onClick) {\n    return (\n      <div data-slot=\"header-balance\" className={face} {...props}>\n        {body}\n      </div>\n    );\n  }\n  return (\n    <button type=\"button\" data-slot=\"header-balance\" className={face} onClick={onClick} disabled={disabled} {...props}>\n      {body}\n    </button>\n  );\n}\n\nexport interface HeaderNotification {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Already formatted: \"2m ago\". */\n  time?: React.ReactNode;\n  unread?: boolean;\n}\n\nexport interface NotificationBellLabels {\n  /** The bell's name. Default `\"Notifications\"`. */\n  trigger?: string;\n  /** Spoken after the name when something is unread; gets the count. Default `\"{n} unread\"`. */\n  unread?: (count: number) => string;\n  /** Default `\"No notifications\"`. */\n  empty?: string;\n}\n\nexport interface NotificationBellProps {\n  notifications: readonly HeaderNotification[];\n  onSelect?: (id: string) => void;\n  labels?: NotificationBellLabels;\n  /** Under the list: \"View all\". */\n  footer?: React.ReactNode;\n  className?: string;\n}\n\n/** The bell with an unread dot; the list opens in a popover. */\nexport function NotificationBell({ notifications, onSelect, labels = {}, footer, className }: NotificationBellProps) {\n  const unread = notifications.filter((n) => n.unread).length;\n  const name = labels.trigger ?? \"Notifications\";\n  const spoken = unread > 0 ? `${name}, ${(labels.unread ?? ((n) => `${n} unread`))(unread)}` : name;\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton aria-label={spoken} variant=\"outline\" className={cn(NOTIFICATION_BELL_TRIGGER, className)}>\n          <UiIcon name=\"bell\" />\n          {unread > 0 && (\n            <span data-slot=\"notification-dot\" aria-hidden className={NOTIFICATION_DOT} />\n          )}\n        </IconButton>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className={NOTIFICATION_BELL_CONTENT}>\n        {notifications.length === 0 ? (\n          <p className={NOTIFICATION_BELL_EMPTY}>{labels.empty ?? \"No notifications\"}</p>\n        ) : (\n          <ul className={NOTIFICATION_BELL_LIST}>\n            {notifications.map((n) => (\n              <li key={n.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => onSelect?.(n.id)}\n                  className={NOTIFICATION_BELL_ITEM}\n                >\n                  <span\n                    aria-hidden\n                    className={cn(\n                      NOTIFICATION_BELL_ITEM_DOT,\n                      n.unread ? NOTIFICATION_BELL_ITEM_DOT_UNREAD : NOTIFICATION_BELL_ITEM_DOT_READ,\n                    )}\n                  />\n                  <span className={NOTIFICATION_BELL_ITEM_BODY}>\n                    <span className={cn(NOTIFICATION_BELL_ITEM_TITLE, n.unread && NOTIFICATION_BELL_ITEM_TITLE_UNREAD)}>{n.title}</span>\n                    {n.description != null && <span className={NOTIFICATION_BELL_ITEM_DESCRIPTION}>{n.description}</span>}\n                  </span>\n                  {n.time != null && <span className={NOTIFICATION_BELL_ITEM_TIME}>{n.time}</span>}\n                </button>\n              </li>\n            ))}\n          </ul>\n        )}\n        {footer != null && <div className={NOTIFICATION_BELL_FOOTER}>{footer}</div>}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface HeaderSearchProps extends React.ComponentProps<\"button\"> {\n  placeholder?: string;\n  /** The shortcut hint at the end. Default: `⌘K` on Apple platforms, `Ctrl K` elsewhere. */\n  shortcut?: string;\n}\n\nconst APPLE = /Mac|iPhone|iPad|iPod/;\n\n// Read after mount, so the server render and the first client render agree.\nfunction usePlatformShortcut(): string {\n  const [shortcut, setShortcut] = React.useState(\"Ctrl K\");\n  React.useEffect(() => {\n    const nav = navigator as Navigator & { userAgentData?: { platform?: string } };\n    if (APPLE.test(nav.userAgentData?.platform ?? nav.platform ?? \"\")) setShortcut(\"⌘K\");\n  }, []);\n  return shortcut;\n}\n\n/** A button dressed as the search field; it opens the palette rather than taking input. */\nexport function HeaderSearch({\n  placeholder = \"Search or jump to…\",\n  shortcut,\n  className,\n  ...props\n}: HeaderSearchProps) {\n  const platformShortcut = usePlatformShortcut();\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"header-search\"\n      className={cn(HEADER_SEARCH_BASE, className)}\n      {...props}\n    >\n      <UiIcon name=\"search\" />\n      <span className={HEADER_SEARCH_PLACEHOLDER}>{placeholder}</span>\n      <Kbd>{shortcut ?? platformShortcut}</Kbd>\n    </button>\n  );\n}\n"],"mappings":";AA8EI,mBAEE,KAFF;AA5EJ,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,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,WAAW;AACpB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,eAAe;AACxB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAqBvB,MAAM,MAAgC,EAAE,OAAO,YAAY,UAAU,MAAM;AAGpE,SAAS,cAAc;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,OAAO,GAAG,qBAAqB,WAAW,4BAA4B,SAAS;AACrF,QAAM,OACJ,iCACG;AAAA;AAAA,IACD,oBAAC,UAAK,WAAW,sBAAuB,iBAAM;AAAA,IAC9C;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,oBAAC,YAAS,WAAW,yBAAyB;AAAA,QACxD,WAAW;AAAA,QAEX,8BAAC,UAAK,WAAW,GAAG,uBAAuB,yBAAyB,IAAI,CAAC,GACtE,qBAAW,SAAY,QAAQ,oBAAC,kBAAe,OAAO,QAAQ,QAAgB,SAAkB,GACnG;AAAA;AAAA,IACF;AAAA,IACC,WAAW,oBAAC,UAAO,MAAK,gBAAe,WAAW,wBAAwB;AAAA,KAC7E;AAEF,MAAI,CAAC,SAAS;AACZ,WACE,oBAAC,SAAI,aAAU,kBAAiB,WAAW,MAAO,GAAG,OAClD,gBACH;AAAA,EAEJ;AACA,SACE,oBAAC,YAAO,MAAK,UAAS,aAAU,kBAAiB,WAAW,MAAM,SAAkB,UAAqB,GAAG,OACzG,gBACH;AAEJ;AA8BO,SAAS,iBAAiB,EAAE,eAAe,UAAU,SAAS,CAAC,GAAG,QAAQ,UAAU,GAA0B;AACnH,QAAM,SAAS,cAAc,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE;AACrD,QAAM,OAAO,OAAO,WAAW;AAC/B,QAAM,SAAS,SAAS,IAAI,GAAG,IAAI,MAAM,OAAO,WAAW,CAAC,MAAM,GAAG,CAAC,YAAY,MAAM,CAAC,KAAK;AAC9F,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB,+BAAC,cAAW,cAAY,QAAQ,SAAQ,WAAU,WAAW,GAAG,2BAA2B,SAAS,GAClG;AAAA,0BAAC,UAAO,MAAK,QAAO;AAAA,MACnB,SAAS,KACR,oBAAC,UAAK,aAAU,oBAAmB,eAAW,MAAC,WAAW,kBAAkB;AAAA,OAEhF,GACF;AAAA,IACA,qBAAC,kBAAe,OAAM,OAAM,WAAW,2BACpC;AAAA,oBAAc,WAAW,IACxB,oBAAC,OAAE,WAAW,yBAA0B,iBAAO,SAAS,oBAAmB,IAE3E,oBAAC,QAAG,WAAW,wBACZ,wBAAc,IAAI,CAAC,MAClB,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM,WAAW,EAAE,EAAE;AAAA,UAC9B,WAAW;AAAA,UAEX;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAW;AAAA,kBACT;AAAA,kBACA,EAAE,SAAS,oCAAoC;AAAA,gBACjD;AAAA;AAAA,YACF;AAAA,YACA,qBAAC,UAAK,WAAW,6BACf;AAAA,kCAAC,UAAK,WAAW,GAAG,8BAA8B,EAAE,UAAU,mCAAmC,GAAI,YAAE,OAAM;AAAA,cAC5G,EAAE,eAAe,QAAQ,oBAAC,UAAK,WAAW,oCAAqC,YAAE,aAAY;AAAA,eAChG;AAAA,YACC,EAAE,QAAQ,QAAQ,oBAAC,UAAK,WAAW,6BAA8B,YAAE,MAAK;AAAA;AAAA;AAAA,MAC3E,KAlBO,EAAE,EAmBX,CACD,GACH;AAAA,MAED,UAAU,QAAQ,oBAAC,SAAI,WAAW,0BAA2B,kBAAO;AAAA,OACvE;AAAA,KACF;AAEJ;AAQA,MAAM,QAAQ;AAGd,SAAS,sBAA8B;AACrC,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,QAAQ;AACvD,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM;AACZ,QAAI,MAAM,KAAK,IAAI,eAAe,YAAY,IAAI,YAAY,EAAE,EAAG,aAAY,SAAI;AAAA,EACrF,GAAG,CAAC,CAAC;AACL,SAAO;AACT;AAGO,SAAS,aAAa;AAAA,EAC3B,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,mBAAmB,oBAAoB;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAO,MAAK,UAAS;AAAA,QACtB,oBAAC,UAAK,WAAW,2BAA4B,uBAAY;AAAA,QACzD,oBAAC,OAAK,sBAAY,kBAAiB;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/shell/header-controls.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  HEADER_BALANCE_BASE,\n  HEADER_BALANCE_CHEVRON,\n  HEADER_BALANCE_FIGURE,\n  HEADER_BALANCE_INTERACTIVE,\n  HEADER_BALANCE_LABEL,\n  HEADER_BALANCE_SETTLED,\n  HEADER_BALANCE_SKELETON,\n  HEADER_SEARCH_BASE,\n  HEADER_SEARCH_PLACEHOLDER,\n  NOTIFICATION_BELL_CONTENT,\n  NOTIFICATION_BELL_EMPTY,\n  NOTIFICATION_BELL_FOOTER,\n  NOTIFICATION_BELL_ITEM,\n  NOTIFICATION_BELL_ITEM_BODY,\n  NOTIFICATION_BELL_ITEM_DESCRIPTION,\n  NOTIFICATION_BELL_ITEM_DOT,\n  NOTIFICATION_BELL_ITEM_DOT_READ,\n  NOTIFICATION_BELL_ITEM_DOT_UNREAD,\n  NOTIFICATION_BELL_ITEM_TIME,\n  NOTIFICATION_BELL_ITEM_TITLE,\n  NOTIFICATION_BELL_ITEM_TITLE_UNREAD,\n  NOTIFICATION_BELL_LIST,\n  NOTIFICATION_BELL_TRIGGER,\n  NOTIFICATION_DOT,\n} from \"../../generated/header-controls\";\nimport { toneClasses, type Tone } from \"../../generated/tone\";\nimport { AnimatedNumber } from \"../derived/animated-number\";\nimport { IconButton } from \"../derived/icon-button\";\nimport { Kbd } from \"../atomic/kbd\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../atomic/popover\";\nimport { Settled } from \"./settled\";\nimport { Skeleton } from \"../atomic/skeleton\";\nimport { UiIcon } from \"../../icons/ui-icons\";\nimport * as copy from \"../../generated/copy\";\n\nexport interface HeaderBalanceProps extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  /** Only meaningful with `onClick`. */\n  disabled?: boolean;\n  label?: React.ReactNode;\n  /** The figure, already formatted: \"$0.00\". Ignored when `amount` is given. */\n  value?: React.ReactNode;\n  /** The figure as a number: it rolls to each new amount, formatted by `format` and `locales`. */\n  amount?: number;\n  /** Formatting for `amount`. Default: USD currency. */\n  format?: Intl.NumberFormatOptions;\n  locales?: Intl.LocalesArgument;\n  /** True until the balance is known; the figure then reveals in place of the skeleton. */\n  loading?: boolean;\n  /** A glyph before the label. */\n  icon?: React.ReactNode;\n  /** `warn` colours the figure as a low-funds signal. */\n  tone?: Tone;\n}\n\nconst USD: Intl.NumberFormatOptions = { style: \"currency\", currency: \"USD\" };\n\n/** \"Balance: $0.00\" in the header; a button only when given `onClick`. */\nexport function HeaderBalance({\n  label = copy.HEADER_BALANCE,\n  value,\n  amount,\n  format = USD,\n  locales,\n  loading = false,\n  icon,\n  tone = \"neutral\",\n  onClick,\n  disabled,\n  className,\n  ...props\n}: HeaderBalanceProps) {\n  const face = cn(HEADER_BALANCE_BASE, toneClasses[tone], onClick && HEADER_BALANCE_INTERACTIVE, className);\n  const body = (\n    <>\n      {icon}\n      <span className={HEADER_BALANCE_LABEL}>{label}</span>\n      <Settled\n        loading={loading}\n        skeleton={<Skeleton className={HEADER_BALANCE_SKELETON} />}\n        className={HEADER_BALANCE_SETTLED}\n      >\n        <span className={HEADER_BALANCE_FIGURE}>\n          {amount === undefined ? value : <AnimatedNumber value={amount} format={format} locales={locales} />}\n        </span>\n      </Settled>\n      {onClick && <UiIcon name=\"chevron-down\" className={HEADER_BALANCE_CHEVRON} />}\n    </>\n  );\n  if (!onClick) {\n    return (\n      <div data-slot=\"header-balance\" className={face} {...props}>\n        {body}\n      </div>\n    );\n  }\n  return (\n    <button type=\"button\" data-slot=\"header-balance\" className={face} onClick={onClick} disabled={disabled} {...props}>\n      {body}\n    </button>\n  );\n}\n\nexport interface HeaderNotification {\n  id: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Already formatted: \"2m ago\". */\n  time?: React.ReactNode;\n  unread?: boolean;\n}\n\nexport interface NotificationBellLabels {\n  /** The bell's name. Default `\"Notifications\"`. */\n  trigger?: string;\n  /** Spoken after the name when something is unread; gets the count. Default `\"{n} unread\"`. */\n  unread?: (count: number) => string;\n  /** Default `\"No notifications\"`. */\n  empty?: string;\n}\n\nexport interface NotificationBellProps {\n  notifications: readonly HeaderNotification[];\n  onSelect?: (id: string) => void;\n  labels?: NotificationBellLabels;\n  /** Under the list: \"View all\". */\n  footer?: React.ReactNode;\n  className?: string;\n}\n\n/** The bell with an unread dot; the list opens in a popover. */\nexport function NotificationBell({ notifications, onSelect, labels = {}, footer, className }: NotificationBellProps) {\n  const unread = notifications.filter((n) => n.unread).length;\n  const name = labels.trigger ?? copy.NOTIFICATION_BELL_TRIGGER;\n  const spoken = unread > 0 ? `${name}, ${(labels.unread ?? ((n) => `${n} unread`))(unread)}` : name;\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton aria-label={spoken} variant=\"outline\" className={cn(NOTIFICATION_BELL_TRIGGER, className)}>\n          <UiIcon name=\"bell\" />\n          {unread > 0 && (\n            <span data-slot=\"notification-dot\" aria-hidden className={NOTIFICATION_DOT} />\n          )}\n        </IconButton>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className={NOTIFICATION_BELL_CONTENT}>\n        {notifications.length === 0 ? (\n          <p className={NOTIFICATION_BELL_EMPTY}>{labels.empty ?? copy.NOTIFICATION_BELL_EMPTY}</p>\n        ) : (\n          <ul className={NOTIFICATION_BELL_LIST}>\n            {notifications.map((n) => (\n              <li key={n.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => onSelect?.(n.id)}\n                  className={NOTIFICATION_BELL_ITEM}\n                >\n                  <span\n                    aria-hidden\n                    className={cn(\n                      NOTIFICATION_BELL_ITEM_DOT,\n                      n.unread ? NOTIFICATION_BELL_ITEM_DOT_UNREAD : NOTIFICATION_BELL_ITEM_DOT_READ,\n                    )}\n                  />\n                  <span className={NOTIFICATION_BELL_ITEM_BODY}>\n                    <span className={cn(NOTIFICATION_BELL_ITEM_TITLE, n.unread && NOTIFICATION_BELL_ITEM_TITLE_UNREAD)}>{n.title}</span>\n                    {n.description != null && <span className={NOTIFICATION_BELL_ITEM_DESCRIPTION}>{n.description}</span>}\n                  </span>\n                  {n.time != null && <span className={NOTIFICATION_BELL_ITEM_TIME}>{n.time}</span>}\n                </button>\n              </li>\n            ))}\n          </ul>\n        )}\n        {footer != null && <div className={NOTIFICATION_BELL_FOOTER}>{footer}</div>}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface HeaderSearchProps extends React.ComponentProps<\"button\"> {\n  placeholder?: string;\n  /** The shortcut hint at the end. Default: `⌘K` on Apple platforms, `Ctrl K` elsewhere. */\n  shortcut?: string;\n}\n\nconst APPLE = /Mac|iPhone|iPad|iPod/;\n\n/** Whether ⌘ is the modifier: read after mount, so the server render and the first client render agree. */\nexport function useAppleKeys(): boolean {\n  const [apple, setApple] = React.useState(false);\n  React.useEffect(() => {\n    const nav = navigator as Navigator & { userAgentData?: { platform?: string } };\n    setApple(APPLE.test(nav.userAgentData?.platform ?? nav.platform ?? \"\"));\n  }, []);\n  return apple;\n}\n\n/** A button dressed as the search field; it opens the palette rather than taking input. */\nexport function HeaderSearch({\n  placeholder = copy.HEADER_SEARCH,\n  shortcut,\n  className,\n  ...props\n}: HeaderSearchProps) {\n  const platformShortcut = useAppleKeys() ? copy.COMMAND_K : copy.CTRL_K;\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"header-search\"\n      className={cn(HEADER_SEARCH_BASE, className)}\n      {...props}\n    >\n      <UiIcon name=\"search\" />\n      <span className={HEADER_SEARCH_PLACEHOLDER}>{placeholder}</span>\n      <Kbd>{shortcut ?? platformShortcut}</Kbd>\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/shell/hotbar.js

@@ -0,0 +1,158 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { toneClasses } from "../../generated/tone.js";
+import { iconShapes } from "../../icons/icon-shapes.js";
+import { Button } from "../atomic/button.js";
+import { Checkbox } from "../atomic/checkbox.js";
+import { Kbd } from "../atomic/kbd.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../atomic/popover.js";
+import { useAppleKeys } from "./header-controls.js";
+import { TriangleAlertIcon } from "./shell-icons.js";
+function parseShortcut(shortcut) {
+  const mod = shortcut.startsWith("mod+");
+  const key = mod ? shortcut.slice(4) : shortcut;
+  return { mod, key, code: /\d/.test(key) ? `Digit${key}` : `Key${key}` };
+}
+const STORAGE_KEY = "ev-hotbar";
+const NO_OVERRIDES = {};
+let snapshot = { raw: null, value: NO_OVERRIDES };
+const listeners = /* @__PURE__ */ new Set();
+function readOverrides() {
+  const raw = localStorage.getItem(STORAGE_KEY);
+  if (raw === snapshot.raw) return snapshot.value;
+  const value = raw === null ? NO_OVERRIDES : JSON.parse(raw);
+  if (typeof value !== "object" || value === null || Array.isArray(value) || Object.values(value).some((v) => typeof v !== "boolean"))
+    throw new Error(`localStorage["${STORAGE_KEY}"] is not an {actionId: boolean} map: ${raw}`);
+  snapshot = { raw, value };
+  return snapshot.value;
+}
+function writeOverrides(next) {
+  if (Object.keys(next).length === 0) localStorage.removeItem(STORAGE_KEY);
+  else localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+  listeners.forEach((l) => l());
+}
+function subscribeOverrides(listener) {
+  const onStorage = (e) => {
+    if (e.key === STORAGE_KEY || e.key === null) listener();
+  };
+  listeners.add(listener);
+  window.addEventListener("storage", onStorage);
+  return () => {
+    listeners.delete(listener);
+    window.removeEventListener("storage", onStorage);
+  };
+}
+const EDITABLE = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
+function Hotbar({ actions, status, takeover, labels = {}, className, ...props }) {
+  const parsed = React.useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    const codes = /* @__PURE__ */ new Set();
+    return actions.map((action) => {
+      if (ids.has(action.id)) throw new Error(`Hotbar: two actions have the id "${action.id}"`);
+      ids.add(action.id);
+      if (action.shortcut === void 0) return { action, shortcut: void 0 };
+      const shortcut = parseShortcut(action.shortcut);
+      const chord = `${shortcut.mod}:${shortcut.code}`;
+      if (codes.has(chord)) throw new Error(`Hotbar: two actions are bound to ${action.shortcut}`);
+      codes.add(chord);
+      return { action, shortcut };
+    });
+  }, [actions]);
+  const latest = React.useRef(parsed);
+  React.useEffect(() => {
+    latest.current = parsed;
+  });
+  React.useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.defaultPrevented || e.altKey || e.shiftKey) return;
+      const mod = e.metaKey || e.ctrlKey;
+      const hit = latest.current.find(({ shortcut }) => shortcut?.code === e.code && shortcut.mod === mod);
+      if (hit === void 0) return;
+      if (!mod && e.target instanceof Element && e.target.closest(EDITABLE)) return;
+      e.preventDefault();
+      if (!e.repeat) hit.action.onSelect();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+  const overrides = React.useSyncExternalStore(subscribeOverrides, readOverrides, () => NO_OVERRIDES);
+  const isPinned = (action) => overrides[action.id] ?? action.pinned ?? true;
+  const setPinned = (action, pinned) => {
+    const next = { ...overrides };
+    delete next[action.id];
+    if (pinned !== (action.pinned ?? true)) next[action.id] = pinned;
+    writeOverrides(next);
+  };
+  const apple = useAppleKeys();
+  const kbd = (s) => s.mod ? apple ? `\u2318${s.key}` : `Ctrl ${s.key}` : s.key;
+  const [customizing, setCustomizing] = React.useState(false);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "data-slot": "hotbar",
+      "aria-label": labels.region ?? "Hotbar",
+      className: cn(
+        "@container border-t border-border-subtle bg-background",
+        takeover && [toneClasses[takeover.tone], "border-(color:--tone-edge) bg-[image:linear-gradient(var(--tone-wash),var(--tone-wash))]"],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-(--control-h-touch) items-center gap-2 overflow-x-auto px-3 @5xl:h-(--control-h) @5xl:gap-1.5 @5xl:overflow-visible", children: [
+        takeover ? /* @__PURE__ */ jsxs("div", { "data-slot": "hotbar-takeover", role: "alert", className: "flex min-w-0 items-center gap-2 text-body-s font-medium text-(color:--tone-ink)", children: [
+          /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: takeover.message }),
+          takeover.action
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          parsed.filter(({ action }) => isPinned(action)).map(({ action, shortcut }) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-slot": "hotbar-action",
+              "aria-pressed": action.pressed,
+              onClick: action.onSelect,
+              className: cn(ITEM, action.pressed && PRESSED),
+              children: [
+                /* @__PURE__ */ jsx(action.icon, { className: "size-4 shrink-0" }),
+                action.label,
+                shortcut && /* @__PURE__ */ jsx(Kbd, { className: "hidden @5xl:inline-flex", children: kbd(shortcut) })
+              ]
+            },
+            action.id
+          )),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "hidden h-4 w-px shrink-0 bg-border @5xl:block" }),
+          /* @__PURE__ */ jsxs(Popover, { open: customizing, onOpenChange: setCustomizing, children: [
+            /* @__PURE__ */ jsxs(PopoverTrigger, { type: "button", "data-slot": "hotbar-customize", className: cn(ITEM, "@5xl:w-(--control-h-2xs) @5xl:justify-center @5xl:px-0"), children: [
+              /* @__PURE__ */ jsx("svg", { className: "size-4 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: iconShapes("sliders-horizontal") }),
+              /* @__PURE__ */ jsx("span", { className: "@5xl:sr-only", children: labels.customize ?? "Customize" })
+            ] }),
+            /* @__PURE__ */ jsxs(PopoverContent, { side: "top", align: "start", className: "w-80 p-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 px-3 pt-3 pb-2", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-body-l font-medium", children: labels.title ?? "Customize hotbar" }),
+                /* @__PURE__ */ jsx("p", { className: "text-caption text-ink-soft", children: labels.description ?? "Pinned actions show in the bar and in the mobile chip row." })
+              ] }),
+              /* @__PURE__ */ jsx("ul", { className: "flex flex-col px-1 pb-1", children: parsed.map(({ action, shortcut }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { className: "flex h-(--control-h-sm) cursor-pointer items-center gap-2.5 rounded-control px-2 text-body text-ink-mid hover:bg-hover", children: [
+                /* @__PURE__ */ jsx(Checkbox, { checked: isPinned(action), onCheckedChange: (pinned) => setPinned(action, pinned) }),
+                /* @__PURE__ */ jsx(action.icon, { className: "size-4 shrink-0" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: action.label }),
+                shortcut && /* @__PURE__ */ jsx(Kbd, { children: kbd(shortcut) })
+              ] }) }, action.id)) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t border-border px-3 py-2", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => writeOverrides(NO_OVERRIDES), children: labels.reset ?? "Reset to default" }),
+                /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => setCustomizing(false), children: labels.done ?? "Done" })
+              ] })
+            ] })
+          ] })
+        ] }),
+        status != null && /* @__PURE__ */ jsx("div", { "data-slot": "hotbar-status", className: "ml-auto hidden shrink-0 items-center @5xl:flex", children: status })
+      ] })
+    }
+  );
+}
+const ITEM = "inline-flex h-(--control-h-xs) shrink-0 items-center gap-1.5 whitespace-nowrap rounded-chip border border-border bg-secondary pr-3 pl-2 text-body-s text-ink-mid transition-colors outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-ring @5xl:h-(--control-h-2xs) @5xl:rounded-control @5xl:border-transparent @5xl:bg-transparent @5xl:px-2 @5xl:hover:bg-hover";
+const PRESSED = `${toneClasses.primary} border-(color:--tone-edge) bg-(color:--tone-fill) text-(color:--tone-ink) hover:text-(color:--tone-ink) @5xl:border-(color:--tone-edge) @5xl:bg-(color:--tone-fill)`;
+export {
+  Hotbar
+};
+//# sourceMappingURL=hotbar.js.map