Design mode

Press ⌥D and the calendar opens its own design tool: a calendar-aware inspector, live spring tuning with slow motion, a guided tour of the craft pins, overlays for the grid's hidden geometry, and a theme picker that scores its own contrast. It ships on by default because it is the product pitch — and turns off with one prop.

The prop

<Kloq designMode />                  // default: on, with the hint pill
<Kloq designMode={{ hint: false }} />  // on, but no ⌥D hint pill
<Kloq designMode={false} />            // off entirely

The toggle follows the same keyboard-scope rules as everything else: ⌥D fires when the calendar owns the keyboard, or page-wide with globalShortcuts.

The panel

A single draggable panel — drop it on any corner, collapse it to a strip, open only the sections you need. Position and open sections persist per browser. Everything in it writes to the DOM directly; nothing re-renders the calendar per frame.

Tuning motion from code

The sliders drive a small registry the whole engine reads from, and it is exported — set a house spring once and every settle, cancel and nudge follows it:

import { setMotion, getMotion, resetMotion, subscribeMotion } from "kloq";

setMotion({ drag: { stiffness: 500, damping: 34, ms: 280 } });
setMotion({ scale: 4 });            // quarter speed, every animation
setMotion({ reducedMotion: true }); // as if the OS asked for it
resetMotion();

Annotation pins

The calendar marks elements with data-craft attributes; the overlay finds them and renders authored notes beside them — "4px of intent", "Visible magnetism", "The weld", "Origin ghost". Ids present in the table but absent from the DOM are simply skipped, so a host that swapped a slot loses only that slot's pins.

The craft bus

Every drag publishes to craftBus at rAF cadence with zero React involvement — the inspector reads it imperatively, and so can you:

import { craftBus, type CraftEvent } from "@/components/kloq";

const off = craftBus.subscribe((e: CraftEvent) => {
  if (e.type === "drag:frame") {
    // e.frame: kind, id, velocity (px/s, smoothed),
    // rect, startMin/endMin (snapped), dayIndex, pointer
  }
  if (e.type === "drag:end") console.log("cancelled:", e.cancelled);
});

Events are drag:start, drag:frame, drag:end (with cancelled), and design-mode; craftBus.frame holds the last published frame, null when idle. DragKind is "create" | "move" | "resize-start" | "resize-end". Subscribers should write to refs or the DOM — never setState per frame.

The network panel

Design mode stays generic: an app that runs a simulated (or real) network can register a handle and the inspector grows a Network section — latency and failure-rate controls, in-flight count, last result. Nothing renders when no sim is registered.

import { registerNetworkSim, type NetworkSimHandle } from "@/components/kloq/design-mode";

registerNetworkSim(myHandle); // once at mount
registerNetworkSim(null);     // teardown

The handle exposes getLatency/setLatency, getFailureRate/setFailureRate, getInFlight, getLastResult, a subscribe, and optional getEnabled/setEnabled so design mode can switch the sim itself — register once, let the inspector drive.

The design-mode module

The full surface is importable on its own for custom tooling: DesignModeProvider / useDesignMode, DesignModeOverlay, DesignModeHint, KloqDesignMode, and the network-sim registry. You only need it for building surfaces of your own — ⌥D inside <Kloq> works with no imports at all.