@sagargupta1610/orrery 0.6.1 → 0.7.0

package/README.md

@@ -13,13 +13,13 @@ One YAML spec in; SVG, PNG, editable draw.io, a React component and an HTML view
 **[sagargupta.online/orrery](https://sagargupta.online/orrery/)**: every example in light and dark, with its spec and downloads.
 
 [![CI](https://github.com/Sagargupta16/orrery/actions/workflows/ci.yml/badge.svg)](https://github.com/Sagargupta16/orrery/actions/workflows/ci.yml)
-![Version](https://img.shields.io/badge/version-0.6.1-2563eb)
+![Version](https://img.shields.io/badge/version-0.7.0-2563eb)
 ![Icons](https://img.shields.io/badge/official_icons-16%2C682-2563eb)
 ![License](https://img.shields.io/badge/license-MIT-2563eb)
 
 </div>
 
-The diagram above is [docs/hero.yaml](docs/hero.yaml): 42 lines of YAML, laid out and rendered by orrery in the `stage` skin (`skin: stage`): each line draws itself in step order and every node lights up as its line arrives, on a loop. The rest of this README is the `classic` skin, the vendors' own diagram style, which animates a packet along each edge. GitHub keeps the animation; the PNG of the same spec is a still frame.
+The diagram above is [docs/hero.yaml](docs/hero.yaml): 42 lines of YAML, laid out and rendered by orrery in the `stage` skin (`skin: stage`): the groups light, then the tiles, then a packet with a comet tail runs the numbered steps in order, lighting each line behind it, and every step badge pops as its packet leaves, on a loop. The rest of this README is the `classic` skin, the vendors' own diagram style, which animates a packet along each edge. GitHub keeps the animation; the PNG of the same spec is a still frame.
 
 ## What you get
 
@@ -27,7 +27,7 @@ The diagram above is [docs/hero.yaml](docs/hero.yaml): 42 lines of YAML, laid ou
 - **Official conventions.** AWS groups follow the AWS Architecture Icons deck (borders, dashes, corner tiles, label placement, open arrowheads, numbered callouts); Google Cloud and Azure groups are measured from their own reference diagrams. Every value cites its source in [styles.md](skills/orrery/references/styles.md).
 - **Automatic layout.** The Eclipse Layout Kernel places nested boundaries, routes edges at right angles, joins fan-in and fan-out into trunks and keeps the order you wrote unless that would cross edges. No coordinates to write.
 - **Diagrams that move.** Animated SVG by default: packets travel every edge at one speed, numbered steps play as a story, line styles stay as drawn. `animate: flow` for marching dashes, `--static` for a still file.
-- **Two skins, one layout.** `classic` follows each vendor's diagram style; `skin: stage` (or `--skin stage`) draws the same boxes and lines on a dark or light showcase canvas with a dot texture and one tint, and animates them with `relay`: each line draws itself in turn and the node it reaches lights up. Vendor colors and every position stay the same.
+- **Two skins, one layout.** `classic` follows each vendor's diagram style; `skin: stage` (or `--skin stage`) draws the same boxes and lines as an animated scene: a hairline grid with one tint, ink tiles with monochrome icons, mono caps labels, dim wires and one story that plays along them. Every position stays the same; dark and light.
 - **Five outputs from one spec.** SVG for READMEs and docs, PNG for slides and chat (3x by default, sharp when zoomed), `.drawio` you can keep editing, a TSX component for React sites, and a standalone HTML viewer with dark mode, pan and pinch zoom.
 - **Made for agents.** A skill with a fast path and authoring rules, a JSON Schema, 392 short aliases (`aws:s3`, `azure:aks`, `k8s:deploy`), ranked icon search, and a validator whose every finding names the subject and the fix.
 - **No install.** The CLI, layout engine, PNG renderer, fonts and the official cloud packs ship in the skill folder (9 MB). Logo and glyph sets are not copied in: they load from their own npm libraries the first time a diagram uses them, verified by checksum and cached. Node.js 22 or newer is all it needs.

package/SKILL.md

@@ -11,7 +11,7 @@ description: >-
   flowchart into a clean diagram with real vendor icons.
 license: MIT
 metadata:
-  version: "0.6.1"
+  version: "0.7.0"
   author: Sagar Gupta
 ---
 
@@ -86,7 +86,7 @@ Follow this order. Write the spec early and let the validator steer; do not plan
 
 | Format | Use for |
 | --- | --- |
-| `svg` | READMEs, docs sites, wikis. Self-contained, scalable, with `<title>`/`<desc>` for screen readers. Animated by default: packets travel the edges, numbered steps play in order (`animate: none` or `--static` for a still file). `skin: stage` (or `--skin stage`) draws the same layout on a showcase canvas and animates it with `relay`; keep the default `classic` for vendor architecture docs and use `stage` for a README hero, a slide or a project page. |
+| `svg` | READMEs, docs sites, wikis. Self-contained, scalable, with `<title>`/`<desc>` for screen readers. Animated by default: packets travel the edges, numbered steps play in order (`animate: none` or `--static` for a still file). `skin: stage` (or `--skin stage`) draws the same layout as an animated scene in one tint (monochrome icons, mono caps labels, one story along the edges); keep the default `classic` for vendor architecture docs and use `stage` for a README hero, a slide or a project page. |
 | `png` | Slides, chat, tickets, anywhere SVG is not accepted. Always a still frame. Rendered with the bundled Inter font at 3x by default (`--scale`), so it stays sharp when zoomed or projected. |
 | `drawio` | Hand-editing in diagrams.net or the VS Code Draw.io extension; every node, group and edge is an editable cell with the official icon embedded. |
 | `tsx` | A React component (`export default function Name(props)`) for docs sites and apps. |

package/THIRD_PARTY_NOTICES.md

@@ -23,6 +23,7 @@ The `aws`, `azure`, `gcp` and `k8s` packs live in `skills/orrery/assets/icons/`
 | File | Source | License |
 | --- | --- | --- |
 | `skills/orrery/assets/fonts/Inter-Regular.ttf`, `Inter-SemiBold.ttf` | [Inter 4.1](https://github.com/rsms/inter) by Rasmus Andersson | SIL Open Font License 1.1, full text in `skills/orrery/assets/fonts/Inter-OFL.txt`. |
+| `skills/orrery/assets/fonts/GeistMono-Regular.ttf`, `GeistMono-Bold.ttf` | [Geist Mono 1.8.1](https://github.com/vercel/geist-font) by Vercel, the stage skin's face | SIL Open Font License 1.1, full text in `skills/orrery/assets/fonts/GeistMono-OFL.txt`. |
 
 ## Runtime engines
 

package/assets/fonts/GeistMono-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sagargupta1610/orrery",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Architecture and system design diagrams with official AWS, Azure, Google Cloud, Kubernetes and GitHub icons, rendered to SVG, PNG, draw.io, TSX and HTML.",
   "license": "MIT",
   "author": "Sagar Gupta (https://github.com/Sagargupta16)",

package/references/diagram.schema.json

@@ -17,12 +17,12 @@
     "arrowhead": { "enum": ["open", "filled"], "default": "open" },
     "animate": {
       "oneOf": [{ "type": "boolean" }, { "enum": ["packets", "flow", "relay", "none"] }],
-      "description": "Motion in SVG, TSX and HTML (PNG and draw.io stay still). packets: dots travel the edges, numbered steps in order; flow: marching dashes; relay: on one clock each line draws itself in turn and the node it reaches lights up; none: still. true is packets, false is none. Unset: packets for the classic skin, relay for stage."
+      "description": "Motion in SVG, TSX and HTML (PNG and draw.io stay still). packets: dots travel the edges, numbered steps in order; flow: marching dashes; relay: on one clock each line draws itself in turn and the node it reaches lights up; none: still. true is packets, false is none. Unset: packets for the classic skin, relay for stage (where relay and packets play the stage story)."
     },
     "skin": {
       "enum": ["classic", "stage"],
       "default": "classic",
-      "description": "classic: the vendors' own diagram styles. stage: a showcase look over the same layout (gradient canvas with a dot texture and one tint, translucent panels, vendor colors kept), animated with relay by default."
+      "description": "classic: the vendors' own diagram styles. stage: the same layout as an animated scene in one tint (hairline grid, monochrome icons on ink tiles, mono caps labels), whose story runs the numbered edges in step order, else the longest path."
     },
     "background": { "type": "string", "pattern": "^(#[0-9a-fA-F]{3}|#[0-9a-fA-F]{6}|transparent)$" },
     "legend": {

package/references/outputs.md

@@ -17,6 +17,8 @@ A `legend:` in the spec appears in every format: a box at the bottom right with
 - Animated by default. With `animate: packets` (the default) a small dot travels every directed edge from source to target at one speed, so long edges take longer; `<->` edges carry one each way and undirected `--` lines stay still. When edges carry `step:` numbers, those run one after another in step order and the badge of each step ripples as its packet leaves, so the diagram plays the walkthrough on a loop; the other edges keep their own staggered loops. Line styles are untouched: a dashed edge stays dashed. It is SMIL (`<animateMotion>`), with no CSS and no script, and GitHub keeps it in SVGs shown as images.
 - `animate: flow` draws marching dashes along every edge instead (a small CSS keyframe block); solid edges become dashed while they move. `animate: none`, or `render --static`, writes a still SVG.
 - `animate: relay` (the default of `skin: stage`) runs every line on one clock: each one draws itself in turn behind a dot (a mask reveals it, so a dashed line stays dashed), its arrowhead lights when it arrives, and the node it reaches lights up on a flat tint plate; everything holds until 92% of the loop and resets by 95%. Beats follow the `step:` numbers when there are any, else the distance from the nodes nothing points at, at most eight of them, so a loop lasts about three to six seconds. The base diagram is always drawn in full underneath, so a paused or still frame shows every line.
+- `skin: stage` draws its own scene for `relay` (its default) and `packets`: on one clock the groups light, then the tiles, then a packet with a comet tail runs the story (the numbered edges in step order, else the longest chain of directed edges), easing in and out of every hop and pausing at each node, while the wire it travels lights up behind it; each step badge pops as its packet leaves; at most two other edges run a small packet of their own; everything holds until 90% of the loop and is gone by 94%. A still stage frame (PNG, draw.io, `animate: none`) is the held frame: everything lit, no packets.
+- Stage text is Geist Mono when the viewer has it, else the system monospace font (SF Mono, Menlo, Consolas). Hairlines are one pixel wide at 880 px, the README column, and scale up for wider diagrams so they still read when the picture is shrunk to fit.
 
 ### In a README
 
@@ -33,7 +35,7 @@ Plain Markdown works too: `![Architecture](docs/architecture-light.svg)`.
 
 ## PNG
 
-- Rendered by resvg (WebAssembly) with the bundled Inter Regular and SemiBold, so the picture is identical on every machine.
+- Rendered by resvg (WebAssembly) with the bundled Inter Regular and SemiBold (and Geist Mono Regular and Bold for the stage skin), so the picture is identical on every machine.
 - `--scale` sets the pixel density (default 3, so a 1200 x 600 diagram becomes a 3600 x 1800 PNG that stays sharp when zoomed or projected). Use 1 or 2 for small chat previews, 4 or more for print. For pictures people will zoom into, prefer the SVG: it is vector and sharp at any zoom.
 - Animation is dropped; the PNG shows the static diagram.
 - Inter covers Latin, Greek and Cyrillic. For other scripts pass a font: `--font NotoSansJP-Regular.ttf` (repeatable).

package/references/spec.md

@@ -40,8 +40,8 @@ edges:
 | `layout.routing` | `orthogonal`, `polyline`, `spline` | `orthogonal` | Edge style. Orthogonal is the house style of AWS and Azure diagrams. |
 | `layout.layering` | `source`, `simplex` | `source` | `source` lines parallel branches up; `simplex` keeps edges shortest. Try the other one when a layout looks off. |
 | `layout.merge` | `true`, `false` | `true` | Edges that share an endpoint and have the same line, arrow and color join into one trunk with a single arrowhead; different styles keep their own ports. `false` gives every edge its own port. |
-| `animate` | `packets`, `flow`, `relay`, `none` (`true` is `packets`, `false` is `none`) | `packets` for `classic`, `relay` for `stage` | Motion in SVG, TSX and HTML; PNG and draw.io are always still. `packets`: a dot travels every directed edge, and numbered edges run one after another in step order as a loop; line styles stay as drawn. `flow`: marching dashes along every edge. `relay`: on one clock each line draws itself in turn (step order when edges carry `step:`, else outward from the entry points) and the node it reaches lights up; everything holds, then the loop resets. `render --animate <mode>` or `--static` overrides it. |
-| `skin` | `classic`, `stage` | `classic` | `classic`: the vendors' own diagram styles. `stage`: the same layout (every box and point identical) on a showcase canvas: a gradient with a dot texture and one tint, translucent panels in place of grey and white group fills, ringed step discs, `relay` motion by default. Vendor borders, tiles and icons keep their colors. Both themes. `render --skin` and `review --skin` override it. |
+| `animate` | `packets`, `flow`, `relay`, `none` (`true` is `packets`, `false` is `none`) | `packets` for `classic`, `relay` for `stage` | Motion in SVG, TSX and HTML; PNG and draw.io are always still. `packets`: a dot travels every directed edge, and numbered edges run one after another in step order as a loop; line styles stay as drawn. `flow`: marching dashes along every edge. `relay`: on one clock each line draws itself in turn (step order when edges carry `step:`, else outward from the entry points) and the node it reaches lights up; everything holds, then the loop resets. In `stage`, `relay` and `packets` both play the stage story (see `skin`). `render --animate <mode>` or `--static` overrides it. |
+| `skin` | `classic`, `stage` | `classic` | `classic`: the vendors' own diagram styles. `stage`: the same layout (every box and point identical) as an animated scene with no vendor hues: a hairline grid and one tint wash, structure in one color at a few alphas, icons as monochrome glyphs on ink tiles, labels in Geist Mono caps. Its motion is one story: the groups light, then the tiles, then a packet with a comet tail runs the numbered edges in step order (else the longest path), lighting each wire behind it; every step badge pops as its packet leaves, at most two other edges run a small packet, everything holds and loops. A node's or edge's `color:` becomes its lit tint. Both themes. `render --skin` and `review --skin` override it. |
 | `background` | quoted hex color or `transparent` | theme | `transparent` drops the background rectangle. |
 | `legend` | mapping of `solid`, `dashed`, `dotted` or `thick` to a short meaning | none | A key drawn bottom right that says what each line style means, for example `legend: { dashed: Asynchronous events, dotted: Replication }`. Keys are case-insensitive and rows keep the order you write them. An unknown style (`dashd`) or an empty meaning fails with DG107, and the fix names the closest style. Add an entry for every non-solid style the diagram uses (DG217 warns otherwise). Quote a meaning that contains a comma. |