The great next version - #82
Merged
Merged
Conversation
added 4 commits
March 11, 2026 17:52
Define vision, tech stack, component architecture, catalogue (~105 components), documentation/testing strategy, build/release pipeline, and phased roadmap.
Remove ESLint, Prettier, and all related plugins and configs. Add Biome 2.x for unified linting and formatting.
Remove pnpm lockfile, workspace config, and pnpm-specific .npmrc settings. Add native git hooks via .githooks directory with prepare script. Update .gitignore for bun and claude local settings.
Rename npm scope to @websublime/vitamina-*. Update all deps: Lit 3.3, Vite 7.3, TypeScript 5.9, Biome 2.4, PostCSS 8.5, cssnano 7.1, and all PostCSS plugins to latest. Migrate scripts from pnpm to bun, update tsconfig to es2022 and bundler module resolution, clean vite.config.
|
added 24 commits
March 11, 2026 17:58
Set up mister-anderson orchestration: CLAUDE.md with project overview and conventions, AGENTS.md with beads workflow and branch strategy, 11 agent definitions (8 core + 3 tech supervisors), and 9 skills.
…d roadmap fixes - Add target users (FE dev + BE dev/HTMX personas) - Add success metrics, non-functional requirements (WCAG 2.1 AA, browser support) - Expand competitive analysis: Shoelace, Spectrum, Lion, FAST, Bits UI, Ark UI - Fix Vite 6+ → 7+, 30 → 28 palettes, monorepo current vs target structure - Add breaking changes policy, community & governance section, RC strategy - Consolidate Separator/Divider, prioritise Inspector review as P0 - Archive legacy specs to .spec/archive/
- Document all 28 colour palettes with groupings and 12-level structure - Decide --line-* prefix on all tokens (palette, semantic, Open Props, classes) - Add postcss-jit-props to pipeline with build-time rewrite to --line-* - Define 10 semantic aliases (primary, secondary, tertiary, danger, warning, success, info, accent, neutral, surface) × 12 levels for Phase 1 - Close @layer decision as not needed (`:where()` + shadow DOM sufficient) - Remove demo swatch files from production bundle (migrate to Storybook) - Document custom theme contract for Phase 1 - Add branding refactor table (vita-* → line-* migration) - Convert all open questions (T1-T6) to firm decisions with traceability log
- Bump version to 0.7.0 - Add competitive component analysis link in §1.3 - Replace §3 Component Architecture with reference to ARCHITECTURE.md - Replace §4 Component Catalogue with product descriptions + spec links (131 components, 3 tiers, 10 categories) - Replace §8 with concise spec structure, lifecycle, and RFC process - Update component spec template to line://ui branding
Referenced by PRD v0.7.0: - ARCHITECTURE.md: cross-cutting component architecture decisions (§3) - COMPETITIVE-COMPONENT-ANALYSIS.md: component-by-component gap analysis (§1.3)
- CLAUDE.md: rename Vitamina → line://ui, add documentation hierarchy (PRD → ARCHITECTURE → SPEC), update naming convention to --line-*, update package names, remove Current Phase section - README.md: rewrite with new brand identity, logo, feature overview - Add branding assets (logo wordmark + symbol mark, light/dark variants)
Comprehensive execution plan covering 9 phases (v0.1.0–v1.0.0) with 132 components. Phase 0 and 1 are fully detailed with task-level breakdowns, dependency graphs, supervisor assignments, and done criteria. Phases 2–8 at epic-level for just-in-time elaboration.
- Add .spec/BASE-SPEC.md (APPROVED) covering LineElement three-tier architecture, FormAssociated mixin, Inspector behavior, Metadata/Direction mixins, Zag.js adapter, and HTMX adapter with test contracts - Fix PRODUCT-PLAN E4 dependency order: T3/T4 are independent of T1, T1 now depends on T3+T4 (composes them) - Rename "Inspector mixin" to "Inspector behavior" in PRODUCT-PLAN - Add spec references to E4 tasks
- Add .spec/ICON-REGISTRY-SPEC.md (APPROVED): icon registry API, <line-icon> component, SVG sanitization, 44 test contracts - Add .spec/STORYBOOK-SPEC.md (APPROVED): Storybook 8 setup, CEM integration, theme switching, story conventions, content outlines - Fix schema class prefix in STORYBOOK-SPEC: .schema-* → .line-schema-* per branding refactor E1-T4 - Resolve 3 open questions in ICON-REGISTRY-SPEC (mutator timing, default library name, SMIL animation preservation) - Fix PRODUCT-PLAN §2.8 dependency graph: T3/T4 now correctly shown as inputs to T1 (not outputs)
- Add BASE-SPEC, ICON-REGISTRY-SPEC, STORYBOOK-SPEC to documentation hierarchy and repository structure - Add PRODUCT-PLAN to documentation hierarchy - Expand task routing table with spec-specific entries - Fix component count 131 → 132 in doc hierarchy
Replace individual spec listings with naming conventions so CLAUDE.md doesn't need updating every time a new spec is created.
Rename all 28 palette color variables from --{color}-{N} to
--line-{color}-{N} across colors/, schemas/, custom/, and
utils/normalize.css (3,057 occurrences in 85 files).
Part of the branding refactor (P0-E1-T2). CSS class names and
semantic LHS variables are intentionally left unchanged (separate
tasks line-ui-jox.4 and line-ui-jox.3).
Ref: line-ui-jox.2
Rename all unprefixed semantic variables to use the --line-* prefix
per PRD 9.14 branding requirements. Variables renamed:
--background, --subtle-background, --ui-background,
--ui-hover-background, --ui-active-background, --subtle-border,
--ui-border, --ui-border-hover, --solid-background, --solid-hover,
--low-contrast, --high-contrast, --light, --dark, --white, --black
All now prefixed as --line-*.
Applied across 28 schema files, rules.css, general.css, and style.css
(825 occurrences). Palette variables (--line-{color}-N) untouched.
Also fixes:
- Pre-existing :is(:dark) typo to :is(.dark) in 27 schema files
- Biome formatting alignment in all modified files
- Disables noUnknownMediaFeatureName and noUnknownPseudoClass Biome
rules (false positives for PostCSS custom-media and custom selectors)
Rename .schema-* to .line-schema-* and .is-* to .line-is-* across all 28 schema CSS files, utils/general.css, and index.html per PRD 9.14 branding requirements. All :is(.dark) pseudo-class selectors preserved.
…s to line.css - Rename @websublime/vitamina-theme to @websublime/line-theme in packages/theme/package.json - Update description to "Base theme for line://ui" - Rename vita.css entry point to line.css, update style field and css:all script - Update dependency reference in packages/core/package.json - Add .env and bunfig.toml for explicit npm registry config - Regenerate bun.lock - Fix quote style in line.css to match Biome double-quote convention Part of P0-E1 branding refactor (line-ui-jox.1).
Rename @websublime/vitamina-core to @websublime/line-core in packages/core/package.json (name + description) and regenerate bun.lock. Theme dependency already references @websublime/line-theme. Ref: P0-E1-T5 (line-ui-jox.5)
The build script used `bun run --filter` which is a workspace filter, not a script name filter. Replaced with a node one-liner that iterates all css:* scripts from package.json. Converted postcss.config.cjs to postcss.config.mjs to eliminate the CommonJS/ESM interop warning from postcss-custom-media.
added 27 commits
May 9, 2026 00:51
Mass-update the 12 beads whose external_ref pointed at the old .spec/ tree: - line-ui-w5s, w5s.1, w5s.2, w5s.5, w5s.6, w5s.7 -> docs/specs/00-spec-base.md - line-ui-gvz, gvz.1, gvz.2, gvz.6 -> docs/specs/00-spec-storybook.md - line-ui-0rl, 0rl.1 -> docs/specs/00-spec-icon-registry.md Also fix line-ui-6zy (E9: Showcase) description: .spec/SHOWCASE-APP-SPEC.md -> docs/specs/00-spec-showcase.md (active epic; supervisors read this). Closed beads with historical references (jox.9, jox.11, p3v.45, p3v.47) left as-is — they document state at the time of completion. Refs: line-ui-xrz, line-ui-sj4
Removes checks.yml, release.yml, snapshot-deploy.yml, snapshot-version.yml. Background: pnpm@latest moved to v11 which requires Node >=22.13. The pnpm install step in checks.yml runs before the Node setup step, so the runner's default Node 20 picks up pnpm v11 and crashes on the node:sqlite builtin import. This breaks every PR until the pipeline is rewritten. Workflows are removed wholesale (not just patched) to clear the way for a ground-up rebuild aligned with the project's actual stack (Bun, per CLAUDE.md). Re-enable by restoring from git history once the new pipeline is designed.
- Add §9 Epic 10 (Multi-Schema Playground) to docs/plans/00-plan-foundation.md with the 8 m3d tasks, supervisor assignments, dependency graph, critical path, and done criteria. Renumber subsequent plan sections. - Add docs/specs/00-spec-playground.md (Status: APPROVED, 942 lines) covering sc-page-playground + 6 composition blocks (sc-product-card, sc-login-block, sc-music-player, sc-dashboard-block, sc-pricing-block, sc-schema-mapper), accent propagation system with COMPLEMENT_MAP + PlaygroundBlockConfig, and Decision Log (D1-D5) anchored on the headless-pattern memory. - Sync line-ui-m3d epic + 7 children: external_ref points at the new spec sections; legacy spec_id 'SHOWCASE-APP-SPEC' cleared. Closes the v0.4.0 layout gap so /specification 00 recognizes E10 as plan-and-spec backed before implementation resumes. Bead: line-ui-1uw
Implements the Login / Sign-up composition block (line-ui-m3d.2) as a
separate headless custom element following the playground spec
(docs/specs/00-spec-playground.md §0, §8.3, §16 D1/D4). Mirrors the
sc-product-card reference contract: structure + layout only inside the
shadow root, every styleable zone exposed via part="...", generic
:host custom properties for structural overrides, zero --line-* tokens
internally. The consumer (sc-page-playground) paints the slate neutral
base via .login-block-slate::part(...) and binds the accent zones
(btn-submit, focus ring, footer-link-anchor) to the inherited
--line-solid-* / --line-ui-border-hover tokens so they react to the
nav schema picker through body.line-schema-{accent}. Red error is
scoped to the affected field via [data-error] on the host and the
additive 'input-error' part.
Spec §8.3 parts list updated to add 'input-error' (additive multi-part
on the errored input, same syntax sc-product-card uses for chip-active)
and 'footer-link-anchor' (the <a> inside footer-link, separate part
because ::part() pseudo-element cannot be followed by a descendant
selector).
Also adds .claude/launch.json so Claude Preview can drive the showcase
dev server for manual verification.
- Document sc-login-sso event in spec §8.3 events table and add @fires TSDoc tag + ScLoginSsoDetail interface in sc-login-block.ts. The dispatch was previously undocumented (WARNING in review). - Add T2-specific .block-note above the login block explaining the neutral base + accent separation pattern (slate surface, accent-only CTA / focus ring / link, red-only error). Uses slate palette tokens so the note text itself stays neutral when the nav accent picker cycles — mirroring the pattern it describes. - Mark sc-login-block as "implemented (T2)" in spec inventory tables. Verified visually via preview: sc-login-sso fires with { provider: 'GitHub' } (bubbles+composed), sc-login-submit fires with { email, password }, card stays slate when cycling violet → crimson, password input border stays red independent of accent, dark mode legible. Refs: line-ui-m3d.2
Adds <sc-music-player> as a separate custom element following the headless contract proven by sc-product-card and sc-login-block: structure + layout only, zero --line-* tokens internally, every styleable zone exposed via ::part(), generic --card-* / --ctrl-* / --volume-* / --album-art-* host custom properties. Per spec §16 D5, the block exposes a --surface-color-scheme host custom property so the consumer (sc-page-playground) can force a dark surface regardless of the page's global light/dark mode. The block itself never sets color-scheme or carries a .dark class. The player implements all 6 reactive properties from spec §8.4 (trackTitle, artist, progress, volume, playing with reflect:true, playlist), 19 parts including the additive 'playlist-item playlist-item- active' whitespace pattern, ARIA per §11 (region role on the card, real <button>s with aria-label, role=slider on progress/volume tracks), and keyboard handlers per §10 (Space/Enter on play, Arrow Left/Right on sliders incrementing by 5). Emits sc-player-toggle, sc-player-seek, sc-player-volume with bubbles+composed. Wires the block into sc-page-playground: import the module, replace the T4 placeholder with a block-group containing a block-note + block-wrapper + <sc-music-player class="music-player-dark">, and add consumer ::part() rules that set --surface-color-scheme: dark, supply the gray-N palette tokens via light-dark() for neutral zones (card, typography, controls, sliders, playlist rows), and apply var(--line-solid-background) / var(--line-solid-text) for the accent-reactive zones listed in §14.2: progress-fill, ctrl-play, playlist-item-active. The album-art-gradient is supplied as a full background string referencing var(--line-solid-background) so it stays accent-reactive at use time. playground-config.ts is intentionally NOT modified — the §14.2 expanded PlaygroundBlockConfig shape (with elements[] and complementSchema) is owned by T7 (line-ui-m3d.7). Closes part of E10 (line-ui-m3d).
Consolidated polish/cleanup from code reviews of m3d.2 (sc-login-block) and m3d.4 (sc-music-player). No new features, no architectural changes. sc-login-block (m3d.9): - Move Escape handler from <form> to host (connected/disconnected callbacks) so "anywhere in the block" (spec §10) is truly anywhere. - Add inline comment near the SSO button warning future maintainers not to reorder it outside <form> without re-evaluating Enter/submit semantics. - Keep defensive optional chaining in _onSubmit with an explanatory comment (cost is minimal, protects future refactors). sc-music-player (m3d.10 + m3d.12): - Remove dead _onPlayKeydown handler and its @keydown binding — native <button> handles Space/Enter via @click already. - Add `duration` reactive property (defaults to 238 to preserve existing behaviour). _formatTime now reads `this.duration` instead of a hardcoded literal. - Centralise progress/volume clamping via private getters _clampedProgress / _clampedVolume; render() and updated() now share the same source of truth. - Add Tab-order rationale comment in render(): DOM order matches visual top-to-bottom scan; deliberate documented choice (spec §10 does not formalise this). playground.ts (m3d.9 + m3d.11 + m3d.12): - Drop redundant light-dark(var(--line-gray-1), var(--line-gray-1)) wrapper on sc-music-player::part(album-art) — both branches were identical. Replaced with plain `color: var(--line-gray-1)`. - Add explicit `.duration=${238}` on the T4 demo so the new dependency is visible in consumer markup. Refs: line-ui-m3d.9, line-ui-m3d.10, line-ui-m3d.11, line-ui-m3d.12
Records impl=done state, needs-review label, COMPLETED comments, DECISION entries (optional chaining, fallback consistency, Tab order), and in-review status for the four beads consolidated in the previous commit.
The beads JSONL is locally managed and synced via Dolt — keeping it under git tracking creates noisy merge conflicts on every bead state change. Untrack the file and add it to .gitignore. Local copies and Dolt sync are unaffected.
Implement sc-dashboard-block per docs/specs/00-spec-playground.md §8.5.
Headless contract: zero --line-* tokens inside the shadow DOM; structure
only, with all 24 named parts and generic structural custom properties on
:host. Three sections render in order — notifications (success/warning/
danger), stat-card grid (info/success/warning + accent), and toggles —
following the additive multi-part attribute pattern proven by
sc-music-player and sc-product-card.
Notifications use role=status (success/warning) or role=alert (danger);
toggles are real button[role=switch][aria-checked] controls with Space/
Enter keyboard support, mutating the toggles array via re-assignment and
emitting sc-toggle-change { index, on } per spec §10/§11. Inline SVGs
exposed via ::part(notif-icon) inherit currentColor from the parent notif
part.
Consumer wiring in playground.ts paints the block via ::part() with the
sand palette (neutral shell — does NOT follow nav accent) plus L3 intent
aliases (--line-success / --line-warning / --line-danger) for the fixed-
intent notif zones. Stat-value colors use explicit light-dark(level-11,
level-3) palette tokens so they stay vibrant in BOTH modes (working
around the inverted Radix scale where level-9 is too dark in dark mode).
The fourth stat card and any toggle in its on state inherit
--line-solid-background from body.line-schema-{accent} and recolor when
the nav picker cycles, matching the §14.2 'dashboard' entry.
PlaygroundBlockConfig is intentionally NOT touched — its expansion is
deferred to T7 (line-ui-m3d.7) per the file header comment.
Verified: typecheck clean, biome lint clean (changed files), runtime
behaviour (3 notifs + 4 stats + 3 toggles, ARIA roles, keyboard, accent
reactivity across schema picker, light + dark mode).
…3d.6)
Amend docs/specs/00-spec-playground.md with §14.5 (NORMATIVE: shadow-DOM
scoping constraint), §15.1 (sc-pricing-block accent/complement application),
and §16 D6 (decision log). Drops the implied internal `.line-schema-*` class
strategy — those selectors don't pierce shadow DOM (finding line-ui-p3v.59).
Establishes the two valid propagation mechanisms for the headless block:
1. Pro tier inherits --line-solid-* from body.line-schema-{accent}
2. Enterprise tier consumes --complement-solid/text/hover/border/
low-contrast/high-contrast as inline host custom properties set by the
consumer page (precedent: sc-music-player's --album-art-gradient).
Status remains APPROVED — this is a clarifying amendment, not a contract
change. The 17-part enumeration in §8.6 is untouched.
Bead description for line-ui-m3d.6 normalized via `bd update` to match.
Implements `<sc-pricing-block>` as a headless 3-tier (Free / Pro /
Enterprise) composition block per docs/specs/00-spec-playground.md
§8.6, §14.5 and §15.1. The block defines structure + layout only,
exposes all 17 styleable zones via `::part()` and consumes ONLY
generic CSS custom properties internally — zero `--line-*` token
references in the block's CSS.
Pro tier inherits the active accent (`--line-solid-*`) from
`body.line-schema-{accent}` through the shadow DOM (spec §14.5
mechanism 1). Enterprise tier consumes six inline `--complement-*`
host custom properties set by `sc-page-playground` from
`complementSchema(accent)` — the only mechanism that pierces shadow
DOM with a non-active second schema (spec §14.5 mechanism 2).
Adds `COMPLEMENT_MAP` and `complementSchema(accent)` standalone
exports to `apps/showcase/src/pages/playground-config.ts` per spec
§14.3. Wires the block into `playground.ts` with consumer `::part()`
styles applying `--line-solid-*`, `--line-success`, `--line-gray-8`
and the complement variables.
Bead: line-ui-m3d.6
Implements line-ui-m3d.7 — the schema mapping configuration and accent reactivity system for the showcase playground page. - Replaces T1's PlaygroundBlockConfig stub with the final shape from spec §14.2: BlockElementConfig + optional complementSchema field. - Adds DEFAULT_BLOCK_CONFIGS with DASH-form selectors that match the real ::part() names on each block (logical identifiers 'input-focus' and 'add-to-cart' are translated by the consumer). - New headless `<sc-schema-mapper>` (apps/showcase/src/components/ sc-schema-mapper.ts) implementing the spec §8.7 contract: 9 named parts, 8 host custom-property groups, sc-config-change event, real <button role="switch" aria-checked aria-label> toggles, Space/Enter keyboard activation. Non-interactive base-chip <span>. - sc-page-playground now holds @State _configs = structuredClone( DEFAULT_BLOCK_CONFIGS) so toggles do not mutate the exported constant and page reload resets to defaults. Replaces the array reference immutably on every toggle so Lit re-renders. - Per-zone gating uses .zone-off-{selector} classes on the block host with higher-specificity ::part() override rules; each block is wrapped with Lit's keyed() directive so the host is replaced on toggle, ensuring Chromium correctly resolves the cascade on first paint (avoids a ::part() invalidation bug with attribute filters). See bead comments for the DECISION/DEVIATION rationale. - data-disabled-zones is reflected on each block host for debugging. - Schema reactivity stays via body.line-schema-{accent} → inherited --line-solid-* cascade (spec §14.1, unchanged from baseline).
Addresses the 4 SUGGESTION findings from the review of line-ui-m3d.5 (T5 sc-dashboard-block): 1. Split the combined .dashboard-sand::part(stat-card),::part(toggle-row) rule into two independent rules. The toggle-row declarations in the combined rule were dead code — fully overridden by the toggle-row-only rule immediately below. 2. Drop the redundant background declaration on .dashboard-sand::part(stat-card-accent). It restated the same light-dark(--line-sand-1, --line-sand-12) value already supplied by the base stat-card rule; only border-color is novel. 3. Replace aria-label on the toggle button with aria-labelledby pointing at the visible .toggle-label span. Adds a stable per-index id so the accessible name stays in sync with the visible text automatically. 4. Introduce a --toggle-focus-ring-color host custom property (default currentColor) and consume it in the .toggle:focus-visible outline. Consumers can override via ::part(toggle) to supply a contrast-safe color when currentColor resolves close to the surface background (e.g. sand-1 in the off state). Per the headless contract, NO --line-* token is referenced inside the component. Refs: line-ui-m3d.13
Addresses the SUGGESTION findings from the review of line-ui-m3d.6
(T6 sc-pricing-block):
1. Promote an explicit role: 'free' | 'featured' | 'enterprise' field on
ScPricingTier so the additive card part (tier-card-featured /
tier-card-enterprise) and the "Recommended" badge no longer depend on
string-equality against the display name. role is optional with a
backwards-compatible default that derives from name ('Pro' →
'featured', 'Enterprise' → 'enterprise', otherwise 'free') so existing
consumers continue to work without changes. Adds the
ScPricingTierRole type union as a public export.
2. Update the playground pricing tier definitions to pass role
explicitly (free / featured / enterprise).
Item 2 from the bead description (hoist complementSchema(this.schema) to
a single const at the top of render()) was already addressed in the T7
schema-mapper feature commit (4da7972) — playground.ts:1159 already
declares const complement = complementSchema(this.schema); used by all
six --complement-* string interpolations. No change needed in this
commit.
Refs: line-ui-m3d.14
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.