tsquare 0.5.0 → 0.6.0

package/dist/flows.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Flow arrows: `flow <from> -> <to> "label"` lines drawn between elements or screens,
+ * on top of the board. Element positions come from the measuring pass (anchors.tsx);
+ * screens' boxes come from boardLayout. Routing:
+ *   - the next screen to the right: right side to left side, turning in the gap between them
+ *   - skipping screens or going back: through the gaps and a lane under the screens, so lines
+ *     never cross a screen they don't belong to
+ *   - within one screen: the sides facing each other
+ * Crossings between flows aren't avoided. Two flows at the same height between neighboring screens
+ * share a narrow gap: ends and labels move apart where they can, but a crowded gap can still overlap.
+ */
+import { type ReactNode } from "react";
+import type { Spec } from "@json-render/core";
+import { type Palette } from "./colors.js";
+import type { Rect } from "./anchors.js";
+type Pt = {
+    x: number;
+    y: number;
+};
+type Side = "left" | "right" | "top" | "bottom";
+export declare const flowMargin: (flows: number) => number;
+export interface Route {
+    from: Side;
+    to: Side;
+    points: Pt[];
+    lane?: number;
+}
+/** Where a flow's ends are: each end's box and the frame of the screen it's in (a screen end is its own frame). */
+export interface FlowBoxes {
+    from: Rect;
+    to: Rect;
+    fromScreen: Rect;
+    toScreen: Rect;
+}
+/**
+ * The sides and the right-angle path for a flow. Lines stay off screens they don't belong to:
+ *   - same screen: right/left or top/bottom between the two elements
+ *   - a neighboring screen: across the gap between the two screens
+ *   - skipping over a screen: down the gap beside the source screen, along a lane under all the
+ *     screens, and up the gap beside the target
+ * `lane` and `track` count the flows already using lanes and gaps, so each gets its own.
+ */
+export declare function route(ends: FlowBoxes, screens: Rect[], gap: number, lane?: number, track?: number, nudge?: number): Route;
+/**
+ * The SVG path for a routed flow, and a point a fraction along it (for the label). `pts` are the
+ * route's points, trimmed for the markers. "straight" and "curved" only cut across when the route
+ * stays beside its screens; a route through the lane under the screens keeps its corners (plain for
+ * straight, softened for curved), so it never crosses a screen it doesn't connect.
+ */
+export declare function linePath(r: Route, pts: Pt[], line: string): {
+    d: string;
+    at: (t: number) => Pt;
+};
+/** A label pill's width, estimated from its text (labels are 12px semibold). */
+export declare const flowLabelWidth: (label: string) => number;
+/** A flow's line color: gray, an accent name, a hex color, or the board's accent. */
+export declare function flowColor(color: unknown, palette: Palette): string;
+/** The top layer with every flow: one SVG for the lines and markers, labels as text pills. */
+export declare function flowLayer(spec: Spec, flows: {
+    key: string;
+    ends: FlowBoxes;
+}[], screens: Rect[], gap: number, palette: Palette, size: {
+    width: number;
+    height: number;
+}): ReactNode;
+export {};

package/dist/index.js

@@ -20,18 +20,19 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-B6KIVOSH.js";
+} from "./chunks/chunk-HDSKRKDL.js";
 
 // src/share.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";
 var MAX_SHARED_TEXT = 64e3;
 function encodeWireframe(text) {
-  return "z" + deflateRawSync(Buffer.from(text, "utf8"), { level: 9 }).toString("base64url");
+  return "y" + deflateRawSync(Buffer.from(text, "utf8"), { level: 9 }).toString("base64url");
 }
 function decodeWireframe(data) {
-  if (!data.startsWith("z")) throw new Error(`unknown encoding "${data.slice(0, 1)}" (expected a "z" prefix)`);
+  const prefix = data.slice(0, 1);
+  if (prefix !== "y" && prefix !== "z") throw new Error(`unknown encoding "${prefix}" (expected a "y" or "z" prefix)`);
   const text = inflateRawSync(Buffer.from(data.slice(1), "base64url"), { maxOutputLength: MAX_SHARED_TEXT }).toString("utf8");
-  return upgradeWireframe(text, { fromLink: true });
+  return upgradeWireframe(text, { fromLink: prefix === "z" });
 }
 export {
   DEVICES,

package/dist/playground/index.d.ts

@@ -16,6 +16,7 @@
  *   GET  /api/prompt         the model prompt
  *   POST /api/render         wireframe text → { issues, svg?, width?, height?, items? } (items: where each screen sits)
  *   POST /api/png?scale=2    wireframe text → image/png
+ *   (both take ?flows=0 to leave out flow arrows)
  */
 import { type IncomingMessage, type ServerResponse } from "node:http";
 /** Problems with the reference examples: a component without an example or group, or an example that doesn't compile. */

package/dist/playground/index.html

@@ -100,6 +100,13 @@
   .btn.icon-only { padding: 5px 7px; }
   .btn.quiet { border-color: transparent; background: none; }
   .btn.quiet:hover { background: var(--fill); }
+  .switch { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; padding: 4px 6px; border: 0; background: none; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: inherit; white-space: nowrap; }
+  .switch[hidden] { display: none; }
+  .switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
+  .switch .track { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--line-strong); transition: background .15s; }
+  .switch .knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
+  .switch[aria-checked="true"] .track { background: var(--primary); }
+  .switch[aria-checked="true"] .knob { transform: translateX(12px); }
 
   main { flex: 1; min-height: 0; display: flex; }
   .view { flex: 1; min-width: 0; display: none; }
@@ -259,6 +266,7 @@
         <button class="btn icon-only" id="zoom-out" type="button" aria-label="Zoom out" title="Zoom out"><span data-icon="zoom-out"></span></button>
         <button class="btn zoom-level" id="zoom-fit" type="button" title="Fit to the window">100%</button>
         <button class="btn icon-only" id="zoom-in" type="button" aria-label="Zoom in" title="Zoom in"><span data-icon="zoom-in"></span></button>
+        <button class="switch" id="flows" type="button" role="switch" aria-checked="true" title="Show or hide the flow arrows" hidden><span class="track"><span class="knob"></span></span>Flows</button>
         <span class="grow"></span>
         <div class="menu-wrap">
           <button class="btn" id="share" type="button" aria-haspopup="menu" aria-expanded="false" title="Copy a link" disabled><span data-icon="link"></span><span class="label-wide">Copy link</span></button>

package/dist/playground/index.js

@@ -13,7 +13,7 @@ import {
   renderWireframeSvg,
   takesUniversalProps,
   wireframePrompt
-} from "../chunks/chunk-B6KIVOSH.js";
+} from "../chunks/chunk-HDSKRKDL.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";
@@ -75,7 +75,7 @@ function languageData() {
 
 // src/playground/reference.ts
 var GROUPS = [
-  { name: "Canvas", components: ["Board", "Screen", "Note"] },
+  { name: "Canvas", components: ["Board", "Screen", "Note", "Flow"] },
   { name: "Layout", components: ["Stack", "Grid", "Card", "Accordion", "Divider", "Spacer"] },
   { name: "Content", components: ["Heading", "Text", "Bullets", "Image", "Chart", "Icon", "Avatar", "Badge"] },
   { name: "Controls", components: ["Button", "Input", "Checkbox", "Radio", "Toggle", "Select", "Slider", "Progress", "Calendar"] },
@@ -110,6 +110,23 @@ var EXAMPLES = {
   note "blue" color=blue width=130
   note "pink" color=pink width=130
   note "green" color=green width=130`,
+  Flow: `board "Sign-in flow"
+  screen custom "Sign in" width=260 height=300 #signin
+    heading "Welcome back" level=3
+    input "Email"
+    button primary "Sign in" fullWidth #submit
+  screen custom "Home" width=260 height=300 #home
+    stack row justify=between align=center
+      heading "Home" level=3
+      button ghost leadingIcon=settings #gear
+    text lines=3
+  screen custom "Settings" width=260 height=300 #settings
+    heading "Settings" level=3
+    toggle "Notifications" on
+    button secondary "Sign out" #signout
+  flow submit -> home "Sign in"
+  flow gear -> settings
+  flow signout -> signin "Sign out" dashed start=dot`,
   Stack: `board
   screen custom width=560 height=300 padding=0
     stack row grow
@@ -262,6 +279,12 @@ var EXAMPLES = {
       button primary "Next" trailingIcon=chevron-right
     button primary "Full width" fullWidth
     text "With a board accent, primary buttons fill with it and ghost buttons use it for text." sm muted
+  screen custom "tooltip" width=380 height=170
+    spacer size=34
+    stack row gap=8
+      button secondary "Draft" tooltip="Saves without publishing"
+      button primary "Publish"
+    text "Any element inside a screen can take tooltip=." sm muted
   screen custom "menu and open" width=380 height=300
     stack row justify=between align=center
       heading "Notes" level=3
@@ -475,7 +498,7 @@ function reference() {
   ).then((components) => ({ groups: GROUPS, components }));
   return referenceCache;
 }
-var EXAMPLE_ORDER = ["sign-in", "dashboard", "checkout", "states", "notes-mobile", "notes-web"];
+var EXAMPLE_ORDER = ["sign-in", "dashboard", "checkout", "sign-up-flow", "states", "notes-mobile", "notes-web"];
 var rank = (name) => EXAMPLE_ORDER.indexOf(name) + 1 || EXAMPLE_ORDER.length + 1;
 async function examples() {
   const dir = path.join(packageRoot, "examples");
@@ -528,15 +551,16 @@ function createPlaygroundHandler() {
     }
     if (req.method === "POST" && (url.pathname === "/api/render" || url.pathname === "/api/png")) {
       const { spec, issues } = compileWireframe(await readBody(req));
+      const flows = url.searchParams.get("flows") !== "0";
       if (url.pathname === "/api/render") {
         if (!spec || issues.length) return json(res, 200, { issues });
-        const { width, height, items } = boardLayout(spec);
-        return json(res, 200, { issues, svg: await renderWireframeSvg(spec, { skipValidation: true }), width, height, items });
+        const { width, height, items } = boardLayout(spec, { flows });
+        return json(res, 200, { issues, svg: await renderWireframeSvg(spec, { skipValidation: true, flows }), width, height, items });
       }
       if (!spec || issues.length) return json(res, 400, { issues });
       const scale = Math.min(4, Math.max(1, Number(url.searchParams.get("scale") ?? 2)));
       res.writeHead(200, { "content-type": "image/png" });
-      res.end(await renderWireframePng(spec, { skipValidation: true, scale }));
+      res.end(await renderWireframePng(spec, { skipValidation: true, scale, flows }));
       return true;
     }
     return false;