agentic-ds-kit 0.1.0 → 0.2.0

package/dist/ui/patterns/InviteMembersPattern/InviteMembersPattern.js

@@ -0,0 +1,158 @@
+"use client";
+import { Button as e } from "../../Button/Button.js";
+import { ButtonGroup as t } from "../../ButtonGroup/ButtonGroup.js";
+import { Input as n } from "../../Input/Input.js";
+import { AvatarGroup as r } from "../../AvatarGroup/AvatarGroup.js";
+import { Empty as i } from "../../Empty/Empty.js";
+import { Field as a } from "../../Field/Field.js";
+import { FieldSet as o } from "../../FieldSet/FieldSet.js";
+import { Modal as s } from "../../Modal/Modal.js";
+import { PageHeader as c } from "../../PageHeader/PageHeader.js";
+import { RadioGroup as l } from "../../RadioGroup/RadioGroup.js";
+import { Toast as u } from "../../Toast/Toast.js";
+import { useId as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region ui/patterns/InviteMembersPattern/InviteMembersPattern.tsx
+var h = [
+	{
+		name: "Maya Chen",
+		src: "/faces/maya-chen.jpg"
+	},
+	{
+		name: "Noah Williams",
+		src: "/faces/noah-williams.jpg"
+	},
+	{
+		name: "Iris Okafor",
+		src: "/faces/iris-okafor.jpg"
+	}
+], g = [
+	{
+		value: "admin",
+		label: "Admin"
+	},
+	{
+		value: "member",
+		label: "Member"
+	},
+	{
+		value: "viewer",
+		label: "Viewer"
+	}
+];
+function _({ breadcrumbs: _, onInvite: v }) {
+	let y = d(), [b, x] = f(!1), [S, C] = f(""), [w, T] = f("member"), [E, D] = f(), [O, k] = f(!1), [A, j] = f(""), M = `${y}-email`, N = `${y}-role`;
+	function P() {
+		x(!1), D(void 0);
+	}
+	function F() {
+		let e = S.trim();
+		if (!e || !e.includes("@")) {
+			D("Enter a work email.");
+			return;
+		}
+		v?.({
+			email: e,
+			role: w
+		}), j(e), C(""), T("member"), D(void 0), x(!1), k(!0);
+	}
+	function I(e) {
+		e.preventDefault(), F();
+	}
+	return /* @__PURE__ */ m("div", {
+		className: "layout-canvas layout-canvas--sticky-header",
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "layout-header",
+				children: /* @__PURE__ */ p(c, {
+					title: "Invite members",
+					subtitle: "Add people to this workspace so review comments have owners.",
+					breadcrumbs: _
+				})
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "layout-content",
+				children: /* @__PURE__ */ p(i, {
+					title: "No pending invites",
+					description: "Maya, Noah, and Iris are in this workspace. Three seats are open for design and QA.",
+					media: /* @__PURE__ */ p(r, {
+						ariaLabel: "Current members",
+						items: h,
+						max: 3
+					}),
+					outlined: !0,
+					actions: /* @__PURE__ */ p(e, {
+						variant: "primary",
+						size: "md",
+						onClick: () => x(!0),
+						children: "Invite members"
+					})
+				})
+			}),
+			/* @__PURE__ */ p(s, {
+				open: b,
+				title: "Invite members",
+				description: "Send an email invite. They join with the role you pick.",
+				size: "md",
+				onClose: P,
+				footer: /* @__PURE__ */ m(t, {
+					ariaLabel: "Invite actions",
+					children: [/* @__PURE__ */ p(e, {
+						variant: "secondary",
+						size: "md",
+						onClick: P,
+						children: "Cancel"
+					}), /* @__PURE__ */ p(e, {
+						variant: "primary",
+						size: "md",
+						onClick: F,
+						children: "Send invite"
+					})]
+				}),
+				children: /* @__PURE__ */ p("form", {
+					onSubmit: I,
+					children: /* @__PURE__ */ m(o, {
+						legend: "New member",
+						description: "They get access to Sprint 24 projects.",
+						children: [/* @__PURE__ */ p(a, {
+							label: "Email",
+							htmlFor: M,
+							hint: "Work email they already use",
+							error: E,
+							children: /* @__PURE__ */ p(n, {
+								id: M,
+								type: "email",
+								iconStart: "Mail",
+								placeholder: "name@company.com",
+								value: S,
+								onChange: (e) => {
+									C(e), E && D(void 0);
+								}
+							})
+						}), /* @__PURE__ */ p(l, {
+							name: N,
+							legend: "Role",
+							orientation: "horizontal",
+							options: g,
+							value: w,
+							onChange: T
+						})]
+					})
+				})
+			}),
+			/* @__PURE__ */ p(u, {
+				open: O,
+				title: "Invite sent",
+				description: A ? `We'll email ${A} a link to join this workspace.` : void 0,
+				status: "success",
+				duration: 3e3,
+				onClose: () => k(!1),
+				onOpenChange: k
+			})
+		]
+	});
+}
+//#endregion
+export { _ as InviteMembersPattern };
+
+//# sourceMappingURL=InviteMembersPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InviteMembersPattern.js","names":[],"sources":["../../../../ui/patterns/InviteMembersPattern/InviteMembersPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useState, type FormEvent } from \"react\";\nimport { AvatarGroup } from \"../../AvatarGroup\";\nimport { Button } from \"../../Button\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { Empty } from \"../../Empty\";\nimport { Field } from \"../../Field\";\nimport { FieldSet } from \"../../FieldSet\";\nimport { Input } from \"../../Input\";\nimport { Modal } from \"../../Modal\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { RadioGroup } from \"../../RadioGroup\";\nimport { Toast } from \"../../Toast\";\n\nconst TEAM = [\n  { name: \"Maya Chen\", src: \"/faces/maya-chen.jpg\" },\n  { name: \"Noah Williams\", src: \"/faces/noah-williams.jpg\" },\n  { name: \"Iris Okafor\", src: \"/faces/iris-okafor.jpg\" },\n];\n\nconst ROLE_OPTIONS = [\n  { value: \"admin\", label: \"Admin\" },\n  { value: \"member\", label: \"Member\" },\n  { value: \"viewer\", label: \"Viewer\" },\n];\n\nexport interface InviteMembersPatternProps {\n  breadcrumbs?: PageHeaderProps[\"breadcrumbs\"];\n  onInvite?: (payload: { email: string; role: string }) => void;\n}\n\nexport function InviteMembersPattern({ breadcrumbs, onInvite }: InviteMembersPatternProps) {\n  const uid = useId();\n  const [open, setOpen] = useState(false);\n  const [email, setEmail] = useState(\"\");\n  const [role, setRole] = useState(\"member\");\n  const [emailError, setEmailError] = useState<string | undefined>();\n  const [toastOpen, setToastOpen] = useState(false);\n  const [sentTo, setSentTo] = useState(\"\");\n\n  const emailId = `${uid}-email`;\n  const roleName = `${uid}-role`;\n\n  function close() {\n    setOpen(false);\n    setEmailError(undefined);\n  }\n\n  function send() {\n    const nextEmail = email.trim();\n    if (!nextEmail || !nextEmail.includes(\"@\")) {\n      setEmailError(\"Enter a work email.\");\n      return;\n    }\n\n    onInvite?.({ email: nextEmail, role });\n    setSentTo(nextEmail);\n    setEmail(\"\");\n    setRole(\"member\");\n    setEmailError(undefined);\n    setOpen(false);\n    setToastOpen(true);\n  }\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    send();\n  }\n\n  return (\n    <div className=\"layout-canvas layout-canvas--sticky-header\">\n      <div className=\"layout-header\">\n        <PageHeader\n          title=\"Invite members\"\n          subtitle=\"Add people to this workspace so review comments have owners.\"\n          breadcrumbs={breadcrumbs}\n        />\n      </div>\n      <div className=\"layout-content\">\n        <Empty\n          title=\"No pending invites\"\n          description=\"Maya, Noah, and Iris are in this workspace. Three seats are open for design and QA.\"\n          media={<AvatarGroup ariaLabel=\"Current members\" items={TEAM} max={3} />}\n          outlined\n          actions={\n            <Button variant=\"primary\" size=\"md\" onClick={() => setOpen(true)}>\n              Invite members\n            </Button>\n          }\n        />\n      </div>\n      <Modal\n        open={open}\n        title=\"Invite members\"\n        description=\"Send an email invite. They join with the role you pick.\"\n        size=\"md\"\n        onClose={close}\n        footer={\n          <ButtonGroup ariaLabel=\"Invite actions\">\n            <Button variant=\"secondary\" size=\"md\" onClick={close}>\n              Cancel\n            </Button>\n            <Button variant=\"primary\" size=\"md\" onClick={send}>\n              Send invite\n            </Button>\n          </ButtonGroup>\n        }\n      >\n        <form onSubmit={handleSubmit}>\n          <FieldSet legend=\"New member\" description=\"They get access to Sprint 24 projects.\">\n            <Field label=\"Email\" htmlFor={emailId} hint=\"Work email they already use\" error={emailError}>\n              <Input\n                id={emailId}\n                type=\"email\"\n                iconStart=\"Mail\"\n                placeholder=\"name@company.com\"\n                value={email}\n                onChange={(value) => {\n                  setEmail(value);\n                  if (emailError) setEmailError(undefined);\n                }}\n              />\n            </Field>\n            <RadioGroup\n              name={roleName}\n              legend=\"Role\"\n              orientation=\"horizontal\"\n              options={ROLE_OPTIONS}\n              value={role}\n              onChange={setRole}\n            />\n          </FieldSet>\n        </form>\n      </Modal>\n      <Toast\n        open={toastOpen}\n        title=\"Invite sent\"\n        description={sentTo ? `We'll email ${sentTo} a link to join this workspace.` : undefined}\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/dist/ui/patterns/InviteMembersPattern/index.d.ts

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

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

@@ -0,0 +1,16 @@
+import { BadgeTone } from '../../Badge';
+import { PageHeaderProps } from '../../PageHeader';
+export interface ListDetailItem {
+    id: string;
+    name: string;
+    owner: string;
+    status: string;
+    statusTone: BadgeTone;
+    updated: string;
+    body: string;
+}
+export interface ListDetailPatternProps {
+    breadcrumbs?: PageHeaderProps["breadcrumbs"];
+    selectedId?: string;
+}
+export declare function ListDetailPattern({ breadcrumbs, selectedId }: ListDetailPatternProps): import("react").JSX.Element;

package/dist/ui/patterns/ListDetailPattern/ListDetailPattern.js

@@ -0,0 +1,143 @@
+"use client";
+import { AppNav as e } from "../../AppNav/AppNav.js";
+import { Badge as t } from "../../Badge/Badge.js";
+import { PageHeader as n } from "../../PageHeader/PageHeader.js";
+import { Section as r } from "../../Section/Section.js";
+import { Table as i } from "../../Table/Table.js";
+import a from "./ListDetailPattern.module.js";
+import { useEffect as o, useMemo as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region ui/patterns/ListDetailPattern/ListDetailPattern.tsx
+var d = [
+	{
+		id: "launch-brief",
+		name: "Launch brief",
+		owner: "Maya Chen",
+		status: "In review",
+		statusTone: "warning",
+		updated: "2h ago",
+		body: "Two notes on positioning. Close them before the freeze so copy can lock."
+	},
+	{
+		id: "qa-checklist",
+		name: "QA checklist",
+		owner: "Unassigned",
+		status: "Blocked",
+		statusTone: "danger",
+		updated: "4h ago",
+		body: "No owner for 2 days. Assign someone before Thursday's review."
+	},
+	{
+		id: "release-notes",
+		name: "Release notes",
+		owner: "Jordan Lee",
+		status: "Ready",
+		statusTone: "success",
+		updated: "Yesterday",
+		body: "Changelog is drafted. Confirm the known-issues list before we tag."
+	},
+	{
+		id: "support-macros",
+		name: "Support macros",
+		owner: "Alex Rivera",
+		status: "In progress",
+		statusTone: "info",
+		updated: "5h ago",
+		body: "Refund and delay macros are drafted. Escalation paths still need a pass."
+	}
+], f = [
+	{
+		key: "name",
+		header: "Project",
+		emphasis: !0
+	},
+	{
+		key: "owner",
+		header: "Owner"
+	},
+	{
+		key: "status",
+		header: "Status"
+	},
+	{
+		key: "updated",
+		header: "Updated"
+	}
+];
+function p(e) {
+	return d.find((t) => t.id === e) ?? d[0];
+}
+function m({ breadcrumbs: m, selectedId: h }) {
+	let [g, _] = c(p(h).id);
+	o(() => {
+		h && _(p(h).id);
+	}, [h]), o(() => {
+		let e = () => {
+			let e = window.location.hash.replace(/^#/, "");
+			d.some((t) => t.id === e) && _(e);
+		};
+		return e(), window.addEventListener("hashchange", e), () => window.removeEventListener("hashchange", e);
+	}, []);
+	let v = p(g), y = s(() => d.map((e) => ({
+		href: `#${e.id}`,
+		label: e.name,
+		active: e.id === v.id
+	})), [v.id]), b = d.map((e) => ({
+		name: e.name,
+		owner: e.owner,
+		status: /* @__PURE__ */ l(t, {
+			tone: e.statusTone,
+			size: "sm",
+			children: e.status
+		}),
+		updated: e.updated
+	}));
+	return /* @__PURE__ */ u("div", {
+		className: "layout-canvas layout-canvas--sticky-header",
+		children: [/* @__PURE__ */ l("div", {
+			className: "layout-header",
+			children: /* @__PURE__ */ l(n, {
+				title: "Projects",
+				subtitle: "Sprint 24 files and their current status.",
+				breadcrumbs: m
+			})
+		}), /* @__PURE__ */ l("div", {
+			className: "layout-content",
+			children: /* @__PURE__ */ u("div", {
+				className: a.shell,
+				children: [/* @__PURE__ */ l(e, {
+					title: "Files",
+					items: y
+				}), /* @__PURE__ */ u("div", {
+					className: a.main,
+					children: [/* @__PURE__ */ l(r, {
+						title: "Projects",
+						description: "Select a file in the list to view details",
+						children: /* @__PURE__ */ l(i, {
+							columns: f,
+							rows: b,
+							caption: "Sprint 24 projects"
+						})
+					}), /* @__PURE__ */ l(r, {
+						title: v.name,
+						description: `${v.owner} · ${v.updated}`,
+						children: /* @__PURE__ */ u("div", {
+							className: a.detail,
+							children: [/* @__PURE__ */ l(t, {
+								tone: v.statusTone,
+								children: v.status
+							}), /* @__PURE__ */ l("p", {
+								className: a.body,
+								children: v.body
+							})]
+						})
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { m as ListDetailPattern };
+
+//# sourceMappingURL=ListDetailPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListDetailPattern.js","names":[],"sources":["../../../../ui/patterns/ListDetailPattern/ListDetailPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { AppNav } from \"../../AppNav\";\nimport { Badge } from \"../../Badge\";\nimport type { BadgeTone } from \"../../Badge\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Section } from \"../../Section\";\nimport { Table } from \"../../Table\";\nimport styles from \"./ListDetailPattern.module.css\";\n\nexport interface ListDetailItem {\n  id: string;\n  name: string;\n  owner: string;\n  status: string;\n  statusTone: BadgeTone;\n  updated: string;\n  body: string;\n}\n\nexport interface ListDetailPatternProps {\n  breadcrumbs?: PageHeaderProps[\"breadcrumbs\"];\n  selectedId?: string;\n}\n\nconst PROJECTS: ListDetailItem[] = [\n  {\n    id: \"launch-brief\",\n    name: \"Launch brief\",\n    owner: \"Maya Chen\",\n    status: \"In review\",\n    statusTone: \"warning\",\n    updated: \"2h ago\",\n    body: \"Two notes on positioning. Close them before the freeze so copy can lock.\",\n  },\n  {\n    id: \"qa-checklist\",\n    name: \"QA checklist\",\n    owner: \"Unassigned\",\n    status: \"Blocked\",\n    statusTone: \"danger\",\n    updated: \"4h ago\",\n    body: \"No owner for 2 days. Assign someone before Thursday's review.\",\n  },\n  {\n    id: \"release-notes\",\n    name: \"Release notes\",\n    owner: \"Jordan Lee\",\n    status: \"Ready\",\n    statusTone: \"success\",\n    updated: \"Yesterday\",\n    body: \"Changelog is drafted. Confirm the known-issues list before we tag.\",\n  },\n  {\n    id: \"support-macros\",\n    name: \"Support macros\",\n    owner: \"Alex Rivera\",\n    status: \"In progress\",\n    statusTone: \"info\",\n    updated: \"5h ago\",\n    body: \"Refund and delay macros are drafted. Escalation paths still need a pass.\",\n  },\n];\n\nconst COLUMNS = [\n  { key: \"name\", header: \"Project\", emphasis: true },\n  { key: \"owner\", header: \"Owner\" },\n  { key: \"status\", header: \"Status\" },\n  { key: \"updated\", header: \"Updated\" },\n];\n\nfunction projectById(id: string | undefined): ListDetailItem {\n  return PROJECTS.find((item) => item.id === id) ?? PROJECTS[0];\n}\n\nexport function ListDetailPattern({ breadcrumbs, selectedId }: ListDetailPatternProps) {\n  const [activeId, setActiveId] = useState(projectById(selectedId).id);\n\n  useEffect(() => {\n    if (selectedId) setActiveId(projectById(selectedId).id);\n  }, [selectedId]);\n\n  useEffect(() => {\n    const apply = () => {\n      const hash = window.location.hash.replace(/^#/, \"\");\n      if (PROJECTS.some((item) => item.id === hash)) setActiveId(hash);\n    };\n    apply();\n    window.addEventListener(\"hashchange\", apply);\n    return () => window.removeEventListener(\"hashchange\", apply);\n  }, []);\n\n  const selected = projectById(activeId);\n\n  const navItems = useMemo(\n    () =>\n      PROJECTS.map((item) => ({\n        href: `#${item.id}`,\n        label: item.name,\n        active: item.id === selected.id,\n      })),\n    [selected.id],\n  );\n\n  const rows = PROJECTS.map((item) => ({\n    name: item.name,\n    owner: item.owner,\n    status: (\n      <Badge tone={item.statusTone} size=\"sm\">\n        {item.status}\n      </Badge>\n    ),\n    updated: item.updated,\n  }));\n\n  return (\n    <div className=\"layout-canvas layout-canvas--sticky-header\">\n      <div className=\"layout-header\">\n        <PageHeader\n          title=\"Projects\"\n          subtitle=\"Sprint 24 files and their current status.\"\n          breadcrumbs={breadcrumbs}\n        />\n      </div>\n      <div className=\"layout-content\">\n        <div className={styles.shell}>\n          <AppNav title=\"Files\" items={navItems} />\n          <div className={styles.main}>\n            <Section title=\"Projects\" description=\"Select a file in the list to view details\">\n              <Table columns={COLUMNS} rows={rows} caption=\"Sprint 24 projects\" />\n            </Section>\n            <Section title={selected.name} description={`${selected.owner} · ${selected.updated}`}>\n              <div className={styles.detail}>\n                <Badge tone={selected.statusTone}>{selected.status}</Badge>\n                <p className={styles.body}>{selected.body}</p>\n              </div>\n            </Section>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;AA2BA,IAAM,IAA6B;CACjC;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,SAAS;EACT,MAAM;CACR;CACA;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,SAAS;EACT,MAAM;CACR;CACA;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,SAAS;EACT,MAAM;CACR;CACA;EACE,IAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,SAAS;EACT,MAAM;CACR;AACF,GAEM,IAAU;CACd;EAAE,KAAK;EAAQ,QAAQ;EAAW,UAAU;CAAK;CACjD;EAAE,KAAK;EAAS,QAAQ;CAAQ;CAChC;EAAE,KAAK;EAAU,QAAQ;CAAS;CAClC;EAAE,KAAK;EAAW,QAAQ;CAAU;AACtC;AAEA,SAAS,EAAY,GAAwC;CAC3D,OAAO,EAAS,MAAM,MAAS,EAAK,OAAO,CAAE,KAAK,EAAS;AAC7D;AAEA,SAAgB,EAAkB,EAAE,gBAAa,iBAAsC;CACrF,IAAM,CAAC,GAAU,KAAe,EAAS,EAAY,CAAU,CAAC,CAAC,EAAE;CAMnE,AAJA,QAAgB;EACd,AAAI,KAAY,EAAY,EAAY,CAAU,CAAC,CAAC,EAAE;CACxD,GAAG,CAAC,CAAU,CAAC,GAEf,QAAgB;EACd,IAAM,UAAc;GAClB,IAAM,IAAO,OAAO,SAAS,KAAK,QAAQ,MAAM,EAAE;GAClD,AAAI,EAAS,MAAM,MAAS,EAAK,OAAO,CAAI,KAAG,EAAY,CAAI;EACjE;EAGA,OAFA,EAAM,GACN,OAAO,iBAAiB,cAAc,CAAK,SAC9B,OAAO,oBAAoB,cAAc,CAAK;CAC7D,GAAG,CAAC,CAAC;CAEL,IAAM,IAAW,EAAY,CAAQ,GAE/B,IAAW,QAEb,EAAS,KAAK,OAAU;EACtB,MAAM,IAAI,EAAK;EACf,OAAO,EAAK;EACZ,QAAQ,EAAK,OAAO,EAAS;CAC/B,EAAE,GACJ,CAAC,EAAS,EAAE,CACd,GAEM,IAAO,EAAS,KAAK,OAAU;EACnC,MAAM,EAAK;EACX,OAAO,EAAK;EACZ,QACE,kBAAC,GAAD;GAAO,MAAM,EAAK;GAAY,MAAK;GAChC,UAAA,EAAK;EACD,CAAA;EAET,SAAS,EAAK;CAChB,EAAE;CAEF,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IACE,OAAM;IACN,UAAS;IACI;GACd,CAAA;EACE,CAAA,GACL,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAvB,UAAA,CACE,kBAAC,GAAD;KAAQ,OAAM;KAAQ,OAAO;IAAW,CAAA,GACxC,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAvB,UAAA,CACE,kBAAC,GAAD;MAAS,OAAM;MAAW,aAAY;MACpC,UAAA,kBAAC,GAAD;OAAO,SAAS;OAAe;OAAM,SAAQ;MAAsB,CAAA;KAC5D,CAAA,GACT,kBAAC,GAAD;MAAS,OAAO,EAAS;MAAM,aAAa,GAAG,EAAS,MAAM,KAAK,EAAS;MAC1E,UAAA,kBAAC,OAAD;OAAK,WAAW,EAAO;OAAvB,UAAA,CACE,kBAAC,GAAD;QAAO,MAAM,EAAS;QAAa,UAAA,EAAS;OAAc,CAAA,GAC1D,kBAAC,KAAD;QAAG,WAAW,EAAO;QAAO,UAAA,EAAS;OAAQ,CAAA,CAC1C;;KACE,CAAA,CACN;IACF,CAAA,CAAA;;EACF,CAAA,CACF;;AAET"}

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

@@ -1,4 +1,4 @@
-.shell {
+._shell_1d2d5_1 {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
   gap: var(--layout-gutter-md);
@@ -6,18 +6,18 @@
   min-width: 0;
 }
 
-.main {
+._main_1d2d5_9 {
   display: grid;
   gap: var(--space-stack-md);
   min-width: 0;
   overflow-x: auto;
 }
 
-.main :global(section) {
+._main_1d2d5_9 section {
   margin-bottom: 0;
 }
 
-.detail {
+._detail_1d2d5_20 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -25,7 +25,7 @@
   max-width: 36rem;
 }
 
-.body {
+._body_1d2d5_28 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-body);

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

@@ -0,0 +1,12 @@
+import "./ListDetailPattern.module.css";
+//#region ui/patterns/ListDetailPattern/ListDetailPattern.module.css
+var e = "_shell_1d2d5_1", t = "_main_1d2d5_9", n = "_detail_1d2d5_20", r = "_body_1d2d5_28", i = {
+	shell: e,
+	main: t,
+	detail: n,
+	body: r
+};
+//#endregion
+export { r as body, i as default, n as detail, t as main, e as shell };
+
+//# sourceMappingURL=ListDetailPattern.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListDetailPattern.module.js","names":[],"sources":["../../../../ui/patterns/ListDetailPattern/ListDetailPattern.module.css"],"sourcesContent":[".shell {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n  gap: var(--layout-gutter-md);\n  align-items: start;\n  min-width: 0;\n}\n\n.main {\n  display: grid;\n  gap: var(--space-stack-md);\n  min-width: 0;\n  overflow-x: auto;\n}\n\n.main :global(section) {\n  margin-bottom: 0;\n}\n\n.detail {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--space-3);\n  max-width: 36rem;\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-primary);\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { ListDetailPattern } from './ListDetailPattern';
+export type { ListDetailItem, ListDetailPatternProps } from './ListDetailPattern';

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

@@ -0,0 +1,7 @@
+import { PageHeaderProps } from '../../PageHeader';
+export interface SettingsFormPatternProps {
+    breadcrumbs?: PageHeaderProps["breadcrumbs"];
+    onCancel?: () => void;
+    onSave?: () => void;
+}
+export declare function SettingsFormPattern({ breadcrumbs, onCancel, onSave }: SettingsFormPatternProps): import("react").JSX.Element;

package/dist/ui/patterns/SettingsFormPattern/SettingsFormPattern.js

@@ -0,0 +1,127 @@
+"use client";
+import { Button as e } from "../../Button/Button.js";
+import { Input as t } from "../../Input/Input.js";
+import { Checkbox as n } from "../../Checkbox/Checkbox.js";
+import { Select as r } from "../../Select/Select.js";
+import { Field as i } from "../../Field/Field.js";
+import { PageHeader as a } from "../../PageHeader/PageHeader.js";
+import { Section as o } from "../../Section/Section.js";
+import { Toast as s } from "../../Toast/Toast.js";
+import c from "./SettingsFormPattern.module.js";
+import { useId as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region ui/patterns/SettingsFormPattern/SettingsFormPattern.tsx
+function p({ breadcrumbs: p, onCancel: m, onSave: h }) {
+	let g = l(), [_, v] = u(!1);
+	function y(e) {
+		e.preventDefault(), h?.(), v(!0);
+	}
+	return /* @__PURE__ */ f("div", {
+		className: "layout-canvas layout-canvas--sticky-header",
+		children: [/* @__PURE__ */ d("div", {
+			className: "layout-header",
+			children: /* @__PURE__ */ d(a, {
+				title: "Settings",
+				subtitle: "Manage workspace profile and notification preferences.",
+				breadcrumbs: p,
+				eyebrow: p ? void 0 : "Account"
+			})
+		}), /* @__PURE__ */ f("form", {
+			className: "layout-content",
+			onSubmit: y,
+			children: [
+				/* @__PURE__ */ d(o, {
+					title: "Profile",
+					description: "Basic information visible to collaborators",
+					children: /* @__PURE__ */ f("div", {
+						className: c.form,
+						children: [
+							/* @__PURE__ */ d(i, {
+								label: "Display name",
+								htmlFor: `${g}-display-name`,
+								hint: "Shown on shared projects",
+								children: /* @__PURE__ */ d(t, {
+									id: `${g}-display-name`,
+									defaultValue: "Maya Chen"
+								})
+							}),
+							/* @__PURE__ */ d(i, {
+								label: "Email",
+								htmlFor: `${g}-email`,
+								children: /* @__PURE__ */ d(t, {
+									id: `${g}-email`,
+									type: "email",
+									defaultValue: "maya@agentix.dev"
+								})
+							}),
+							/* @__PURE__ */ d(i, {
+								label: "Timezone",
+								htmlFor: `${g}-timezone`,
+								children: /* @__PURE__ */ d(r, {
+									id: `${g}-timezone`,
+									options: [
+										{
+											value: "utc",
+											label: "UTC"
+										},
+										{
+											value: "cet",
+											label: "Central European Time"
+										},
+										{
+											value: "est",
+											label: "Eastern Time"
+										}
+									],
+									defaultValue: "cet"
+								})
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ d(o, {
+					title: "Notifications",
+					children: /* @__PURE__ */ f("div", {
+						className: c.form,
+						children: [/* @__PURE__ */ d(n, {
+							id: `${g}-email-updates`,
+							label: "Email me weekly summaries",
+							defaultChecked: !0
+						}), /* @__PURE__ */ d(n, {
+							id: `${g}-product-news`,
+							label: "Product news and tips"
+						})]
+					})
+				}),
+				/* @__PURE__ */ f("div", {
+					className: c.actions,
+					children: [/* @__PURE__ */ d(e, {
+						variant: "primary",
+						size: "md",
+						type: "submit",
+						children: "Save changes"
+					}), /* @__PURE__ */ d(e, {
+						variant: "secondary",
+						size: "md",
+						type: "button",
+						onClick: m,
+						children: "Cancel"
+					})]
+				}),
+				/* @__PURE__ */ d(s, {
+					open: _,
+					title: "Settings saved",
+					description: "Workspace profile and preferences are up to date.",
+					status: "success",
+					duration: 3e3,
+					onClose: () => v(!1),
+					onOpenChange: v
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { p as SettingsFormPattern };
+
+//# sourceMappingURL=SettingsFormPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsFormPattern.js","names":[],"sources":["../../../../ui/patterns/SettingsFormPattern/SettingsFormPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useState, type FormEvent } from \"react\";\nimport { Button } from \"../../Button\";\nimport { Checkbox } from \"../../Checkbox\";\nimport { Field } from \"../../Field\";\nimport { Input } from \"../../Input\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Section } from \"../../Section\";\nimport { Select } from \"../../Select\";\nimport { Toast } from \"../../Toast\";\nimport formStyles from \"./SettingsFormPattern.module.css\";\n\nexport interface SettingsFormPatternProps {\n  breadcrumbs?: PageHeaderProps[\"breadcrumbs\"];\n  onCancel?: () => void;\n  onSave?: () => void;\n}\n\nexport function SettingsFormPattern({ breadcrumbs, onCancel, onSave }: SettingsFormPatternProps) {\n  const uid = useId();\n  const [toastOpen, setToastOpen] = useState(false);\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    onSave?.();\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=\"Settings\"\n          subtitle=\"Manage workspace profile and notification preferences.\"\n          breadcrumbs={breadcrumbs}\n          eyebrow={breadcrumbs ? undefined : \"Account\"}\n        />\n      </div>\n      <form className=\"layout-content\" onSubmit={handleSubmit}>\n        <Section title=\"Profile\" description=\"Basic information visible to collaborators\">\n          <div className={formStyles.form}>\n            <Field label=\"Display name\" htmlFor={`${uid}-display-name`} hint=\"Shown on shared projects\">\n              <Input id={`${uid}-display-name`} defaultValue=\"Maya Chen\" />\n            </Field>\n            <Field label=\"Email\" htmlFor={`${uid}-email`}>\n              <Input id={`${uid}-email`} type=\"email\" defaultValue=\"maya@agentix.dev\" />\n            </Field>\n            <Field label=\"Timezone\" htmlFor={`${uid}-timezone`}>\n              <Select\n                id={`${uid}-timezone`}\n                options={[\n                  { value: \"utc\", label: \"UTC\" },\n                  { value: \"cet\", label: \"Central European Time\" },\n                  { value: \"est\", label: \"Eastern Time\" },\n                ]}\n                defaultValue=\"cet\"\n              />\n            </Field>\n          </div>\n        </Section>\n        <Section title=\"Notifications\">\n          <div className={formStyles.form}>\n            <Checkbox id={`${uid}-email-updates`} label=\"Email me weekly summaries\" defaultChecked />\n            <Checkbox id={`${uid}-product-news`} label=\"Product news and tips\" />\n          </div>\n        </Section>\n        <div className={formStyles.actions}>\n          <Button variant=\"primary\" size=\"md\" type=\"submit\">\n            Save changes\n          </Button>\n          <Button variant=\"secondary\" size=\"md\" type=\"button\" onClick={onCancel}>\n            Cancel\n          </Button>\n        </div>\n        <Toast\n          open={toastOpen}\n          title=\"Settings saved\"\n          description=\"Workspace profile and preferences are up to date.\"\n          status=\"success\"\n          duration={3000}\n          onClose={() => setToastOpen(false)}\n          onOpenChange={setToastOpen}\n        />\n      </form>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,SAAgB,EAAoB,EAAE,gBAAa,aAAU,aAAoC;CAC/F,IAAM,IAAM,EAAM,GACZ,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,SAAS,EAAa,GAAmC;EAGvD,AAFA,EAAM,eAAe,GACrB,IAAS,GACT,EAAa,EAAI;CACnB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IACE,OAAM;IACN,UAAS;IACI;IACb,SAAS,IAAc,KAAA,IAAY;GACpC,CAAA;EACE,CAAA,GACL,kBAAC,QAAD;GAAM,WAAU;GAAiB,UAAU;GAA3C,UAAA;IACE,kBAAC,GAAD;KAAS,OAAM;KAAU,aAAY;KACnC,UAAA,kBAAC,OAAD;MAAK,WAAW,EAAW;MAA3B,UAAA;OACE,kBAAC,GAAD;QAAO,OAAM;QAAe,SAAS,GAAG,EAAI;QAAgB,MAAK;QAC/D,UAAA,kBAAC,GAAD;SAAO,IAAI,GAAG,EAAI;SAAgB,cAAa;QAAa,CAAA;OACvD,CAAA;OACP,kBAAC,GAAD;QAAO,OAAM;QAAQ,SAAS,GAAG,EAAI;QACnC,UAAA,kBAAC,GAAD;SAAO,IAAI,GAAG,EAAI;SAAS,MAAK;SAAQ,cAAa;QAAoB,CAAA;OACpE,CAAA;OACP,kBAAC,GAAD;QAAO,OAAM;QAAW,SAAS,GAAG,EAAI;QACtC,UAAA,kBAAC,GAAD;SACE,IAAI,GAAG,EAAI;SACX,SAAS;UACP;WAAE,OAAO;WAAO,OAAO;UAAM;UAC7B;WAAE,OAAO;WAAO,OAAO;UAAwB;UAC/C;WAAE,OAAO;WAAO,OAAO;UAAe;SACxC;SACA,cAAa;QACd,CAAA;OACI,CAAA;MACJ;;IACE,CAAA;IACT,kBAAC,GAAD;KAAS,OAAM;KACb,UAAA,kBAAC,OAAD;MAAK,WAAW,EAAW;MAA3B,UAAA,CACE,kBAAC,GAAD;OAAU,IAAI,GAAG,EAAI;OAAiB,OAAM;OAA4B,gBAAA;MAAgB,CAAA,GACxF,kBAAC,GAAD;OAAU,IAAI,GAAG,EAAI;OAAgB,OAAM;MAAyB,CAAA,CACjE;;IACE,CAAA;IACT,kBAAC,OAAD;KAAK,WAAW,EAAW;KAA3B,UAAA,CACE,kBAAC,GAAD;MAAQ,SAAQ;MAAU,MAAK;MAAK,MAAK;MAAS,UAAA;KAE1C,CAAA,GACR,kBAAC,GAAD;MAAQ,SAAQ;MAAY,MAAK;MAAK,MAAK;MAAS,SAAS;MAAU,UAAA;KAE/D,CAAA,CACL;;IACL,kBAAC,GAAD;KACE,MAAM;KACN,OAAM;KACN,aAAY;KACZ,QAAO;KACP,UAAU;KACV,eAAe,EAAa,EAAK;KACjC,cAAc;IACf,CAAA;GACG;EACH,CAAA,CAAA;;AAET"}

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

@@ -1,11 +1,11 @@
-.form {
+._form_ch2cj_1 {
   display: flex;
   flex-direction: column;
   gap: var(--space-4);
   max-width: 28rem;
 }
 
-.actions {
+._actions_ch2cj_8 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);

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

@@ -0,0 +1,10 @@
+import "./SettingsFormPattern.module.css";
+//#region ui/patterns/SettingsFormPattern/SettingsFormPattern.module.css
+var e = "_form_ch2cj_1", t = "_actions_ch2cj_8", n = {
+	form: e,
+	actions: t
+};
+//#endregion
+export { t as actions, n as default, e as form };
+
+//# sourceMappingURL=SettingsFormPattern.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsFormPattern.module.js","names":[],"sources":["../../../../ui/patterns/SettingsFormPattern/SettingsFormPattern.module.css"],"sourcesContent":[".form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  max-width: 28rem;\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n"],"mappings":""}

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

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

package/dist/ui/shared/ChartFrame.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface ChartFrameProps {
+    title?: string;
+    description?: string;
+    legend?: ReactNode;
+    children: ReactNode;
+    table?: ReactNode;
+    footnote?: string;
+    isEmpty?: boolean;
+    emptyLabel?: string;
+    isLoading?: boolean;
+    className?: string;
+}
+export declare function ChartFrame({ title, description, legend, children, table, footnote, isEmpty, emptyLabel, isLoading, className, }: ChartFrameProps): import("react").JSX.Element;