@flamingo-stack/openframe-frontend-core 0.0.737 → 0.0.738

package/dist/components/tickets/index.cjs

@@ -14,11 +14,11 @@
 
 
 
-var _chunkTJQYX3QCcjs = require('../../chunk-TJQYX3QC.cjs');
-require('../../chunk-SGVQO5J6.cjs');
-require('../../chunk-4RMLAHU2.cjs');
-require('../../chunk-77SD7RXY.cjs');
-require('../../chunk-URIJ6YUG.cjs');
+var _chunk4YQNJJWMcjs = require('../../chunk-4YQNJJWM.cjs');
+require('../../chunk-R36NZTUJ.cjs');
+require('../../chunk-MTNNYSP3.cjs');
+require('../../chunk-GAF4L3JW.cjs');
+require('../../chunk-HNYLTEIS.cjs');
 require('../../chunk-HEVW75L3.cjs');
 
 
@@ -26,11 +26,11 @@ require('../../chunk-HEVW75L3.cjs');
 
 
 
-var _chunkFA2LATDMcjs = require('../../chunk-FA2LATDM.cjs');
-require('../../chunk-E2JCZU36.cjs');
-require('../../chunk-ZJNYWNCB.cjs');
+var _chunk5BKAUXLRcjs = require('../../chunk-5BKAUXLR.cjs');
+require('../../chunk-U5BRSRXA.cjs');
+require('../../chunk-FG7HTGT3.cjs');
 require('../../chunk-3HPB4H4C.cjs');
-require('../../chunk-L4ZNR5V7.cjs');
+require('../../chunk-7LTG6CJ3.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
 require('../../chunk-VA7OMDZO.cjs');
@@ -38,17 +38,17 @@ require('../../chunk-AAFW4STC.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-MGW5DO6P.cjs');
+require('../../chunk-3BBOAMWJ.cjs');
 require('../../chunk-YUMFVQIN.cjs');
 
 
 
-var _chunk4FJZ7RJDcjs = require('../../chunk-4FJZ7RJD.cjs');
-require('../../chunk-VL4JKXU2.cjs');
-require('../../chunk-ZRYKDN2J.cjs');
-require('../../chunk-HZJRERJW.cjs');
-require('../../chunk-DUXLZPMJ.cjs');
-require('../../chunk-MJGX357L.cjs');
+var _chunk4T6ETBL4cjs = require('../../chunk-4T6ETBL4.cjs');
+require('../../chunk-BRKTN6UR.cjs');
+require('../../chunk-N2CISBJJ.cjs');
+require('../../chunk-3RFQPQ7Z.cjs');
+require('../../chunk-UMO55S55.cjs');
+require('../../chunk-B27QEHYR.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1845,10 +1845,10 @@ require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-EX2GYIGW.cjs');
-require('../../chunk-EJOXXJJB.cjs');
-require('../../chunk-FCGLSWKR.cjs');
-require('../../chunk-YADG5Q7C.cjs');
+require('../../chunk-LY5VOKV7.cjs');
+require('../../chunk-7F3V45AH.cjs');
+require('../../chunk-IFS4AH77.cjs');
+require('../../chunk-63N4FN5V.cjs');
 require('../../chunk-MYBTNOS6.cjs');
 require('../../chunk-FTTLBMHU.cjs');
 require('../../chunk-S5C3OZCO.cjs');
@@ -1872,7 +1872,7 @@ require('../../chunk-K6VWTUCH.cjs');
 require('../../chunk-L2RMTGOK.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
-require('../../chunk-AZL332TK.cjs');
+require('../../chunk-2QMBXGMQ.cjs');
 require('../../chunk-V45KLJQP.cjs');
 require('../../chunk-G7SBHMRR.cjs');
 require('../../chunk-AKTPO2DN.cjs');
@@ -1902,4 +1902,4 @@ require('../../chunk-3ATAYP36.cjs');
 
 
 
-exports.HelpCenterCard = _chunkTJQYX3QCcjs.HelpCenterCard; exports.HelpCenterCreateForm = _chunkTJQYX3QCcjs.HelpCenterCreateForm; exports.HelpCenterCreateFormSkeleton = _chunkTJQYX3QCcjs.HelpCenterCreateFormSkeleton; exports.HelpCenterList = _chunkTJQYX3QCcjs.HelpCenterList; exports.TICKET_OPEN_PARAM = _chunk4FJZ7RJDcjs.TICKET_OPEN_PARAM; exports.TICKET_TOAST_COPY = _chunkFA2LATDMcjs.TOAST_COPY; exports.TicketCenter = _chunkTJQYX3QCcjs.TicketCenter; exports.TicketDetailDrawer = _chunkTJQYX3QCcjs.TicketDetailDrawer; exports.TicketLinkedDeliveryCard = _chunkTJQYX3QCcjs.TicketLinkedDeliveryCard; exports.TicketLiveProvider = _chunkFA2LATDMcjs.TicketLiveProvider; exports.TicketOpenForm = _chunkTJQYX3QCcjs.TicketOpenForm; exports.TicketReplyComposer = _chunkTJQYX3QCcjs.TicketReplyComposer; exports.TicketRow = _chunkTJQYX3QCcjs.TicketRow; exports.buildTicketOpenHref = _chunk4FJZ7RJDcjs.buildTicketOpenHref; exports.isOptimistic = _chunkFA2LATDMcjs.isOptimistic; exports.mapTicketActionError = _chunkTJQYX3QCcjs.mapTicketActionError; exports.useOptionalTicketLive = _chunkFA2LATDMcjs.useOptionalTicketLive; exports.useTicketActions = _chunkTJQYX3QCcjs.useTicketActions; exports.useTicketEngagements = _chunkTJQYX3QCcjs.useTicketEngagements; exports.useTicketLive = _chunkFA2LATDMcjs.useTicketLive; exports.useTicketsList = _chunkTJQYX3QCcjs.useTicketsList;
+exports.HelpCenterCard = _chunk4YQNJJWMcjs.HelpCenterCard; exports.HelpCenterCreateForm = _chunk4YQNJJWMcjs.HelpCenterCreateForm; exports.HelpCenterCreateFormSkeleton = _chunk4YQNJJWMcjs.HelpCenterCreateFormSkeleton; exports.HelpCenterList = _chunk4YQNJJWMcjs.HelpCenterList; exports.TICKET_OPEN_PARAM = _chunk4T6ETBL4cjs.TICKET_OPEN_PARAM; exports.TICKET_TOAST_COPY = _chunk5BKAUXLRcjs.TOAST_COPY; exports.TicketCenter = _chunk4YQNJJWMcjs.TicketCenter; exports.TicketDetailDrawer = _chunk4YQNJJWMcjs.TicketDetailDrawer; exports.TicketLinkedDeliveryCard = _chunk4YQNJJWMcjs.TicketLinkedDeliveryCard; exports.TicketLiveProvider = _chunk5BKAUXLRcjs.TicketLiveProvider; exports.TicketOpenForm = _chunk4YQNJJWMcjs.TicketOpenForm; exports.TicketReplyComposer = _chunk4YQNJJWMcjs.TicketReplyComposer; exports.TicketRow = _chunk4YQNJJWMcjs.TicketRow; exports.buildTicketOpenHref = _chunk4T6ETBL4cjs.buildTicketOpenHref; exports.isOptimistic = _chunk5BKAUXLRcjs.isOptimistic; exports.mapTicketActionError = _chunk4YQNJJWMcjs.mapTicketActionError; exports.useOptionalTicketLive = _chunk5BKAUXLRcjs.useOptionalTicketLive; exports.useTicketActions = _chunk4YQNJJWMcjs.useTicketActions; exports.useTicketEngagements = _chunk4YQNJJWMcjs.useTicketEngagements; exports.useTicketLive = _chunk5BKAUXLRcjs.useTicketLive; exports.useTicketsList = _chunk4YQNJJWMcjs.useTicketsList;

package/dist/components/ui/app-window-frame.d.ts

@@ -5,6 +5,12 @@ export interface AppWindowFrameProps {
     children: ReactNode;
     /** A bar pinned under the body (a status line, an action). */
     footer?: ReactNode;
+    /**
+     * The slug of the agent whose window this is. The window takes that agent's
+     * tint from its identity, like every card of the agent's. A window names its
+     * agent, never a colour.
+     */
+    agent?: string | null;
     className?: string;
     /** The scrolling body between the title bar and the footer. */
     bodyClassName?: string;
@@ -16,5 +22,5 @@ export interface AppWindowFrameProps {
  *
  * The frame is a column, so give it a height and the body fills what is left.
  */
-export declare function AppWindowFrame({ title, children, footer, className, bodyClassName }: AppWindowFrameProps): import("react").JSX.Element;
+export declare function AppWindowFrame({ title, children, footer, agent, className, bodyClassName }: AppWindowFrameProps): import("react").JSX.Element;
 //# sourceMappingURL=app-window-frame.d.ts.map

package/dist/components/ui/app-window-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-window-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-window-frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,mBAAmB;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,mBAAmB,+BAmBxG"}
+{"version":3,"file":"app-window-frame.d.ts","sourceRoot":"","sources":["../../../src/components/ui/app-window-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,mBAAmB;IAClC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,mBAAmB,+BA0B/G"}

package/dist/components/ui/app-window-frame.js

@@ -1,11 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
-function AppWindowFrame({ title, children, footer, className, bodyClassName }) {
+import { useAgentTint } from "../agent-identity.js";
+function AppWindowFrame({ title, children, footer, agent, className, bodyClassName }) {
+  const tint = useAgentTint(agent);
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn("flex min-w-0 flex-col overflow-hidden rounded-xl border border-ods-border bg-ods-card", className),
+      className: cn(
+        "flex min-w-0 flex-col overflow-hidden rounded-xl border border-ods-border",
+        // An agent's window sits on the page surface under that agent's tint.
+        tint ? "bg-ods-bg" : "bg-ods-card",
+        className
+      ),
+      style: tint,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative flex h-10 shrink-0 items-center gap-2 border-b border-ods-border px-4", "aria-hidden": true, children: [
           /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-ods-border" }),

package/dist/components/ui/benefit-list.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export interface BenefitItem {
+    /** Drawn at 16px in the quiet colour. */
+    icon?: ReactNode;
+    label: string;
+}
+/** The mark of each of the trial's terms, wherever a term is listed. */
+export declare const TRIAL_TERM_ICONS: {
+    readonly noCard: import("react").JSX.Element;
+    readonly cancel: import("react").JSX.Element;
+    readonly length: import("react").JSX.Element;
+    readonly noContract: import("react").JSX.Element;
+};
+export type TrialTerm = keyof typeof TRIAL_TERM_ICONS;
+/** The trial's terms a list shows when its host names none: cancel anytime, the trial's length, no contract. */
+export declare const DEFAULT_TRIAL_TERMS: readonly TrialTerm[];
+/** The named terms of the trial as benefits, in the order given. The length is left out when the host does not know it. */
+export declare function trialBenefits(trialDays: number | string | null | undefined, terms?: readonly TrialTerm[]): BenefitItem[];
+export interface BenefitListProps {
+    /**
+     * Which of the trial's terms to list, in order ("cancel", "length",
+     * "noContract", "noCard"). Omitted: none, the list is `items` alone.
+     */
+    terms?: readonly TrialTerm[];
+    /** The free trial's length in days, for the `length` term. Without it that term is left out. */
+    trialDays?: number | string | null;
+    /** The host's own benefits. With `terms`, `itemsFirst` says which come first. */
+    items?: BenefitItem[];
+    /** Draw `items` before the trial's terms. Default: after them. */
+    itemsFirst?: boolean;
+    /** `center` centres the row (under a centred hero). Default `start`. */
+    align?: 'start' | 'center';
+    className?: string;
+}
+/**
+ * THE row of short benefits beside a call to action ("Cancel Anytime", "No
+ * Contract"): a small mark and a few words each, wrapping as a row. The one
+ * such row everywhere: the sign-up panel, every hero, every closing call to
+ * action. A host chooses WHICH benefits (`terms`, `items`), never how they look.
+ */
+export declare function BenefitList({ terms, trialDays, items, itemsFirst, align, className, }: BenefitListProps): import("react").JSX.Element | null;
+//# sourceMappingURL=benefit-list.d.ts.map

package/dist/components/ui/benefit-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"benefit-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/benefit-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wEAAwE;AACxE,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AACX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAEtD,gHAAgH;AAChH,eAAO,MAAM,mBAAmB,EAAE,SAAS,SAAS,EAAuC,CAAC;AAE5F,2HAA2H;AAC3H,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAC7C,KAAK,GAAE,SAAS,SAAS,EAAwB,GAChD,WAAW,EAAE,CAMf;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,gGAAgG;IAChG,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACnC,iFAAiF;IACjF,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;IACtB,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,KAAU,EACV,UAAkB,EAClB,KAAe,EACf,SAAS,GACV,EAAE,gBAAgB,sCA4BlB"}

package/dist/components/ui/benefit-list.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { trialLabels } from "../../utils/trial.js";
+import { FileOffIcon } from "../icons-v2-generated/documents/file-off-icon.js";
+import { CreditCardXmarkIcon } from "../icons-v2-generated/finance/credit-card-xmark-icon.js";
+import { FlaskVialIcon } from "../icons-v2-generated/school/flask-vial-icon.js";
+import { XmarkAltIcon } from "../icons-v2-generated/signs-and-symbols/xmark-alt-icon.js";
+const TRIAL_TERM_ICONS = {
+  noCard: /* @__PURE__ */ jsx(CreditCardXmarkIcon, {}),
+  cancel: /* @__PURE__ */ jsx(XmarkAltIcon, {}),
+  length: /* @__PURE__ */ jsx(FlaskVialIcon, {}),
+  noContract: /* @__PURE__ */ jsx(FileOffIcon, {})
+};
+const DEFAULT_TRIAL_TERMS = ["cancel", "length", "noContract"];
+function trialBenefits(trialDays, terms = DEFAULT_TRIAL_TERMS) {
+  const labels = trialLabels(trialDays);
+  return terms.flatMap((term) => {
+    const label = labels[term];
+    return label ? [{ icon: TRIAL_TERM_ICONS[term], label }] : [];
+  });
+}
+function BenefitList({
+  terms,
+  trialDays,
+  items = [],
+  itemsFirst = false,
+  align = "start",
+  className
+}) {
+  const termItems = terms ? trialBenefits(trialDays, terms) : [];
+  const all = itemsFirst ? [...items, ...termItems] : [...termItems, ...items];
+  if (all.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        // A full step between benefits, a tighter one between wrapped rows: each reads as its own point.
+        "m-0 flex list-none flex-wrap content-center items-center gap-x-[var(--spacing-system-l)] gap-y-[var(--spacing-system-m)] p-0",
+        align === "center" && "justify-center",
+        className
+      ),
+      children: all.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-[var(--spacing-system-xs)]", children: [
+        item.icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex size-4 shrink-0 items-center justify-center text-ods-text-secondary [&_svg]:size-4",
+            "aria-hidden": true,
+            children: item.icon
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-ods-text-primary text-h4", children: item.label })
+      ] }, item.label))
+    }
+  );
+}
+export {
+  BenefitList,
+  DEFAULT_TRIAL_TERMS,
+  TRIAL_TERM_ICONS,
+  trialBenefits
+};

package/dist/components/ui/button/button.d.ts

@@ -6,6 +6,7 @@ declare const buttonVariants: (props?: ({
     font?: "bold" | "regular" | null | undefined;
     fullWidth?: boolean | null | undefined;
     noPaddingX?: boolean | null | undefined;
+    attach?: "end" | "start" | "none" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** @deprecated Use `size="small"` instead. Temporary alias kept for backward compatibility; will be removed in the future. */
 type DeprecatedButtonSize = 'small-legacy';

package/dist/components/ui/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,cAAc;;;;;;8EA4FnB,CAAC;AAgGF,8HAA8H;AAC9H,KAAK,oBAAoB,GAAG,cAAc,CAAC;AAE3C,KAAK,UAAU,GACb,OAAO,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,oBAAoB,CAAC;AAEjH,UAAU,WACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB;;wCAEgC;QAChC,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;QACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,GAAG,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAaD,QAAA,MAAM,MAAM,uFAkNV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/button/button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,cAAc;;;;;;;8EAwGnB,CAAC;AAgGF,8HAA8H;AAC9H,KAAK,oBAAoB,GAAG,cAAc,CAAC;AAE3C,KAAK,UAAU,GACb,OAAO,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,oBAAoB,CAAC;AAEjH,UAAU,WACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC;IACxG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB;;wCAEgC;QAChC,GAAG,CAAC,EAAE,UAAU,GAAG,qBAAqB,CAAC;QACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,GAAG,IAAI,CAAC;IACT,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAaD,QAAA,MAAM,MAAM,uFAmNV,CAAC;AAGH,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/ui/button/button.js

@@ -88,9 +88,20 @@ const buttonVariants = cva(
       noPaddingX: {
         true: "px-0",
         false: ""
+      },
+      // Two buttons drawn as ONE surface with a seam between them (a main action
+      // and a chevron that opens its alternatives: `DropdownButton` with an
+      // `action`). `start` is the leading half, `end` the trailing one: each
+      // gives up the corners and the border on its inner edge.
+      attach: {
+        none: "",
+        start: "rounded-r-none",
+        end: "rounded-l-none border-l-0"
       }
     },
     compoundVariants: [
+      // The trailing half as an icon button is the design's 40px chevron cell, at every breakpoint.
+      { attach: "end", size: "icon", class: "w-10 px-0 md:w-10" },
       { size: "small", class: "[&_svg]:h-4 [&_svg]:w-4" },
       // Comes after the size classes, so cn()'s tailwind-merge resolves the
       // ods-typography group in favour of text-h4.
@@ -101,7 +112,8 @@ const buttonVariants = cva(
       size: "default",
       font: "bold",
       fullWidth: false,
-      noPaddingX: false
+      noPaddingX: false,
+      attach: "none"
     }
   }
 );
@@ -213,6 +225,7 @@ const Button = React.forwardRef(function ButtonImpl({
   font,
   fullWidth,
   noPaddingX,
+  attach,
   asChild,
   href,
   openInNewTab,
@@ -300,7 +313,7 @@ const Button = React.forwardRef(function ButtonImpl({
     }
     return /* @__PURE__ */ jsx("button", { ref, className: shellClasses, disabled: isDisabled, onClick, ...props, children: splitContent });
   }
-  const classes = cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX }), className);
+  const classes = cn(buttonVariants({ variant, size, font, fullWidth, noPaddingX, attach }), className);
   if (asChild) {
     return /* @__PURE__ */ jsx(Slot, { ref, className: classes, ...props, children });
   }

package/dist/components/ui/dropdown-button.d.ts

@@ -1,9 +1,25 @@
 import React from 'react';
 import { type ActionsMenuGroup, type ActionsMenuItem } from './actions-menu';
 import { type ButtonProps } from './button';
+/** The button's own action, when its label does something itself and the chevron holds the alternatives. */
+export interface DropdownButtonAction {
+    href?: string;
+    /** Fetch `href` as a file (an installer) instead of navigating to it. */
+    download?: boolean | string;
+    openInNewTab?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+}
 export interface DropdownButtonProps {
     /** Button label rendered next to the chevron. */
     label: React.ReactNode;
+    /**
+     * Makes the label a button of its own (Figma `button-action`): it runs this
+     * action, and the chevron beside it opens the menu of alternatives. Two click
+     * targets on one surface. Without it the whole button opens the menu.
+     */
+    action?: DropdownButtonAction;
+    /** The chevron's accessible name when `action` is set (it has no text of its own). Default: "More options". */
+    menuAriaLabel?: string;
     /** Optional leading icon rendered before the label. */
     icon?: React.ReactNode;
     /**
@@ -49,7 +65,9 @@ export interface DropdownButtonProps {
  * `ActionsMenu`. One component, so the trigger styling, chevron, and menu
  * chrome cannot drift between surfaces.
  *
- * Two trigger looks — BOTH render through the unified `Button`:
+ * With `action`, the label is a button of its own and the chevron alone opens
+ * the menu (two targets, one surface). Otherwise, two trigger looks — BOTH
+ * render through the unified `Button`:
  * - default (no `variant`): the card-colored seam trigger — `Button
  *   variant="outline"` with the chevron in its `splitIcon` slot, so the label
  *   and chevron are separated by a divider, the whole surface is one click
@@ -62,5 +80,5 @@ export interface DropdownButtonProps {
  * Item clicks close the menu (ActionsMenuDropdown's default; opt out per item
  * with `closeOnSelect: false`).
  */
-export declare function DropdownButton({ label, icon, items, groups, variant, size, loading, disabled, fullWidth, className, ariaLabel, align, side, onCloseAutoFocus, }: DropdownButtonProps): React.JSX.Element;
+export declare function DropdownButton({ label, action, menuAriaLabel, icon, items, groups, variant, size, loading, disabled, fullWidth, className, ariaLabel, align, side, onCloseAutoFocus, }: DropdownButtonProps): React.JSX.Element;
 //# sourceMappingURL=dropdown-button.d.ts.map

package/dist/components/ui/dropdown-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropdown-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAuB,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClG,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,MAAM,WAAW,mBAAmB;IAClC,iDAAiD;IACjD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uDAAuD;IACvD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC3C;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAqB,EACrB,OAAe,EACf,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,KAAa,EACb,IAAe,EACf,gBAAgB,GACjB,EAAE,mBAAmB,qBAuErB"}
+{"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropdown-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAuB,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAClG,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,4GAA4G;AAC5G,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAC1E;AAED,MAAM,WAAW,mBAAmB;IAClC,iDAAiD;IACjD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,+GAA+G;IAC/G,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,wEAAwE;IACxE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC3C;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,aAA8B,EAC9B,IAAI,EACJ,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAqB,EACrB,OAAe,EACf,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,KAAa,EACb,IAAe,EACf,gBAAgB,GACjB,EAAE,mBAAmB,qBA0HrB"}

package/dist/components/ui/dropdown-button.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { cn } from "../../utils/cn.js";
 import { Chevron02DownIcon } from "../icons-v2-generated/index.js";
@@ -7,6 +7,8 @@ import { ActionsMenuDropdown } from "./actions-menu.js";
 import { Button } from "./button/index.js";
 function DropdownButton({
   label,
+  action,
+  menuAriaLabel = "More options",
   icon,
   items,
   groups,
@@ -31,6 +33,60 @@ function DropdownButton({
     [disabled, loading]
   );
   const resolvedAriaLabel = ariaLabel || (typeof label === "string" ? label : void 0);
+  if (action) {
+    const skin = variant ?? "outline";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": resolvedAriaLabel,
+        className: cn("inline-flex items-stretch", fullWidth && "w-full", className),
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: skin,
+              attach: "start",
+              href: action.href,
+              download: action.download,
+              openInNewTab: action.openInNewTab,
+              onClick: action.onClick,
+              disabled,
+              loading,
+              leftIcon: icon,
+              className: fullWidth ? "flex-1" : void 0,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ActionsMenuDropdown,
+            {
+              groups: groups ?? [{ items: items ?? [] }],
+              open,
+              onOpenChange: handleOpenChange,
+              align,
+              side,
+              onCloseAutoFocus,
+              triggerAriaLabel: menuAriaLabel,
+              customTrigger: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: skin,
+                  size: "icon",
+                  attach: "end",
+                  disabled: disabled || loading,
+                  "aria-label": menuAriaLabel,
+                  className: cn(open && "bg-ods-bg-hover"),
+                  leftIcon: /* @__PURE__ */ jsx(Chevron02DownIcon, { className: cn("transition-transform duration-fast", open && "rotate-180") })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
   const trigger = variant ? /* @__PURE__ */ jsx(
     Button,
     {

package/dist/components/ui/file-manager/index.cjs

@@ -19,7 +19,7 @@ var _chunkZ74QE57Tcjs = require('../../../chunk-Z74QE57T.cjs');
 require('../../../chunk-XZJCBIYR.cjs');
 
 
-var _chunkAZL332TKcjs = require('../../../chunk-AZL332TK.cjs');
+var _chunk2QMBXGMQcjs = require('../../../chunk-2QMBXGMQ.cjs');
 require('../../../chunk-V45KLJQP.cjs');
 
 
@@ -46,9 +46,9 @@ function FileManagerActionBar({
   className
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex flex-wrap items-center gap-4 content-md:justify-end", className), children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAZL332TKcjs.Button, { variant: "outline", size: "small-legacy", onClick: onNewFolder, leftIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FolderPlus, { className: "h-4 w-4" }), children: "New Folder" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", size: "small-legacy", onClick: onNewFolder, leftIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FolderPlus, { className: "h-4 w-4" }), children: "New Folder" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkAZL332TKcjs.Button,
+      _chunk2QMBXGMQcjs.Button,
       {
         variant: "outline",
         size: "small-legacy",
@@ -59,7 +59,7 @@ function FileManagerActionBar({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkAZL332TKcjs.Button,
+      _chunk2QMBXGMQcjs.Button,
       {
         variant: "outline",
         size: "small-legacy",
@@ -70,7 +70,7 @@ function FileManagerActionBar({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkAZL332TKcjs.Button,
+      _chunk2QMBXGMQcjs.Button,
       {
         variant: "outline",
         size: "small-legacy",
@@ -80,9 +80,9 @@ function FileManagerActionBar({
         children: "Paste"
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAZL332TKcjs.Button, { variant: "outline", size: "small-legacy", onClick: onUpload, leftIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Upload, { className: "h-4 w-4" }), children: "Upload" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", size: "small-legacy", onClick: onUpload, leftIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Upload, { className: "h-4 w-4" }), children: "Upload" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkAZL332TKcjs.Button,
+      _chunk2QMBXGMQcjs.Button,
       {
         variant: "outline",
         size: "small-legacy",
@@ -132,7 +132,7 @@ function FileManagerEmpty({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-6 rounded-full bg-ods-bg-surface p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FolderOpen, { className: "h-12 w-12 text-ods-text-tertiary" }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "mb-2 text-ods-text-primary text-h4", children: message }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-6 max-w-md text-center text-ods-text-secondary text-h6", children: description }),
-    action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAZL332TKcjs.Button, { variant: "accent", size: "small-legacy", onClick: action.onClick, children: action.label })
+    action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "accent", size: "small-legacy", onClick: action.onClick, children: action.label })
   ] });
 }
 
@@ -213,7 +213,7 @@ function FileManagerContextMenu({
   ];
   const visibleItems = menuItems.filter((item) => item.show);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkL2RMTGOKcjs.DropdownMenu, { open, onOpenChange, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL2RMTGOKcjs.DropdownMenuTrigger, { asChild: true, children: trigger || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAZL332TKcjs.Button, { variant: "transparent", size: "small-legacy", className: "h-8 w-8 p-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MoreHorizontal, { className: "h-4 w-4" }) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL2RMTGOKcjs.DropdownMenuTrigger, { asChild: true, children: trigger || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "transparent", size: "small-legacy", className: "h-8 w-8 p-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.MoreHorizontal, { className: "h-4 w-4" }) }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL2RMTGOKcjs.DropdownMenuContent, { align: "end", className: _chunk3ATAYP36cjs.cn.call(void 0, "w-56", className), onClick: (e) => e.stopPropagation(), children: visibleItems.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react2.default.Fragment, { children: [
       item.separator && index > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL2RMTGOKcjs.DropdownMenuSeparator, {}),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -298,7 +298,7 @@ function FileManagerTableRow({
               onAction: handleContextAction,
               fileType: file.type,
               trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkAZL332TKcjs.Button,
+                _chunk2QMBXGMQcjs.Button,
                 {
                   variant: "transparent",
                   size: "small-legacy",
@@ -312,7 +312,7 @@ function FileManagerTableRow({
             }
           ),
           file.type === "folder" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkAZL332TKcjs.Button,
+            _chunk2QMBXGMQcjs.Button,
             {
               variant: "transparent",
               size: "small-legacy",