@spatika/react 1.3.1 → 1.5.0

package/src/composites/scheduler.test.tsx

@@ -1,228 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
-import { EventCalendar } from "./EventCalendar";
 import { EventTimeline } from "./EventTimeline";
 import type { SchedulerEvent, SchedulerResource } from "../lib/scheduler";
 
-const resources: SchedulerResource[] = [
-  { id: "work", title: "Work", color: "violet" },
-  { id: "health", title: "Health", color: "teal" },
-];
-
-const events: SchedulerEvent[] = [
-  {
-    id: "run",
-    title: "Morning Run",
-    start: "2026-08-03T07:00:00",
-    end: "2026-08-03T07:45:00",
-    resourceId: "health",
-  },
-  {
-    id: "bday",
-    title: "Alice's Birthday",
-    start: "2026-08-06",
-    end: "2026-08-08",
-    allDay: true,
-    resourceId: "work",
-    color: "rose",
-  },
-  {
-    id: "review",
-    title: "Design Review",
-    start: "2026-08-09T14:00:00",
-    end: "2026-08-09T16:00:00",
-    resourceId: "work",
-  },
-];
-
-describe("EventCalendar", () => {
-  it("renders the month heading, weekday labels, and events", () => {
-    render(
-      <EventCalendar
-        defaultDate={new Date(2026, 7, 15)}
-        events={events}
-        resources={resources}
-        locale="en-US"
-      />,
-    );
-    expect(screen.getByRole("heading", { name: /August 2026/i })).toBeInTheDocument();
-    expect(screen.getByText(/Sun/)).toBeInTheDocument();
-    expect(screen.getByText("Morning Run")).toBeInTheDocument();
-    expect(screen.getByText("Alice's Birthday")).toBeInTheDocument();
-    expect(screen.getByText("Work")).toBeInTheDocument();
-  });
-
-  it("jumps to today from the toolbar", async () => {
-    const user = userEvent.setup();
-    const onDateChange = vi.fn();
-    render(
-      <EventCalendar
-        defaultDate={new Date(2025, 0, 1)}
-        onDateChange={onDateChange}
-        events={events}
-      />,
-    );
-    await user.click(screen.getByRole("button", { name: "Today" }));
-    expect(onDateChange).toHaveBeenCalled();
-    const next = onDateChange.mock.calls[0][0] as Date;
-    const now = new Date();
-    expect(next.getFullYear()).toBe(now.getFullYear());
-    expect(next.getMonth()).toBe(now.getMonth());
-  });
-
-  it("fires onEventClick for a timed event", async () => {
-    const user = userEvent.setup();
-    const onEventClick = vi.fn();
-    render(
-      <EventCalendar
-        defaultDate={new Date(2026, 7, 15)}
-        events={events}
-        resources={resources}
-        locale="en-US"
-        onEventClick={onEventClick}
-      />,
-    );
-    await user.click(screen.getByText("Morning Run"));
-    expect(onEventClick).toHaveBeenCalledWith(expect.objectContaining({ id: "run" }));
-  });
-
-  it("switches to week view from the menu", async () => {
-    const user = userEvent.setup();
-    render(
-      <EventCalendar defaultDate={new Date(2026, 7, 15)} events={events} locale="en-US" />,
-    );
-    await user.click(screen.getByRole("button", { name: /month/i }));
-    await user.click(screen.getByRole("menuitem", { name: "Week" }));
-    expect(screen.getByRole("heading", { name: /2026/ })).toBeInTheDocument();
-  });
-
-  it("lists events in agenda view", () => {
-    render(
-      <EventCalendar
-        defaultView="agenda"
-        defaultDate={new Date(2026, 7, 3)}
-        events={events}
-        locale="en-US"
-      />,
-    );
-    expect(screen.getByRole("heading", { name: /Aug 3/ })).toBeInTheDocument();
-    expect(screen.getAllByText("No events").length).toBeGreaterThan(0);
-    expect(screen.getByText("Morning Run")).toBeInTheDocument();
-    expect(screen.getAllByText("Alice's Birthday").length).toBeGreaterThan(0);
-  });
-
-  it("opens the editor and saves title changes", async () => {
-    const user = userEvent.setup();
-    const onEventChange = vi.fn();
-    render(
-      <EventCalendar
-        defaultDate={new Date(2026, 7, 15)}
-        events={events}
-        resources={resources}
-        locale="en-US"
-        onEventChange={onEventChange}
-      />,
-    );
-    await user.click(screen.getByText("Morning Run"));
-    const title = screen.getByRole("textbox", { name: /title/i });
-    await user.clear(title);
-    await user.type(title, "Jog");
-    await user.click(screen.getByRole("button", { name: "Save" }));
-    expect(onEventChange).toHaveBeenCalledWith(
-      expect.objectContaining({ id: "run" }),
-      expect.objectContaining({ title: "Jog" }),
-    );
-  });
-
-  it("creates an event from a day slot", async () => {
-    const user = userEvent.setup();
-    const onEventCreate = vi.fn();
-    render(
-      <EventCalendar
-        defaultDate={new Date(2026, 7, 15)}
-        events={events}
-        locale="en-US"
-        onEventCreate={onEventCreate}
-      />,
-    );
-    await user.click(screen.getByRole("button", { name: "15" }));
-    expect(screen.getByRole("heading", { name: "New event" })).toBeInTheDocument();
-    await user.type(screen.getByRole("textbox", { name: /title/i }), "Focus time");
-    await user.click(screen.getByRole("button", { name: "Save" }));
-    expect(onEventCreate).toHaveBeenCalledWith(expect.objectContaining({ title: "Focus time" }));
-  });
-
-  it("skips the built-in editor when showEventEditor is false", async () => {
-    const user = userEvent.setup();
-    const onEventClick = vi.fn();
-    const onSlotClick = vi.fn();
-    render(
-      <EventCalendar
-        defaultDate={new Date(2026, 7, 15)}
-        events={events}
-        resources={resources}
-        locale="en-US"
-        showEventEditor={false}
-        onEventClick={onEventClick}
-        onSlotClick={onSlotClick}
-      />,
-    );
-    await user.click(screen.getByText("Morning Run"));
-    expect(onEventClick).toHaveBeenCalledWith(expect.objectContaining({ id: "run" }));
-    expect(screen.queryByRole("heading", { name: /event/i })).not.toBeInTheDocument();
-
-    await user.click(screen.getByRole("button", { name: "15" }));
-    expect(onSlotClick).toHaveBeenCalled();
-    expect(screen.queryByRole("heading", { name: "New event" })).not.toBeInTheDocument();
-  });
-
-  it("renders custom event chips and toolbar", async () => {
-    const user = userEvent.setup();
-    const onDateChange = vi.fn();
-    render(
-      <EventCalendar
-        defaultDate={new Date(2026, 7, 15)}
-        events={events}
-        resources={resources}
-        locale="en-US"
-        showEventEditor={false}
-        showPreferences={false}
-        toolbarTrailing={<button type="button">Jump year</button>}
-        renderEvent={(event) => <span>★ {event.title}</span>}
-        renderToolbar={({ title, onToday }) => (
-          <div>
-            <p>{title}</p>
-            <button type="button" onClick={onToday}>
-              Jump today
-            </button>
-          </div>
-        )}
-        onDateChange={onDateChange}
-      />,
-    );
-    expect(screen.getByText("★ Morning Run")).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Preferences" })).not.toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Jump year" })).not.toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Jump today" }));
-    expect(onDateChange).toHaveBeenCalled();
-  });
-
-  it("keeps toolbarTrailing on the default toolbar", () => {
-    render(
-      <EventCalendar
-        defaultDate={new Date(2026, 7, 15)}
-        events={events}
-        locale="en-US"
-        showPreferences={false}
-        toolbarTrailing={<button type="button">Jump year</button>}
-      />,
-    );
-    expect(screen.getByRole("button", { name: "Jump year" })).toBeInTheDocument();
-    expect(screen.getByRole("heading", { name: /August 2026/i })).toBeInTheDocument();
-  });
-});
-
 describe("EventTimeline", () => {
   const timelineEvents: SchedulerEvent[] = [
     {

package/src/index.test.ts

@@ -7,7 +7,11 @@ import {
   ChartDataGrid,
   EventCalendar,
   MapChart,
+  SchedulerDateJump,
   SchedulerToolbar,
+  BREAKPOINTS,
+  calendarVisibleRange,
+  createTheme,
   mercator,
 } from "./index";
 
@@ -21,6 +25,12 @@ describe("@spatika/react public exports", () => {
     expect(BarChart3D).toBeTypeOf("function");
     expect(EventCalendar).toBeTypeOf("function");
     expect(SchedulerToolbar).toBeTypeOf("function");
+    expect(SchedulerDateJump).toBeTypeOf("function");
+    expect(calendarVisibleRange).toBeTypeOf("function");
     expect(mercator([0, 0])[0]).toBeCloseTo(0.5);
+    expect(BREAKPOINTS.md).toBe(768);
+    expect(createTheme({ id: "brand", palette: { primary: "#7c3aed" } }).vars["--primary"]).toBe(
+      "#7c3aed",
+    );
   });
 });

package/src/index.ts

@@ -37,7 +37,9 @@ export {
   layoutToggleClass,
   listRowToggleClass,
   nativeSelectClass,
+  nativeSelectSizeClass,
 } from "./lib/chips";
+export type { NativeSelectSize } from "./lib/chips";
 export {
   duration,
   transition,
@@ -55,8 +57,33 @@ export {
   applyTheme,
   isDarkTheme,
   isThemeId,
+  type ApplyThemeCustom,
+  type BuiltinThemeId,
   type ThemeId,
 } from "./lib/themes";
+export {
+  createTheme,
+  themeToCss,
+  injectCustomThemeStyles,
+  findCustomTheme,
+  PALETTE_CSS_VARS,
+  GLASS_CSS_VARS,
+  SHAPE_CSS_VARS,
+  type CreateThemeOptions,
+  type SpatikaTheme,
+  type ThemePalette,
+  type ThemeGlass,
+  type ThemeShape,
+  type ThemeTypography,
+} from "./lib/create-theme";
+export {
+  BREAKPOINTS,
+  BREAKPOINT_KEYS,
+  breakpointUp,
+  breakpointDown,
+  breakpointBetween,
+  type Breakpoint,
+} from "./lib/breakpoints";
 export { getAvatarColor, getAvatarFallbackHue, getInitials } from "./lib/avatar-utils";
 export {
   COVER_PATTERN_KINDS,
@@ -77,7 +104,13 @@ export {
   coverTitleClass,
 } from "./lib/cover-chrome";
 export { useCoverChromeBleed, type CoverChromeInk } from "./lib/use-cover-chrome-bleed";
-export { useIsMobile, useMediaQuery } from "./lib/use-media-query";
+export {
+  useIsMobile,
+  useMediaQuery,
+  useBreakpoint,
+  useBreakpointUp,
+  useBreakpointDown,
+} from "./lib/use-media-query";
 export {
   SpatikaThemeProvider,
   useSpatikaTheme,
@@ -209,7 +242,7 @@ export {
   SelectTrigger,
   SelectValue,
 } from "./primitives/Select";
-export { NativeSelect } from "./primitives/NativeSelect";
+export { NativeSelect, type NativeSelectProps } from "./primitives/NativeSelect";
 export { Spinner } from "./primitives/Spinner";
 export { Alert, AlertTitle, AlertDescription, alertVariants } from "./primitives/Alert";
 export { Kbd } from "./primitives/Kbd";
@@ -402,6 +435,36 @@ export {
   type PhotoViewerItem,
 } from "./composites/PhotoViewer";
 export { RichTextEditor, type RichTextEditorProps } from "./composites/RichTextEditor";
+export {
+  SpatikaEditor,
+  useSpatikaEditor,
+  buildSpatikaExtensions,
+  EditorToolbar,
+  EditorBubbleMenu,
+  ImageBubbleMenu,
+  SlashCommandMenu,
+  MentionMenu,
+  AiOverlay,
+  ToolbarButton,
+  createSlashCommandExtension,
+  defaultSlashCommands,
+  createMentionExtension,
+  ResizableImage,
+  createAiActionExtension,
+} from "@spatika/editor";
+export type {
+  SpatikaEditorProps,
+  SpatikaEditorHandle,
+  SpatikaEditorToolbarConfig,
+  SlashCommandItem,
+  MentionContact,
+  AiActionDefinition,
+  PlaceholderConfig,
+  UseSpatikaEditorOptions,
+  SlashCommandStorage,
+  MentionStorage,
+  ImageAlign,
+} from "@spatika/editor";
 export { HeaderIconButton, type HeaderIconButtonProps } from "./composites/HeaderIconButton";
 export {
   QuickFilterRail,
@@ -500,16 +563,22 @@ export {
 } from "./composites/EventEditor";
 export {
   SchedulerToolbar,
+  SchedulerDateJump,
   SchedulerPreferencesMenu,
   CALENDAR_VIEW_LABEL,
   type SchedulerToolbarProps,
+  type SchedulerToolbarDensity,
+  type SchedulerDateJumpProps,
 } from "./composites/scheduler-ui";
 export {
   DEFAULT_SCHEDULER_PREFERENCES,
   SCHEDULER_COLOR_TONES,
+  CALENDAR_AGENDA_DAYS,
+  calendarVisibleRange,
 } from "./lib/scheduler";
 export type {
   CalendarView,
+  CalendarVisibleRange,
   NormalizedEvent,
   SchedulerColorTone,
   SchedulerEvent,
@@ -521,26 +590,25 @@ export {
   CHART_COLOR_VARS,
   chartColor,
   formatChartNumber,
+  formatAxisNumber,
+  resolveChartRadius,
+  categoryLabelGutter,
+  fitCategoryLabel,
   seriesDataFromDataset,
   axisDataFromDataset,
   clampZoom,
   DEFAULT_ZOOM,
-} from "./lib/charts";
-export type {
-  ChartAxisConfig,
-  ChartCurve,
-  ChartDataset,
-  ChartInteraction,
-  ChartMargin,
-  ChartZoom,
-  HighlightScope,
-  SankeyLink,
-  SankeyNode,
-  TreeNode,
-} from "./lib/charts";
-export { serializeChartSvg, exportChart, downloadChartSvg, downloadChartPng } from "./lib/chart-export";
-export {
+  stackSeries,
+  errorBarRange,
+  pieLabelLine,
+  seriesHasPlottableData,
+  serializeChartSvg,
+  exportChart,
+  downloadChartSvg,
+  downloadChartPng,
   ChartContainer,
+  ComposedChart,
+  ResponsiveContainer,
   ChartSurface,
   ChartsGrid,
   ChartsXAxis,
@@ -548,19 +616,16 @@ export {
   ChartsLegend,
   ChartsToolbar,
   ChartsBrush,
+  ChartsCursor,
+  ChartsReferenceLine,
+  ChartsReferenceArea,
+  ChartsReferenceDot,
+  ChartsErrorBar,
   BarPlot,
   LinePlot,
   AreaPlot,
   ScatterPlot,
   useChartContext,
-} from "./composites/chart-composition";
-export type {
-  ChartContainerProps,
-  ComposedSeries,
-  ComposedSeriesType,
-  HighlightedItem,
-} from "./composites/chart-composition";
-export {
   AreaChart,
   BarChart,
   BoxPlotChart,
@@ -573,8 +638,60 @@ export {
   ScatterChart,
   SparkLineChart,
   WaterfallChart,
-} from "./composites/cartesian-charts";
+  Gauge,
+  LinearGauge,
+  PieChart,
+  PolarLineChart,
+  RadarChart,
+  RadialBarChart,
+  RadialLineChart,
+  ChordChart,
+  FunnelChart,
+  Heatmap,
+  PyramidChart,
+  SankeyChart,
+  SunburstChart,
+  Treemap,
+  MapChart,
+  BarChart3D,
+  PieChart3D,
+  ChartDataGrid,
+  renderChartCell,
+  mercator,
+  equirectangular,
+  geoPath,
+  fitFeatures,
+  featureId,
+} from "@spatika/charts";
 export type {
+  ChartAxisConfig,
+  ChartCurve,
+  ChartDataset,
+  ChartErrorValue,
+  ChartInteraction,
+  ChartLegendPosition,
+  ChartMargin,
+  ChartRadius,
+  ChartZoom,
+  HighlightScope,
+  SankeyLink,
+  SankeyNode,
+  StackOffset,
+  TreeNode,
+  ChartContainerProps,
+  ComposedSeries,
+  ComposedSeriesType,
+  HighlightedItem,
+  ResponsiveContainerProps,
+  ChartHover,
+  ChartItemEvent,
+  ChartMarkRenderContext,
+  ChartReferenceArea,
+  ChartReferenceDot,
+  ChartReferenceLine,
+  ChartTooltipItem,
+  ChartTooltipRenderer,
+  ChartTooltipTrigger,
   BarChartProps,
   BoxPlotChartProps,
   CandleDatum,
@@ -591,17 +708,6 @@ export type {
   ScatterSeries,
   SparkLineChartProps,
   WaterfallChartProps,
-} from "./composites/cartesian-charts";
-export {
-  Gauge,
-  LinearGauge,
-  PieChart,
-  PolarLineChart,
-  RadarChart,
-  RadialBarChart,
-  RadialLineChart,
-} from "./composites/radial-charts";
-export type {
   GaugeProps,
   GaugeSection,
   LinearGaugeProps,
@@ -612,17 +718,6 @@ export type {
   RadarSeries,
   RadialBarChartProps,
   RadialLineChartProps,
-} from "./composites/radial-charts";
-export {
-  ChordChart,
-  FunnelChart,
-  Heatmap,
-  PyramidChart,
-  SankeyChart,
-  SunburstChart,
-  Treemap,
-} from "./composites/flow-charts";
-export type {
   ChordChartProps,
   FunnelChartProps,
   FunnelDatum,
@@ -633,28 +728,16 @@ export type {
   SankeyChartProps,
   SunburstChartProps,
   TreemapProps,
-} from "./composites/flow-charts";
-export { MapChart } from "./composites/MapChart";
-export type { MapChartProps, MapShapeDatum } from "./composites/MapChart";
-export { BarChart3D, PieChart3D } from "./composites/charts-3d";
-export type { BarChart3DProps, PieChart3DProps } from "./composites/charts-3d";
-export { ChartDataGrid, renderChartCell } from "./composites/ChartDataGrid";
-export type {
+  MapChartProps,
+  MapShapeDatum,
+  BarChart3DProps,
+  PieChart3DProps,
   ChartDataGridProps,
   ChartDataGridRow,
   ChartGridColumn,
   ChartGridColumnType,
-} from "./composites/ChartDataGrid";
-export {
-  mercator,
-  equirectangular,
-  geoPath,
-  fitFeatures,
-  featureId,
-} from "./lib/geo";
-export type {
   GeoJsonFeature,
   GeoJsonFeatureCollection,
   GeoJsonGeometry,
   GeoProjectionKind,
-} from "./lib/geo";
+} from "@spatika/charts";

package/src/lib/breakpoints.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import {
+  BREAKPOINTS,
+  BREAKPOINT_KEYS,
+  breakpointBetween,
+  breakpointDown,
+  breakpointUp,
+} from "./breakpoints";
+
+describe("breakpoints", () => {
+  it("matches Tailwind viewport widths", () => {
+    expect(BREAKPOINTS).toEqual({ xs: 0, sm: 640, md: 768, lg: 1024, xl: 1280 });
+    expect(BREAKPOINT_KEYS).toEqual(["xs", "sm", "md", "lg", "xl"]);
+  });
+
+  it("builds min-width and max-width queries", () => {
+    expect(breakpointUp("xs")).toBe("(min-width: 0px)");
+    expect(breakpointUp("md")).toBe("(min-width: 768px)");
+    expect(breakpointDown("md")).toBe("(max-width: 767px)");
+    expect(breakpointDown("xl")).toBe("(max-width: 1279px)");
+  });
+
+  it("builds an inclusive range", () => {
+    expect(breakpointBetween("sm", "lg")).toBe(
+      "(min-width: 640px) and (max-width: 1023px)",
+    );
+    expect(breakpointBetween("md")).toBe("(min-width: 768px)");
+  });
+});

package/src/lib/breakpoints.ts

@@ -0,0 +1,28 @@
+/** Viewport widths (px) that match Tailwind and Spatika `Grid` / `Container`. */
+export const BREAKPOINTS = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+} as const;
+
+export type Breakpoint = keyof typeof BREAKPOINTS;
+
+export const BREAKPOINT_KEYS = ["xs", "sm", "md", "lg", "xl"] as const satisfies readonly Breakpoint[];
+
+/** `(min-width: Npx)` — inclusive start of a breakpoint. `xs` is always true. */
+export function breakpointUp(key: Breakpoint): string {
+  return `(min-width: ${BREAKPOINTS[key]}px)`;
+}
+
+/** `(max-width: N-1px)` — viewports strictly below a breakpoint. */
+export function breakpointDown(key: Exclude<Breakpoint, "xs">): string {
+  return `(max-width: ${BREAKPOINTS[key] - 1}px)`;
+}
+
+/** Inclusive range between two breakpoints. `end` omitted means no upper bound. */
+export function breakpointBetween(start: Breakpoint, end?: Exclude<Breakpoint, "xs">): string {
+  if (!end) return breakpointUp(start);
+  return `${breakpointUp(start)} and ${breakpointDown(end)}`;
+}

package/src/lib/chips.ts

@@ -56,3 +56,19 @@ export const nativeSelectClass = cn(
   "focus:outline-none focus:border-primary/40 focus:ring-2 focus:ring-primary/20",
   "disabled:cursor-not-allowed disabled:opacity-50",
 );
+
+export type NativeSelectSize = "sm" | "default" | "touch";
+
+/** Size recipes for NativeSelect. `sm` is for toolbars (not full width). */
+export function nativeSelectSizeClass(size: NativeSelectSize = "default") {
+  if (size === "sm") {
+    return cn(
+      nativeSelectClass,
+      "mt-0 h-8 min-h-8 w-auto rounded-full px-2 text-[11px] font-semibold",
+    );
+  }
+  if (size === "touch") {
+    return cn(nativeSelectClass, "mt-0 min-h-11");
+  }
+  return cn(nativeSelectClass, "mt-0");
+}