@m0saic/templates 0.2.0

package/dist/m0saic/agents/commit-feed/v1/commit-feed.d.ts

@@ -0,0 +1,68 @@
+/**
+ * ============================================================================
+ * @m0saic/agents/commit-feed/v1 — who wrote this week's commits?
+ * ============================================================================
+ *
+ * A commit feed that colour-codes every row by WHO authored it — a human or
+ * a coding agent (Claude Code, Copilot, Cursor…) — with a share tile ("57%
+ * agent-authored"), a proportion bar and a legend on top. Built for the
+ * 2026 conference floor where most of the room ships with an agent in the
+ * loop and wants to see that in their own repo's numbers.
+ *
+ * Composition, not a fork: the feed itself is `@m0saic/alpine/commit-feed/v2`
+ * nested under this card's chrome (the pulse hero's move — `showHeader:false`
+ * + a transparent surface), with each commit mapped onto the feed's open
+ * `kind` vocabulary: `agent` / `human` colour the kind chip, the agent's
+ * name rides the area chip, the human who directed or merged it is the
+ * author. The chrome is the shared alpine card kit (RATIO splits, fonts
+ * sized to H), so the whole thing composes at any canvas.
+ *
+ * Determinism: no clock, no randomness — the share is derived from the
+ * `commits` prop, the default data is a fixed sample.
+ * ============================================================================
+ */
+import type { MosaicColor, MosaicTemplate } from "@m0saic/types";
+import { type ThemeSourceConfig } from "@m0saic/template-utils";
+import { type AlpinePreset } from "../../../alpine/_shared/alpine-theme";
+export type AgentCommit = {
+    /** Commit subject. */
+    title: string;
+    /** The human on the commit — the author, or the person who directed / merged an agent's work. */
+    author: string;
+    /** The coding agent that wrote it ("Claude Code", "Copilot", "Cursor"…). Empty = human-authored. */
+    agent?: string;
+    /** PR number. */
+    pr?: number | string;
+    /** Short date label ("May 15"). */
+    date?: string;
+    /** Area / package touched — shown on human rows (agent rows show the agent's name there). */
+    area?: string;
+    /** Reviewers (discs after the author). */
+    reviewers?: string[];
+};
+type RenderMode = "premium" | "light";
+type AnimConfig = {
+    renderMode?: RenderMode;
+    introFrac?: number;
+    reduceMotion?: boolean;
+};
+export type AgentCommitFeedProps = {
+    title?: string;
+    subtitle?: string;
+    commits: AgentCommit[];
+    /** Alpine theme variant (light default; "dark" = the night look). */
+    preset?: AlpinePreset;
+    /** Row / bar / legend colour for agent-authored commits. */
+    agentColor?: MosaicColor;
+    /** Row / bar / legend colour for human-authored commits. */
+    humanColor?: MosaicColor;
+    anim?: AnimConfig;
+    /** Opt-in producer theming (shared alpine theme by default). */
+    theme?: ThemeSourceConfig;
+    /** Dev-only: check the layout contract. */
+    debugLayout?: boolean;
+};
+/** A fixed sample week: four agent-authored commits, three human. */
+export declare const SAMPLE_COMMITS: AgentCommit[];
+export declare const AgentCommitFeedV1: MosaicTemplate<AgentCommitFeedProps>;
+export default AgentCommitFeedV1;

package/dist/m0saic/agents/commit-feed/v1/commit-feed.js

@@ -0,0 +1,293 @@
+"use strict";
+/**
+ * ============================================================================
+ * @m0saic/agents/commit-feed/v1 — who wrote this week's commits?
+ * ============================================================================
+ *
+ * A commit feed that colour-codes every row by WHO authored it — a human or
+ * a coding agent (Claude Code, Copilot, Cursor…) — with a share tile ("57%
+ * agent-authored"), a proportion bar and a legend on top. Built for the
+ * 2026 conference floor where most of the room ships with an agent in the
+ * loop and wants to see that in their own repo's numbers.
+ *
+ * Composition, not a fork: the feed itself is `@m0saic/alpine/commit-feed/v2`
+ * nested under this card's chrome (the pulse hero's move — `showHeader:false`
+ * + a transparent surface), with each commit mapped onto the feed's open
+ * `kind` vocabulary: `agent` / `human` colour the kind chip, the agent's
+ * name rides the area chip, the human who directed or merged it is the
+ * author. The chrome is the shared alpine card kit (RATIO splits, fonts
+ * sized to H), so the whole thing composes at any canvas.
+ *
+ * Determinism: no clock, no randomness — the share is derived from the
+ * `commits` prop, the default data is a fixed sample.
+ * ============================================================================
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgentCommitFeedV1 = exports.SAMPLE_COMMITS = void 0;
+const types_1 = require("@m0saic/types");
+const dsl_stdlib_1 = require("@m0saic/dsl-stdlib");
+const template_utils_1 = require("@m0saic/template-utils");
+const alpine_card_1 = require("../../../alpine/_shared/alpine-card");
+const alpine_theme_1 = require("../../../alpine/_shared/alpine-theme");
+const alpine_anim_1 = require("../../../alpine/_shared/alpine-anim");
+const TEMPLATE_ID = "@m0saic/agents/commit-feed/v1";
+const FEED_TEMPLATE_ID = "@m0saic/alpine/commit-feed/v2";
+const MAX_COMMITS = 7;
+const DEFAULT_AGENT_COLOR = "#EF7525";
+const DEFAULT_HUMAN_COLOR = "#388bfd";
+const DEFAULT_ANIM = { renderMode: "premium", introFrac: 0.7, reduceMotion: false };
+/** A fixed sample week: four agent-authored commits, three human. */
+exports.SAMPLE_COMMITS = [
+    { title: "dsl: snapGrid builder — zero-distortion guttered grids", author: "Quentin S", agent: "Claude Code", pr: 412, date: "Sep 8", reviewers: ["Ada L"] },
+    { title: "release: dsl-stdlib v2.0.0", author: "Quentin S", pr: 415, date: "Sep 9", area: "release" },
+    { title: "tests: goldens for placeRects at the 7-canvas sweep", author: "Ada L", agent: "Copilot", pr: 418, date: "Sep 10", reviewers: ["Quentin S"] },
+    { title: "fix: overlay alpha lost under alphamerge", author: "Quentin S", agent: "Claude Code", pr: 421, date: "Sep 11", reviewers: ["Ada L", "Sam K"] },
+    { title: "docs: handbook — feasibility vs precision", author: "Sam K", pr: 423, date: "Sep 11", area: "handbook" },
+    { title: "perf: cache mask rasters by content hash", author: "Ada L", agent: "Cursor", pr: 426, date: "Sep 12", reviewers: ["Quentin S"] },
+    { title: "ci: pin the darwin golden toolchain", author: "Sam K", pr: 428, date: "Sep 12", area: "ci", reviewers: ["Ada L"] },
+];
+const propsSchema = (0, template_utils_1.definePropsSchema)({
+    title: { type: "string", required: false, description: "Card title.", meta: { control: { placeholder: "none" }, ui: { label: "Title", order: 1, primary: true } } },
+    subtitle: { type: "string", required: false, description: "Line under the title — the repo and window.", meta: { control: { placeholder: "none" }, ui: { label: "Subtitle", order: 2 } } },
+    commits: {
+        type: "list",
+        required: true,
+        description: 'Commits, newest last. `agent` names the coding agent that wrote it ("Claude Code", "Copilot", "Cursor"); leave it empty for a human-authored commit. `author` is the human on the commit. Up to 7 are drawn.',
+        meta: { ui: { label: "Commits", order: 3, primary: true }, list: { max: 24 } },
+        itemSchema: {
+            title: { type: "string", required: true, description: "Commit subject.", meta: { ui: { label: "Title" } } },
+            author: { type: "string", required: true, description: "The human on the commit.", meta: { ui: { label: "Author" } } },
+            agent: { type: "string", required: false, description: "The coding agent that wrote it; empty = human.", meta: { control: { placeholder: "human" }, ui: { label: "Agent" } } },
+            pr: { type: "string", required: false, description: "PR number.", meta: { control: { placeholder: "none" }, ui: { label: "PR" } } },
+            date: { type: "string", required: false, description: "Short date.", meta: { control: { placeholder: "none" }, ui: { label: "Date" } } },
+            area: { type: "string", required: false, description: "Area touched (human rows).", meta: { control: { placeholder: "none" }, ui: { label: "Area" } } },
+            reviewers: { type: "list", required: false, description: "Reviewer names.", meta: { ui: { label: "Reviewers" } }, itemSchema: { type: "string" } },
+        },
+    },
+    preset: { type: "string", required: false, description: 'Alpine theme: "light" (default) or "dark".', meta: { constraints: { oneOf: ["light", "dark"] }, ui: { label: "Preset", order: 4 } } },
+    agentColor: { type: "string", required: false, description: "Colour for agent-authored commits (chip, bar, legend).", meta: { constraints: { isColor: true }, control: { colorPicker: true }, ui: { label: "Agent colour", order: 5 } } },
+    humanColor: { type: "string", required: false, description: "Colour for human-authored commits (chip, bar, legend).", meta: { constraints: { isColor: true }, control: { colorPicker: true }, ui: { label: "Human colour", order: 6 } } },
+    anim: {
+        type: "group",
+        required: false,
+        description: "Reveal: the feed's rows cascade in; the share band fades. reduceMotion renders the final frame.",
+        meta: { ui: { label: "Animation", order: 7, collapsedByDefault: true } },
+        fields: {
+            reduceMotion: alpine_anim_1.ALPINE_ANIM_FIELDS.reduceMotion,
+            introFrac: alpine_anim_1.ALPINE_ANIM_FIELDS.introFrac,
+            renderMode: (0, alpine_anim_1.fEnum)("Render mode", ["premium", "light"], "premium = alpha-fade cascade; light = enable-gate pops (cheaper when nested)."),
+        },
+    },
+    theme: { type: "json", required: false, description: "Opt-in producer theme tokens.", meta: { ui: { label: "Theme", order: 8, collapsedByDefault: true, consumer: "agent" } } },
+    debugLayout: { type: "boolean", required: false, description: "Dev-only: overlay the layout contract.", meta: { ui: { label: "Debug layout", order: 9 } } },
+});
+const pct = (n, d) => (d > 0 ? Math.round((100 * n) / d) : 0);
+const isAgent = (c) => typeof c.agent === "string" && c.agent.trim().length > 0;
+function roundTile(color, radius) {
+    return (0, template_utils_1.makeColorTile)(color, { effects: { rounding: { cornerStyle: "rounded", borderRadius: radius } } });
+}
+/** The share tile: a big percentage over a small label, on the theme's grid surface. */
+function shareTile(share, label, theme, w, h) {
+    // Fonts from the tile's height, capped by its width (0.72 em/char, 0.94 budget).
+    const cap = (px, text, min) => Math.max(min, Math.min(px, Math.floor((w * 0.94 - 2) / (Math.max(1, (0, template_utils_1.textEmUnits)(text)) * 0.72))));
+    const big = cap(Math.round(h * 0.42), `${share}%`, 14);
+    const small = cap(Math.round(h * 0.15), label, 9);
+    const stack = (0, alpine_card_1.rowSplit)([
+        { weight: 8, node: alpine_card_1.EMPTY },
+        { weight: 52, node: (0, alpine_card_1.paint)((0, template_utils_1.tag)((0, alpine_card_1.textCell)(`${share}%`, big, theme.title, "center", "bottom"), "share-value")) },
+        { weight: 24, node: (0, alpine_card_1.paint)((0, template_utils_1.tag)((0, alpine_card_1.textCell)(label, small, theme.muted, "center", "top"), "share-label")) },
+        { weight: 16, node: alpine_card_1.EMPTY },
+    ]);
+    return (0, alpine_card_1.overlay)([(0, alpine_card_1.paint)((0, template_utils_1.tag)(roundTile(theme.grid, 0.12), "share-tile")), stack]);
+}
+/** The proportion bar: agent share vs human share, rounded ends. */
+function shareBar(agent, human, agentColor, humanColor) {
+    // Weights on a ~100 basis so the 1-unit gap stays a hairline, whatever the counts.
+    const total = Math.max(1, agent + human);
+    const a = Math.max(1, Math.round((agent / total) * 100));
+    const b = Math.max(1, 100 - a);
+    return (0, alpine_card_1.colSplit)([
+        { weight: a, node: (0, alpine_card_1.paint)((0, template_utils_1.tag)(roundTile(agentColor, 0.5), "bar-agent")) },
+        { weight: 1, node: alpine_card_1.EMPTY },
+        { weight: b, node: (0, alpine_card_1.paint)((0, template_utils_1.tag)(roundTile(humanColor, 0.5), "bar-human")) },
+    ]);
+}
+/**
+ * One legend entry: a square dot (pixel-derived, so it stays round at any
+ * aspect), then the label — font capped to the box at the rasterizer's
+ * conservative 0.72 em/char, then ellipsized if it still would not fit.
+ */
+function legendEntry(color, text, maxFont, ink, label, entryW, rowH) {
+    const dot = Math.max(6, Math.round(rowH * 0.42));
+    const gap = Math.round(dot * 0.6);
+    const textW = Math.max(8, entryW - dot - gap);
+    // Budget = 0.94 × cell − 2 px (quantization takes a few px per split level).
+    const budget = Math.max(4, textW * 0.94 - 2);
+    const units = Math.max(1, (0, template_utils_1.textEmUnits)(text));
+    const font = Math.max(10, Math.min(maxFont, Math.floor(budget / (units * 0.72))));
+    const fitted = (0, template_utils_1.fitEmUnits)(text, Math.floor(budget / (font * 0.72)));
+    const w = (px) => Math.max(1, Math.round((px / entryW) * 100));
+    const vPad = Math.max(0, Math.round((rowH - dot) / 2));
+    const dotNode = (0, alpine_card_1.rowSplit)([
+        { weight: Math.max(1, vPad), node: alpine_card_1.EMPTY },
+        { weight: Math.max(1, dot), node: (0, alpine_card_1.paint)((0, template_utils_1.tag)(roundTile(color, 1), `${label}-dot`)) },
+        { weight: Math.max(1, rowH - dot - vPad), node: alpine_card_1.EMPTY },
+    ]);
+    return (0, alpine_card_1.colSplit)([
+        { weight: w(dot), node: dotNode },
+        { weight: w(gap), node: alpine_card_1.EMPTY },
+        { weight: w(textW), node: (0, alpine_card_1.paint)((0, template_utils_1.tag)((0, alpine_card_1.textCell)(fitted, font, ink, "left", "middle"), `${label}-text`)) },
+    ]);
+}
+exports.AgentCommitFeedV1 = {
+    id: (0, types_1.asTemplateId)(TEMPLATE_ID),
+    label: "Agent Commit Feed",
+    version: 1,
+    description: "Who wrote this week's commits — a commit feed colour-coded by author (human vs coding agent), with the agent-authored share, a proportion bar and a legend. The alpine commit feed nested under its own card; composes at any canvas.",
+    capabilities: { tier: "core" },
+    tags: ["github", "commits", "agents", "ai", "developers", "devrel", "engineering-leaders", "alpine", "animated"],
+    aspectRatio: { ideal: 16 / 10, min: 1, max: 2.2, mode: "warn" },
+    outputHints: { format: { kind: "video", container: "mp4" }, width: 1280, height: 800, fps: 30, durationMs: 3000 },
+    propsSchema,
+    defaultProps: {
+        title: "Who wrote this week's commits?",
+        subtitle: "m0saic-dsl/m0 · Sep 8–12",
+        commits: exports.SAMPLE_COMMITS,
+        preset: "light",
+        agentColor: DEFAULT_AGENT_COLOR,
+        humanColor: DEFAULT_HUMAN_COLOR,
+        anim: { ...DEFAULT_ANIM },
+        debugLayout: false,
+    },
+    async render(props, ctx) {
+        var _a, _b, _c, _d, _e;
+        const W = Math.max(1, Math.round(ctx.target.width));
+        const H = Math.max(1, Math.round(ctx.target.height));
+        const fail = (message) => (0, template_utils_1.makeErrorMosaic)(message, { title: "Agent Commit Feed", width: W, height: H });
+        const commits = ((_a = props.commits) !== null && _a !== void 0 ? _a : []).filter((c) => c && typeof c.title === "string" && c.title.trim()).slice(0, MAX_COMMITS);
+        if (commits.length === 0)
+            return fail("agent-commit-feed needs commits[]");
+        const theme = await (0, alpine_theme_1.resolveAlpineTheme)((_b = props.preset) !== null && _b !== void 0 ? _b : "light", ctx, props.theme);
+        const agentColor = (props.agentColor && props.agentColor.trim()) ? props.agentColor : DEFAULT_AGENT_COLOR;
+        const humanColor = (props.humanColor && props.humanColor.trim()) ? props.humanColor : DEFAULT_HUMAN_COLOR;
+        const anim = { ...DEFAULT_ANIM, ...((_c = props.anim) !== null && _c !== void 0 ? _c : {}) };
+        const animate = !anim.reduceMotion;
+        const clipSec = Math.max(0.1, ((_d = ctx.target.durationMs) !== null && _d !== void 0 ? _d : 3000) / 1000);
+        const introSec = Math.max(0.1, Math.min(1, anim.introFrac) * clipSec);
+        const agentCount = commits.filter(isAgent).length;
+        const humanCount = commits.length - agentCount;
+        const share = pct(agentCount, commits.length);
+        const agents = [...new Set(commits.filter(isAgent).map((c) => c.agent.trim()))];
+        // ── chrome ──
+        const card = (0, alpine_card_1.alpineCard)({ theme, W, H, title: props.title, subtitle: props.subtitle });
+        const content = card.contentRect;
+        const bandTop = Math.round(content.h * 0.03);
+        const bandH = Math.round(content.h * 0.22);
+        const bandGap = Math.round(content.h * 0.05);
+        const feedH = Math.max(1, content.h - bandTop - bandH - bandGap);
+        const wOf = (px, ref) => Math.max(1, Math.round((px / ref) * 100));
+        // ── the share band: tile · [bar / legend] ──
+        const tileW = Math.round(content.w * 0.2);
+        const bandGapX = Math.round(content.w * 0.03);
+        const legendFont = Math.max(10, Math.round(H * 0.024));
+        const agentLegend = `${agentCount} by ${agents.length ? agents.join(", ") : "agents"}`;
+        const humanLegend = `${humanCount} by ${humanCount === 1 ? "a human" : "humans"}`;
+        const rightW = content.w - tileW - bandGapX;
+        const legendRowH = Math.round(bandH * 0.3);
+        const legendGapW = Math.round(rightW * 0.04);
+        const legendEntryW = Math.round((rightW - legendGapW) / 2);
+        const right = (0, alpine_card_1.rowSplit)([
+            { weight: 18, node: alpine_card_1.EMPTY },
+            { weight: 22, node: shareBar(agentCount, humanCount, agentColor, humanColor) },
+            { weight: 16, node: alpine_card_1.EMPTY },
+            {
+                weight: 30,
+                node: (0, alpine_card_1.colSplit)([
+                    { weight: 48, node: legendEntry(agentColor, agentLegend, legendFont, theme.label, "legend-agent", legendEntryW, legendRowH) },
+                    { weight: 4, node: alpine_card_1.EMPTY },
+                    { weight: 48, node: legendEntry(humanColor, humanLegend, legendFont, theme.label, "legend-human", legendEntryW, legendRowH) },
+                ]),
+            },
+            { weight: 14, node: alpine_card_1.EMPTY },
+        ]);
+        const band = (0, alpine_card_1.colSplit)([
+            { weight: wOf(tileW, content.w), node: shareTile(share, "agent-authored", theme, tileW, bandH) },
+            { weight: wOf(bandGapX, content.w), node: alpine_card_1.EMPTY },
+            { weight: wOf(content.w - tileW - bandGapX, content.w), node: right },
+        ]);
+        // ── the feed: the alpine commit feed, nested at the cell, colour-coded by author kind ──
+        const feedW = content.w;
+        const rows = commits.map((c) => {
+            var _a;
+            const agent = isAgent(c);
+            return {
+                kind: agent ? "agent" : "human",
+                title: c.title,
+                author: c.author,
+                area: agent ? c.agent.trim() : c.area,
+                ...(c.pr != null && c.pr !== "" ? { pr: c.pr } : {}),
+                ...(c.date ? { date: c.date } : {}),
+                ...(((_a = c.reviewers) === null || _a === void 0 ? void 0 : _a.length) ? { reviewers: c.reviewers } : {}),
+                signal: "neutral",
+            };
+        });
+        const feedCtx = { ...ctx, target: { width: feedW, height: feedH, fps: ctx.target.fps, durationMs: ctx.target.durationMs }, output: { ...ctx.output, width: feedW, height: feedH } };
+        let feed;
+        try {
+            feed = await (0, template_utils_1.renderNestedTemplate)(FEED_TEMPLATE_ID, {
+                rows,
+                preset: (_e = props.preset) !== null && _e !== void 0 ? _e : "light",
+                showHeader: false,
+                // The card colour, not a transparent surface: a nested child comes
+                // back through an opaque intermediate under an opaque root, so
+                // "black@0" renders black. Same colour as our card = seamless.
+                backgroundColor: theme.card,
+                washColor: theme.card,
+                accent: agentColor,
+                kindColors: { agent: agentColor, human: humanColor },
+                kindGlyphs: { agent: "blocks", human: "dot" },
+                anim: { renderMode: anim.renderMode, introFrac: anim.introFrac, reduceMotion: anim.reduceMotion },
+            }, feedCtx, { slot: { width: feedW, height: feedH, fps: ctx.target.fps, durationMs: ctx.target.durationMs } });
+        }
+        catch (err) {
+            return fail(`the nested commit feed failed: ${err instanceof Error ? err.message : String(err)}`);
+        }
+        if (feed.kind !== "mosaic_document")
+            return fail(`the nested commit feed rendered a ${feed.kind}`);
+        const feedNode = (0, alpine_card_1.paint)((0, template_utils_1.tag)({ type: "mosaic", ref: "feed", placement: { fit: "contain" } }, "feed"));
+        const bandNode = animate ? (0, alpine_anim_1.revealFadeNode)(band, 0, Math.max(0.1, introSec * 0.35)) : band;
+        const body = (0, alpine_card_1.rowSplit)([
+            { weight: wOf(bandTop, content.h), node: alpine_card_1.EMPTY },
+            { weight: wOf(bandH, content.h), node: bandNode },
+            { weight: wOf(bandGap, content.h), node: alpine_card_1.EMPTY },
+            { weight: wOf(feedH, content.h), node: feedNode },
+        ]);
+        const root = card.compose(body);
+        const doc = {
+            kind: "mosaic_document",
+            version: 1,
+            assets: {},
+            m0: (0, dsl_stdlib_1.toM0String)(root.m0, "AgentCommitFeedV1"),
+            sources: root.sources,
+            backgroundColor: card.backgroundColor,
+            fps: ctx.target.fps,
+            durationMs: ctx.target.durationMs,
+            size: { width: W, height: H },
+            children: { feed },
+            editor: { label: `Agent Commit Feed · ${share}% agent-authored` },
+        };
+        const constraints = [
+            ...card.constraints,
+            { label: "share-value", textFits: {} },
+            { label: "share-label", textFits: {} },
+            { label: "legend-agent-text", textFits: {} },
+            { label: "legend-human-text", textFits: {} },
+            { label: "legend-agent-dot", aspect: 1, aspectTolerance: 0.2 },
+            { label: "legend-human-dot", aspect: 1, aspectTolerance: 0.2 },
+            { label: "feed", minHeightFrac: 0.4 },
+        ];
+        return (0, template_utils_1.withLayoutContract)(doc, ctx, { templateId: TEMPLATE_ID, constraints, relations: [], flatten: false, debug: props.debugLayout === true });
+    },
+};
+(0, template_utils_1.registerTemplate)(exports.AgentCommitFeedV1);
+exports.default = exports.AgentCommitFeedV1;

package/dist/m0saic/agents/commit-feed/v1/index.d.ts

@@ -0,0 +1,2 @@
+export { AgentCommitFeedV1, SAMPLE_COMMITS, type AgentCommit, type AgentCommitFeedProps } from "./commit-feed";
+export { default } from "./commit-feed";

package/dist/m0saic/agents/commit-feed/v1/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.SAMPLE_COMMITS = exports.AgentCommitFeedV1 = void 0;
+var commit_feed_1 = require("./commit-feed");
+Object.defineProperty(exports, "AgentCommitFeedV1", { enumerable: true, get: function () { return commit_feed_1.AgentCommitFeedV1; } });
+Object.defineProperty(exports, "SAMPLE_COMMITS", { enumerable: true, get: function () { return commit_feed_1.SAMPLE_COMMITS; } });
+var commit_feed_2 = require("./commit-feed");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(commit_feed_2).default; } });

package/dist/m0saic/agents/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Agents pack — templates about software written WITH coding agents (the 2026
+ * conference-floor questions: who wrote this week's commits, what did the
+ * agent do on a run). Compositions over the alpine kit; RATIO throughout.
+ */
+export * from "./commit-feed";
+export * from "./trace-timeline";

package/dist/m0saic/agents/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Agents pack — templates about software written WITH coding agents (the 2026
+ * conference-floor questions: who wrote this week's commits, what did the
+ * agent do on a run). Compositions over the alpine kit; RATIO throughout.
+ */
+// Side-effect: registers `@m0saic/agents/commit-feed/v1`.
+__exportStar(require("./commit-feed"), exports);
+// Side-effect: registers `@m0saic/agents/trace-timeline/v1`.
+__exportStar(require("./trace-timeline"), exports);

package/dist/m0saic/agents/trace-timeline/index.d.ts

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

package/dist/m0saic/agents/trace-timeline/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./v1"), exports);

package/dist/m0saic/agents/trace-timeline/v1/index.d.ts

@@ -0,0 +1,2 @@
+export { TraceTimelineV1, SAMPLE_SPANS, fmtSeconds, fmtTick, fmtTokens, tickStepMs, type TraceSpan, type TraceStatus, type TraceTimelineProps } from "./trace-timeline";
+export { default } from "./trace-timeline";

package/dist/m0saic/agents/trace-timeline/v1/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.tickStepMs = exports.fmtTokens = exports.fmtTick = exports.fmtSeconds = exports.SAMPLE_SPANS = exports.TraceTimelineV1 = void 0;
+var trace_timeline_1 = require("./trace-timeline");
+Object.defineProperty(exports, "TraceTimelineV1", { enumerable: true, get: function () { return trace_timeline_1.TraceTimelineV1; } });
+Object.defineProperty(exports, "SAMPLE_SPANS", { enumerable: true, get: function () { return trace_timeline_1.SAMPLE_SPANS; } });
+Object.defineProperty(exports, "fmtSeconds", { enumerable: true, get: function () { return trace_timeline_1.fmtSeconds; } });
+Object.defineProperty(exports, "fmtTick", { enumerable: true, get: function () { return trace_timeline_1.fmtTick; } });
+Object.defineProperty(exports, "fmtTokens", { enumerable: true, get: function () { return trace_timeline_1.fmtTokens; } });
+Object.defineProperty(exports, "tickStepMs", { enumerable: true, get: function () { return trace_timeline_1.tickStepMs; } });
+var trace_timeline_2 = require("./trace-timeline");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(trace_timeline_2).default; } });

package/dist/m0saic/agents/trace-timeline/v1/trace-timeline.d.ts

@@ -0,0 +1,73 @@
+/**
+ * ============================================================================
+ * @m0saic/agents/trace-timeline/v1 — what did the agent do on that run?
+ * ============================================================================
+ *
+ * A waterfall of one agent run: every tool call is a swimlane — the tool and
+ * what it touched on the left, a latency bar placed on a shared time axis on
+ * the right, the tokens it cost at the bar's end. Status colours the bar
+ * (ok = accent, error, retry, cached); a legend and tick labels frame it.
+ * The subtitle carries the run totals. Built for the "agents in production"
+ * crowd: the picture their observability vendor draws, from a JSON of spans.
+ *
+ * RATIO throughout (the alpine card kit): rows are equal bands, every bar is
+ * a weighted column split of its lane (start · duration · rest, on a ~100
+ * basis), tick labels are a column split of the axis row. No hairlines — a
+ * faint lane wash reads as the grid and survives any canvas. Composes at any
+ * size; fonts are sized to H and width-capped.
+ *
+ * Determinism: no clock, no randomness — the sample run is a fixed fixture.
+ * ============================================================================
+ */
+import type { MosaicColor, MosaicTemplate } from "@m0saic/types";
+import { type ThemeSourceConfig } from "@m0saic/template-utils";
+import { type AlpinePreset } from "../../../alpine/_shared/alpine-theme";
+export type TraceStatus = "ok" | "error" | "retry" | "cached";
+export type TraceSpan = {
+    /** The tool (or phase) — "read_file", "bash", "edit", "plan"… */
+    tool: string;
+    /** What it touched — a path, a command, a query. */
+    target?: string;
+    /** Start, milliseconds from the run's start. */
+    startMs: number;
+    /** Duration in milliseconds. */
+    durMs: number;
+    /** Tokens spent on this hop (prompt + completion). */
+    tokens?: number;
+    /** ok (default) · error · retry · cached. */
+    status?: TraceStatus;
+};
+type RenderMode = "premium" | "light";
+type AnimConfig = {
+    renderMode?: RenderMode;
+    introFrac?: number;
+    reduceMotion?: boolean;
+};
+export type TraceTimelineProps = {
+    title?: string;
+    /** Line under the title. Empty = derived from the spans (calls · wall time · tokens). */
+    subtitle?: string;
+    spans: TraceSpan[];
+    preset?: AlpinePreset;
+    /** Bar colour for ok spans. Default the alpine primary. */
+    accent?: MosaicColor;
+    errorColor?: MosaicColor;
+    retryColor?: MosaicColor;
+    cachedColor?: MosaicColor;
+    /** Print each span's token cost after its bar. Default true. */
+    showTokens?: boolean;
+    anim?: AnimConfig;
+    theme?: ThemeSourceConfig;
+    debugLayout?: boolean;
+};
+/** A fixed sample run: plan → read → edit → tests fail → fix → tests pass → wrap up. 38.2 s, ~14k tokens. */
+export declare const SAMPLE_SPANS: TraceSpan[];
+/** "1.2k" / "38.2 s" — compact labels, ASCII only. */
+export declare function fmtTokens(n: number): string;
+export declare function fmtSeconds(ms: number): string;
+/** Axis tick label: whole seconds when the step allows ("10s"), else the compact form. */
+export declare function fmtTick(ms: number, stepMs: number): string;
+/** Tick interval: the smallest 1·2·5·10 step that keeps the axis to at most 7 ticks (so 4–7 over `totalMs`). */
+export declare function tickStepMs(totalMs: number): number;
+export declare const TraceTimelineV1: MosaicTemplate<TraceTimelineProps>;
+export default TraceTimelineV1;