vizcraft 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # vizcraft
 
+## 0.2.2
+
+### Patch Changes
+
+- [`7c9eb18`](https://github.com/ChipiKaf/vizcraft/commit/7c9eb185e727bde899b4779c4661d8b176db8549) Thanks [@ChipiKaf](https://github.com/ChipiKaf)! - update documentation
+
+## 0.2.1
+
+### Patch Changes
+
+- [`f8fd369`](https://github.com/ChipiKaf/vizcraft/commit/f8fd369ca32a4653059f8e6697a17dcea56edc8c) Thanks [@ChipiKaf](https://github.com/ChipiKaf)! - Update documentation
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -1,5 +1,14 @@
 # VizCraft
 
+[![npm version](https://img.shields.io/npm/v/vizcraft.svg)](https://www.npmjs.com/package/vizcraft)
+[![npm downloads](https://img.shields.io/npm/dm/vizcraft.svg)](https://www.npmjs.com/package/vizcraft)
+[![CI](https://github.com/ChipiKaf/vizcraft/actions/workflows/ci.yml/badge.svg)](https://github.com/ChipiKaf/vizcraft/actions/workflows/ci.yml)
+[![Release](https://github.com/ChipiKaf/vizcraft/actions/workflows/release.yml/badge.svg)](https://github.com/ChipiKaf/vizcraft/actions/workflows/release.yml)
+[![Snapshot](https://github.com/ChipiKaf/vizcraft/actions/workflows/snapshot.yml/badge.svg)](https://github.com/ChipiKaf/vizcraft/actions/workflows/snapshot.yml)
+[![license](https://img.shields.io/npm/l/vizcraft.svg)](LICENSE)
+
+📖 Full documentation: [docs here](https://vizcraft-docs.vercel.app/docs/intro)
+
 **A declarative, builder-based library for creating animated SVG network visualizations and algorithm demos.**
 
 VizCraft is designed to make creating beautiful, animated node-link diagrams and complex visualizations intuitive and powerful. Whether you are building an educational tool, explaining an algorithm, or just need a great looking graph, VizCraft provides the primitives you need.
@@ -32,7 +41,6 @@ import { viz } from 'vizcraft';
 const builder = viz().view(800, 600);
 
 builder
-  .view(500, 500)
   .node('a')
   .at(100, 100)
   .circle(15)
@@ -48,17 +56,21 @@ const container = document.getElementById('viz-basic');
 if (container) builder.mount(container);
 ```
 
+More walkthroughs and examples: [docs here](https://vizcraft-docs.vercel.app/docs/examples).
+
 ## 📚 Documentation (Topics)
 
-For a guided walkthrough, the repo docs are organized like this:
+Full documentation site: [docs here](https://vizcraft-docs.vercel.app/docs/intro)
 
-- [Introduction](../../packages/docs/docs/intro.md)
-- [Examples](../../packages/docs/docs/examples.mdx)
-- [Essentials](../../packages/docs/docs/essentials.mdx)
-- [Animations](../../packages/docs/docs/animations/index.mdx)
-  - [Animation Builder API](../../packages/docs/docs/animations/animation-builder-api.mdx)
-- [Advanced](../../packages/docs/docs/advanced.mdx)
-- [Types](../../packages/docs/docs/types.mdx)
+Docs topics (same as the sidebar):
+
+- [Introduction](https://vizcraft-docs.vercel.app/docs/intro)
+- [Examples](https://vizcraft-docs.vercel.app/docs/examples)
+- [Essentials](https://vizcraft-docs.vercel.app/docs/essentials)
+- [Animations](https://vizcraft-docs.vercel.app/docs/animations)
+  - [Animation Builder API](https://vizcraft-docs.vercel.app/docs/animations/animation-builder-api)
+- [Advanced](https://vizcraft-docs.vercel.app/docs/advanced)
+- [Types](https://vizcraft-docs.vercel.app/docs/types)
 
 Run the docs locally (monorepo):
 
@@ -109,6 +121,8 @@ b.edge('n1', 'n2')
 
 ### Animations
 
+See the full Animations guide [docs here](https://vizcraft-docs.vercel.app/docs/animations).
+
 VizCraft supports **two complementary animation approaches**:
 
 1. **Registry/CSS animations** (simple, reusable effects)
@@ -138,7 +152,7 @@ b.node('a')
 
 2. **Data-only timeline animations (`AnimationSpec`)** (sequenced tweens)
 
-- Author with `builder.animate((anim) => ...)`.
+- Author with `builder.animate((aBuilder) => ...)`.
 - VizCraft stores compiled specs on the scene as `scene.animationSpecs`.
 - Play them with `builder.play()`.
 
@@ -159,8 +173,8 @@ b.node('a')
   .arrow()
   .done();
 
-b.animate((anim) =>
-  anim
+b.animate((aBuilder) =>
+  aBuilder
     .node('a')
     .to({ x: 200, opacity: 0.35 }, { duration: 600 })
     .node('b')
@@ -191,8 +205,10 @@ b.node('a')
   .edge('a', 'b', 'e1')
   .done();
 
-b.animate((anim) =>
-  anim.edge('a', 'b', 'e1').to({ strokeDashoffset: -120 }, { duration: 900 })
+b.animate((aBuilder) =>
+  aBuilder
+    .edge('a', 'b', 'e1')
+    .to({ strokeDashoffset: -120 }, { duration: 900 })
 );
 ```
 
@@ -201,8 +217,8 @@ b.animate((anim) =>
 Specs can carry adapter extensions so you can animate your own numeric properties:
 
 ```ts
-b.animate((anim) =>
-  anim
+b.animate((aBuilder) =>
+  aBuilder
     .extendAdapter((adapter) => {
       adapter.register?.('node', 'r', {
         get: (target) => adapter.get(target, 'r'),

package/dist/styles.d.ts

@@ -1 +1 @@
-export declare const DEFAULT_VIZ_CSS = "\n.viz-canvas {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.viz-node-label,\n.viz-edge-label {\n  dominant-baseline: middle;\n  alignment-baseline: middle;\n  transform: translateY(-0.1em);\n}\n\n.viz-canvas svg {\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n/* Keyframes */\n@keyframes vizFlow {\n  from {\n    stroke-dashoffset: 20;\n  }\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n/* Animation Classes */\n\n/* Flow Animation (Dashed line moving) */\n.viz-anim-flow .viz-edge {\n  stroke-dasharray: 5, 5;\n  animation: vizFlow var(--viz-anim-duration, 2s) linear infinite;\n}\n\n/* Node Transition */\n.viz-node-group {\n    transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n}\n\n/* Overlay Classes */\n.viz-grid-label {\n  fill: #6B7280;\n  font-size: 14px;\n  font-weight: 600;\n  opacity: 1;\n}\n\n.viz-signal {\n    fill: #3B82F6;\n    cursor: pointer;\n    pointer-events: all; \n    transition: transform 0.2s ease-out, fill 0.2s ease-out;\n}\n\n.viz-signal .viz-signal-shape {\n    fill: inherit;\n}\n\n.viz-signal:hover {\n    fill: #60A5FA;\n    transform: scale(1.5);\n}\n\n.viz-data-point {\n  fill: #F59E0B;\n  transition: cx 0.3s ease-out, cy 0.3s ease-out;\n}\n";
+export declare const DEFAULT_VIZ_CSS = "\n.viz-canvas {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.viz-node-label,\n.viz-edge-label {\n  text-anchor: middle;\n  dominant-baseline: middle;\n  alignment-baseline: middle;\n  transform: translateY(0);\n}\n\n.viz-canvas svg {\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n\n/* Keyframes */\n@keyframes vizFlow {\n  from {\n    stroke-dashoffset: 20;\n  }\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n/* Animation Classes */\n\n/* Flow Animation (Dashed line moving) */\n.viz-anim-flow .viz-edge {\n  stroke-dasharray: 5, 5;\n  animation: vizFlow var(--viz-anim-duration, 2s) linear infinite;\n}\n\n/* Node Transition */\n.viz-node-group {\n    transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n}\n\n/* Overlay Classes */\n.viz-grid-label {\n  fill: #6B7280;\n  font-size: 14px;\n  font-weight: 600;\n  opacity: 1;\n}\n\n.viz-signal {\n    fill: #3B82F6;\n    cursor: pointer;\n    pointer-events: all; \n    transition: transform 0.2s ease-out, fill 0.2s ease-out;\n}\n\n.viz-signal .viz-signal-shape {\n    fill: inherit;\n}\n\n.viz-signal:hover {\n    fill: #60A5FA;\n    transform: scale(1.5);\n}\n\n.viz-data-point {\n  fill: #F59E0B;\n  transition: cx 0.3s ease-out, cy 0.3s ease-out;\n}\n";

package/dist/styles.js

@@ -9,9 +9,10 @@ export const DEFAULT_VIZ_CSS = `
 
 .viz-node-label,
 .viz-edge-label {
+  text-anchor: middle;
   dominant-baseline: middle;
   alignment-baseline: middle;
-  transform: translateY(-0.1em);
+  transform: translateY(0);
 }
 
 .viz-canvas svg {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vizcraft",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A fluent, type-safe SVG scene builder for composing nodes, edges, animations, and overlays with incremental DOM updates and no framework dependency.",
   "keywords": [
     "visualization",