@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/containers/kanban/kanban.js

@@ -0,0 +1,329 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { GripVertical } from "lucide-react";
+import {
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Avatar } from "../../atoms/avatar/avatar.js";
+import { Chip } from "../../atoms/chip/chip.js";
+import { cn } from "../../utils/cn.js";
+import {
+  dropIndex,
+  keyboardTarget,
+  locateCard,
+  moveCard,
+  wipStatus
+} from "./model.js";
+const KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+const DRAG_THRESHOLD = 4;
+function DefaultCard({ card }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "break-words text-row-title text-ink", children: card.title }),
+    card.description ? /* @__PURE__ */ jsx("span", { className: "line-clamp-2 break-words text-ink-3 text-meta", children: card.description }) : null,
+    card.tag || card.assignee || card.meta ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-density-sm", children: [
+      card.tag ? /* @__PURE__ */ jsx(Chip, { tone: "accent", children: card.tag }) : null,
+      card.meta ? /* @__PURE__ */ jsx("span", { className: "text-ink-3 text-meta", children: card.meta }) : null,
+      card.assignee ? /* @__PURE__ */ jsx("span", { className: "ml-auto", children: /* @__PURE__ */ jsx(Avatar, { name: card.assignee }) }) : null
+    ] }) : null
+  ] });
+}
+function Kanban({
+  columns: controlled,
+  defaultColumns = [],
+  onColumnsChange,
+  enforceLimit = false,
+  renderCard,
+  emptyLabel = "Sin tarjetas",
+  className,
+  "aria-label": ariaLabel = "Tablero"
+}) {
+  const [internal, setInternal] = useState(defaultColumns);
+  const columns = controlled ?? internal;
+  const [draft, setDraft] = useState(null);
+  const [grabbedId, setGrabbedId] = useState(null);
+  const [drag, setDrag] = useState(null);
+  const [status, setStatus] = useState("");
+  const rootRef = useRef(null);
+  const focusId = useRef(null);
+  const columnsRef = useRef(columns);
+  columnsRef.current = columns;
+  const instructionsId = useId();
+  const shown = draft ?? columns;
+  const commit = useCallback(
+    (next, move) => {
+      if (controlled === void 0) setInternal(next);
+      onColumnsChange?.(next, move);
+    },
+    [controlled, onColumnsChange]
+  );
+  useLayoutEffect(() => {
+    const id = focusId.current;
+    if (!id) return;
+    const el = rootRef.current?.querySelector(`[data-card-id="${CSS.escape(id)}"]`);
+    if (el && document.activeElement !== el) el.focus();
+    if (!grabbedId) focusId.current = null;
+  });
+  const describe = (cols, cardId, verb) => {
+    const at = locateCard(cols, cardId);
+    const column = cols.find((c) => c.id === at?.columnId);
+    const card = column?.cards[at?.index ?? 0];
+    if (!at || !column || !card) return;
+    setStatus(
+      `${verb} ${card.title}: columna ${column.title}, posici\xF3n ${at.index + 1} de ${column.cards.length}.`
+    );
+  };
+  const onCardKeyDown = (event, card) => {
+    const { key } = event;
+    if (key === " " || key === "Enter") {
+      event.preventDefault();
+      if (grabbedId === card.id) {
+        const move = draft ? moveFromDraft(columns, draft, card.id) : null;
+        if (draft && move) commit(draft, move);
+        describe(draft ?? columns, card.id, "Soltada");
+        setDraft(null);
+        setGrabbedId(null);
+      } else if (!grabbedId) {
+        setGrabbedId(card.id);
+        setDraft(columns);
+        focusId.current = card.id;
+        describe(columns, card.id, "Tomada");
+      }
+      return;
+    }
+    if (grabbedId !== card.id) return;
+    if (key === "Escape") {
+      event.preventDefault();
+      setDraft(null);
+      setGrabbedId(null);
+      setStatus(`Movimiento cancelado: ${card.title} vuelve a su lugar.`);
+      return;
+    }
+    if (KEYS.includes(key)) {
+      event.preventDefault();
+      const base = draft ?? columns;
+      const target = keyboardTarget(base, card.id, key);
+      if (!target) return;
+      const result = moveCard(base, card.id, target.columnId, target.index, { enforceLimit });
+      if (!result) {
+        setStatus("Esa columna lleg\xF3 a su l\xEDmite.");
+        return;
+      }
+      focusId.current = card.id;
+      setDraft(result.columns);
+      describe(result.columns, card.id, "Movida");
+    }
+  };
+  const startPointerDrag = (event, card) => {
+    if (event.button !== 0 || grabbedId) return;
+    if (event.pointerType === "touch" && !event.target.closest("[data-grip]")) {
+      return;
+    }
+    const element = event.currentTarget;
+    const rect = element.getBoundingClientRect();
+    const startX = event.clientX;
+    const startY = event.clientY;
+    let active = false;
+    let latest = null;
+    const locate = (x, y) => {
+      const column = document.elementFromPoint(x, y)?.closest("[data-column-id]");
+      const columnId = column?.dataset.columnId;
+      if (!column || !columnId) return null;
+      const mids = Array.from(column.querySelectorAll("[data-card-id]")).filter((el) => el.dataset.cardId !== card.id).map((el) => {
+        const r = el.getBoundingClientRect();
+        return r.top + r.height / 2;
+      });
+      return { columnId, index: dropIndex(mids, y) };
+    };
+    const onMove = (e) => {
+      if (!active) {
+        if (Math.hypot(e.clientX - startX, e.clientY - startY) < DRAG_THRESHOLD) return;
+        active = true;
+        setStatus(`Arrastrando ${card.title}.`);
+      }
+      latest = locate(e.clientX, e.clientY);
+      setDrag({
+        cardId: card.id,
+        x: e.clientX,
+        y: e.clientY,
+        width: rect.width,
+        offsetX: startX - rect.left,
+        offsetY: startY - rect.top,
+        target: latest
+      });
+    };
+    const finish = (apply) => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+      window.removeEventListener("keydown", onEscape);
+      if (!active) return;
+      setDrag(null);
+      if (apply && latest) {
+        const result = moveCard(columnsRef.current, card.id, latest.columnId, latest.index, {
+          enforceLimit
+        });
+        if (result) {
+          commit(result.columns, result.move);
+          describe(result.columns, card.id, "Soltada");
+          return;
+        }
+      }
+      setStatus(`Movimiento cancelado: ${card.title} vuelve a su lugar.`);
+    };
+    const onUp = () => finish(true);
+    const onCancel = () => finish(false);
+    const onEscape = (e) => {
+      if (e.key === "Escape") finish(false);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    window.addEventListener("keydown", onEscape);
+  };
+  const dragged = drag ? shown.flatMap((c) => c.cards).find((c) => c.id === drag.cardId) : void 0;
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: focus leaving the board cancels a held card
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: cn("@container/kanban min-w-0", className),
+        onBlur: (event) => {
+          const next = event.relatedTarget;
+          if (grabbedId && next && !rootRef.current?.contains(next)) {
+            setDraft(null);
+            setGrabbedId(null);
+            setStatus("Movimiento cancelado.");
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { id: instructionsId, className: "sr-only", children: "Presiona Espacio para tomar una tarjeta, las flechas para moverla y Espacio para soltarla. Escape cancela." }),
+          /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "assertive", className: "sr-only", children: status }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "group",
+              "aria-label": ariaLabel,
+              className: "flex snap-x snap-mandatory items-start gap-density overflow-x-auto pb-2",
+              children: shown.map((column) => {
+                const state = wipStatus(column.cards.length, column.wipLimit);
+                const targetHere = drag?.target?.columnId === column.id ? drag.target.index : null;
+                let seen = 0;
+                const items = [];
+                const indicator = (key) => /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    "aria-hidden": "true",
+                    className: "h-1 shrink-0 rounded-badge bg-accent",
+                    "data-drop-indicator": ""
+                  },
+                  key
+                );
+                for (const card of column.cards) {
+                  const isDragged = drag?.cardId === card.id;
+                  if (!isDragged) {
+                    if (targetHere === seen) items.push(indicator(`ind-${seen}`));
+                    seen += 1;
+                  }
+                  const grabbed = grabbedId === card.id;
+                  items.push(
+                    /* @__PURE__ */ jsx("li", { className: "min-w-0", children: /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "button",
+                        tabIndex: 0,
+                        "data-card-id": card.id,
+                        "aria-pressed": grabbed,
+                        "aria-roledescription": "tarjeta arrastrable",
+                        "aria-describedby": instructionsId,
+                        onKeyDown: (e) => onCardKeyDown(e, card),
+                        onPointerDown: (e) => startPointerDrag(e, card),
+                        className: cn(
+                          "pressable relative flex cursor-grab select-none gap-1 rounded-input border-card surface-card p-density shadow-card focus-visible:focus-ring",
+                          isDragged && "opacity-40",
+                          grabbed && "shadow-selected"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "data-grip": "",
+                              "aria-hidden": "true",
+                              className: "-ml-1 flex w-4 shrink-0 touch-none items-start pt-0.5 text-ink-3",
+                              children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card }) })
+                        ]
+                      }
+                    ) }, card.id)
+                  );
+                }
+                if (targetHere !== null && targetHere >= seen) items.push(indicator("ind-end"));
+                return /* @__PURE__ */ jsxs(
+                  "section",
+                  {
+                    "data-column-id": column.id,
+                    "aria-label": column.title,
+                    className: "flex w-[min(18rem,85cqw)] shrink-0 snap-start flex-col gap-density-sm rounded-card bg-surface-sunken p-density-sm @4xl/kanban:w-auto @4xl/kanban:min-w-56 @4xl/kanban:flex-1",
+                    children: [
+                      /* @__PURE__ */ jsxs("header", { className: "flex min-w-0 items-center justify-between gap-density-sm px-1 pt-1", children: [
+                        /* @__PURE__ */ jsx("h3", { className: "min-w-0 truncate text-card-title text-ink", children: column.title }),
+                        /* @__PURE__ */ jsx(
+                          Chip,
+                          {
+                            tone: state === "over" ? "danger" : state === "at-limit" ? "warning" : "neutral",
+                            "aria-label": column.wipLimit === void 0 ? `${column.cards.length} tarjetas` : `${column.cards.length} de ${column.wipLimit} tarjetas, l\xEDmite de trabajo en curso`,
+                            children: column.wipLimit === void 0 ? column.cards.length : `${column.cards.length}/${column.wipLimit}`
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("ul", { className: "m-0 flex min-h-16 list-none flex-col gap-density-sm p-0", children: [
+                        items,
+                        column.cards.length === 0 && targetHere === null ? /* @__PURE__ */ jsx("li", { className: "px-1 py-density text-center text-ink-3 text-meta", children: emptyLabel }) : null
+                      ] })
+                    ]
+                  },
+                  column.id
+                );
+              })
+            }
+          ),
+          drag && dragged ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none fixed z-90 rotate-1 rounded-input border-card surface-card p-density shadow-overlay",
+              style: {
+                left: drag.x - drag.offsetX,
+                top: drag.y - drag.offsetY,
+                width: drag.width
+              },
+              children: renderCard ? renderCard(dragged) : /* @__PURE__ */ jsx(DefaultCard, { card: dragged })
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+}
+function moveFromDraft(original, draft, cardId) {
+  const from = locateCard(original, cardId);
+  const to = locateCard(draft, cardId);
+  if (!from || !to) return null;
+  if (from.columnId === to.columnId && from.index === to.index) return null;
+  return {
+    cardId,
+    fromColumnId: from.columnId,
+    fromIndex: from.index,
+    toColumnId: to.columnId,
+    toIndex: to.index
+  };
+}
+export {
+  Kanban
+};

package/dist/containers/kanban/model.d.ts

@@ -0,0 +1,49 @@
+export interface KanbanCardData {
+    id: string;
+    title: string;
+    description?: string;
+    tag?: string;
+    assignee?: string;
+    meta?: string;
+}
+export interface KanbanColumnData {
+    id: string;
+    title: string;
+    /** Work-in-progress limit: the badge warns at the limit and turns red above it. */
+    wipLimit?: number;
+    cards: KanbanCardData[];
+}
+export interface KanbanMove {
+    cardId: string;
+    fromColumnId: string;
+    fromIndex: number;
+    toColumnId: string;
+    toIndex: number;
+}
+export type WipStatus = "none" | "ok" | "at-limit" | "over";
+export declare function wipStatus(count: number, limit?: number): WipStatus;
+export declare function locateCard(columns: KanbanColumnData[], cardId: string): {
+    columnId: string;
+    index: number;
+} | null;
+export interface MoveOptions {
+    /** Refuse drops into a different column that is already at its WIP limit. */
+    enforceLimit?: boolean;
+}
+/**
+ * Moves a card. `toIndex` is the position in the target column AFTER the card is removed from
+ * its origin, clamped to the column. Returns null when nothing changes (unknown ids, same spot,
+ * or a blocked drop), so callers can skip the update.
+ */
+export declare function moveCard(columns: KanbanColumnData[], cardId: string, toColumnId: string, toIndex: number, options?: MoveOptions): {
+    columns: KanbanColumnData[];
+    move: KanbanMove;
+} | null;
+export type KanbanKey = "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown";
+/** Where a grabbed card goes for an arrow key: sideways keeps the row, vertical reorders. */
+export declare function keyboardTarget(columns: KanbanColumnData[], cardId: string, key: KanbanKey): {
+    columnId: string;
+    index: number;
+} | null;
+/** Insert index for a pointer at `y`, from the vertical midpoints of the cards left in a column. */
+export declare function dropIndex(midpoints: number[], y: number): number;

package/dist/containers/kanban/model.js

@@ -0,0 +1,77 @@
+function wipStatus(count, limit) {
+  if (limit === void 0) return "none";
+  if (count > limit) return "over";
+  return count === limit ? "at-limit" : "ok";
+}
+function locateCard(columns, cardId) {
+  for (const column of columns) {
+    const index = column.cards.findIndex((card) => card.id === cardId);
+    if (index !== -1) return { columnId: column.id, index };
+  }
+  return null;
+}
+function moveCard(columns, cardId, toColumnId, toIndex, options = {}) {
+  const from = locateCard(columns, cardId);
+  const target = columns.find((column) => column.id === toColumnId);
+  if (!from || !target) return null;
+  const sameColumn = from.columnId === toColumnId;
+  if (!sameColumn && options.enforceLimit && target.wipLimit !== void 0 && target.cards.length >= target.wipLimit) {
+    return null;
+  }
+  const remaining = sameColumn ? target.cards.length - 1 : target.cards.length;
+  const index = Math.min(Math.max(0, Math.trunc(toIndex)), remaining);
+  if (sameColumn && index === from.index) return null;
+  const source = columns.find((column) => column.id === from.columnId);
+  const card = source?.cards[from.index];
+  if (!card) return null;
+  const next = columns.map((column) => {
+    if (column.id === from.columnId && !sameColumn) {
+      return { ...column, cards: column.cards.filter((c) => c.id !== cardId) };
+    }
+    if (column.id === toColumnId) {
+      const cards = column.cards.filter((c) => c.id !== cardId);
+      cards.splice(index, 0, card);
+      return { ...column, cards };
+    }
+    return column;
+  });
+  return {
+    columns: next,
+    move: {
+      cardId,
+      fromColumnId: from.columnId,
+      fromIndex: from.index,
+      toColumnId,
+      toIndex: index
+    }
+  };
+}
+function keyboardTarget(columns, cardId, key) {
+  const at = locateCard(columns, cardId);
+  if (!at) return null;
+  const columnIndex = columns.findIndex((column2) => column2.id === at.columnId);
+  const column = columns[columnIndex];
+  if (!column) return null;
+  if (key === "ArrowUp")
+    return at.index > 0 ? { columnId: at.columnId, index: at.index - 1 } : null;
+  if (key === "ArrowDown") {
+    return at.index < column.cards.length - 1 ? { columnId: at.columnId, index: at.index + 1 } : null;
+  }
+  const neighbour = columns[columnIndex + (key === "ArrowRight" ? 1 : -1)];
+  if (!neighbour) return null;
+  return { columnId: neighbour.id, index: Math.min(at.index, neighbour.cards.length) };
+}
+function dropIndex(midpoints, y) {
+  let index = 0;
+  for (const mid of midpoints) {
+    if (y > mid) index += 1;
+  }
+  return index;
+}
+export {
+  dropIndex,
+  keyboardTarget,
+  locateCard,
+  moveCard,
+  wipStatus
+};

package/dist/containers/kpi/index.d.ts

@@ -0,0 +1 @@
+export * from "./kpi.js";

package/dist/containers/kpi/index.js

@@ -0,0 +1 @@
+export * from "./kpi.js";

package/dist/containers/kpi/kpi.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export type KpiVariant = "default" | "danger";
+export interface KpiProps {
+    /** Short label describing the metric. */
+    label: ReactNode;
+    /** Highlighted number, already formatted by the consumer. */
+    value: ReactNode;
+    /** Small suffix next to the number, e.g. "/12". */
+    suffix?: ReactNode;
+    /** Optional subtext. */
+    description?: ReactNode;
+    variant?: KpiVariant;
+    className?: string;
+}
+export declare function Kpi({ label, value, suffix, description, variant, className, }: KpiProps): import("react").JSX.Element;

package/dist/containers/kpi/kpi.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function Kpi({
+  label,
+  value,
+  suffix,
+  description,
+  variant = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "@container/kpi flex min-w-0 flex-col gap-0.5 bg-surface px-[18px] py-3.5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "break-words font-semibold text-[12px] text-ink-2", children: label }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "break-words text-kpi-number tabular-nums @max-[9rem]/kpi:text-[22px]",
+              variant === "danger" ? "text-danger" : "text-ink"
+            ),
+            children: [
+              value,
+              suffix ? /* @__PURE__ */ jsx("small", { className: "ml-1 font-semibold text-[14px] text-ink-3 tracking-normal", children: suffix }) : null
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx("span", { className: "break-words text-[12px] text-ink-3", children: description }) : null
+      ]
+    }
+  );
+}
+export {
+  Kpi
+};

package/dist/containers/kpi-group/index.d.ts

@@ -0,0 +1 @@
+export { KpiGroup, type KpiGroupItem, type KpiGroupProps } from "./kpi-group.js";

package/dist/containers/kpi-group/index.js

@@ -0,0 +1,4 @@
+import { KpiGroup } from "./kpi-group.js";
+export {
+  KpiGroup
+};

package/dist/containers/kpi-group/kpi-group.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { NumberFormatConfig } from "../../atoms/number-value/format.js";
+export interface KpiGroupItem {
+    id: string;
+    label: ReactNode;
+    /** A number is formatted (and animated) with `format`; a node is shown as is. */
+    value: number | ReactNode;
+    format?: NumberFormatConfig;
+    /** Change in percent; renders a TrendChip. */
+    trend?: number;
+    trendLabel?: string;
+    /** Lower is better for this metric. */
+    invertTrend?: boolean;
+    description?: ReactNode;
+}
+export interface KpiGroupProps extends Omit<ComponentPropsWithoutRef<"dl">, "children"> {
+    items: KpiGroupItem[];
+    /** Animate numeric values counting up. */
+    animate?: boolean;
+}
+/**
+ * Metrics that belong together in one card, divided by hairlines. Columns follow the
+ * container width: 1, 2 or 4 across.
+ */
+export declare function KpiGroup({ items, animate, className, ...props }: KpiGroupProps): import("react").JSX.Element;

package/dist/containers/kpi-group/kpi-group.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberValue } from "../../atoms/number-value/number-value.js";
+import { TrendChip } from "../../atoms/trend-chip/trend-chip.js";
+import { cn } from "../../utils/cn.js";
+function KpiGroup({ items, animate = true, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/kpi-group min-w-0", className), children: /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: "m-0 grid grid-cols-1 gap-px overflow-hidden rounded-card border-card bg-divider shadow-card @sm/kpi-group:grid-cols-2 @3xl/kpi-group:grid-cols-4",
+      ...props,
+      children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "surface-card flex min-w-0 flex-col gap-density-sm p-card", children: [
+        /* @__PURE__ */ jsx("dt", { className: "truncate font-semibold text-ink-2 text-meta", children: item.label }),
+        /* @__PURE__ */ jsxs("dd", { className: "m-0 flex min-w-0 flex-col gap-density-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "break-words text-kpi-number text-ink tabular-nums", children: typeof item.value === "number" ? /* @__PURE__ */ jsx(
+            NumberValue,
+            {
+              value: item.value,
+              format: item.format,
+              duration: animate ? 900 : 0,
+              animateOnMount: animate
+            }
+          ) : item.value }),
+          item.trend !== void 0 ? /* @__PURE__ */ jsx(
+            TrendChip,
+            {
+              value: item.trend,
+              invert: item.invertTrend,
+              label: item.trendLabel,
+              className: "w-fit"
+            }
+          ) : null,
+          item.description ? /* @__PURE__ */ jsx("span", { className: "break-words text-ink-3 text-meta", children: item.description }) : null
+        ] })
+      ] }, item.id))
+    }
+  ) });
+}
+export {
+  KpiGroup
+};

package/dist/containers/page-header/index.d.ts

@@ -0,0 +1 @@
+export * from "./page-header.js";

package/dist/containers/page-header/index.js

@@ -0,0 +1 @@
+export * from "./page-header.js";

package/dist/containers/page-header/page-header.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef } from "react";
+export type PageHeaderProps = ComponentPropsWithoutRef<"header">;
+/**
+ * Page header. No required parts: compose an eyebrow / title / lede block in
+ * a plain `<div>` and, when the view has buttons, `PageHeaderActions` as the
+ * second child. Actions wrap under the title when the container is too narrow.
+ */
+export declare function PageHeader({ className, ...props }: PageHeaderProps): import("react").JSX.Element;
+export type PageHeaderEyebrowProps = ComponentPropsWithoutRef<"div">;
+export declare function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps): import("react").JSX.Element;
+export type PageHeaderTitleProps = ComponentPropsWithoutRef<"h1">;
+/** Page title. Wrap a word in `<span className="text-accent-word">` to accent it. */
+export declare function PageHeaderTitle({ className, ...props }: PageHeaderTitleProps): import("react").JSX.Element;
+export type PageHeaderLedeProps = ComponentPropsWithoutRef<"p">;
+export declare function PageHeaderLede({ className, ...props }: PageHeaderLedeProps): import("react").JSX.Element;
+export type PageHeaderActionsProps = ComponentPropsWithoutRef<"div">;
+export declare function PageHeaderActions({ className, ...props }: PageHeaderActionsProps): import("react").JSX.Element;

package/dist/containers/page-header/page-header.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+function PageHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: cn("flex flex-wrap items-end justify-between gap-x-6 gap-y-3.5", className),
+      ...props
+    }
+  );
+}
+function PageHeaderEyebrow({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mb-1 font-semibold text-[12px] text-ink-3", className), ...props });
+}
+function PageHeaderTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "h1",
+    {
+      className: cn("m-0 break-words text-page-title [text-wrap:balance]", className),
+      ...props
+    }
+  );
+}
+function PageHeaderLede({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("mt-[5px] max-w-[68ch] break-words text-lede text-ink-2", className),
+      ...props
+    }
+  );
+}
+function PageHeaderActions({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), ...props });
+}
+export {
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderEyebrow,
+  PageHeaderLede,
+  PageHeaderTitle
+};

package/dist/containers/resizable/index.d.ts

@@ -0,0 +1,2 @@
+export { keyboardDelta, normalizeSizes, type PanelConstraint, resizePair } from "./model.js";
+export { ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, } from "./resizable.js";