@heyramzi/ui 2.23.0 → 3.0.0

package/src/canvas/ui/CanvasToolbar.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { PenColor } from "../pen/types.js";
+import type { CanvasTool } from "./tools.js";
+export interface ToolbarLabels {
+    toolbar: string;
+    style: string;
+    tools: Record<CanvasTool, string> & {
+        shapes: string;
+        note: string;
+    };
+    colors: Record<PenColor, string>;
+    /** Small, medium, large. */
+    sizes: readonly [string, string, string];
+}
+import type { Snippet } from "svelte";
+import "../pen/pen.css";
+import "./canvas-ui.css";
+import { type BrushLevel } from "./tools.js";
+interface Props {
+    tool: CanvasTool;
+    color: PenColor;
+    level: BrushLevel;
+    labels: ToolbarLabels;
+    /** The note button drops a note card, so the host owns what it does. Omit it to hide the button. */
+    onNote?: () => void;
+    /** Sits last on the rail, for what only the host knows, like the card palette. */
+    extra?: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "color" | "level" | "tool">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/ui/FrameLayer.svelte

@@ -97,20 +97,24 @@
 </div>
 
 <style>
-	.cv-frame-layer {
-		position: absolute;
-		inset: 0;
-		z-index: 5;
-		cursor: crosshair;
-		touch-action: none;
-		user-select: none;
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.cv-frame-layer {
+			position: absolute;
+			inset: 0;
+			z-index: 5;
+			cursor: crosshair;
+			touch-action: none;
+			user-select: none;
+		}
 
-	.cv-frame-preview {
-		position: absolute;
-		border: 1.5px solid var(--cv-selection);
-		border-radius: var(--cv-radius-btn);
-		background: var(--cv-selection-fill);
-		pointer-events: none;
+		.cv-frame-preview {
+			position: absolute;
+			border: 1.5px solid var(--cv-selection);
+			border-radius: var(--cv-radius-btn);
+			background: var(--cv-selection-fill);
+			pointer-events: none;
+		}
 	}
 </style>

package/src/canvas/ui/FrameLayer.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type FrameRect } from "../editor/frame.js";
+import "./canvas-ui.css";
+interface Props {
+    /** A drag ended, or a click: the box in flow units. */
+    onFrame: (rect: FrameRect) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/ui/PenLayer.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ErasableNode } from "../pen/eraser.js";
+import type { PenOp } from "../pen/ops.js";
+import type { PenColor, PenTool } from "../pen/types.js";
+interface Props {
+    tool: PenTool;
+    color: PenColor;
+    size?: number;
+    nodes: readonly ErasableNode[];
+    commit: (ops: PenOp[]) => void;
+    startGesture: () => () => void;
+    onTextPlaced?: (nodeId: string) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/ui/StylePanel.svelte

@@ -238,48 +238,52 @@
 {/if}
 
 <style>
-	.cv-style {
-		flex-direction: column;
-		align-items: stretch;
-		gap: 8px;
-		padding: 8px;
-	}
+	@layer theme, base, components, utilities;
 
-	.cv-section {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-	}
+	@layer components {
+		.cv-style {
+			flex-direction: column;
+			align-items: stretch;
+			gap: 8px;
+			padding: 8px;
+		}
 
-	.cv-label {
-		padding-inline: 4px;
-		color: var(--cv-ink-muted);
-		font-size: 12px;
-		line-height: 16px;
-	}
+		.cv-section {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+		}
 
-	.cv-swatches {
-		display: grid;
-		grid-template-columns: repeat(3, var(--cv-btn));
-		gap: 0;
-	}
+		.cv-label {
+			padding-inline: 4px;
+			color: var(--cv-ink-muted);
+			font-size: 12px;
+			line-height: calc(16 / 12);
+		}
 
-	.cv-line {
-		width: 18px;
-		height: var(--line);
-		border-radius: 999px;
-		background: currentColor;
-	}
+		.cv-swatches {
+			display: grid;
+			grid-template-columns: repeat(3, var(--cv-btn));
+			gap: 0;
+		}
 
-	.cv-figure {
-		font-size: 12px;
-		font-variant-numeric: tabular-nums;
-	}
+		.cv-line {
+			width: 18px;
+			height: var(--line);
+			border-radius: 999px;
+			background: currentColor;
+		}
 
-	/* No fill is an empty disc struck through, since a swatch can't show the absence of a colour. */
-	.cv-swatch-none::before {
-		background:
-			linear-gradient(135deg, transparent 46%, var(--cv-ink-muted) 46% 54%, transparent 54%),
-			var(--cv-surface);
+		.cv-figure {
+			font-size: 12px;
+			font-variant-numeric: tabular-nums;
+		}
+
+		/* No fill is an empty disc struck through, since a swatch can't show the absence of a colour. */
+		.cv-swatch-none::before {
+			background:
+				linear-gradient(135deg, transparent 46%, var(--cv-ink-muted) 46% 54%, transparent 54%),
+				var(--cv-surface);
+		}
 	}
 </style>

package/src/canvas/ui/StylePanel.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { PenColor } from "../pen/types.js";
+export interface StyleLabels {
+    panel: string;
+    fill: string;
+    stroke: string;
+    /** The stroke row's name when the selection has no outline, only ink, like text. */
+    colour: string;
+    none: string;
+    width: string;
+    /** Thin, regular, thick. */
+    widths: readonly [string, string, string];
+    font: string;
+    regular: string;
+    bold: string;
+    colors: Record<PenColor, string>;
+}
+import type { CanvasOp } from "../ops/ops.js";
+import { type StyleNode } from "../editor/style.js";
+import "../pen/pen.css";
+import "./canvas-ui.css";
+interface Props {
+    /** The selected cards. The panel hides when none of them takes a style. */
+    nodes: readonly StyleNode[];
+    /** The node type of a frame or group, whose fill and outline the panel sets. */
+    frameType?: string;
+    labels: StyleLabels;
+    /** One call per change, so each is one undo step. */
+    commit: (ops: CanvasOp[]) => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/canvas/ui/canvas-grid.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    /** Flow units between dots at the finest level, the same as the snap grid. */
+    gap?: number;
+    /** Dot diameter in flow units at the finest level, so it grows and shrinks with zoom. */
+    size?: number;
+    /** Any CSS colour; the theme's pattern colour when unset. */
+    color?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;