@junoput01/junoui 0.7.0 → 0.9.0

package/docs/components/tree.md

@@ -0,0 +1,112 @@
+# Tree / outliner
+
+Nested rows at arbitrary depth with disclosure, selection and a reorder handle.
+Layer stacks, file browsers, settings trees, org charts, comment threads, nested
+navigation. `.juno-list` is flat and `.juno-accordion` is single-level; this
+nests.
+
+## Web
+
+```html
+<ul class="juno-tree" role="tree" aria-label="Scene">
+  <li
+    class="juno-tree__item"
+    role="treeitem"
+    aria-level="1"
+    aria-expanded="true"
+    aria-selected="false"
+  >
+    <div class="juno-tree__row">
+      <button class="juno-tree__caret" tabindex="-1" aria-hidden="true"></button>
+      <svg class="juno-icon juno-tree__icon" aria-hidden="true"><use href="…#juno-i-stack" /></svg>
+      <span class="juno-tree__label">Basemap</span>
+      <span class="juno-tree__count">3</span>
+      <span class="juno-tree__trail"><span class="juno-badge juno--nominal">ON</span></span>
+      <button class="juno-tree__handle" aria-label="Reorder Basemap"></button>
+    </div>
+    <ul class="juno-tree__group" role="group">
+      <li class="juno-tree__item" role="treeitem" aria-level="2" aria-selected="true">…</li>
+    </ul>
+  </li>
+</ul>
+```
+
+| Class / prop         | Effect                                                                   |
+| -------------------- | ------------------------------------------------------------------------ |
+| `.juno-tree`         | The `role="tree"` root. Sets `--juno-tree-indent`.                       |
+| `.juno-tree__item`   | One `role="treeitem"`. Carries `aria-expanded` / `-level` / `-selected`. |
+| `.juno-tree__group`  | A nested `role="group"`. One indent step; depth is structural.           |
+| `.juno-tree__row`    | The focusable line. Holds the tap floor.                                 |
+| `.juno-tree__caret`  | Disclosure triangle; rotates on `aria-expanded="true"`.                  |
+| `.juno-tree__count`  | Count badge slot on a group row.                                         |
+| `.juno-tree__trail`  | Trailing-control slot, as on `.juno-list__row`.                          |
+| `.juno-tree__handle` | Reorder affordance and its hit area.                                     |
+| `--juno-tree-indent` | One indent step (default `space.16`).                                    |
+
+Expansion and collapse are `aria-expanded` on the item — the app owns it, as with
+`aria-pressed` elsewhere in junoui. No JS is needed for the visuals.
+
+## The ARIA contract
+
+This is the half apps get wrong, so it is stated rather than implied.
+
+- **`role="tree"`** on the root, with an accessible name (`aria-label` or
+  `aria-labelledby`). **`role="group"`** on every nested list, **`role="treeitem"`**
+  on every item.
+- **`aria-level`** on every item, 1-based. Required: the nesting is visual, and
+  a screen reader does not infer depth from indentation.
+- **`aria-expanded`** on branches only. **Its absence is what makes an item a
+  leaf** — do not put `aria-expanded="false"` on a childless row, or it is
+  announced as a collapsed branch that never opens.
+- **`aria-selected`** for what the next action applies to. Distinct from
+  `aria-current` (which node you are _on_) and from `:hover`. A layer stack has
+  all three at once, which is why they paint differently.
+- **Roving tabindex**: exactly one row has `tabindex="0"`, the rest `-1`. One Tab
+  stop for the whole tree, not one per node.
+- **Multi-select** is `aria-multiselectable="true"` on the root plus
+  `aria-selected` on each item.
+
+### Keyboard
+
+| Key          | Action                                                          |
+| ------------ | --------------------------------------------------------------- |
+| ↓ / ↑        | Next / previous **visible** item, across levels                 |
+| →            | Closed branch: expand. Open branch: first child. Leaf: nothing. |
+| ←            | Open branch: collapse. Otherwise: parent.                       |
+| Home / End   | First / last visible item                                       |
+| Enter, Space | Select                                                          |
+| `*`          | Expand every sibling at this level                              |
+
+A tree without this is a list of buttons wearing tree roles. Because it is
+behaviour, no stylesheet can ship it — so junoui ships a stateless enhancer:
+
+```js
+import { enhanceTree } from 'junoui/tree';
+const stop = enhanceTree(document.querySelector('.juno-tree'));
+```
+
+It stores nothing: expansion and selection live on the DOM and belong to you. It
+moves focus and dispatches `juno-tree-toggle` / `juno-tree-select` (bubbling,
+cancelable, `detail.item`) — it does **not** expand, collapse, select or reorder,
+because in a real outliner expanding a node may need to load it.
+
+## Touch
+
+The row holds `--juno-size-tap-min`, which becomes the 44px comfortable target on
+a coarse pointer. The caret and the handle **paint** small so a dense tree stays
+dense, and grow only their **hit area** with a transparent overlay — a 44px
+painted caret would swallow the row it sits in.
+
+**The reorder handle is explicit, and that is not a style choice.** Long-press-drag
+is the obvious gesture and the wrong one: a tree sitting on or beside a pan/zoom
+surface has to let the pan win, and a gesture that means "reorder" here and "pan"
+one pixel to the left is a coin flip. The handle carries `touch-action: none` on
+itself alone, so dragging it never scrolls while the rest of the row still pans.
+
+## What junoui does not do
+
+Reorder **logic** — the drop calculation, the model mutation, autoscroll. junoui
+ships the affordance, its hit area, and the drop-target styling
+(`data-juno-drop="before|after|into"`, plus `data-juno-dragging`). A drop lands
+_between_ rows by default: the edge line says "between", a filled highlight says
+"into this one", and those are different operations in a tree.

package/docs/conformance-kit.md

@@ -121,9 +121,21 @@ file that deliberately names wrong classes, and 3 consumer-owned names.
    Generated, the typo class of defect cannot exist and the divergence becomes
    a visible decision.
 
-**Open question for review:** the two lists should probably become one set with
-a per-property opt-out, but "which primitives want `manipulation`" and "which
-want the highlight killed" may genuinely differ. Needs a decision, not a merge.
+**Shipped**, and the question is answered: **one set**, decided on the rules'
+own rationales rather than merged for tidiness. The tap-highlight rule exists so
+a UA square "never flashes past a rounded control on tap", and every name the
+shorter list omitted is a rounded tappable — `.juno-chip` and
+`.juno-pillbar__overflow` are 999px pills, `.juno-seg__opt` and
+`.juno-toggle-btn` carry `radius-3`. The omission had no stated reason and the
+rationale covers them, so it was an omission, not a decision.
+
+`src/css/touch-surfaces.mjs` declares the set; `bundle-css.mjs` emits both
+rules. `touch-action` stays out of the coarse block (a hybrid device reports a
+fine primary pointer while still taking touch input); the highlight stays in it.
+
+The guard checks the declared set against the **component sources**, not the
+manifest — the manifest is built from the bundle, and the bundle now contains
+these lists, so a misspelled member would vouch for itself there.
 
 ## C. Pointer-first responsiveness
 
@@ -225,17 +237,17 @@ the guard that would have failed did not exist on that branch (20260826-039).
 
 ## Sequencing
 
-| Slice | Contents                                     | Depends on |
-| ----- | -------------------------------------------- | ---------- |
-| ~~1~~ | ~~A (manifest + helper)~~ — **shipped**      | —          |
-| 2     | B2 (generate the `:where()` lists)           | 1          |
-| 3     | C (one pointer-first mechanism)              | —          |
-| 4     | D (buckets + floating chrome owns its inset) | 3          |
-| 5     | E (pillbar budget)                           | —          |
-| 6     | F (doctor)                                   | 1, 3       |
-| 7     | G (checklist, reduced to what F checks)      | 6          |
-
-Slice 1, B1 and E-for-dock are done. 024–027 are absorbed and closed.
+| Slice | Contents                                             | Depends on |
+| ----- | ---------------------------------------------------- | ---------- |
+| ~~1~~ | ~~A (manifest + helper)~~ — **shipped**              | —          |
+| ~~2~~ | ~~B2 (generate the `:where()` lists)~~ — **shipped** | 1          |
+| 3     | C (one pointer-first mechanism)                      | —          |
+| 4     | D (buckets + floating chrome owns its inset)         | 3          |
+| 5     | E (pillbar budget)                                   | —          |
+| 6     | F (doctor)                                           | 1, 3       |
+| 7     | G (checklist, reduced to what F checks)              | 6          |
+
+Slices 1 and 2, B1 and E-for-dock are done. 024–027 are absorbed and closed.
 
 **Review asks:** the three open questions above (A's public subset, B's two
 lists, C's condition), and whether slice 6 is worth its cost before slice 1

package/docs/icon-subsetting.md

@@ -34,6 +34,21 @@ const svg = subsetSprite(sprite, ['gear', 'x', 'squares-four']);
   decoration.
 - Node-only tooling on purpose: subsetting at runtime would defeat the point.
 
+## What is in the set
+
+Phosphor Icons (bold), MIT — one family, one licence, vendored under
+`src/icons/` with the licence beside them. Media, files, system and status,
+plus a spatial group for map, GIS, CAD and 3D consumers: `crosshair`,
+`crosshair-simple`, `ruler`, `polygon`, `path`, `map-pin`, `map-trifold`,
+`stack`, `globe`, `mountains`, `cube`, `compass`, `scissors`, `selection`.
+
+**Adding an icon means adding a Phosphor bold glyph.** Not "an icon that looks
+similar" — the set's value is that it is one family, and a glyph from elsewhere
+arrives on a different canvas, at a different optical weight, often carrying its
+own `fill`. `test/icons-family.test.mjs` enforces the contract: one `0 0 256 256`
+canvas, colour inherited via `currentColor`, no `<style>`, no classes, no
+external references, and the sprite and `src/icons/` agreeing in both directions.
+
 ## Vite
 
 ```js
@@ -76,7 +91,7 @@ installSprite(sprite);
 | Export                 | Carries                   | Use                                           |
 | ---------------------- | ------------------------- | --------------------------------------------- |
 | `junoui/icons/install` | ~1 kB, no icons           | You subset. Pass your own sprite.             |
-| `junoui/icons/inline`  | the full 66-symbol sprite | You don't subset. Import for the side effect. |
+| `junoui/icons/inline`  | the full 80-symbol sprite | You don't subset. Import for the side effect. |
 
 - **Both are id-guarded on the same `juno-icon-sprite` holder**, so importing
   the full module alongside a subset does not produce two hidden holders

package/docs/native.md

@@ -1,4 +1,4 @@
-# Native mobile (Android / iOS)
+# Native (Android / iOS / Rust)
 
 Native platforms can't parse `oklch()`, so colors are pre-converted to sRGB hex
 during the build. Values match the web rendering.
@@ -43,6 +43,43 @@ let body: CGFloat = JunoTokens.fontSize14
 - Colors are `UIColor` constants named `<palette><Mode><Role>` (camelCase).
 - Dimensions are `CGFloat` constants.
 
+## Rust
+
+Any native Rust stack — egui, iced, Slint, Bevy, Dioxus desktop, Tauri's Rust
+side. Vendor `dist/rust/juno_tokens.rs` into your crate, or add junoui as a
+build dependency and copy it in `build.rs`.
+
+```rust
+include!(concat!(env!("OUT_DIR"), "/juno_tokens.rs")); // or `mod juno_tokens;`
+
+let bg = STANDARD_DARK.s0.to_f32_array();   // a whole theme, picked at runtime
+let accent = STANDARD_DARK_ACTIVE;          // or one role, flat
+let gap = SPACE_16;                         // f32 px
+let fade = MOTION_DURATION_BASE_MS;         // f32 milliseconds
+```
+
+| Emitted as                                         | From                                                 |
+| -------------------------------------------------- | ---------------------------------------------------- |
+| `Rgba` (`hex()`, `to_f32_array()`, `with_alpha()`) | every color token                                    |
+| `Palette` + one const per palette/mode             | the same colors, grouped                             |
+| `f32`                                              | `px` lengths                                         |
+| `f32`, suffixed `_MS`                              | `ms` durations                                       |
+| `i32`                                              | whole numbers (z-index, font weight)                 |
+| `f32`                                              | ratios (opacity, line height)                        |
+| `&str`                                             | CSS-authored values, verbatim (shadows, font stacks) |
+
+**`to_f32_array()` is sRGB-encoded, not linear.** If your pipeline wants linear
+(wgpu with a non-sRGB surface format), convert at your boundary — junoui cannot
+know which surface you created.
+
+**Shadows and font stacks are shipped unparsed.** A Rust renderer cannot consume
+`0 4px 14px rgb(0 0 0 / 0.35)` directly; they are here so the values live in one
+place, not as ready-made native input.
+
+**Do not transcribe these values into your own crate.** That copy is exactly
+what this target exists to stop — it goes stale on the first patch release and
+no lint catches it.
+
 ## Keeping in sync
 
 Re-run `npm run build` in junoui and re-copy the files (or script the copy in your

package/docs/tokens-reference.md

@@ -113,6 +113,21 @@ Color encodes status, never decoration. Each role has exactly one meaning.
 | `shadow.2` | `0 4px 14px rgb(0 0 0 / 0.35)` | `var(--juno-shadow-2)` | `JunoTokens.shadow2` |
 | `shadow.3` | `0 12px 32px rgb(0 0 0 / 0.50)` | `var(--juno-shadow-3)` | `JunoTokens.shadow3` |
 
+### ink
+
+| Token | Value | CSS variable | Flutter / iOS |
+|---|---|---|---|
+| `ink.canvas.ink` | `#FFFFFF` | `var(--juno-ink-canvas-ink)` | `JunoTokens.inkCanvasInk` |
+| `ink.canvas.halo` | `#000000` | `var(--juno-ink-canvas-halo)` | `JunoTokens.inkCanvasHalo` |
+| `ink.canvas.halo-width` | `2px` | `var(--juno-ink-canvas-halo-width)` | `JunoTokens.inkCanvasHalo-width` |
+| `ink.canvas.halo-width-lg` | `3px` | `var(--juno-ink-canvas-halo-width-lg)` | `JunoTokens.inkCanvasHalo-width-lg` |
+| `ink.canvas.scrim` | `0.28` | `var(--juno-ink-canvas-scrim)` | `JunoTokens.inkCanvasScrim` |
+| `ink.vivid.nominal` | `oklch(76% 0.28 148)` | `var(--juno-ink-vivid-nominal)` | `JunoTokens.inkVividNominal` |
+| `ink.vivid.active` | `oklch(76% 0.24 205)` | `var(--juno-ink-vivid-active)` | `JunoTokens.inkVividActive` |
+| `ink.vivid.target` | `oklch(70% 0.30 328)` | `var(--juno-ink-vivid-target)` | `JunoTokens.inkVividTarget` |
+| `ink.vivid.caution` | `oklch(82% 0.20 82)` | `var(--juno-ink-vivid-caution)` | `JunoTokens.inkVividCaution` |
+| `ink.vivid.warning` | `oklch(68% 0.28 25)` | `var(--juno-ink-vivid-warning)` | `JunoTokens.inkVividWarning` |
+
 ### Motion
 
 | Token | Value | CSS variable | Flutter / iOS |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@junoput01/junoui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "junoui — a token-driven design system. Color carries semantic meaning, never decoration: every hue has one assigned role (NOMINAL / ACTIVE / TARGET / CAUTION / WARNING). Ships multi-platform tokens (CSS, SCSS, JS/TS, JSON, Android, iOS, Flutter) plus a framework-agnostic CSS component layer.",
   "type": "module",
   "license": "MIT",
@@ -48,8 +48,11 @@
     "./android/dimens": "./dist/android/dimens.xml",
     "./ios": "./dist/ios/JunoTokens.swift",
     "./flutter": "./dist/flutter/juno_tokens.dart",
+    "./rust": "./dist/rust/juno_tokens.rs",
     "./icons": "./dist/icons/juno-icons.svg",
     "./subset": "./tools/subset-sprite.mjs",
+    "./tree": "./tools/tree.mjs",
+    "./gizmo": "./tools/gizmo.mjs",
     "./testing": "./tools/testing.mjs",
     "./classes.json": "./dist/classes.json",
     "./icons/inline": "./dist/icons/inline.js",

package/src/css/base.css

@@ -189,47 +189,18 @@ code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
      `.juno-input` font-size later in the bundle. It did, silently, until
      20260815-006's coarse-pointer project measured it. */
 
-  /* Kill the UA tap-highlight square on the interactive surfaces so it never
-     flashes past a rounded control on tap. Consumers were adding this by hand
-     per component; make it a first-class touch default. See 20260802-020. */
-  :where(
-    .juno-btn,
-    .juno-dock__item,
-    .juno-pillbar__item,
-    .juno-tabs__tab,
-    .juno-list__row,
-    .juno-menu__item
-  ) {
-    -webkit-tap-highlight-color: transparent;
-  }
+  /* The tap-highlight default that used to live here is GENERATED now, from
+     src/css/touch-surfaces.mjs, together with the touch-action default that
+     shares its member list. Two hand-maintained lists had drifted from the
+     classes and from each other; see that file. */
 }
 
-/* Tappable primitives opt out of double-tap-to-zoom. A browser that still
-   recognises that gesture has to WAIT after the first tap to see whether a
-   second one is coming, which reads as a late, mushy tap on exactly the
-   surfaces a phone UI is built from. `manipulation` keeps panning and
-   pinch-zoom (so the page stays zoomable — never `none` here, that would be an
-   a11y regression) and drops only the double-tap.
-   NOT inside the pointer:coarse block above: a hybrid device (touch laptop,
-   iPad with a trackpad) reports a fine primary pointer while still taking
-   touch input, and the property is inert on a mouse anyway.
-   Community convention — no primary Apple/WebKit source names it; see
-   docs/ios-conformance.md. Named components only, so a consumer's own elements
-   are untouched. See 20260803-038. */
-:where(
-  .juno-btn,
-  .juno-dock__item,
-  .juno-pillbar__item,
-  .juno-pillbar__overflow,
-  .juno-tabs__tab,
-  .juno-list__row,
-  .juno-menu__item,
-  .juno-seg__opt,
-  .juno-chip,
-  .juno-toggle-btn
-) {
-  touch-action: manipulation;
-}
+/* The touch defaults that used to be two hand-maintained `:where()` lists here
+   are GENERATED from src/css/touch-surfaces.mjs and emitted straight after this
+   file. Both lists had drifted — from the classes (`.juno-seg__option`,
+   `.juno-list__item`: neither exists, so `:where()` matched nothing and the
+   rule parsed anyway) and from each other. One declared set now feeds both.
+   See 20260826-024 and docs/conformance-kit.md. */
 
 /* Gesture-owned surfaces — for an element whose pointer events are fully
    driven by app JS (drag-pan, pinch-zoom, swipe classification: a state

package/src/css/components/canvas-ink.css

@@ -0,0 +1,97 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Canvas ink (marks drawn over arbitrary imagery)
+ *  For text and vector ink sitting on a photo, a map, a video frame or a
+ *  camera feed: anywhere the background is CONTENT rather than one of
+ *  junoui's surfaces.
+ *
+ *  WHY IT IS NOT JUST A COLOUR. junoui's whole contrast story assumes a
+ *  controlled surface, s0 through s3 — every role colour's ratio is
+ *  computed against a known background. Over imagery there is no known
+ *  background. In one orthophoto a black shadow and a snowfield are
+ *  adjacent pixels, so no single ink colour is legible and no contrast
+ *  ratio can be asserted about one. The answer is a PAIR that spans the
+ *  luminance range: over a light backing the halo carries the contrast,
+ *  over a dark one the ink does. Neither half works alone, which is why
+ *  they are applied together by one class.
+ *
+ *  NOT THEMED, on purpose. A satellite image does not get lighter because
+ *  the user chose light mode. Theming this pair would make it track the
+ *  app's surface, which is precisely the background it is NOT over.
+ *  Usage:
+ *    <figcaption class="juno-canvas-ink">Sector 7 · 1.2 km</figcaption>
+ *    <svg class="juno-canvas-ink"><path class="juno-canvas-ink__stroke" …/></svg>
+ *    <div class="juno-canvas-scrim">…chrome floating over the content…</div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* Text. Four offset shadows rather than one blur: a blurred shadow fades at
+   the glyph's corners, which is exactly where a thin stroke needs the most
+   help, and it costs the same. `paint-order` is for SVG text, where a real
+   stroke is available and better. */
+.juno-canvas-ink {
+  color: var(--juno-ink-canvas-ink);
+  paint-order: stroke fill;
+  stroke: var(--juno-ink-canvas-halo);
+  stroke-width: var(--juno-ink-canvas-halo-width);
+  text-shadow:
+    var(--juno-ink-canvas-halo-width) 0 0 var(--juno-ink-canvas-halo),
+    calc(-1 * var(--juno-ink-canvas-halo-width)) 0 0 var(--juno-ink-canvas-halo),
+    0 var(--juno-ink-canvas-halo-width) 0 var(--juno-ink-canvas-halo),
+    0 calc(-1 * var(--juno-ink-canvas-halo-width)) 0 var(--juno-ink-canvas-halo);
+}
+
+/* Display sizes: a 2px halo reads as a hairline against a heavier stroke. */
+.juno-canvas-ink--lg {
+  stroke-width: var(--juno-ink-canvas-halo-width-lg);
+  text-shadow:
+    var(--juno-ink-canvas-halo-width-lg) 0 0 var(--juno-ink-canvas-halo),
+    calc(-1 * var(--juno-ink-canvas-halo-width-lg)) 0 0 var(--juno-ink-canvas-halo),
+    0 var(--juno-ink-canvas-halo-width-lg) 0 var(--juno-ink-canvas-halo),
+    0 calc(-1 * var(--juno-ink-canvas-halo-width-lg)) 0 var(--juno-ink-canvas-halo);
+}
+
+/* Vector ink — measurement lines, selection outlines. Two passes: the halo
+   is the same path drawn wider underneath. In SVG give the halo element
+   this class and the mark element __stroke; in canvas, stroke twice. */
+.juno-canvas-ink__halo {
+  fill: none;
+  stroke: var(--juno-ink-canvas-halo);
+  stroke-width: calc(var(--juno-ink-canvas-halo-width) * 2);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.juno-canvas-ink__stroke {
+  fill: none;
+  stroke: var(--juno-ink-canvas-ink);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Status over canvas. The themed role hues are chosen against s0–s3 and wash
+   out over a saturated backdrop, so these are the same hues at raised chroma.
+   Louder than the panel roles by design — they will look wrong on a panel. */
+.juno-canvas-ink--nominal { color: var(--juno-ink-vivid-nominal); }
+.juno-canvas-ink--active { color: var(--juno-ink-vivid-active); }
+.juno-canvas-ink--target { color: var(--juno-ink-vivid-target); }
+.juno-canvas-ink--caution { color: var(--juno-ink-vivid-caution); }
+.juno-canvas-ink--warning { color: var(--juno-ink-vivid-warning); }
+
+/* Chrome floating over live content. Deliberately NOT --juno-opacity-scrim
+   (0.62): that value suppresses a modal's background, and here the background
+   is the thing the chrome is annotating — greying it out defeats the purpose. */
+.juno-canvas-scrim {
+  background: color-mix(in srgb, var(--juno-s0) calc(var(--juno-ink-canvas-scrim) * 100%), transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+/* A translucent bar over moving content is the case where reduced
+   transparency matters most — the motion behind the text is the problem, not
+   the blur. Fall back to the opaque surface. */
+@media (prefers-reduced-transparency: reduce) {
+  .juno-canvas-scrim {
+    background: var(--juno-s0);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}