sketchmark 2.1.0 → 2.1.1

package/PRESETS.md

@@ -1,182 +0,0 @@
-# Sketchmark Presets
-
-Presets are Sketchmark's official authoring layer above the render kernel.
-
-They are reusable functions that compile to pure kernel elements and timelines. A preset may create shapes, characters, motion, effects, transitions, or scene fragments, but the final `.visual.json` must still contain only kernel fields.
-
-## Layers
-
-- `kernel`: final render format
-- `presets`: reusable helpers that compile to kernel
-- `packs`: shareable collections of presets
-
-The root `sketchmark` export remains kernel-focused. Presets live in a separate entrypoint:
-
-```js
-const { applyPresetFragments, shapes, motions, effects } = require("sketchmark/presets");
-```
-
-When working inside this repo before publish, examples use:
-
-```js
-const { applyPresetFragments, shapes } = require("../dist/src/presets");
-```
-
-## Fragments
-
-A preset returns a fragment:
-
-```ts
-type PresetFragment = {
-  elements?: VisualElement[];
-  timelines?: Record<string, Record<string, TimelineTrack>>;
-};
-```
-
-`elements` are appended to the document.
-
-`timelines` are keyed by target element ID and merged into each target's local kernel timeline.
-
-```js
-const doc = {
-  version: 1,
-  canvas: { width: 960, height: 540, duration: 2, fps: 30 },
-  elements: []
-};
-
-const visual = applyPresetFragments(doc, [
-  shapes.roundedRect({
-    id: "card",
-    x: 80,
-    y: 80,
-    width: 260,
-    height: 120,
-    radius: 16,
-    fill: "#ffffff",
-    stroke: "#cbd5e1"
-  }),
-  motions.riseIn({
-    id: "card",
-    from: [80, 120],
-    to: [80, 80],
-    duration: 0.5
-  }),
-  effects.dropShadow({
-    id: "card",
-    dy: 10,
-    blur: 24,
-    opacity: 0.2
-  })
-]);
-```
-
-The output is a normal kernel document. There is no preset metadata in `.visual.json`.
-
-## Built-In Namespaces
-
-### `shapes`
-
-- `rect`
-- `roundedRect`
-- `ellipse`
-- `circle`
-- `line`
-- `polyline`
-- `arrow`
-- `regularPolygon`
-- `star`
-- `speechBubble`
-
-Shapes compile to `path`, `text`, or `group`.
-
-### `characters`
-
-- `stickPerson`
-- `talkingHead`
-- `simpleDog`
-- `simpleSpider`
-- `cursorHand`
-- `simpleMascot`
-
-Characters compile to groups with namespaced IDs such as `hero.head` and `dog.frontLeg`.
-
-### `motions`
-
-- `fadeIn`
-- `fadeOut`
-- `slideIn`
-- `riseIn`
-- `scaleIn`
-- `pulse`
-- `bob`
-- `shake`
-- `drawOn`
-- `stagger`
-
-Motions compile to explicit object keyframes and curves. They do not emit legacy `ease` strings.
-
-### `effects`
-
-- `dropShadow`
-- `softBlur`
-- `glow`
-- `dim`
-- `tintFill`
-- `gradientSweep`
-- `roundedImageClip`
-- `maskReveal`
-
-Effects compile to existing kernel properties such as `effects.*`, `fill`, `opacity`, `clip.d`, and `mask.d`.
-
-Rounded images are compiled to `clip.d`. Presets must not write `cornerRadius`.
-
-### `transitions`
-
-- `crossfade`
-- `pushLeft`
-- `pushRight`
-- `slideUp`
-- `wipeLeft`
-- `wipeRight`
-- `zoomCut`
-- `fadeThroughBlack`
-- `irisIn`
-- `irisOut`
-
-Transitions coordinate timelines across one or more target elements.
-
-### `scenes`
-
-- `titleCard`
-- `lowerThird`
-- `captionBubble`
-- `comparisonSplit`
-- `deviceFrame`
-- `gridBackground`
-
-Scenes create reusable layout fragments and may be combined with motions/effects.
-
-## Composition Helpers
-
-```ts
-applyPresetFragments(document, fragments, options?)
-mergePresetFragments(fragments)
-prefixPresetFragment(fragment, prefix)
-```
-
-Use `prefixPresetFragment` when reusing the same preset more than once:
-
-```js
-const a = prefixPresetFragment(shapes.rect({ id: "box", x: 0, y: 0, width: 40, height: 40 }), "a");
-const b = prefixPresetFragment(shapes.rect({ id: "box", x: 50, y: 0, width: 40, height: 40 }), "b");
-```
-
-This produces `a.box` and `b.box`.
-
-## Authoring Rules
-
-- Presets must output only kernel elements and timelines.
-- Presets must not write editor metadata, scene data, lock state, selection state, assets maps, or project state.
-- Presets should emit explicit `graph`, `cubicBezier`, or `hold` curves, not legacy `ease`.
-- Presets should use namespaced IDs for generated children.
-- If a concept does not map cleanly to the kernel, keep it in preset code and compile it away.

package/examples/app-screen.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="900" viewBox="0 0 1440 900" role="img"><rect x="0" y="0" width="1440" height="900" fill="#f1f5f9"/><path id="sidebar-bg" d="M 0 0 L 240 0 L 240 900 L 0 900 Z" fill="#1e293b" stroke="none" stroke-width="0"/><text id="sidebar-logo" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="700" fill="#e2e8f0"><tspan x="24" y="32">Acme Studio</tspan></text><text id="ws-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="10" font-weight="600" letter-spacing="1" fill="#94a3b8"><tspan x="24" y="77">WORKSPACE</tspan></text><text id="nav-dashboard" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="102.5">Dashboard</tspan></text><path id="nav-projects-active-bg" d="M 18 126 L 222 126 Q 228 126 228 132 L 228 150 Q 228 156 222 156 L 18 156 Q 12 156 12 150 L 12 132 Q 12 126 18 126 Z" fill="#334155" stroke="none" stroke-width="0"/><text id="nav-projects" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#e2e8f0"><tspan x="24" y="136.5">Projects</tspan></text><path id="nav-projects-indicator" d="M 4 130 L 4 148" fill="none" stroke="#2563eb" stroke-width="3" stroke-linecap="round"/><text id="nav-tasks" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="170.5">Tasks</tspan></text><text id="nav-calendar" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="204.5">Calendar</tspan></text><text id="an-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="10" font-weight="600" letter-spacing="1" fill="#94a3b8"><tspan x="24" y="261">ANALYTICS</tspan></text><text id="nav-overview" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="286.5">Overview</tspan></text><text id="nav-reports" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="320.5">Reports</tspan></text><text id="nav-exports" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="354.5">Exports</tspan></text><text id="st-heading" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="10" font-weight="600" letter-spacing="1" fill="#94a3b8"><tspan x="24" y="411">SETTINGS</tspan></text><text id="nav-general" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="436.5">General</tspan></text><text id="nav-team" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="470.5">Team Members</tspan></text><text id="nav-billing" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="504.5">Billing</tspan></text><text id="nav-integrations" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#94a3b8"><tspan x="24" y="538.5">Integrations</tspan></text><text id="main-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="28" font-weight="700" fill="#0f172a"><tspan x="280" y="46">Projects</tspan></text><text id="main-summary" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="14" font-weight="400" fill="#475569"><tspan x="280" y="79">Track active projects across your workspace. Filter by status or team to narrow</tspan><tspan x="280" y="101.4">results. Each card shows the latest activity snapshot and assigned owner.</tspan></text><path id="chip-bg-0" d="M 295 124 L 319.5 124 Q 334.5 124 334.5 139 L 334.5 139 Q 334.5 154 319.5 154 L 295 154 Q 280 154 280 139 L 280 139 Q 280 124 295 124 Z" fill="#2563eb" stroke="none" stroke-width="0"/><text id="chip-text-0" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#ffffff"><tspan x="307.25" y="139">All</tspan></text><path id="chip-bg-1" d="M 359.5 124 L 406.5 124 Q 421.5 124 421.5 139 L 421.5 139 Q 421.5 154 406.5 154 L 359.5 154 Q 344.5 154 344.5 139 L 344.5 139 Q 344.5 124 359.5 124 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="chip-text-1" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="383" y="139">Active</tspan></text><path id="chip-bg-2" d="M 446.5 124 L 508.5 124 Q 523.5 124 523.5 139 L 523.5 139 Q 523.5 154 508.5 154 L 446.5 154 Q 431.5 154 431.5 139 L 431.5 139 Q 431.5 124 446.5 124 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="chip-text-2" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="477.5" y="139">Archived</tspan></text><path id="chip-bg-3" d="M 548.5 124 L 603 124 Q 618 124 618 139 L 618 139 Q 618 154 603 154 L 548.5 154 Q 533.5 154 533.5 139 L 533.5 139 Q 533.5 124 548.5 124 Z" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/><text id="chip-text-3" text-anchor="middle" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="500" fill="#334155"><tspan x="575.75" y="139">My Team</tspan></text><text id="table-caption" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="12" font-weight="400" fill="#64748b"><tspan x="280" y="188">Showing 3 of 12 projects · Sorted by last activity</tspan></text><path id="card-a-bg" d="M 288 210 L 1392 210 Q 1400 210 1400 218 L 1400 322 Q 1400 330 1392 330 L 288 330 Q 280 330 280 322 L 280 218 Q 280 210 288 210 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/><text id="card-a-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="600" fill="#1e293b"><tspan x="300" y="234">Design System v3</tspan></text><text id="card-a-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="300" y="258.5">Component library refactor with updated tokens, accessibility</tspan><tspan x="300" y="278.65">improvements, and new layout primitives for dashboard views.</tspan></text><text id="card-a-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="400" fill="#94a3b8"><tspan x="300" y="313.5">Updated 2 hours ago · Sarah K.</tspan></text><path id="card-b-bg" d="M 288 346 L 1392 346 Q 1400 346 1400 354 L 1400 458 Q 1400 466 1392 466 L 288 466 Q 280 466 280 458 L 280 354 Q 280 346 288 346 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/><text id="card-b-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="600" fill="#1e293b"><tspan x="300" y="370">API Gateway Migration</tspan></text><text id="card-b-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="300" y="394.5">Moving from the legacy REST proxy to a new GraphQL federation</tspan><tspan x="300" y="414.65">layer with per-service schema ownership and rate limiting.</tspan></text><text id="card-b-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="400" fill="#94a3b8"><tspan x="300" y="449.5">Updated 1 day ago · Marcus T.</tspan></text><path id="card-c-bg" d="M 288 482 L 1392 482 Q 1400 482 1400 490 L 1400 594 Q 1400 602 1392 602 L 288 602 Q 280 602 280 594 L 280 490 Q 280 482 288 482 Z" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/><text id="card-c-title" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="16" font-weight="600" fill="#1e293b"><tspan x="300" y="506">Onboarding Flow Redesign</tspan></text><text id="card-c-body" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="13" font-weight="400" fill="#64748b"><tspan x="300" y="530.5">Streamlining the first-run experience with progressive disclosure,</tspan><tspan x="300" y="550.65">reduced form fields, and contextual help tooltips.</tspan></text><text id="card-c-meta" text-anchor="start" dominant-baseline="middle" font-family="Roboto, Arial, sans-serif" font-size="11" font-weight="400" fill="#94a3b8"><tspan x="300" y="585.5">Updated 3 days ago · Priya N.</tspan></text></svg>