@actioneer/ads 0.3.1 → 0.5.0

package/components/drawer.d.ts

@@ -32,6 +32,21 @@ export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size,
  * page stays visible and interactive while it's open. This is the canonical
  * Drawer in ADS. Use `ModalDrawer` when a page-blocking overlay is genuinely
  * required.
+ *
+ * REQUIRES A TINTED GROUND. The panel is flat white (`bg-card`) with no shadow
+ * and no border — it separates from its neighbour purely by fill contrast, so
+ * it is INVISIBLE on a white (`bg-background`) parent. Place it and its sibling
+ * content inside a `bg-surface` flex row; the tint is the parent's job, not the
+ * panel's (the inline Drawer renders no ground of its own):
+ *
+ *   <div className="flex gap-3 bg-surface p-3">
+ *     <main className="flex-1 rounded-xl bg-card">…content…</main>
+ *     <Drawer open={open} onOpenChange={setOpen} aria-label="…">…</Drawer>
+ *   </div>
+ *
+ * This mirrors the shell's main + chat layout — white panels on a tinted
+ * ground. If the panel doesn't read, fix the ground; never add a border or
+ * shadow to force it (that fights principle 1).
  */
 export declare function Drawer({ open, onOpenChange, side: sideProp, size, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
 /** @deprecated Alias for `Drawer` — the canonical drawer is now the inline

package/components/empty-state.d.ts

@@ -1,8 +1,48 @@
 import * as React from "react";
+/**
+ * EmptyState — the "nothing here yet" placeholder.
+ *
+ * Two registers, chosen by which visual slot you fill:
+ *  - `icon` (default): a compact icon-in-a-circle for an in-panel empty list.
+ *  - `illustration`: a larger soft graphic for a full empty *screen*, with a
+ *    bigger title and more breathing room — the calm, centred pattern.
+ *
+ * Pass one or the other; `illustration` wins when both are present. The
+ * built-in illustrations (`EmptyDocuments`, `EmptySearch`, `EmptyConnections`,
+ * `EmptyInsights`) share one soft language — warm greige cards, a single Sage
+ * accent — and re-theme with the system since every fill flows from a token.
+ */
 export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Compact icon (rendered inside a muted circle). Ignored if `illustration` is set. */
     icon?: React.ReactNode;
+    /** Larger soft graphic for a full empty screen (see the Empty* illustrations). */
+    illustration?: React.ReactNode;
     title: React.ReactNode;
     description?: React.ReactNode;
     action?: React.ReactNode;
 }
 export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+type IllustrationProps = {
+    className?: string;
+};
+/** No documents / reports / notes — a floating note over a receding one. */
+export declare function EmptyDocuments({ className }: IllustrationProps): React.JSX.Element;
+export declare namespace EmptyDocuments {
+    var displayName: string;
+}
+/** No results — a list card with a Sage magnifier searching it. */
+export declare function EmptySearch({ className }: IllustrationProps): React.JSX.Element;
+export declare namespace EmptySearch {
+    var displayName: string;
+}
+/** No connections / data sources — a small node graph, one Sage add-node. */
+export declare function EmptyConnections({ className }: IllustrationProps): React.JSX.Element;
+export declare namespace EmptyConnections {
+    var displayName: string;
+}
+/** No insights / data yet — rising bars, the tallest in Sage. */
+export declare function EmptyInsights({ className }: IllustrationProps): React.JSX.Element;
+export declare namespace EmptyInsights {
+    var displayName: string;
+}
+export {};

package/components/empty-state.js

@@ -1,30 +1,172 @@
 "use client";
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import * as d from "react";
-import { Inbox as n } from "../lib/icons.js";
-import { cn as o } from "../lib/cn.js";
-const f = d.forwardRef(
-  ({ className: s, icon: a, title: l, description: t, action: m, ...i }, c) => /* @__PURE__ */ r(
-    "div",
-    {
-      ref: c,
-      className: o(
-        "flex flex-col items-center text-center gap-3 py-12",
-        s
-      ),
-      ...i,
-      children: [
-        /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: a ?? /* @__PURE__ */ e(n, { "aria-hidden": !0 }) }),
-        /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ e("p", { className: "font-medium", children: l }),
-          t && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground max-w-sm", children: t })
-        ] }),
-        m && /* @__PURE__ */ e("div", { className: "mt-1", children: m })
-      ]
-    }
-  )
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as x from "react";
+import { Inbox as f } from "../lib/icons.js";
+import { cn as s } from "../lib/cn.js";
+const g = x.forwardRef(
+  ({ className: r, icon: d, illustration: a, title: n, description: c, action: o, ...m }, h) => {
+    const l = a != null;
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: h,
+        className: s(
+          "flex flex-col items-center px-6 text-center",
+          l ? "gap-5 py-16" : "gap-3 py-12",
+          r
+        ),
+        ...m,
+        children: [
+          l ? a : /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: d ?? /* @__PURE__ */ e(f, { "aria-hidden": !0 }) }),
+          /* @__PURE__ */ t("div", { className: "flex flex-col gap-1.5", children: [
+            /* @__PURE__ */ e(
+              "p",
+              {
+                className: s(
+                  l ? "text-lg font-bold text-foreground" : "font-medium"
+                ),
+                children: n
+              }
+            ),
+            c && /* @__PURE__ */ e(
+              "p",
+              {
+                className: s(
+                  "max-w-sm text-muted-foreground",
+                  l ? "text-sm" : "text-xs"
+                ),
+                children: c
+              }
+            )
+          ] }),
+          o && /* @__PURE__ */ e("div", { className: "mt-2", children: o })
+        ]
+      }
+    );
+  }
 );
-f.displayName = "EmptyState";
+g.displayName = "EmptyState";
+const i = "h-28 w-auto";
+function y({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
+    /* @__PURE__ */ e(
+      "rect",
+      {
+        x: "42",
+        y: "24",
+        width: "56",
+        height: "74",
+        rx: "10",
+        transform: "rotate(-9 70 60)",
+        className: "fill-muted"
+      }
+    ),
+    /* @__PURE__ */ t("g", { transform: "rotate(6 70 60)", children: [
+      /* @__PURE__ */ e(
+        "rect",
+        {
+          x: "42",
+          y: "20",
+          width: "56",
+          height: "76",
+          rx: "10",
+          className: "fill-elevated stroke-border-strong",
+          strokeWidth: "1"
+        }
+      ),
+      /* @__PURE__ */ e("rect", { x: "51", y: "34", width: "30", height: "6", rx: "3", className: "fill-border-strong" }),
+      /* @__PURE__ */ e("rect", { x: "51", y: "47", width: "38", height: "5", rx: "2.5", className: "fill-border" }),
+      /* @__PURE__ */ e("rect", { x: "51", y: "57", width: "24", height: "5", rx: "2.5", className: "fill-border" }),
+      /* @__PURE__ */ e("circle", { cx: "86", cy: "82", r: "6.5", className: "fill-brand" })
+    ] })
+  ] });
+}
+y.displayName = "EmptyDocuments";
+function N({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
+    /* @__PURE__ */ e(
+      "rect",
+      {
+        x: "28",
+        y: "24",
+        width: "66",
+        height: "70",
+        rx: "10",
+        className: "fill-elevated stroke-border-strong",
+        strokeWidth: "1"
+      }
+    ),
+    /* @__PURE__ */ e("rect", { x: "39", y: "37", width: "34", height: "5", rx: "2.5", className: "fill-border" }),
+    /* @__PURE__ */ e("rect", { x: "39", y: "49", width: "44", height: "5", rx: "2.5", className: "fill-border" }),
+    /* @__PURE__ */ e("rect", { x: "39", y: "61", width: "26", height: "5", rx: "2.5", className: "fill-border" }),
+    /* @__PURE__ */ t("g", { children: [
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          cx: "90",
+          cy: "76",
+          r: "17",
+          className: "fill-elevated stroke-brand",
+          strokeWidth: "5"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "line",
+        {
+          x1: "102",
+          y1: "88",
+          x2: "114",
+          y2: "100",
+          className: "stroke-brand",
+          strokeWidth: "6",
+          strokeLinecap: "round"
+        }
+      )
+    ] })
+  ] });
+}
+N.displayName = "EmptySearch";
+function u({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
+    /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M42 44 L70 74 M98 44 L70 74",
+        className: "stroke-border-strong",
+        strokeWidth: "3",
+        fill: "none",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ e("circle", { cx: "42", cy: "42", r: "13", className: "fill-elevated stroke-border-strong", strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("circle", { cx: "98", cy: "42", r: "13", className: "fill-elevated stroke-border-strong", strokeWidth: "1.5" }),
+    /* @__PURE__ */ e("circle", { cx: "70", cy: "78", r: "16", className: "fill-brand" }),
+    /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M70 71 v14 M63 78 h14",
+        className: "stroke-brand-foreground",
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        fill: "none"
+      }
+    )
+  ] });
+}
+u.displayName = "EmptyConnections";
+function p({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
+    /* @__PURE__ */ e("rect", { x: "34", y: "88", width: "72", height: "3", rx: "1.5", className: "fill-border-strong" }),
+    /* @__PURE__ */ e("rect", { x: "40", y: "64", width: "15", height: "24", rx: "3", className: "fill-muted" }),
+    /* @__PURE__ */ e("rect", { x: "62", y: "50", width: "15", height: "38", rx: "3", className: "fill-border-strong" }),
+    /* @__PURE__ */ e("rect", { x: "84", y: "34", width: "15", height: "54", rx: "3", className: "fill-brand" })
+  ] });
+}
+p.displayName = "EmptyInsights";
 export {
-  f as EmptyState
+  u as EmptyConnections,
+  y as EmptyDocuments,
+  p as EmptyInsights,
+  N as EmptySearch,
+  g as EmptyState
 };