@spatika/react 1.3.1 → 1.5.0

package/src/composites/EventCalendar.tsx

@@ -1,4 +1,5 @@
 import {
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -13,6 +14,8 @@ import {
   addDays,
   addMonths,
   agendaDays,
+  calendarVisibleRange,
+  CALENDAR_AGENDA_DAYS,
   DEFAULT_SCHEDULER_PREFERENCES,
   eventCanDrag,
   eventCanResize,
@@ -44,6 +47,7 @@ import {
   weekNumber,
   weekSpanLanesForDays,
   type CalendarView,
+  type CalendarVisibleRange,
   type NormalizedEvent,
   type SchedulerEvent,
   type SchedulerPreferences,
@@ -54,9 +58,11 @@ import {
   CALENDAR_VIEW_LABEL,
   EventResizeHandle,
   ResourceLegend,
+  SchedulerDateJump,
   SchedulerPreferencesMenu,
   SchedulerShell,
   SchedulerToolbar,
+  type SchedulerToolbarDensity,
 } from "./scheduler-ui";
 import { DropdownMenuItem } from "../primitives/DropdownMenu";
 
@@ -125,6 +131,14 @@ export type EventCalendarProps = {
   showPreferences?: boolean;
   /** Extra controls after the view menu. Ignored when `renderToolbar` is set. */
   toolbarTrailing?: ReactNode;
+  /** Default toolbar layout. Compact is a single desktop row. Ignored when `renderToolbar` is set. */
+  toolbarDensity?: SchedulerToolbarDensity;
+  /** Month/year native selects on the default toolbar. Ignored when `renderToolbar` is set. */
+  showDateJump?: boolean;
+  /** Years in the date-jump select. Defaults to a window around the current year. */
+  yearOptions?: number[];
+  /** Fires when the painted date window changes. `end` is exclusive. */
+  onVisibleRangeChange?: (range: CalendarVisibleRange & { view: CalendarView }) => void;
   /** Replace event chip contents. The kit still wraps with the click/drag trigger. */
   renderEvent?: (
     event: NormalizedEvent,
@@ -136,7 +150,6 @@ export type EventCalendarProps = {
 };
 
 const MAX_TIMED_IN_CELL = 3;
-const AGENDA_LENGTH = 14;
 
 function chunkWeeks<T>(items: T[]): T[][] {
   const weeks: T[][] = [];
@@ -153,27 +166,6 @@ function startOfToday(): Date {
   return new Date(now.getFullYear(), now.getMonth(), now.getDate());
 }
 
-function visibleRange(
-  view: CalendarView,
-  date: Date,
-  weekStartsOn: number,
-): { start: Date; end: Date } {
-  if (view === "month") {
-    const grid = getMonthGrid(date, weekStartsOn);
-    return { start: grid[0], end: addDays(grid[grid.length - 1], 1) };
-  }
-  if (view === "week") {
-    const days = getWeekDays(date, weekStartsOn);
-    return { start: days[0], end: addDays(days[6], 1) };
-  }
-  if (view === "agenda") {
-    const days = agendaDays(date, AGENDA_LENGTH);
-    return { start: days[0], end: addDays(days[days.length - 1], 1) };
-  }
-  const start = startOfDay(date);
-  return { start, end: addDays(start, 1) };
-}
-
 function draftFromSource(source: SchedulerEvent): EventEditorDraft {
   return {
     id: source.id,
@@ -217,6 +209,10 @@ export function EventCalendar({
   showEventEditor = true,
   showPreferences = true,
   toolbarTrailing,
+  toolbarDensity = "default",
+  showDateJump = false,
+  yearOptions,
+  onVisibleRangeChange,
   renderEvent,
   renderToolbar,
   className,
@@ -253,10 +249,14 @@ export function EventCalendar({
   const editorLocked = readOnly || Boolean(draft?.id && sourceEvent(events, draft.id)?.readOnly);
 
   const range = useMemo(
-    () => visibleRange(resolvedView, resolvedDate, startOn),
+    () => calendarVisibleRange(resolvedView, resolvedDate, startOn),
     [resolvedView, resolvedDate, startOn],
   );
 
+  useEffect(() => {
+    onVisibleRangeChange?.({ start: range.start, end: range.end, view: resolvedView });
+  }, [range.start, range.end, resolvedView, onVisibleRangeChange]);
+
   const normalized = useMemo(() => {
     const visible = visibleEvents(normalizeEvents(events, resources), hiddenIds);
     return expandVisibleEvents(visible, range.start, range.end, events);
@@ -473,6 +473,7 @@ export function EventCalendar({
       ) : (
         <SchedulerToolbar
           title={title}
+          density={toolbarDensity}
           onPrev={() => go(-1)}
           onNext={() => go(1)}
           onToday={() => setDate(new Date())}
@@ -482,6 +483,16 @@ export function EventCalendar({
               {CALENDAR_VIEW_LABEL[item]}
             </DropdownMenuItem>
           ))}
+          dateJump={
+            showDateJump ? (
+              <SchedulerDateJump
+                date={resolvedDate}
+                locale={locale}
+                yearOptions={yearOptions}
+                onDateChange={(next) => setDate(next)}
+              />
+            ) : null
+          }
           trailing={
             <>
               {toolbarTrailing}
@@ -655,7 +666,7 @@ function MonthGrid({
                             "flex size-7 items-center justify-center rounded-full text-xs font-bold",
                             isToday && "bg-primary text-primary-foreground",
                             !isToday && inMonth && "text-foreground hover:bg-muted/50",
-                            !isToday && !inMonth && "text-muted-foreground/70",
+                            !isToday && !inMonth && "text-muted-foreground",
                           )}
                         >
                           {day.getDate()}
@@ -677,7 +688,7 @@ function MonthGrid({
                         >
                           {renderEventTrigger(
                             slot.event,
-                            "flex h-5 w-full items-center truncate rounded-md px-1.5 text-[11px] font-semibold leading-none",
+                            "flex min-h-6 w-full items-center truncate rounded-md px-1.5 text-[11px] font-semibold leading-none",
                             slot.event.title,
                             { variant: "month-bar" },
                           )}
@@ -712,7 +723,7 @@ function MonthGrid({
                           <div key={occurrenceKey(event)} className="min-w-0">
                             {renderEventTrigger(
                               event,
-                              "flex w-full min-w-0 items-center gap-1 rounded-sm px-0.5 py-0.5 text-left text-[11px] leading-tight text-foreground hover:bg-muted/40",
+                              "flex min-h-6 w-full min-w-0 items-center gap-1 rounded-sm px-0.5 py-0.5 text-left text-[11px] leading-tight text-foreground hover:bg-muted/40",
                               <>
                                 <span
                                   className="size-1.5 shrink-0 rounded-full"
@@ -964,7 +975,7 @@ function AgendaList({
     options?: { resize?: "ns"; variant: EventCalendarEventVariant },
   ) => ReactNode;
 }) {
-  const days = filterWeekendDays(agendaDays(date, AGENDA_LENGTH), showWeekends);
+  const days = filterWeekendDays(agendaDays(date, CALENDAR_AGENDA_DAYS), showWeekends);
 
   return (
     <div className="divide-y divide-border/50">

package/src/composites/RichTextEditor.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { RichTextEditor } from "./RichTextEditor";
+
+vi.mock("@spatika/editor", () => ({
+  SpatikaEditor: ({
+    value,
+    placeholder,
+    heightClassName,
+    toolbar,
+  }: {
+    value: string;
+    placeholder?: string;
+    heightClassName?: string;
+    toolbar?: Record<string, unknown>;
+  }) => (
+    <div
+      data-testid="spatika-editor-shim"
+      data-value={value}
+      data-placeholder={placeholder}
+      data-height={heightClassName}
+      data-toolbar={JSON.stringify(toolbar)}
+    />
+  ),
+}));
+
+describe("RichTextEditor", () => {
+  it("delegates to SpatikaEditor with a compact legacy toolbar", () => {
+    render(
+      <RichTextEditor
+        value="<p>Note</p>"
+        placeholder="Write something…"
+        minHeightClassName="min-h-40"
+      />,
+    );
+    const shim = screen.getByTestId("spatika-editor-shim");
+    expect(shim).toHaveAttribute("data-value", "<p>Note</p>");
+    expect(shim).toHaveAttribute("data-placeholder", "Write something…");
+    expect(shim).toHaveAttribute("data-height", "min-h-40");
+    expect(shim).toHaveAttribute(
+      "data-toolbar",
+      JSON.stringify({
+        layout: "compact",
+        textStyle: false,
+        alignment: false,
+        insert: false,
+        ai: false,
+      }),
+    );
+  });
+});

package/src/composites/RichTextEditor.tsx

@@ -1,13 +1,8 @@
-import { useEffect, useRef } from "react";
-import {
-  Bold,
-  Italic,
-  List,
-  ListOrdered,
-  Underline as UnderlineIcon,
-} from "lucide-react";
-import { cn } from "../lib/cn";
-import { Button } from "../primitives/Button";
+/**
+ * @deprecated Use `SpatikaEditor` from `@spatika/react` instead.
+ * Import `@spatika/editor/styles.css` alongside `@spatika/tokens/styles.css`.
+ */
+import { SpatikaEditor } from "@spatika/editor";
 
 export type RichTextEditorProps = {
   value?: string;
@@ -17,10 +12,7 @@ export type RichTextEditorProps = {
   minHeightClassName?: string;
 };
 
-/**
- * Lightweight rich-text surface (contenteditable) for notes and captions.
- * Pair with TipTap or another full editor in your app when you need tables or advanced media.
- */
+/** @deprecated Use `SpatikaEditor` for full rich text editing with Tiptap. */
 export function RichTextEditor({
   value = "",
   onChange,
@@ -28,76 +20,20 @@ export function RichTextEditor({
   className,
   minHeightClassName = "min-h-40",
 }: RichTextEditorProps) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (ref.current && value !== ref.current.innerHTML) {
-      ref.current.innerHTML = value;
-    }
-  }, [value]);
-
-  const exec = (command: string) => {
-    document.execCommand(command);
-    onChange?.(ref.current?.innerHTML ?? "");
-    ref.current?.focus();
-  };
-
   return (
-    <div
-      data-slot="rich-text-editor"
-      className={cn(
-        "overflow-hidden rounded-[var(--radius-card)] border border-border/50 bg-input-background",
-        className,
-      )}
-    >
-      <div className="flex flex-wrap gap-1 border-b border-border/40 bg-muted/30 p-1.5">
-        <Button type="button" variant="ghost" size="icon" aria-label="Bold" onClick={() => exec("bold")}>
-          <Bold className="size-4" />
-        </Button>
-        <Button type="button" variant="ghost" size="icon" aria-label="Italic" onClick={() => exec("italic")}>
-          <Italic className="size-4" />
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          aria-label="Underline"
-          onClick={() => exec("underline")}
-        >
-          <UnderlineIcon className="size-4" />
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          aria-label="Bullet list"
-          onClick={() => exec("insertUnorderedList")}
-        >
-          <List className="size-4" />
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          aria-label="Numbered list"
-          onClick={() => exec("insertOrderedList")}
-        >
-          <ListOrdered className="size-4" />
-        </Button>
-      </div>
-      <div
-        ref={ref}
-        role="textbox"
-        aria-multiline="true"
-        contentEditable
-        suppressContentEditableWarning
-        data-placeholder={placeholder}
-        className={cn(
-          "px-3 py-2 text-sm outline-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]",
-          minHeightClassName,
-        )}
-        onInput={() => onChange?.(ref.current?.innerHTML ?? "")}
-      />
-    </div>
+    <SpatikaEditor
+      value={value}
+      onChange={(html) => onChange?.(html)}
+      placeholder={placeholder}
+      className={className}
+      heightClassName={minHeightClassName}
+      toolbar={{
+        layout: "compact",
+        textStyle: false,
+        alignment: false,
+        insert: false,
+        ai: false,
+      }}
+    />
   );
 }

package/src/composites/chart-ui.test.tsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { SparkLineChart } from "@spatika/charts";
+
+/**
+ * `chart-ui` moved to `@spatika/charts`. This file keeps colocated coverage
+ * next to the old path so the extract stays test-paired.
+ */
+describe("chart-ui (re-exported via @spatika/charts)", () => {
+  it("still renders a sparkline frame that uses ChartFrame", () => {
+    const { container } = render(
+      <SparkLineChart data={[1, 4, 2]} width={120} height={36} />,
+    );
+    expect(container.querySelector('[data-slot="sparkline"]')).toBeTruthy();
+  });
+
+  it("does not paint a tooltip when nothing is hovered", () => {
+    render(<SparkLineChart data={[1, 4, 2]} width={120} height={36} />);
+    expect(document.querySelector('[role="tooltip"]')).toBeNull();
+  });
+});

package/src/composites/scheduler-ui.tsx

@@ -12,6 +12,7 @@ import {
   type SchedulerResource,
   type TimelineScale,
 } from "../lib/scheduler";
+import { NativeSelect } from "../primitives/NativeSelect";
 import { Button } from "../primitives/Button";
 import {
   DropdownMenu,
@@ -36,6 +37,8 @@ export const TIMELINE_SCALE_LABEL: Record<TimelineScale, string> = {
   years: "Years",
 };
 
+export type SchedulerToolbarDensity = "default" | "compact";
+
 export type SchedulerToolbarProps = {
   title: ReactNode;
   onPrev: () => void;
@@ -44,6 +47,10 @@ export type SchedulerToolbarProps = {
   menuLabel: string;
   menu: ReactNode;
   trailing?: ReactNode;
+  /** Compact is a single desktop row. Defaults keep the stacked marketing toolbar. */
+  density?: SchedulerToolbarDensity;
+  /** Month/year jump. Sits beside the view menu. */
+  dateJump?: ReactNode;
 };
 
 export function SchedulerToolbar({
@@ -54,48 +61,143 @@ export function SchedulerToolbar({
   menuLabel,
   menu,
   trailing,
+  density = "default",
+  dateJump,
 }: SchedulerToolbarProps) {
+  const nav = (
+    <div className="flex items-center gap-1">
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        aria-label="Previous"
+        onClick={onPrev}
+      >
+        <ChevronLeft className="size-4" />
+      </Button>
+      <Button type="button" variant="outline" size="sm" className="uppercase tracking-wide" onClick={onToday}>
+        Today
+      </Button>
+      <Button type="button" variant="ghost" size="icon" aria-label="Next" onClick={onNext}>
+        <ChevronRight className="size-4" />
+      </Button>
+    </div>
+  );
+
+  const viewMenu = (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="button" variant="outline" size="sm" className="min-w-[6.5rem] justify-between gap-2 uppercase tracking-wide">
+          {menuLabel}
+          <ChevronDown className="size-3.5 opacity-70" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">{menu}</DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  if (density === "compact") {
+    return (
+      <div
+        data-slot="scheduler-toolbar"
+        data-density="compact"
+        className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-border/50 px-3 py-2 sm:px-4 sm:py-3"
+      >
+        {nav}
+        <h2 className="min-w-0 truncate text-center text-sm font-black uppercase tracking-widest text-foreground">
+          {title}
+        </h2>
+        <div className="flex shrink-0 flex-nowrap items-center justify-end gap-2">
+          {viewMenu}
+          {dateJump}
+          {trailing}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div
       data-slot="scheduler-toolbar"
+      data-density="default"
       className="flex flex-col gap-3 border-b border-border/50 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4"
     >
       <h2 className="min-w-0 truncate text-xl font-black tracking-tight text-foreground sm:text-2xl">
         {title}
       </h2>
       <div className="flex flex-wrap items-center gap-2">
-        <div className="flex items-center gap-1">
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon"
-            aria-label="Previous"
-            onClick={onPrev}
-          >
-            <ChevronLeft className="size-4" />
-          </Button>
-          <Button type="button" variant="outline" size="sm" className="uppercase tracking-wide" onClick={onToday}>
-            Today
-          </Button>
-          <Button type="button" variant="ghost" size="icon" aria-label="Next" onClick={onNext}>
-            <ChevronRight className="size-4" />
-          </Button>
-        </div>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button type="button" variant="outline" size="sm" className="min-w-[6.5rem] justify-between gap-2 uppercase tracking-wide">
-              {menuLabel}
-              <ChevronDown className="size-3.5 opacity-70" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">{menu}</DropdownMenuContent>
-        </DropdownMenu>
+        {nav}
+        {viewMenu}
+        {dateJump}
         {trailing}
       </div>
     </div>
   );
 }
 
+const DATE_JUMP_SELECT =
+  "w-[5.25rem] min-w-[5.25rem] text-center [text-align-last:center]";
+
+export type SchedulerDateJumpProps = {
+  date: Date;
+  locale?: string;
+  yearOptions?: number[];
+  onDateChange: (date: Date) => void;
+};
+
+function resolveYearOptions(year: number, yearOptions?: number[]) {
+  if (yearOptions && yearOptions.length > 0) {
+    return yearOptions.includes(year) ? yearOptions : [...yearOptions, year].sort((a, b) => a - b);
+  }
+  return Array.from({ length: 13 }, (_, index) => year - 8 + index);
+}
+
+/** Compact month/year native selects for calendar toolbars. */
+export function SchedulerDateJump({
+  date,
+  locale,
+  yearOptions,
+  onDateChange,
+}: SchedulerDateJumpProps) {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const years = resolveYearOptions(year, yearOptions);
+  const months = Array.from({ length: 12 }, (_, index) =>
+    new Intl.DateTimeFormat(locale, { month: "short" }).format(new Date(2020, index, 1)).toUpperCase(),
+  );
+
+  return (
+    <div className="flex shrink-0 items-center gap-1.5">
+      <NativeSelect
+        size="sm"
+        className={DATE_JUMP_SELECT}
+        aria-label="Month"
+        value={month}
+        onChange={(event) => onDateChange(new Date(year, Number(event.target.value), 1))}
+      >
+        {months.map((label, index) => (
+          <option key={label} value={index}>
+            {label}
+          </option>
+        ))}
+      </NativeSelect>
+      <NativeSelect
+        size="sm"
+        className={cn(DATE_JUMP_SELECT, "tabular-nums")}
+        aria-label="Year"
+        value={year}
+        onChange={(event) => onDateChange(new Date(Number(event.target.value), month, 1))}
+      >
+        {years.map((yearOption) => (
+          <option key={yearOption} value={yearOption}>
+            {yearOption}
+          </option>
+        ))}
+      </NativeSelect>
+    </div>
+  );
+}
+
 export function SchedulerPreferencesMenu({
   value,
   onChange,