@adea-ai/ui 0.99.1 → 0.99.2

package/dist/r/src/components/theme/theme-provider.tsx

@@ -121,11 +121,23 @@ export function useTheme(): ThemeContextValue {
   return value
 }
 
+/**
+ * The preference store, or nothing.
+ *
+ * Only ever called inside a `try`: where storage is blocked — a sandboxed iframe, a
+ * privacy mode, a denied site-data permission — merely *reading* the `localStorage`
+ * global throws ("Access is denied", `SecurityError`), so even the `typeof` guard
+ * has to sit inside the `try` rather than in front of it. Without a store the
+ * preference lives only in the provider's signal for the session.
+ */
+function preferenceStore(): Storage | undefined {
+  return typeof localStorage === 'undefined' ? undefined : localStorage
+}
+
 /** The stored preference, validated against the catalogue. */
 function readSelection(storageKey: string): ThemeSelection {
-  if (typeof localStorage === 'undefined') return defaultThemeSelection
   try {
-    const raw = localStorage.getItem(storageKey)
+    const raw = preferenceStore()?.getItem(storageKey)
     if (!raw) return defaultThemeSelection
     const parsed = JSON.parse(raw) as Partial<ThemeSelection>
     return {
@@ -268,13 +280,11 @@ export function ThemeProvider(props: ThemeProviderProps) {
     setSelection(patch) {
       const next = { ...selection(), ...patch }
       setSelectionState(next)
-      if (typeof localStorage !== 'undefined') {
-        try {
-          localStorage.setItem(storageKey(), JSON.stringify(next))
-        } catch {
-          // A full or unavailable store must not break the switch: the preference
-          // simply does not survive the reload.
-        }
+      try {
+        preferenceStore()?.setItem(storageKey(), JSON.stringify(next))
+      } catch {
+        // A full, blocked or unavailable store must not break the switch: the
+        // preference simply does not survive the reload.
       }
     },
   }

package/dist/r/src/components/ui/aspect-ratio/aspect-ratio.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
 import { splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
 
@@ -22,13 +22,24 @@ export type AspectRatioProps = ComponentProps<'div'> & {
   ratio?: number
 }
 
+/**
+ * The caller's style with the ratio laid over it. A spread `style` replaces the
+ * element's rather than merging, so passing any style used to drop the ratio and
+ * collapse the box to zero height. `ratio` is the API for the ratio, so it wins.
+ */
+function withRatio(style: AspectRatioProps['style'], ratio: number): JSX.CSSProperties | string {
+  const value = String(ratio)
+  if (typeof style === 'string') return `${style};aspect-ratio:${value}`
+  return { ...style, 'aspect-ratio': value }
+}
+
 export function AspectRatio(props: AspectRatioProps) {
-  const [local, rest] = splitProps(props, ['class', 'ratio', 'children'])
+  const [local, rest] = splitProps(props, ['class', 'ratio', 'style', 'children'])
 
   return (
     <div
       data-slot="aspect-ratio"
-      style={{ 'aspect-ratio': String(local.ratio ?? 16 / 9) }}
+      style={withRatio(local.style, local.ratio ?? 16 / 9)}
       class={cn('relative w-full [&>*]:absolute [&>*]:inset-0 [&>*]:size-full', local.class)}
       {...rest}
     >

package/dist/r/src/components/ui/calendar/calendar.tsx

@@ -171,7 +171,12 @@ function CalendarGrid(props: {
                               // Styled from data states, so a day can be a range
                               // end and today at once without a prop per pair.
                               'data-selected:bg-primary data-selected:text-primary-foreground',
-                              'data-in-range:bg-primary-subtle',
+                              // corvu marks every day of a range selected, so the
+                              // span between the ends steps back to the subtle
+                              // fill and the ends take the solid one again.
+                              'data-in-range:bg-primary-subtle data-in-range:text-foreground',
+                              'data-range-start:bg-primary data-range-start:text-primary-foreground',
+                              'data-range-end:bg-primary data-range-end:text-primary-foreground',
                               'data-range-start:rounded-r-none data-range-end:rounded-l-none',
                               'data-today:ring-1 data-today:ring-ring',
                               'data-disabled:text-muted-foreground data-disabled:line-through',

package/dist/r/src/components/ui/card/card.tsx

@@ -6,8 +6,8 @@ import { cn } from '../../../lib/utils'
  * Card.
  *
  * A surface that sits on the canvas. Every card carries its own edge — a
- * border — because in the light theme `--card` and `--background` are both
- * white, and a borderless card there is invisible. Making the border
+ * border — because in the light theme `--card` is one faint step off a white
+ * `--background`, and a borderless card there all but disappears. Making the border
  * structural rather than optional is what stops one app's cards from reading
  * as floating panels and another's as nothing at all.
  *

package/dist/r/src/components/ui/chart/chart-options.ts

@@ -0,0 +1,196 @@
+import type { ChartOptions } from 'chart.js'
+
+/**
+ * The chart's options, as data: no Chart.js runtime and no DOM, so the theme's
+ * defaults and the merge rules are testable on their own.
+ *
+ * Every colour here is written as `var(--token)`. A canvas cannot read a custom
+ * property — `fillStyle = 'var(--chart-1)'` is an invalid colour, which the
+ * canvas ignores and paints in its default black — so these strings are the
+ * *declaration* of which token a colour comes from. The components resolve them
+ * against their own element at render time (see `resolveCssVariables` and the
+ * resolver in `chart.tsx`).
+ */
+
+/** The five series colours, in the order a multi-series chart should use them. */
+export const chartSeriesColors = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+] as const
+
+/**
+ * The chart furniture, mapped onto existing semantic tokens rather than given
+ * tokens of its own. A grid line is a line, so it is `--border`; an axis tick and
+ * a legend label are secondary text, so they are `--muted-foreground`, whose
+ * contrast on `--card` (the frame's surface) is already measured in
+ * `tests/tokens.test.ts`. Dedicated `--chart-grid`/`--chart-axis`/`--chart-label`
+ * tokens would be three more values to keep in step with these in every theme
+ * for no difference anyone has asked for.
+ */
+const furniture = {
+  grid: 'var(--border)',
+  axis: 'var(--muted-foreground)',
+  label: 'var(--muted-foreground)',
+  surface: 'var(--card)',
+} as const
+
+/**
+ * Which scales a chart type draws. Chart.js creates a scale for every key under
+ * `options.scales` whatever the chart type, so cartesian defaults handed to a
+ * doughnut draw an x and a y axis and a grid behind it. The shape keeps each
+ * type's defaults to the scales it actually has.
+ */
+export type ChartScaleShape = 'cartesian' | 'radial' | 'none'
+
+const tickFont = { size: 10 }
+
+function scalesFor(shape: ChartScaleShape): ChartOptions['scales'] {
+  if (shape === 'cartesian') {
+    return {
+      x: {
+        border: { color: furniture.grid },
+        grid: { color: furniture.grid, drawTicks: false },
+        ticks: { color: furniture.axis, font: tickFont },
+      },
+      y: {
+        border: { display: false },
+        grid: { color: furniture.grid, drawTicks: false },
+        ticks: { color: furniture.axis, font: tickFont },
+      },
+    }
+  }
+  if (shape === 'radial') {
+    return {
+      r: {
+        grid: { color: furniture.grid },
+        angleLines: { color: furniture.grid },
+        pointLabels: { color: furniture.axis, font: tickFont },
+        // The default backdrop is a translucent white box, which is a white box
+        // on a dark card. The frame's own surface makes it disappear in both.
+        ticks: { color: furniture.axis, backdropColor: furniture.surface, font: tickFont },
+      },
+    }
+  }
+  return undefined
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (typeof value !== 'object' || value === null) return false
+  const prototype = Object.getPrototypeOf(value)
+  return prototype === Object.prototype || prototype === null
+}
+
+function mergeInto(target: Record<string, unknown>, source: Record<string, unknown>) {
+  for (const [key, value] of Object.entries(source)) {
+    if (value === undefined) continue
+    const current = target[key]
+    target[key] =
+      isPlainObject(value) && isPlainObject(current)
+        ? mergeInto({ ...current }, value)
+        : isPlainObject(value)
+          ? mergeInto({}, value)
+          : value
+  }
+  return target
+}
+
+/**
+ * Merge Chart.js options, later sources winning, object by object.
+ *
+ * Deep, because Chart.js options are deep: `{ scales: { x: { stacked: true } } }`
+ * means "also stack x", and a spread would replace the whole axis — its grid,
+ * its tick colour, its font — with that one flag. Arrays, functions (scriptable
+ * options) and class instances (gradients, patterns) are values and replace
+ * rather than merge. No source is mutated.
+ */
+export function mergeChartOptions(...sources: (ChartOptions | undefined)[]): ChartOptions {
+  const merged: Record<string, unknown> = {}
+  for (const source of sources) {
+    if (source) mergeInto(merged, source as Record<string, unknown>)
+  }
+  return merged as ChartOptions
+}
+
+/**
+ * The theme's defaults as Chart.js options.
+ *
+ * Exported so a caller can spread it and change one thing, rather than
+ * restating every colour. Everything a chart draws that is not data — grid,
+ * ticks, legend, tooltip — is decided here once, which is what makes two charts
+ * in one application look like they came from the same place. `overrides` is
+ * merged deeply; `shape` selects the scales the chart type has.
+ */
+export function chartOptions(
+  overrides?: ChartOptions,
+  shape: ChartScaleShape = 'cartesian'
+): ChartOptions {
+  return mergeChartOptions(
+    {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: { mode: 'nearest', intersect: false },
+      plugins: {
+        legend: {
+          labels: {
+            color: furniture.label,
+            boxWidth: 8,
+            boxHeight: 8,
+            usePointStyle: true,
+            pointStyle: 'circle',
+            font: { size: 11 },
+          },
+        },
+        tooltip: {
+          backgroundColor: 'var(--popover)',
+          titleColor: 'var(--popover-foreground)',
+          bodyColor: 'var(--popover-foreground)',
+          borderColor: 'var(--border)',
+          borderWidth: 1,
+          padding: 8,
+          cornerRadius: 6,
+          displayColors: true,
+          boxWidth: 8,
+          boxHeight: 8,
+          usePointStyle: true,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 11 },
+        },
+      },
+      scales: scalesFor(shape),
+    },
+    overrides
+  )
+}
+
+const cssVariable = /^\s*var\(\s*(--[\w-]+)\s*(?:,\s*(.*?))?\s*\)\s*$/
+
+/**
+ * Replace every `var(--token)` string in `value` — options, datasets, nested
+ * arrays — with what `read` returns for the token. A token `read` cannot
+ * resolve falls back to the `var()`'s own fallback, then to the string as
+ * written. Functions and class instances pass through untouched, so scriptable
+ * options and gradients keep working.
+ */
+export function resolveCssVariables<T>(value: T, read: (name: string) => string | undefined): T {
+  if (typeof value === 'string') {
+    const match = cssVariable.exec(value)
+    if (!match) return value
+    const resolved = read(match[1]!)
+    if (resolved) return resolved as T
+    return (match[2] ? resolveCssVariables(match[2], read) : value) as T
+  }
+  if (Array.isArray(value)) {
+    return value.map((entry: unknown) => resolveCssVariables(entry, read)) as T
+  }
+  if (isPlainObject(value)) {
+    const resolved: Record<string, unknown> = {}
+    for (const [key, entry] of Object.entries(value)) {
+      resolved[key] = resolveCssVariables(entry, read)
+    }
+    return resolved as T
+  }
+  return value
+}