@heyramzi/ui 1.54.2 → 2.0.0

package/src/canvas/screen/ScreenCard.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { NodeProps } from "@xyflow/svelte";
+import ScreenBody from "./ScreenBody.svelte";
+import type { ScreenLabels } from "./labels.js";
+import { SCREEN_WIDTH } from "./types.js";
+import "./screen.css";
+
+// The Screen card with its own frame, for a host that has none. A host with a card frame of
+// its own wraps `ScreenBody` in it instead.
+
+// =========================
+// TYPES
+// =========================
+interface Props extends NodeProps {
+	labels?: Partial<ScreenLabels>;
+}
+
+// =========================
+// PROPS
+// =========================
+let { id, data, selected, width, labels }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class="cv-frame" class:is-selected={selected} style="width:{width ?? SCREEN_WIDTH}px">
+	<ScreenBody {id} {data} {labels} />
+</div>

package/src/canvas/screen/glyphs/button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 4h12a6 6 0 0 1 0 12H8A6 6 0 0 1 8 4z"/></svg>

package/src/canvas/screen/glyphs/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l6 6M9 3L3 9"/></svg>

package/src/canvas/screen/glyphs/down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 4.5L6 8l3.5-3.5"/></svg>

package/src/canvas/screen/glyphs/header.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h22a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/></svg>

package/src/canvas/screen/glyphs/hills.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60" fill="black"><path d="M26 44L42 22l10 12 8-8 14 18z"/></svg>

package/src/canvas/screen/glyphs/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2h20a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3z"/><path d="M1 16l8-7 6 5 5-4 7 6"/></svg>

package/src/canvas/screen/glyphs/input.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h20a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z"/><path d="M5 10h8"/></svg>

package/src/canvas/screen/glyphs/list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 4h26M1 10h26M1 16h18"/></svg>

package/src/canvas/screen/glyphs/modal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 20" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 1h18a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V5a4 4 0 0 1 4-4z"/><path d="M8 13h12"/></svg>

package/src/canvas/screen/glyphs/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2v8M2 6h8"/></svg>

package/src/canvas/screen/glyphs/up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 7.5L6 4l3.5 3.5"/></svg>

package/src/canvas/screen/glyphs.ts

@@ -0,0 +1,40 @@
+// The card's small drawings, as files a CSS mask paints in the current colour.
+
+import header from "./glyphs/header.svg";
+import button from "./glyphs/button.svg";
+import input from "./glyphs/input.svg";
+import image from "./glyphs/image.svg";
+import list from "./glyphs/list.svg";
+import modal from "./glyphs/modal.svg";
+import up from "./glyphs/up.svg";
+import down from "./glyphs/down.svg";
+import close from "./glyphs/close.svg";
+import plus from "./glyphs/plus.svg";
+import hills from "./glyphs/hills.svg";
+
+export type GlyphName =
+  | "header"
+  | "button"
+  | "input"
+  | "image"
+  | "list"
+  | "modal"
+  | "up"
+  | "down"
+  | "close"
+  | "plus"
+  | "hills";
+
+export const GLYPHS: Record<GlyphName, string> = {
+  header,
+  button,
+  input,
+  image,
+  list,
+  modal,
+  up,
+  down,
+  close,
+  plus,
+  hills,
+};

package/src/canvas/screen/labels.ts

@@ -0,0 +1,41 @@
+// The card's own words, each one a label. The package ships English; a host passes its own
+// translations to the card and keeps this module out of its bundle's way.
+
+import type { PartKind, ScreenMode } from "./types.js";
+
+export type ScreenLabels = {
+  name: string;
+  mode: string;
+  modes: Record<ScreenMode, string>;
+  kinds: Record<PartKind, string>;
+  addPart: string;
+  moveUp: string;
+  moveDown: string;
+  remove: string;
+  primary: string;
+  secondary: string;
+  addItem: string;
+  removeItem: string;
+};
+
+export const DEFAULT_SCREEN_LABELS: ScreenLabels = {
+  name: "Screen",
+  mode: "Mode",
+  modes: { wireframe: "Wireframe", mockup: "Mockup" },
+  kinds: {
+    header: "Header",
+    button: "Button",
+    input: "Input",
+    image: "Image",
+    list: "List",
+    modal: "Modal",
+  },
+  addPart: "Add part",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  remove: "Remove",
+  primary: "Primary",
+  secondary: "Secondary",
+  addItem: "Add item",
+  removeItem: "Remove item",
+};

package/src/canvas/screen/parts.ts

@@ -0,0 +1,164 @@
+// Pure edits on a screen's parts, so the card and the CLI op change a screen the same way.
+// Each function returns a new list.
+
+import {
+  MAX_LABEL,
+  MAX_LIST_ITEMS,
+  MAX_PARTS,
+  PART_DEFAULTS,
+  PART_KINDS,
+  SCREEN_MODES,
+  SCREEN_NODE,
+  SCREEN_WIDTH,
+  type PartKind,
+  type ScreenData,
+  type ScreenPart,
+} from "./types.js";
+
+const isKind = (value: unknown): value is PartKind =>
+  typeof value === "string" && (PART_KINDS as readonly string[]).includes(value);
+
+const text = (value: unknown, fallback = ""): string =>
+  typeof value === "string" ? value.slice(0, MAX_LABEL) : fallback;
+
+/** The next id no part of this screen holds: p1, p2, and so on. */
+export function nextPartId(parts: readonly ScreenPart[]): string {
+  const taken = new Set(parts.map((part) => part.id));
+  let n = parts.length + 1;
+  while (taken.has(`p${n}`)) n += 1;
+  return `p${n}`;
+}
+
+/** A part of this kind with its starting words. */
+export function createPart(
+  kind: PartKind,
+  parts: readonly ScreenPart[],
+  seed: Partial<Omit<ScreenPart, "id" | "kind">> = {},
+): ScreenPart {
+  const base = PART_DEFAULTS[kind];
+  const part: ScreenPart = { ...base, ...seed, id: nextPartId(parts), kind };
+  if (part.items) part.items = [...part.items];
+  return part;
+}
+
+/** A stored id kept when it is a new string, else the next free one. */
+function uniquePartId(raw: unknown, parts: ScreenPart[], seen: Set<string>): string {
+  const id = typeof raw === "string" && raw ? raw : "";
+  const unique = !id || seen.has(id) ? nextPartId(parts) : id;
+  seen.add(unique);
+  return unique;
+}
+
+/** What only one kind of part carries: a list's rows, a modal's body, a button's weight. */
+function kindFields(kind: PartKind, part: Record<string, unknown>): Partial<ScreenPart> {
+  if (kind === "list") {
+    const items = Array.isArray(part.items) ? part.items : PART_DEFAULTS.list.items;
+    return { items: (items ?? []).slice(0, MAX_LIST_ITEMS).map((item) => text(item)) };
+  }
+  if (kind === "modal") return { text: text(part.text, PART_DEFAULTS.modal.text) };
+  if (kind === "button") return { variant: part.variant === "secondary" ? "secondary" : "primary" };
+  return {};
+}
+
+/** One stored part as a part that draws, or null when its kind is not one we know. */
+function normalizePart(entry: unknown, parts: ScreenPart[], seen: Set<string>): ScreenPart | null {
+  const part = (entry ?? {}) as Record<string, unknown>;
+  if (!isKind(part.kind)) return null;
+  const kind = part.kind;
+  const id = uniquePartId(part.id, parts, seen);
+  return {
+    id,
+    kind,
+    label: text(part.label, PART_DEFAULTS[kind].label),
+    ...kindFields(kind, part),
+  };
+}
+
+/** A screen as stored may be old, hand-written or half-typed: this one always draws. */
+export function normalizeScreen(data: unknown): ScreenData {
+  const raw = (data ?? {}) as Record<string, unknown>;
+  const seen = new Set<string>();
+  const parts: ScreenPart[] = [];
+  const rawParts = Array.isArray(raw.parts) ? raw.parts : [];
+  for (const entry of rawParts.slice(0, MAX_PARTS)) {
+    const next = normalizePart(entry, parts, seen);
+    if (next) parts.push(next);
+  }
+  return {
+    label: text(raw.label),
+    mode: (SCREEN_MODES as readonly unknown[]).includes(raw.mode)
+      ? (raw.mode as ScreenData["mode"])
+      : "wireframe",
+    parts,
+  };
+}
+
+export function addPart(
+  parts: readonly ScreenPart[],
+  kind: PartKind,
+  seed?: Partial<Omit<ScreenPart, "id" | "kind">>,
+  index = parts.length,
+): ScreenPart[] {
+  if (parts.length >= MAX_PARTS) return [...parts];
+  const at = Math.max(0, Math.min(index, parts.length));
+  return [...parts.slice(0, at), createPart(kind, parts, seed), ...parts.slice(at)];
+}
+
+export function removePart(parts: readonly ScreenPart[], id: string): ScreenPart[] {
+  return parts.filter((part) => part.id !== id);
+}
+
+/** One step up (-1) or down (1). The ends stay put. */
+export function movePart(parts: readonly ScreenPart[], id: string, step: -1 | 1): ScreenPart[] {
+  const from = parts.findIndex((part) => part.id === id);
+  const to = from + step;
+  if (from < 0 || to < 0 || to >= parts.length) return [...parts];
+  const next = [...parts];
+  [next[from], next[to]] = [next[to], next[from]];
+  return next;
+}
+
+export function patchPart(
+  parts: readonly ScreenPart[],
+  id: string,
+  patch: Partial<Omit<ScreenPart, "id" | "kind">>,
+): ScreenPart[] {
+  return parts.map((part) => (part.id === id ? { ...part, ...patch } : part));
+}
+
+/** A list row's words. Rows are added and cut at the end, never reordered. */
+export function setItem(items: readonly string[], index: number, value: string): string[] {
+  return items.map((item, i) => (i === index ? value : item));
+}
+
+export function addItem(items: readonly string[]): string[] {
+  return items.length >= MAX_LIST_ITEMS ? [...items] : [...items, "Item"];
+}
+
+export function removeItem(items: readonly string[], index: number): string[] {
+  return items.filter((_, i) => i !== index);
+}
+
+/** A ready node for a board, as the CLI and the palette both build it. */
+export function buildScreenNode(options: {
+  id: string;
+  position: { x: number; y: number };
+  label?: string;
+  mode?: ScreenData["mode"];
+  parts?: ReadonlyArray<{ kind: PartKind } & Partial<Omit<ScreenPart, "id" | "kind">>>;
+  width?: number;
+}) {
+  let parts: ScreenPart[] = [];
+  for (const entry of options.parts ?? []) {
+    const { kind, ...seed } = entry;
+    parts = addPart(parts, kind, seed);
+  }
+  const data = normalizeScreen({ label: options.label, mode: options.mode, parts });
+  return {
+    id: options.id,
+    type: SCREEN_NODE,
+    position: options.position,
+    data,
+    style: { width: options.width ?? SCREEN_WIDTH },
+  };
+}

package/src/canvas/screen/plugin.ts

@@ -0,0 +1,67 @@
+// The Screen card's kind and its add op, with no DOM, so the CLI can put a screen on a board.
+// ui.ts adds the renderer.
+
+import { z } from "zod";
+import { CanvasOpError } from "../ops/ops.js";
+import { definePlugin, type NodeKind, type OpState } from "../plugin.js";
+import { buildScreenNode } from "./parts.js";
+import {
+  MAX_LABEL,
+  MAX_LIST_ITEMS,
+  MAX_PARTS,
+  PART_KINDS,
+  SCREEN_MODES,
+  SCREEN_NODE,
+  SCREEN_WIDTH,
+} from "./types.js";
+
+const partSchema = z.object({
+  kind: z.enum(PART_KINDS),
+  label: z.string().max(MAX_LABEL).optional(),
+  items: z.array(z.string().max(MAX_LABEL)).max(MAX_LIST_ITEMS).optional(),
+  text: z.string().max(MAX_LABEL).optional(),
+  variant: z.enum(["primary", "secondary"]).optional(),
+});
+
+const addScreenOp = z.object({
+  kind: z.literal("addScreen"),
+  id: z.string().min(1).optional(),
+  at: z.object({ x: z.number(), y: z.number() }),
+  label: z.string().max(MAX_LABEL).optional(),
+  mode: z.enum(SCREEN_MODES).optional(),
+  parts: z.array(partSchema).max(MAX_PARTS).optional(),
+  width: z.number().positive().optional(),
+});
+
+type AddScreen = z.infer<typeof addScreenOp>;
+
+function applyAddScreen(state: OpState, op: AddScreen, opIndex: number): void {
+  const id = op.id ?? crypto.randomUUID();
+  if (state.nodes.some((node) => node.id === id)) {
+    throw new CanvasOpError(`Node id already exists: ${id}`, opIndex);
+  }
+  const node = buildScreenNode({
+    id,
+    position: op.at,
+    label: op.label,
+    mode: op.mode,
+    parts: op.parts,
+    width: op.width,
+  });
+  state.nodes = [...state.nodes, node];
+}
+
+/** Content-sized: the parts decide the height, so a layout never pins a stale one. */
+export const screenKind: NodeKind = {
+  type: SCREEN_NODE,
+  label: "Screen",
+  sizing: "content-sized",
+  size: { width: SCREEN_WIDTH },
+  createData: () => ({ label: "", mode: "wireframe", parts: [] }),
+};
+
+export const screenPlugin = definePlugin({
+  id: "screen",
+  nodes: [screenKind],
+  ops: [{ kind: "addScreen", schema: addScreenOp, apply: applyAddScreen }],
+});