@a4ui/core 0.13.0 → 0.14.0

package/src/elements.tsx

@@ -1,167 +0,0 @@
-// Web Components entry (`@a4ui/core/elements`) — a curated subset of A4ui's
-// presentational components registered as framework-agnostic custom elements so
-// they can be used from React/Next.js, Vue, Svelte, or plain HTML.
-//
-// Design notes:
-// - Each element renders in LIGHT DOM (noShadowDOM) so the global stylesheet
-//   (`@a4ui/core/elements.css`) and CSS theme variables apply normally — Shadow
-//   DOM would isolate the Tailwind utility classes the components rely on.
-// - Props map to attributes/properties (solid-element coerces by the declared
-//   default's type: number/boolean/string). Text content is taken from a `label`
-//   or `text` attribute, falling back to the element's initial text.
-// - Only leaf, primitive-prop components are wrapped. Rich/interactive/portalled
-//   components (Modal, Combobox, DataGrid, …) remain SolidJS-only — see the docs.
-//
-// This bundle is self-contained (solid-js is bundled in), so non-Solid apps need
-// no Solid toolchain: `import '@a4ui/core/elements'` once, then use the tags.
-import { customElement, noShadowDOM } from 'solid-element'
-import type { JSX } from 'solid-js'
-
-import { Alert, type AlertTone } from './ui/Alert'
-import { Avatar } from './ui/Avatar'
-import { Badge, type BadgeTone } from './ui/Badge'
-import { Button, type ButtonVariant } from './ui/Button'
-import { Clock } from './ui/Clock'
-import { Countdown } from './ui/Countdown'
-import { Kbd } from './ui/Kbd'
-import { Meter } from './ui/Meter'
-import { Progress } from './ui/Progress'
-import { Rating } from './ui/Rating'
-import { RingProgress } from './ui/RingProgress'
-import { Separator } from './ui/Separator'
-import { Spinner } from './ui/Spinner'
-import { Stat, type StatTone } from './ui/Stat'
-
-/** The initial text an author put between the tags, before Solid renders over it. */
-function initialText(element: unknown): string {
-  return ((element as HTMLElement).textContent ?? '').trim()
-}
-
-/** Register every A4ui custom element. Import for its side effect. */
-export function defineA4uiElements(): void {
-  customElement(
-    'a4-button',
-    { variant: 'primary', disabled: false, type: 'button', label: '' },
-    (props, { element }): JSX.Element => {
-      noShadowDOM()
-      const text = props.label || initialText(element)
-      return (
-        <Button
-          variant={props.variant as ButtonVariant}
-          disabled={props.disabled}
-          type={props.type as 'button' | 'submit' | 'reset'}
-        >
-          {text}
-        </Button>
-      )
-    },
-  )
-
-  customElement('a4-badge', { tone: 'neutral', label: '' }, (props, { element }): JSX.Element => {
-    noShadowDOM()
-    return <Badge tone={props.tone as BadgeTone}>{props.label || initialText(element)}</Badge>
-  })
-
-  customElement(
-    // `heading`, not `title` — the latter is a global HTML attribute and would
-    // clash with the element's native `title` (tooltip) property.
-    'a4-alert',
-    { tone: 'info', heading: '', text: '' },
-    (props, { element }): JSX.Element => {
-      noShadowDOM()
-      return (
-        <Alert tone={props.tone as AlertTone} title={props.heading || undefined}>
-          {props.text || initialText(element)}
-        </Alert>
-      )
-    },
-  )
-
-  customElement('a4-spinner', { label: 'Loading' }, (props): JSX.Element => {
-    noShadowDOM()
-    return <Spinner label={props.label} />
-  })
-
-  customElement('a4-avatar', { src: '', alt: '', fallback: '' }, (props): JSX.Element => {
-    noShadowDOM()
-    return <Avatar src={props.src || undefined} alt={props.alt} fallback={props.fallback || ''} />
-  })
-
-  customElement('a4-progress', { value: 0, max: 100, label: '' }, (props): JSX.Element => {
-    noShadowDOM()
-    return <Progress value={props.value} max={props.max} label={props.label || undefined} />
-  })
-
-  customElement('a4-meter', { value: 0, max: 100, label: '' }, (props): JSX.Element => {
-    noShadowDOM()
-    return <Meter value={props.value} max={props.max} label={props.label || undefined} />
-  })
-
-  customElement('a4-ring-progress', { value: 0, size: 96, thickness: 8, label: '' }, (props): JSX.Element => {
-    noShadowDOM()
-    return (
-      <RingProgress
-        value={props.value}
-        size={props.size}
-        thickness={props.thickness}
-        label={props.label || undefined}
-      />
-    )
-  })
-
-  customElement('a4-stat', { label: '', value: 0, tone: 'neutral' }, (props): JSX.Element => {
-    noShadowDOM()
-    return <Stat label={props.label} value={props.value} tone={props.tone as StatTone} />
-  })
-
-  customElement('a4-kbd', { label: '' }, (props, { element }): JSX.Element => {
-    noShadowDOM()
-    return <Kbd>{props.label || initialText(element)}</Kbd>
-  })
-
-  customElement('a4-separator', { orientation: 'horizontal' }, (props): JSX.Element => {
-    noShadowDOM()
-    return <Separator orientation={props.orientation as 'horizontal' | 'vertical'} />
-  })
-
-  customElement('a4-rating', { value: 0, max: 5, readonly: false }, (props, { element }): JSX.Element => {
-    noShadowDOM()
-    return (
-      <Rating
-        value={props.value}
-        max={props.max}
-        readonly={props.readonly}
-        onChange={(v) =>
-          (element as unknown as HTMLElement).dispatchEvent(new CustomEvent('change', { detail: v }))
-        }
-      />
-    )
-  })
-
-  customElement('a4-countdown', { to: '' }, (props): JSX.Element => {
-    noShadowDOM()
-    // eslint-disable-next-line solid/reactivity -- read the `to` attribute once to fix the target
-    const target = props.to ? new Date(props.to) : new Date(Date.now() + 86_400_000)
-    return <Countdown to={target} />
-  })
-
-  customElement(
-    'a4-clock',
-    { variant: 'digital', seconds: true, hour12: false, timezone: '', size: 160 },
-    (props): JSX.Element => {
-      noShadowDOM()
-      return (
-        <Clock
-          variant={props.variant as 'digital' | 'analog'}
-          seconds={props.seconds}
-          hour12={props.hour12}
-          timeZone={props.timezone || undefined}
-          size={props.size}
-        />
-      )
-    },
-  )
-}
-
-// Registering on import is the ergonomic default for `import '@a4ui/core/elements'`.
-defineA4uiElements()

package/src/styles/space.css

@@ -1,510 +0,0 @@
-/* A4ui — starfield backdrop styles for <SpaceBackground/>.
- *
- * Extracted from the source project's space-theme.css. Mount SpaceBackground as
- * a single fixed full-viewport layer BEHIND all content (z-index 0), with app
- * content at z-index >= 10 (AppShell already does this). Bundled into
- * `a4ui/styles.css` after the component surfaces. */
-
-#space {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-/* Nebula tinted from the active theme (--primary / --accent / --destructive), so
-   switching palettes recolors the whole backdrop. Space's tokens keep it blue. */
-#space .sky {
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(1200px 700px at 82% -8%, hsl(var(--primary) / 0.34), transparent 60%),
-    radial-gradient(900px 600px at 8% 12%, hsl(var(--accent) / 0.28), transparent 60%),
-    radial-gradient(1000px 800px at 50% 120%, hsl(var(--accent) / 0.22), transparent 55%),
-    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.12), transparent 60%),
-    hsl(var(--background));
-}
-[data-theme='light'] #space .sky {
-  background:
-    radial-gradient(1100px 680px at 84% -10%, hsl(var(--primary) / 0.22), transparent 60%),
-    radial-gradient(900px 600px at 6% 8%, hsl(var(--accent) / 0.2), transparent 60%),
-    radial-gradient(1000px 820px at 50% 120%, hsl(var(--accent) / 0.16), transparent 55%),
-    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.1), transparent 60%),
-    hsl(var(--background));
-}
-@keyframes nebulaShift {
-  0%,
-  100% {
-    filter: hue-rotate(0deg);
-  }
-  50% {
-    filter: hue-rotate(18deg);
-  }
-}
-
-/* Aurora — dark theme only */
-#space .aurora {
-  position: absolute;
-  top: -10%;
-  left: -10%;
-  right: -10%;
-  height: 46%;
-  background: linear-gradient(
-    180deg,
-    hsl(var(--accent) / 0.16),
-    hsl(var(--primary) / 0.1) 45%,
-    transparent 80%
-  );
-  filter: blur(40px);
-  opacity: 0.55;
-  mix-blend-mode: screen;
-}
-[data-theme='light'] #space .aurora {
-  display: none;
-}
-@keyframes auroraSway {
-  0%,
-  100% {
-    transform: translateX(-2%) scaleY(1);
-    opacity: 0.5;
-  }
-  50% {
-    transform: translateX(3%) scaleY(1.08);
-    opacity: 0.68;
-  }
-}
-
-/* Randomized starfield — each star is generated in SpaceBackground.tsx with a
-   random position/size/brightness/bloom, so there's no visible tiling pattern.
-   Static (no drift): moving the field behind the frosted cards re-blurs every
-   frame and felt laggy; a subset twinkles for life instead. */
-#space #starfield {
-  position: absolute;
-  inset: 0;
-}
-[data-theme='light'] #space #starfield {
-  opacity: 0.85;
-}
-/* A few stars drift smoothly like the satellite: each is a tiny element moving
-   via its own transform (GPU-composited, cheap), NOT the whole field. Uses
-   `alternate` so it eases out and back with no loop jump. Per-star --dx/--dy. */
-@keyframes starDrift {
-  from {
-    transform: translate(0, 0);
-  }
-  to {
-    transform: translate(var(--dx, 0), var(--dy, 0));
-  }
-}
-
-/* Rocket exhaust flame (custom SVG rocket in SpaceBackground.tsx) — flickers. */
-.rk-flame {
-  transform-box: fill-box;
-  transform-origin: 50% 0%;
-  animation: rocketFlame 0.12s ease-in-out infinite alternate;
-}
-@keyframes rocketFlame {
-  from {
-    transform: scaleY(0.8);
-    opacity: 0.85;
-  }
-  to {
-    transform: scaleY(1.06);
-    opacity: 1;
-  }
-}
-
-/* Legacy tiled star layers (kept for parity; the current SpaceBackground scatters
-   individual stars into #starfield instead). Sized generously: small dots nearly
-   vanish under backdrop-filter blur, so keep them >= 2.5px. */
-#space .stars {
-  position: absolute;
-  inset: -50%;
-  background-repeat: repeat;
-  background-image:
-    radial-gradient(4px 4px at 20px 30px, hsl(var(--foreground)), transparent),
-    radial-gradient(3.6px 3.6px at 120px 90px, hsl(var(--foreground)), transparent),
-    radial-gradient(3.2px 3.2px at 210px 160px, hsl(217 91% 78%), transparent),
-    radial-gradient(4.8px 4.8px at 300px 60px, hsl(199 89% 82%), transparent),
-    radial-gradient(3.4px 3.4px at 380px 220px, hsl(330 80% 84%), transparent),
-    radial-gradient(3px 3px at 90px 190px, hsl(var(--foreground)), transparent),
-    radial-gradient(2.8px 2.8px at 260px 250px, hsl(48 90% 82%), transparent);
-  background-size: 420px 300px;
-  opacity: 1;
-  animation: drift 140s linear infinite;
-}
-[data-theme='light'] #space .stars {
-  background-image:
-    radial-gradient(4px 4px at 20px 30px, hsl(38 92% 50%), transparent),
-    radial-gradient(3.6px 3.6px at 120px 90px, hsl(42 90% 52%), transparent),
-    radial-gradient(3.2px 3.2px at 210px 160px, hsl(32 88% 48%), transparent),
-    radial-gradient(4.8px 4.8px at 300px 60px, hsl(45 95% 55%), transparent),
-    radial-gradient(3.4px 3.4px at 380px 220px, hsl(28 85% 50%), transparent),
-    radial-gradient(3px 3px at 90px 190px, hsl(40 90% 50%), transparent),
-    radial-gradient(2.8px 2.8px at 260px 250px, hsl(48 90% 52%), transparent);
-}
-#space .stars.s2 {
-  background-size: 640px 480px;
-  opacity: 0.85;
-  animation-duration: 200s;
-}
-#space .stars.s3 {
-  background-size: 260px 190px;
-  opacity: 1;
-  animation-duration: 95s;
-  background-image:
-    radial-gradient(6px 6px at 40px 50px, hsl(var(--foreground)), transparent),
-    radial-gradient(5.6px 5.6px at 160px 130px, hsl(199 89% 85%), transparent),
-    radial-gradient(5.8px 5.8px at 250px 40px, hsl(275 80% 86%), transparent),
-    radial-gradient(5px 5px at 90px 20px, hsl(330 85% 85%), transparent);
-}
-[data-theme='light'] #space .stars.s3 {
-  opacity: 0.8;
-  background-image:
-    radial-gradient(6px 6px at 40px 50px, hsl(38 92% 50%), transparent),
-    radial-gradient(5.6px 5.6px at 160px 130px, hsl(45 95% 54%), transparent),
-    radial-gradient(5.8px 5.8px at 250px 40px, hsl(30 88% 48%), transparent),
-    radial-gradient(5px 5px at 90px 20px, hsl(50 92% 55%), transparent);
-}
-@keyframes drift {
-  from {
-    transform: translate3d(0, 0, 0);
-  }
-  to {
-    transform: translate3d(-420px, -300px, 0);
-  }
-}
-
-/* Individually-placed twinkling stars */
-.twinkle {
-  position: absolute;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: hsl(var(--foreground));
-  box-shadow: 0 0 14px 3px hsl(var(--foreground) / 0.9);
-  animation: twinkle 3.2s ease-in-out infinite;
-}
-[data-theme='light'] .twinkle {
-  background: hsl(40 92% 50%);
-  box-shadow: 0 0 14px 3px hsl(40 92% 50% / 0.85);
-}
-@keyframes twinkle {
-  0%,
-  100% {
-    opacity: 0.25;
-    transform: scale(0.6);
-  }
-  50% {
-    opacity: 1;
-    transform: scale(1.15);
-  }
-}
-
-/* Constellations — thin line art connecting a handful of stars */
-#space .constellation {
-  position: absolute;
-  opacity: 1;
-}
-[data-theme='light'] #space .constellation {
-  opacity: 0.6;
-}
-[data-theme='light'] #space .constellation .cline {
-  stroke: hsl(38 92% 50%) !important;
-}
-[data-theme='light'] #space .constellation .cdot {
-  fill: hsl(222 47% 20%) !important;
-}
-
-/* Planets / moons — decorative, corner-anchored, gentle float */
-.planet {
-  border-radius: 50%;
-}
-.planet::after {
-  content: '';
-  position: absolute;
-  inset: -34% -55%;
-  border-radius: 50%;
-  border: 3px solid hsl(var(--foreground) / 0.18);
-  transform: rotate(-24deg);
-}
-.planet-glow {
-  border-radius: 50%;
-  filter: blur(2px);
-}
-@keyframes floaty {
-  0%,
-  100% {
-    transform: translateY(0) rotate(0deg);
-  }
-  50% {
-    transform: translateY(-14px) rotate(4deg);
-  }
-}
-.floaty {
-  animation: floaty 12s ease-in-out infinite;
-}
-.floaty.slow {
-  animation-duration: 18s;
-}
-
-/* Asteroid belt (small drifting rocks) */
-.asteroid {
-  border-radius: 40% 55% 50% 45%;
-  background: hsl(var(--foreground) / 0.35);
-}
-@keyframes asteroidDrift {
-  0%,
-  100% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-  50% {
-    transform: translate(-8px, 6px) rotate(25deg);
-  }
-}
-
-/* Shooting star — bright core + tapered glowing trail */
-.shooter {
-  position: absolute;
-  height: 2.5px;
-  border-radius: 999px;
-  transform-origin: left center;
-  background: linear-gradient(
-    90deg,
-    hsla(0, 0%, 100%, 0) 0%,
-    hsla(199, 90%, 85%, 0.55) 55%,
-    hsla(0, 0%, 100%, 0.98) 100%
-  );
-  filter: blur(0.2px) drop-shadow(0 0 3px hsla(199, 90%, 80%, 0.5));
-}
-.shooter::before {
-  content: '';
-  position: absolute;
-  right: -2px;
-  top: 50%;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  transform: translateY(-50%);
-  background: radial-gradient(circle, #fff 0%, hsla(199, 95%, 88%, 0.95) 50%, transparent 75%);
-  box-shadow:
-    0 0 8px 2px #fff,
-    0 0 20px 7px hsla(199, 90%, 75%, 0.85),
-    0 0 38px 14px hsla(199, 90%, 60%, 0.4);
-}
-.shooter::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 55%;
-  height: 1px;
-  transform: translateY(-50%);
-  background: hsla(199, 85%, 92%, 0.65);
-  filter: blur(2px);
-}
-
-/* Satellite (drifting glyph, e.g. a lucide "satellite" icon) */
-@keyframes satelliteDrift {
-  from {
-    transform: translate(0, 0) rotate(-18deg);
-  }
-  to {
-    transform: translate(126vw, 34vh) rotate(-18deg);
-  }
-}
-#satellite {
-  animation: satelliteDrift 46s linear infinite;
-}
-
-/* Cursor-following ambient glow (nebula that trails the pointer) */
-#cursorGlow {
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  background: radial-gradient(circle, hsl(217 91% 60% / 0.1), transparent 70%);
-  opacity: 0;
-  transition: opacity 0.4s ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html:not(.force-motion) #space .stars,
-  html:not(.force-motion) .twinkle,
-  html:not(.force-motion) .floaty,
-  html:not(.force-motion) .shooter,
-  html:not(.force-motion) #satellite,
-  html:not(.force-motion) .asteroid {
-    animation: none !important;
-  }
-  html:not(.force-motion) #cursorGlow {
-    display: none !important;
-  }
-  html:not(.force-motion) #space .sky,
-  html:not(.force-motion) #space .aurora {
-    animation: none !important;
-  }
-  .card.glow-edge::before {
-    display: none;
-  }
-}
-
-/* ---- Generic themed scenery (non-space themes) --------------------------
-   A themed nebula (same token-tinted gradients as the starfield) plus a field
-   of slowly floating motif glyphs — <ThemedScenery motifs={[...]} />. Lighter
-   than the bespoke SpaceBackground so every extra theme costs almost nothing. */
-#scenery {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-#scenery .themed-sky {
-  position: absolute;
-  inset: 0;
-  animation: sceneryPulse 16s ease-in-out infinite;
-  background:
-    radial-gradient(1200px 700px at 82% -8%, hsl(var(--primary) / 0.34), transparent 60%),
-    radial-gradient(900px 600px at 8% 12%, hsl(var(--accent) / 0.28), transparent 60%),
-    radial-gradient(1000px 800px at 50% 120%, hsl(var(--accent) / 0.22), transparent 55%),
-    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.12), transparent 60%),
-    hsl(var(--background));
-}
-[data-theme='light'] #scenery .themed-sky {
-  background:
-    radial-gradient(1100px 680px at 84% -10%, hsl(var(--primary) / 0.22), transparent 60%),
-    radial-gradient(900px 600px at 6% 8%, hsl(var(--accent) / 0.2), transparent 60%),
-    radial-gradient(1000px 820px at 50% 120%, hsl(var(--accent) / 0.16), transparent 55%),
-    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.1), transparent 60%),
-    hsl(var(--background));
-}
-#scenery .motif {
-  position: absolute;
-  user-select: none;
-  will-change: transform;
-  animation: motifFloat var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
-}
-@keyframes motifFloat {
-  0%,
-  100% {
-    transform: translateY(0) rotate(var(--r, 0deg));
-  }
-  50% {
-    transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 5deg));
-  }
-}
-/* Subtle nebula "breathing" so the themed backdrop isn't static. */
-@keyframes sceneryPulse {
-  0%,
-  100% {
-    filter: brightness(1);
-  }
-  50% {
-    filter: brightness(1.06);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  html:not(.force-motion) #scenery .motif,
-  html:not(.force-motion) #scenery .themed-sky {
-    animation: none !important;
-  }
-}
-
-/* ---- Snow scenery (the "snow" theme) ------------------------------------ */
-#snow,
-#xmas {
-  position: fixed;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-#snow .snow-sky {
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(1200px 800px at 50% -12%, hsl(var(--primary) / 0.18), transparent 60%),
-    radial-gradient(900px 700px at 82% 8%, hsl(var(--accent) / 0.14), transparent 60%), hsl(var(--background));
-}
-/* Snowflakes (shared by snow + christmas). Each drifts down with a sideways sway. */
-#snow .flake,
-#xmas .flake {
-  position: absolute;
-  top: -12px;
-  border-radius: 50%;
-  background: #fff;
-  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-  will-change: transform;
-}
-[data-theme='light'] #snow .flake,
-[data-theme='light'] #xmas .flake {
-  background: hsl(205 45% 82%);
-  box-shadow: 0 0 3px hsl(205 45% 72% / 0.6);
-}
-@keyframes snowFall {
-  0% {
-    transform: translate(0, -12px);
-  }
-  100% {
-    transform: translate(var(--sway, 12px), 112vh);
-  }
-}
-/* Snow settling at the bottom + a frosted cap on cards (snow theme only). */
-#snow .snow-bank {
-  position: absolute;
-  inset: auto 0 0 0;
-  height: 9vh;
-  background: linear-gradient(to top, hsl(0 0% 100% / 0.5), transparent);
-  filter: blur(2px);
-}
-[data-theme='light'] #snow .snow-bank {
-  background: linear-gradient(to top, hsl(0 0% 100% / 0.95), transparent);
-}
-[data-scene='snow'] .card::after {
-  content: '';
-  position: absolute;
-  top: -3px;
-  left: 10px;
-  right: 10px;
-  height: 5px;
-  border-radius: 9999px;
-  background: hsl(0 0% 100% / 0.8);
-  filter: blur(1.5px);
-  pointer-events: none;
-}
-
-/* ---- Christmas scenery (the "christmas" theme) -------------------------- */
-#xmas .xmas-sky {
-  position: absolute;
-  inset: 0;
-  background:
-    radial-gradient(1000px 700px at 50% -12%, hsl(var(--primary) / 0.14), transparent 55%),
-    radial-gradient(900px 600px at 15% 16%, hsl(var(--accent) / 0.16), transparent 60%),
-    hsl(var(--background));
-}
-#xmas .light {
-  position: absolute;
-  top: 10px;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-  animation: twinkleLight 2.2s ease-in-out infinite;
-}
-@keyframes twinkleLight {
-  0%,
-  100% {
-    opacity: 1;
-    box-shadow: 0 0 9px currentColor;
-  }
-  50% {
-    opacity: 0.35;
-    box-shadow: 0 0 3px currentColor;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  html:not(.force-motion) #snow .flake,
-  html:not(.force-motion) #xmas .flake,
-  html:not(.force-motion) #xmas .light {
-    animation: none !important;
-  }
-}