agentic-ds-kit 0.1.0 → 0.2.0

package/dist/ui/patterns/EmptyFirstRunPattern/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyFirstRunPattern } from './EmptyFirstRunPattern';
+export type { EmptyFirstRunPatternProps } from './EmptyFirstRunPattern';

package/dist/ui/patterns/InboxPattern/InboxPattern.d.ts

@@ -0,0 +1,5 @@
+import { PageHeaderProps } from '../../PageHeader';
+export interface InboxPatternProps {
+    breadcrumbs?: PageHeaderProps["breadcrumbs"];
+}
+export declare function InboxPattern({ breadcrumbs }: InboxPatternProps): import("react").JSX.Element;

package/dist/ui/patterns/InboxPattern/InboxPattern.js

@@ -0,0 +1,275 @@
+"use client";
+import { Button as e } from "../../Button/Button.js";
+import { Avatar as t } from "../../Avatar/Avatar.js";
+import { Badge as n } from "../../Badge/Badge.js";
+import { Cell as r } from "../../Cell/Cell.js";
+import { Empty as i } from "../../Empty/Empty.js";
+import { PageHeader as a } from "../../PageHeader/PageHeader.js";
+import { Scoreboard as o } from "../../Scoreboard/Scoreboard.js";
+import { Section as s } from "../../Section/Section.js";
+import { Table as c } from "../../Table/Table.js";
+import { Tabs as l } from "../../Tabs/Tabs.js";
+import { Toast as u } from "../../Toast/Toast.js";
+import { INBOX as d, filterMessages as f } from "./inbox-data.js";
+import { InboxReplyDrawer as p } from "./InboxReplyDrawer.js";
+import m from "./InboxPattern.module.js";
+import { useEffect as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region ui/patterns/InboxPattern/InboxPattern.tsx
+var b = [
+	{
+		key: "from",
+		header: "From",
+		emphasis: !0
+	},
+	{
+		key: "subject",
+		header: "Subject"
+	},
+	{
+		key: "kind",
+		header: "Type"
+	},
+	{
+		key: "when",
+		header: "When"
+	},
+	{
+		key: "open",
+		header: ""
+	}
+];
+function x({ messages: t, onOpen: i }) {
+	return /* @__PURE__ */ v(c, {
+		caption: "Inbox",
+		size: "sm",
+		emptyLabel: "No messages in this filter.",
+		columns: b,
+		rows: t.map((t) => ({
+			from: /* @__PURE__ */ v(r, {
+				type: "avatar",
+				size: "sm",
+				name: t.from,
+				src: t.fromSrc,
+				label: t.from
+			}),
+			subject: t.subject,
+			kind: /* @__PURE__ */ v(n, {
+				tone: t.kindTone,
+				size: "sm",
+				children: t.kind
+			}),
+			when: t.when,
+			open: /* @__PURE__ */ v(e, {
+				variant: "tertiary",
+				size: "sm",
+				onClick: () => i(t.id),
+				children: "Open"
+			})
+		}))
+	});
+}
+function S({ breadcrumbs: r }) {
+	let [c, b] = g(d), [S, C] = g("all"), [w, T] = g(d[0]?.id ?? null), [E, D] = g(!1), [O, k] = g(!1), A = c.find((e) => e.id === w) ?? null, j = c.filter((e) => e.unread).length;
+	h(() => {
+		let e = f(c, S);
+		w && e.some((e) => e.id === w) || (T(e[0]?.id ?? null), D(!1));
+	}, [
+		w,
+		S,
+		c
+	]);
+	function M(e) {
+		b((t) => t.filter((t) => t.id !== e)), D(!1);
+	}
+	function N(e) {
+		T(e), D(!0);
+	}
+	function P() {
+		A && (b((e) => e.map((e) => e.id === A.id ? {
+			...e,
+			unread: !1
+		} : e)), k(!0));
+	}
+	return /* @__PURE__ */ y("div", {
+		className: "layout-canvas layout-canvas--sticky-header",
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "layout-header",
+				children: /* @__PURE__ */ v(a, {
+					title: "Inbox",
+					subtitle: "Replies, mentions, and requests waiting on you.",
+					breadcrumbs: r
+				})
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "layout-content",
+				children: [
+					/* @__PURE__ */ v(s, {
+						title: "At a glance",
+						children: /* @__PURE__ */ v(o, {
+							className: "layout-metrics layout-metrics--fixed-4",
+							"aria-label": "Inbox this week",
+							items: [
+								{
+									label: "Unread",
+									value: String(j),
+									delta: `+${j}`,
+									trend: "up",
+									hint: "need a look",
+									size: "lg",
+									badge: "Live",
+									badgeTone: "danger"
+								},
+								{
+									label: "Mentions",
+									value: String(c.filter((e) => e.kind === "Mention").length),
+									delta: "+1",
+									trend: "up",
+									hint: "this sprint",
+									size: "lg",
+									badge: "You",
+									badgeTone: "brand"
+								},
+								{
+									label: "Requests",
+									value: String(c.filter((e) => e.kind === "Request").length),
+									delta: "+2",
+									trend: "up",
+									hint: "this sprint",
+									size: "lg",
+									badge: "Review",
+									badgeTone: "warning"
+								},
+								{
+									label: "Open",
+									value: String(c.length),
+									delta: "0",
+									trend: "flat",
+									hint: "in inbox",
+									size: "lg",
+									badge: "Sprint",
+									badgeTone: "info"
+								}
+							]
+						})
+					}),
+					/* @__PURE__ */ v(s, {
+						title: "Messages",
+						description: `${j} unread`,
+						children: /* @__PURE__ */ v(l, {
+							ariaLabel: "Inbox type",
+							variant: "line",
+							size: "md",
+							value: S,
+							onChange: C,
+							items: [
+								{
+									id: "all",
+									label: "All",
+									content: /* @__PURE__ */ v(x, {
+										messages: f(c, "all"),
+										onOpen: N
+									})
+								},
+								{
+									id: "unread",
+									label: "Unread",
+									content: /* @__PURE__ */ v(x, {
+										messages: f(c, "unread"),
+										onOpen: N
+									})
+								},
+								{
+									id: "mentions",
+									label: "Mentions",
+									content: /* @__PURE__ */ v(x, {
+										messages: f(c, "mentions"),
+										onOpen: N
+									})
+								},
+								{
+									id: "requests",
+									label: "Requests",
+									content: /* @__PURE__ */ v(x, {
+										messages: f(c, "requests"),
+										onOpen: N
+									})
+								}
+							]
+						})
+					}),
+					/* @__PURE__ */ v(s, {
+						title: A?.subject ?? "Message",
+						description: A ? `${A.from} · ${A.when}` : "Select a row",
+						actions: A ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(e, {
+							variant: "secondary",
+							size: "sm",
+							onClick: () => M(A.id),
+							children: "Archive"
+						}), /* @__PURE__ */ v(e, {
+							variant: E ? "secondary" : "primary",
+							size: "sm",
+							onClick: () => N(A.id),
+							children: "Reply"
+						})] }) : void 0,
+						children: A ? /* @__PURE__ */ y("div", {
+							className: m.detail,
+							children: [/* @__PURE__ */ y("div", {
+								className: m.meta,
+								children: [
+									/* @__PURE__ */ v(t, {
+										name: A.from,
+										src: A.fromSrc,
+										size: "md"
+									}),
+									/* @__PURE__ */ y("div", {
+										className: m.copy,
+										children: [/* @__PURE__ */ v("p", {
+											className: m.label,
+											children: "From"
+										}), /* @__PURE__ */ v("p", {
+											className: m.value,
+											children: A.from
+										})]
+									}),
+									/* @__PURE__ */ v(n, {
+										tone: A.kindTone,
+										children: A.kind
+									})
+								]
+							}), /* @__PURE__ */ v("p", {
+								className: m.body,
+								children: A.body
+							})]
+						}) : /* @__PURE__ */ v(i, {
+							title: "No message selected",
+							description: "Open a row to read it here.",
+							icon: "Mail",
+							outlined: !0
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ v(p, {
+				message: A,
+				open: E,
+				onClose: () => D(!1),
+				onSend: P
+			}, A?.id ?? "none"),
+			/* @__PURE__ */ v(u, {
+				open: O,
+				title: "Reply sent",
+				description: "It will show up in the thread.",
+				status: "success",
+				duration: 3e3,
+				onClose: () => k(!1),
+				onOpenChange: k
+			})
+		]
+	});
+}
+//#endregion
+export { S as InboxPattern };
+
+//# sourceMappingURL=InboxPattern.js.map

package/dist/ui/patterns/InboxPattern/InboxPattern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxPattern.js","names":[],"sources":["../../../../ui/patterns/InboxPattern/InboxPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Avatar } from \"../../Avatar\";\nimport { Badge } from \"../../Badge\";\nimport { Button } from \"../../Button\";\nimport { Cell } from \"../../Cell\";\nimport { Empty } from \"../../Empty\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Scoreboard } from \"../../Scoreboard\";\nimport { Section } from \"../../Section\";\nimport { Table } from \"../../Table\";\nimport { Tabs } from \"../../Tabs\";\nimport { Toast } from \"../../Toast\";\nimport { filterMessages, INBOX, type InboxMessage } from \"./inbox-data\";\nimport { InboxReplyDrawer } from \"./InboxReplyDrawer\";\nimport styles from \"./InboxPattern.module.css\";\n\nconst COLUMNS = [\n  { key: \"from\", header: \"From\", emphasis: true },\n  { key: \"subject\", header: \"Subject\" },\n  { key: \"kind\", header: \"Type\" },\n  { key: \"when\", header: \"When\" },\n  { key: \"open\", header: \"\" },\n];\n\nfunction InboxTable({\n  messages,\n  onOpen,\n}: {\n  messages: InboxMessage[];\n  onOpen: (id: string) => void;\n}) {\n  return (\n    <Table\n      caption=\"Inbox\"\n      size=\"sm\"\n      emptyLabel=\"No messages in this filter.\"\n      columns={COLUMNS}\n      rows={messages.map((item) => ({\n        from: <Cell type=\"avatar\" size=\"sm\" name={item.from} src={item.fromSrc} label={item.from} />,\n        subject: item.subject,\n        kind: <Badge tone={item.kindTone} size=\"sm\">{item.kind}</Badge>,\n        when: item.when,\n        open: (\n          <Button variant=\"tertiary\" size=\"sm\" onClick={() => onOpen(item.id)}>\n            Open\n          </Button>\n        ),\n      }))}\n    />\n  );\n}\n\nexport interface InboxPatternProps {\n  breadcrumbs?: PageHeaderProps[\"breadcrumbs\"];\n}\n\nexport function InboxPattern({ breadcrumbs }: InboxPatternProps) {\n  const [messages, setMessages] = useState(INBOX);\n  const [tab, setTab] = useState(\"all\");\n  const [selectedId, setSelectedId] = useState<string | null>(INBOX[0]?.id ?? null);\n  const [drawerOpen, setDrawerOpen] = useState(false);\n  const [toastOpen, setToastOpen] = useState(false);\n\n  const selected = messages.find((item) => item.id === selectedId) ?? null;\n  const unread = messages.filter((item) => item.unread).length;\n\n  useEffect(() => {\n    const next = filterMessages(messages, tab);\n    if (selectedId && next.some((item) => item.id === selectedId)) return;\n    setSelectedId(next[0]?.id ?? null);\n    setDrawerOpen(false);\n  }, [selectedId, tab, messages]);\n\n  function archive(id: string) {\n    setMessages((current) => current.filter((item) => item.id !== id));\n    setDrawerOpen(false);\n  }\n\n  function openMessage(id: string) {\n    setSelectedId(id);\n    setDrawerOpen(true);\n  }\n\n  function sendReply() {\n    if (!selected) return;\n    setMessages((current) =>\n      current.map((item) => (item.id === selected.id ? { ...item, unread: false } : item)),\n    );\n    setToastOpen(true);\n  }\n\n  return (\n    <div className=\"layout-canvas layout-canvas--sticky-header\">\n      <div className=\"layout-header\">\n        <PageHeader\n          title=\"Inbox\"\n          subtitle=\"Replies, mentions, and requests waiting on you.\"\n          breadcrumbs={breadcrumbs}\n        />\n      </div>\n      <div className=\"layout-content\">\n        <Section title=\"At a glance\">\n          <Scoreboard\n            className=\"layout-metrics layout-metrics--fixed-4\"\n            aria-label=\"Inbox this week\"\n            items={[\n              { label: \"Unread\", value: String(unread), delta: `+${unread}`, trend: \"up\" as const, hint: \"need a look\", size: \"lg\" as const, badge: \"Live\", badgeTone: \"danger\" as const },\n              { label: \"Mentions\", value: String(messages.filter((item) => item.kind === \"Mention\").length), delta: \"+1\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"You\", badgeTone: \"brand\" as const },\n              { label: \"Requests\", value: String(messages.filter((item) => item.kind === \"Request\").length), delta: \"+2\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Review\", badgeTone: \"warning\" as const },\n              { label: \"Open\", value: String(messages.length), delta: \"0\", trend: \"flat\" as const, hint: \"in inbox\", size: \"lg\" as const, badge: \"Sprint\", badgeTone: \"info\" as const },\n            ]}\n          />\n        </Section>\n        <Section title=\"Messages\" description={`${unread} unread`}>\n          <Tabs\n            ariaLabel=\"Inbox type\"\n            variant=\"line\"\n            size=\"md\"\n            value={tab}\n            onChange={setTab}\n            items={[\n              { id: \"all\", label: \"All\", content: <InboxTable messages={filterMessages(messages, \"all\")} onOpen={openMessage} /> },\n              { id: \"unread\", label: \"Unread\", content: <InboxTable messages={filterMessages(messages, \"unread\")} onOpen={openMessage} /> },\n              { id: \"mentions\", label: \"Mentions\", content: <InboxTable messages={filterMessages(messages, \"mentions\")} onOpen={openMessage} /> },\n              { id: \"requests\", label: \"Requests\", content: <InboxTable messages={filterMessages(messages, \"requests\")} onOpen={openMessage} /> },\n            ]}\n          />\n        </Section>\n        <Section\n          title={selected?.subject ?? \"Message\"}\n          description={selected ? `${selected.from} · ${selected.when}` : \"Select a row\"}\n          actions={\n            selected ? (\n              <>\n                <Button variant=\"secondary\" size=\"sm\" onClick={() => archive(selected.id)}>\n                  Archive\n                </Button>\n                <Button\n                  variant={drawerOpen ? \"secondary\" : \"primary\"}\n                  size=\"sm\"\n                  onClick={() => openMessage(selected.id)}\n                >\n                  Reply\n                </Button>\n              </>\n            ) : undefined\n          }\n        >\n          {selected ? (\n            <div className={styles.detail}>\n              <div className={styles.meta}>\n                <Avatar name={selected.from} src={selected.fromSrc} size=\"md\" />\n                <div className={styles.copy}>\n                  <p className={styles.label}>From</p>\n                  <p className={styles.value}>{selected.from}</p>\n                </div>\n                <Badge tone={selected.kindTone}>{selected.kind}</Badge>\n              </div>\n              <p className={styles.body}>{selected.body}</p>\n            </div>\n          ) : (\n            <Empty\n              title=\"No message selected\"\n              description=\"Open a row to read it here.\"\n              icon=\"Mail\"\n              outlined\n            />\n          )}\n        </Section>\n      </div>\n      <InboxReplyDrawer\n        key={selected?.id ?? \"none\"}\n        message={selected}\n        open={drawerOpen}\n        onClose={() => setDrawerOpen(false)}\n        onSend={sendReply}\n      />\n      <Toast\n        open={toastOpen}\n        title=\"Reply sent\"\n        description=\"It will show up in the thread.\"\n        status=\"success\"\n        duration={3000}\n        onClose={() => setToastOpen(false)}\n        onOpenChange={setToastOpen}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/{ui → dist/ui}/patterns/InboxPattern/InboxPattern.module.css

@@ -1,21 +1,21 @@
-.detail {
+._detail_6vptx_1 {
   display: grid;
   gap: var(--space-stack-lg);
 }
 
-.meta {
+._meta_6vptx_6 {
   display: flex;
   align-items: center;
   gap: var(--space-inline-md);
   min-width: 0;
 }
 
-.copy {
+._copy_6vptx_13 {
   min-width: 0;
   flex: 1;
 }
 
-.label {
+._label_6vptx_18 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-caption);
@@ -23,7 +23,7 @@
   color: var(--text-secondary);
 }
 
-.value {
+._value_6vptx_26 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-body-sm);
@@ -31,7 +31,7 @@
   color: var(--text-primary);
 }
 
-.body {
+._body_6vptx_34 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-body);

package/dist/ui/patterns/InboxPattern/InboxPattern.module.js

@@ -0,0 +1,14 @@
+import "./InboxPattern.module.css";
+//#region ui/patterns/InboxPattern/InboxPattern.module.css
+var e = "_detail_6vptx_1", t = "_meta_6vptx_6", n = "_copy_6vptx_13", r = "_label_6vptx_18", i = "_value_6vptx_26", a = "_body_6vptx_34", o = {
+	detail: e,
+	meta: t,
+	copy: n,
+	label: r,
+	value: i,
+	body: a
+};
+//#endregion
+export { a as body, n as copy, o as default, e as detail, r as label, t as meta, i as value };
+
+//# sourceMappingURL=InboxPattern.module.js.map

package/dist/ui/patterns/InboxPattern/InboxPattern.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxPattern.module.js","names":[],"sources":["../../../../ui/patterns/InboxPattern/InboxPattern.module.css"],"sourcesContent":[".detail {\n  display: grid;\n  gap: var(--space-stack-lg);\n}\n\n.meta {\n  display: flex;\n  align-items: center;\n  gap: var(--space-inline-md);\n  min-width: 0;\n}\n\n.copy {\n  min-width: 0;\n  flex: 1;\n}\n\n.label {\n  margin: 0;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-caption);\n  font-weight: var(--type-weight-caption);\n  color: var(--text-secondary);\n}\n\n.value {\n  margin: 0;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body-sm);\n  font-weight: var(--type-weight-label);\n  color: var(--text-primary);\n}\n\n.body {\n  margin: 0;\n  font-family: var(--font-sans);\n  font-size: var(--type-size-body);\n  line-height: var(--type-line-body);\n  color: var(--text-secondary);\n}\n"],"mappings":""}

package/dist/ui/patterns/InboxPattern/InboxReplyDrawer.d.ts

@@ -0,0 +1,7 @@
+import { InboxMessage } from './inbox-data';
+export declare function InboxReplyDrawer({ message, open, onClose, onSend, }: {
+    message: InboxMessage | null;
+    open: boolean;
+    onClose: () => void;
+    onSend: () => void;
+}): import("react").JSX.Element;

package/dist/ui/patterns/InboxPattern/InboxReplyDrawer.js

@@ -0,0 +1,87 @@
+"use client";
+import { Button as e } from "../../Button/Button.js";
+import { Input as t } from "../../Input/Input.js";
+import { Drawer as n } from "../../Drawer/Drawer.js";
+import { Field as r } from "../../Field/Field.js";
+import { FieldSet as i } from "../../FieldSet/FieldSet.js";
+import { Textarea as a } from "../../Textarea/Textarea.js";
+import { useId as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region ui/patterns/InboxPattern/InboxReplyDrawer.tsx
+function d({ message: d, open: f, onClose: p, onSend: m }) {
+	let h = o(), g = `${h}-to`, _ = `${h}-subject`, v = `${h}-reply`, [y, b] = s();
+	function x() {
+		b(void 0), p();
+	}
+	function S() {
+		if (!(document.getElementById(v)?.value.trim() ?? "")) {
+			b("Write a reply before sending.");
+			return;
+		}
+		m(), b(void 0), p();
+	}
+	function C(e) {
+		e.preventDefault(), S();
+	}
+	return /* @__PURE__ */ l(n, {
+		open: f && !!d,
+		title: d ? `Reply to ${d.from}` : "Reply",
+		description: d?.subject,
+		onClose: x,
+		footer: d ? /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(e, {
+			variant: "primary",
+			block: !0,
+			onClick: S,
+			children: "Send reply"
+		}), /* @__PURE__ */ l(e, {
+			variant: "secondary",
+			block: !0,
+			onClick: x,
+			children: "Cancel"
+		})] }) : null,
+		children: d ? /* @__PURE__ */ l("form", {
+			onSubmit: C,
+			children: /* @__PURE__ */ u(i, {
+				legend: "Reply",
+				description: "This goes back to the thread.",
+				children: [
+					/* @__PURE__ */ l(r, {
+						label: "To",
+						htmlFor: g,
+						children: /* @__PURE__ */ l(t, {
+							id: g,
+							name: "to",
+							defaultValue: d.from
+						})
+					}),
+					/* @__PURE__ */ l(r, {
+						label: "Subject",
+						htmlFor: _,
+						children: /* @__PURE__ */ l(t, {
+							id: _,
+							name: "subject",
+							defaultValue: `Re: ${d.subject}`
+						})
+					}),
+					/* @__PURE__ */ l(r, {
+						label: "Message",
+						htmlFor: v,
+						hint: "Keep it short. They already have the thread.",
+						error: y,
+						children: /* @__PURE__ */ l(a, {
+							id: v,
+							name: "reply",
+							rows: 6,
+							placeholder: "Write a reply...",
+							error: !!y
+						})
+					})
+				]
+			}, d.id)
+		}) : null
+	});
+}
+//#endregion
+export { d as InboxReplyDrawer };
+
+//# sourceMappingURL=InboxReplyDrawer.js.map

package/dist/ui/patterns/InboxPattern/InboxReplyDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxReplyDrawer.js","names":[],"sources":["../../../../ui/patterns/InboxPattern/InboxReplyDrawer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useState, type FormEvent } from \"react\";\nimport { Button } from \"../../Button\";\nimport { Drawer } from \"../../Drawer\";\nimport { Field } from \"../../Field\";\nimport { FieldSet } from \"../../FieldSet\";\nimport { Input } from \"../../Input\";\nimport { Textarea } from \"../../Textarea\";\nimport type { InboxMessage } from \"./inbox-data\";\n\nexport function InboxReplyDrawer({\n  message,\n  open,\n  onClose,\n  onSend,\n}: {\n  message: InboxMessage | null;\n  open: boolean;\n  onClose: () => void;\n  onSend: () => void;\n}) {\n  const baseId = useId();\n  const toId = `${baseId}-to`;\n  const subjectId = `${baseId}-subject`;\n  const replyId = `${baseId}-reply`;\n  const [error, setError] = useState<string | undefined>();\n\n  function close() {\n    setError(undefined);\n    onClose();\n  }\n\n  function send() {\n    const reply = (document.getElementById(replyId) as HTMLTextAreaElement | null)?.value.trim() ?? \"\";\n    if (!reply) {\n      setError(\"Write a reply before sending.\");\n      return;\n    }\n    onSend();\n    setError(undefined);\n    onClose();\n  }\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    send();\n  }\n\n  return (\n    <Drawer\n      open={open && Boolean(message)}\n      title={message ? `Reply to ${message.from}` : \"Reply\"}\n      description={message?.subject}\n      onClose={close}\n      footer={\n        message ? (\n          <>\n            <Button variant=\"primary\" block onClick={send}>\n              Send reply\n            </Button>\n            <Button variant=\"secondary\" block onClick={close}>\n              Cancel\n            </Button>\n          </>\n        ) : null\n      }\n    >\n      {message ? (\n        <form onSubmit={handleSubmit}>\n          <FieldSet key={message.id} legend=\"Reply\" description=\"This goes back to the thread.\">\n            <Field label=\"To\" htmlFor={toId}>\n              <Input id={toId} name=\"to\" defaultValue={message.from} />\n            </Field>\n            <Field label=\"Subject\" htmlFor={subjectId}>\n              <Input id={subjectId} name=\"subject\" defaultValue={`Re: ${message.subject}`} />\n            </Field>\n            <Field\n              label=\"Message\"\n              htmlFor={replyId}\n              hint=\"Keep it short. They already have the thread.\"\n              error={error}\n            >\n              <Textarea\n                id={replyId}\n                name=\"reply\"\n                rows={6}\n                placeholder=\"Write a reply...\"\n                error={Boolean(error)}\n              />\n            </Field>\n          </FieldSet>\n        </form>\n      ) : null}\n    </Drawer>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,EAAiB,EAC/B,YACA,SACA,YACA,aAMC;CACD,IAAM,IAAS,EAAM,GACf,IAAO,GAAG,EAAO,MACjB,IAAY,GAAG,EAAO,WACtB,IAAU,GAAG,EAAO,SACpB,CAAC,GAAO,KAAY,EAA6B;CAEvD,SAAS,IAAQ;EAEf,AADA,EAAS,KAAA,CAAS,GAClB,EAAQ;CACV;CAEA,SAAS,IAAO;EAEd,IAAI,EADW,SAAS,eAAe,CAAO,CAAC,EAAiC,MAAM,KAAK,KAAK,KACpF;GACV,EAAS,+BAA+B;GACxC;EACF;EAGA,AAFA,EAAO,GACP,EAAS,KAAA,CAAS,GAClB,EAAQ;CACV;CAEA,SAAS,EAAa,GAAmC;EAEvD,AADA,EAAM,eAAe,GACrB,EAAK;CACP;CAEA,OACE,kBAAC,GAAD;EACE,MAAM,KAAQ,EAAQ;EACtB,OAAO,IAAU,YAAY,EAAQ,SAAS;EAC9C,aAAa,GAAS;EACtB,SAAS;EACT,QACE,IACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GAAQ,SAAQ;GAAU,OAAA;GAAM,SAAS;GAAM,UAAA;EAEvC,CAAA,GACR,kBAAC,GAAD;GAAQ,SAAQ;GAAY,OAAA;GAAM,SAAS;GAAO,UAAA;EAE1C,CAAA,CACR,EAAA,CAAA,IACA;EAGL,UAAA,IACC,kBAAC,QAAD;GAAM,UAAU;GACd,UAAA,kBAAC,GAAD;IAA2B,QAAO;IAAQ,aAAY;IAAtD,UAAA;KACE,kBAAC,GAAD;MAAO,OAAM;MAAK,SAAS;MACzB,UAAA,kBAAC,GAAD;OAAO,IAAI;OAAM,MAAK;OAAK,cAAc,EAAQ;MAAO,CAAA;KACnD,CAAA;KACP,kBAAC,GAAD;MAAO,OAAM;MAAU,SAAS;MAC9B,UAAA,kBAAC,GAAD;OAAO,IAAI;OAAW,MAAK;OAAU,cAAc,OAAO,EAAQ;MAAY,CAAA;KACzE,CAAA;KACP,kBAAC,GAAD;MACE,OAAM;MACN,SAAS;MACT,MAAK;MACE;MAEP,UAAA,kBAAC,GAAD;OACE,IAAI;OACJ,MAAK;OACL,MAAM;OACN,aAAY;OACZ,OAAO,EAAQ;MAChB,CAAA;KACI,CAAA;IACC;GArBK,GAAA,EAAQ,EAqBb;EACN,CAAA,IACJ;CACE,CAAA;AAEZ"}

package/dist/ui/patterns/InboxPattern/inbox-data.d.ts

@@ -0,0 +1,15 @@
+import { BadgeTone } from '../../Badge';
+export type InboxKind = "Comment" | "Mention" | "Request" | "Status" | "Alert";
+export interface InboxMessage {
+    id: string;
+    from: string;
+    fromSrc?: string;
+    subject: string;
+    body: string;
+    kind: InboxKind;
+    kindTone: BadgeTone;
+    when: string;
+    unread: boolean;
+}
+export declare const INBOX: InboxMessage[];
+export declare function filterMessages(messages: InboxMessage[], tab: string): InboxMessage[];

package/dist/ui/patterns/InboxPattern/inbox-data.js

@@ -0,0 +1,86 @@
+//#region ui/patterns/InboxPattern/inbox-data.ts
+var e = [
+	{
+		id: "maya-comment",
+		from: "Maya Chen",
+		fromSrc: "/faces/maya-chen.jpg",
+		subject: "Comments on Launch brief",
+		body: "Two notes on positioning. Close them before the freeze so copy can lock.",
+		kind: "Comment",
+		kindTone: "info",
+		when: "2h ago",
+		unread: !0
+	},
+	{
+		id: "qa-alert",
+		from: "Unassigned",
+		subject: "QA checklist is still blocked",
+		body: "No owner for 2 days. Assign someone before Thursday's review.",
+		kind: "Alert",
+		kindTone: "danger",
+		when: "4h ago",
+		unread: !0
+	},
+	{
+		id: "alex-reply",
+		from: "Alex Rivera",
+		fromSrc: "/faces/alex-rivera.jpg",
+		subject: "Replied on Support macros",
+		body: "Refund and delay macros are drafted. Escalation paths still need a pass.",
+		kind: "Comment",
+		kindTone: "info",
+		when: "5h ago",
+		unread: !0
+	},
+	{
+		id: "maya-mention",
+		from: "Maya Chen",
+		fromSrc: "/faces/maya-chen.jpg",
+		subject: "Mentioned you in Launch brief",
+		body: "Can you confirm the hero line before legal looks at the brief?",
+		kind: "Mention",
+		kindTone: "brand",
+		when: "Yesterday",
+		unread: !0
+	},
+	{
+		id: "jordan-status",
+		from: "Jordan Lee",
+		fromSrc: "/faces/jordan-lee.jpg",
+		subject: "Release notes moved to Ready",
+		body: "Changelog is drafted. Confirm the known-issues list before we tag.",
+		kind: "Status",
+		kindTone: "success",
+		when: "Yesterday",
+		unread: !0
+	},
+	{
+		id: "iris-request",
+		from: "Iris Okafor",
+		fromSrc: "/faces/iris-okafor.jpg",
+		subject: "Review User research",
+		body: "Five interviews are in. Need a read on the onboarding friction before Friday.",
+		kind: "Request",
+		kindTone: "warning",
+		when: "Mon",
+		unread: !0
+	},
+	{
+		id: "noah-request",
+		from: "Noah Williams",
+		fromSrc: "/faces/noah-williams.jpg",
+		subject: "Legal sign-off on QA",
+		body: "The last two device passes are still open. Legal will not sign until they close.",
+		kind: "Request",
+		kindTone: "warning",
+		when: "Mon",
+		unread: !0
+	}
+];
+function t(e, t) {
+	return t === "unread" ? e.filter((e) => e.unread) : t === "mentions" ? e.filter((e) => e.kind === "Mention") : t === "requests" ? e.filter((e) => e.kind === "Request") : e;
+}
+//#endregion
+export { e as INBOX, t as filterMessages };
+
+//# sourceMappingURL=inbox-data.js.map

package/dist/ui/patterns/InboxPattern/inbox-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inbox-data.js","names":[],"sources":["../../../../ui/patterns/InboxPattern/inbox-data.ts"],"sourcesContent":["import type { BadgeTone } from \"../../Badge\";\n\nexport type InboxKind = \"Comment\" | \"Mention\" | \"Request\" | \"Status\" | \"Alert\";\n\nexport interface InboxMessage {\n  id: string;\n  from: string;\n  fromSrc?: string;\n  subject: string;\n  body: string;\n  kind: InboxKind;\n  kindTone: BadgeTone;\n  when: string;\n  unread: boolean;\n}\n\nexport const INBOX: InboxMessage[] = [\n  {\n    id: \"maya-comment\",\n    from: \"Maya Chen\",\n    fromSrc: \"/faces/maya-chen.jpg\",\n    subject: \"Comments on Launch brief\",\n    body: \"Two notes on positioning. Close them before the freeze so copy can lock.\",\n    kind: \"Comment\",\n    kindTone: \"info\",\n    when: \"2h ago\",\n    unread: true,\n  },\n  {\n    id: \"qa-alert\",\n    from: \"Unassigned\",\n    subject: \"QA checklist is still blocked\",\n    body: \"No owner for 2 days. Assign someone before Thursday's review.\",\n    kind: \"Alert\",\n    kindTone: \"danger\",\n    when: \"4h ago\",\n    unread: true,\n  },\n  {\n    id: \"alex-reply\",\n    from: \"Alex Rivera\",\n    fromSrc: \"/faces/alex-rivera.jpg\",\n    subject: \"Replied on Support macros\",\n    body: \"Refund and delay macros are drafted. Escalation paths still need a pass.\",\n    kind: \"Comment\",\n    kindTone: \"info\",\n    when: \"5h ago\",\n    unread: true,\n  },\n  {\n    id: \"maya-mention\",\n    from: \"Maya Chen\",\n    fromSrc: \"/faces/maya-chen.jpg\",\n    subject: \"Mentioned you in Launch brief\",\n    body: \"Can you confirm the hero line before legal looks at the brief?\",\n    kind: \"Mention\",\n    kindTone: \"brand\",\n    when: \"Yesterday\",\n    unread: true,\n  },\n  {\n    id: \"jordan-status\",\n    from: \"Jordan Lee\",\n    fromSrc: \"/faces/jordan-lee.jpg\",\n    subject: \"Release notes moved to Ready\",\n    body: \"Changelog is drafted. Confirm the known-issues list before we tag.\",\n    kind: \"Status\",\n    kindTone: \"success\",\n    when: \"Yesterday\",\n    unread: true,\n  },\n  {\n    id: \"iris-request\",\n    from: \"Iris Okafor\",\n    fromSrc: \"/faces/iris-okafor.jpg\",\n    subject: \"Review User research\",\n    body: \"Five interviews are in. Need a read on the onboarding friction before Friday.\",\n    kind: \"Request\",\n    kindTone: \"warning\",\n    when: \"Mon\",\n    unread: true,\n  },\n  {\n    id: \"noah-request\",\n    from: \"Noah Williams\",\n    fromSrc: \"/faces/noah-williams.jpg\",\n    subject: \"Legal sign-off on QA\",\n    body: \"The last two device passes are still open. Legal will not sign until they close.\",\n    kind: \"Request\",\n    kindTone: \"warning\",\n    when: \"Mon\",\n    unread: true,\n  },\n];\n\nexport function filterMessages(messages: InboxMessage[], tab: string): InboxMessage[] {\n  if (tab === \"unread\") return messages.filter((item) => item.unread);\n  if (tab === \"mentions\") return messages.filter((item) => item.kind === \"Mention\");\n  if (tab === \"requests\") return messages.filter((item) => item.kind === \"Request\");\n  return messages;\n}\n"],"mappings":";AAgBA,IAAa,IAAwB;CACnC;EACE,IAAI;EACJ,MAAM;EACN,SAAS;EACT,SAAS;EACT,MAAM;EACN,MAAM;EACN,UAAU;EACV,MAAM;EACN,QAAQ;CACV;CACA;EACE,IAAI;EACJ,MAAM;EACN,SAAS;EACT,MAAM;EACN,MAAM;EACN,UAAU;EACV,MAAM;EACN,QAAQ;CACV;CACA;EACE,IAAI;EACJ,MAAM;EACN,SAAS;EACT,SAAS;EACT,MAAM;EACN,MAAM;EACN,UAAU;EACV,MAAM;EACN,QAAQ;CACV;CACA;EACE,IAAI;EACJ,MAAM;EACN,SAAS;EACT,SAAS;EACT,MAAM;EACN,MAAM;EACN,UAAU;EACV,MAAM;EACN,QAAQ;CACV;CACA;EACE,IAAI;EACJ,MAAM;EACN,SAAS;EACT,SAAS;EACT,MAAM;EACN,MAAM;EACN,UAAU;EACV,MAAM;EACN,QAAQ;CACV;CACA;EACE,IAAI;EACJ,MAAM;EACN,SAAS;EACT,SAAS;EACT,MAAM;EACN,MAAM;EACN,UAAU;EACV,MAAM;EACN,QAAQ;CACV;CACA;EACE,IAAI;EACJ,MAAM;EACN,SAAS;EACT,SAAS;EACT,MAAM;EACN,MAAM;EACN,UAAU;EACV,MAAM;EACN,QAAQ;CACV;AACF;AAEA,SAAgB,EAAe,GAA0B,GAA6B;CAIpF,OAHI,MAAQ,WAAiB,EAAS,QAAQ,MAAS,EAAK,MAAM,IAC9D,MAAQ,aAAmB,EAAS,QAAQ,MAAS,EAAK,SAAS,SAAS,IAC5E,MAAQ,aAAmB,EAAS,QAAQ,MAAS,EAAK,SAAS,SAAS,IACzE;AACT"}

package/dist/ui/patterns/InboxPattern/index.d.ts

@@ -0,0 +1,2 @@
+export { InboxPattern } from './InboxPattern';
+export type { InboxPatternProps } from './InboxPattern';

package/dist/ui/patterns/InviteMembersPattern/InviteMembersPattern.d.ts

@@ -0,0 +1,9 @@
+import { PageHeaderProps } from '../../PageHeader';
+export interface InviteMembersPatternProps {
+    breadcrumbs?: PageHeaderProps["breadcrumbs"];
+    onInvite?: (payload: {
+        email: string;
+        role: string;
+    }) => void;
+}
+export declare function InviteMembersPattern({ breadcrumbs, onInvite }: InviteMembersPatternProps): import("react").JSX.Element;