agentic-ds-kit 0.1.0

package/ui/patterns/InboxPattern/InboxReplyDrawer.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useId, useState, type FormEvent } from "react";
+import { Button } from "../../Button";
+import { Drawer } from "../../Drawer";
+import { Field } from "../../Field";
+import { FieldSet } from "../../FieldSet";
+import { Input } from "../../Input";
+import { Textarea } from "../../Textarea";
+import type { InboxMessage } from "./inbox-data";
+
+export function InboxReplyDrawer({
+  message,
+  open,
+  onClose,
+  onSend,
+}: {
+  message: InboxMessage | null;
+  open: boolean;
+  onClose: () => void;
+  onSend: () => void;
+}) {
+  const baseId = useId();
+  const toId = `${baseId}-to`;
+  const subjectId = `${baseId}-subject`;
+  const replyId = `${baseId}-reply`;
+  const [error, setError] = useState<string | undefined>();
+
+  function close() {
+    setError(undefined);
+    onClose();
+  }
+
+  function send() {
+    const reply = (document.getElementById(replyId) as HTMLTextAreaElement | null)?.value.trim() ?? "";
+    if (!reply) {
+      setError("Write a reply before sending.");
+      return;
+    }
+    onSend();
+    setError(undefined);
+    onClose();
+  }
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    send();
+  }
+
+  return (
+    <Drawer
+      open={open && Boolean(message)}
+      title={message ? `Reply to ${message.from}` : "Reply"}
+      description={message?.subject}
+      onClose={close}
+      footer={
+        message ? (
+          <>
+            <Button variant="primary" block onClick={send}>
+              Send reply
+            </Button>
+            <Button variant="secondary" block onClick={close}>
+              Cancel
+            </Button>
+          </>
+        ) : null
+      }
+    >
+      {message ? (
+        <form onSubmit={handleSubmit}>
+          <FieldSet key={message.id} legend="Reply" description="This goes back to the thread.">
+            <Field label="To" htmlFor={toId}>
+              <Input id={toId} name="to" defaultValue={message.from} />
+            </Field>
+            <Field label="Subject" htmlFor={subjectId}>
+              <Input id={subjectId} name="subject" defaultValue={`Re: ${message.subject}`} />
+            </Field>
+            <Field
+              label="Message"
+              htmlFor={replyId}
+              hint="Keep it short. They already have the thread."
+              error={error}
+            >
+              <Textarea
+                id={replyId}
+                name="reply"
+                rows={6}
+                placeholder="Write a reply..."
+                error={Boolean(error)}
+              />
+            </Field>
+          </FieldSet>
+        </form>
+      ) : null}
+    </Drawer>
+  );
+}

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

@@ -0,0 +1,101 @@
+import type { 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 const INBOX: InboxMessage[] = [
+  {
+    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: true,
+  },
+  {
+    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: true,
+  },
+  {
+    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: true,
+  },
+  {
+    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: true,
+  },
+  {
+    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: true,
+  },
+  {
+    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: true,
+  },
+  {
+    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: true,
+  },
+];
+
+export function filterMessages(messages: InboxMessage[], tab: string): InboxMessage[] {
+  if (tab === "unread") return messages.filter((item) => item.unread);
+  if (tab === "mentions") return messages.filter((item) => item.kind === "Mention");
+  if (tab === "requests") return messages.filter((item) => item.kind === "Request");
+  return messages;
+}

package/ui/patterns/InboxPattern/index.ts

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

package/ui/patterns/InviteMembersPattern/InviteMembersPattern.tsx

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

package/ui/patterns/InviteMembersPattern/index.ts

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

package/ui/patterns/ListDetailPattern/ListDetailPattern.module.css

@@ -0,0 +1,34 @@
+.shell {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--layout-gutter-md);
+  align-items: start;
+  min-width: 0;
+}
+
+.main {
+  display: grid;
+  gap: var(--space-stack-md);
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.main :global(section) {
+  margin-bottom: 0;
+}
+
+.detail {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-3);
+  max-width: 36rem;
+}
+
+.body {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body);
+  line-height: var(--type-line-body);
+  color: var(--text-primary);
+}

package/ui/patterns/ListDetailPattern/ListDetailPattern.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { AppNav } from "../../AppNav";
+import { Badge } from "../../Badge";
+import type { BadgeTone } from "../../Badge";
+import { PageHeader } from "../../PageHeader";
+import type { PageHeaderProps } from "../../PageHeader";
+import { Section } from "../../Section";
+import { Table } from "../../Table";
+import styles from "./ListDetailPattern.module.css";
+
+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;
+}
+
+const PROJECTS: ListDetailItem[] = [
+  {
+    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.",
+  },
+];
+
+const COLUMNS = [
+  { key: "name", header: "Project", emphasis: true },
+  { key: "owner", header: "Owner" },
+  { key: "status", header: "Status" },
+  { key: "updated", header: "Updated" },
+];
+
+function projectById(id: string | undefined): ListDetailItem {
+  return PROJECTS.find((item) => item.id === id) ?? PROJECTS[0];
+}
+
+export function ListDetailPattern({ breadcrumbs, selectedId }: ListDetailPatternProps) {
+  const [activeId, setActiveId] = useState(projectById(selectedId).id);
+
+  useEffect(() => {
+    if (selectedId) setActiveId(projectById(selectedId).id);
+  }, [selectedId]);
+
+  useEffect(() => {
+    const apply = () => {
+      const hash = window.location.hash.replace(/^#/, "");
+      if (PROJECTS.some((item) => item.id === hash)) setActiveId(hash);
+    };
+    apply();
+    window.addEventListener("hashchange", apply);
+    return () => window.removeEventListener("hashchange", apply);
+  }, []);
+
+  const selected = projectById(activeId);
+
+  const navItems = useMemo(
+    () =>
+      PROJECTS.map((item) => ({
+        href: `#${item.id}`,
+        label: item.name,
+        active: item.id === selected.id,
+      })),
+    [selected.id],
+  );
+
+  const rows = PROJECTS.map((item) => ({
+    name: item.name,
+    owner: item.owner,
+    status: (
+      <Badge tone={item.statusTone} size="sm">
+        {item.status}
+      </Badge>
+    ),
+    updated: item.updated,
+  }));
+
+  return (
+    <div className="layout-canvas layout-canvas--sticky-header">
+      <div className="layout-header">
+        <PageHeader
+          title="Projects"
+          subtitle="Sprint 24 files and their current status."
+          breadcrumbs={breadcrumbs}
+        />
+      </div>
+      <div className="layout-content">
+        <div className={styles.shell}>
+          <AppNav title="Files" items={navItems} />
+          <div className={styles.main}>
+            <Section title="Projects" description="Select a file in the list to view details">
+              <Table columns={COLUMNS} rows={rows} caption="Sprint 24 projects" />
+            </Section>
+            <Section title={selected.name} description={`${selected.owner} · ${selected.updated}`}>
+              <div className={styles.detail}>
+                <Badge tone={selected.statusTone}>{selected.status}</Badge>
+                <p className={styles.body}>{selected.body}</p>
+              </div>
+            </Section>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/patterns/ListDetailPattern/index.ts

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

package/ui/patterns/SettingsFormPattern/SettingsFormPattern.module.css

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

package/ui/patterns/SettingsFormPattern/SettingsFormPattern.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useId, useState, type FormEvent } from "react";
+import { Button } from "../../Button";
+import { Checkbox } from "../../Checkbox";
+import { Field } from "../../Field";
+import { Input } from "../../Input";
+import { PageHeader } from "../../PageHeader";
+import type { PageHeaderProps } from "../../PageHeader";
+import { Section } from "../../Section";
+import { Select } from "../../Select";
+import { Toast } from "../../Toast";
+import formStyles from "./SettingsFormPattern.module.css";
+
+export interface SettingsFormPatternProps {
+  breadcrumbs?: PageHeaderProps["breadcrumbs"];
+  onCancel?: () => void;
+  onSave?: () => void;
+}
+
+export function SettingsFormPattern({ breadcrumbs, onCancel, onSave }: SettingsFormPatternProps) {
+  const uid = useId();
+  const [toastOpen, setToastOpen] = useState(false);
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    onSave?.();
+    setToastOpen(true);
+  }
+
+  return (
+    <div className="layout-canvas layout-canvas--sticky-header">
+      <div className="layout-header">
+        <PageHeader
+          title="Settings"
+          subtitle="Manage workspace profile and notification preferences."
+          breadcrumbs={breadcrumbs}
+          eyebrow={breadcrumbs ? undefined : "Account"}
+        />
+      </div>
+      <form className="layout-content" onSubmit={handleSubmit}>
+        <Section title="Profile" description="Basic information visible to collaborators">
+          <div className={formStyles.form}>
+            <Field label="Display name" htmlFor={`${uid}-display-name`} hint="Shown on shared projects">
+              <Input id={`${uid}-display-name`} defaultValue="Maya Chen" />
+            </Field>
+            <Field label="Email" htmlFor={`${uid}-email`}>
+              <Input id={`${uid}-email`} type="email" defaultValue="maya@agentix.dev" />
+            </Field>
+            <Field label="Timezone" htmlFor={`${uid}-timezone`}>
+              <Select
+                id={`${uid}-timezone`}
+                options={[
+                  { value: "utc", label: "UTC" },
+                  { value: "cet", label: "Central European Time" },
+                  { value: "est", label: "Eastern Time" },
+                ]}
+                defaultValue="cet"
+              />
+            </Field>
+          </div>
+        </Section>
+        <Section title="Notifications">
+          <div className={formStyles.form}>
+            <Checkbox id={`${uid}-email-updates`} label="Email me weekly summaries" defaultChecked />
+            <Checkbox id={`${uid}-product-news`} label="Product news and tips" />
+          </div>
+        </Section>
+        <div className={formStyles.actions}>
+          <Button variant="primary" size="md" type="submit">
+            Save changes
+          </Button>
+          <Button variant="secondary" size="md" type="button" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+        <Toast
+          open={toastOpen}
+          title="Settings saved"
+          description="Workspace profile and preferences are up to date."
+          status="success"
+          duration={3000}
+          onClose={() => setToastOpen(false)}
+          onOpenChange={setToastOpen}
+        />
+      </form>
+    </div>
+  );
+}

package/ui/patterns/SettingsFormPattern/index.ts

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