flowsvg 0.1.1 → 0.2.0

package/dist/portable/styles.css

@@ -0,0 +1,227 @@
+/* CSS variables style playback and custom choices; core themes own diagram colors. */
+.flowsvg-canvas:focus-visible {
+  outline: 3px solid #2563eb;
+  outline-offset: 3px;
+}
+
+.flowsvg-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1rem;
+  border-top: 1px solid var(--flowsvg-control-border, #e2e8f0);
+  color: var(--flowsvg-control-color, #172033);
+  background: var(--flowsvg-control-background, #ffffff);
+  font: 500 0.8125rem/1.4 system-ui, sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.flowsvg-controls :is(button, input) {
+  box-sizing: border-box;
+  min-height: var(--flowsvg-control-height, 2.75rem);
+  max-width: 100%;
+  color: var(--flowsvg-control-color, #172033);
+  background: var(--flowsvg-control-background, #ffffff);
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.5rem;
+  font: inherit;
+  accent-color: var(--flowsvg-control-accent, #2563eb);
+  transition: background-color 160ms ease, border-color 160ms ease;
+}
+
+.flowsvg-controls button {
+  padding: var(--flowsvg-control-padding, 0.5rem 0.75rem);
+  cursor: pointer;
+}
+
+.flowsvg-controls button:enabled:hover,
+.flowsvg-select-trigger:enabled:hover {
+  background: color-mix(in srgb, var(--flowsvg-control-color, #172033) 4%, var(--flowsvg-control-background, #ffffff));
+  border-color: color-mix(in srgb, var(--flowsvg-control-color, #172033) 25%, var(--flowsvg-control-border, #d8dee8));
+}
+
+.flowsvg-controls button:enabled:active,
+.flowsvg-select-trigger:enabled:active {
+  background: color-mix(in srgb, var(--flowsvg-control-color, #172033) 8%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-play-toggle {
+  min-width: 4.5rem;
+  color: var(--flowsvg-control-accent, #2563eb);
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 10%, var(--flowsvg-control-background, #ffffff));
+  border-color: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 35%, var(--flowsvg-control-border, #d8dee8));
+  font-weight: 650;
+}
+
+.flowsvg-controls .flowsvg-play-toggle:enabled:hover {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 17%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-play-toggle:enabled:active {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 23%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-loop-toggle[aria-pressed="true"] {
+  color: var(--flowsvg-control-accent, #2563eb);
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 10%, var(--flowsvg-control-background, #ffffff));
+  border-color: var(--flowsvg-control-accent, #2563eb);
+}
+
+.flowsvg-controls :is(button, input):focus-visible {
+  outline: 2px solid var(--flowsvg-control-focus, #2563eb);
+  outline-offset: 2px;
+}
+
+.flowsvg-controls :disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.flowsvg-controls input[type="range"] {
+  flex: 1 1 10rem;
+  min-width: 4rem;
+  margin: 0 0.375rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.flowsvg-controls input[type="range"]:disabled {
+  cursor: not-allowed;
+}
+
+.flowsvg-export-controls {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-inline-start: auto;
+  max-width: 100%;
+}
+
+.flowsvg-export-controls progress {
+  max-width: 7rem;
+  height: 0.375rem;
+  accent-color: var(--flowsvg-control-accent, #2563eb);
+}
+
+.flowsvg-export-controls [role="status"] {
+  font-size: 0.75rem;
+}
+
+.flowsvg-export-controls [role="status"]:empty {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .flowsvg-controls { padding: 0.75rem; }
+  .flowsvg-controls input[type="range"] { flex-basis: 100%; margin: 0; }
+  .flowsvg-export-controls { margin-inline-start: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .flowsvg-controls :is(button, input) { transition: none; }
+}
+
+/* Apply to a host or ancestor; sizing affects controls only, never diagram geometry. */
+.flowsvg-compact {
+  --flowsvg-control-height: 2rem;
+  --flowsvg-control-padding: 0.3125rem 0.625rem;
+}
+
+.flowsvg-select {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  color: var(--flowsvg-control-color, #172033);
+  font: 500 0.8125rem/1.4 system-ui, sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.flowsvg-select .flowsvg-select-trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  min-height: var(--flowsvg-control-height, 2.75rem);
+  padding: var(--flowsvg-control-padding, 0.5rem 0.75rem);
+  color: inherit;
+  background: var(--flowsvg-control-background, #ffffff);
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.5rem;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.flowsvg-select-trigger::after {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+  margin: -0.1875rem 0.125rem 0 0;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+}
+
+.flowsvg-select-trigger:focus-visible {
+  outline: 2px solid var(--flowsvg-control-focus, #2563eb);
+  outline-offset: 2px;
+}
+
+.flowsvg-select-trigger:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.flowsvg-select-options {
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 2;
+  inset-block-start: calc(100% + 0.375rem);
+  inset-inline-end: 0;
+  width: max-content;
+  min-width: 100%;
+  max-width: min(22rem, calc(100vw - 2.5rem));
+  max-height: 14rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0.25rem;
+  color: var(--flowsvg-control-color, #172033);
+  background: var(--flowsvg-control-background, #ffffff);
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.625rem;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--flowsvg-control-color, #172033) 14%, transparent);
+}
+
+.flowsvg-controls .flowsvg-select-options {
+  inset-block-start: auto;
+  inset-block-end: calc(100% + 0.375rem);
+}
+
+.flowsvg-select-options [role="option"] {
+  position: relative;
+  padding: 0.5rem 1.875rem 0.5rem 0.625rem;
+  border-radius: 0.375rem;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.flowsvg-select-options [role="option"]:is(:hover, [data-active]) {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 9%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-select-options [aria-selected="true"] {
+  color: var(--flowsvg-control-accent, #2563eb);
+  font-weight: 650;
+}
+
+.flowsvg-select-options [aria-selected="true"]::after {
+  content: "✓";
+  position: absolute;
+  inset-inline-end: 0.625rem;
+}
+
+.flowsvg-compact .flowsvg-play-toggle { min-width: 4rem; }

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* Control and canvas focus styles; CSS variables customize controls only. The core theme resolves diagram colors. */
+/* CSS variables style playback and custom choices; core themes own diagram colors. */
 .flowsvg-canvas:focus-visible {
   outline: 3px solid #2563eb;
   outline-offset: 3px;
@@ -9,39 +9,219 @@
   flex-wrap: wrap;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.75rem;
+  padding: 0.875rem 1rem;
+  border-top: 1px solid var(--flowsvg-control-border, #e2e8f0);
   color: var(--flowsvg-control-color, #172033);
   background: var(--flowsvg-control-background, #ffffff);
-  font: 1rem/1.4 system-ui, sans-serif;
+  font: 500 0.8125rem/1.4 system-ui, sans-serif;
+  font-variant-numeric: tabular-nums;
 }
 
-.flowsvg-controls :is(button, input, select) {
+.flowsvg-controls :is(button, input) {
   box-sizing: border-box;
-  min-height: 2.75rem;
+  min-height: var(--flowsvg-control-height, 2.75rem);
   max-width: 100%;
   color: var(--flowsvg-control-color, #172033);
   background: var(--flowsvg-control-background, #ffffff);
-  border: 1px solid var(--flowsvg-control-border, #64748b);
-  border-radius: 0.25rem;
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.5rem;
   font: inherit;
   accent-color: var(--flowsvg-control-accent, #2563eb);
+  transition: background-color 160ms ease, border-color 160ms ease;
 }
 
-.flowsvg-controls :is(button, select) {
-  padding: 0.5rem 0.75rem;
+.flowsvg-controls button {
+  padding: var(--flowsvg-control-padding, 0.5rem 0.75rem);
+  cursor: pointer;
 }
 
-.flowsvg-controls :is(button, input, select):focus-visible {
-  outline: 3px solid var(--flowsvg-control-focus, #2563eb);
-  outline-offset: 3px;
+.flowsvg-controls button:enabled:hover,
+.flowsvg-select-trigger:enabled:hover {
+  background: color-mix(in srgb, var(--flowsvg-control-color, #172033) 4%, var(--flowsvg-control-background, #ffffff));
+  border-color: color-mix(in srgb, var(--flowsvg-control-color, #172033) 25%, var(--flowsvg-control-border, #d8dee8));
+}
+
+.flowsvg-controls button:enabled:active,
+.flowsvg-select-trigger:enabled:active {
+  background: color-mix(in srgb, var(--flowsvg-control-color, #172033) 8%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-play-toggle {
+  min-width: 4.5rem;
+  color: var(--flowsvg-control-accent, #2563eb);
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 10%, var(--flowsvg-control-background, #ffffff));
+  border-color: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 35%, var(--flowsvg-control-border, #d8dee8));
+  font-weight: 650;
+}
+
+.flowsvg-controls .flowsvg-play-toggle:enabled:hover {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 17%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-play-toggle:enabled:active {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 23%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-controls .flowsvg-loop-toggle[aria-pressed="true"] {
+  color: var(--flowsvg-control-accent, #2563eb);
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 10%, var(--flowsvg-control-background, #ffffff));
+  border-color: var(--flowsvg-control-accent, #2563eb);
+}
+
+.flowsvg-controls :is(button, input):focus-visible {
+  outline: 2px solid var(--flowsvg-control-focus, #2563eb);
+  outline-offset: 2px;
 }
 
 .flowsvg-controls :disabled {
-  opacity: 0.55;
-  cursor: default;
+  opacity: 0.45;
+  cursor: not-allowed;
 }
 
 .flowsvg-controls input[type="range"] {
   flex: 1 1 10rem;
   min-width: 4rem;
+  margin: 0 0.375rem;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  cursor: pointer;
 }
+
+.flowsvg-controls input[type="range"]:disabled {
+  cursor: not-allowed;
+}
+
+.flowsvg-export-controls {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin-inline-start: auto;
+  max-width: 100%;
+}
+
+.flowsvg-export-controls progress {
+  max-width: 7rem;
+  height: 0.375rem;
+  accent-color: var(--flowsvg-control-accent, #2563eb);
+}
+
+.flowsvg-export-controls [role="status"] {
+  font-size: 0.75rem;
+}
+
+.flowsvg-export-controls [role="status"]:empty {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .flowsvg-controls { padding: 0.75rem; }
+  .flowsvg-controls input[type="range"] { flex-basis: 100%; margin: 0; }
+  .flowsvg-export-controls { margin-inline-start: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .flowsvg-controls :is(button, input) { transition: none; }
+}
+
+/* Apply to a host or ancestor; sizing affects controls only, never diagram geometry. */
+.flowsvg-compact {
+  --flowsvg-control-height: 2rem;
+  --flowsvg-control-padding: 0.3125rem 0.625rem;
+}
+
+.flowsvg-select {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  color: var(--flowsvg-control-color, #172033);
+  font: 500 0.8125rem/1.4 system-ui, sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.flowsvg-select .flowsvg-select-trigger {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  min-height: var(--flowsvg-control-height, 2.75rem);
+  padding: var(--flowsvg-control-padding, 0.5rem 0.75rem);
+  color: inherit;
+  background: var(--flowsvg-control-background, #ffffff);
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.5rem;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.flowsvg-select-trigger::after {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+  margin: -0.1875rem 0.125rem 0 0;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+}
+
+.flowsvg-select-trigger:focus-visible {
+  outline: 2px solid var(--flowsvg-control-focus, #2563eb);
+  outline-offset: 2px;
+}
+
+.flowsvg-select-trigger:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.flowsvg-select-options {
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 2;
+  inset-block-start: calc(100% + 0.375rem);
+  inset-inline-end: 0;
+  width: max-content;
+  min-width: 100%;
+  max-width: min(22rem, calc(100vw - 2.5rem));
+  max-height: 14rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 0.25rem;
+  color: var(--flowsvg-control-color, #172033);
+  background: var(--flowsvg-control-background, #ffffff);
+  border: 1px solid var(--flowsvg-control-border, #d8dee8);
+  border-radius: 0.625rem;
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--flowsvg-control-color, #172033) 14%, transparent);
+}
+
+.flowsvg-controls .flowsvg-select-options {
+  inset-block-start: auto;
+  inset-block-end: calc(100% + 0.375rem);
+}
+
+.flowsvg-select-options [role="option"] {
+  position: relative;
+  padding: 0.5rem 1.875rem 0.5rem 0.625rem;
+  border-radius: 0.375rem;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.flowsvg-select-options [role="option"]:is(:hover, [data-active]) {
+  background: color-mix(in srgb, var(--flowsvg-control-accent, #2563eb) 9%, var(--flowsvg-control-background, #ffffff));
+}
+
+.flowsvg-select-options [aria-selected="true"] {
+  color: var(--flowsvg-control-accent, #2563eb);
+  font-weight: 650;
+}
+
+.flowsvg-select-options [aria-selected="true"]::after {
+  content: "✓";
+  position: absolute;
+  inset-inline-end: 0.625rem;
+}
+
+.flowsvg-compact .flowsvg-play-toggle { min-width: 4rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowsvg",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Declarative SVG player for logic and architecture diagrams, with scenes, beats, static export and browser framework adapters.",
   "type": "module",
   "license": "MIT",
@@ -13,7 +13,16 @@
   "bugs": {
     "url": "https://github.com/yokingma/FlowSVG/issues"
   },
-  "keywords": ["svg", "diagram", "architecture", "animation", "timeline", "web-component", "react", "vue"],
+  "keywords": [
+    "svg",
+    "diagram",
+    "architecture",
+    "animation",
+    "timeline",
+    "web-component",
+    "react",
+    "vue"
+  ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -44,32 +53,47 @@
     "./vue": {
       "types": "./dist/vue.d.ts",
       "import": "./dist/vue.js"
+    },
+    "./node": {
+      "types": "./dist/node.d.ts",
+      "import": "./dist/node.js"
+    },
+    "./export": {
+      "types": "./dist/export.d.ts",
+      "import": "./dist/export.js"
     }
   },
   "files": [
     "dist",
     "docs/images/*.png",
+    "docs/images/*.gif",
     "README.md",
     "README.zh-CN.md",
     "CHANGELOG.md",
     "PATTERNS.md",
     "LICENSE"
   ],
-  "sideEffects": ["./dist/styles.css"],
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
   "engines": {
     "node": ">=18"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.core.json && tsc -p tsconfig.browser.json && tsc -p tsconfig.react.json && tsc -p tsconfig.vue.json && cp src/styles.css dist/styles.css",
-    "typecheck": "tsc -p tsconfig.core.json --noEmit && tsc -p tsconfig.browser.json --noEmit && tsc -p tsconfig.react.json --noEmit && tsc -p tsconfig.vue.json --noEmit",
+    "build": "rm -rf dist && tsc -p tsconfig.core.json && tsc -p tsconfig.browser.json && tsc -p tsconfig.react.json && tsc -p tsconfig.vue.json && cp src/styles.css dist/styles.css && tsc -p tsconfig.node.json && tsc -p tsconfig.worker.json && node scripts/build-portable.mjs",
+    "typecheck": "tsc -p tsconfig.core.json --noEmit && tsc -p tsconfig.browser.json --noEmit && tsc -p tsconfig.react.json --noEmit && tsc -p tsconfig.vue.json --noEmit && tsc -p tsconfig.node.json --noEmit && tsc -p tsconfig.worker.json",
     "test": "vitest run",
     "prepack": "pnpm --silent build",
     "prepublishOnly": "pnpm typecheck && pnpm test",
-    "release:verify": "node ../../scripts/verify-release.mjs"
+    "release:verify": "node ../../scripts/verify-release.mjs",
+    "test:browser": "vitest run tests/sdk-browser.test.ts"
   },
   "devDependencies": {
+    "@types/node": "22.19.1",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
+    "esbuild": "0.25.12",
+    "gifuct-js": "2.1.2",
     "jsdom": "^26.1.0",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
@@ -86,5 +110,12 @@
     "vue": {
       "optional": true
     }
+  },
+  "bin": {
+    "flowsvg": "./dist/node/cli.js"
+  },
+  "dependencies": {
+    "gifenc": "1.0.3",
+    "playwright-core": "1.58.2"
   }
 }