makersclaw 0.8.0 → 0.8.1

package/registry/blocks/tier-map/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "tier-map",
+  "title": "TierMap",
+  "description": "A map of cards in tiers, from a flat list where each item names its parent. The first tier is the tops; pressing a card opens the cards that serve it as the next tier beneath, joined by elbow lines (pressing it again closes them), and ONE LAYER OPENS AT A TIME. A card with something under it says how many (\"6 serving it\") and whether it is open. A card holds a small kicker line with a mark and a person's face, a title, a progress bar in a status colour with its percent, and one muted foot line. Items that sit under nothing and are not tops are shown together in an unparented group with a note and a slot for an action; items marked ghost (drafts, counted nowhere) are drawn dashed in a group of their own and can serve each other. The lines are CSS only (each tier is a grid of equal columns and the lines are placed in percent), so nothing is measured; below the width a tier needs to sit in one row it stacks, the lines become a rail down its left, and the cards go full width. Arrow keys walk the cards (left and right beside, down into the first kid, up to the parent, Escape closes). A loop of parents is broken, and a parent that is not in the list makes the item unparented. Loading, failed, empty and read-only are drawn; the model (buildTierModel, openPath, togglePath, neighbour, elbowOf) is exported as plain functions.",
+  "useWhen": "Any screen that shows what serves what, one layer at a time: a company's goals and the goals beneath them, a strategy map, initiatives under goals, work under a roadmap theme, an account and its sub-accounts, a category tree whose members are cards, a product and its components. Draws a structure the app has already worked out; it does not move cards between parents or collect anything. Not for a person-and-manager chart with zoom and drag (org-chart), a free-form map of ideas (mind-map), a full node-and-edge canvas (flow-canvas), a table with expandable rows (data-table), or a board of columns (board).",
+  "tags": ["tiers", "tree", "hierarchy", "parent", "children", "map", "goals", "okr", "strategy", "initiatives", "roadmap", "sub-accounts", "serves", "alignment", "elbow", "connector", "drafts", "ghost", "unparented", "cards", "progress"],
+  "exports": ["TierMap", "TierCard", "CARD_REM", "MAX_COLUMNS", "NEVER", "TONES", "barOf", "buildTierModel", "centreOf", "countText", "elbowOf", "fitKey", "neighbour", "openPath", "pathTo", "siblingsOf", "thresholdRem", "tiersOf", "togglePath", "toneOf"],
+  "files": ["index.js", "tier-map.jsx", "tier-model.js"],
+  "requires": []
+}

package/registry/blocks/tier-map/demo.jsx

@@ -0,0 +1,222 @@
+"use client";
+
+// TierMap in every state — the gallery's and the smoke test's surface. Not
+// installed into apps: `makersclaw add tier-map` lays index.js, tier-map.jsx
+// and tier-model.js only.
+//   Goals         a company's goals, the teams' goals beneath: one layer opens
+//                 at a time (press a count), a record opens on its title, an
+//                 unparented group with a note and an action, a group of drafts
+//                 where one draft serves another.
+//   Deep          three tiers open at once, and the path kept by the surface.
+//   Accounts      the same block for an account and its sub-accounts, with a
+//                 card of the app's own (renderCard).
+//   One top       a top with nothing beneath it; many tops.
+//   Long words    a very long title, kicker and foot.
+//   Narrow        a 320 px container: tiers stack, the lines are a rail.
+//   Wide          a container well past 1000 px.
+//   Odd data      a loop of parents (broken), a parent that is not in the list.
+//   Read-only     no onSelect: pressing a card only opens its tier.
+//   Empty, loading, failed.
+import { useState } from "react";
+import { Avatar, Button, StatusDot } from "../components/ui";
+import { TierMap } from "../components/blocks/tier-map";
+
+const person = (name) => <Avatar name={name} size="xs" />;
+const dot = (tone, label) => <StatusDot tone={tone} label={label} hideLabel />;
+
+const GOALS = [
+  { id: "c1", title: "Reach $1M in annual revenue by the end of the quarter", kicker: "Company", by: person("Dana Whitfield"), value: 0.62, tone: "warning", mark: dot("warning", "Behind"), foot: "6 teams serve it" },
+  { id: "c2", title: "Be the default rate API for small carriers", kicker: "Company", by: person("Dana Whitfield"), value: 0.41, tone: "danger", mark: dot("danger", "At risk") },
+  { id: "c3", title: "Keep churn under 2% a month", kicker: "Company", by: person("Dana Whitfield"), value: 0.9, tone: "success", mark: dot("success", "On track") },
+  { id: "s1", parent: "c1", title: "Close the enterprise gap", kicker: "Sales", by: person("Priya Raman"), value: 0.58, tone: "warning", mark: dot("warning", "Behind") },
+  { id: "s2", parent: "c1", title: "Turn demos into a repeatable motion", kicker: "Sales", by: person("Marcus Reyes"), value: 0.87, tone: "success", mark: dot("success", "On track") },
+  { id: "s3", parent: "c1", title: "Win back the lapsed accounts", kicker: "Customer success", by: person("Hannah Cole"), value: 0.75, mark: dot("info", "Quiet") },
+  { id: "s4", parent: "c1", title: "Launch the partner programme", kicker: "Marketing", by: person("Lena Vogel"), value: 0.3, tone: "danger", mark: dot("danger", "At risk") },
+  { id: "s5", parent: "c1", title: "Raise the average deal size", kicker: "Sales", by: person("Priya Raman"), value: 0.5 },
+  { id: "s6", parent: "c1", title: "Shorten the sales cycle", kicker: "Sales", by: person("Marcus Reyes"), value: 1, foot: "Done 18 Sep" },
+  { id: "e1", parent: "c2", title: "Ship the rate API v2", kicker: "Engineering", by: person("Daniel Brandt"), value: 0.44, foot: "4 key results" },
+  { id: "e2", parent: "c2", title: "Cut p95 latency under 200 ms", kicker: "Engineering", by: person("Sofia Marchetti"), value: 0.4 },
+  { id: "k1", parent: "s1", title: "Sign three accounts above $50k", kicker: "Key result", by: person("Priya Raman"), value: 0.66 },
+  { id: "k2", parent: "s1", title: "Run five security reviews", kicker: "Key result", by: person("Priya Raman"), value: 0.4 },
+  { id: "k3", parent: "s1", title: "Bring legal in on the master agreement", kicker: "Key result", by: person("Hannah Cole"), value: 0.8 },
+  { id: "k4", parent: "s2", title: "Book 40 demos a month", kicker: "Key result", by: person("Marcus Reyes"), value: 0.95 },
+  { id: "k5", parent: "s2", title: "Write the follow-up playbook", kicker: "Key result", by: person("Marcus Reyes"), value: 0.8 },
+  // Serves nothing: no parent, and not a top.
+  { id: "u1", title: "Redesign the pricing page", kicker: "Marketing", by: person("Lena Vogel"), value: 0.2, foot: "Not linked to a company goal" },
+  // Drafts: counted nowhere. One serves another; one serves a real goal.
+  { id: "g1", ghost: true, title: "Grow MRR to $80k without adding sales headcount", kicker: "Draft · Company", by: person("Dana Whitfield"), foot: "Drafted 22 Sep" },
+  { id: "g2", ghost: true, parent: "g1", title: "Make the enterprise tier pay for itself", kicker: "Draft · Sales", foot: "Drafts are not counted anywhere until someone activates them." },
+  { id: "g3", ghost: true, parent: "c3", title: "Offer annual plans at a discount", kicker: "Draft · Customer success" },
+];
+const GOAL_TOPS = ["c1", "c2", "c3"];
+
+const note = (
+  <>
+    <p>A goal that serves nothing is worth a look: is it work the company needs, or work nobody asked for?</p>
+    <Button size="sm">Link to a company goal</Button>
+  </>
+);
+
+function Section({ title, note: text, children }) {
+  return (
+    <section className="grid min-w-0 gap-2">
+      <h2 className="text-sm font-semibold">{title}</h2>
+      {text ? <p className="text-xs text-muted-foreground">{text}</p> : null}
+      {children}
+    </section>
+  );
+}
+
+export default function Demo() {
+  const [path, setPath] = useState(["c1"]);
+  const [picked, setPicked] = useState("s1");
+  const item = GOALS.find((g) => g.id === picked);
+
+  return (
+    <div className="grid min-w-0 gap-10 p-4">
+      <Section title="Goals" note="Press a count to open its tier (the line follows); press a title to select it. Left and right walk beside, down goes in, up goes out, Escape closes.">
+        <TierMap
+          label="How goals fit"
+          items={GOALS}
+          tops={GOAL_TOPS}
+          topsLabel="Company · Q3 2026"
+          childrenLabel={(n) => `${n} serving it`}
+          open={path}
+          onOpenChange={setPath}
+          selected={picked}
+          onSelect={(g) => setPicked(g.id)}
+          unparentedLabel="Serves nothing"
+          unparentedNote={note}
+          ghostLabel="Q4 2026 drafts · aligned already"
+        />
+        <p className="text-xs text-muted-foreground">
+          Selected: {item?.title} {"·"} open: {path.length ? path.join(" › ") : "none"}
+        </p>
+      </Section>
+
+      <Section title="Three tiers open" note="Uncontrolled, starting with a path: a company goal, a team goal, and its key results.">
+        <TierMap label="Deep path" items={GOALS} tops={GOAL_TOPS} topsLabel="Company" childrenLabel="serving it" defaultOpen={["c1", "s1"]} onSelect={() => {}} />
+      </Section>
+
+      <Section title="Accounts and sub-accounts" note="The same block with a card of the app's own: renderCard gets the item and the state, and spreads the props that take the focus.">
+        <TierMap
+          label="Accounts"
+          items={[
+            { id: "a1", title: "Northwind Group", kicker: "Parent account", foot: "$2.4M a year" },
+            { id: "a2", parent: "a1", title: "Northwind Freight", kicker: "Sub-account", foot: "$1.1M a year" },
+            { id: "a3", parent: "a1", title: "Northwind Cold Chain", kicker: "Sub-account", foot: "$0.9M a year" },
+            { id: "a4", parent: "a2", title: "Freight · Lisbon depot", kicker: "Site", foot: "$0.3M a year" },
+            { id: "a5", parent: "a2", title: "Freight · Rotterdam depot", kicker: "Site", foot: "$0.8M a year" },
+            { id: "b1", title: "Tidewater Supply", kicker: "Parent account", foot: "$0.6M a year" },
+          ]}
+          topsLabel="Parent accounts"
+          childrenLabel="sub-accounts"
+          defaultOpen={["a1"]}
+          onSelect={() => {}}
+          renderCard={(it, s) => (
+            <div {...s.holderProps} className="w-full min-w-0 max-w-[26rem]">
+              <button
+                type="button"
+                {...s.primaryProps}
+                className="grid w-full min-w-0 gap-0.5 rounded-lg border border-border bg-card p-3 text-left text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <span className="text-xs text-muted-foreground">{it.kicker}</span>
+                <span className="font-semibold">{it.title}</span>
+                <span className="text-xs text-muted-foreground">{it.foot}</span>
+              </button>
+              {s.toggleProps ? (
+                <button type="button" {...s.toggleProps} className="mt-1 w-full text-left text-xs text-muted-foreground underline-offset-2 hover:underline">
+                  {s.open ? "Hide" : "Show"} {s.count} sub-accounts
+                </button>
+              ) : null}
+            </div>
+          )}
+        />
+      </Section>
+
+      <Section title="One top, nothing beneath it">
+        <TierMap label="One top" items={[{ id: "only", title: "Be the default rate API for small carriers", kicker: "Company", value: 0.41, tone: "danger" }]} tops={["only"]} topsLabel="Company" onSelect={() => {}} />
+      </Section>
+
+      <Section title="Many tops, one open">
+        <TierMap
+          label="Many tops"
+          items={[
+            ...Array.from({ length: 7 }, (_, i) => ({ id: `t${i}`, title: `Company goal ${i + 1}`, kicker: "Company", value: (i + 1) / 8 })),
+            ...Array.from({ length: 4 }, (_, i) => ({ id: `t3k${i}`, parent: "t3", title: `Team goal ${i + 1}`, kicker: "Team", value: 0.2 * (i + 1) })),
+          ]}
+          tops={Array.from({ length: 7 }, (_, i) => `t${i}`)}
+          topsLabel="Company"
+          childrenLabel="serving it"
+          defaultOpen={["t3"]}
+          onSelect={() => {}}
+        />
+      </Section>
+
+      <Section title="Very long words" note="A title, a kicker and a foot with no spaces to break on, and a long sentence.">
+        <TierMap
+          label="Long words"
+          items={[
+            {
+              id: "l1",
+              title: "An exceptionally long goal that nobody had the heart to shorten, which goes on and on past the end of any sensible line of a card",
+              kicker: "A_kicker_that_is_a_single_word_much_too_long_for_its_line",
+              foot: "https://example.com/an/extremely/long/path/that/cannot/break/anywhere/at/all/ever",
+              value: 0.31,
+              by: person("Wolfeschlegelsteinhausenbergerdorff Smith"),
+            },
+            { id: "l2", parent: "l1", title: "Short", value: 0.9 },
+          ]}
+          tops={["l1"]}
+          defaultOpen={["l1"]}
+          onSelect={() => {}}
+        />
+      </Section>
+
+      <Section title="Narrow (320 px)" note="Tiers stack, cards go full width, the lines are a rail down the left.">
+        <div className="w-80 max-w-full">
+          <TierMap label="Narrow" items={GOALS} tops={GOAL_TOPS} topsLabel="Company" childrenLabel="serving it" defaultOpen={["c1", "s1"]} onSelect={() => {}} unparentedNote={note} />
+        </div>
+      </Section>
+
+      <Section title="Wide (1200 px)" note="A tier of six cards sits in one row with an elbow from its parent to each.">
+        <div className="w-[1200px] max-w-full">
+          <TierMap label="Wide" items={GOALS} tops={GOAL_TOPS} topsLabel="Company" childrenLabel="serving it" defaultOpen={["c1"]} onSelect={() => {}} />
+        </div>
+      </Section>
+
+      <Section title="A loop and a missing parent" note="a1 and a2 name each other: the first in the list becomes the top. A card whose parent is not in the list sits under nothing.">
+        <TierMap
+          label="Odd data"
+          items={[
+            { id: "a1", parent: "a2", title: "Names a2 as its parent" },
+            { id: "a2", parent: "a1", title: "Names a1 as its parent" },
+            { id: "a3", parent: "gone", title: "Its parent is not in the list" },
+            { id: "a4", parent: "a4", title: "Names itself" },
+          ]}
+          tops={["a1"]}
+          defaultOpen={["a1"]}
+          topsLabel="Tops"
+          unparentedLabel="Under nothing"
+          onSelect={() => {}}
+        />
+      </Section>
+
+      <Section title="Read-only" note="No onSelect: pressing a card opens its tier; a leaf does nothing.">
+        <TierMap label="Read-only" items={GOALS.slice(0, 11)} tops={GOAL_TOPS} topsLabel="Company" childrenLabel="serving it" />
+      </Section>
+
+      <Section title="Empty">
+        <TierMap label="Empty" items={[]} />
+      </Section>
+
+      <Section title="Loading">
+        <TierMap label="Loading" loading items={[]} />
+      </Section>
+
+      <Section title="Failed">
+        <TierMap label="Failed" error="The goals could not be loaded." onRetry={() => {}} items={[]} />
+      </Section>
+    </div>
+  );
+}

package/registry/blocks/tier-map/index.js

@@ -0,0 +1,24 @@
+// The TierMap block — `makersclaw add tier-map`. Fixed: compose it through
+// its props (README.md beside this file). The model's helpers are plain
+// functions; they work on the server too.
+export { TierMap, TierCard } from "./tier-map";
+export {
+  CARD_REM,
+  MAX_COLUMNS,
+  NEVER,
+  TONES,
+  barOf,
+  buildTierModel,
+  centreOf,
+  countText,
+  elbowOf,
+  fitKey,
+  neighbour,
+  openPath,
+  pathTo,
+  siblingsOf,
+  thresholdRem,
+  tiersOf,
+  togglePath,
+  toneOf,
+} from "./tier-model";