@weft-js/warp 0.0.0-stage → 0.1.0

package/src/schedule/bits.tsx

@@ -0,0 +1,51 @@
+// What the schedule pack's components share: sweep parts, glyphs, the clock.
+import { RepeatIcon } from '@weft-js/warp-icons'
+import { installSweep, nowIn } from '@weft-js/warp-core'
+import { onCleanup, onMount, state, untrack, watch } from '@weft-js/core'
+import '../styles'
+import '@weft-js/warp-core/styles/app/tokens.css'
+import '@weft-js/warp-core/styles/app/base.css'
+import '@weft-js/warp-core/styles/rich/helpers.css'
+
+export const SweepParts = () => <><span data-part="sweep-base" aria-hidden="true"></span><span data-part="sweep" aria-hidden="true"></span></>
+
+/** calendar.css and agenda.css default `--_c` on the same element as `data-cal`, so the source's colour is set inline too. */
+export const tint = (cal?: number) => `--_c:var(--warp-color-data-${cal ?? 1})`
+export const RepeatGlyph = () => <RepeatIcon />
+
+/**
+ * The wall clock for the now line (07 §2.2): the prop when there is one, else null through hydration and the browser's
+ * clock a microtask after mount, then on each minute. It pauses while the page is hidden.
+ */
+export function useNow(now: () => string | undefined, zone: () => string | undefined) {
+  const value = state<string | null>(untrack(now) ?? null)
+  onMount(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const tick = () => {
+      clearTimeout(timer)
+      if (untrack(now) || document.hidden) return
+      value.value = nowIn(untrack(zone))
+      timer = setTimeout(tick, 60000 - (Date.now() % 60000))
+    }
+    queueMicrotask(tick)
+    document.addEventListener('visibilitychange', tick)
+    watch(now, n => { if (n) value.value = n })
+    onCleanup(() => { clearTimeout(timer); document.removeEventListener('visibilitychange', tick) })
+  })
+  return value
+}
+
+/** The container's width, 0 until it has been measured after mount. */
+export function useWidth(el: () => Element | undefined) {
+  const width = state(0)
+  onMount(() => {
+    const node = el()
+    if (!node || typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(r => { width.value = r[0]!.contentRect.width })
+    ro.observe(node)
+    onCleanup(() => ro.disconnect())
+  })
+  return width
+}
+
+export const confirmSweep = (el: Element | null | undefined) => { if (el) installSweep(el.ownerDocument).confirm(el) }

package/src/schedule/index.ts

@@ -0,0 +1,10 @@
+// The schedule pack (07 §2, §6.4): calendar, agenda, year, booking, planner, availability. One file per family; each imports only its own CSS.
+export { Calendar, type CalendarProps, type EventChange, type RecurrenceScope, type Resource } from './Calendar'
+export { EventPopover, type EventPopoverProps } from './EventPopover'
+export { EventEditor, type EventEditorProps, type CalendarSource } from './EventEditor'
+export { MoveSheet, type MoveSheetProps } from './MoveSheet'
+export { Agenda, AgendaDay, type AgendaProps } from './Agenda'
+export { YearView, type YearViewProps } from './YearView'
+export { BookingCalendar, type BookingCalendarProps, type BookingSlot, type BookingDetails } from './BookingCalendar'
+export { MeetingPlanner, type MeetingPlannerProps, type MeetingDetails } from './MeetingPlanner'
+export { AvailabilityEditor, type AvailabilityEditorProps, type Availability } from './AvailabilityEditor'

package/src/skeleton-css.ts

@@ -0,0 +1,4 @@
+// warp's skeleton CSS for a page that uses `<Boundary pending="shape">` without a <Shape> or <Skeleton> (research 31 §5):
+// `import '@weft-js/warp/skeleton'` once. A shape variant is core markup, so nothing else pulls the CSS in.
+import './styles'
+import '@weft-js/warp-core/styles/components/skeleton.css'

package/src/styles.ts

@@ -0,0 +1,10 @@
+// The shared base every warp component loads first: the spec tokens, base and signature layers (warp-core/styles/
+// warp.css), an app's seed and field defaults from warp() (weft:tokens/warp, empty without the plugin), and the
+// components' plumbing (tone channels, icon strokes, kbd, panels). `links.css` is warp's colour for a bare `<a>`.
+import { flow } from '@weft-js/warp-core'
+import '@weft-js/warp-core/styles/warp.css'
+import 'weft:tokens/warp'
+import '@weft-js/warp-core/styles/components/base.css'
+import './links.css'
+
+flow()

package/src/tokens.d.ts

@@ -0,0 +1,2 @@
+// warp()'s virtual stylesheet: an app's seed and field defaults, and empty without the plugin.
+declare module 'weft:tokens/warp'

package/src/type.css

@@ -0,0 +1,15 @@
+/* Type roles: each role reads the spec's own text tokens (warp.css §Type), in warp.layout so app CSS still wins. */
+@layer warp.layout {
+:where([data-scope="text"]) { margin: 0; }
+:where([data-scope="text"][data-role="display"]) { font-family: var(--warp-text-display-font); font-size: var(--warp-text-display-size); line-height: var(--warp-text-display-leading); font-weight: var(--warp-text-display-weight); letter-spacing: var(--warp-text-display-tracking); }
+:where([data-scope="text"][data-role="title"]) { font-family: var(--warp-text-title-font); font-size: var(--warp-text-title-size); line-height: var(--warp-text-title-leading); font-weight: var(--warp-text-title-weight); letter-spacing: var(--warp-text-title-tracking); }
+:where([data-scope="text"][data-role="heading"]) { font-family: var(--warp-text-heading-font); font-size: var(--warp-text-heading-size); line-height: var(--warp-text-heading-leading); font-weight: var(--warp-text-heading-weight); letter-spacing: var(--warp-text-heading-tracking); }
+:where([data-scope="text"][data-role="body"]) { font-family: var(--warp-text-body-font); font-size: var(--warp-text-body-size); line-height: var(--warp-text-body-leading); }
+:where([data-scope="text"][data-role="label"]) { font-family: var(--warp-text-label-font); font-size: var(--warp-text-label-size); line-height: var(--warp-text-label-leading); font-weight: var(--warp-text-label-weight); letter-spacing: var(--warp-text-label-tracking); text-transform: var(--warp-text-label-case); }
+:where([data-scope="text"][data-role="caption"]) { font-family: var(--warp-text-caption-font); font-size: var(--warp-text-caption-size); line-height: var(--warp-text-caption-leading); }
+:where([data-scope="text"][data-role="eyebrow"]) { font-family: var(--warp-text-eyebrow-font); font-size: var(--warp-text-eyebrow-size); line-height: var(--warp-text-eyebrow-leading); font-weight: var(--warp-text-eyebrow-weight); letter-spacing: var(--warp-text-eyebrow-tracking); text-transform: var(--warp-text-eyebrow-case); }
+:where([data-scope="text"][data-role="code"]) { font-family: var(--warp-text-code-font); font-size: var(--warp-text-code-size); }
+:where([data-scope="text"][data-ink="subtle"]) { color: var(--warp-color-text-subtle); }
+:where([data-scope="text"][data-ink="faint"]) { color: var(--warp-color-text-faint); }
+:where([data-scope="text"][data-tone]) { color: var(--_text); }
+}

package/src/ui.ts

@@ -0,0 +1,26 @@
+// How warp draws `ui`, from any source (research 45). The `weft()` plugin imports this where `ui=` is used, so a
+// component that never gets a `ui` carries none of it.
+//
+// A lit row is `data-hold`, warp's existing word for "drawn active with no pointer on it", so no component needs a new
+// rule. `data-remote` says only someone else has it, for whoever wants to tint that. `data-press` is a press from
+// anywhere, drawn as `:active` is, so a press shows in the other pane, tab or client and not just as a hover.
+import { interact } from '@weft-js/warp-core'
+import { createRoot, effect } from '@weft-js/core'
+import { seams } from '@weft-js/core/interaction'
+
+seams.attach = (el, ui) => {
+  const real = interact(el, ui)
+  const stop = createRoot(dispose => {
+    effect(() => {
+      const r = ui.remote.value
+      const mine = ui.hover.value || ui.focus.value || ui.pressed.value
+      return mine ? 2 : r.hover || r.focus || r.pressed ? 1 : 0
+    }, lit => {
+      el.toggleAttribute('data-hold', lit > 0)
+      el.toggleAttribute('data-remote', lit === 1)
+    })
+    effect(() => ui.pressed.value || ui.remote.value.pressed > 0, on => el.toggleAttribute('data-press', on))
+    return dispose
+  }, null)
+  return { update() {}, destroy() { real.destroy(); stop(); el.removeAttribute('data-hold'); el.removeAttribute('data-remote'); el.removeAttribute('data-press') } }
+}

package/src/use-ui.ts

@@ -0,0 +1,10 @@
+import { use } from '@weft-js/warp-core/weft'
+import { untrack } from '@weft-js/core'
+import type { Interaction } from '@weft-js/core/interaction'
+
+/** `ui={row}`: a row's `attach` on the host. Read once, like every prop that picks what a component is. */
+export function useUi(ui: () => Interaction | undefined, host: () => HTMLElement | undefined) {
+  const row = untrack(ui)
+  // oxlint-disable-next-line typescript/unbound-method -- interaction() closes over its row: attach reads no `this`
+  if (row) use(row.attach, host)
+}

package/tailwind.css

@@ -0,0 +1,38 @@
+/* warp's tokens as Tailwind v4 theme values: `bg-surface`, `text-accent`, `rounded-control`, `font-display`. `inline`
+   keeps each utility on the var(), so dials and scopes re-theme utilities the same way they re-theme components. */
+@theme inline {
+  --color-page: var(--warp-color-page);
+  --color-surface: var(--warp-color-surface);
+  --color-surface-raised: var(--warp-color-surface-raised);
+  --color-surface-sunken: var(--warp-color-surface-sunken);
+  --color-text: var(--warp-color-text);
+  --color-text-subtle: var(--warp-color-text-subtle);
+  --color-text-faint: var(--warp-color-text-faint);
+  --color-border: var(--warp-color-border);
+  --color-border-strong: var(--warp-color-border-strong);
+  --color-focus: var(--warp-color-focus);
+  --color-accent: var(--warp-color-accent-solid);
+  --color-accent-soft: var(--warp-color-accent-soft);
+  --color-accent-text: var(--warp-color-accent-text);
+  --color-on-accent: var(--warp-color-accent-on-solid);
+  --color-positive: var(--warp-color-positive-solid);
+  --color-caution: var(--warp-color-caution-solid);
+  --color-critical: var(--warp-color-critical-solid);
+  --color-info: var(--warp-color-info-solid);
+
+  --font-sans: var(--warp-font-sans);
+  --font-display: var(--warp-font-display);
+  --font-mono: var(--warp-font-mono);
+
+  /* one scale for gap, padding and margin: `p-related`, `gap-group`. A numeric `p-3` that isn't on it is D002. */
+  --spacing-hair: var(--warp-space-hair);
+  --spacing-tight: var(--warp-space-tight);
+  --spacing-related: var(--warp-space-related);
+  --spacing-group: var(--warp-space-group);
+  --spacing-section: var(--warp-space-section);
+  --spacing-page: var(--warp-space-page);
+
+  --radius-mark: var(--warp-radius-mark);
+  --radius-control: var(--warp-radius-control);
+  --radius-surface: var(--warp-radius-surface);
+}

package/tokens/color.mjs

@@ -0,0 +1,66 @@
+// OKLCH → sRGB with CSS Color 4 gamut mapping (chroma reduced until it fits), WCAG 2.x luminance and contrast.
+// Plain Node, no dependencies: the token build and the contrast gate share it.
+
+function oklchToLinear(L, C, H) {
+  const h = (H * Math.PI) / 180, a = C * Math.cos(h), b = C * Math.sin(h)
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+  ]
+}
+
+const inGamut = rgb => rgb.every(c => c >= -1e-4 && c <= 1 + 1e-4)
+
+/** `{ L, C, H }` → linear sRGB, with chroma reduced (never lightness or hue) until it is inside sRGB. */
+export function toLinear({ L, C, H }) {
+  const rgb = oklchToLinear(L, C, H)
+  if (inGamut(rgb)) return rgb
+  let lo = 0, hi = C
+  for (let k = 0; k < 24; k++) {
+    const mid = (lo + hi) / 2
+    if (inGamut(oklchToLinear(L, mid, H))) lo = mid
+    else hi = mid
+  }
+  return oklchToLinear(L, lo, H).map(v => Math.min(1, Math.max(0, v)))
+}
+
+const encode = v => (v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055)
+const decode = v => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4)
+
+export const hex = lin => '#' + lin.map(v => Math.round(Math.min(1, Math.max(0, encode(v))) * 255).toString(16).padStart(2, '0')).join('')
+
+/** The 8-bit sRGB the browser will actually paint, back in linear light (so checks match the shipped hex). */
+export const quantize = lin => lin.map(v => decode(Math.round(Math.min(1, Math.max(0, encode(v))) * 255) / 255))
+
+export const luminance = ([r, g, b]) => 0.2126 * r + 0.7152 * g + 0.0722 * b
+export const contrast = (a, b) => {
+  const y1 = luminance(a), y2 = luminance(b)
+  return (Math.max(y1, y2) + 0.05) / (Math.min(y1, y2) + 0.05)
+}
+
+/** Linear sRGB `fg` at `alpha` over `bg`. */
+export const over = (fg, bg, alpha) => fg.map((v, i) => v * alpha + bg[i] * (1 - alpha))
+
+const toLab = ({ L, C, H }) => [L, C * Math.cos((H * Math.PI) / 180), C * Math.sin((H * Math.PI) / 180)]
+const fromLab = ([L, a, b]) => ({ L, C: Math.hypot(a, b), H: ((Math.atan2(b, a) * 180) / Math.PI + 360) % 360 })
+
+/** color-mix(in oklab, a p, b): what the browser does, returned as OKLCH. */
+export const mix = (a, b, p) => fromLab(toLab(a).map((v, i) => v * p + toLab(b)[i] * (1 - p)))
+
+/** `#rrggbb` → `{ L, C, H }`, so a brand hex can seed the accent. */
+export function fromHex(text) {
+  const n = parseInt(text.replace('#', ''), 16)
+  const [r, g, b] = [(n >> 16) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255].map(decode)
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b)
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b)
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b)
+  return fromLab([
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  ])
+}