loading-state-zoo 0.3.0 → 0.4.0

package/docs/AI.md

@@ -5,8 +5,8 @@
 ## Package identity
 
 - Package name: `loading-state-zoo`
-- Version: `0.3.0`
-- 32 loading-pattern UI components. All are *web components* (custom elements) with a thin React wrapper plus a standalone CSS theme.
+- Version: `0.4.0`
+- 30 loading-pattern UI components. All are *web components* (custom elements) with a thin React wrapper plus a standalone CSS theme.
 - License: MIT. No data collection of any kind.
 
 ## Entry points (exact import strings)
@@ -40,24 +40,26 @@
    - Bars/skeletons: use `width` + `height` instead (Indeterminate 160×6, Skeleton 120×28), Equalizer uses `size` = bar height (22).
 7. **Progress ring and progress bar are static** (driven by `percent` 0–100, clamped; `role="progressbar"` with live `aria-valuenow`). They do not animate by themselves.
 
-## Component registry (32)
+## Component registry (30)
 
 Dots: `lz-bouncing-dots`, `lz-typing-dots`, `lz-wave-dots`, `lz-helix-dots`, `lz-dot-grid-wave`, `lz-ellipsis`
-Spinners: `lz-arc-spinner`, `lz-material-double-arc`, `lz-scan-sweep`, `lz-orbit-dots`, `lz-orbit-ring-dots`
-Orbs: `lz-pulsing-orb`, `lz-morphing-orb`, `lz-siri-orb`, `lz-dot-orb`, `lz-planet-orb`, `lz-aura-orb`
+Spinners: `lz-arc-spinner`, `lz-material-double-arc`, `lz-scan-sweep`, `lz-orbit-dots`, `lz-orbit-ring-dots`, `lz-sonar`
+Orbs: `lz-ios-27-orb`
+AI: `lz-ai-orb`, `lz-ai-thinking`, `lz-ai-neural`
 Shapes: `lz-eyes`, `lz-morphing-square`, `lz-breathing-pulse`
 Bars & rings: `lz-equalizer`, `lz-progress-ring`, `lz-progress-bar`, `lz-indeterminate-progress-bar`, `lz-activity-rings`
-Music: `lz-waveform`, `lz-vinyl`, `lz-sonar`, `lz-music-note`
+Music: `lz-waveform`, `lz-vinyl`, `lz-music-note`
 Skeletons: `lz-skeleton-shimmer`, `lz-skeleton-card`, `lz-skeleton-list`
 
 Every element: shadow DOM (`mode:"open"`), inline `<style>` per element (shared keyframes string), geometry in `em` relative to host `font-size: var(--lz-size, 44px)`. Sized elements (progress bars, skeletons) take explicit `width`/`height` instead. New families:
 
-- **Orbs** use `accent` as their primary hue (default `#0a84ff`); `lz-dot-orb` and `lz-planet-orb` also accept `count`; `lz-planet-orb`/`lz-aura-orb` use `color` for moons/second orb.
-- **Music** patterns: `lz-waveform` (`count`, `bar-width`, `gap`), `lz-vinyl` (`accent` = label/stylus, `color` = tonearm), `lz-sonar` (`count` rings, `accent` = ring, `color` = core), `lz-music-note` (`count` notes).
+- **`lz-ios-27-orb`** renders exactly 27 dots (14 outer + 8 mid + 4 inner + 1 center) wired into a ring/spiral layout. The bright glow travels dot-to-dot (per-dot `lz-ios-glow`, negative delays `-(idx/27)*3.2s`). Dot color mixes between `--lz-color` (cool pole) and `--lz-accent` (warm pole) by angle. Geometry uses inline absolute positioning (`left`/`top` in em, negative margins) so the animated `transform`/`opacity` effects are never overridden. No `count` attribute — 27 is fixed.
+- **AI patterns:** `lz-ai-orb` (breathing gradient sphere + orbiting light dot + sparkles), `lz-ai-thinking` (pill field with typing dots + rotating conic-gradient ring via `mask-composite: exclude`), `lz-ai-neural` (dot grid like `lz-dot-grid-wave` but with a diagonal wave, delays `-(r+c)*0.12s`; details: alternating checking/resting dots via `color-mix` of `--lz-accent` and `--lz-color`).
+- **Orbs** now only `lz-ios-27-orb`: `accent` + `color` pick the two hue poles; `--lz-ios-fade`/`--lz-ios-min`/`--lz-ios-peak` tune the glow.
+- **`lz-sonar`** moved to the Spinners family (radar use).
+- **Music** patterns: `lz-waveform` (`count`, `bar-width`, `gap`), `lz-vinyl` (label/spindle/sheen rotate with the disc; `accent` = label/stylus, `color` = tonearm), `lz-music-note` (drawn note = head + stem + flag, `count` notes).
 - **`lz-activity-rings`** is SVG-based (role `img`), defaults to Apple watch hues: outer `accent` `#fa114f`, middle `color` `#30d158`, inner `color-weak` `#32d7ff`; three rings rotate via `lz-spin` / reverse at distinct durations.
 
-Every element: shadow DOM (`mode:"open"`), inline `<style>` per element (shared keyframes string), geometry in `em` relative to host `font-size: var(--lz-size, 44px)`. Sized elements (progress bars, skeletons) take explicit `width`/`height` instead.
-
 ## Minimal valid usage
 
 Web:

package/docs/components.json

@@ -1,9 +1,9 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$comment": "loading-state-zoo v0.3.0 — machine-readable spec. Source of truth for all 32 components. Defaults match the rendered site.",
+  "$comment": "loading-state-zoo v0.4.0 — machine-readable spec. Source of truth for all 30 components. Defaults match the rendered site.",
   "package": {
     "name": "loading-state-zoo",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "entrypoints": {
       "webComponents": "loading-state-zoo",
       "react": "loading-state-zoo/react",
@@ -287,7 +287,7 @@
       "reactComponent": "ScanSweep",
       "category": "Spinners",
       "role": "status",
-      "description": "Concentric rings with a sweeping radar beam.",
+      "description": "Concentric rings with crosshair ticks, a counter-rotating dial and a sweeping radar beam.",
       "useCases": ["scanning", "searching", "syncing"],
       "defaults": { "size": 44, "color": "#f5f5f7", "speed": 1 },
       "attributes": [
@@ -648,159 +648,120 @@
       }
     },
     {
-      "id": "pulsing-orb",
-      "tag": "lz-pulsing-orb",
-      "reactComponent": "PulsingOrb",
+      "id": "ios-27-orb",
+      "tag": "lz-ios-27-orb",
+      "reactComponent": "Ios27Orb",
       "category": "Orbs",
       "role": "status",
-      "description": "A glowing gradient orb that breathes in and out.",
-      "useCases": ["ambient loads", "hero panels", "app splash"],
-      "defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
+      "description": "An orb of 27 dots where a bright glow travels from one touched dot to the next, spiraling inward like an iOS listening animation.",
+      "useCases": ["voice assistants", "AI thinking", "holographic waits"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
       "attributes": [
         { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
         { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
         { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
       ],
       "cssVars": [
         { "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
-        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Orb glow color" }
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Warm pole hue" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Cool pole hue" }
       ],
       "keyframeVars": [
-        { "name": "--lz-orb-scale", "default": "1.16", "purpose": "Peak breathe scale" },
-        { "name": "--lz-orb-fade", "default": "0.88", "purpose": "Peak breathe opacity" }
-      ],
-      "examples": {
-        "html": "<lz-pulsing-orb size=\"64\" accent=\"#ff375f\"></lz-pulsing-orb>",
-        "react": "<PulsingOrb size={64} accent=\"#ff375f\" />"
-      }
-    },
-    {
-      "id": "morphing-orb",
-      "tag": "lz-morphing-orb",
-      "reactComponent": "MorphingOrb",
-      "category": "Orbs",
-      "role": "status",
-      "description": "A blob that continuously morphs its silhouette between rounded shapes.",
-      "useCases": ["creative waits", "brand moments", "game loading"],
-      "defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
-      "attributes": [
-        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
-        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
-        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
-      ],
-      "cssVars": [
-        { "name": "--lz-size", "default": "44px", "purpose": "Blob box size" },
-        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Blob color" }
+        { "name": "--lz-ios-fade", "default": "0.2", "purpose": "Resting dot opacity" },
+        { "name": "--lz-ios-min", "default": "0.5", "purpose": "Resting dot scale" },
+        { "name": "--lz-ios-peak", "default": "1.25", "purpose": "Glowing dot scale" }
       ],
-      "keyframeVars": [],
       "examples": {
-        "html": "<lz-morphing-orb size=\"64\" accent=\"#30d158\"></lz-morphing-orb>",
-        "react": "<MorphingOrb size={64} accent=\"#30d158\" />"
+        "html": "<lz-ios-27-orb size=\"64\" accent=\"#64d2ff\" color=\"#bf5af2\"></lz-ios-27-orb>",
+        "react": "<Ios27Orb size={64} accent=\"#64d2ff\" color=\"#bf5af2\" />"
       }
     },
     {
-      "id": "siri-orb",
-      "tag": "lz-siri-orb",
-      "reactComponent": "SiriOrb",
-      "category": "Orbs",
+      "id": "ai-orb",
+      "tag": "lz-ai-orb",
+      "reactComponent": "AiOrb",
+      "category": "AI",
       "role": "status",
-      "description": "A Siri-style orb with a multicolored conic sheen swirling inside.",
-      "useCases": ["voice assistants", "AI thinking", "smart waits"],
-      "defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
+      "description": "A breathing gradient sphere with an orbiting light dot and twinkling sparkles — an AI assist orb.",
+      "useCases": ["AI assistants", "generative waits", "smart ready states"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
       "attributes": [
         { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
         { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
-        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
-      ],
-      "cssVars": [
-        { "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
-        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Sheen hue" }
-      ],
-      "keyframeVars": [],
-      "examples": {
-        "html": "<lz-siri-orb size=\"72\" accent=\"#64d2ff\"></lz-siri-orb>",
-        "react": "<SiriOrb size={72} accent=\"#64d2ff\" />"
-      }
-    },
-    {
-      "id": "dot-orb",
-      "tag": "lz-dot-orb",
-      "reactComponent": "DotOrb",
-      "category": "Orbs",
-      "role": "status",
-      "description": "A ring of shimmering dots arranged into an orb silhouette.",
-      "useCases": ["orbit waits", "spatial loading", "gaming screens"],
-      "defaults": { "size": 44, "count": 8, "color": "#f5f5f7", "speed": 1 },
-      "attributes": [
-        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
-        { "name": "count", "reactProp": "count", "type": "number", "unit": "dots", "default": 8 },
         { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
         { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
       ],
       "cssVars": [
         { "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
-        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Dot color" }
-      ],
-      "keyframeVars": [
-        { "name": "--lz-dot-min", "default": "0.7", "purpose": "Resting dot scale" },
-        { "name": "--lz-orb-fade", "default": "0.14", "purpose": "Resting dot opacity" }
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Orb gradient hue" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Sparkle color" }
       ],
+      "keyframeVars": [],
       "examples": {
-        "html": "<lz-dot-orb count=\"12\" color=\"#ff9f0a\"></lz-dot-orb>",
-        "react": "<DotOrb count={12} color=\"#ff9f0a\" />"
+        "html": "<lz-ai-orb size=\"64\" accent=\"#bf5af2\"></lz-ai-orb>",
+        "react": "<AiOrb size={64} accent=\"#bf5af2\" />"
       }
     },
     {
-      "id": "planet-orb",
-      "tag": "lz-planet-orb",
-      "reactComponent": "PlanetOrb",
-      "category": "Orbs",
+      "id": "ai-thinking",
+      "tag": "lz-ai-thinking",
+      "reactComponent": "AiThinking",
+      "category": "AI",
       "role": "status",
-      "description": "A glowing planet core with small moons orbiting it.",
-      "useCases": ["space motifs", "science apps", "sci-fi waits"],
-      "defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "count": 2, "speed": 1 },
+      "description": "A rounded thinking field with typing dots wrapped in a rotating accent ring.",
+      "useCases": ["chat completions", "AI replies", "waiting on answers"],
+      "defaults": { "size": 40, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
       "attributes": [
-        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 40 },
         { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
         { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
-        { "name": "count", "reactProp": "count", "type": "number", "unit": "moons", "default": 2 },
         { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
       ],
       "cssVars": [
-        { "name": "--lz-size", "default": "44px", "purpose": "Orb box size" },
-        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Planet color" },
-        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Moon color" }
+        { "name": "--lz-size", "default": "40px", "purpose": "Field height" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Rotating ring color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Typing dot color" },
+        { "name": "--lz-surface", "default": "rgba(255,255,255,0.07)", "purpose": "Field background" }
       ],
       "keyframeVars": [],
       "examples": {
-        "html": "<lz-planet-orb count=\"3\" accent=\"#bf5af2\" color=\"#64d2ff\"></lz-planet-orb>",
-        "react": "<PlanetOrb count={3} accent=\"#bf5af2\" color=\"#64d2ff\" />"
+        "html": "<lz-ai-thinking size=\"44\" accent=\"#30d158\"></lz-ai-thinking>",
+        "react": "<AiThinking size={44} accent=\"#30d158\" />"
       }
     },
     {
-      "id": "aura-orb",
-      "tag": "lz-aura-orb",
-      "reactComponent": "AuraOrb",
-      "category": "Orbs",
+      "id": "ai-neural",
+      "tag": "lz-ai-neural",
+      "reactComponent": "AiNeural",
+      "category": "AI",
       "role": "status",
-      "description": "Two tinted orbs counter-rotating in overlapping orbits.",
-      "useCases": ["gradient waits", "brand palettes", "hero backgrounds"],
-      "defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "description": "A grid of dots pulsing like an artificial neural network with a diagonal activation wave.",
+      "useCases": ["neural nets", "model training", "data pipelines"],
+      "defaults": { "size": 6, "rows": 3, "cols": 5, "gap": 10, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
       "attributes": [
-        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 6 },
+        { "name": "rows", "reactProp": "rows", "type": "number", "unit": "rows", "default": 3 },
+        { "name": "cols", "reactProp": "cols", "type": "number", "unit": "cols", "default": 5 },
+        { "name": "gap", "reactProp": "gap", "type": "number", "unit": "px", "default": 10 },
         { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
         { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
         { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
       ],
       "cssVars": [
-        { "name": "--lz-size", "default": "44px", "purpose": "Orb box size" },
-        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Counter orb color" },
-        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Primary orb color" }
+        { "name": "--lz-size", "default": "6px", "purpose": "Dot diameter" },
+        { "name": "--lz-cols", "default": "5", "purpose": "Grid column count" },
+        { "name": "--lz-grid-gap", "default": "10px", "purpose": "Grid gap" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Checking neurons color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Resting neurons color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-grid-min", "default": "0.3", "purpose": "Resting dot scale" },
+        { "name": "--lz-grid-fade", "default": "0.15", "purpose": "Resting dot opacity" }
       ],
-      "keyframeVars": [],
       "examples": {
-        "html": "<lz-aura-orb accent=\"#ff375f\" color=\"#64d2ff\"></lz-aura-orb>",
-        "react": "<AuraOrb accent=\"#ff375f\" color=\"#64d2ff\" />"
+        "html": "<lz-ai-neural rows=\"4\" cols=\"7\" accent=\"#fa114f\"></lz-ai-neural>",
+        "react": "<AiNeural rows={4} cols={7} accent=\"#fa114f\" />"
       }
     },
     {
@@ -838,7 +799,7 @@
       "reactComponent": "Vinyl",
       "category": "Music",
       "role": "status",
-      "description": "A spinning record with a gently bobbing tonearm.",
+      "description": "A spinning record with a light sheen, label, spindle and a gently bobbing tonearm.",
       "useCases": ["music apps", "retro waits", "album screens"],
       "defaults": { "size": 48, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
       "attributes": [
@@ -862,10 +823,10 @@
       "id": "sonar",
       "tag": "lz-sonar",
       "reactComponent": "Sonar",
-      "category": "Music",
+      "category": "Spinners",
       "role": "status",
       "description": "A pulsing core emitting expanding sonar rings.",
-      "useCases": ["audio pulses", "location pings", "motion waits"],
+      "useCases": ["radar pings", "location detection", "motion waits"],
       "defaults": { "size": 44, "count": 3, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
       "attributes": [
         { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
@@ -893,7 +854,7 @@
       "reactComponent": "MusicNote",
       "category": "Music",
       "role": "status",
-      "description": "Musical note glyphs bobbing in a sing-song rhythm.",
+      "description": "Drawn musical notes with heads, stems and flags bobbing in a sing-song rhythm.",
       "useCases": ["music players", "karaoke", "playful waits"],
       "defaults": { "size": 32, "count": 2, "color": "#f5f5f7", "speed": 1 },
       "attributes": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loading-state-zoo",
-  "version": "0.3.0",
-  "description": "32 smooth, transform-only loading patterns as framework-agnostic web components with a thin React wrapper. Works in React, plain web, iOS and Android WebViews.",
+  "version": "0.4.0",
+  "description": "30 smooth, transform-only loading patterns as framework-agnostic web components with a thin React wrapper. Works in React, plain web, iOS and Android WebViews.",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",