@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/dist/components/features/command-box.js

@@ -1,9 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
 import { cn } from "../../utils/cn.js";
 import { Copy02Icon } from "../icons-v2-generated/documents/copy-02-icon.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/index.js";
 import { FadePreview } from "../ui/fade-preview.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 const lineClampClasses = {
   1: "line-clamp-1",
   2: "line-clamp-2",
@@ -12,6 +15,15 @@ const lineClampClasses = {
   5: "line-clamp-5",
   6: "line-clamp-6"
 };
+const COMMAND_BOX_CLASS = "flex flex-col gap-2";
+const COMMAND_BOX_TITLE_CLASS = "text-ods-text-primary text-h4";
+const COMMAND_BOX_FRAME_CLASS = "rounded-[6px] border border-ods-border bg-ods-bg p-4";
+const COMMAND_BOX_COPY_ROW_CLASS = "flex items-start gap-4";
+const COMMAND_BOX_COPY_BUTTON_CLASS = "shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus";
+const COMMAND_BOX_ACTIONS_CLASS = "mt-4 flex flex-col gap-3 content-md:flex-row content-md:justify-end";
+const COMMAND_BOX_ACTION_CLASS = "w-full content-md:w-auto";
+const fixedCommandHeight = (visibleLines) => `calc(${visibleLines} * var(--font-line-space-h6-caption))`;
+const COMMAND_TOGGLE_LABELS = { more: "Show all", less: "Show less" };
 function CommandBox({
   command,
   title,
@@ -25,6 +37,24 @@ function CommandBox({
   copyAriaLabel = "Copy command"
 }) {
   const fixedHeight = visibleLines !== void 0 && visibleLines > 0;
+  if (useLoadingScope()) {
+    return /* @__PURE__ */ jsx(
+      CommandBoxSkeleton,
+      {
+        title,
+        lines: !fixedHeight && maxLines > 0 ? maxLines : void 0,
+        visibleLines: fixedHeight ? visibleLines : void 0,
+        primaryActionLabel: primaryAction?.label,
+        primaryActionIcon: primaryAction?.icon,
+        primaryActionVariant: primaryAction?.variant,
+        secondaryActionLabel: secondaryAction?.label,
+        secondaryActionIcon: secondaryAction?.icon,
+        secondaryActionVariant: secondaryAction?.variant,
+        showCopy: Boolean(onCopy),
+        className
+      }
+    );
+  }
   const lineClampClass = !fixedHeight && maxLines > 0 ? lineClampClasses[maxLines] : void 0;
   const text = /* @__PURE__ */ jsx(
     "div",
@@ -42,15 +72,15 @@ function CommandBox({
     FadePreview,
     {
       fixedHeight: true,
-      collapsedHeight: `calc(${visibleLines} * var(--font-line-space-h6-caption))`,
-      labels: { more: "Show all", less: "Show less" },
+      collapsedHeight: fixedCommandHeight(visibleLines),
+      labels: COMMAND_TOGGLE_LABELS,
       children: text
     }
   ) }) : text;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
-    title && /* @__PURE__ */ jsx("div", { className: "text-ods-text-primary text-h4", children: title }),
-    /* @__PURE__ */ jsxs("div", { className: "rounded-[6px] border border-ods-border bg-ods-bg p-4", children: [
-      onCopy ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(COMMAND_BOX_CLASS, className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: COMMAND_BOX_TITLE_CLASS, children: title }),
+    /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_FRAME_CLASS, children: [
+      onCopy ? /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_COPY_ROW_CLASS, children: [
         commandText,
         /* @__PURE__ */ jsx(
           "button",
@@ -58,12 +88,12 @@ function CommandBox({
             type: "button",
             onClick: onCopy,
             "aria-label": copyAriaLabel,
-            className: "shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
+            className: COMMAND_BOX_COPY_BUTTON_CLASS,
             children: /* @__PURE__ */ jsx(Copy02Icon, { className: "h-5 w-5" })
           }
         )
       ] }) : commandText,
-      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-col gap-3 content-md:flex-row content-md:justify-end", children: [
+      (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_ACTIONS_CLASS, children: [
         secondaryAction && /* @__PURE__ */ jsx(
           Button,
           {
@@ -72,7 +102,7 @@ function CommandBox({
             onClick: secondaryAction.onClick,
             disabled: secondaryAction.disabled,
             loading: secondaryAction.loading,
-            className: "w-full content-md:w-auto",
+            className: COMMAND_BOX_ACTION_CLASS,
             children: secondaryAction.label
           }
         ),
@@ -84,7 +114,7 @@ function CommandBox({
             onClick: primaryAction.onClick,
             disabled: primaryAction.disabled,
             loading: primaryAction.loading,
-            className: "w-full content-md:w-auto",
+            className: COMMAND_BOX_ACTION_CLASS,
             children: primaryAction.label
           }
         )
@@ -92,6 +122,68 @@ function CommandBox({
     ] })
   ] });
 }
+function CommandBoxSkeleton({
+  title,
+  lines = 2,
+  visibleLines,
+  primaryActionLabel,
+  primaryActionIcon,
+  primaryActionVariant,
+  secondaryActionLabel,
+  secondaryActionIcon,
+  secondaryActionVariant,
+  showCopy = false,
+  className
+}) {
+  const commandLines = visibleLines !== void 0 && visibleLines > 0 ? /* @__PURE__ */ jsxs("div", { className: cn(showCopy && "min-w-0 flex-1"), children: [
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "code", lines: visibleLines }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        size: "compact",
+        noPaddingX: true,
+        tabIndex: -1,
+        rightIcon: /* @__PURE__ */ jsx(ChevronDown, {}),
+        className: "invisible mt-[var(--spacing-system-mf)]",
+        children: COMMAND_TOGGLE_LABELS.more
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx(TextLineSkeleton, { type: "code", lines: Math.max(lines, 1), className: cn(showCopy && "min-w-0 flex-1") });
+  return /* @__PURE__ */ jsxs("div", { className: cn(COMMAND_BOX_CLASS, className), "aria-hidden": true, inert: true, children: [
+    title && /* @__PURE__ */ jsx("div", { className: COMMAND_BOX_TITLE_CLASS, children: title }),
+    /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_FRAME_CLASS, children: [
+      showCopy ? /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_COPY_ROW_CLASS, children: [
+        commandLines,
+        /* @__PURE__ */ jsx("span", { className: COMMAND_BOX_COPY_BUTTON_CLASS, children: /* @__PURE__ */ jsx(Copy02Icon, { className: "h-5 w-5" }) })
+      ] }) : commandLines,
+      (primaryActionLabel || secondaryActionLabel) && /* @__PURE__ */ jsxs("div", { className: COMMAND_BOX_ACTIONS_CLASS, children: [
+        secondaryActionLabel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: secondaryActionVariant || "outline",
+            leftIcon: secondaryActionIcon,
+            className: COMMAND_BOX_ACTION_CLASS,
+            tabIndex: -1,
+            children: secondaryActionLabel
+          }
+        ),
+        primaryActionLabel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: primaryActionVariant || "accent",
+            leftIcon: primaryActionIcon,
+            className: COMMAND_BOX_ACTION_CLASS,
+            tabIndex: -1,
+            children: primaryActionLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 export {
-  CommandBox
+  CommandBox,
+  CommandBoxSkeleton
 };

package/dist/components/features/conversation-card.d.ts

@@ -1,4 +1,22 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+/**
+ * The lines a part (the outcome, the context "Today") takes at least, on a narrow card (below `content-md`) and from
+ * `content-md`. A typical outcome or status quo is a sentence or two: four lines in a phone's card and three in a wide
+ * one. A part is never cut: a longer one grows its card (the cards of a row, or of a carousel, stretch to the tallest).
+ * A host that lists its own cards (a curated row) may state the counts its list needs (`lines`), so every card of the
+ * row keeps the tallest card's lines and the skeleton draws them. The counts reach the class through CSS variables
+ * (a class built at runtime emits no CSS); the skeleton draws the same counts.
+ */
+export interface ConversationCardPartLines {
+    phone: number;
+    wide: number;
+}
+export interface ConversationCardLines {
+    context?: ConversationCardPartLines;
+    outcome?: ConversationCardPartLines;
+}
+/** The speakers' avatar size the skeleton draws when the card draws it in a loading scope. */
+export declare const CONVERSATION_CARD_AVATAR_PX = 32;
 export interface ConversationCardSpeaker {
     /** Rendered as given (an avatar, an agent mark). */
     avatar: ReactNode;
@@ -17,10 +35,18 @@ export interface ConversationCardProps {
     outcome: string;
     /** Beside the outcome (the person who approved it). */
     outcomeAside?: ReactNode;
-    /** The footer's question ("Your part"). */
-    footerLabel: string;
+    /**
+     * Between the request and the answer: how it is today, before the agent
+     * ("Today" and a line). A pain card's status quo; omitted on a request card.
+     */
+    context?: {
+        label: string;
+        text: string;
+    };
+    /** The footer's question ("Your part"). Omitted: no footer. */
+    footerLabel?: string;
     /** The footer's answer ("Nothing", "One tap"). */
-    footerValue: string;
+    footerValue?: string;
     /** `attention` paints the answer in the warning colour: it needs a person. */
     footerTone?: 'default' | 'attention';
     /**
@@ -29,6 +55,18 @@ export interface ConversationCardProps {
      * agent, never a colour.
      */
     agent?: string | null;
+    /**
+     * The card is a toggle the reader picks ("this sounds like me"): one button
+     * with `aria-pressed`, named by the request, stretched over the whole card so
+     * a tap anywhere toggles it; a mark in its corner says whether it is picked,
+     * and a picked card takes the accent ring.
+     */
+    selection?: {
+        pressed: boolean;
+        onToggle: () => void;
+    };
+    /** The lines the context and the outcome keep at least (default four on a phone, three wide). */
+    lines?: ConversationCardLines;
     className?: string;
 }
 /**
@@ -36,5 +74,32 @@ export interface ConversationCardProps {
  * and what they said, who answered and the result (a command block with its
  * check), then one line that sums up the reader's own part in it.
  */
-export declare function ConversationCard({ requester, request, responder, outcome, outcomeAside, footerLabel, footerValue, footerTone, agent, className, }: ConversationCardProps): import("react").JSX.Element;
+export declare function ConversationCard({ requester, request, responder, outcome, outcomeAside, footerLabel, footerValue, footerTone, agent, selection, context, lines, className, }: ConversationCardProps): import("react").JSX.Element;
+/**
+ * The card while it loads: the SAME frame, then each part at the number of
+ * lines the loaded card keeps for it (the request's two, the context's
+ * `lines`, four on a phone and three wide by default), so a loaded card takes the skeleton's place without
+ * moving the page. Pass the parts the loaded card will have.
+ */
+export declare function ConversationCardSkeleton({ avatarPx, context, requesterMeta, responderMeta, footer, footerLabel, lines, label, announce, className, }: {
+    /** What a screen reader hears while it loads. */
+    label?: string;
+    /** `false` inside another loading region (a row of cards): only the outermost region announces. */
+    announce?: boolean;
+    /** The speakers' avatar size, as the host draws it. */
+    avatarPx?: number;
+    /** The footer's question when the page states it ("Your part"): drawn for real. */
+    footerLabel?: string;
+    /** The loaded card has a context part ("Today"). */
+    context?: boolean;
+    /** The asker's name carries a meta line (their role); a string is static copy, drawn for real. */
+    requesterMeta?: boolean | string;
+    /** The answerer's name carries a meta line ("What changes"); a string is static copy, drawn for real. */
+    responderMeta?: boolean | string;
+    /** The loaded card has a footer. */
+    footer?: boolean;
+    /** The lines the loaded card keeps for its context and outcome (`ConversationCardProps.lines`). */
+    lines?: ConversationCardLines;
+    className?: string;
+}): import("react").JSX.Element;
 //# sourceMappingURL=conversation-card.d.ts.map

package/dist/components/features/conversation-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-card.d.ts","sourceRoot":"","sources":["../../../src/components/features/conversation-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,uBAAuB;IACtC,oDAAoD;IACpD,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,uBAAuB,CAAC;IACnC,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,uBAAuB,CAAC;IACnC,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,EACP,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAsB,EACtB,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,+BAwCvB"}
+{"version":3,"file":"conversation-card.d.ts","sourceRoot":"","sources":["../../../src/components/features/conversation-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAelE;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AACD,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,OAAO,CAAC,EAAE,yBAAyB,CAAC;CACrC;AA4BD,8FAA8F;AAC9F,eAAO,MAAM,2BAA2B,KAAK,CAAC;AAE9C,MAAM,WAAW,uBAAuB;IACtC,oDAAoD;IACpD,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,uBAAuB,CAAC;IACnC,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,uBAAuB,CAAC;IACnC,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,+DAA+D;IAC/D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;;;OAKG;IACH,SAAS,CAAC,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IACvD,iGAAiG;IACjG,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,OAAO,EACP,SAAS,EACT,OAAO,EACP,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAsB,EACtB,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,qBAAqB,+BAwGvB;AAeD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAsC,EACtC,OAAe,EACf,aAAqB,EACrB,aAAqB,EACrB,MAAc,EACd,WAAW,EACX,KAAK,EACL,KAAgC,EAChC,QAAe,EACf,SAAS,GACV,EAAE;IACD,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kGAAkG;IAClG,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,yGAAyG;IACzG,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,oCAAoC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mGAAmG;IACnG,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAuCA"}

package/dist/components/features/conversation-card.js

@@ -1,10 +1,38 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { cn } from "../../utils/cn.js";
+import { isOwnClick } from "../../utils/own-click.js";
 import { useAgentTint } from "../agent-identity.js";
-import { ChatTurn } from "../chat/chat-turn.js";
+import { ChatTurn, ChatTurnNameSkeleton, TURN_BODY_CLASS, TURN_ROW_CLASS } from "../chat/chat-turn.js";
 import { CheckCircleIcon } from "../icons-v2-generated/signs-and-symbols/check-circle-icon.js";
+import { CheckIcon } from "../icons-v2-generated/signs-and-symbols/check-icon.js";
+import { PlusIcon } from "../icons-v2-generated/signs-and-symbols/plus-icon.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { BUTTON_ICON_SM_SIZE, Button } from "../ui/button/button.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { SquareAvatarSkeleton } from "../ui/square-avatar.js";
 import { Tag } from "../ui/tag.js";
+const DEFAULT_PART_LINES = { phone: 4, wide: 3 };
+const PART_LINES_CLASS = "min-h-[calc(var(--cc-lines)*1lh)] content-md:min-h-[calc(var(--cc-lines-wide)*1lh)]";
+const partLines = (lines) => lines ?? DEFAULT_PART_LINES;
+const partLinesStyle = (lines) => {
+  const { phone, wide } = partLines(lines);
+  return { "--cc-lines": phone, "--cc-lines-wide": wide };
+};
+const CONTEXT_LINES_CLASS = PART_LINES_CLASS;
+const OUTCOME_LINES_CLASS = PART_LINES_CLASS;
+const CONTEXT_TEXT_CLASS = cn("m-0 text-ods-text-secondary text-h4", CONTEXT_LINES_CLASS);
+const OUTCOME_ROW_CLASS = "flex items-start gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h4";
+const OUTCOME_TEXT_CLASS = cn("m-0 min-w-0 flex-1", OUTCOME_LINES_CLASS);
+const OUTCOME_CHECK_CLASS = "flex shrink-0 items-center";
+const OUTCOME_CHECK_STYLE = { height: "1lh" };
+const CARD_FRAME_CLASS = "relative flex h-full flex-col gap-[var(--spacing-system-mf)] overflow-hidden rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)]";
+const ANSWER_BLOCK_CLASS = "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]";
+const CONTEXT_BLOCK_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-xxs)] border-ods-border border-t pt-[var(--spacing-system-sf)]";
+const FOOTER_ROW_CLASS = "mt-auto flex items-center justify-between gap-[var(--spacing-system-sf)]";
+const CONVERSATION_CARD_AVATAR_PX = 32;
 function ConversationCard({
   requester,
   request,
@@ -15,23 +43,81 @@ function ConversationCard({
   footerValue,
   footerTone = "default",
   agent,
+  selection,
+  context,
+  lines,
   className
 }) {
   const tint = useAgentTint(agent);
+  const requestId = useId();
+  if (useLoadingScope()) {
+    return /* @__PURE__ */ jsx(
+      ConversationCardSkeleton,
+      {
+        avatarPx: CONVERSATION_CARD_AVATAR_PX,
+        context: !!context,
+        requesterMeta: !!requester.meta,
+        responderMeta: !!responder.meta,
+        footer: !!footerLabel && footerValue !== void 0,
+        footerLabel,
+        lines,
+        className
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "flex h-full flex-col gap-[var(--spacing-system-mf)] overflow-hidden rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)]",
+        CARD_FRAME_CLASS,
+        selection && "cursor-pointer transition-colors hover:border-ods-border-hover",
+        selection?.pressed && "border-ods-accent ring-1 ring-ods-accent",
         className
       ),
       style: tint,
+      onClick: selection && ((event) => {
+        if (event.button !== 0 || window.getSelection()?.toString()) return;
+        if (!isOwnClick(event.target, event.currentTarget, { controls: true })) return;
+        selection.onToggle();
+      }),
       children: [
-        /* @__PURE__ */ jsx(ChatTurn, { avatar: requester.avatar, name: requester.name, meta: requester.meta, time: requester.time, children: /* @__PURE__ */ jsxs("p", { className: "m-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3", title: request, children: [
-          "\u201C",
-          request,
-          "\u201D"
-        ] }) }),
+        selection && // The toggle is a regular boxed Button in the card's corner, named by the
+        // request; a click anywhere on the card toggles it too (a pointer
+        // convenience: the Button is the control keyboards and screen readers use).
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: selection.pressed ? "accent" : "outline",
+            size: "icon-sm",
+            "aria-pressed": selection.pressed,
+            "aria-labelledby": requestId,
+            onClick: (event) => {
+              event.stopPropagation();
+              selection.onToggle();
+            },
+            className: "absolute right-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10",
+            children: selection.pressed ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(ChatTurn, { avatar: requester.avatar, name: requester.name, meta: requester.meta, time: requester.time, children: /* @__PURE__ */ jsxs(
+          "p",
+          {
+            id: requestId,
+            className: "m-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3",
+            style: selection ? { paddingRight: `calc(${BUTTON_ICON_SM_SIZE} + var(--spacing-system-xsf))` } : void 0,
+            title: request,
+            children: [
+              "\u201C",
+              request,
+              "\u201D"
+            ]
+          }
+        ) }),
+        context && /* @__PURE__ */ jsxs("div", { className: CONTEXT_BLOCK_CLASS, children: [
+          /* @__PURE__ */ jsx("span", { className: "text-ods-text-secondary text-h6", children: context.label }),
+          /* @__PURE__ */ jsx("p", { className: CONTEXT_TEXT_CLASS, style: partLinesStyle(lines?.context), children: context.text })
+        ] }),
         /* @__PURE__ */ jsx(
           ChatTurn,
           {
@@ -39,15 +125,15 @@ function ConversationCard({
             name: responder.name,
             meta: responder.meta,
             time: responder.time,
-            className: "rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]",
-            children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h4", children: [
-              /* @__PURE__ */ jsx("span", { className: "line-clamp-3 min-h-[3lh] min-w-0 flex-1", title: outcome, children: outcome }),
+            className: ANSWER_BLOCK_CLASS,
+            children: /* @__PURE__ */ jsxs("div", { className: OUTCOME_ROW_CLASS, children: [
+              /* @__PURE__ */ jsx("p", { className: OUTCOME_TEXT_CLASS, style: partLinesStyle(lines?.outcome), children: outcome }),
               outcomeAside,
-              /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] shrink-0 items-center", children: /* @__PURE__ */ jsx(CheckCircleIcon, { size: 16, className: "text-ods-success", "aria-hidden": true }) })
+              /* @__PURE__ */ jsx("span", { className: OUTCOME_CHECK_CLASS, style: OUTCOME_CHECK_STYLE, children: /* @__PURE__ */ jsx(CheckCircleIcon, { size: 16, className: "text-ods-success", "aria-hidden": true }) })
             ] })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between gap-[var(--spacing-system-sf)] text-ods-text-secondary text-h6", children: [
+        footerLabel && footerValue && /* @__PURE__ */ jsxs("div", { className: cn(FOOTER_ROW_CLASS, "text-ods-text-secondary text-h6"), children: [
           /* @__PURE__ */ jsx("span", { children: footerLabel }),
           /* @__PURE__ */ jsx(Tag, { as: "span", label: footerValue, variant: footerTone === "attention" ? "warning" : "badge" })
         ] })
@@ -55,6 +141,53 @@ function ConversationCard({
     }
   );
 }
+function TurnSkeleton({ avatarPx, meta, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: TURN_ROW_CLASS, children: [
+    /* @__PURE__ */ jsx(SquareAvatarSkeleton, { sizePx: avatarPx }),
+    /* @__PURE__ */ jsxs("div", { className: TURN_BODY_CLASS, children: [
+      /* @__PURE__ */ jsx(ChatTurnNameSkeleton, { meta, time: true }),
+      children
+    ] })
+  ] });
+}
+function ConversationCardSkeleton({
+  avatarPx = CONVERSATION_CARD_AVATAR_PX,
+  context = false,
+  requesterMeta = false,
+  responderMeta = false,
+  footer = false,
+  footerLabel,
+  lines,
+  label = "Loading a conversation",
+  announce = true,
+  className
+}) {
+  const contextLines = partLines(lines?.context);
+  const outcomeLines = partLines(lines?.outcome);
+  return /* @__PURE__ */ jsxs(LoadingRegion, { label, announce, className: cn(CARD_FRAME_CLASS, className), children: [
+    /* @__PURE__ */ jsx(TurnSkeleton, { avatarPx, meta: requesterMeta, children: /* @__PURE__ */ jsx(TextLineSkeleton, { lines: 2, type: "h3" }) }),
+    context && /* @__PURE__ */ jsxs("div", { className: CONTEXT_BLOCK_CLASS, children: [
+      /* @__PURE__ */ jsx(TextLineSkeleton, { lines: 1, type: "h6", className: "w-1/4" }),
+      /* @__PURE__ */ jsxs("p", { className: CONTEXT_TEXT_CLASS, style: partLinesStyle(contextLines), children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: contextLines.phone, type: "h4", className: "content-md:hidden" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: contextLines.wide, type: "h4", className: "hidden content-md:flex" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: ANSWER_BLOCK_CLASS, children: /* @__PURE__ */ jsx(TurnSkeleton, { avatarPx, meta: responderMeta, children: /* @__PURE__ */ jsxs("div", { className: OUTCOME_ROW_CLASS, children: [
+      /* @__PURE__ */ jsxs("p", { className: OUTCOME_TEXT_CLASS, style: partLinesStyle(outcomeLines), children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: outcomeLines.phone, type: "h4", className: "content-md:hidden" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { as: "span", lines: outcomeLines.wide, type: "h4", className: "hidden content-md:flex" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: cn(OUTCOME_CHECK_CLASS, "invisible"), style: OUTCOME_CHECK_STYLE, children: /* @__PURE__ */ jsx(CheckCircleIcon, { size: 16, "aria-hidden": true }) })
+    ] }) }) }),
+    footer && /* @__PURE__ */ jsxs("div", { className: cn(FOOTER_ROW_CLASS, "text-ods-text-secondary text-h6"), children: [
+      footerLabel ? /* @__PURE__ */ jsx("span", { children: footerLabel }) : /* @__PURE__ */ jsx(TextLineSkeleton, { lines: 1, type: "h6", className: "w-1/4" }),
+      /* @__PURE__ */ jsx(Tag, { as: "span", label: "\xA0", variant: "badge", className: "invisible" })
+    ] })
+  ] });
+}
 export {
-  ConversationCard
+  CONVERSATION_CARD_AVATAR_PX,
+  ConversationCard,
+  ConversationCardSkeleton
 };

package/dist/components/features/devices/device-selector/device-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"device-selector.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,KAAK,EAAE,mBAAmB,EAAU,MAAM,yBAAyB,CAAC;AA6B3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC9D,OAAO,EACP,OAAO,EACP,aAAa,EACb,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,qBAAqB,EACxC,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EACd,QAAgB,EAChB,sBAA6B,EAC7B,aAAa,EACb,cAAwB,EACxB,YAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,UAAU,EACV,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,eAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BA8qBxB"}
+{"version":3,"file":"device-selector.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/devices/device-selector/device-selector.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,UAAU,CAAC;AAGzD,OAAO,KAAK,EAAE,mBAAmB,EAAU,MAAM,yBAAyB,CAAC;AA6B3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,EAAE,EAC9D,OAAO,EACP,OAAO,EACP,aAAa,EACb,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,qBAAqB,EACxC,YAAY,EAAE,gBAAgB,EAC9B,cAAc,EACd,QAAgB,EAChB,sBAA6B,EAC7B,aAAa,EACb,cAAwB,EACxB,YAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,UAAU,EACV,MAAM,EACN,aAAa,EACb,qBAAqB,EACrB,eAAe,GAChB,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BA+qBxB"}

package/dist/components/features/devices/device-selector/device-selector.js

@@ -561,6 +561,7 @@ function DeviceSelector({
             TabNavigation,
             {
               tabs: assignTabs,
+              staticLabels: true,
               activeTab: activeSubTab,
               onTabChange: handleTabChange,
               className: "overflow-clip rounded-t-[6px]"

package/dist/components/features/devices/devices-panel-view.d.ts

@@ -33,7 +33,7 @@ export interface DevicesPanelViewProps<T extends DeviceRow = DeviceRow> {
      */
     loading?: boolean;
     /**
-     * The loading state announces itself, once ("Loading devices…"; the table or grid inside it stays quiet).
+     * The loading state announces itself, once ("Loading devices"; the table or grid inside it stays quiet).
      * `false` inside another loading region. Default `true`.
      */
     loadingRegion?: boolean;

package/dist/components/features/devices/devices-panel-view.js

@@ -141,7 +141,7 @@ function DevicesPanelView({
       contentClassName: "flex flex-col",
       children: [
         headerSlot,
-        loading && loadingRegion && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: "Loading devices\u2026" }),
+        loading && loadingRegion && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: "Loading devices" }),
         noOrganizations && !loading && // Core Alert restyled to the ODS warning tokens. The icon is wrapped in a
         // span so Alert's `[&>svg]` absolute-positioning rules don't apply.
         /* @__PURE__ */ jsxs(Alert, { className: "mb-[var(--spacing-system-l)] flex items-start gap-[var(--spacing-system-m)] rounded-[6px] border-0 bg-ods-warning-secondary text-ods-warning", children: [

package/dist/components/features/entity-tag-badges.d.ts

@@ -8,19 +8,44 @@ interface EntityTagBadgesProps {
      * render non-interactive even when basePath is set).
      */
     basePath?: string;
-    /** Cap visible badges; the remainder collapse into a "+N" badge. */
+    /** Cap visible badges from tablet width up (a phone shows at most `ENTITY_TAG_BADGES_PHONE_CAP`); the remainder
+     *  collapse into a "+N" badge. */
     max?: number;
+    /** In a loading state with no `max`: how many tag boxes the row draws from tablet width up (default the row's fold). */
+    skeletonCount?: number;
+    /** In a loading state with no `max`: how many tag boxes a phone's row draws (default `skeletonCount`). */
+    skeletonPhoneCount?: number;
+    /** In a loading state: a host's typical tag label width (a sizing class) where its tags run longer or shorter than
+     *  the default, so its skeleton row wraps where its typical row wraps. */
+    skeletonItemClassName?: string;
     /** Extra classes on the wrapper row. */
     className?: string;
 }
 export declare const TAG_BADGE_CLASS = "bg-ods-card border border-ods-border";
+/** How many tags a row usually shows: what its loading state draws. */
+export declare const ENTITY_TAG_BADGES_SKELETON_COUNT = 3;
 /**
- * THE single tag-badge renderer for the whole product (hub + lib). Renders the
- * OpenFrame `StatusBadge` chip skin for a flat `<entity>_tags[]` array, optionally
- * clickable (links each tag to its filtered list via `basePath`). The hub's
- * `EntityTagList` delegates here so there is exactly one tag-display design.
- * Renders nothing when there are no tags.
+ * How many tags a CAPPED row (`max`) shows on a phone, loaded and loading: one line of a phone's column (342px) holds
+ * two typical tags and the "+N" badge, while a third typical tag wraps the row to a second line. A layout fold, the
+ * same for every host; from tablet width up the row shows its `max`.
  */
-export declare function EntityTagBadges({ tags, basePath, max, className }: EntityTagBadgesProps): import("react").JSX.Element | null;
+export declare const ENTITY_TAG_BADGES_PHONE_CAP = 2;
+/**
+ * A tag row while its tags are read: `count` badge boxes of the tag badge's size (the row's fold from tablet width
+ * up), and `phoneCount` below that width when a phone's row shows fewer (or more) before it wraps. Hosts pass their
+ * row's layout fold (`<THING>_TAG_ROW_FOLD`); the default is `ENTITY_TAG_BADGES_SKELETON_COUNT`. `overflow` adds the
+ * "+N" badge a row capped by `max` draws after its tags, and a capped row's phone count defaults to the phone cap
+ * (`ENTITY_TAG_BADGES_PHONE_CAP`), as the loaded capped row shows.
+ */
+export declare function EntityTagBadgesSkeleton({ count, overflow, phoneCount, className, itemClassName, }: {
+    count?: number;
+    phoneCount?: number;
+    overflow?: boolean;
+    className?: string;
+    /** A host's typical tag label width (a sizing class on each badge, in place of the default); the row keeps the
+     *  row's own classes. */
+    itemClassName?: string;
+}): import("react").JSX.Element;
+export declare function EntityTagBadges({ tags, basePath, max, skeletonCount, skeletonPhoneCount, skeletonItemClassName, className, }: EntityTagBadgesProps): import("react").JSX.Element | null;
 export {};
 //# sourceMappingURL=entity-tag-badges.d.ts.map

package/dist/components/features/entity-tag-badges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"entity-tag-badges.d.ts","sourceRoot":"","sources":["../../../src/components/features/entity-tag-badges.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGjD,UAAU,oBAAoB;IAC5B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,eAAe,yCAAyC,CAAC;AAGtE;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,oBAAoB,sCAgCvF"}
+{"version":3,"file":"entity-tag-badges.d.ts","sourceRoot":"","sources":["../../../src/components/features/entity-tag-badges.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKjD,UAAU,oBAAoB;IAC5B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;sCACkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wHAAwH;IACxH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0GAA0G;IAC1G,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;8EAC0E;IAC1E,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,eAAO,MAAM,eAAe,yCAAyC,CAAC;AAiBtE,uEAAuE;AACvE,eAAO,MAAM,gCAAgC,IAAI,CAAC;AAUlD;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAI7C;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,KAAwC,EACxC,QAAgB,EAChB,UAA4E,EAC5E,SAAS,EACT,aAAa,GACd,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;6BACyB;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,+BA2BA;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,GAAG,EACH,aAAa,EACb,kBAAkB,EAClB,qBAAqB,EACrB,SAAS,GACV,EAAE,oBAAoB,sCA2DtB"}