@arbidocs/blocks 0.3.160 → 0.3.161

package/dist/index.cjs

@@ -643,10 +643,10 @@ function DataTableBlock({ columns, rows, caption, emptyText, testId }) {
   ] });
 }
 var arbiTheme = agGridCommunity.themeQuartz.withParams({
-  // Font settings
-  fontFamily: {
-    googleFont: "Nunito"
-  },
+  // Font settings — inherit the host app's font. A googleFont here never
+  // loaded under the apps' CSP, so every grid silently fell back to the
+  // browser's default SERIF and read as unstyled.
+  fontFamily: "inherit",
   fontSize: 14,
   headerFontSize: 13,
   headerFontWeight: 600,
@@ -1039,6 +1039,42 @@ function GridView({
     }
   ) });
 }
+function UsageMeter({
+  icon: Icon,
+  label,
+  value,
+  pct: pct2,
+  hint,
+  className,
+  testId
+}) {
+  const clamped = Math.max(0, Math.min(100, pct2));
+  const tone = clamped >= 100 ? "bg-destructive" : clamped >= 80 ? "bg-amber-500" : "bg-primary";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: react.cn("space-y-1.5", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-muted-foreground", children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
+          label,
+          hint ? ` (${hint})` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-medium tabular-nums text-foreground", children: value })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: react.cn("h-full rounded-full transition-[width]", tone),
+        style: { width: `${clamped}%` },
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label
+      }
+    ) })
+  ] });
+}
 function UploadDropzone({
   onFiles,
   accept,
@@ -1489,7 +1525,7 @@ function RecentActivityCard({
             {
               type: "button",
               onClick: onAction,
-              className: "group m-3 flex flex-1 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-4 text-center transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:border-primary/40 focus-visible:bg-primary/5 focus-visible:outline-none",
+              className: "group m-3 flex flex-1 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-4 text-center transition-colors hover:border-border hover:bg-accent/50 focus-visible:border-border focus-visible:bg-accent/50 focus-visible:outline-none",
               "data-testid": testId && `${testId}-empty-action`,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: ActionIcon ? /* @__PURE__ */ jsxRuntime.jsx(ActionIcon, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-5" }) }),
@@ -1515,11 +1551,10 @@ function RecentActivityCard({
               className: react.cn(
                 "group relative flex items-center border-b border-border/60 transition-colors last:border-b-0",
                 // A row is a link to somewhere, so hovering it has to look
-                // like one. A 40%-alpha accent wash was too faint to read as
-                // an affordance at all — this is a definite tint plus an
-                // accent bar down the leading edge.
-                "hover:bg-primary/10 has-[button:focus-visible]:bg-primary/10",
-                "before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-primary before:opacity-0 before:transition-opacity hover:before:opacity-100"
+                // like one — but quietly: a neutral wash plus the title
+                // turning primary. Loud primary tints and edge bars read as
+                // selection chrome, not hover.
+                "hover:bg-accent/60 has-[button:focus-visible]:bg-accent/60"
               ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1555,6 +1590,253 @@ function RecentActivityCard({
     }
   );
 }
+function AskBar({
+  onAsk,
+  onSearch,
+  suggestions = [],
+  placeholder = "Ask anything\u2026",
+  askLabel = "Ask",
+  searchLabel = "Search",
+  value,
+  onValueChange,
+  onInputKeyDown,
+  menu,
+  inputRef: externalInputRef,
+  className,
+  testId = "ask-bar"
+}) {
+  const [innerText, setInnerText] = react$1.useState("");
+  const text = value !== void 0 ? value : innerText;
+  const setText = (next) => {
+    onValueChange?.(next);
+    if (value === void 0) setInnerText(next);
+  };
+  const localInputRef = react$1.useRef(null);
+  const inputRef = externalInputRef ?? localInputRef;
+  const submitTo = (handler) => {
+    const question = text.trim();
+    if (!question) return;
+    handler(question);
+    setText("");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: react.cn("flex flex-col gap-2", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      menu,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            submitTo(onAsk);
+          },
+          className: "flex h-12 items-center gap-1.5 rounded-md border border-border/50 bg-background pl-3 pr-1.5 transition-colors focus-within:border-border",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: text,
+                onChange: (e) => setText(e.target.value),
+                onKeyDown: onInputKeyDown,
+                placeholder,
+                className: "h-8 min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground",
+                "data-testid": testId && `${testId}-input`
+              }
+            ),
+            onSearch && /* @__PURE__ */ jsxRuntime.jsx(
+              react.Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled: !text.trim(),
+                onClick: () => submitTo(onSearch),
+                className: "h-8 shrink-0 px-2.5 text-xs font-medium text-muted-foreground hover:text-foreground",
+                "data-testid": testId && `${testId}-search`,
+                children: searchLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              react.Button,
+              {
+                type: "submit",
+                size: "sm",
+                disabled: !text.trim(),
+                className: "h-8 shrink-0 px-3 text-xs font-medium",
+                "data-testid": testId && `${testId}-submit`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-3.5" }),
+                  askLabel
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    suggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: suggestions.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setText(s);
+          inputRef.current?.focus();
+        },
+        className: "rounded-full border border-border/50 bg-card px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-border hover:bg-accent hover:text-foreground",
+        "data-testid": testId && `${testId}-suggestion`,
+        children: s
+      },
+      s
+    )) })
+  ] });
+}
+function ResumeStrip({
+  items,
+  caption = "Pick up where you left off",
+  className,
+  testId = "resume-strip"
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: react.cn("flex flex-col gap-1.5", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: caption }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: item.onClick,
+        title: item.title,
+        className: "group flex min-w-0 items-center gap-2 rounded-lg border border-border/50 bg-card py-2 pl-2.5 pr-3 shadow-sm transition-colors hover:border-border hover:bg-accent/50",
+        "data-testid": testId && `${testId}-item`,
+        children: [
+          item.leading,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[14rem] truncate text-sm font-medium text-foreground group-hover:text-primary", children: item.title }),
+          item.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: item.meta })
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
+function SectionStrip({
+  icon: Icon,
+  title,
+  count,
+  onOpen,
+  actions = [],
+  groups,
+  empty,
+  className,
+  testId = "section-strip"
+}) {
+  const filledGroups = groups.filter((g) => g.rows.length > 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: react.cn("rounded-xl border border-border/60 bg-card p-2 shadow-sm", className),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onOpen,
+              disabled: !onOpen,
+              className: "group flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-primary/10 disabled:cursor-default disabled:hover:bg-transparent",
+              "data-testid": testId && `${testId}-open`,
+              children: [
+                Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-sm font-semibold text-foreground", children: title }),
+                count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: count }),
+                onOpen && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto size-4 shrink-0 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" })
+              ]
+            }
+          ),
+          actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+            react.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-8 shrink-0 px-2 text-xs font-medium text-muted-foreground hover:text-foreground",
+              onClick: action.onClick,
+              title: action.label,
+              "data-testid": action.testId,
+              children: [
+                action.icon && /* @__PURE__ */ jsxRuntime.jsx(action.icon, { className: "size-3.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only @md:not-sr-only @md:ml-1.5", children: action.label })
+              ]
+            },
+            action.label
+          ))
+        ] }),
+        filledGroups.length === 0 ? empty ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: empty.onClick,
+            className: "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-primary/5 hover:text-foreground",
+            "data-testid": empty.testId,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-3.5 shrink-0" }),
+              empty.label
+            ]
+          }
+        ) : null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-x-4 @2xl:grid-cols-2", children: filledGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 px-2 pb-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: group.caption }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { children: group.rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: row.onClick,
+              title: row.title,
+              className: "group flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-primary/10",
+              "data-testid": group.rowTestId ?? (testId && `${testId}-row`),
+              children: [
+                row.leading,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground group-hover:text-primary", children: row.title }),
+                row.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: row.meta })
+              ]
+            }
+          ) }, row.id)) })
+        ] }, group.caption)) })
+      ]
+    }
+  );
+}
+function StartHero({
+  title,
+  subtitle,
+  children,
+  tile,
+  footer,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: react.cn("py-6", className), "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-2xl flex-col gap-5 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    children,
+    tile && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: tile.onClick,
+        className: "group flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-border px-4 py-6 text-center transition-colors hover:border-border hover:bg-accent/50 focus-visible:border-border focus-visible:bg-accent/50 focus-visible:outline-none",
+        "data-testid": tile.testId,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(tile.icon, { className: "size-5" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: tile.label }),
+          tile.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-relaxed text-muted-foreground", children: tile.description })
+        ]
+      }
+    ),
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: footer })
+  ] }) });
+}
 var MAX_AVATARS = 3;
 function WorkspaceCard({
   name,
@@ -5523,6 +5805,7 @@ Object.defineProperty(exports, "toRedlineMarkdown", {
 exports.AgentsPanel = AgentsPanel;
 exports.AppHeader = AppHeader;
 exports.AppShell = AppShell;
+exports.AskBar = AskBar;
 exports.AssetThumb = AssetThumb;
 exports.CitationEditor = CitationEditor;
 exports.ConnectionProvider = ConnectionProvider;
@@ -5540,11 +5823,15 @@ exports.ModuleManager = ModuleManager;
 exports.PageHeader = PageHeader;
 exports.PageRenderer = PageRenderer;
 exports.RecentActivityCard = RecentActivityCard;
+exports.ResumeStrip = ResumeStrip;
 exports.Section = Section;
+exports.SectionStrip = SectionStrip;
+exports.StartHero = StartHero;
 exports.StatGroup = StatGroup;
 exports.StudioEditor = StudioEditor;
 exports.Toolbar = Toolbar;
 exports.UploadDropzone = UploadDropzone;
+exports.UsageMeter = UsageMeter;
 exports.VerticalBuilder = VerticalBuilder;
 exports.WidgetPlaceholder = WidgetPlaceholder;
 exports.WorkspaceCard = WorkspaceCard;