@sushant-kum/ccstatus 0.1.1 → 0.2.0

package/dist/{app-YVZJ6IYT.js → app-DVVWJH7H.js}

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
 import {
   COLORS,
+  LINKABLE,
   configPath,
   importCcstatusline,
   isValidWhen,
+  linkedSurfaces,
   loadConfigFile,
   readSnapshot,
   registry,
@@ -11,8 +13,9 @@ import {
   rendererBg,
   rendererColor,
   saveConfigFile,
-  snapshotPath
-} from "./chunk-ZD5C4L7U.js";
+  snapshotPath,
+  writeLinkedLines
+} from "./chunk-EUAY5IC6.js";
 
 // src/app.tsx
 import { Box as Box12, Text as Text12, useApp, useInput as useInput10 } from "ink";
@@ -307,58 +310,35 @@ function Import({
 // src/screens/items.tsx
 import { Box as Box5, Text as Text5, useInput as useInput3 } from "ink";
 import { useState as useState3 } from "react";
-
-// src/named-colors.ts
-var all = [...COLORS];
-var NAMED_COLORS = [
-  "(none)",
-  ...all.filter((c) => !c.startsWith("bg")),
-  ...all.filter((c) => c.startsWith("bg"))
-];
-
-// src/screens/items.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var SURFACES = ["band", "statusline", "pane"];
-var FIELDS2 = ["fg", "bg", "raw", "merge", "align"];
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SURFACES = LINKABLE;
+var FIELDS2 = ["raw", "merge", "align"];
 var ALIGNS = ["left", "center", "right"];
-var FG = NAMED_COLORS.filter((c) => !c.startsWith("bg"));
-var BG = ["(none)", ...NAMED_COLORS.filter((c) => c.startsWith("bg"))];
 var WIDGETS = Object.values(registry);
 var wrap = (i, n) => (i + n) % n;
+var makeId = (type) => `${type}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
 var isStylable = (item) => item.type !== "flex-separator";
 function Chip({ item, selected }) {
-  const fg = isStylable(item) ? item.fg : void 0;
-  const bg = isStylable(item) ? item.bg : void 0;
-  return /* @__PURE__ */ jsxs4(Text5, { inverse: selected, color: inkColor(fg), backgroundColor: inkBg(bg), children: [
+  return /* @__PURE__ */ jsxs4(Text5, { inverse: selected, children: [
     "[ ",
     item.type,
     " ]"
   ] });
 }
-function Swatch({ name, bg }) {
-  if (!name) {
-    return /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: "(none)" });
-  }
-  return /* @__PURE__ */ jsxs4(Text5, { color: bg ? void 0 : inkColor(name), backgroundColor: bg ? inkBg(name) : void 0, children: [
-    " ",
-    name,
-    " "
-  ] });
-}
 function Items({ config, setConfig, goHome }) {
   const [surface, setSurface] = useState3("band");
   const [sel, setSel] = useState3(0);
   const [mode, setMode] = useState3("strip");
+  const [linkPick, setLinkPick] = useState3(0);
+  const [confirm, setConfirm] = useState3(null);
   const [field, setField] = useState3(0);
   const [pick, setPick] = useState3(0);
   const items = config.surfaces[surface].lines[0] ?? [];
   const cur = items[Math.min(sel, items.length - 1)];
   const idx = cur ? items.indexOf(cur) : -1;
   const commit = (next) => {
-    const s = config.surfaces[surface];
-    const lines = [next, ...s.lines.slice(1)];
-    const c = { ...config, surfaces: { ...config.surfaces, [surface]: { ...s, lines } } };
-    setConfig(c);
+    const lines = [next, ...config.surfaces[surface].lines.slice(1)];
+    setConfig({ ...config, surfaces: writeLinkedLines(config.surfaces, surface, lines) });
   };
   const patch = (p) => {
     const base = items[idx];
@@ -373,20 +353,12 @@ function Items({ config, setConfig, goHome }) {
     }
     commit(items.map((it, i) => i === idx ? item : it));
   };
-  const cycleColor = (list, cur2, dir) => {
-    const n = list[wrap(Math.max(0, list.indexOf(cur2 ?? "(none)")) + dir + list.length, list.length)] ?? "(none)";
-    return n === "(none)" ? void 0 : n;
-  };
   const change = (dir) => {
     if (!cur || !isStylable(cur)) {
       return;
     }
     const f = FIELDS2[field];
-    if (f === "fg") {
-      patch({ fg: cycleColor(FG, cur.fg, dir) });
-    } else if (f === "bg") {
-      patch({ bg: cycleColor(BG, cur.bg, dir) });
-    } else if (f === "raw") {
+    if (f === "raw") {
       patch({ rawValue: !cur.rawValue });
     } else if (f === "merge") {
       patch({ merge: !cur.merge });
@@ -410,6 +382,45 @@ function Items({ config, setConfig, goHome }) {
     commit(next);
     setSel(j);
   };
+  const others = SURFACES.filter((s) => s !== surface);
+  const linkOptions = [
+    ...others.map((s) => ({ label: s, targets: [s] })),
+    { label: "all others", targets: others }
+  ];
+  const linkReplacements = (targets) => SURFACES.filter((s) => s !== surface && (targets.includes(s) || config.surfaces[s].linked));
+  const applyLink = (targets) => {
+    const marked = { ...config.surfaces };
+    marked[surface] = { ...config.surfaces[surface], linked: true };
+    for (const t of targets) {
+      marked[t] = { ...config.surfaces[t], linked: true };
+    }
+    const surfaces = writeLinkedLines(marked, surface, config.surfaces[surface].lines);
+    setConfig({ ...config, surfaces });
+  };
+  const applyUnlink = () => {
+    const layout = config.surfaces[surface];
+    if (!layout.linked) {
+      return;
+    }
+    const surfaces = {
+      ...config.surfaces,
+      [surface]: {
+        ...layout,
+        linked: false,
+        lines: layout.lines.map(
+          (line) => line.map((it) => ({ ...it, id: makeId(it.type) }))
+        )
+      }
+    };
+    const remaining = linkedSurfaces(surfaces);
+    if (remaining.length === 1) {
+      const lone = remaining[0];
+      if (lone) {
+        surfaces[lone] = { ...surfaces[lone], linked: false };
+      }
+    }
+    setConfig({ ...config, surfaces });
+  };
   useInput3((input, key) => {
     if (mode === "picker") {
       if (key.escape) {
@@ -422,7 +433,7 @@ function Items({ config, setConfig, goHome }) {
         const picked = WIDGETS[pick];
         if (picked) {
           const type = picked.type;
-          const id = `${type}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+          const id = makeId(type);
           const newItem = type === "custom-text" ? { id, type, text: "" } : type === "custom-command" ? { id, type, command: "" } : type === "flex-separator" ? { id, type } : { id, type };
           commit([...items, newItem]);
           setSel(items.length);
@@ -441,6 +452,35 @@ function Items({ config, setConfig, goHome }) {
       } else if (key.rightArrow) {
         change(1);
       }
+    } else if (mode === "link") {
+      if (confirm) {
+        if (input === "y") {
+          applyLink(confirm);
+          setConfirm(null);
+          setMode("strip");
+        } else if (input === "n" || key.escape) {
+          setConfirm(null);
+          setMode("strip");
+        }
+      } else if (key.escape) {
+        setMode("strip");
+      } else if (key.upArrow) {
+        setLinkPick((p) => wrap(p - 1 + linkOptions.length, linkOptions.length));
+      } else if (key.downArrow) {
+        setLinkPick((p) => wrap(p + 1, linkOptions.length));
+      } else if (key.return) {
+        const chosen = linkOptions[linkPick];
+        if (chosen) {
+          const affected = linkReplacements(chosen.targets);
+          const nonEmpty = affected.some((t) => config.surfaces[t].lines.some((l) => l.length > 0));
+          if (nonEmpty) {
+            setConfirm(affected);
+          } else {
+            applyLink(chosen.targets);
+            setMode("strip");
+          }
+        }
+      }
     } else {
       if (key.escape) {
         goHome();
@@ -464,6 +504,12 @@ function Items({ config, setConfig, goHome }) {
       } else if (input === "e" && idx >= 0) {
         setField(0);
         setMode("editor");
+      } else if (input === "l") {
+        setLinkPick(0);
+        setConfirm(null);
+        setMode("link");
+      } else if (input === "u") {
+        applyUnlink();
       }
     }
   });
@@ -482,8 +528,35 @@ function Items({ config, setConfig, goHome }) {
       s === surface ? `[${s}]` : s,
       " "
     ] }, s)) }),
-    /* @__PURE__ */ jsx4(Box5, { children: items.length === 0 ? /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: "(no items \u2014 press a)" }) : items.map((it, i) => /* @__PURE__ */ jsx4(Chip, { item: it, selected: i === idx }, it.id)) }),
-    mode === "picker" ? /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginTop: 1, children: [
+    config.surfaces[surface].linked && /* @__PURE__ */ jsxs4(Text5, { color: "magenta", children: [
+      "\u{1F517} linked: ",
+      SURFACES.filter((s) => config.surfaces[s].linked).join(", "),
+      " \u2014 edits apply to all"
+    ] }),
+    /* @__PURE__ */ jsx4(Box5, { children: items.length === 0 ? /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: "(no items \u2014 press a)" }) : (
+      // Item ids are unique within a surface. Linked surfaces share ids across
+      // surfaces (DEC-0018), but only one surface's items render here at a time,
+      // so these keys never collide. (The live Preview renders a RenderModel of
+      // positional segments — paint.tsx keys by index, not item id.)
+      items.map((it, i) => /* @__PURE__ */ jsx4(Chip, { item: it, selected: i === idx }, it.id))
+    ) }),
+    mode === "link" ? /* @__PURE__ */ jsx4(Box5, { flexDirection: "column", marginTop: 1, children: confirm ? /* @__PURE__ */ jsxs4(Text5, { children: [
+      "Replace ",
+      confirm.join(", "),
+      " layout with ",
+      surface,
+      "'s? (y/n)"
+    ] }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsxs4(Text5, { bold: true, children: [
+        "Link ",
+        surface,
+        " layout to:"
+      ] }),
+      linkOptions.map((o, i) => /* @__PURE__ */ jsxs4(Text5, { color: i === linkPick ? "cyan" : void 0, children: [
+        i === linkPick ? "\u25B8 " : "  ",
+        o.label
+      ] }, o.label))
+    ] }) }) : mode === "picker" ? /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginTop: 1, children: [
       /* @__PURE__ */ jsx4(Text5, { bold: true, children: "Add widget" }),
       WIDGETS.map((w, i) => /* @__PURE__ */ jsxs4(Text5, { color: i === pick ? "cyan" : void 0, children: [
         i === pick ? "\u25B8 " : "  ",
@@ -496,11 +569,9 @@ function Items({ config, setConfig, goHome }) {
         "type: ",
         cur.type
       ] }),
-      row(0, "fg", /* @__PURE__ */ jsx4(Swatch, { name: cur.fg })),
-      row(1, "bg", /* @__PURE__ */ jsx4(Swatch, { name: cur.bg, bg: true })),
-      row(2, "raw", /* @__PURE__ */ jsx4(Text5, { children: cur.rawValue ? "on" : "off" })),
-      row(3, "merge", /* @__PURE__ */ jsx4(Text5, { children: cur.merge ? "on" : "off" })),
-      row(4, "align", /* @__PURE__ */ jsx4(Text5, { children: cur.align ?? "left" }))
+      row(0, "raw", /* @__PURE__ */ jsx4(Text5, { children: cur.rawValue ? "on" : "off" })),
+      row(1, "merge", /* @__PURE__ */ jsx4(Text5, { children: cur.merge ? "on" : "off" })),
+      row(2, "align", /* @__PURE__ */ jsx4(Text5, { children: cur.align ?? "left" }))
     ] }) : /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginTop: 1, borderStyle: "round", paddingX: 1, children: [
       /* @__PURE__ */ jsxs4(Text5, { children: [
         "type: ",
@@ -508,7 +579,7 @@ function Items({ config, setConfig, goHome }) {
       ] }),
       /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: "(flex separator \u2014 no style options)" })
     ] })),
-    /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: mode === "strip" ? "\u2190/\u2192 select \xB7 [/] move \xB7 a add \xB7 x remove \xB7 e edit \xB7 tab surface \xB7 esc back" : mode === "editor" ? "\u2191/\u2193 field \xB7 \u2190/\u2192 change \xB7 esc done" : "\u2191/\u2193 choose \xB7 enter add \xB7 esc cancel" })
+    /* @__PURE__ */ jsx4(Text5, { dimColor: true, children: mode === "strip" ? "\u2190/\u2192 select \xB7 [/] move \xB7 a add \xB7 x remove \xB7 e edit \xB7 l link \xB7 u unlink \xB7 tab surface \xB7 esc back" : mode === "editor" ? "\u2191/\u2193 field \xB7 \u2190/\u2192 change \xB7 esc done" : mode === "link" ? confirm ? "y confirm \xB7 n cancel" : "\u2191/\u2193 choose \xB7 enter link \xB7 esc cancel" : "\u2191/\u2193 choose \xB7 enter add \xB7 esc cancel" })
   ] });
 }
 
@@ -1064,9 +1135,19 @@ function Surfaces({ config, setConfig, goHome }) {
 // src/screens/themes.tsx
 import { Box as Box11, Text as Text11, useInput as useInput9 } from "ink";
 import { useState as useState9 } from "react";
+
+// src/named-colors.ts
+var all = [...COLORS];
+var NAMED_COLORS = [
+  "(none)",
+  ...all.filter((c) => !c.startsWith("bg")),
+  ...all.filter((c) => c.startsWith("bg"))
+];
+
+// src/screens/themes.tsx
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-var FG2 = NAMED_COLORS.filter((c) => !c.startsWith("bg"));
-var BG2 = NAMED_COLORS.filter((c) => c.startsWith("bg"));
+var FG = NAMED_COLORS.filter((c) => !c.startsWith("bg"));
+var BG = ["(none)", ...NAMED_COLORS.filter((c) => c.startsWith("bg"))];
 var FIELDS3 = ["fg", "bg"];
 function uniqueName(base, themes) {
   if (!(base in themes)) {
@@ -1082,15 +1163,20 @@ function Themes({ config, setConfig, goHome }) {
   const names = Object.keys(config.themes);
   const [sel, setSel] = useState9(Math.max(0, names.indexOf(config.theme)));
   const [mode, setMode] = useState9("list");
-  const [w, setW] = useState9(0);
+  const [slot, setSlot] = useState9(0);
   const [field, setField] = useState9(0);
   const [pick, setPick] = useState9(0);
   const name = names[Math.min(sel, names.length - 1)];
-  const theme = name && config.themes[name] || {};
-  const widgets = Object.keys(theme);
-  const widget = widgets[Math.min(w, widgets.length - 1)];
-  const list = FIELDS3[field] === "fg" ? FG2 : BG2;
+  const theme = name && config.themes[name] || [];
+  const count = theme.length;
+  const slotIdx = Math.min(slot, count - 1);
+  const list = FIELDS3[field] === "fg" ? FG : BG;
   const setThemes = (themes, active = config.theme) => setConfig({ ...config, theme: active, themes });
+  const writeSlot = (index, entry) => {
+    if (name) {
+      setThemes({ ...config.themes, [name]: theme.map((s, i) => i === index ? entry : s) });
+    }
+  };
   useInput9((input, key) => {
     if (mode === "list") {
       if (key.escape) {
@@ -1104,49 +1190,65 @@ function Themes({ config, setConfig, goHome }) {
           setConfig({ ...config, theme: name });
         }
       } else if (key.rightArrow) {
-        if (widgets.length) {
-          setW(0);
-          setMode("colors");
+        if (count) {
+          setSlot(0);
+          setMode("slots");
         }
       } else if (input === "n") {
         const n = uniqueName("custom", config.themes);
-        setThemes({ ...config.themes, [n]: {} });
+        setThemes({ ...config.themes, [n]: [] });
         setSel(names.length);
       } else if (input === "d" && name) {
         const n = uniqueName(`${name}-copy`, config.themes);
         setThemes({ ...config.themes, [n]: structuredClone(theme) });
         setSel(names.length);
       }
-    } else if (mode === "colors") {
+    } else if (mode === "slots") {
       if (key.escape || key.leftArrow && field === 0) {
         setMode("list");
       } else if (key.upArrow) {
-        setW((i) => Math.max(0, i - 1));
+        setSlot(Math.max(0, slotIdx - 1));
       } else if (key.downArrow) {
-        setW((i) => Math.min(widgets.length - 1, i + 1));
+        setSlot(Math.min(count - 1, slotIdx + 1));
       } else if (key.leftArrow) {
         setField(0);
       } else if (key.rightArrow) {
         setField(1);
-      } else if (key.return && widget) {
-        const cur = theme[widget]?.[FIELDS3[field] ?? "fg"];
-        setPick(Math.max(0, list.indexOf(cur ?? "")));
+      } else if (key.return && slotIdx >= 0) {
+        const cur = theme[slotIdx]?.[FIELDS3[field] ?? "fg"];
+        setPick(Math.max(0, list.indexOf(cur ?? "(none)")));
         setMode("picker");
+      } else if (input === "a" && name) {
+        setThemes({ ...config.themes, [name]: [...theme, {}] });
+        setSlot(count);
+      } else if (input === "x" && name && slotIdx >= 0) {
+        const next = theme.filter((_, i) => i !== slotIdx);
+        setThemes({ ...config.themes, [name]: next });
+        if (next.length === 0) {
+          setMode("list");
+        } else {
+          setSlot(Math.min(slotIdx, next.length - 1));
+        }
       }
     } else {
       if (key.escape) {
-        setMode("colors");
+        setMode("slots");
       } else if (key.upArrow) {
         setPick((p) => Math.max(0, p - 1));
       } else if (key.downArrow) {
         setPick((p) => Math.min(list.length - 1, p + 1));
-      } else if (key.return && name && widget) {
+      } else if (key.return && slotIdx >= 0) {
         const f = FIELDS3[field] ?? "fg";
         const chosen = list[pick];
         if (chosen) {
-          const entry = { ...theme[widget], [f]: chosen };
-          setThemes({ ...config.themes, [name]: { ...theme, [widget]: entry } });
-          setMode("colors");
+          const entry = { ...theme[slotIdx] };
+          if (chosen === "(none)") {
+            delete entry[f];
+          } else {
+            entry[f] = chosen;
+          }
+          writeSlot(slotIdx, entry);
+          setMode("slots");
         }
       }
     }
@@ -1160,14 +1262,14 @@ function Themes({ config, setConfig, goHome }) {
     ] }, n)),
     /* @__PURE__ */ jsxs10(Text11, { dimColor: true, children: [
       name,
-      " colors:"
+      " palette slots:"
     ] }),
-    widgets.map((wt, i) => {
-      const c = theme[wt] ?? {};
-      const on = mode !== "list" && i === w;
+    count === 0 && /* @__PURE__ */ jsx10(Text11, { dimColor: true, children: "(empty palette)" }),
+    theme.map((c, i) => {
+      const on = mode !== "list" && i === slotIdx;
       return /* @__PURE__ */ jsxs10(Text11, { children: [
         on ? "\u25B8 " : "  ",
-        wt.padEnd(20),
+        String(i).padEnd(4),
         /* @__PURE__ */ jsxs10(Text11, { color: inkColor(c.fg), inverse: on && field === 0, children: [
           " ",
           c.fg ?? "(none)",
@@ -1178,14 +1280,14 @@ function Themes({ config, setConfig, goHome }) {
           c.bg ?? "(none)",
           " "
         ] })
-      ] }, wt);
+      ] }, i);
     }),
     mode === "picker" && /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", children: [
       /* @__PURE__ */ jsxs10(Text11, { bold: true, children: [
         "Pick ",
         FIELDS3[field],
-        " for ",
-        widget
+        " for slot ",
+        slotIdx
       ] }),
       list.map((c, i) => /* @__PURE__ */ jsxs10(Text11, { color: i === pick ? "cyan" : void 0, children: [
         i === pick ? "\u25B8 " : "  ",
@@ -1203,7 +1305,7 @@ function Themes({ config, setConfig, goHome }) {
         )
       ] }, c))
     ] }),
-    /* @__PURE__ */ jsx10(Text11, { dimColor: true, children: mode === "list" ? "\u2191/\u2193 select \xB7 \u23CE activate \xB7 \u2192 colors \xB7 n new \xB7 d duplicate \xB7 esc back" : mode === "colors" ? "\u2191/\u2193 widget \xB7 \u2190/\u2192 fg/bg \xB7 \u23CE pick \xB7 esc back" : "\u2191/\u2193 choose \xB7 \u23CE set \xB7 esc cancel" })
+    /* @__PURE__ */ jsx10(Text11, { dimColor: true, children: mode === "list" ? "\u2191/\u2193 select \xB7 \u23CE activate \xB7 \u2192 slots \xB7 n new \xB7 d duplicate \xB7 esc back" : mode === "slots" ? "\u2191/\u2193 slot \xB7 \u2190/\u2192 fg/bg \xB7 \u23CE pick \xB7 a add \xB7 x remove \xB7 esc back" : "\u2191/\u2193 choose \xB7 \u23CE set \xB7 esc cancel" })
   ] });
 }
 

package/dist/{chunk-ZD5C4L7U.js → chunk-EUAY5IC6.js}

@@ -5,128 +5,6 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// ../core/src/theme/themes.ts
-function resolveColors(item, config) {
-  const themeEntry = config.themes[config.theme]?.[item.type];
-  const fg2 = item.type === "flex-separator" ? void 0 : item.fg;
-  const bg2 = item.type === "flex-separator" ? void 0 : item.bg;
-  return {
-    fg: fg2 ?? themeEntry?.fg,
-    bg: bg2 ?? themeEntry?.bg
-  };
-}
-var WIDGETS = [
-  "model",
-  "version",
-  "context-percentage",
-  "git-branch",
-  "git-changes",
-  "tokens-input",
-  "tokens-output",
-  "tokens-total"
-];
-var mk = (rows) => {
-  const t = {};
-  WIDGETS.forEach((w, i) => {
-    const row = rows[i];
-    if (!row) {
-      throw new Error(`theme definition is missing a color row for widget "${w}"`);
-    }
-    const [fg2, bg2] = row;
-    t[w] = { fg: fg2, bg: bg2 };
-  });
-  return t;
-};
-var builtinThemes = {
-  default: {
-    model: { fg: "black", bg: "bgCyan" },
-    version: { fg: "white", bg: "bgBlue" },
-    "context-percentage": { fg: "black", bg: "bgBrightYellow" },
-    "git-branch": { fg: "black", bg: "bgCyan" },
-    "git-changes": { fg: "white", bg: "bgBrightBlack" }
-  },
-  classic: mk([
-    ["black", "bgYellow"],
-    ["black", "bgWhite"],
-    ["black", "bgGreen"],
-    ["white", "bgBlue"],
-    ["black", "bgMagenta"],
-    ["black", "bgCyan"],
-    ["black", "bgBrightYellow"],
-    ["white", "bgRed"]
-  ]),
-  nord: mk([
-    ["black", "bgBrightCyan"],
-    ["black", "bgCyan"],
-    ["black", "bgBlue"],
-    ["white", "bgBrightBlack"],
-    ["black", "bgBrightBlue"],
-    ["black", "bgGreen"],
-    ["black", "bgYellow"],
-    ["white", "bgBlack"]
-  ]),
-  dracula: mk([
-    ["black", "bgMagenta"],
-    ["black", "bgBrightMagenta"],
-    ["black", "bgBrightGreen"],
-    ["black", "bgBrightCyan"],
-    ["black", "bgBrightYellow"],
-    ["black", "bgBrightRed"],
-    ["white", "bgBrightBlack"],
-    ["white", "bgMagenta"]
-  ]),
-  gruvbox: mk([
-    ["black", "bgYellow"],
-    ["black", "bgBrightYellow"],
-    ["black", "bgGreen"],
-    ["black", "bgCyan"],
-    ["black", "bgRed"],
-    ["black", "bgMagenta"],
-    ["white", "bgBrightBlack"],
-    ["white", "bgBlack"]
-  ]),
-  monokai: mk([
-    ["black", "bgBrightGreen"],
-    ["black", "bgBrightYellow"],
-    ["black", "bgBrightMagenta"],
-    ["black", "bgBrightCyan"],
-    ["black", "bgBrightRed"],
-    ["white", "bgBrightBlack"],
-    ["black", "bgYellow"],
-    ["white", "bgBlack"]
-  ]),
-  "one-dark": mk([
-    ["black", "bgBlue"],
-    ["black", "bgBrightBlue"],
-    ["black", "bgGreen"],
-    ["black", "bgMagenta"],
-    ["black", "bgYellow"],
-    ["black", "bgCyan"],
-    ["white", "bgBrightBlack"],
-    ["white", "bgBlack"]
-  ]),
-  solarized: mk([
-    ["white", "bgBlue"],
-    ["black", "bgCyan"],
-    ["black", "bgYellow"],
-    ["white", "bgGreen"],
-    ["white", "bgMagenta"],
-    ["white", "bgRed"],
-    ["white", "bgBrightBlack"],
-    ["white", "bgBlack"]
-  ]),
-  "tokyo-night": mk([
-    ["black", "bgBrightBlue"],
-    ["black", "bgBlue"],
-    ["black", "bgBrightGreen"],
-    ["black", "bgBrightMagenta"],
-    ["black", "bgBrightYellow"],
-    ["black", "bgBrightCyan"],
-    ["white", "bgBrightBlack"],
-    ["white", "bgBlack"]
-  ])
-};
-
 // ../core/src/widgets/registry.ts
 var registry = {};
 function register(def) {
@@ -145,9 +23,8 @@ function itemToCell(item, config, snapshot, commandOutputs) {
   }
   const flex = item.type === "flex-separator";
   const pad = flex ? "" : " ".repeat(Math.max(0, Math.floor(config.defaults.padding)));
-  const { fg: fg2, bg: bg2 } = resolveColors(item, config);
   const merge = item.type === "flex-separator" ? false : item.merge ?? false;
-  return { text: flex ? "" : `${pad}${value}${pad}`, fg: fg2, bg: bg2, merge, flex };
+  return { text: flex ? "" : `${pad}${value}${pad}`, merge, flex };
 }
 function lineToCells(items, config, snapshot, commandOutputs) {
   return items.map((it) => itemToCell(it, config, snapshot, commandOutputs)).filter((c) => c !== null);
@@ -250,6 +127,55 @@ function composeLine(cells, mode, width, glyph = "\u2592") {
   return truncate(segs, width);
 }
 
+// ../core/src/theme/contrast.ts
+var LIGHT_BG = /* @__PURE__ */ new Set([
+  "green",
+  "yellow",
+  "cyan",
+  "white",
+  "brightGreen",
+  "brightYellow",
+  "brightCyan",
+  "brightWhite"
+]);
+var baseColor = (bg2) => {
+  if (!bg2.startsWith("bg")) {
+    return bg2;
+  }
+  const rest = bg2.slice(2);
+  return rest.charAt(0).toLowerCase() + rest.slice(1);
+};
+function contrastFg(bg2) {
+  return LIGHT_BG.has(baseColor(bg2)) ? "black" : "white";
+}
+
+// ../core/src/layout/palette.ts
+function assignPaletteColors(cells, theme) {
+  if (theme.length === 0) {
+    return cells.map((c) => ({ ...c }));
+  }
+  const out = [];
+  let slot = -1;
+  let prev;
+  for (const c of cells) {
+    if (c.flex) {
+      out.push({ ...c });
+      prev = c;
+      continue;
+    }
+    const continuation = c.merge === true && prev !== void 0 && !prev.flex;
+    if (!continuation) {
+      slot += 1;
+    }
+    const pal = theme[slot % theme.length];
+    const bg2 = pal?.bg;
+    const fg2 = pal?.fg ?? (bg2 !== void 0 ? contrastFg(bg2) : void 0);
+    out.push({ ...c, fg: fg2, bg: bg2 });
+    prev = c;
+  }
+  return out;
+}
+
 // ../core/src/format.ts
 function fmtNum(n) {
   const trim = (v, suffix) => `${v.toFixed(1).replace(/\.0$/, "")}${suffix}`;
@@ -525,7 +451,8 @@ function render(config, snapshot, opts) {
     return { lines: [] };
   }
   const outputs = opts.commandOutputs ?? {};
-  const lines = surface.lines.map((items) => lineToCells(items, config, snapshot, outputs)).filter((cells) => cells.length > 0).map((cells) => ({
+  const theme = Object.hasOwn(config.themes, config.theme) ? config.themes[config.theme] ?? [] : [];
+  const lines = surface.lines.map((items) => lineToCells(items, config, snapshot, outputs)).filter((cells) => cells.length > 0).map((cells) => assignPaletteColors(cells, theme)).map((cells) => ({
     segments: composeLine(cells, config.defaults.separator, opts.width, config.defaults.glyph)
   }));
   return { lines };
@@ -609,6 +536,98 @@ function isColor(x) {
   return typeof x === "string" && COLORS.has(x);
 }
 
+// ../core/src/theme/themes.ts
+var mk = (rows) => rows.map(([fg2, bg2]) => ({ fg: fg2, bg: bg2 }));
+var builtinThemes = {
+  default: [
+    { fg: "black", bg: "bgCyan" },
+    { fg: "white", bg: "bgBlue" },
+    { fg: "black", bg: "bgBrightYellow" },
+    { fg: "white", bg: "bgBrightBlack" },
+    { fg: "black", bg: "bgGreen" }
+  ],
+  classic: mk([
+    ["black", "bgYellow"],
+    ["black", "bgWhite"],
+    ["black", "bgGreen"],
+    ["white", "bgBlue"],
+    ["black", "bgMagenta"],
+    ["black", "bgCyan"],
+    ["black", "bgBrightYellow"],
+    ["white", "bgRed"]
+  ]),
+  nord: mk([
+    ["black", "bgBrightCyan"],
+    ["black", "bgCyan"],
+    ["black", "bgBlue"],
+    ["white", "bgBrightBlack"],
+    ["black", "bgBrightBlue"],
+    ["black", "bgGreen"],
+    ["black", "bgYellow"],
+    ["white", "bgBlack"]
+  ]),
+  dracula: mk([
+    ["black", "bgMagenta"],
+    ["black", "bgBrightMagenta"],
+    ["black", "bgBrightGreen"],
+    ["black", "bgBrightCyan"],
+    ["black", "bgBrightYellow"],
+    ["black", "bgBrightRed"],
+    ["white", "bgBrightBlack"],
+    ["white", "bgMagenta"]
+  ]),
+  gruvbox: mk([
+    ["black", "bgYellow"],
+    ["black", "bgBrightYellow"],
+    ["black", "bgGreen"],
+    ["black", "bgCyan"],
+    ["black", "bgRed"],
+    ["black", "bgMagenta"],
+    ["white", "bgBrightBlack"],
+    ["white", "bgBlack"]
+  ]),
+  monokai: mk([
+    ["black", "bgBrightGreen"],
+    ["black", "bgBrightYellow"],
+    ["black", "bgBrightMagenta"],
+    ["black", "bgBrightCyan"],
+    ["black", "bgBrightRed"],
+    ["white", "bgBrightBlack"],
+    ["black", "bgYellow"],
+    ["white", "bgBlack"]
+  ]),
+  "one-dark": mk([
+    ["black", "bgBlue"],
+    ["black", "bgBrightBlue"],
+    ["black", "bgGreen"],
+    ["black", "bgMagenta"],
+    ["black", "bgYellow"],
+    ["black", "bgCyan"],
+    ["white", "bgBrightBlack"],
+    ["white", "bgBlack"]
+  ]),
+  solarized: mk([
+    ["white", "bgBlue"],
+    ["black", "bgCyan"],
+    ["black", "bgYellow"],
+    ["white", "bgGreen"],
+    ["white", "bgMagenta"],
+    ["white", "bgRed"],
+    ["white", "bgBrightBlack"],
+    ["white", "bgBlack"]
+  ]),
+  "tokyo-night": mk([
+    ["black", "bgBrightBlue"],
+    ["black", "bgBlue"],
+    ["black", "bgBrightGreen"],
+    ["black", "bgBrightMagenta"],
+    ["black", "bgBrightYellow"],
+    ["black", "bgBrightCyan"],
+    ["white", "bgBrightBlack"],
+    ["white", "bgBlack"]
+  ])
+};
+
 // ../core/src/toast.ts
 var TOAST_FIELDS = {
   ctxPct: (s) => s.ctxPct,
@@ -655,6 +674,53 @@ var defaultConfig = {
   }
 };
 
+// ../core/src/config/links.ts
+var LINKABLE = ["band", "statusline", "pane"];
+var clone = (v) => JSON.parse(JSON.stringify(v));
+function linkedSurfaces(surfaces) {
+  return LINKABLE.filter((name) => surfaces[name].linked);
+}
+function writeLinkedLines(surfaces, surface, lines) {
+  const next = { ...surfaces };
+  next[surface] = { ...surfaces[surface], lines: clone(lines) };
+  if (surfaces[surface].linked) {
+    for (const member of LINKABLE) {
+      if (member !== surface && surfaces[member].linked) {
+        next[member] = { ...surfaces[member], lines: clone(lines) };
+      }
+    }
+  }
+  return next;
+}
+function normalizeLinks(surfaces, warn) {
+  const linked = linkedSurfaces(surfaces);
+  if (linked.length < 2) {
+    for (const name of linked) {
+      delete surfaces[name].linked;
+      warn(`dropped lone surface link on "${name}"`);
+    }
+    return;
+  }
+  const canonical = linked[0];
+  if (!canonical) {
+    return;
+  }
+  const source = JSON.stringify(surfaces[canonical].lines);
+  let diverged = false;
+  for (const name of linked) {
+    if (name === canonical) {
+      continue;
+    }
+    if (JSON.stringify(surfaces[name].lines) !== source) {
+      surfaces[name].lines = clone(surfaces[canonical].lines);
+      diverged = true;
+    }
+  }
+  if (diverged) {
+    warn(`linked surfaces diverged; synced to "${canonical}"`);
+  }
+}
+
 // ../../node_modules/zod/v3/external.js
 var external_exports = {};
 __export(external_exports, {
@@ -4713,7 +4779,8 @@ var itemSchema = external_exports.object({
 });
 var surfaceLayoutSchema = external_exports.object({
   enabled: external_exports.boolean(),
-  lines: external_exports.array(external_exports.array(itemSchema))
+  lines: external_exports.array(external_exports.array(itemSchema)),
+  linked: external_exports.boolean().optional()
 });
 var toastRuleSchema = external_exports.object({
   when: external_exports.string(),
@@ -4723,7 +4790,7 @@ var toastRuleSchema = external_exports.object({
 var configSchema = external_exports.object({
   version: external_exports.literal(1).catch(1),
   theme: external_exports.string().default("default"),
-  themes: external_exports.record(external_exports.record(external_exports.object({ fg: external_exports.string().optional(), bg: external_exports.string().optional() }))).default({}),
+  themes: external_exports.record(external_exports.unknown()).default({}),
   defaults: external_exports.object({
     separator: sep,
     padding: external_exports.number().int().min(0).catch(1),
@@ -4780,7 +4847,7 @@ var WIDGET_TYPES = [
 ];
 
 // ../core/src/config/validate.ts
-var clone = (v) => JSON.parse(JSON.stringify(v));
+var clone2 = (v) => JSON.parse(JSON.stringify(v));
 var WIDGET_TYPE_SET = new Set(WIDGET_TYPES);
 function cleanStyle(raw, type, warn) {
   const style = {};
@@ -4793,16 +4860,8 @@ function cleanStyle(raw, type, warn) {
   if (raw.rawValue !== void 0) {
     style.rawValue = raw.rawValue;
   }
-  for (const key of ["fg", "bg"]) {
-    const v = raw[key];
-    if (v === void 0) {
-      continue;
-    }
-    if (isColor(v)) {
-      style[key] = v;
-    } else {
-      warn(`stripped unknown color "${v}" on a ${type} item`);
-    }
+  if (raw.fg !== void 0 || raw.bg !== void 0) {
+    warn(`dropped per-item color on a ${type} item; colors now come from the theme palette`);
   }
   return style;
 }
@@ -4835,28 +4894,42 @@ function cleanItem(raw, warn) {
   return { id, type, ...style };
 }
 function cleanThemes(themes, warn) {
-  const cleaned = {};
-  for (const [themeName, themeEntries] of Object.entries(themes)) {
-    const cleanedEntries = {};
-    for (const [widgetName, entry] of Object.entries(themeEntries)) {
-      const cleanedEntry = { ...entry };
+  const cleaned = /* @__PURE__ */ Object.create(null);
+  for (const [name, value] of Object.entries(themes)) {
+    if (!Array.isArray(value)) {
+      const message = value !== null && typeof value === "object" ? `theme "${name}" uses the old per-widget format and was dropped; colors are now a positional palette` : `theme "${name}" is not a palette array and was dropped; colors are now a positional palette`;
+      warn(message);
+      continue;
+    }
+    const slots = [];
+    value.forEach((rawSlot, i) => {
+      if (!rawSlot || typeof rawSlot !== "object") {
+        warn(`replaced invalid slot ${i} in theme "${name}" with an empty slot`);
+        slots.push({});
+        return;
+      }
+      const entry = rawSlot;
+      const slot = {};
       for (const key of ["fg", "bg"]) {
-        if (cleanedEntry[key] !== void 0 && !isColor(cleanedEntry[key])) {
-          warn(
-            `stripped unknown color "${cleanedEntry[key]}" in theme "${themeName}" (${widgetName})`
-          );
-          cleanedEntry[key] = void 0;
+        const v = entry[key];
+        if (v === void 0) {
+          continue;
+        }
+        if (typeof v === "string" && isColor(v)) {
+          slot[key] = v;
+        } else {
+          warn(`stripped unknown color "${String(v)}" in theme "${name}" (slot ${i})`);
         }
       }
-      cleanedEntries[widgetName] = cleanedEntry;
-    }
-    cleaned[themeName] = cleanedEntries;
+      slots.push(slot);
+    });
+    cleaned[name] = slots;
   }
   return cleaned;
 }
 function cleanToasts(raw, warn) {
   if (!raw) {
-    return clone(defaultConfig.surfaces.toasts);
+    return clone2(defaultConfig.surfaces.toasts);
   }
   const rules = raw.rules.filter((r) => {
     if (isValidWhen(r.when)) {
@@ -4881,26 +4954,39 @@ function loadConfig(raw) {
     if (raw !== void 0) {
       warn(`config invalid (${parsed.error.issues[0]?.message ?? "unknown"}); using defaults`);
     }
-    return { config: clone(defaultConfig), warnings };
+    return { config: clone2(defaultConfig), warnings };
   }
   const p = parsed.data;
   const surf = (name) => {
     const s = p.surfaces[name];
     if (!s) {
-      return clone(defaultConfig.surfaces[name]);
+      return clone2(defaultConfig.surfaces[name]);
     }
-    return {
+    const layout = {
       enabled: s.enabled,
       lines: s.lines.map(
         (line) => line.map((it) => cleanItem(it, warn)).filter((x) => x !== null)
       )
     };
+    if (s.linked) {
+      layout.linked = true;
+    }
+    return layout;
   };
-  const themesToUse = Object.keys(p.themes).length ? p.themes : clone(defaultConfig.themes);
+  const cleaned = cleanThemes(p.themes, warn);
+  const themes = Object.keys(cleaned).length ? cleaned : clone2(builtinThemes);
+  if (!Object.hasOwn(themes, "default")) {
+    themes["default"] = clone2(builtinThemes["default"] ?? []);
+  }
+  let theme = p.theme;
+  if (!Object.hasOwn(themes, theme)) {
+    warn(`theme "${theme}" not found; using "default"`);
+    theme = "default";
+  }
   const config = {
     version: 1,
-    theme: p.theme,
-    themes: cleanThemes(themesToUse, warn),
+    theme,
+    themes,
     defaults: { ...defaultConfig.defaults, ...p.defaults },
     surfaces: {
       band: surf("band"),
@@ -4909,11 +4995,12 @@ function loadConfig(raw) {
       toasts: cleanToasts(p.surfaces.toasts, warn)
     }
   };
+  normalizeLinks(config.surfaces, warn);
   return { config, warnings };
 }
 
 // ../core/src/config/import-ccstatusline.ts
-var clone2 = (v) => JSON.parse(JSON.stringify(v));
+var clone3 = (v) => JSON.parse(JSON.stringify(v));
 var TYPE_MAP = {
   model: "model",
   version: "version",
@@ -5004,7 +5091,6 @@ var UNSUPPORTED = {
 function baseStyle(raw, idFallback) {
   return {
     id: String(raw["id"] ?? `${idFallback}-${Math.random().toString(36).slice(2)}`),
-    bg: typeof raw["backgroundColor"] === "string" ? raw["backgroundColor"] : void 0,
     rawValue: raw["rawValue"] === true || void 0,
     merge: raw["merge"] === true || void 0
   };
@@ -5013,7 +5099,7 @@ function importCcstatusline(raw) {
   const warnings = [];
   if (!raw || typeof raw !== "object" || !Array.isArray(raw.lines)) {
     warnings.push("input is not a ccstatusline config; using defaults");
-    return { config: clone2(defaultConfig), warnings };
+    return { config: clone3(defaultConfig), warnings };
   }
   const lines = raw.lines.map(
     (line) => (Array.isArray(line) ? line : []).flatMap((item) => {
@@ -5252,6 +5338,9 @@ export {
   toAnsi,
   COLORS,
   isValidWhen,
+  LINKABLE,
+  linkedSurfaces,
+  writeLinkedLines,
   importCcstatusline,
   rendererColor,
   rendererBg,

package/dist/index.js

@@ -4,10 +4,10 @@
 import { jsx } from "react/jsx-runtime";
 var sub = process.argv[2];
 if (sub === "statusline") {
-  const { runStatusline } = await import("./statusline-cmd-XIBNUV3A.js");
+  const { runStatusline } = await import("./statusline-cmd-5XRA4JYE.js");
   await runStatusline();
 } else {
   const { render } = await import("ink");
-  const { App } = await import("./app-YVZJ6IYT.js");
+  const { App } = await import("./app-DVVWJH7H.js");
   render(/* @__PURE__ */ jsx(App, {}));
 }

package/dist/{statusline-cmd-XIBNUV3A.js → statusline-cmd-5XRA4JYE.js}

@@ -6,7 +6,7 @@ import {
   render,
   snapshotPath,
   toAnsi
-} from "./chunk-ZD5C4L7U.js";
+} from "./chunk-EUAY5IC6.js";
 
 // src/statusline-cmd.ts
 function renderStatuslineAnsi(config, snapshot) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sushant-kum/ccstatus",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Interactive configurator (npx @sushant-kum/ccstatus) for the ccstatus Claude Code status bar — band, status line, pane, and threshold toasts from one config.",
   "license": "MIT",
   "author": "Sushant Kumar",