makersclaw 0.2.0 → 0.3.0

package/registry/blocks/map/maplibre.js

@@ -0,0 +1,30 @@
+// The one door to MapLibre (maplibre-gl, BSD-3-Clause) and its React
+// binding (react-map-gl, MIT). Every file in this block reaches them
+// through here, and the blocks built on this one reach them through
+// MapView — never the packages directly.
+//
+// No server shim is needed: maplibre-gl 6 and react-map-gl 8 touch no
+// browser global while their modules load (checked in node), and the map
+// itself mounts only after the first effect (MapView's mount guard).
+//
+// Two things are passed explicitly instead of left to the libraries:
+//
+//   mapLib     react-map-gl would otherwise load maplibre-gl with an
+//              import() of its own. Handing it the module we import here
+//              keeps the app one static bundle.
+//   WORKER_URL maplibre-gl 6 draws tiles in a Web Worker that it loads
+//              from a file beside its own module (import.meta.url). Inside
+//              an app bundle that URL is a build-time file:// path, so the
+//              worker would never load. It is loaded from jsDelivr instead,
+//              at exactly the version installed (getVersion()), so the
+//              worker and the page always match. A map already fetches its
+//              style, tiles and fonts at run time; this is one more file.
+//              Self-host it with MapView's `workerUrl` prop.
+import "maplibre-gl/dist/maplibre-gl.css";
+import * as maplibregl from "maplibre-gl";
+import { AttributionControl, Layer, Map as GLMap, Marker, Popup, Source } from "react-map-gl/maplibre";
+
+export const MAPLIBRE_VERSION = maplibregl.getVersion();
+export const WORKER_URL = `https://cdn.jsdelivr.net/npm/maplibre-gl@${MAPLIBRE_VERSION}/dist/maplibre-gl-worker.mjs`;
+
+export { AttributionControl, GLMap, Layer, Marker, Popup, Source, maplibregl };

package/registry/blocks/map/marks.jsx

@@ -0,0 +1,146 @@
+"use client";
+
+// What sits ON the map: a place's marker, a cluster, the popup card, the
+// list of places that share one spot. React in kit tokens — maplibre only
+// positions them (react-map-gl's Marker and Popup portal them in).
+import { IconButton, Item, cx } from "../../ui";
+import { DOT } from "./theme";
+
+// A soft halo behind the selected dot, one class per tone.
+const HALO = {
+  primary: "bg-primary/20",
+  success: "bg-success/20",
+  warning: "bg-warning/20",
+  destructive: "bg-destructive/20",
+  info: "bg-info/20",
+  "chart-1": "bg-chart-1/20",
+  "chart-2": "bg-chart-2/20",
+  "chart-3": "bg-chart-3/20",
+  "chart-4": "bg-chart-4/20",
+  "chart-5": "bg-chart-5/20",
+  muted: "bg-muted-foreground/20",
+};
+
+/** A place: a dot in its tone (or the caller's own content), its name in
+ *  a small label on hover and when it is selected without a popup. */
+export function PointMark({ title, tone, selected, hovered, showLabel, focusable, custom, onHover }) {
+  // Its click is handled by the Marker around it (a native listener that
+  // runs before maplibre's map click); this button gives it a name, focus
+  // and Enter / Space.
+  const lifted = selected || hovered;
+  return (
+    // raw: a map marker is a hit target positioned on the canvas by
+    // maplibre; no kit part is a pin. Kit Button would force 44px boxes
+    // that hide the map under them.
+    <button
+      type="button"
+      tabIndex={focusable ? 0 : -1}
+      aria-label={title}
+      aria-pressed={selected}
+      data-lifted={lifted ? "" : undefined}
+      onMouseEnter={() => onHover(true)}
+      onMouseLeave={() => onHover(false)}
+      onFocus={() => onHover(true)}
+      onBlur={() => onHover(false)}
+      className={cx(
+        "group relative grid cursor-pointer place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        custom ? "min-h-7 min-w-7" : "size-7",
+      )}
+    >
+      {custom ?? (
+        <>
+          <span
+            aria-hidden="true"
+            className={cx(
+              "absolute inset-0 rounded-full transition-[transform,opacity] duration-150 motion-reduce:transition-none",
+              HALO[tone],
+              selected ? "scale-100 opacity-100" : "scale-50 opacity-0",
+            )}
+          />
+          <span
+            aria-hidden="true"
+            className={cx(
+              "relative block size-3.5 rounded-full shadow-sm ring-2 ring-background transition-transform duration-150 motion-reduce:transition-none",
+              DOT[tone],
+              selected ? "scale-125" : "group-hover:scale-125",
+            )}
+          />
+        </>
+      )}
+      {showLabel ? (
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute bottom-full left-1/2 mb-1 max-w-48 -translate-x-1/2 truncate whitespace-nowrap rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium text-popover-foreground shadow-sm"
+        >
+          {title}
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+/** Several places too close to tell apart at this zoom: a count. */
+export function ClusterMark({ count, label, holdsSelected }) {
+  const size = Math.round(32 + Math.min(20, Math.log2(count) * 4));
+  return (
+    // raw: a cluster is a positioned hit target on the canvas (see PointMark).
+    <button
+      type="button"
+      tabIndex={-1}
+      aria-label={label}
+      data-lifted={holdsSelected ? "" : undefined}
+      style={{ width: size, height: size }}
+      className={cx(
+        "grid cursor-pointer place-items-center rounded-full bg-primary text-xs font-semibold tabular-nums text-primary-foreground shadow-md",
+        "ring-4 ring-primary/20 outline-none transition-[box-shadow,transform] duration-150 hover:scale-105 hover:ring-primary/30",
+        "focus-visible:ring-ring motion-reduce:transition-none motion-reduce:hover:scale-100",
+        holdsSelected && "outline-2 outline-offset-2 outline-primary",
+      )}
+    >
+      {count > 999 ? `${Math.floor(count / 1000)}k` : count}
+    </button>
+  );
+}
+
+/** The popup's box: a kit-looking card with a close button. */
+export function PopupCard({ onClose, closeLabel = "Close", children }) {
+  return (
+    <div className="relative w-64 max-w-[calc(100vw-3rem)] rounded-lg border border-border bg-popover p-3 text-sm text-popover-foreground shadow-lg">
+      <IconButton icon="x" label={closeLabel} size="sm" onClick={onClose} className="absolute right-1 top-1 text-muted-foreground" />
+      {children}
+    </div>
+  );
+}
+
+/** The popup's words when the caller brings none: name, meta line, aside. */
+export function DefaultPopup({ title, meta, aside }) {
+  return (
+    <div className="grid gap-1 pr-8">
+      <p className="font-medium leading-5">{title}</p>
+      {meta ? <div className="text-muted-foreground">{meta}</div> : null}
+      {aside ? <div className="pt-1">{aside}</div> : null}
+    </div>
+  );
+}
+
+/** Places that share one spot (a building, a campus): pick one. */
+export function StackList({ rows, plural, onPick }) {
+  return (
+    <div className="grid gap-1">
+      <p className="pr-8 text-xs text-muted-foreground">
+        {rows.length} {plural} at this spot
+      </p>
+      <div className="-mx-1 max-h-56 overflow-y-auto">
+        {rows.map((r) => (
+          <Item key={r.id} size="sm" title={r.title} media={<Dot tone={r.tone} />} onClick={() => onPick(r.id)} className="rounded-md" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** The tone dot the list rows and cards lead with. */
+export function Dot({ tone, missing }) {
+  if (missing) return <span aria-hidden="true" className="block size-3 shrink-0 rounded-full border border-dashed border-muted-foreground" />;
+  return <span aria-hidden="true" className={cx("block size-3 shrink-0 rounded-full", DOT[tone])} />;
+}

package/registry/blocks/map/theme.js

@@ -0,0 +1,142 @@
+// The map in the workspace theme — the one place its look is mapped.
+//
+// Three layers of look, three answers:
+//
+//   the tiles     a style URL. The default is OpenFreeMap (free, no key,
+//                 OpenStreetMap data): "positron" in a light scheme,
+//                 "dark" in a dark one, chosen from the scheme in effect
+//                 where the map sits and swapped when it changes.
+//   our marks     markers, clusters, popups, the list and the controls are
+//                 React, in the kit, in token classes — they follow the
+//                 theme like any other part of the page.
+//   areas         polygons drawn BY maplibre need concrete colours, so a
+//                 tone ("primary", "chart-2") is resolved from the CSS
+//                 variable at run time (resolveTones) and again when the
+//                 scheme changes — the sketch-canvas palette trick.
+//
+// maplibre's own chrome (the popup's box and tip, the attribution line,
+// the canvas focus ring) comes from its unlayered stylesheet, which beats
+// any Tailwind utility; the classes in CHROME end in `!` for that reason
+// (the same fix as sketch-canvas/theme.js).
+
+/** OpenFreeMap's styles (https://openfreemap.org), checked 2026-09-23. */
+export const MAP_STYLES = {
+  positron: "https://tiles.openfreemap.org/styles/positron",
+  liberty: "https://tiles.openfreemap.org/styles/liberty",
+  bright: "https://tiles.openfreemap.org/styles/bright",
+  "dark": "https://tiles.openfreemap.org/styles/dark",
+  fiord: "https://tiles.openfreemap.org/styles/fiord",
+};
+
+/** What `styleUrl` defaults to: a light and a dark style. */
+export const DEFAULT_STYLE = { "light": MAP_STYLES.positron, "dark": MAP_STYLES.dark }; // keys quoted: the block lint reads `dark:` as a Tailwind variant
+
+/** The URL for a scheme, from a string (one style for both) or { light, dark }. */
+export function styleFor(styleUrl, scheme) {
+  if (typeof styleUrl === "string" && styleUrl) return styleUrl;
+  const s = styleUrl && typeof styleUrl === "object" ? styleUrl : DEFAULT_STYLE;
+  return (scheme === "dark" ? s.dark ?? s.light : s.light ?? s.dark) ?? DEFAULT_STYLE[scheme === "dark" ? "dark" : "light"];
+}
+
+/** The tones a marker, cluster or area may take: token names, never colours. */
+export const TONES = ["primary", "success", "warning", "destructive", "info", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "muted"];
+
+// Tailwind needs whole class names in the source: one per tone.
+export const DOT = {
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+  info: "bg-info",
+  "chart-1": "bg-chart-1",
+  "chart-2": "bg-chart-2",
+  "chart-3": "bg-chart-3",
+  "chart-4": "bg-chart-4",
+  "chart-5": "bg-chart-5",
+  muted: "bg-muted-foreground",
+};
+
+export const toneOrDefault = (tone) => (Object.hasOwn(DOT, tone ?? "") ? tone : "primary");
+
+/** maplibre's chrome, pointed at tokens. */
+export const CHROME = [
+  // the canvas: our focus ring, no browser outline
+  "[&_.maplibregl-canvas]:outline-none!",
+  "[&_.maplibregl-canvas-container:has(.maplibregl-canvas:focus-visible)]:ring-2!",
+  "[&_.maplibregl-canvas-container:has(.maplibregl-canvas:focus-visible)]:ring-inset!",
+  "[&_.maplibregl-canvas-container:has(.maplibregl-canvas:focus-visible)]:ring-ring!",
+  // popups: the box and tip are ours (MapPopup draws a kit card)
+  "[&_.maplibregl-popup-content]:bg-transparent!",
+  "[&_.maplibregl-popup-content]:p-0!",
+  "[&_.maplibregl-popup-content]:shadow-none!",
+  "[&_.maplibregl-popup-content]:rounded-none!",
+  "[&_.maplibregl-popup-tip]:hidden!",
+  "[&_.maplibregl-popup]:z-10!",
+  // the attribution line (OpenStreetMap's licence asks for it: it stays)
+  "[&_.maplibregl-ctrl-attrib]:bg-background/80!",
+  "[&_.maplibregl-ctrl-attrib]:text-muted-foreground!",
+  "[&_.maplibregl-ctrl-attrib]:text-[10px]!",
+  "[&_.maplibregl-ctrl-attrib]:leading-4!",
+  "[&_.maplibregl-ctrl-attrib]:rounded-tl-md!",
+  "[&_.maplibregl-ctrl-attrib]:px-1.5!",
+  "[&_.maplibregl-ctrl-attrib_a]:text-muted-foreground!",
+  "[&_.maplibregl-ctrl-attrib_a:hover]:text-foreground!",
+  "[&_.maplibregl-ctrl-bottom-right]:z-[1]!",
+  // markers sit above the canvas, the hovered/selected one above the rest
+  "[&_.maplibregl-marker:has([data-lifted])]:z-[2]!",
+].join(" ");
+
+// ---- the browser half -------------------------------------------------------
+
+/** The workspace's light or dark where `root` sits: a data-theme on an
+ *  ancestor, else the computed color-scheme, else the OS setting. */
+export function schemeOf(root) {
+  if (typeof window === "undefined" || !root) return "light";
+  const scoped = root.closest?.("[data-theme]")?.getAttribute("data-theme");
+  if (scoped === "light" || scoped === "dark") return scoped;
+  const cs = getComputedStyle(root).colorScheme || "";
+  if (/\bdark\b/.test(cs) && !/\blight\b/.test(cs)) return "dark";
+  if (/\blight\b/.test(cs) && !/\bdark\b/.test(cs)) return "light";
+  return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+const byte = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+
+/** Each tone → a concrete colour ("#rrggbb"), read from the CSS variables
+ *  in effect at `root`. A probe takes `color: var(--color-<token>)`; the
+ *  browser resolves var(), light-dark() and color-mix(); a 1×1 canvas
+ *  turns whatever syntax comes back into bytes. */
+export function resolveTones(root, tones = TONES) {
+  const out = {};
+  if (typeof document === "undefined" || !root) return out;
+  const probe = document.createElement("span");
+  probe.setAttribute("aria-hidden", "true");
+  probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none";
+  root.appendChild(probe);
+  const canvas = document.createElement("canvas");
+  canvas.width = 1;
+  canvas.height = 1;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  try {
+    for (const tone of tones) {
+      probe.style.color = "";
+      probe.style.color = `var(--color-${tone === "muted" ? "muted-foreground" : tone})`;
+      const computed = getComputedStyle(probe).color;
+      if (!computed || !ctx) continue;
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = "transparent";
+      ctx.fillStyle = computed;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+      if (a) out[tone] = "#" + byte(r) + byte(g) + byte(b);
+    }
+  } finally {
+    probe.remove();
+  }
+  return out;
+}
+
+/** Does the viewer ask for less motion? Camera moves then jump. */
+export function prefersReducedMotion() {
+  return typeof window !== "undefined" && Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
+}

package/registry/blocks/menubar/README.md

@@ -0,0 +1,109 @@
+# Menubar
+
+A desktop app's menu bar: File, Edit, View, Help. Each menu is the kit's
+Menu panel, so it takes the same `items` — actions with shortcuts,
+checkboxes, radio groups, labelled groups, separators and submenus. Click
+a menu to open it; once one is open, hovering another switches to it.
+ArrowLeft and ArrowRight move along the bar, and open the neighbour when
+a menu is open. ArrowDown, Enter or Space open a menu at its first item.
+Escape closes it and puts focus back on its name. The bar is one Tab
+stop (roving focus), with the `menubar` and `menuitem` roles. Below the
+`md` breakpoint the bar is one menu button; each menu is a submenu in it
+that unfolds in place.
+
+```jsx
+import { Menubar } from "../components/blocks/menubar";   // a Makersclaw app ("./blocks/menubar" from components/)
+import { Menubar } from "@/components/makersclaw/blocks/menubar";   // a shadcn project
+```
+
+It is a client component: render it from a `"use client"` component.
+
+## The data
+
+`menus` is the bar, in order:
+
+```js
+{
+  label: "View",            // the name in the bar
+  items: [ … ],             // the menu: exactly Menu's `items` (components/ui/menu.jsx)
+  icon?: "eye",             // shown beside the name in the phone menu only
+  key?: "view",             // default: made from the position and label
+}
+```
+
+`items` entries, any mix:
+
+```js
+{ label: "Save", onSelect, shortcut: "⌘S", icon?, tone?: "danger", disabled?, description? }   // an action: closes the menu
+{ type: "checkbox", label: "Show ruler", checked, onCheckedChange(next) }                      // stays open
+{ type: "radio", label: "Zoom", value, onValueChange(value), options: ["75%", "100%"] }        // stays open
+{ group: "Share", items: [ … ] }                                                              // a labelled group
+{ type: "separator" }
+{ label: "Export", items: [ … ] }                                                             // a submenu
+```
+
+A falsy entry is skipped, so `cond && { … }` works. A menu with no items
+is left out of the bar. A shortcut is only drawn: the app binds the key
+itself.
+
+## Props
+
+- `menus` — the bar, as above.
+- `label` — what a screen reader calls the bar, default `"Menu bar"`.
+  Name it after what it drives: `"Document"`.
+- `menuLabel` — the phone's menu button, default `"Menu"`.
+- `className` — layout around it (width, margin). Never colour.
+
+## Example
+
+```jsx
+// components/Editor.jsx — client: the bar over the document
+"use client";
+import { useState } from "react";
+import { toast } from "./ui";
+import { Menubar } from "./blocks/menubar";
+
+export default function Editor({ doc, onSave }) {
+  const [ruler, setRuler] = useState(true);
+  const [zoom, setZoom] = useState("100%");
+  return (
+    <div className="grid gap-4">
+      <Menubar
+        label="Document"
+        menus={[
+          {
+            label: "File",
+            items: [
+              { label: "Save", shortcut: "⌘S", onSelect: async () => ((await onSave(doc)).ok ? toast.success("Saved") : toast.error("Could not save")) },
+              { label: "Export", items: [{ label: "PDF", onSelect: () => {} }, { label: "Markdown", onSelect: () => {} }] },
+            ],
+          },
+          {
+            label: "View",
+            items: [
+              { type: "checkbox", label: "Show ruler", checked: ruler, onCheckedChange: setRuler },
+              { type: "separator" },
+              { type: "radio", label: "Zoom", value: zoom, onValueChange: setZoom, options: ["75%", "100%", "150%"] },
+            ],
+          },
+        ]}
+      />
+      {/* the document */}
+    </div>
+  );
+}
+```
+
+## What it will not do
+
+- Bind shortcuts: `shortcut` is a hint drawn in the menu. Listen for the
+  key in your component when it should work without the menu.
+- Hold state: checkboxes and radios are controlled — keep `checked` and
+  `value` in your component, as above.
+- Be a site's navigation: links belong in the navigation-menu block.
+- Open on hover before a click: like a desktop app, the first menu opens
+  on a click or a key.
+
+A menubar it cannot be is your own component in `components/`, built from
+the kit — not an edit to this block. Its files are fixed: `npm run check`
+refuses a change, and `makersclaw add menubar` restores them.

package/registry/blocks/menubar/block.json

@@ -0,0 +1,10 @@
+{
+  "name": "menubar",
+  "title": "Menubar",
+  "description": "A desktop app's menu bar — File, Edit, View, Help — each a menu of actions with shortcuts, checkboxes, radio groups and submenus; click to open, hover to switch, arrow keys along the bar; one menu button on a phone.",
+  "useWhen": "A document-style tool with many commands grouped by kind: an editor, a canvas, a spreadsheet, an admin console that mimics a desktop app. Not for a site's navigation (a navigation menu) or one record's actions (a menu on the row).",
+  "tags": ["menubar", "menu bar", "menu", "file menu", "edit menu", "view menu", "commands", "shortcuts", "editor", "toolbar", "desktop", "dropdown"],
+  "exports": ["Menubar"],
+  "files": ["index.js", "menubar.jsx"],
+  "requires": []
+}

package/registry/blocks/menubar/demo.jsx

@@ -0,0 +1,128 @@
+"use client";
+
+// The Menubar over a document editor — the gallery's and the smoke test's
+// surface. Not installed into apps: `makersclaw add menubar` lays index.js
+// and menubar.jsx only. Commands only report themselves under the page;
+// "Show ruler", "Word count" and "Zoom" change the page for real.
+import { useState } from "react";
+import { Badge, Card } from "../components/ui";
+import { Menubar } from "../components/blocks/menubar";
+
+const TEXT = [
+  "Northwind closed the quarter at 118% of plan, carried by three enterprise renewals and a pricing change that lifted average contract value by a fifth.",
+  "For Q4 we propose two hires in customer success, a partner programme with the two agencies already reselling us, and a freeze on new paid channels until payback drops under nine months.",
+];
+const WORDS = TEXT.join(" ").split(/\s+/).length;
+const ZOOMS = ["75%", "100%", "125%", "150%"];
+
+export default function MenubarDemo() {
+  const [ruler, setRuler] = useState(true);
+  const [count, setCount] = useState(false);
+  const [zoom, setZoom] = useState("100%");
+  const [last, setLast] = useState(null);
+  const run = (name) => () => setLast(name);
+
+  const menus = [
+    {
+      label: "File",
+      icon: "file",
+      items: [
+        { label: "New document", shortcut: "⌘N", onSelect: run("New document") },
+        { label: "Open…", shortcut: "⌘O", onSelect: run("Open") },
+        {
+          label: "Open recent",
+          items: [
+            { label: "Q3 board memo", onSelect: run("Open Q3 board memo") },
+            { label: "Hiring plan 2027", onSelect: run("Open Hiring plan 2027") },
+            { label: "Pricing page draft", onSelect: run("Open Pricing page draft") },
+          ],
+        },
+        { type: "separator" },
+        { label: "Save", shortcut: "⌘S", onSelect: run("Save") },
+        { label: "Save as…", shortcut: "⇧⌘S", onSelect: run("Save as") },
+        {
+          label: "Export",
+          icon: "download",
+          items: [
+            { label: "PDF", onSelect: run("Export as PDF") },
+            { label: "Word (.docx)", onSelect: run("Export as Word") },
+            { label: "Markdown", onSelect: run("Export as Markdown") },
+          ],
+        },
+        { type: "separator" },
+        { label: "Print…", shortcut: "⌘P", onSelect: run("Print") },
+        { label: "Move to trash", icon: "trash", tone: "danger", onSelect: run("Move to trash") },
+      ],
+    },
+    {
+      label: "Edit",
+      icon: "pencil",
+      items: [
+        { label: "Undo", shortcut: "⌘Z", onSelect: run("Undo") },
+        { label: "Redo", shortcut: "⇧⌘Z", onSelect: run("Redo") },
+        { type: "separator" },
+        { label: "Cut", shortcut: "⌘X", onSelect: run("Cut") },
+        { label: "Copy", shortcut: "⌘C", onSelect: run("Copy") },
+        { label: "Paste", shortcut: "⌘V", onSelect: run("Paste") },
+        { label: "Paste without formatting", shortcut: "⌥⇧⌘V", onSelect: run("Paste without formatting"), disabled: true },
+        { type: "separator" },
+        { label: "Find and replace", shortcut: "⌘F", onSelect: run("Find and replace") },
+        { label: "Select all", shortcut: "⌘A", onSelect: run("Select all") },
+      ],
+    },
+    {
+      label: "View",
+      icon: "eye",
+      items: [
+        { type: "checkbox", label: "Show ruler", checked: ruler, onCheckedChange: setRuler, shortcut: "⌘R" },
+        { type: "checkbox", label: "Word count", checked: count, onCheckedChange: setCount, shortcut: "⇧⌘C" },
+        { type: "separator" },
+        { type: "radio", label: "Zoom", value: zoom, onValueChange: setZoom, options: ZOOMS },
+        { type: "separator" },
+        { label: "Full screen", shortcut: "⌃⌘F", onSelect: run("Full screen") },
+      ],
+    },
+    {
+      label: "Help",
+      icon: "info",
+      items: [
+        { label: "Keyboard shortcuts", shortcut: "⌘/", onSelect: run("Keyboard shortcuts") },
+        { label: "What's new", onSelect: run("What's new") },
+        { type: "separator" },
+        { label: "Contact support", icon: "mail", onSelect: run("Contact support") },
+      ],
+    },
+  ];
+
+  return (
+    <div className="grid gap-4">
+      <Menubar menus={menus} label="Document" />
+      <Card className="overflow-hidden p-0">
+        {ruler ? (
+          <div aria-hidden="true" className="flex h-6 items-end border-b border-border bg-muted px-6">
+            {Array.from({ length: 24 }, (_, i) => (
+              <span key={i} className={i % 4 === 0 ? "h-3 flex-1 border-l border-muted-foreground pl-0.5 text-2xs leading-none text-muted-foreground" : "h-1.5 flex-1 border-l border-border"}>
+                {i % 4 === 0 ? i / 4 : null}
+              </span>
+            ))}
+          </div>
+        ) : null}
+        <article className="grid gap-3 p-6" style={{ fontSize: zoom }}>
+          <h2 className="text-[1.25em] font-semibold leading-tight">Q3 board memo</h2>
+          {TEXT.map((p) => (
+            <p key={p} className="text-[0.875em] leading-relaxed text-muted-foreground">
+              {p}
+            </p>
+          ))}
+        </article>
+        <div className="flex flex-wrap items-center gap-2 border-t border-border px-6 py-2 text-xs text-muted-foreground">
+          <Badge>{zoom}</Badge>
+          {count ? <span data-nums>{WORDS} words</span> : null}
+          <span className="ml-auto" aria-live="polite">
+            {last ? `Ran: ${last}` : "Pick a command from the bar"}
+          </span>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/registry/blocks/menubar/index.js

@@ -0,0 +1,4 @@
+// The Menubar block — `makersclaw add menubar`. Fixed: compose it through
+// its props (README.md beside this file); a menubar it cannot be is your
+// own component in components/.
+export { Menubar } from "./menubar";