@spatika/react 1.0.0 → 1.2.0

package/src/composites/EventEditor.tsx

@@ -0,0 +1,268 @@
+import { useEffect, useState } from "react";
+import {
+  createEventId,
+  fromDatetimeLocalValue,
+  SCHEDULER_COLOR_TONES,
+  toDatetimeLocalValue,
+  toDate,
+  type SchedulerColorTone,
+  type SchedulerEvent,
+  type SchedulerResource,
+} from "../lib/scheduler";
+import { Button } from "../primitives/Button";
+import { Checkbox } from "../primitives/Checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../primitives/Dialog";
+import { Input } from "../primitives/Input";
+import { NativeSelect } from "../primitives/NativeSelect";
+import { Textarea } from "../primitives/Textarea";
+import { FormField } from "./FormField";
+
+export type EventEditorDraft = {
+  id?: string;
+  title?: string;
+  start: Date;
+  end: Date;
+  allDay?: boolean;
+  resourceId?: string;
+  color?: SchedulerColorTone;
+  description?: string;
+  rrule?: string;
+};
+
+const RRULE_PRESETS: { value: string; label: string }[] = [
+  { value: "", label: "Does not repeat" },
+  { value: "FREQ=DAILY", label: "Daily" },
+  { value: "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR", label: "Every weekday" },
+  { value: "FREQ=WEEKLY", label: "Weekly" },
+  { value: "FREQ=MONTHLY", label: "Monthly" },
+  { value: "FREQ=YEARLY", label: "Yearly" },
+];
+
+export function EventEditor({
+  open,
+  onOpenChange,
+  draft,
+  resources = [],
+  readOnly = false,
+  onSave,
+  onDelete,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  draft: EventEditorDraft | null;
+  resources?: SchedulerResource[];
+  readOnly?: boolean;
+  onSave: (event: SchedulerEvent) => void;
+  onDelete?: (id: string) => void;
+}) {
+  const [title, setTitle] = useState("");
+  const [start, setStart] = useState("");
+  const [end, setEnd] = useState("");
+  const [allDay, setAllDay] = useState(false);
+  const [resourceId, setResourceId] = useState("");
+  const [color, setColor] = useState<SchedulerColorTone | "">("");
+  const [description, setDescription] = useState("");
+  const [rrule, setRrule] = useState("");
+
+  useEffect(() => {
+    if (!draft || !open) return;
+    setTitle(draft.title ?? "");
+    setStart(
+      draft.allDay
+        ? toDatetimeLocalValue(toDate(draft.start)).slice(0, 10)
+        : toDatetimeLocalValue(toDate(draft.start)),
+    );
+    setEnd(
+      draft.allDay
+        ? toDatetimeLocalValue(toDate(draft.end)).slice(0, 10)
+        : toDatetimeLocalValue(toDate(draft.end)),
+    );
+    setAllDay(Boolean(draft.allDay));
+    setResourceId(draft.resourceId ?? "");
+    setColor(draft.color ?? "");
+    setDescription(draft.description ?? "");
+    setRrule(draft.rrule ?? "");
+  }, [draft, open]);
+
+  const locked = readOnly;
+  const isEdit = Boolean(draft?.id);
+
+  function submit() {
+    if (!draft || locked) return;
+    const nextStart = allDay ? fromDatetimeLocalValue(`${start}T00:00`) : fromDatetimeLocalValue(start);
+    const nextEnd = allDay
+      ? fromDatetimeLocalValue(`${end || start}T00:00`)
+      : fromDatetimeLocalValue(end || start);
+    onSave({
+      id: draft.id ?? createEventId(),
+      title: title.trim() || "Untitled",
+      start: nextStart,
+      end: nextEnd.getTime() <= nextStart.getTime()
+        ? new Date(nextStart.getTime() + (allDay ? 86_400_000 : 3_600_000))
+        : nextEnd,
+      allDay,
+      resourceId: resourceId || undefined,
+      color: color || undefined,
+      description: description.trim() || undefined,
+      rrule: rrule || undefined,
+    });
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{locked ? "Event" : isEdit ? "Edit event" : "New event"}</DialogTitle>
+          <DialogDescription>
+            {locked ? "This calendar is read-only." : "Title, time, resource, and recurrence."}
+          </DialogDescription>
+        </DialogHeader>
+        {draft ? (
+          <form
+            className="grid gap-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              submit();
+            }}
+          >
+            <FormField id="spk-event-title" label="Title" required>
+              <Input
+                id="spk-event-title"
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+                disabled={locked}
+                autoFocus={!locked}
+              />
+            </FormField>
+            <label className="flex items-center gap-2 text-sm font-medium">
+              <Checkbox
+                checked={allDay}
+                onCheckedChange={(value) => {
+                  const next = value === true;
+                  setAllDay(next);
+                  if (next) {
+                    setStart(start.slice(0, 10));
+                    setEnd((end || start).slice(0, 10));
+                  } else {
+                    setStart(start.length <= 10 ? `${start}T09:00` : start);
+                    setEnd((end || start).length <= 10 ? `${end || start}T10:00` : end);
+                  }
+                }}
+                disabled={locked}
+              />
+              All day
+            </label>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <FormField id="spk-event-start" label="Start">
+                <Input
+                  id="spk-event-start"
+                  type={allDay ? "date" : "datetime-local"}
+                  value={start}
+                  onChange={(event) => setStart(event.target.value)}
+                  disabled={locked}
+                />
+              </FormField>
+              <FormField id="spk-event-end" label="End">
+                <Input
+                  id="spk-event-end"
+                  type={allDay ? "date" : "datetime-local"}
+                  value={end}
+                  onChange={(event) => setEnd(event.target.value)}
+                  disabled={locked}
+                />
+              </FormField>
+            </div>
+            {resources.length > 0 ? (
+              <FormField id="spk-event-resource" label="Resource">
+                <NativeSelect
+                  id="spk-event-resource"
+                  value={resourceId}
+                  onChange={(event) => setResourceId(event.target.value)}
+                  disabled={locked}
+                  className="h-9 min-h-9"
+                >
+                  <option value="">None</option>
+                  {resources.map((resource) => (
+                    <option key={resource.id} value={resource.id}>
+                      {resource.title}
+                    </option>
+                  ))}
+                </NativeSelect>
+              </FormField>
+            ) : null}
+            <FormField id="spk-event-color" label="Color">
+              <NativeSelect
+                id="spk-event-color"
+                value={color}
+                onChange={(event) => setColor(event.target.value as SchedulerColorTone | "")}
+                disabled={locked}
+                className="h-9 min-h-9"
+              >
+                <option value="">From resource</option>
+                {SCHEDULER_COLOR_TONES.map((tone) => (
+                  <option key={tone} value={tone}>
+                    {tone}
+                  </option>
+                ))}
+              </NativeSelect>
+            </FormField>
+            <FormField id="spk-event-repeat" label="Repeat">
+              <NativeSelect
+                id="spk-event-repeat"
+                value={rrule}
+                onChange={(event) => setRrule(event.target.value)}
+                disabled={locked}
+                className="h-9 min-h-9"
+              >
+                {RRULE_PRESETS.map((preset) => (
+                  <option key={preset.value || "none"} value={preset.value}>
+                    {preset.label}
+                  </option>
+                ))}
+                {rrule && !RRULE_PRESETS.some((preset) => preset.value === rrule) ? (
+                  <option value={rrule}>Custom</option>
+                ) : null}
+              </NativeSelect>
+            </FormField>
+            <FormField id="spk-event-notes" label="Description">
+              <Textarea
+                id="spk-event-notes"
+                value={description}
+                onChange={(event) => setDescription(event.target.value)}
+                disabled={locked}
+                rows={3}
+              />
+            </FormField>
+            <DialogFooter>
+              {isEdit && onDelete && !locked ? (
+                <Button
+                  type="button"
+                  variant="destructive"
+                  className="sm:mr-auto"
+                  onClick={() => {
+                    onDelete(draft.id!);
+                    onOpenChange(false);
+                  }}
+                >
+                  Delete
+                </Button>
+              ) : null}
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                {locked ? "Close" : "Cancel"}
+              </Button>
+              {!locked ? <Button type="submit">Save</Button> : null}
+            </DialogFooter>
+          </form>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/composites/EventTimeline.tsx

@@ -0,0 +1,357 @@
+import { useMemo, useRef, useState, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
+import { expandVisibleEvents } from "../lib/rrule";
+import { useControllableState } from "../lib/use-controllable-state";
+import {
+  eventCanDrag,
+  eventCanResize,
+  eventColorStyle,
+  formatMonthYear,
+  getTimelineRange,
+  layoutTimelineBars,
+  normalizeEvents,
+  occurrenceKey,
+  resizeEvent,
+  shiftByMs,
+  shiftTimelineDate,
+  toDate,
+  visibleEvents,
+  type NormalizedEvent,
+  type SchedulerEvent,
+  type SchedulerResource,
+  type TimelineScale,
+} from "../lib/scheduler";
+import { EventEditor, type EventEditorDraft } from "./EventEditor";
+import {
+  EventResizeHandle,
+  ResourceLegend,
+  SchedulerShell,
+  SchedulerToolbar,
+  TIMELINE_SCALE_LABEL,
+} from "./scheduler-ui";
+import { DropdownMenuItem } from "../primitives/DropdownMenu";
+
+export type EventTimelineProps = {
+  events?: SchedulerEvent[];
+  resources?: SchedulerResource[];
+  scale?: TimelineScale;
+  defaultScale?: TimelineScale;
+  onScaleChange?: (scale: TimelineScale) => void;
+  date?: Date;
+  defaultDate?: Date;
+  onDateChange?: (date: Date) => void;
+  scales?: TimelineScale[];
+  locale?: string;
+  readOnly?: boolean;
+  areEventsDraggable?: boolean;
+  areEventsResizable?: boolean;
+  onEventClick?: (event: SchedulerEvent) => void;
+  onEventChange?: (event: SchedulerEvent, next: Partial<SchedulerEvent>) => void;
+  onEventCreate?: (event: SchedulerEvent) => void;
+  onEventDelete?: (event: SchedulerEvent) => void;
+  className?: string;
+};
+
+const LANE_HEIGHT = 28;
+const LANE_GAP = 4;
+const ROW_PAD = 10;
+
+function sourceEvent(events: SchedulerEvent[], id: string): SchedulerEvent | undefined {
+  return events.find((event) => event.id === id);
+}
+
+function draftFromSource(source: SchedulerEvent): EventEditorDraft {
+  return {
+    id: source.id,
+    title: source.title,
+    start: toDate(source.start),
+    end: toDate(source.end),
+    allDay: source.allDay,
+    resourceId: source.resourceId,
+    color: source.color,
+    description: source.description,
+    rrule: source.rrule,
+  };
+}
+
+function timelineTitle(scale: TimelineScale, date: Date, rangeStart: Date, rangeEnd: Date, locale?: string): string {
+  if (scale === "hours") {
+    return new Intl.DateTimeFormat(locale, { weekday: "short", month: "short", day: "numeric" }).format(date);
+  }
+  if (scale === "years") {
+    return `${rangeStart.getFullYear()}–${rangeEnd.getFullYear() - 1}`;
+  }
+  if (scale === "months") return String(date.getFullYear());
+  return formatMonthYear(date, locale);
+}
+
+/** Horizontal resource timeline — rows are resources, bars are allocations across time. */
+export function EventTimeline({
+  events = [],
+  resources = [],
+  scale: scaleProp,
+  defaultScale = "months",
+  onScaleChange,
+  date: dateProp,
+  defaultDate,
+  onDateChange,
+  scales = ["hours", "days", "weeks", "months", "years"],
+  locale,
+  readOnly = false,
+  areEventsDraggable,
+  areEventsResizable,
+  onEventClick,
+  onEventChange,
+  onEventCreate,
+  onEventDelete,
+  className,
+}: EventTimelineProps) {
+  const [scale, setScale] = useControllableState<TimelineScale>({
+    prop: scaleProp,
+    defaultProp: defaultScale,
+    onChange: onScaleChange,
+  });
+  const [date, setDate] = useControllableState<Date>({
+    prop: dateProp,
+    defaultProp: defaultDate ?? new Date(),
+    onChange: onDateChange,
+  });
+  const [hiddenIds, setHiddenIds] = useState<Set<string>>(new Set());
+  const [draft, setDraft] = useState<EventEditorDraft | null>(null);
+  const dragRef = useRef<{ id: string; x: number; active: boolean } | null>(null);
+
+  const resolvedScale = scale ?? "months";
+  const resolvedDate = date ?? new Date();
+  const range = useMemo(
+    () => getTimelineRange(resolvedDate, resolvedScale, locale),
+    [resolvedDate, resolvedScale, locale],
+  );
+  const canDrag = !readOnly && (areEventsDraggable ?? Boolean(onEventChange));
+  const canResize = !readOnly && (areEventsResizable ?? Boolean(onEventChange));
+  const editorLocked = readOnly || Boolean(draft?.id && sourceEvent(events, draft.id)?.readOnly);
+
+  const normalized = useMemo(() => {
+    const visible = visibleEvents(normalizeEvents(events, resources), hiddenIds);
+    return expandVisibleEvents(visible, range.start, range.end, events);
+  }, [events, resources, hiddenIds, range.start, range.end]);
+
+  const visibleResources = resources.filter((resource) => !hiddenIds.has(resource.id));
+  const rows = visibleResources.length > 0
+    ? visibleResources
+    : [{ id: "__all", title: "Events", color: "blue" as const }];
+
+  const title = timelineTitle(resolvedScale, resolvedDate, range.start, range.end, locale);
+
+  function toggleResource(id: string) {
+    setHiddenIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function openEvent(event: NormalizedEvent) {
+    const source = sourceEvent(events, event.id);
+    if (source) onEventClick?.(source);
+    setDraft(source ? draftFromSource(source) : {
+      id: event.id,
+      title: event.title,
+      start: event.start,
+      end: event.end,
+      allDay: event.allDay,
+      resourceId: event.resourceId,
+      color: event.color,
+      description: event.description,
+      rrule: event.rrule,
+    });
+  }
+
+  function handlePointerDown(event: NormalizedEvent, pointer: ReactPointerEvent) {
+    if (!onEventChange || !eventCanDrag(event, { readOnly, enabled: canDrag })) return;
+    (pointer.currentTarget as HTMLElement).setPointerCapture?.(pointer.pointerId);
+    dragRef.current = { id: event.id, x: pointer.clientX, active: false };
+  }
+
+  function handlePointerMove(pointer: ReactPointerEvent) {
+    const drag = dragRef.current;
+    if (!drag) return;
+    if (Math.abs(pointer.clientX - drag.x) > 6) drag.active = true;
+  }
+
+  function handlePointerUp(event: NormalizedEvent, pointer: ReactPointerEvent) {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    if (!drag?.active || !onEventChange) return;
+    const grid = (pointer.currentTarget as HTMLElement).closest("[data-scheduler-grid]") as HTMLElement | null;
+    if (!grid) return;
+    const rect = grid.getBoundingClientRect();
+    const rangeMs = range.end.getTime() - range.start.getTime();
+    const deltaPx = pointer.clientX - drag.x;
+    const deltaMs = (deltaPx / rect.width) * rangeMs;
+    const source = sourceEvent(events, event.id);
+    if (!source) return;
+    const master = normalizeEvents([source], resources)[0];
+    onEventChange(source, shiftByMs(master, deltaMs));
+  }
+
+  function commitResize(event: NormalizedEvent, edge: "start" | "end", instant: Date) {
+    if (!onEventChange) return;
+    const next = resizeEvent(event, edge, instant);
+    const source = sourceEvent(events, event.id);
+    if (!source) return;
+    const master = normalizeEvents([source], resources)[0];
+    onEventChange(source, {
+      start: new Date(master.start.getTime() + (next.start.getTime() - event.start.getTime())),
+      end: new Date(master.end.getTime() + (next.end.getTime() - event.end.getTime())),
+    });
+  }
+
+  function renderBar(event: NormalizedEvent): ReactNode {
+    const resizable = eventCanResize(event, { readOnly, enabled: canResize }) && Boolean(onEventChange);
+    const button = (
+      <button
+        type="button"
+        className="flex h-6 w-full items-center truncate rounded-md px-2 text-left text-[11px] font-semibold shadow-sm"
+        style={eventColorStyle(event.color, "bar")}
+        onClick={() => {
+          if (dragRef.current?.active) return;
+          openEvent(event);
+        }}
+        onPointerDown={(pointer) => handlePointerDown(event, pointer)}
+        onPointerMove={handlePointerMove}
+        onPointerUp={(pointer) => handlePointerUp(event, pointer)}
+      >
+        {event.title}
+      </button>
+    );
+
+    if (!resizable) return button;
+
+    return (
+      <div className="relative h-full">
+        {button}
+        <EventResizeHandle event={event} edge="start" axis="ew" onCommit={commitResize} />
+        <EventResizeHandle event={event} edge="end" axis="ew" onCommit={commitResize} />
+      </div>
+    );
+  }
+
+  return (
+    <SchedulerShell slot="event-timeline" className={className} aria-label="Event timeline">
+      <SchedulerToolbar
+        title={title}
+        onPrev={() => setDate(shiftTimelineDate(resolvedDate, resolvedScale, -1))}
+        onNext={() => setDate(shiftTimelineDate(resolvedDate, resolvedScale, 1))}
+        onToday={() => setDate(new Date())}
+        menuLabel={TIMELINE_SCALE_LABEL[resolvedScale]}
+        menu={scales.map((item) => (
+          <DropdownMenuItem key={item} onClick={() => setScale(item)}>
+            {TIMELINE_SCALE_LABEL[item]}
+          </DropdownMenuItem>
+        ))}
+      />
+
+      <div className="overflow-x-auto">
+        <div className="min-w-[720px]">
+          <div className="grid" style={{ gridTemplateColumns: "11rem minmax(0, 1fr)" }}>
+            <div className="border-b border-r border-border/50 px-3 py-2 text-[10px] font-black uppercase tracking-widest text-muted-foreground">
+              Resource
+            </div>
+            <div
+              className="grid border-b border-border/50"
+              style={{ gridTemplateColumns: `repeat(${range.ticks.length}, minmax(0, 1fr))` }}
+            >
+              {range.ticks.map((tick) => (
+                <div
+                  key={tick.date.toISOString()}
+                  className="border-l border-border/40 px-2 py-2 text-center text-xs font-bold text-foreground first:border-l-0"
+                >
+                  {tick.label}
+                </div>
+              ))}
+            </div>
+
+            {rows.map((resource) => {
+              const rowEvents =
+                resource.id === "__all"
+                  ? normalized
+                  : normalized.filter((event) => event.resourceId === resource.id);
+              const bars = layoutTimelineBars(rowEvents, range.start, range.end);
+              const laneCount = Math.max(1, ...bars.map((bar) => bar.lane + 1), 1);
+              const height = ROW_PAD * 2 + laneCount * LANE_HEIGHT + (laneCount - 1) * LANE_GAP;
+              const tone = resource.color ?? (rowEvents[0]?.color ?? "blue");
+
+              return (
+                <div key={resource.id} className="contents">
+                  <div
+                    className="flex items-center gap-2 border-b border-r border-border/40 px-3 py-2"
+                    style={{ minHeight: height }}
+                  >
+                    <span className="size-2.5 shrink-0 rounded-full" style={eventColorStyle(tone, "dot")} />
+                    <span className="truncate text-sm font-semibold text-foreground">{resource.title}</span>
+                  </div>
+                  <div
+                    data-scheduler-grid
+                    data-range-start={range.start.getTime()}
+                    data-range-end={range.end.getTime()}
+                    className="relative border-b border-border/40"
+                    style={{
+                      minHeight: height,
+                      backgroundImage: `repeating-linear-gradient(90deg, transparent, transparent calc(${100 / range.ticks.length}% - 1px), color-mix(in srgb, var(--border) 40%, transparent) calc(${100 / range.ticks.length}% - 1px), color-mix(in srgb, var(--border) 40%, transparent) ${100 / range.ticks.length}%)`,
+                    }}
+                  >
+                    {bars.map((bar) => (
+                      <div
+                        key={occurrenceKey(bar.event)}
+                        className="absolute"
+                        style={{
+                          top: ROW_PAD + bar.lane * (LANE_HEIGHT + LANE_GAP),
+                          left: `${bar.left}%`,
+                          width: `${bar.width}%`,
+                          height: LANE_HEIGHT,
+                        }}
+                      >
+                        {renderBar(bar.event)}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      <ResourceLegend
+        resources={resources}
+        hiddenIds={hiddenIds}
+        onToggle={toggleResource}
+      />
+
+      <EventEditor
+        open={draft != null}
+        onOpenChange={(open) => {
+          if (!open) setDraft(null);
+        }}
+        draft={draft}
+        resources={resources}
+        readOnly={editorLocked}
+        onSave={(event) => {
+          if (event.id && sourceEvent(events, event.id)) {
+            onEventChange?.(sourceEvent(events, event.id)!, event);
+          } else {
+            onEventCreate?.(event);
+          }
+        }}
+        onDelete={
+          onEventDelete
+            ? (id) => {
+                const source = sourceEvent(events, id);
+                if (source) onEventDelete(source);
+              }
+            : undefined
+        }
+      />
+    </SchedulerShell>
+  );
+}

package/src/composites/FloatChip.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { PresenceDot } from "./PresenceDot";
+
+export type FloatChipProps = {
+  icon?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  /** Compact live row (green pip + uppercase label) instead of title/subtitle. */
+  live?: boolean;
+  children?: ReactNode;
+  /** CSS float animation. */
+  float?: boolean;
+  className?: string;
+};
+
+/** Frosted floating fact chip used around a marketing hero portrait. */
+export function FloatChip({
+  icon,
+  title,
+  subtitle,
+  live = false,
+  children,
+  float = false,
+  className,
+}: FloatChipProps) {
+  return (
+    <div
+      data-slot="float-chip"
+      className={cn(
+        "inline-flex items-center gap-2.5 rounded-2xl border border-border bg-[color-mix(in_srgb,var(--background)_90%,transparent)] px-3 py-2.5 shadow-[0_12px_32px_rgba(0,0,0,0.12)] backdrop-blur-md",
+        float && "spk-float",
+        className,
+      )}
+    >
+      {icon ? (
+        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-base">
+          {icon}
+        </div>
+      ) : null}
+      {live ? (
+        <div className="flex items-center gap-2">
+          <PresenceDot tone="success" />
+          <p className="text-[11px] font-black uppercase leading-none tracking-widest text-[var(--accent-info)]">
+            {children ?? title}
+          </p>
+        </div>
+      ) : (
+        <div>
+          {title ? (
+            <p className="text-[12px] font-black uppercase leading-none tracking-wide text-foreground">
+              {title}
+            </p>
+          ) : null}
+          {subtitle ? (
+            <p className="mt-1 text-[10px] font-bold text-muted-foreground">{subtitle}</p>
+          ) : null}
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}