altitude-design 0.2.0 → 0.3.0

package/dist/chart-themes.cjs

@@ -0,0 +1,195 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// project/components/src/chart-themes.tsx
+var chart_themes_exports = {};
+__export(chart_themes_exports, {
+  chartjsDefaults: () => chartjsDefaults,
+  dataColors: () => dataColors,
+  echartsTheme: () => echartsTheme,
+  readChartTokens: () => readChartTokens,
+  useChartTheme: () => useChartTheme
+});
+module.exports = __toCommonJS(chart_themes_exports);
+var React = __toESM(require("react"), 1);
+var READ = [
+  "data-1",
+  "data-2",
+  "data-3",
+  "data-4",
+  "data-5",
+  "data-6",
+  "data-other",
+  "data-seq-1",
+  "data-seq-2",
+  "data-seq-3",
+  "data-seq-4",
+  "data-seq-5",
+  "data-seq-6",
+  "data-seq-7",
+  "data-div-neg-3",
+  "data-div-neg-2",
+  "data-div-neg-1",
+  "data-div-mid",
+  "data-div-pos-1",
+  "data-div-pos-2",
+  "data-div-pos-3",
+  "surface-ground",
+  "surface-raised",
+  "surface-floating",
+  "ink",
+  "ink-muted",
+  "line",
+  "line-control",
+  "elev-3",
+  "font-sans",
+  "dur-travel-3"
+];
+var isElement = (s) => typeof s.getAttribute === "function";
+function readChartTokens(source) {
+  if (!isElement(source)) return { ...source };
+  const cs = getComputedStyle(source);
+  return Object.fromEntries(READ.map((name) => [name, cs.getPropertyValue("--" + name).trim()]));
+}
+function resolveOptions(source, options) {
+  let { reducedMotion, forcedColors } = options;
+  if (isElement(source)) {
+    const win = source.ownerDocument.defaultView;
+    const travel = getComputedStyle(source).getPropertyValue("--alt-travel").trim();
+    reducedMotion ?? (reducedMotion = travel ? travel === "0" : !!win?.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    forcedColors ?? (forcedColors = !!win?.matchMedia("(forced-colors: active)").matches);
+  }
+  return { reducedMotion: !!reducedMotion, forcedColors: !!forcedColors, patterns: !!options.patterns || !!forcedColors };
+}
+var ms = (v, fallback) => {
+  const m = /^([\d.]+)(ms|s)$/.exec((v ?? "").trim());
+  return m ? Math.round(parseFloat(m[1]) * (m[2] === "s" ? 1e3 : 1)) : fallback;
+};
+var categorical = (t) => ["data-1", "data-2", "data-3", "data-4", "data-5", "data-6", "data-other"].map((n) => t[n]).filter(Boolean);
+function dataColors(source) {
+  return categorical(readChartTokens(source));
+}
+function echartsTheme(source, options = {}) {
+  const t = readChartTokens(source);
+  const o = resolveOptions(source, options);
+  const duration = o.reducedMotion ? 0 : ms(t["dur-travel-3"], 220);
+  const text = { color: t["ink-muted"], fontFamily: t["font-sans"] };
+  const axis = {
+    axisLine: { lineStyle: { color: t["line-control"] } },
+    axisTick: { lineStyle: { color: t["line-control"] } },
+    axisLabel: { color: t["ink-muted"] },
+    splitLine: { lineStyle: { color: [t.line] } },
+    splitArea: { show: false }
+  };
+  return {
+    color: categorical(t),
+    backgroundColor: "transparent",
+    textStyle: { color: t.ink, fontFamily: t["font-sans"] },
+    title: { textStyle: { color: t.ink }, subtextStyle: { color: t["ink-muted"] } },
+    legend: { textStyle: { color: t.ink }, inactiveColor: t["line-control"] },
+    categoryAxis: axis,
+    valueAxis: axis,
+    logAxis: axis,
+    timeAxis: axis,
+    tooltip: {
+      backgroundColor: t["surface-floating"],
+      borderColor: t.line,
+      borderWidth: 1,
+      textStyle: { color: t.ink, fontFamily: t["font-sans"] },
+      extraCssText: `box-shadow: ${t["elev-3"]}; border-radius: 8px;`,
+      axisPointer: { lineStyle: { color: t["line-control"], width: 1 }, crossStyle: { color: t["line-control"], width: 1 } }
+    },
+    // Magnitude reads the sequential ramp; set inRange to the diverging ramp for polarity.
+    visualMap: { inRange: { color: ["data-seq-1", "data-seq-2", "data-seq-3", "data-seq-4", "data-seq-5", "data-seq-6", "data-seq-7"].map((n) => t[n]) }, textStyle: text },
+    aria: { enabled: true, decal: { show: o.patterns } },
+    animation: !o.reducedMotion,
+    animationDuration: duration,
+    animationDurationUpdate: duration,
+    // ease-glide is cubic-bezier(0.65, 0, 0.35, 1): changed data glides at one level.
+    animationEasing: "cubicInOut",
+    animationEasingUpdate: "cubicInOut"
+  };
+}
+function chartjsDefaults(source, options = {}) {
+  const t = readChartTokens(source);
+  const o = resolveOptions(source, options);
+  return {
+    color: t["ink-muted"],
+    borderColor: t.line,
+    backgroundColor: t["data-1"],
+    font: { family: t["font-sans"] },
+    animation: o.reducedMotion ? false : { duration: ms(t["dur-travel-3"], 220), easing: "easeInOutCubic" },
+    scale: { grid: { color: t.line }, border: { color: t["line-control"] }, ticks: { color: t["ink-muted"] } },
+    plugins: {
+      legend: { labels: { color: t.ink } },
+      tooltip: {
+        backgroundColor: t["surface-floating"],
+        borderColor: t.line,
+        borderWidth: 1,
+        titleColor: t.ink,
+        bodyColor: t.ink,
+        footerColor: t["ink-muted"]
+      }
+    }
+  };
+}
+function useChartTheme(build, ref, options) {
+  const [theme, setTheme] = React.useState(null);
+  const latest = React.useRef(build);
+  latest.current = build;
+  const key = JSON.stringify(options ?? {});
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let last = "";
+    const read = () => {
+      const next = latest.current(el, options);
+      const id = JSON.stringify(next);
+      if (id !== last) {
+        last = id;
+        setTheme(next);
+      }
+    };
+    read();
+    const mo = new MutationObserver(read);
+    for (let n = el; n; n = n.parentElement) {
+      mo.observe(n, { attributes: true, attributeFilter: ["data-theme", "data-motion", "data-contrast", "style", "class"] });
+    }
+    const win = el.ownerDocument.defaultView;
+    const queries = win ? ["(prefers-reduced-motion: reduce)", "(forced-colors: active)", "(prefers-color-scheme: dark)"].map((q) => win.matchMedia(q)) : [];
+    queries.forEach((q) => q.addEventListener("change", read));
+    return () => {
+      mo.disconnect();
+      queries.forEach((q) => q.removeEventListener("change", read));
+    };
+  }, [ref, key]);
+  return theme;
+}
+//# sourceMappingURL=chart-themes.cjs.map

package/dist/chart-themes.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../project/components/src/chart-themes.tsx"],
+  "sourcesContent": ["// altitude-design/chart-themes: Altitude's palette, type, surfaces and motion as plain theme objects for canvas chart\n// libraries Altitude doesn't draw (ECharts, Chart.js). Nothing here imports either library, or the components: the\n// objects are read from the computed tokens of an element, or from tokens passed by name.\nimport * as React from 'react';\n\n/** Token values by name, without `--` (as in tokens.json), e.g. `{ 'data-1': '#3d5bd9', ink: '#141a29' }`. */\nexport type ChartTokens = Record<string, string>;\n/** An element to read the active scheme's computed tokens from, or the tokens themselves. */\nexport type ChartTokenSource = Element | ChartTokens;\n\nexport interface ChartThemeOptions {\n  /** Zero every animation. Read from the element (`prefers-reduced-motion`, or `AltitudeProvider motion`) when omitted. */\n  reducedMotion?: boolean;\n  /** Turn on pattern fills (ECharts decals) so no series relies on colour alone. On under forced colours regardless. */\n  patterns?: boolean;\n  /** Forced colours are active. Read from the element's window when omitted. */\n  forcedColors?: boolean;\n}\n\nconst READ = [\n  'data-1', 'data-2', 'data-3', 'data-4', 'data-5', 'data-6', 'data-other',\n  'data-seq-1', 'data-seq-2', 'data-seq-3', 'data-seq-4', 'data-seq-5', 'data-seq-6', 'data-seq-7',\n  'data-div-neg-3', 'data-div-neg-2', 'data-div-neg-1', 'data-div-mid', 'data-div-pos-1', 'data-div-pos-2', 'data-div-pos-3',\n  'surface-ground', 'surface-raised', 'surface-floating', 'ink', 'ink-muted', 'line', 'line-control',\n  'elev-3', 'font-sans', 'dur-travel-3',\n] as const;\n\nconst isElement = (s: ChartTokenSource): s is Element => typeof (s as Element).getAttribute === 'function';\n\n/** The tokens a chart theme needs, read from an element's computed style (so its scheme and accent apply). */\nexport function readChartTokens(source: ChartTokenSource): ChartTokens {\n  if (!isElement(source)) return { ...source };\n  const cs = getComputedStyle(source);\n  return Object.fromEntries(READ.map((name) => [name, cs.getPropertyValue('--' + name).trim()]));\n}\n\nfunction resolveOptions(source: ChartTokenSource, options: ChartThemeOptions) {\n  let { reducedMotion, forcedColors } = options;\n  if (isElement(source)) {\n    const win = source.ownerDocument.defaultView;\n    // AltitudeProvider folds its motion prop and the system setting into --alt-travel (0 is reduced).\n    const travel = getComputedStyle(source).getPropertyValue('--alt-travel').trim();\n    reducedMotion ??= travel ? travel === '0' : !!win?.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    forcedColors ??= !!win?.matchMedia('(forced-colors: active)').matches;\n  }\n  return { reducedMotion: !!reducedMotion, forcedColors: !!forcedColors, patterns: !!options.patterns || !!forcedColors };\n}\n\nconst ms = (v: string | undefined, fallback: number) => {\n  const m = /^([\\d.]+)(ms|s)$/.exec((v ?? '').trim());\n  return m ? Math.round(parseFloat(m[1]) * (m[2] === 's' ? 1000 : 1)) : fallback;\n};\n\nconst categorical = (t: ChartTokens) => ['data-1', 'data-2', 'data-3', 'data-4', 'data-5', 'data-6', 'data-other'].map((n) => t[n]).filter(Boolean);\n\n/** data-1 \u2026 data-6, then data-other: series colours in config order, for a library that takes a list. */\nexport function dataColors(source: ChartTokenSource): string[] {\n  return categorical(readChartTokens(source));\n}\n\n/**\n * An ECharts theme: `echarts.init(el, echartsTheme(el))`, or `echarts.registerTheme('altitude', echartsTheme(el))`.\n * Series in data-1 \u2026 data-6 then data-other, text in ink, axes in line-control, split lines in line, the readout on\n * surface-floating at elev-3, aria on (import ECharts' AriaComponent), decals under forced colours or with `patterns`,\n * and dur-travel-3 animation on ease-glide's curve, zero under reduced motion.\n */\nexport function echartsTheme(source: ChartTokenSource, options: ChartThemeOptions = {}) {\n  const t = readChartTokens(source);\n  const o = resolveOptions(source, options);\n  const duration = o.reducedMotion ? 0 : ms(t['dur-travel-3'], 220);\n  const text = { color: t['ink-muted'], fontFamily: t['font-sans'] };\n  const axis = {\n    axisLine: { lineStyle: { color: t['line-control'] } },\n    axisTick: { lineStyle: { color: t['line-control'] } },\n    axisLabel: { color: t['ink-muted'] },\n    splitLine: { lineStyle: { color: [t.line] } },\n    splitArea: { show: false },\n  };\n  return {\n    color: categorical(t),\n    backgroundColor: 'transparent',\n    textStyle: { color: t.ink, fontFamily: t['font-sans'] },\n    title: { textStyle: { color: t.ink }, subtextStyle: { color: t['ink-muted'] } },\n    legend: { textStyle: { color: t.ink }, inactiveColor: t['line-control'] },\n    categoryAxis: axis, valueAxis: axis, logAxis: axis, timeAxis: axis,\n    tooltip: {\n      backgroundColor: t['surface-floating'], borderColor: t.line, borderWidth: 1,\n      textStyle: { color: t.ink, fontFamily: t['font-sans'] },\n      extraCssText: `box-shadow: ${t['elev-3']}; border-radius: 8px;`,\n      axisPointer: { lineStyle: { color: t['line-control'], width: 1 }, crossStyle: { color: t['line-control'], width: 1 } },\n    },\n    // Magnitude reads the sequential ramp; set inRange to the diverging ramp for polarity.\n    visualMap: { inRange: { color: ['data-seq-1', 'data-seq-2', 'data-seq-3', 'data-seq-4', 'data-seq-5', 'data-seq-6', 'data-seq-7'].map((n) => t[n]) }, textStyle: text },\n    aria: { enabled: true, decal: { show: o.patterns } },\n    animation: !o.reducedMotion,\n    animationDuration: duration,\n    animationDurationUpdate: duration,\n    // ease-glide is cubic-bezier(0.65, 0, 0.35, 1): changed data glides at one level.\n    animationEasing: 'cubicInOut', animationEasingUpdate: 'cubicInOut',\n  };\n}\n\n/**\n * Chart.js defaults: `Chart.defaults.set(chartjsDefaults(el))`. Text in ink-muted, grid in line, axis borders in\n * line-control, the readout on surface-floating, dur-travel-3 animation (none under reduced motion). Chart.js has no\n * palette default: give each dataset a colour from `dataColors(el)`.\n */\nexport function chartjsDefaults(source: ChartTokenSource, options: ChartThemeOptions = {}) {\n  const t = readChartTokens(source);\n  const o = resolveOptions(source, options);\n  return {\n    color: t['ink-muted'],\n    borderColor: t.line,\n    backgroundColor: t['data-1'],\n    font: { family: t['font-sans'] },\n    animation: o.reducedMotion ? false as const : { duration: ms(t['dur-travel-3'], 220), easing: 'easeInOutCubic' as const },\n    scale: { grid: { color: t.line }, border: { color: t['line-control'] }, ticks: { color: t['ink-muted'] } },\n    plugins: {\n      legend: { labels: { color: t.ink } },\n      tooltip: {\n        backgroundColor: t['surface-floating'], borderColor: t.line, borderWidth: 1,\n        titleColor: t.ink, bodyColor: t.ink, footerColor: t['ink-muted'],\n      },\n    },\n  };\n}\n\n/**\n * Re-reads a chart theme whenever the scheme around `ref` changes: an AltitudeProvider's `scheme`, `accent` or\n * `motion`, a `data-theme` on the page, or the reduced-motion and forced-colours settings. Null until mounted.\n *\n *   const ref = React.useRef<HTMLDivElement>(null);\n *   const theme = useChartTheme(echartsTheme, ref);\n *   React.useEffect(() => { if (!theme) return; const c = echarts.init(ref.current!, theme); \u2026; return () => c.dispose(); }, [theme]);\n */\nexport function useChartTheme<T>(build: (source: Element, options?: ChartThemeOptions) => T, ref: React.RefObject<Element | null>, options?: ChartThemeOptions): T | null {\n  const [theme, setTheme] = React.useState<T | null>(null);\n  const latest = React.useRef(build);\n  latest.current = build;\n  const key = JSON.stringify(options ?? {});\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    let last = '';\n    const read = () => {\n      const next = latest.current(el, options);\n      const id = JSON.stringify(next);\n      if (id !== last) { last = id; setTheme(next); }\n    };\n    read();\n    const mo = new MutationObserver(read);\n    // Every ancestor that can carry a scheme: the provider's root sets data-theme, its accent as inline style.\n    for (let n: Element | null = el; n; n = n.parentElement) {\n      mo.observe(n, { attributes: true, attributeFilter: ['data-theme', 'data-motion', 'data-contrast', 'style', 'class'] });\n    }\n    const win = el.ownerDocument.defaultView;\n    const queries = win ? ['(prefers-reduced-motion: reduce)', '(forced-colors: active)', '(prefers-color-scheme: dark)'].map((q) => win.matchMedia(q)) : [];\n    queries.forEach((q) => q.addEventListener('change', read));\n    return () => { mo.disconnect(); queries.forEach((q) => q.removeEventListener('change', read)); };\n  }, [ref, key]); // eslint-disable-line react-hooks/exhaustive-deps\n  return theme;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chart-themes.js

@@ -0,0 +1,165 @@
+"use client";
+
+// project/components/src/chart-themes.tsx
+import * as React from "react";
+var READ = [
+  "data-1",
+  "data-2",
+  "data-3",
+  "data-4",
+  "data-5",
+  "data-6",
+  "data-other",
+  "data-seq-1",
+  "data-seq-2",
+  "data-seq-3",
+  "data-seq-4",
+  "data-seq-5",
+  "data-seq-6",
+  "data-seq-7",
+  "data-div-neg-3",
+  "data-div-neg-2",
+  "data-div-neg-1",
+  "data-div-mid",
+  "data-div-pos-1",
+  "data-div-pos-2",
+  "data-div-pos-3",
+  "surface-ground",
+  "surface-raised",
+  "surface-floating",
+  "ink",
+  "ink-muted",
+  "line",
+  "line-control",
+  "elev-3",
+  "font-sans",
+  "dur-travel-3"
+];
+var isElement = (s) => typeof s.getAttribute === "function";
+function readChartTokens(source) {
+  if (!isElement(source)) return { ...source };
+  const cs = getComputedStyle(source);
+  return Object.fromEntries(READ.map((name) => [name, cs.getPropertyValue("--" + name).trim()]));
+}
+function resolveOptions(source, options) {
+  let { reducedMotion, forcedColors } = options;
+  if (isElement(source)) {
+    const win = source.ownerDocument.defaultView;
+    const travel = getComputedStyle(source).getPropertyValue("--alt-travel").trim();
+    reducedMotion ?? (reducedMotion = travel ? travel === "0" : !!win?.matchMedia("(prefers-reduced-motion: reduce)").matches);
+    forcedColors ?? (forcedColors = !!win?.matchMedia("(forced-colors: active)").matches);
+  }
+  return { reducedMotion: !!reducedMotion, forcedColors: !!forcedColors, patterns: !!options.patterns || !!forcedColors };
+}
+var ms = (v, fallback) => {
+  const m = /^([\d.]+)(ms|s)$/.exec((v ?? "").trim());
+  return m ? Math.round(parseFloat(m[1]) * (m[2] === "s" ? 1e3 : 1)) : fallback;
+};
+var categorical = (t) => ["data-1", "data-2", "data-3", "data-4", "data-5", "data-6", "data-other"].map((n) => t[n]).filter(Boolean);
+function dataColors(source) {
+  return categorical(readChartTokens(source));
+}
+function echartsTheme(source, options = {}) {
+  const t = readChartTokens(source);
+  const o = resolveOptions(source, options);
+  const duration = o.reducedMotion ? 0 : ms(t["dur-travel-3"], 220);
+  const text = { color: t["ink-muted"], fontFamily: t["font-sans"] };
+  const axis = {
+    axisLine: { lineStyle: { color: t["line-control"] } },
+    axisTick: { lineStyle: { color: t["line-control"] } },
+    axisLabel: { color: t["ink-muted"] },
+    splitLine: { lineStyle: { color: [t.line] } },
+    splitArea: { show: false }
+  };
+  return {
+    color: categorical(t),
+    backgroundColor: "transparent",
+    textStyle: { color: t.ink, fontFamily: t["font-sans"] },
+    title: { textStyle: { color: t.ink }, subtextStyle: { color: t["ink-muted"] } },
+    legend: { textStyle: { color: t.ink }, inactiveColor: t["line-control"] },
+    categoryAxis: axis,
+    valueAxis: axis,
+    logAxis: axis,
+    timeAxis: axis,
+    tooltip: {
+      backgroundColor: t["surface-floating"],
+      borderColor: t.line,
+      borderWidth: 1,
+      textStyle: { color: t.ink, fontFamily: t["font-sans"] },
+      extraCssText: `box-shadow: ${t["elev-3"]}; border-radius: 8px;`,
+      axisPointer: { lineStyle: { color: t["line-control"], width: 1 }, crossStyle: { color: t["line-control"], width: 1 } }
+    },
+    // Magnitude reads the sequential ramp; set inRange to the diverging ramp for polarity.
+    visualMap: { inRange: { color: ["data-seq-1", "data-seq-2", "data-seq-3", "data-seq-4", "data-seq-5", "data-seq-6", "data-seq-7"].map((n) => t[n]) }, textStyle: text },
+    aria: { enabled: true, decal: { show: o.patterns } },
+    animation: !o.reducedMotion,
+    animationDuration: duration,
+    animationDurationUpdate: duration,
+    // ease-glide is cubic-bezier(0.65, 0, 0.35, 1): changed data glides at one level.
+    animationEasing: "cubicInOut",
+    animationEasingUpdate: "cubicInOut"
+  };
+}
+function chartjsDefaults(source, options = {}) {
+  const t = readChartTokens(source);
+  const o = resolveOptions(source, options);
+  return {
+    color: t["ink-muted"],
+    borderColor: t.line,
+    backgroundColor: t["data-1"],
+    font: { family: t["font-sans"] },
+    animation: o.reducedMotion ? false : { duration: ms(t["dur-travel-3"], 220), easing: "easeInOutCubic" },
+    scale: { grid: { color: t.line }, border: { color: t["line-control"] }, ticks: { color: t["ink-muted"] } },
+    plugins: {
+      legend: { labels: { color: t.ink } },
+      tooltip: {
+        backgroundColor: t["surface-floating"],
+        borderColor: t.line,
+        borderWidth: 1,
+        titleColor: t.ink,
+        bodyColor: t.ink,
+        footerColor: t["ink-muted"]
+      }
+    }
+  };
+}
+function useChartTheme(build, ref, options) {
+  const [theme, setTheme] = React.useState(null);
+  const latest = React.useRef(build);
+  latest.current = build;
+  const key = JSON.stringify(options ?? {});
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let last = "";
+    const read = () => {
+      const next = latest.current(el, options);
+      const id = JSON.stringify(next);
+      if (id !== last) {
+        last = id;
+        setTheme(next);
+      }
+    };
+    read();
+    const mo = new MutationObserver(read);
+    for (let n = el; n; n = n.parentElement) {
+      mo.observe(n, { attributes: true, attributeFilter: ["data-theme", "data-motion", "data-contrast", "style", "class"] });
+    }
+    const win = el.ownerDocument.defaultView;
+    const queries = win ? ["(prefers-reduced-motion: reduce)", "(forced-colors: active)", "(prefers-color-scheme: dark)"].map((q) => win.matchMedia(q)) : [];
+    queries.forEach((q) => q.addEventListener("change", read));
+    return () => {
+      mo.disconnect();
+      queries.forEach((q) => q.removeEventListener("change", read));
+    };
+  }, [ref, key]);
+  return theme;
+}
+export {
+  chartjsDefaults,
+  dataColors,
+  echartsTheme,
+  readChartTokens,
+  useChartTheme
+};
+//# sourceMappingURL=chart-themes.js.map

package/dist/chart-themes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../project/components/src/chart-themes.tsx"],
+  "sourcesContent": ["// altitude-design/chart-themes: Altitude's palette, type, surfaces and motion as plain theme objects for canvas chart\n// libraries Altitude doesn't draw (ECharts, Chart.js). Nothing here imports either library, or the components: the\n// objects are read from the computed tokens of an element, or from tokens passed by name.\nimport * as React from 'react';\n\n/** Token values by name, without `--` (as in tokens.json), e.g. `{ 'data-1': '#3d5bd9', ink: '#141a29' }`. */\nexport type ChartTokens = Record<string, string>;\n/** An element to read the active scheme's computed tokens from, or the tokens themselves. */\nexport type ChartTokenSource = Element | ChartTokens;\n\nexport interface ChartThemeOptions {\n  /** Zero every animation. Read from the element (`prefers-reduced-motion`, or `AltitudeProvider motion`) when omitted. */\n  reducedMotion?: boolean;\n  /** Turn on pattern fills (ECharts decals) so no series relies on colour alone. On under forced colours regardless. */\n  patterns?: boolean;\n  /** Forced colours are active. Read from the element's window when omitted. */\n  forcedColors?: boolean;\n}\n\nconst READ = [\n  'data-1', 'data-2', 'data-3', 'data-4', 'data-5', 'data-6', 'data-other',\n  'data-seq-1', 'data-seq-2', 'data-seq-3', 'data-seq-4', 'data-seq-5', 'data-seq-6', 'data-seq-7',\n  'data-div-neg-3', 'data-div-neg-2', 'data-div-neg-1', 'data-div-mid', 'data-div-pos-1', 'data-div-pos-2', 'data-div-pos-3',\n  'surface-ground', 'surface-raised', 'surface-floating', 'ink', 'ink-muted', 'line', 'line-control',\n  'elev-3', 'font-sans', 'dur-travel-3',\n] as const;\n\nconst isElement = (s: ChartTokenSource): s is Element => typeof (s as Element).getAttribute === 'function';\n\n/** The tokens a chart theme needs, read from an element's computed style (so its scheme and accent apply). */\nexport function readChartTokens(source: ChartTokenSource): ChartTokens {\n  if (!isElement(source)) return { ...source };\n  const cs = getComputedStyle(source);\n  return Object.fromEntries(READ.map((name) => [name, cs.getPropertyValue('--' + name).trim()]));\n}\n\nfunction resolveOptions(source: ChartTokenSource, options: ChartThemeOptions) {\n  let { reducedMotion, forcedColors } = options;\n  if (isElement(source)) {\n    const win = source.ownerDocument.defaultView;\n    // AltitudeProvider folds its motion prop and the system setting into --alt-travel (0 is reduced).\n    const travel = getComputedStyle(source).getPropertyValue('--alt-travel').trim();\n    reducedMotion ??= travel ? travel === '0' : !!win?.matchMedia('(prefers-reduced-motion: reduce)').matches;\n    forcedColors ??= !!win?.matchMedia('(forced-colors: active)').matches;\n  }\n  return { reducedMotion: !!reducedMotion, forcedColors: !!forcedColors, patterns: !!options.patterns || !!forcedColors };\n}\n\nconst ms = (v: string | undefined, fallback: number) => {\n  const m = /^([\\d.]+)(ms|s)$/.exec((v ?? '').trim());\n  return m ? Math.round(parseFloat(m[1]) * (m[2] === 's' ? 1000 : 1)) : fallback;\n};\n\nconst categorical = (t: ChartTokens) => ['data-1', 'data-2', 'data-3', 'data-4', 'data-5', 'data-6', 'data-other'].map((n) => t[n]).filter(Boolean);\n\n/** data-1 \u2026 data-6, then data-other: series colours in config order, for a library that takes a list. */\nexport function dataColors(source: ChartTokenSource): string[] {\n  return categorical(readChartTokens(source));\n}\n\n/**\n * An ECharts theme: `echarts.init(el, echartsTheme(el))`, or `echarts.registerTheme('altitude', echartsTheme(el))`.\n * Series in data-1 \u2026 data-6 then data-other, text in ink, axes in line-control, split lines in line, the readout on\n * surface-floating at elev-3, aria on (import ECharts' AriaComponent), decals under forced colours or with `patterns`,\n * and dur-travel-3 animation on ease-glide's curve, zero under reduced motion.\n */\nexport function echartsTheme(source: ChartTokenSource, options: ChartThemeOptions = {}) {\n  const t = readChartTokens(source);\n  const o = resolveOptions(source, options);\n  const duration = o.reducedMotion ? 0 : ms(t['dur-travel-3'], 220);\n  const text = { color: t['ink-muted'], fontFamily: t['font-sans'] };\n  const axis = {\n    axisLine: { lineStyle: { color: t['line-control'] } },\n    axisTick: { lineStyle: { color: t['line-control'] } },\n    axisLabel: { color: t['ink-muted'] },\n    splitLine: { lineStyle: { color: [t.line] } },\n    splitArea: { show: false },\n  };\n  return {\n    color: categorical(t),\n    backgroundColor: 'transparent',\n    textStyle: { color: t.ink, fontFamily: t['font-sans'] },\n    title: { textStyle: { color: t.ink }, subtextStyle: { color: t['ink-muted'] } },\n    legend: { textStyle: { color: t.ink }, inactiveColor: t['line-control'] },\n    categoryAxis: axis, valueAxis: axis, logAxis: axis, timeAxis: axis,\n    tooltip: {\n      backgroundColor: t['surface-floating'], borderColor: t.line, borderWidth: 1,\n      textStyle: { color: t.ink, fontFamily: t['font-sans'] },\n      extraCssText: `box-shadow: ${t['elev-3']}; border-radius: 8px;`,\n      axisPointer: { lineStyle: { color: t['line-control'], width: 1 }, crossStyle: { color: t['line-control'], width: 1 } },\n    },\n    // Magnitude reads the sequential ramp; set inRange to the diverging ramp for polarity.\n    visualMap: { inRange: { color: ['data-seq-1', 'data-seq-2', 'data-seq-3', 'data-seq-4', 'data-seq-5', 'data-seq-6', 'data-seq-7'].map((n) => t[n]) }, textStyle: text },\n    aria: { enabled: true, decal: { show: o.patterns } },\n    animation: !o.reducedMotion,\n    animationDuration: duration,\n    animationDurationUpdate: duration,\n    // ease-glide is cubic-bezier(0.65, 0, 0.35, 1): changed data glides at one level.\n    animationEasing: 'cubicInOut', animationEasingUpdate: 'cubicInOut',\n  };\n}\n\n/**\n * Chart.js defaults: `Chart.defaults.set(chartjsDefaults(el))`. Text in ink-muted, grid in line, axis borders in\n * line-control, the readout on surface-floating, dur-travel-3 animation (none under reduced motion). Chart.js has no\n * palette default: give each dataset a colour from `dataColors(el)`.\n */\nexport function chartjsDefaults(source: ChartTokenSource, options: ChartThemeOptions = {}) {\n  const t = readChartTokens(source);\n  const o = resolveOptions(source, options);\n  return {\n    color: t['ink-muted'],\n    borderColor: t.line,\n    backgroundColor: t['data-1'],\n    font: { family: t['font-sans'] },\n    animation: o.reducedMotion ? false as const : { duration: ms(t['dur-travel-3'], 220), easing: 'easeInOutCubic' as const },\n    scale: { grid: { color: t.line }, border: { color: t['line-control'] }, ticks: { color: t['ink-muted'] } },\n    plugins: {\n      legend: { labels: { color: t.ink } },\n      tooltip: {\n        backgroundColor: t['surface-floating'], borderColor: t.line, borderWidth: 1,\n        titleColor: t.ink, bodyColor: t.ink, footerColor: t['ink-muted'],\n      },\n    },\n  };\n}\n\n/**\n * Re-reads a chart theme whenever the scheme around `ref` changes: an AltitudeProvider's `scheme`, `accent` or\n * `motion`, a `data-theme` on the page, or the reduced-motion and forced-colours settings. Null until mounted.\n *\n *   const ref = React.useRef<HTMLDivElement>(null);\n *   const theme = useChartTheme(echartsTheme, ref);\n *   React.useEffect(() => { if (!theme) return; const c = echarts.init(ref.current!, theme); \u2026; return () => c.dispose(); }, [theme]);\n */\nexport function useChartTheme<T>(build: (source: Element, options?: ChartThemeOptions) => T, ref: React.RefObject<Element | null>, options?: ChartThemeOptions): T | null {\n  const [theme, setTheme] = React.useState<T | null>(null);\n  const latest = React.useRef(build);\n  latest.current = build;\n  const key = JSON.stringify(options ?? {});\n  React.useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    let last = '';\n    const read = () => {\n      const next = latest.current(el, options);\n      const id = JSON.stringify(next);\n      if (id !== last) { last = id; setTheme(next); }\n    };\n    read();\n    const mo = new MutationObserver(read);\n    // Every ancestor that can carry a scheme: the provider's root sets data-theme, its accent as inline style.\n    for (let n: Element | null = el; n; n = n.parentElement) {\n      mo.observe(n, { attributes: true, attributeFilter: ['data-theme', 'data-motion', 'data-contrast', 'style', 'class'] });\n    }\n    const win = el.ownerDocument.defaultView;\n    const queries = win ? ['(prefers-reduced-motion: reduce)', '(forced-colors: active)', '(prefers-color-scheme: dark)'].map((q) => win.matchMedia(q)) : [];\n    queries.forEach((q) => q.addEventListener('change', read));\n    return () => { mo.disconnect(); queries.forEach((q) => q.removeEventListener('change', read)); };\n  }, [ref, key]); // eslint-disable-line react-hooks/exhaustive-deps\n  return theme;\n}\n"],
+  "mappings": ";;;AAGA,YAAY,WAAW;AAgBvB,IAAM,OAAO;AAAA,EACX;AAAA,EAAU;AAAA,EAAU;AAAA,EAAU;AAAA,EAAU;AAAA,EAAU;AAAA,EAAU;AAAA,EAC5D;AAAA,EAAc;AAAA,EAAc;AAAA,EAAc;AAAA,EAAc;AAAA,EAAc;AAAA,EAAc;AAAA,EACpF;AAAA,EAAkB;AAAA,EAAkB;AAAA,EAAkB;AAAA,EAAgB;AAAA,EAAkB;AAAA,EAAkB;AAAA,EAC1G;AAAA,EAAkB;AAAA,EAAkB;AAAA,EAAoB;AAAA,EAAO;AAAA,EAAa;AAAA,EAAQ;AAAA,EACpF;AAAA,EAAU;AAAA,EAAa;AACzB;AAEA,IAAM,YAAY,CAAC,MAAsC,OAAQ,EAAc,iBAAiB;AAGzF,SAAS,gBAAgB,QAAuC;AACrE,MAAI,CAAC,UAAU,MAAM,EAAG,QAAO,EAAE,GAAG,OAAO;AAC3C,QAAM,KAAK,iBAAiB,MAAM;AAClC,SAAO,OAAO,YAAY,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,iBAAiB,OAAO,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AAC/F;AAEA,SAAS,eAAe,QAA0B,SAA4B;AAC5E,MAAI,EAAE,eAAe,aAAa,IAAI;AACtC,MAAI,UAAU,MAAM,GAAG;AACrB,UAAM,MAAM,OAAO,cAAc;AAEjC,UAAM,SAAS,iBAAiB,MAAM,EAAE,iBAAiB,cAAc,EAAE,KAAK;AAC9E,sCAAkB,SAAS,WAAW,MAAM,CAAC,CAAC,KAAK,WAAW,kCAAkC,EAAE;AAClG,oCAAiB,CAAC,CAAC,KAAK,WAAW,yBAAyB,EAAE;AAAA,EAChE;AACA,SAAO,EAAE,eAAe,CAAC,CAAC,eAAe,cAAc,CAAC,CAAC,cAAc,UAAU,CAAC,CAAC,QAAQ,YAAY,CAAC,CAAC,aAAa;AACxH;AAEA,IAAM,KAAK,CAAC,GAAuB,aAAqB;AACtD,QAAM,IAAI,mBAAmB,MAAM,KAAK,IAAI,KAAK,CAAC;AAClD,SAAO,IAAI,KAAK,MAAM,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,MAAM,MAAM,MAAO,EAAE,IAAI;AACxE;AAEA,IAAM,cAAc,CAAC,MAAmB,CAAC,UAAU,UAAU,UAAU,UAAU,UAAU,UAAU,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,OAAO,OAAO;AAG3I,SAAS,WAAW,QAAoC;AAC7D,SAAO,YAAY,gBAAgB,MAAM,CAAC;AAC5C;AAQO,SAAS,aAAa,QAA0B,UAA6B,CAAC,GAAG;AACtF,QAAM,IAAI,gBAAgB,MAAM;AAChC,QAAM,IAAI,eAAe,QAAQ,OAAO;AACxC,QAAM,WAAW,EAAE,gBAAgB,IAAI,GAAG,EAAE,cAAc,GAAG,GAAG;AAChE,QAAM,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,YAAY,EAAE,WAAW,EAAE;AACjE,QAAM,OAAO;AAAA,IACX,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE;AAAA,IACpD,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE;AAAA,IACpD,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE;AAAA,IACnC,WAAW,EAAE,WAAW,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE;AAAA,IAC5C,WAAW,EAAE,MAAM,MAAM;AAAA,EAC3B;AACA,SAAO;AAAA,IACL,OAAO,YAAY,CAAC;AAAA,IACpB,iBAAiB;AAAA,IACjB,WAAW,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE;AAAA,IACtD,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,GAAG,cAAc,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE;AAAA,IAC9E,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,GAAG,eAAe,EAAE,cAAc,EAAE;AAAA,IACxE,cAAc;AAAA,IAAM,WAAW;AAAA,IAAM,SAAS;AAAA,IAAM,UAAU;AAAA,IAC9D,SAAS;AAAA,MACP,iBAAiB,EAAE,kBAAkB;AAAA,MAAG,aAAa,EAAE;AAAA,MAAM,aAAa;AAAA,MAC1E,WAAW,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,WAAW,EAAE;AAAA,MACtD,cAAc,eAAe,EAAE,QAAQ,CAAC;AAAA,MACxC,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,cAAc,GAAG,OAAO,EAAE,GAAG,YAAY,EAAE,OAAO,EAAE,cAAc,GAAG,OAAO,EAAE,EAAE;AAAA,IACvH;AAAA;AAAA,IAEA,WAAW,EAAE,SAAS,EAAE,OAAO,CAAC,cAAc,cAAc,cAAc,cAAc,cAAc,cAAc,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,GAAG,WAAW,KAAK;AAAA,IACtK,MAAM,EAAE,SAAS,MAAM,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE;AAAA,IACnD,WAAW,CAAC,EAAE;AAAA,IACd,mBAAmB;AAAA,IACnB,yBAAyB;AAAA;AAAA,IAEzB,iBAAiB;AAAA,IAAc,uBAAuB;AAAA,EACxD;AACF;AAOO,SAAS,gBAAgB,QAA0B,UAA6B,CAAC,GAAG;AACzF,QAAM,IAAI,gBAAgB,MAAM;AAChC,QAAM,IAAI,eAAe,QAAQ,OAAO;AACxC,SAAO;AAAA,IACL,OAAO,EAAE,WAAW;AAAA,IACpB,aAAa,EAAE;AAAA,IACf,iBAAiB,EAAE,QAAQ;AAAA,IAC3B,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE;AAAA,IAC/B,WAAW,EAAE,gBAAgB,QAAiB,EAAE,UAAU,GAAG,EAAE,cAAc,GAAG,GAAG,GAAG,QAAQ,iBAA0B;AAAA,IACxH,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,QAAQ,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE;AAAA,IACzG,SAAS;AAAA,MACP,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE;AAAA,MACnC,SAAS;AAAA,QACP,iBAAiB,EAAE,kBAAkB;AAAA,QAAG,aAAa,EAAE;AAAA,QAAM,aAAa;AAAA,QAC1E,YAAY,EAAE;AAAA,QAAK,WAAW,EAAE;AAAA,QAAK,aAAa,EAAE,WAAW;AAAA,MACjE;AAAA,IACF;AAAA,EACF;AACF;AAUO,SAAS,cAAiB,OAA4D,KAAsC,SAAuC;AACxK,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAmB,IAAI;AACvD,QAAM,SAAe,aAAO,KAAK;AACjC,SAAO,UAAU;AACjB,QAAM,MAAM,KAAK,UAAU,WAAW,CAAC,CAAC;AACxC,EAAM,gBAAU,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,QAAI,OAAO;AACX,UAAM,OAAO,MAAM;AACjB,YAAM,OAAO,OAAO,QAAQ,IAAI,OAAO;AACvC,YAAM,KAAK,KAAK,UAAU,IAAI;AAC9B,UAAI,OAAO,MAAM;AAAE,eAAO;AAAI,iBAAS,IAAI;AAAA,MAAG;AAAA,IAChD;AACA,SAAK;AACL,UAAM,KAAK,IAAI,iBAAiB,IAAI;AAEpC,aAAS,IAAoB,IAAI,GAAG,IAAI,EAAE,eAAe;AACvD,SAAG,QAAQ,GAAG,EAAE,YAAY,MAAM,iBAAiB,CAAC,cAAc,eAAe,iBAAiB,SAAS,OAAO,EAAE,CAAC;AAAA,IACvH;AACA,UAAM,MAAM,GAAG,cAAc;AAC7B,UAAM,UAAU,MAAM,CAAC,oCAAoC,2BAA2B,8BAA8B,EAAE,IAAI,CAAC,MAAM,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC;AACvJ,YAAQ,QAAQ,CAAC,MAAM,EAAE,iBAAiB,UAAU,IAAI,CAAC;AACzD,WAAO,MAAM;AAAE,SAAG,WAAW;AAAG,cAAQ,QAAQ,CAAC,MAAM,EAAE,oBAAoB,UAAU,IAAI,CAAC;AAAA,IAAG;AAAA,EACjG,GAAG,CAAC,KAAK,GAAG,CAAC;AACb,SAAO;AACT;",
+  "names": []
+}

package/dist/cli/altitude.mjs

@@ -0,0 +1,134 @@
+#!/usr/bin/env node
+
+// scripts/altitude-cli.mjs
+import { existsSync, lstatSync, readFileSync, writeFileSync, unlinkSync } from "node:fs";
+import { createRequire } from "node:module";
+import { createHash } from "node:crypto";
+import { resolve, dirname, relative, basename } from "node:path";
+var sha = (value2) => createHash("sha256").update(value2).digest("hex");
+var args = process.argv.slice(2);
+var command = args.shift() || "help";
+var value = (name) => {
+  const i = args.indexOf(name);
+  return i < 0 ? void 0 : args[i + 1];
+};
+var cwd = resolve(value("--cwd") || process.cwd());
+var json = args.includes("--json");
+var emit = (result) => console.log(JSON.stringify(result, null, 2));
+function installed() {
+  const path = createRequire(resolve(cwd, "package.json")).resolve("altitude-design/package.json");
+  const pkg = JSON.parse(readFileSync(path, "utf8"));
+  const guidance = resolve(dirname(path), "dist/guidance");
+  const index = JSON.parse(readFileSync(resolve(guidance, "index.json"), "utf8"));
+  return { pkg, guidance, index };
+}
+function managed(text) {
+  const starts = [...text.matchAll(/<!-- altitude:start/g)], ends = [...text.matchAll(/<!-- altitude:end -->/g)];
+  if (!starts.length && !ends.length) return null;
+  if (starts.length !== 1 || ends.length !== 1) throw new Error("Malformed or duplicate Altitude markers; reconcile them manually.");
+  const re = /\n<!-- altitude:start created=(true|false) hash=([a-f0-9]{64}) -->\n([\s\S]*?)<!-- altitude:end -->\n/;
+  const m = re.exec(text);
+  if (!m || sha(m[3]) !== m[2]) throw new Error("The managed Altitude block was edited; preserve your edits and reconcile it manually.");
+  return { start: m.index, end: m.index + m[0].length, created: m[1] === "true", body: m[3] };
+}
+function block(version, guidance, created) {
+  const path = relative(cwd, guidance).replaceAll("\\", "/");
+  const body = `## Altitude framework (${version})
+For UI tasks using altitude-design, first read ${path}/README.md, then only the matching pattern document.
+Discover tasks with npm exec -- altitude patterns "your intent"; explain a rule with npm exec -- altitude explain RULE-ID.
+Use the installed public declarations and examples. Record applicable states and application-owned persistence, permissions and navigation.
+Run the pattern checks and application service fixtures; distinguish deterministic defects, integration obligations and contextual review.
+Use npm exec -- altitude doctor --json after package upgrades, and rerun npm exec -- altitude init to refresh this versioned pointer.
+`;
+  return `
+<!-- altitude:start created=${created} hash=${sha(body)} -->
+${body}<!-- altitude:end -->
+`;
+}
+function instructionPath(client) {
+  const override = resolve(cwd, "AGENTS.override.md");
+  if (client === "codex" && existsSync(override) && readFileSync(override, "utf8").trim()) return override;
+  return resolve(cwd, client === "codex" ? "AGENTS.md" : "CLAUDE.md");
+}
+function isSymlink(path) {
+  try {
+    return lstatSync(path).isSymbolicLink();
+  } catch (e) {
+    if (e.code === "ENOENT") return false;
+    throw e;
+  }
+}
+function init(context) {
+  if (context.pkg.version !== context.index.version) throw new Error("Installed package and guidance versions differ; reinstall before setup.");
+  const client = value("--client");
+  const clients = client === "all" ? ["codex", "claude"] : [client];
+  if (clients.some((c) => !["codex", "claude"].includes(c))) throw new Error("Choose --client codex, claude, or all.");
+  const remove = args.includes("--remove");
+  const targets = clients.flatMap((client2) => (remove && client2 === "codex" ? [resolve(cwd, "AGENTS.md"), resolve(cwd, "AGENTS.override.md")] : [instructionPath(client2)]).map((path) => ({ client: client2, path })));
+  const changes = targets.map(({ client: c, path }) => {
+    if (isSymlink(path)) throw new Error(`Refusing instruction symlink: ${path}`);
+    const existed = existsSync(path), before = existed ? readFileSync(path, "utf8") : "";
+    const old = managed(before);
+    const replacement = remove ? "" : block(context.pkg.version, context.guidance, old?.created ?? !existed);
+    const after = old ? before.slice(0, old.start) + replacement + before.slice(old.end) : before + (remove ? "" : replacement);
+    const deleteFile = remove && old?.created && after === "";
+    return { client: c, path, before, after, action: deleteFile ? "delete" : before === after ? "unchanged" : existed ? "update" : "create" };
+  });
+  emit({ command: "init", mode: args.includes("--apply") ? "apply" : "preview", version: context.pkg.version, changes });
+  if (args.includes("--apply")) for (const c of changes) {
+    if (c.action === "delete") unlinkSync(c.path);
+    else if (c.action !== "unchanged") writeFileSync(c.path, c.after);
+  }
+}
+function finding(ruleId, kind, status, observed, expected, repair, verification) {
+  return { ruleId, kind, status, observed, expected, repair, verification };
+}
+function doctor(context) {
+  const findings = [];
+  if (context.pkg.version !== context.index.version) findings.push(finding("ALT-SETUP-001", "deterministic", "fail", `Package ${context.pkg.version}; guidance ${context.index.version}`, "Matching versions", "Reinstall a coherent package.", "altitude doctor --json"));
+  const manifest = JSON.parse(readFileSync(resolve(context.guidance, "manifest.json"), "utf8"));
+  if (manifest.version !== context.pkg.version) findings.push(finding("ALT-SETUP-001", "deterministic", "fail", `Manifest ${manifest.version}`, "Manifest matches installed package", "Reinstall the package.", "altitude doctor --json"));
+  for (const [file, digest] of Object.entries(manifest.files)) {
+    const path = resolve(context.guidance, file);
+    if (!path.startsWith(context.guidance + "/") || !existsSync(path) || sha(readFileSync(path)) !== digest) findings.push(finding("ALT-SETUP-001", "deterministic", "fail", `Missing or modified guidance: ${file}`, "Unmodified version-matched guidance", "Reinstall the package.", "altitude doctor --json"));
+  }
+  for (const client of ["codex", "claude"]) {
+    const path = instructionPath(client), file = basename(path);
+    try {
+      const text = existsSync(path) ? readFileSync(path, "utf8") : "";
+      const current = managed(text);
+      if (current && text.slice(current.start, current.end) !== block(context.pkg.version, context.guidance, current.created)) findings.push(finding("ALT-SETUP-001", "deterministic", "fail", `${file} points to different guidance`, "Setup matches installed version and location", `altitude init --client ${client} --apply`, "altitude doctor --json"));
+      else findings.push(finding("ALT-SETUP-001", "deterministic", current ? "pass" : "not-configured", `${client}: ${current ? "managed pointer matches" : "no managed pointer"}`, "Explicit setup when agent integration is desired", `altitude init --client ${client}`, "Restart client and inspect loaded instructions."));
+    } catch (e) {
+      findings.push(finding("ALT-SETUP-001", "deterministic", "fail", `${file}: ${e.message}`, "One intact managed block", "Reconcile edited/duplicate markers manually.", "altitude doctor --json"));
+    }
+  }
+  const rules = JSON.parse(readFileSync(resolve(context.guidance, "rules.json"), "utf8")).rules;
+  for (const r of rules.filter((r2) => r2.diagnosticClass !== "deterministic")) findings.push(finding(r.id, r.diagnosticClass, "unverified", "CLI has not exercised application behavior or conducted human review.", r.title, r.repair, r.verification));
+  const ok = !findings.some((f) => f.kind === "deterministic" && f.status === "fail");
+  emit({ command: "doctor", packageVersion: context.pkg.version, guidanceVersion: context.index.version, ok, scope: "Installation and managed pointers only; not accessibility or usability certification.", findings });
+  if (!ok) process.exitCode = 1;
+}
+try {
+  if (command === "help" || command === "--help") console.log("altitude init --client codex|claude|all [--apply] [--remove]\naltitude patterns [intent] [--json]\naltitude explain RULE-ID [--json]\naltitude doctor [--json]\nAll commands resolve the installed package from --cwd PATH (default current directory).");
+  else {
+    const context = installed();
+    if (command === "init") init(context);
+    else if (command === "doctor") doctor(context);
+    else if (command === "patterns") {
+      const words = args.filter((v, i) => !v.startsWith("--") && args[i - 1] !== "--cwd").join(" ").toLowerCase().split(/\W+/).filter(Boolean);
+      const patterns = context.index.patterns.map((p) => ({ ...p, score: words.reduce((n, w) => n + (p.intents.some((i) => i === w || i.startsWith(w)) ? 1 : 0), 0) })).filter((p) => !words.length || p.score).sort((a, b) => b.score - a.score || a.id.localeCompare(b.id));
+      if (json) emit({ version: context.pkg.version, patterns });
+      else console.log(patterns.length ? patterns.map((p) => `${p.id}: ${p.purpose}
+  ${resolve(context.guidance, p.document)}`).join("\n") : "No pattern matched. Run altitude patterns to browse the catalog.");
+    } else if (command === "explain") {
+      const id = args[0];
+      const rule = JSON.parse(readFileSync(resolve(context.guidance, "rules.json"), "utf8")).rules.find((r) => r.id === id);
+      if (!rule) throw new Error(`Unknown rule: ${id}`);
+      emit({ version: context.pkg.version, ...rule });
+    } else throw new Error(`Unknown command: ${command}`);
+  }
+} catch (error) {
+  emit({ ok: false, findings: [finding("ALT-SETUP-001", "deterministic", "fail", error.message, "Installed altitude-design with coherent guidance and valid command arguments", "Install altitude-design locally; check arguments and managed instruction blocks.", "altitude doctor --json")] });
+  process.exitCode = 1;
+}

package/dist/guidance/README.md

@@ -0,0 +1,32 @@
+# Altitude framework
+
+Start from the person's task. Read only the relevant pattern below, its linked rules, and the public declarations. The installed copy matches the package version; `altitude doctor --json` checks that connection. Guidance supports judgment; it does not certify an application.
+
+Composing a new screen? Choose its frame from the task with [screen layout](patterns/screen-layout.md) first: name the task, the one thing that leads and the one primary action. The [app skeleton](app-skeleton.md) is one of its frames, for working through many similar records: shell, page header, a filtered and paged table, a record in a sheet, and settings, composed correctly.
+
+| Intent | Focused contract |
+| --- | --- |
+| Edit a record | [Edit record](patterns/edit-record.md) |
+| Search, filter or browse records | [Async collection](patterns/async-collection.md) |
+| Delete, revoke, publish or recover | [Consequential action](patterns/consequential-action.md) |
+| Review answers and finish a process | [Review and submit](patterns/review-submit.md) |
+| A settings page: apply now, save together, danger zone | [Settings](patterns/settings.md) |
+| Invite people, change roles, remove access | [Members](patterns/members.md) |
+| Usage, plan changes, invoices | [Billing](patterns/billing.md) |
+| Sign in, sign up, two-factor, reset | [Auth](patterns/auth.md) |
+| An audit log or a record's activity | [Audit log](patterns/audit-log.md) |
+| Import records from a CSV file | [Import](patterns/import.md) |
+| Autosave, offline, conflicts, session expiry | [Sync](patterns/sync.md) |
+| API keys, webhooks, integrations | [Developer settings](patterns/developer-settings.md) |
+| An agent that proposes and acts | [Agent action](patterns/agent-action.md) |
+| A conversation with an assistant (send, stream, stop, retry, limits) | [Assistant conversation](patterns/assistant-conversation.md) |
+| Setup checklist, empty states, tours, what's new | [Onboarding](patterns/onboarding.md) |
+| A new screen: choose its frame (editor, decision, report, triage, flow, records) from the task | [Screen layout](patterns/screen-layout.md) |
+
+Before implementation, capture a short design record in the application's normal documentation: user goal, audience, primary action, consequence, data shape, selected patterns, applicable states, and unresolved product decisions. Infer routine details from the existing product. Do not invent permissions, persistence, cancellation, rollback or undo. Ask only when an unknown changes consequences or the task itself.
+
+Use `altitude patterns "edit settings" --json` to discover contracts and `altitude explain ALT-EDIT-001` for a rule's scope and evidence. Read [principles](principles.md) for ownership and [evidence.json](evidence.json) for source authority. The generated `index.json` and `llms.txt` route to these same sources; they are not separately authored manuals.
+
+Compose existing primitives and small workflow hooks from the main `altitude-design` export inside one `AltitudeProvider`. Import a package stylesheet. The application supplies routes, business validation and services. Verify delayed operations, rejection, retry, cancellation and stale responses where applicable; include keyboard and manual assistive-technology review. Automated checks cannot establish complete accessibility or task suitability.
+
+For explicit agent setup, preview `npm exec -- altitude init --client codex` (or `claude`), then use `--apply`. Full setup and removal instructions are shipped as `agent-setup.md`, generated from the repository’s `docs/framework/AGENT-SETUP.md`. No installation hook writes project instructions.

package/dist/guidance/agent-setup.md

@@ -0,0 +1,22 @@
+# Connect installed guidance to an agent
+
+Install `altitude-design`, then run the installed binary from the consumer project root. The Node CLI has no runtime React dependency and no install hook. It never writes to a project merely because the package is installed.
+
+```sh
+npm exec -- altitude init --client codex
+npm exec -- altitude init --client codex --apply
+npm exec -- altitude init --client claude --apply
+npm exec -- altitude patterns "edit settings" --json
+npm exec -- altitude explain ALT-EDIT-001
+npm exec -- altitude doctor --json
+npm exec -- altitude init --client codex --remove
+npm exec -- altitude init --client codex --remove --apply
+```
+
+`init` defaults to a preview, including the exact before/after text. `--apply` applies that preview. `--client all` targets both clients. Repeating setup makes no change. Removal removes only the managed block, restoring surrounding bytes; a file created by setup is removed only if nothing else remains. User-edited managed blocks, malformed markers and symlinks are rejected for manual reconciliation. Existing instructions outside the block are preserved. Run setup again after upgrading the installed package. Use `--cwd PATH` to target an explicit project directory. Resolution uses that directory's installed `altitude-design/package.json`, never the version fetched by a different CLI invocation.
+
+The Codex adapter writes a compact routing block to project `AGENTS.md` (or an existing nonempty `AGENTS.override.md`, which Codex gives precedence); the Claude Code adapter writes it to project `CLAUDE.md`. Neither assumes instruction files under `node_modules` are automatically discovered. The routing block points at version-matched local focused documents rather than importing the complete manual. Restart the agent session after setup. Confirm Codex reports the project instruction file and Claude Code's `/context` lists it under Memory files; then ask an ordinary product question and check that the relevant pattern is read. Instructions are context, not enforcement, and broader or more specific instructions may affect discovery.
+
+Mechanisms verified against official documentation on 2026-10-23: [Codex AGENTS.md](https://learn.chatgpt.com/docs/agent-configuration/agents-md) describes root-to-working-directory instruction discovery, override precedence and size limits; [Claude Code memory](https://code.claude.com/docs/en/memory) documents project `CLAUDE.md` loading and `/context` inspection. The adapter tests verify files and round trips, not successful behavior of every client release. Claude Code also documents AGENTS.md support; CLAUDE.md remains the explicit adapter target.
+
+`doctor` reports stable rule IDs, observed evidence, expected behavior, repairs and verification. It returns a failing exit code only for deterministic installation/setup defects; service integration and contextual obligations remain visibly unverified. It does not inspect an application's service behavior or certify accessibility. Guidance remains usable offline through `altitude-design/guidance`, `altitude-design/guidance/*`, and physical `node_modules/altitude-design/dist/guidance` files. Tooling stays outside browser imports.