@actioneer/ads 1.0.8 → 1.0.10

package/examples/guardrails-settings-screen.tsx

@@ -0,0 +1,123 @@
+/**
+ * Guardrails settings — the ADS settings-screen recipe, built only from ADS
+ * exports.
+ *
+ * Follows principle `settings-screens` (see `get_principles`):
+ *
+ * - One white page in the app window: BodyPageHeader (a 64px bar with the
+ *   title, the one save action and a full-width hairline), then the setting
+ *   groups 32px apart.
+ * - Every group FILLS the panel's width between its 24px side insets — never a
+ *   fixed reading-width column — so each row's control lines up on the panel's
+ *   right edge under the save action.
+ * - A group is a 16px Medium title over a SettingList; each SettingRow reads
+ *   bare glyph → label + one-line description → the control that changes it
+ *   (Switch, a Button showing the current value, or a Badge).
+ *
+ * Copy it and replace GROUPS with your own settings.
+ */
+import * as React from "react";
+import {
+  Badge,
+  BodyPageHeader,
+  Button,
+  SettingList,
+  SettingRow,
+  Switch,
+} from "@actioneer/ads";
+import { Call, CheckCircle, FileText, Info, Refresh } from "@actioneer/ads/lib/icons";
+
+type Control =
+  | { kind: "switch"; on: boolean }
+  | { kind: "button"; label: string }
+  | { kind: "badge"; label: string };
+
+interface Setting {
+  id: string;
+  icon: React.ReactNode;
+  label: string;
+  description: string;
+  control: Control;
+}
+
+export const GROUPS: { title: string; settings: Setting[] }[] = [
+  {
+    title: "Calling window",
+    settings: [
+      { id: "hours", icon: <Call />, label: "Calling hours", description: "Leads are dialled only inside this window", control: { kind: "button", label: "10:00 – 19:00" } },
+      { id: "retry", icon: <Refresh />, label: "Retry unanswered calls", description: "Up to 3 attempts, 2 hours apart", control: { kind: "switch", on: true } },
+      { id: "dnd", icon: <CheckCircle />, label: "Respect the DND registry", description: "Skip numbers on the national do-not-call list", control: { kind: "switch", on: true } },
+    ],
+  },
+  {
+    title: "Compliance",
+    settings: [
+      { id: "rates", icon: <Info />, label: "Block rate quotes", description: "The agent never quotes a rate outside the approved sheet", control: { kind: "switch", on: true } },
+      { id: "disclosure", icon: <FileText />, label: "Disclosure script", description: "Read at the start of every call", control: { kind: "button", label: "Edit" } },
+      { id: "talk-over", icon: <Info />, label: "Talk-over limit", description: "Flag calls where the agent talks over the lead for 2s or more", control: { kind: "badge", label: "2s" } },
+    ],
+  },
+  {
+    title: "Escalation",
+    settings: [
+      { id: "handoff", icon: <Call />, label: "Hand off to a person", description: "When the lead asks for a person twice", control: { kind: "switch", on: false } },
+    ],
+  },
+];
+
+export function GuardrailsSettingsScreen() {
+  const [switches, setSwitches] = React.useState<Record<string, boolean>>(() =>
+    Object.fromEntries(
+      GROUPS.flatMap((group) => group.settings)
+        .filter((setting) => setting.control.kind === "switch")
+        .map((setting) => [setting.id, (setting.control as { on: boolean }).on]),
+    ),
+  );
+
+  const control = (setting: Setting) => {
+    switch (setting.control.kind) {
+      case "switch":
+        return (
+          <Switch
+            aria-label={setting.label}
+            checked={switches[setting.id]}
+            onCheckedChange={(on) => setSwitches((current) => ({ ...current, [setting.id]: on }))}
+          />
+        );
+      case "button":
+        return <Button variant="outline">{setting.control.label}</Button>;
+      case "badge":
+        return <Badge color="success">{setting.control.label}</Badge>;
+    }
+  };
+
+  return (
+    <div className="flex h-screen bg-surface p-3 text-foreground">
+      {/* The app window: one rounded surface on the WG3 backdrop. */}
+      <div className="flex min-w-0 flex-1 overflow-hidden rounded-window border border-border bg-card shadow-window">
+        <section aria-label="Guardrails" className="flex min-w-0 flex-1 flex-col overflow-hidden">
+          <BodyPageHeader title="Guardrails" actions={<Button>Save changes</Button>} />
+          <div className="flex min-h-0 flex-1 flex-col gap-8 overflow-y-auto px-6 pb-6">
+            {GROUPS.map((group) => (
+              // w-full: the group fills the panel — no max-width column.
+              <section key={group.title} aria-label={group.title} className="flex w-full flex-col gap-2">
+                <h2 className="m-0 text-l font-medium text-on-white-primary">{group.title}</h2>
+                <SettingList>
+                  {group.settings.map((setting) => (
+                    <SettingRow
+                      key={setting.id}
+                      icon={setting.icon}
+                      label={setting.label}
+                      description={setting.description}
+                      action={control(setting)}
+                    />
+                  ))}
+                </SettingList>
+              </section>
+            ))}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/fonts.css

@@ -1,24 +1,19 @@
 /* @actioneer/ads — generated by scripts/build-lib-styles.mjs. Do not edit. */
 @import "@fontsource-variable/jetbrains-mono/wght.css";
 
-/* Aribau Grotesk — ADS UI typeface.
-   TWO physical faces, both served compressed (woff2):
-   • Regular → `font-normal` (weight 100–499)
-   • Medium  → `font-medium` (weight 500)
-   There is NO semibold or bold face. The broad face range keeps legacy
-   consumers on the real Medium file, while ADS source uses only 400 and 500.
-   `font-synthesis-weight: none` (index.css) blocks faux bolding. */
-@font-face {
-  font-family: "Aribau Grotesk";
-  src: url("./fonts/aribau-grotesk-regular.woff2") format("woff2");
-  font-weight: 100 499;
-  font-style: normal;
-  font-display: swap;
-}
+/* Geist — ADS body and UI typeface (SIL Open Font License, bundled).
+   One variable face covers every weight; ADS source uses only Regular (400)
+   and Medium (500). `font-synthesis-weight: none` (index.css) blocks faux
+   bolding.
+
+   Season Mix — ADS heading typeface (`--font-heading`). It is a licensed
+   font, so ADS does NOT bundle or redistribute it: each product declares its
+   own `@font-face { font-family: "Season Mix"; … }` from its licensed file.
+   Without it, headings fall back to the platform serif. */
 @font-face {
-  font-family: "Aribau Grotesk";
-  src: url("./fonts/aribau-grotesk-medium.woff2") format("woff2");
-  font-weight: 500 900;
+  font-family: "Geist";
+  src: url("./fonts/geist-variable.woff2") format("woff2");
+  font-weight: 100 900;
   font-style: normal;
   font-display: swap;
 }

package/lib/icons.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as p, Fragment as d, jsx as a } from "react/jsx-runtime";
 import * as r from "react";
-import { Code as $, Check as k, Copy as S, FileText as f, UploadSimple as P, X as T, EyeSlash as w, Eye as L, MagnifyingGlass as A, Minus as m, Plus as x, CaretDown as B, Info as I, WarningCircle as y, Warning as U, CheckCircle as F, CaretRight as M, CaretUp as D, ArrowsDownUp as O, ChatCircle as b, ArrowUpRight as R, Clock as v, Database as H, ArrowSquareOut as E, Table as G, CaretLeft as W, CornersOut as z, Magnet as V, Tray as N, ArrowLeft as j, DotsThree as X, User as Q, XCircle as q, CircleDashed as _, ArrowsClockwise as J, Paperclip as K, Quotes as Y, At as Z, Lightning as ee, Sparkle as oe, File as te, DownloadSimple as ne, Image as C, BracketsCurly as se, MusicNotes as ae, VideoCamera as re, ImageBroken as ce, Pulse as ie, Archive as le, ArrowDown as he, ArrowRight as Ce, ArrowUp as ge, Scroll as ue, Bell as pe, Stack as de, BookOpen as $e, Brain as ke, CalendarBlank as Se, Phone as fe, ListChecks as Pe, Cube as Te, DotsNine as we, FunnelSimple as Le, Folder as Ae, FolderOpen as me, Gauge as xe, GitBranch as Be, Hash as Ie, ClockCounterClockwise as ye, House as Ue, SquaresFour as Fe, Leaf as Me, Lightbulb as De, Link as Oe, CircleNotch as be, SignOut as Re, Envelope as ve, Microphone as He, MicrophoneSlash as Ee, DotsThreeVertical as Ge, Palette as We, SidebarSimple as ze, Pause as Ve, PencilSimple as Ne, PhoneIncoming as je, PhoneSlash as Xe, ChartPie as Qe, Play as qe, Plug as _e, Presentation as Je, Rocket as Ke, Gear as Ye, Shapes as Ze, ShareNetwork as eo, Star as oo, Stop as to, ArrowsLeftRight as no, Target as so, Binoculars as ao, TextB as ro, TextT as co, TextItalic as io, TextStrikethrough as lo, TextUnderline as ho, ToggleRight as Co, Trash as go, Users as uo, Wrench as po } from "@phosphor-icons/react";
+import { Info as $, Code as k, Check as S, Copy as f, FileText as P, UploadSimple as T, X as w, EyeSlash as L, Eye as A, MagnifyingGlass as m, Minus as x, Plus as B, CaretDown as I, FunnelSimple as y, WarningCircle as U, Warning as F, CheckCircle as M, CaretRight as D, CaretUp as O, ArrowsDownUp as b, ChatCircle as R, ArrowUpRight as v, Clock as H, Database as E, ArrowSquareOut as G, Table as W, CaretLeft as z, CornersOut as V, Magnet as N, Tray as j, ArrowLeft as X, DotsThree as Q, User as q, XCircle as _, CircleDashed as J, ArrowsClockwise as K, Paperclip as Y, Quotes as Z, At as ee, Lightning as oe, Sparkle as te, File as ne, DownloadSimple as se, Image as C, BracketsCurly as ae, MusicNotes as re, VideoCamera as ce, ImageBroken as ie, Pulse as le, Archive as he, ArrowDown as Ce, ArrowRight as ge, ArrowUp as ue, Scroll as pe, Bell as de, Stack as $e, BookOpen as ke, Brain as Se, CalendarBlank as fe, Phone as Pe, ListChecks as Te, Cube as we, DotsNine as Le, Folder as Ae, FolderOpen as me, Gauge as xe, GitBranch as Be, Hash as Ie, ClockCounterClockwise as ye, House as Ue, SquaresFour as Fe, Leaf as Me, Lightbulb as De, Link as Oe, CircleNotch as be, SignOut as Re, Envelope as ve, Microphone as He, MicrophoneSlash as Ee, DotsThreeVertical as Ge, Palette as We, SidebarSimple as ze, Pause as Ve, PencilSimple as Ne, PhoneIncoming as je, PhoneSlash as Xe, ChartPie as Qe, Play as qe, Plug as _e, Presentation as Je, Rocket as Ke, Gear as Ye, Shapes as Ze, ShareNetwork as eo, Star as oo, Stop as to, ArrowsLeftRight as no, Target as so, Binoculars as ao, TextB as ro, TextT as co, TextItalic as io, TextStrikethrough as lo, TextUnderline as ho, ToggleRight as Co, Trash as go, Users as uo, Wrench as po } from "@phosphor-icons/react";
 const $o = r.createContext(!1), ko = /* @__PURE__ */ new Set(["Info"]), So = new Set(
   [
     "FunnelSimple",
@@ -58,10 +58,10 @@ function e(o, c) {
   });
   return i.displayName = c, i;
 }
-const wo = e(he, "ArrowDown"), Lo = e(j, "ArrowLeft"), Ao = e(Ce, "ArrowRight"), mo = e(ge, "ArrowUp"), xo = e(R, "ArrowUpRight"), Bo = e(B, "ChevronDown"), Io = e(W, "ChevronLeft"), yo = e(M, "ChevronRight"), Uo = e(D, "ChevronUp"), Fo = e(O, "SortIcon"), Mo = e(no, "SwapHorizontal"), Do = e(E, "ExternalLink"), Oo = e(ze, "PanelLeft"), bo = e(Z, "At"), Ro = e(fe, "Call"), vo = e(je, "PhoneIncoming"), Ho = e(T, "Close"), Eo = e(q, "CloseCircle"), Go = e(S, "Copy"), Wo = e(ne, "Download"), zo = e(Re, "LogOut"), Vo = e(He, "Mic"), No = e(Ee, "MicOff"), jo = e(Xe, "PhoneOff"), Xo = e(Ne, "Pencil"), Qo = e(Y, "Quote"), qo = e(L, "Eye"), _o = e(w, "EyeOff"), Jo = e(Ie, "Hash"), Ko = e(C, "ImageUpload"), Yo = e(P, "Upload"), Zo = e(co, "TextFont"), et = e(ro, "TextBold"), ot = e(io, "TextItalicStyle"), tt = e(lo, "TextStrike"), nt = e(
+const wo = e(Ce, "ArrowDown"), Lo = e(X, "ArrowLeft"), Ao = e(ge, "ArrowRight"), mo = e(ue, "ArrowUp"), xo = e(v, "ArrowUpRight"), Bo = e(I, "ChevronDown"), Io = e(z, "ChevronLeft"), yo = e(D, "ChevronRight"), Uo = e(O, "ChevronUp"), Fo = e(b, "SortIcon"), Mo = e(no, "SwapHorizontal"), Do = e(G, "ExternalLink"), Oo = e(ze, "PanelLeft"), bo = e(ee, "At"), Ro = e(Pe, "Call"), vo = e(je, "PhoneIncoming"), Ho = e(w, "Close"), Eo = e(_, "CloseCircle"), Go = e(f, "Copy"), Wo = e(se, "Download"), zo = e(Re, "LogOut"), Vo = e(He, "Mic"), No = e(Ee, "MicOff"), jo = e(Xe, "PhoneOff"), Xo = e(Ne, "Pencil"), Qo = e(Z, "Quote"), qo = e(A, "Eye"), _o = e(L, "EyeOff"), Jo = e(Ie, "Hash"), Ko = e(C, "ImageUpload"), Yo = e(T, "Upload"), Zo = e(co, "TextFont"), et = e(ro, "TextBold"), ot = e(io, "TextItalicStyle"), tt = e(lo, "TextStrike"), nt = e(
   ho,
   "TextUnderlineStyle"
-), st = e(Co, "ToggleOn"), at = e(Se, "Calendar"), rt = e(v, "Clock"), ct = e($, "Code"), it = e(to, "Stop"), lt = e(V, "Magnet"), ht = e(z, "Maximize"), Ct = e(m, "Minus"), gt = e(X, "MoreHorizontal"), ut = e(Ge, "MoreVertical"), pt = e(we, "DragHandle"), dt = e(Oe, "Link"), $t = e(x, "Plus"), kt = e(J, "Refresh"), St = e(ue, "AuditTrail"), ft = e(A, "Search"), Pt = e(eo, "Share"), Tt = e(go, "Trash"), wt = e(k, "Check"), Lt = e(be, "Loader"), At = e(F, "CheckCircle"), mt = e(I, "Info"), xt = e(U, "Warning"), Bt = e(pe, "Bell"), It = e(y, "WarningCircle"), yt = e(ie, "Activity"), Ut = e(b, "AgentChat"), Ft = e(ee, "Bolt"), Mt = e($e, "BookOpen"), Dt = e(ke, "Brain"), Ot = e(Pe, "CheckList"), bt = e(Te, "Component"), Rt = e(H, "Database"), vt = e(G, "Table"), Ht = e(Le, "Filter"), Et = e(le, "Archive"), Gt = e(te, "File"), Wt = e(f, "FileText"), zt = e(Ae, "Folder"), Vt = e(C, "Image"), Nt = e(ce, "ImageOff"), jt = e(ae, "Music"), Xt = e(re, "Video"), Qt = e(se, "Braces"), qt = e(me, "FolderOpen"), _t = e(xe, "Gauge"), Jt = e(Be, "GitBranch"), Kt = e(ye, "HistoryClock"), Yt = e(Ue, "Home"), Zt = e(de, "Blocks"), en = e(N, "Inbox"), on = e(De, "Lightbulb"), tn = e(Me, "Leaf"), nn = e(Fe, "LayoutGrid"), sn = e(ve, "Mail"), an = e(We, "Palette"), rn = e(Qe, "PieChart"), cn = e(_e, "Plug"), ln = e(Ke, "Rocket"), hn = e(Ye, "Settings"), Cn = e(Ze, "Shapes"), gn = e(oe, "Sparkles"), un = e(oo, "Star"), pn = e(ao, "Telescope"), dn = e(so, "Target"), $n = e(Q, "User"), kn = e(uo, "Users"), Sn = e(qe, "Play"), fn = e(Je, "Presentation"), Pn = e(Ve, "Pause"), Tn = e(K, "Paperclip"), wn = e(_, "CircleDashed"), Ln = e(po, "Wrench");
+), st = e(Co, "ToggleOn"), at = e(fe, "Calendar"), rt = e(H, "Clock"), ct = e(k, "Code"), it = e(to, "Stop"), lt = e(N, "Magnet"), ht = e(V, "Maximize"), Ct = e(x, "Minus"), gt = e(Q, "MoreHorizontal"), ut = e(Ge, "MoreVertical"), pt = e(Le, "DragHandle"), dt = e(Oe, "Link"), $t = e(B, "Plus"), kt = e(K, "Refresh"), St = e(pe, "AuditTrail"), ft = e(m, "Search"), Pt = e(eo, "Share"), Tt = e(go, "Trash"), wt = e(S, "Check"), Lt = e(be, "Loader"), At = e(M, "CheckCircle"), mt = e($, "Info"), xt = e(F, "Warning"), Bt = e(de, "Bell"), It = e(U, "WarningCircle"), yt = e(le, "Activity"), Ut = e(R, "AgentChat"), Ft = e(oe, "Bolt"), Mt = e(ke, "BookOpen"), Dt = e(Se, "Brain"), Ot = e(Te, "CheckList"), bt = e(we, "Component"), Rt = e(E, "Database"), vt = e(W, "Table"), Ht = e(y, "Filter"), Et = e(he, "Archive"), Gt = e(ne, "File"), Wt = e(P, "FileText"), zt = e(Ae, "Folder"), Vt = e(C, "Image"), Nt = e(ie, "ImageOff"), jt = e(re, "Music"), Xt = e(ce, "Video"), Qt = e(ae, "Braces"), qt = e(me, "FolderOpen"), _t = e(xe, "Gauge"), Jt = e(Be, "GitBranch"), Kt = e(ye, "HistoryClock"), Yt = e(Ue, "Home"), Zt = e($e, "Blocks"), en = e(j, "Inbox"), on = e(De, "Lightbulb"), tn = e(Me, "Leaf"), nn = e(Fe, "LayoutGrid"), sn = e(ve, "Mail"), an = e(We, "Palette"), rn = e(Qe, "PieChart"), cn = e(_e, "Plug"), ln = e(Ke, "Rocket"), hn = e(Ye, "Settings"), Cn = e(Ze, "Shapes"), gn = e(te, "Sparkles"), un = e(oo, "Star"), pn = e(ao, "Telescope"), dn = e(so, "Target"), $n = e(q, "User"), kn = e(uo, "Users"), Sn = e(qe, "Play"), fn = e(Je, "Presentation"), Pn = e(Ve, "Pause"), Tn = e(Y, "Paperclip"), wn = e(J, "CircleDashed"), Ln = e(po, "Wrench");
 export {
   yt as Activity,
   Ut as AgentChat,