@drawnagency/primitives 0.1.94 → 0.1.95

package/src/lib/history-buckets.ts

@@ -0,0 +1,190 @@
+export interface HistoryCommit {
+  sha: string;
+  date: string;
+  /** First parent's sha; null for the repo's root commit. */
+  parent: string | null;
+}
+
+export type NodeKind = "commit" | "day" | "week" | "month" | "year";
+
+export interface HistoryNode {
+  /** Stable React key, unique within the tree. */
+  id: string;
+  kind: NodeKind;
+  label: string;
+  sublabel: string | null;
+  count: number;
+  /** Newest commit in this node — what "browse" opens. */
+  newestSha: string | null;
+  /** Compare base: parent of this node's oldest commit. Null at repo root. */
+  baseSha: string | null;
+  children: HistoryNode[];
+}
+
+export type GroupId =
+  | "today" | "this-week" | "previous-weeks" | "earlier-months" | "previous-years";
+
+export interface HistoryGroup {
+  id: GroupId;
+  label: string;
+  nodes: HistoryNode[];
+}
+
+const GROUPS: { id: GroupId; label: string }[] = [
+  { id: "today", label: "Today" },
+  { id: "this-week", label: "Earlier this week" },
+  { id: "previous-weeks", label: "Previous weeks" },
+  { id: "earlier-months", label: "Earlier months" },
+  { id: "previous-years", label: "Previous years" },
+];
+
+// Calendar-day arithmetic (not fixed-ms) so DST transitions don't shift boundaries.
+const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const addDays = (d: Date, n: number) =>
+  new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+const startOfYear = (d: Date) => new Date(d.getFullYear(), 0, 1);
+
+const WEEKDAY = new Intl.DateTimeFormat(undefined, { weekday: "long" });
+const MONTH = new Intl.DateTimeFormat(undefined, { month: "long" });
+const MON_DAY = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" });
+const TIME = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit" });
+
+interface Dated extends HistoryCommit {
+  at: Date;
+}
+
+/** Oldest-first list → node metadata shared by every non-commit node. */
+function rollup(sorted: Dated[]): Pick<HistoryNode, "count" | "newestSha" | "baseSha"> {
+  return {
+    count: sorted.length,
+    newestSha: sorted.length ? sorted[sorted.length - 1].sha : null,
+    baseSha: sorted.length ? sorted[0].parent : null,
+  };
+}
+
+function commitNode(c: Dated): HistoryNode {
+  return {
+    id: `c:${c.sha}`,
+    kind: "commit",
+    label: TIME.format(c.at),
+    sublabel: null,
+    count: 1,
+    newestSha: c.sha,
+    baseSha: c.parent,
+    children: [],
+  };
+}
+
+/** Bucket by a key derived from each commit's date, newest bucket first. */
+function bucketBy(sorted: Dated[], key: (d: Date) => string): Map<string, Dated[]> {
+  const out = new Map<string, Dated[]>();
+  for (const c of sorted) {
+    const k = key(c.at);
+    const list = out.get(k);
+    if (list) list.push(c);
+    else out.set(k, [c]);
+  }
+  // sorted is oldest-first, so reverse the insertion order for newest-first display.
+  return new Map([...out.entries()].reverse());
+}
+
+const dayKey = (d: Date) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+const monthKey = (d: Date) => `${d.getFullYear()}-${d.getMonth()}`;
+const yearKey = (d: Date) => `${d.getFullYear()}`;
+
+/** Day nodes whose children are commit nodes. `weekday` picks the label style. */
+function dayNodes(sorted: Dated[], weekday: boolean): HistoryNode[] {
+  return [...bucketBy(sorted, dayKey).entries()].map(([k, list]) => ({
+    id: `d:${k}`,
+    kind: "day" as const,
+    label: weekday ? WEEKDAY.format(list[0].at) : MON_DAY.format(list[0].at),
+    sublabel: weekday ? MON_DAY.format(list[0].at) : null,
+    ...rollup(list),
+    children: [...list].reverse().map(commitNode),
+  }));
+}
+
+function monthNodes(sorted: Dated[], withYear: boolean): HistoryNode[] {
+  return [...bucketBy(sorted, monthKey).entries()].map(([k, list]) => ({
+    id: `m:${k}`,
+    kind: "month" as const,
+    label: MONTH.format(list[0].at),
+    sublabel: withYear ? String(list[0].at.getFullYear()) : null,
+    ...rollup(list),
+    children: dayNodes(list, false),
+  }));
+}
+
+function yearNodes(sorted: Dated[]): HistoryNode[] {
+  return [...bucketBy(sorted, yearKey).entries()].map(([k, list]) => ({
+    id: `y:${k}`,
+    kind: "year" as const,
+    label: k,
+    sublabel: null,
+    ...rollup(list),
+    children: monthNodes(list, false),
+  }));
+}
+
+/**
+ * Up to three 7-day windows, newest first. Windows with no commits are dropped
+ * rather than rendered empty — an editor scanning history wants the edits, not
+ * a fixed-width calendar.
+ */
+function weekNodes(sorted: Dated[], windowStart: Date): HistoryNode[] {
+  const out: HistoryNode[] = [];
+  for (let i = 1; i <= 3; i++) {
+    const start = addDays(windowStart, -7 * i);
+    const end = addDays(windowStart, -7 * (i - 1));
+    const list = sorted.filter((c) => c.at >= start && c.at < end);
+    if (list.length === 0) continue;
+    out.push({
+      id: `w:${dayKey(start)}`,
+      kind: "week",
+      label: `${MON_DAY.format(start)} – ${MON_DAY.format(addDays(end, -1))}`,
+      sublabel: null,
+      ...rollup(list),
+      children: dayNodes(list, false),
+    });
+  }
+  return out;
+}
+
+export function buildHistoryTree(commits: HistoryCommit[], now: Date): HistoryGroup[] {
+  // Oldest-first throughout; each builder reverses for display.
+  const sorted: Dated[] = commits
+    .map((c) => ({ ...c, at: new Date(c.date) }))
+    .filter((c) => !Number.isNaN(c.at.getTime()))
+    .sort((a, b) => a.at.getTime() - b.at.getTime());
+
+  const t0 = startOfDay(now);          // today begins
+  const t1 = addDays(t0, -6);          // "earlier this week" window begins
+  const t2 = addDays(t1, -21);         // "previous weeks" window begins
+  const y0 = startOfYear(now);         // current year begins
+  const monthsEnd = t2;                // earlier-months covers [y0, t2)
+  const yearsEnd = t2 < y0 ? t2 : y0;  // previous-years covers [-inf, yearsEnd)
+
+  const inRange = (lo: Date | null, hi: Date) =>
+    sorted.filter((c) => (lo === null || c.at >= lo) && c.at < hi);
+
+  const byId: Record<GroupId, HistoryNode[]> = {
+    "today": [...sorted.filter((c) => c.at >= t0)].reverse().map(commitNode),
+    "this-week": dayNodes(inRange(t1, t0), true),
+    "previous-weeks": weekNodes(sorted, t1),
+    "earlier-months": monthsEnd > y0 ? monthNodes(inRange(y0, monthsEnd), true) : [],
+    "previous-years": yearNodes(inRange(null, yearsEnd)),
+  };
+
+  return GROUPS.map((g) => ({ ...g, nodes: byId[g.id] }));
+}
+
+/** Largest node count anywhere in the tree; never 0, so callers can divide by it. */
+export function maxNodeCount(groups: HistoryGroup[]): number {
+  let max = 1;
+  const walk = (n: HistoryNode) => {
+    if (n.count > max) max = n.count;
+    n.children.forEach(walk);
+  };
+  groups.forEach((g) => g.nodes.forEach(walk));
+  return max;
+}

package/src/lib/index.ts

@@ -12,7 +12,7 @@ export {
   suggestAccessibleOn,
   type WcagLevel,
 } from "./contrast";
-export { primaryVarValue, accentVarValue } from "./theme-vars";
+export { primaryVarValue, accentVarValue, onPrimaryVarValue } from "./theme-vars";
 export { sanitizeHtml, ensureSanitizer } from "./sanitize";
 export { gridColsClass } from "./grid";
 export { getIcon, curatedIcons, type IconEntry } from "./icons";

package/src/lib/media-folders.ts

@@ -178,6 +178,22 @@ export function healMediaManifest(manifest: MediaManifest): MediaManifest {
   return { ...manifest, images, folders };
 }
 
+/**
+ * Rebase a local manifest onto a freshly-fetched remote one, so media another
+ * writer added is in our copy before the next save assembles from it. Without
+ * this a rebased session still writes its pre-conflict manifest, which silently
+ * drops their entries and orphans the files they committed.
+ *
+ * Images union, ours winning, so local alt/folder-move edits survive; a pending
+ * local deletion isn't removed from the manifest until save, so the union can't
+ * resurrect one. Folders stay ours verbatim — deleting a folder removes it from
+ * our map with no wire signal, so unioning would undo the delete. Mirrors the
+ * server-side merge in core's content-ops.
+ */
+export function rebaseMediaManifest(local: MediaManifest, remote: MediaManifest): MediaManifest {
+  return { ...local, images: { ...remote.images, ...local.images } };
+}
+
 /**
  * Save-time manifest assembly: merge uploaded pending items, apply deletions,
  * preserve every other manifest key (folders!), then heal.

package/src/lib/registry.ts

@@ -77,12 +77,20 @@ export type Thumbnail =
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type CustomSettingsFormProps = Record<string, any>;
 
+export interface ModalOptions {
+  /** Content is a tab set — lock the modal height so tab switches don't resize it. */
+  tabbed?: boolean;
+}
+
+/** Signature of the editor's modal opener as threaded down to sections. */
+export type OpenModal = (title: string, content: ReactNode, options?: ModalOptions) => void;
+
 export interface SectionProps<T = unknown> {
   content: T;
   options?: Record<string, unknown>;
   onChange?: (content: T) => void;
   isEditMode: boolean;
-  openModal?: (title: string, content: ReactNode) => void;
+  openModal?: OpenModal;
   /** Delete this whole section. Used e.g. when a colors section's last swatch
    *  is dragged into another section, leaving it empty. */
   onDelete?: () => void;

package/src/lib/theme-vars.ts

@@ -1,11 +1,13 @@
 import type { SiteConfig } from "../schemas/site-config";
+import { suggestAccessibleOn } from "./contrast";
 
 /**
  * Computes the CSS value for the brand `--color-primary` / `--color-primary-contrast`
- * custom properties. When darkMode is "optional" AND a dark variant is set, the
- * value is a CSS `light-dark(<light>, <dark>)` expression — the browser resolves
- * it per the element's `color-scheme` (the `.dark` class sets `color-scheme: dark`;
- * `:root` sets `color-scheme: light`). Otherwise it's the plain light hex.
+ * / `--color-on-primary` custom properties. When darkMode is "optional" AND a dark
+ * variant is set, the value is a CSS `light-dark(<light>, <dark>)` expression — the
+ * browser resolves it per the element's `color-scheme` (the `.dark` class sets
+ * `color-scheme: dark`; `:root` sets `color-scheme: light`). Otherwise it's the
+ * plain light hex.
  *
  * Single source of truth for every injection site: Layout.astro / LoginLayout.astro
  * (SSR inline `<html style>`) and EditorShell (live setProperty + localStorage).
@@ -29,3 +31,22 @@ export function primaryVarValue(c?: Partial<ThemeColorConfig> | null): string {
 export function accentVarValue(c?: Partial<ThemeColorConfig> | null): string {
   return lightDark(c?.primaryContrast ?? DEFAULT_CONTRAST, c?.primaryContrastDark, c?.darkMode === "optional");
 }
+
+/**
+ * Foreground ink for text drawn ON a `--color-primary`-filled surface (branded
+ * plates, primary cards). Derived from `primaryColor` with the same
+ * black/white WCAG pick the editor's accent "Suggest" button uses, so a
+ * primary-filled surface is legible on every brand without configuration.
+ *
+ * This exists because `--color-primary-contrast` cannot serve the role: it is
+ * the *accent* — brands legitimately repoint it at a decorative colour (Siete's
+ * gold on aubergine) that reads as a highlight but cannot carry body copy.
+ * Sections should consume `var(--color-on-primary)` for text on primary and
+ * keep `--color-primary-contrast` for accents, and derive softer inks by mixing
+ * the two brand tokens: `color-mix(in srgb, var(--color-on-primary) 70%, var(--color-primary))`.
+ */
+export function onPrimaryVarValue(c?: Partial<ThemeColorConfig> | null): string {
+  const light = suggestAccessibleOn(c?.primaryColor ?? DEFAULT_PRIMARY);
+  const dark = c?.primaryColorDark ? suggestAccessibleOn(c.primaryColorDark) : null;
+  return lightDark(light, dark, c?.darkMode === "optional");
+}