agentic-ds-kit 0.1.0 → 0.2.1

package/ui/patterns/ListDetailPattern/ListDetailPattern.tsx

@@ -1,145 +0,0 @@
-"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

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

package/ui/patterns/SettingsFormPattern/SettingsFormPattern.tsx

@@ -1,89 +0,0 @@
-"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

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

package/ui/shared/ChartFrame.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { BarChart3, Table2 } from "lucide-react";
-import { useId, useState, type ReactNode } from "react";
-import styles from "./ChartFrame.module.css";
-
-export interface ChartFrameProps {
-  title?: string;
-  description?: string;
-  legend?: ReactNode;
-  children: ReactNode;
-  table?: ReactNode;
-  footnote?: string;
-  isEmpty?: boolean;
-  emptyLabel?: string;
-  isLoading?: boolean;
-  className?: string;
-}
-
-export function ChartFrame({
-  title,
-  description,
-  legend,
-  children,
-  table,
-  footnote,
-  isEmpty = false,
-  emptyLabel = "No data for this range",
-  isLoading = false,
-  className = "",
-}: ChartFrameProps) {
-  const [view, setView] = useState<"chart" | "table">("chart");
-  const titleId = useId();
-  const descriptionId = useId();
-  const panelId = useId();
-  const showTable = view === "table" && Boolean(table);
-
-  return (
-    <figure
-      className={`${styles.frame} ${className}`.trim()}
-      aria-labelledby={title ? titleId : undefined}
-      aria-describedby={description ? descriptionId : undefined}
-    >
-      {title || table ? (
-        <figcaption className={styles.header}>
-          <div className={styles.heading}>
-            {title ? (
-              <h3 id={titleId} className={styles.title}>
-                {title}
-              </h3>
-            ) : null}
-            {description ? (
-              <p id={descriptionId} className={styles.description}>
-                {description}
-              </p>
-            ) : null}
-          </div>
-          {table ? (
-            <div className={styles.actions}>
-              <button
-                type="button"
-                className={styles.toggle}
-                onClick={() => setView(showTable ? "chart" : "table")}
-                aria-expanded={showTable}
-                aria-controls={panelId}
-              >
-                {showTable ? <BarChart3 aria-hidden="true" size={14} /> : <Table2 aria-hidden="true" size={14} />}
-                <span>{showTable ? "Chart" : "Table"}</span>
-              </button>
-            </div>
-          ) : null}
-        </figcaption>
-      ) : null}
-
-      {legend}
-
-      <div
-        id={panelId}
-        className={`${styles.body}${isLoading ? ` ${styles.loading}` : ""}`}
-      >
-        {isEmpty ? <p className={styles.empty}>{emptyLabel}</p> : showTable ? table : children}
-      </div>
-
-      {footnote ? <p className={styles.footnote}>{footnote}</p> : null}
-    </figure>
-  );
-}

package/ui/shared/chartMath.ts

@@ -1,228 +0,0 @@
-export interface ChartDatum {
-  label: string;
-  value: number;
-  color?: string;
-}
-
-export interface ChartSeries {
-  label: string;
-  data: number[];
-  color?: string;
-}
-
-export const CHART_COLORS = [
-  "var(--fill-brand)",
-  "var(--fill-success)",
-  "var(--fill-warning)",
-  "var(--fill-danger)",
-  "var(--fill-info)",
-] as const;
-
-export function formatValue(value: number): string {
-  if (!Number.isFinite(value)) return "—";
-  if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
-  if (Math.abs(value) >= 10_000) return `${(value / 1_000).toFixed(1)}k`;
-  if (Number.isInteger(value)) return value.toLocaleString("en-US");
-  return value.toLocaleString("en-US", { maximumFractionDigits: 1 });
-}
-
-export function formatAxisTick(value: number): string {
-  if (!Number.isFinite(value)) return "";
-  if (Math.abs(value) >= 1_000_000) return `${value / 1_000_000}M`;
-  if (Math.abs(value) >= 1_000) return `${value / 1_000}k`;
-  return String(value);
-}
-
-export function colorAt(index: number, override?: string): string {
-  return override ?? CHART_COLORS[index % CHART_COLORS.length];
-}
-
-export interface PreparedSegment extends ChartDatum {
-  share: number;
-  color: string;
-}
-
-export function prepareSegments(
-  data: ChartDatum[],
-  options: { maxSegments?: number; sort?: boolean; otherLabel?: string } = {},
-): PreparedSegment[] {
-  const { maxSegments = 6, sort = true, otherLabel = "Other" } = options;
-  const cleaned = data.filter((entry) => Number.isFinite(entry.value) && entry.value > 0);
-  const ordered = sort ? [...cleaned].sort((a, b) => b.value - a.value) : [...cleaned];
-  const visible = ordered.slice(0, maxSegments);
-  const remainder = ordered.slice(maxSegments);
-  const remainderTotal = remainder.reduce((sum, entry) => sum + entry.value, 0);
-  if (remainderTotal > 0) {
-    visible.push({ label: otherLabel, value: remainderTotal });
-  }
-  const total = visible.reduce((sum, entry) => sum + entry.value, 0);
-  return visible.map((entry, index) => ({
-    ...entry,
-    color: colorAt(index, entry.color),
-    share: total > 0 ? entry.value / total : 0,
-  }));
-}
-
-export function normalizeBarInput(input: {
-  data?: ChartDatum[];
-  categories?: string[];
-  series?: ChartSeries[];
-}): { categories: string[]; series: ChartSeries[] } {
-  if (input.categories?.length && input.series?.length) {
-    return {
-      categories: input.categories,
-      series: input.series.map((entry, index) => ({
-        ...entry,
-        color: colorAt(index, entry.color),
-      })),
-    };
-  }
-  const data = input.data ?? [];
-  return {
-    categories: data.map((entry) => entry.label),
-    series: [
-      {
-        label: "Value",
-        data: data.map((entry) => entry.value),
-        color: CHART_COLORS[0],
-      },
-    ],
-  };
-}
-
-export function normalizeLineInput(input: {
-  data?: ChartDatum[];
-  labels?: string[];
-  series?: ChartSeries[];
-}): { labels: string[]; series: ChartSeries[] } {
-  if (input.labels?.length && input.series?.length) {
-    return {
-      labels: input.labels,
-      series: input.series.map((entry, index) => ({
-        ...entry,
-        color: colorAt(index, entry.color),
-      })),
-    };
-  }
-  const data = input.data ?? [];
-  return {
-    labels: data.map((entry) => entry.label),
-    series: [
-      {
-        label: "Value",
-        data: data.map((entry) => entry.value),
-        color: CHART_COLORS[0],
-      },
-    ],
-  };
-}
-
-export function seriesExtent(
-  series: ChartSeries[],
-  options: { includeZero?: boolean } = {},
-): [number, number] {
-  const values = series.flatMap((entry) => entry.data).filter((value) => Number.isFinite(value));
-  if (!values.length) return [0, 1];
-  let min = Math.min(...values);
-  let max = Math.max(...values);
-  if (options.includeZero) {
-    min = Math.min(min, 0);
-    max = Math.max(max, 0);
-  }
-  if (min === max) {
-    return min === 0 ? [0, 1] : [min * 0.9, max * 1.1];
-  }
-  return [min, max];
-}
-
-export function niceTicks(min: number, max: number, count = 5): { ticks: number[]; min: number; max: number } {
-  const range = niceNum(max - min, false);
-  const step = niceNum(range / Math.max(count - 1, 1), true);
-  const niceMin = Math.floor(min / step) * step;
-  const niceMax = Math.ceil(max / step) * step;
-  const ticks: number[] = [];
-  for (let tick = niceMin; tick <= niceMax + step / 2; tick += step) {
-    ticks.push(Number(tick.toFixed(10)));
-  }
-  return { ticks, min: niceMin, max: niceMax };
-}
-
-function niceNum(value: number, round: boolean): number {
-  const exponent = Math.floor(Math.log10(Math.abs(value) || 1));
-  const fraction = value / 10 ** exponent;
-  let niceFraction: number;
-  if (round) {
-    if (fraction < 1.5) niceFraction = 1;
-    else if (fraction < 3) niceFraction = 2;
-    else if (fraction < 7) niceFraction = 5;
-    else niceFraction = 10;
-  } else if (fraction <= 1) niceFraction = 1;
-  else if (fraction <= 2) niceFraction = 2;
-  else if (fraction <= 5) niceFraction = 5;
-  else niceFraction = 10;
-  return niceFraction * 10 ** exponent;
-}
-
-export function linearScale(domain: [number, number], range: [number, number]) {
-  const [d0, d1] = domain;
-  const [r0, r1] = range;
-  const span = d1 - d0 || 1;
-  return (value: number) => r0 + ((value - d0) / span) * (r1 - r0);
-}
-
-export const CHART_MARGINS = { top: 12, right: 12, bottom: 36, left: 44 } as const;
-
-export const TAU = Math.PI * 2;
-
-export function polarToCartesian(cx: number, cy: number, radius: number, angle: number) {
-  return {
-    x: cx + radius * Math.cos(angle - Math.PI / 2),
-    y: cy + radius * Math.sin(angle - Math.PI / 2),
-  };
-}
-
-export function pointOnCircle(cx: number, cy: number, radius: number, angle: number) {
-  return polarToCartesian(cx, cy, radius, angle);
-}
-
-export function wedgePath(options: {
-  cx: number;
-  cy: number;
-  radius: number;
-  startAngle: number;
-  endAngle: number;
-}): string {
-  const { cx, cy, radius, startAngle, endAngle } = options;
-  const start = polarToCartesian(cx, cy, radius, endAngle);
-  const end = polarToCartesian(cx, cy, radius, startAngle);
-  const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
-  return [
-    `M ${cx} ${cy}`,
-    `L ${start.x} ${start.y}`,
-    `A ${radius} ${radius} 0 ${largeArc} 0 ${end.x} ${end.y}`,
-    "Z",
-  ].join(" ");
-}
-
-export function ringPath(options: {
-  cx: number;
-  cy: number;
-  innerRadius: number;
-  outerRadius: number;
-  startAngle: number;
-  endAngle: number;
-}): string {
-  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle } = options;
-  const outerStart = polarToCartesian(cx, cy, outerRadius, endAngle);
-  const outerEnd = polarToCartesian(cx, cy, outerRadius, startAngle);
-  const innerStart = polarToCartesian(cx, cy, innerRadius, startAngle);
-  const innerEnd = polarToCartesian(cx, cy, innerRadius, endAngle);
-  const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
-  return [
-    `M ${outerStart.x} ${outerStart.y}`,
-    `A ${outerRadius} ${outerRadius} 0 ${largeArc} 0 ${outerEnd.x} ${outerEnd.y}`,
-    `L ${innerStart.x} ${innerStart.y}`,
-    `A ${innerRadius} ${innerRadius} 0 ${largeArc} 1 ${innerEnd.x} ${innerEnd.y}`,
-    "Z",
-  ].join(" ");
-}

package/ui/shared/useChartSize.ts

@@ -1,22 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-
-export function useChartSize(fallbackHeight: number) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState(0);
-
-  useEffect(() => {
-    const node = ref.current;
-    if (!node) return undefined;
-
-    const update = () => setWidth(node.clientWidth);
-    update();
-
-    const observer = new ResizeObserver(update);
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, []);
-
-  return { ref, width, height: fallbackHeight };
-}