@spatika/react 1.1.0 → 1.3.0

package/AGENTS.md

@@ -0,0 +1,71 @@
+# Spatika UI — agent guide
+
+Glass React design system. Packages: `@spatika/tokens`, `@spatika/react`.
+Human docs: https://spatika.sweyam.com · Machine index: https://spatika.sweyam.com/llms.txt
+
+## Use this library
+
+```bash
+npm install @spatika/tokens @spatika/react
+```
+
+```tsx
+import "@spatika/tokens/styles.css";
+import { SpatikaThemeProvider, Button } from "@spatika/react";
+
+export function App() {
+  return (
+    <SpatikaThemeProvider defaultTheme="neelam">
+      <Button>Hello Spatika</Button>
+    </SpatikaThemeProvider>
+  );
+}
+```
+
+### Must do
+- Import `@spatika/tokens/styles.css` before any component
+- Wrap the app in `<SpatikaThemeProvider>`
+- Import from `@spatika/react` — never invent Spatika components
+- Prefer composites (`PageShell`, `FloatingPageChromeBar`, `GlassCard`) over restyling primitives
+- Use token CSS variables, never hardcoded hex
+- Use `size="touch"` for mobile primary actions
+- Animate transform / shadow / color only — never `transition-all` on glass
+
+### Themes
+`mukta` (pearl light) · `neelam` (sapphire dark) · `usha` (dawn) · `sandhya` (dusk, no blur)
+
+### When to use
+
+| Need | Component |
+|---|---|
+| App page frame | `PageShell` |
+| List / directory chrome | `FloatingPageChromeBar` |
+| Fixed safe-area bar | `AppHeader variant="chrome"` |
+| Mobile tabs | `MobileTabBar` |
+| Profile / story header | `CoverHero` / `ProfileHero` + `useCoverChromeBleed` |
+| Glass surface | `GlassCard` |
+| Labeled field | `TextField` |
+| Filters | `FilterSheet` + `ChipGroup` |
+| Empty list | `EmptyState` |
+| Titled modal | `Dialog` (not `Modal`) |
+| Toast stack | `Toaster` + `useToast` |
+| Charts | `BarChart`, `LineChart`, or `ChartContainer` |
+| Calendar | `EventCalendar` |
+
+Canonical snippets: https://spatika.sweyam.com/docs/components.md
+Prop types: `node_modules/@spatika/react/dist/index.d.ts`
+
+Cursor skill (copy into the consumer repo):
+`node_modules/@spatika/react/skills/spatika-ui/` → `.cursor/skills/spatika-ui/`
+
+## Change this library
+
+Monorepo: `packages/tokens` (CSS) → `packages/react` (components) → `apps/website` (docs).
+
+When adding a component:
+1. Export it from `packages/react/src/index.ts`
+2. Add a catalog row in `apps/website/src/data/navigation.ts`
+3. Add a live demo in `apps/website/src/demos/`
+4. Add a canonical snippet in `apps/website/src/data/agent-snippets.ts`
+
+Run `npm test` and `npm run typecheck` before opening a PR.

package/README.md

@@ -1,6 +1,6 @@
 # @spatika/react
 
-React primitives and composites for Spatika — glass surfaces, four themes, and shared tokens.
+React primitives and composites for **Spatika UI** — a glass React design system with four themes and shared tokens.
 
 ## Install
 
@@ -45,8 +45,9 @@ Button sizes include `touch` / `icon-touch` (≥44px) for mobile-first chrome.
 
 ## What's included
 
-- **Primitives** — Button, Input, Select, Tabs, Table, Dialog, AlertDialog, Sheet, Popover, DropdownMenu, Command, Tooltip, and more
-- **Composites** — AppHeader, AppSidebar, Card, EntityCard, FloatingPageChrome, CoverHero, FilterSheet, MobileTabBar, CommandSearchField, NotificationBell, Timeline, AmountInput, SegmentedControl, Toaster, media cards, PIN/lock chrome, SiteNav, SiteFooter, SectionHeading, Tag
+- **Primitives** — Button, ButtonGroup, Accordion, Autocomplete, Grid, Menu, Dialog, Stepper, List, Fab, and more
+- **Composites** — AppHeader, AppSidebar, Card, EntityCard, FloatingPageChrome, CoverHero, FilterSheet, MobileTabBar, CommandSearchField, NotificationBell, Timeline, EventCalendar, EventTimeline, AmountInput, SegmentedControl, Toaster, media cards, PIN/lock chrome, SiteNav, SiteFooter, SectionHeading, Tag
+- **Charts** — SVG charts covering the MUI X catalog, plus `ChartContainer` composition (mixed plots, zoom/pan, brush, dual axes, toolbar export)
 
 ## Tailwind tip
 

package/dist/composites/Card.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 export type CardProps = {
     children: ReactNode;
     className?: string;
@@ -24,6 +24,12 @@ export declare function CardContent({ className, children, }: {
     className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;
+export declare function CardActionArea({ className, children, ...props }: ComponentPropsWithoutRef<"button">): import("react").JSX.Element;
+export declare function CardMedia({ className, component, image, src, alt, height, ...props }: ComponentPropsWithoutRef<"img"> & {
+    component?: "img" | "div";
+    image?: string;
+    height?: number;
+}): import("react").JSX.Element;
 export declare function CardFooter({ className, children, }: {
     className?: string;
     children: ReactNode;

package/dist/composites/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/composites/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC,CAAC;AAgBF,mFAAmF;AACnF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAiB,EACjB,OAAc,GACf,EAAE,SAAS,+BAcX;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BASA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/composites/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjE,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC,CAAC;AAgBF,mFAAmF;AACnF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,OAAiB,EACjB,OAAc,GACf,EAAE,SAAS,+BAcX;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAMA;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,QAAQ,CAAC,+BAepC;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,SAAiB,EACjB,KAAK,EACL,GAAG,EACH,GAAG,EACH,MAAY,EACZ,GAAG,KAAK,EACT,EAAE,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACnC,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,+BAeA;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BASA"}

package/dist/composites/Card.js

@@ -28,6 +28,16 @@ export function CardDescription({ className, children, }) {
 export function CardContent({ className, children, }) {
     return (_jsx("div", { "data-slot": "card-content", className: cn(className), children: children }));
 }
+export function CardActionArea({ className, children, ...props }) {
+    return (_jsx("button", { type: "button", "data-slot": "card-action-area", className: cn("block w-full text-left outline-none transition-[transform,box-shadow] duration-150", "hover:-translate-y-0.5 focus-visible:ring-ring/50 focus-visible:ring-[3px]", className), ...props, children: children }));
+}
+export function CardMedia({ className, component = "img", image, src, alt, height = 160, ...props }) {
+    const Comp = component;
+    return (_jsx(Comp, { "data-slot": "card-media", src: component === "img" ? (src ?? image) : undefined, alt: alt, className: cn("w-full object-cover", component === "div" && "bg-muted", className), style: {
+            height,
+            ...(component === "div" && image ? { backgroundImage: `url(${image})`, backgroundSize: "cover" } : undefined),
+        }, ...props }));
+}
 export function CardFooter({ className, children, }) {
     return (_jsx("div", { "data-slot": "card-footer", className: cn("mt-4 flex flex-wrap items-center justify-end gap-2 border-t border-border/40 pt-3", className), children: children }));
 }

package/dist/composites/ChartDataGrid.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+export type ChartGridColumnType = "text" | "number" | "sparkline" | "bar";
+export type ChartGridColumn = {
+    field: string;
+    headerName: string;
+    type?: ChartGridColumnType;
+    width?: number;
+};
+export type ChartDataGridRow = {
+    id: string;
+} & Record<string, unknown>;
+export type ChartDataGridProps = {
+    rows: ChartDataGridRow[];
+    columns: ChartGridColumn[];
+    chartType?: "bar" | "line" | "pie";
+    categoryField: string;
+    valueField: string;
+    height?: number;
+    className?: string;
+    selectedIds?: string[];
+    defaultSelectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    hideChart?: boolean;
+    hideLegend?: boolean;
+};
+export declare function renderChartCell(value: unknown, options?: {
+    variant?: "sparkline" | "bar";
+    color?: string;
+    height?: number;
+    max?: number;
+}): ReactNode;
+export declare function ChartDataGrid({ rows, columns, chartType, categoryField, valueField, height, className, selectedIds, defaultSelectedIds, onSelectionChange, hideChart, hideLegend, }: ChartDataGridProps): import("react").JSX.Element;
+//# sourceMappingURL=ChartDataGrid.d.ts.map

package/dist/composites/ChartDataGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDataGrid.d.ts","sourceRoot":"","sources":["../../src/composites/ChartDataGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAejD,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;AAE1E,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAExE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,eAAe,CAC7B,KAAK,EAAE,OAAO,EACd,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GACA,SAAS,CAuBX;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,SAAiB,EACjB,aAAa,EACb,UAAU,EACV,MAAY,EACZ,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,SAAS,EACT,UAAiB,GAClB,EAAE,kBAAkB,+BA4GpB"}

package/dist/composites/ChartDataGrid.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { chartColor, formatChartNumber } from "../lib/charts";
+import { cn } from "../lib/cn";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../primitives/Table";
+import { ChartContainer } from "./chart-composition";
+import { SparkLineChart } from "./cartesian-charts";
+import { PieChart } from "./radial-charts";
+export function renderChartCell(value, options) {
+    const color = options?.color ?? "var(--chart-1)";
+    if (Array.isArray(value) && value.every((item) => typeof item === "number")) {
+        return (_jsx(SparkLineChart, { data: value, plotType: options?.variant === "bar" ? "bar" : "line", color: color, height: options?.height ?? 32, showHighlight: false, area: options?.variant !== "bar" }));
+    }
+    const n = typeof value === "number" ? value : Number(value);
+    if (!Number.isFinite(n))
+        return "—";
+    const max = options?.max && options.max > 0 ? options.max : Math.max(n, 1);
+    const pct = Math.max(0, Math.min(100, (n / max) * 100));
+    return (_jsx("div", { className: "spk-chart-cell-bar", title: formatChartNumber(n), children: _jsx("span", { style: { width: `${pct}%`, background: color } }) }));
+}
+export function ChartDataGrid({ rows, columns, chartType = "bar", categoryField, valueField, height = 200, className, selectedIds, defaultSelectedIds, onSelectionChange, hideChart, hideLegend = true, }) {
+    const [internal, setInternal] = useState(defaultSelectedIds ?? []);
+    const selected = selectedIds ?? internal;
+    const setSelected = (ids) => {
+        if (selectedIds == null)
+            setInternal(ids);
+        onSelectionChange?.(ids);
+    };
+    const selectedIndex = selected.length ? rows.findIndex((row) => row.id === selected[0]) : -1;
+    const categories = rows.map((row) => String(row[categoryField] ?? row.id));
+    const values = rows.map((row) => Number(row[valueField] ?? 0));
+    const maxByField = new Map();
+    for (const col of columns) {
+        if (col.type === "bar" || col.type === "number") {
+            const nums = rows.map((row) => Number(row[col.field] ?? 0)).filter((n) => Number.isFinite(n));
+            maxByField.set(col.field, nums.length ? Math.max(...nums) : 1);
+        }
+    }
+    const toggleRow = (id) => {
+        setSelected(selected[0] === id ? [] : [id]);
+    };
+    return (_jsxs("div", { "data-slot": "chart-data-grid", className: cn("spk-chart-data-grid", className), children: [hideChart ? null : chartType === "pie" ? (_jsx(PieChart, { height: height, hideLegend: hideLegend, series: [
+                    {
+                        innerRadius: 36,
+                        paddingAngle: 2,
+                        data: rows.map((row, i) => ({
+                            id: row.id,
+                            value: values[i] ?? 0,
+                            label: categories[i],
+                            color: selected.length && !selected.includes(row.id)
+                                ? `color-mix(in srgb, ${chartColor(i)} 28%, transparent)`
+                                : undefined,
+                        })),
+                    },
+                ] })) : (_jsx(ChartContainer, { height: height, hideLegend: hideLegend, highlightScope: "item", selected: selectedIndex >= 0 ? { seriesId: "value", dataIndex: selectedIndex } : null, xAxis: [{ data: categories }], series: [{ type: chartType, id: "value", label: valueField, data: values }], "aria-label": "Linked chart" })), _jsxs(Table, { containerClassName: "spk-chart-grid-table", children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((col) => (_jsx(TableHead, { style: col.width ? { width: col.width } : undefined, children: col.headerName }, col.field))) }) }), _jsx(TableBody, { children: rows.map((row, rowIndex) => (_jsx(TableRow, { "data-state": selected.includes(row.id) ? "selected" : undefined, onClick: () => toggleRow(row.id), style: { cursor: "pointer" }, children: columns.map((col, colIndex) => {
+                                const value = row[col.field];
+                                const color = chartColor(rowIndex);
+                                let content;
+                                if (col.type === "sparkline") {
+                                    content = renderChartCell(value, { variant: "sparkline", color, height: 32 });
+                                }
+                                else if (col.type === "bar") {
+                                    content = renderChartCell(value, {
+                                        variant: "bar",
+                                        color,
+                                        max: maxByField.get(col.field),
+                                    });
+                                }
+                                else if (col.type === "number" && typeof value === "number") {
+                                    content = formatChartNumber(value);
+                                }
+                                else {
+                                    content = value == null ? "—" : String(value);
+                                }
+                                return (_jsx(TableCell, { "data-field": col.field, children: colIndex === 0 ? (_jsx("span", { className: "spk-chart-grid-name", children: content })) : (content) }, col.field));
+                            }) }, row.id))) })] })] }));
+}

package/dist/composites/CoverHero.d.ts

@@ -38,7 +38,7 @@ export type CoverHeroProps = {
     className?: string;
     /** Offset used when the compact bar pins under app chrome. */
     compactOffsetClassName?: string;
-    /** When false, skip writing cover-bleed attributes on `<html>` (catalog previews). */
+    /** When false, keep the cover inside this frame (docs / device previews). */
     bleed?: boolean;
 };
 /**

package/dist/composites/CoverHero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoverHero.d.ts","sourceRoot":"","sources":["../../src/composites/CoverHero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,sBAAsB,EAIvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sFAAsF;IACtF,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,KAAK,EACL,OAAY,EACZ,iBAAqB,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAc,EACd,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,OAAiB,EACjB,MAAM,EACN,SAAqB,EACrB,eAAe,EACf,cAAc,EACd,QAAQ,EACR,SAAS,EACT,sBAAiC,EACjC,KAAY,GACb,EAAE,cAAc,+BAuQhB;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"CoverHero.d.ts","sourceRoot":"","sources":["../../src/composites/CoverHero.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,sBAAsB,EAIvB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAK9B,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,KAAK,EACL,OAAY,EACZ,iBAAqB,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAc,EACd,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,OAAiB,EACjB,MAAM,EACN,SAAqB,EACrB,eAAe,EACf,cAAc,EACd,QAAQ,EACR,SAAS,EACT,sBAAiC,EACjC,KAAY,GACb,EAAE,cAAc,+BA8QhB;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/composites/CoverHero.js

@@ -55,7 +55,7 @@ export function CoverHero({ title, kicker, facts, avatars = [], hiddenAvatarCoun
         };
     }, []);
     useCoverChromeBleed(bleed && coverUnderChrome, scene.chromeInk);
-    return (_jsxs(_Fragment, { children: [_jsxs("header", { ref: heroRef, "data-slot": "cover-hero", className: cn("relative z-10 w-full overflow-visible", className), children: [_jsxs("div", { className: cn(mediaClass, "sm:rounded-b-[1.75rem]"), "aria-hidden": true, children: [!hideImages && coverUrl ? (_jsx("img", { src: coverUrl, alt: "", className: "absolute inset-0 size-full object-cover" })) : (_jsx(CoverPattern, { seed: seed, hue: coverHue, dark: dark, warm: warm, kind: coverKind })), _jsx("div", { className: "absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-black/[0.04] to-transparent dark:from-black/12" }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-[22%] bg-gradient-to-t from-black/[0.03] via-transparent to-transparent dark:from-black/10" })] }), _jsxs("div", { className: "relative z-10 flex flex-col", children: [_jsx("div", { className: "relative min-h-[8.5rem] sm:min-h-[10.5rem] lg:min-h-[12rem]", children: _jsxs("div", { className: "absolute inset-x-0 top-0 z-30 flex items-start justify-between gap-2 px-3 pt-3 sm:px-5 sm:pt-4", children: [onBack ? (_jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel, "data-cover-ink": scene.headerInk, className: cn("cover-floating-shell flex items-center gap-1 px-3 py-1.5 text-xs font-semibold transition-colors active:scale-[0.96]", onDarkCover ? "text-white hover:bg-black/60" : "text-zinc-900 hover:bg-white/90"), children: [_jsx(ChevronLeft, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }), _jsx("span", { className: "hidden sm:inline", children: "Back" })] })) : (_jsx("span", {})), floatingActions ? (_jsx("div", { "data-cover-ink": scene.headerInk, className: "cover-floating-shell flex items-center gap-1 p-1", children: floatingActions })) : null] }) }), _jsx("div", { ref: plateRef, className: "relative z-20 px-3.5 pb-4 sm:px-5 sm:pb-5 lg:px-8 lg:pb-6", children: _jsxs("div", { className: "cover-identity story-identity", style: { "--story-avatar-count": avatarCount }, children: [_jsx("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 rounded-[1.35rem]", hasAvatars && "cover-identity__plate story-identity__plate", coverPlateClass(scene.headerInk)) }), _jsxs("div", { className: cn("relative z-10 flex flex-col items-center px-3 pb-3 text-center sm:px-6 sm:pb-4", hasAvatars ? "pt-0" : "pt-3 sm:pt-4"), children: [hasAvatars ? (_jsx("div", { className: "cover-identity__avatars story-identity__avatars", children: _jsxs("div", { className: "flex -space-x-5 sm:-space-x-6", children: [visibleAvatars.map((avatar, index) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { ref: heroRef, "data-slot": "cover-hero", "data-cover-bleed": bleed ? "true" : undefined, className: cn("relative z-10 w-full", bleed ? "overflow-visible" : "overflow-hidden rounded-[1.35rem] sm:rounded-[1.75rem]", className), children: [_jsxs("div", { className: cn(mediaClass, bleed && "sm:rounded-b-[1.75rem]"), "aria-hidden": true, children: [!hideImages && coverUrl ? (_jsx("img", { src: coverUrl, alt: "", className: "absolute inset-0 size-full object-cover" })) : (_jsx(CoverPattern, { seed: seed, hue: coverHue, dark: dark, warm: warm, kind: coverKind })), _jsx("div", { className: "absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-black/[0.04] to-transparent dark:from-black/12" }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-[22%] bg-gradient-to-t from-black/[0.03] via-transparent to-transparent dark:from-black/10" })] }), _jsxs("div", { className: "relative z-10 flex flex-col", children: [_jsx("div", { className: "relative min-h-[8.5rem] sm:min-h-[10.5rem] lg:min-h-[12rem]", children: _jsxs("div", { className: "absolute inset-x-0 top-0 z-30 flex items-start justify-between gap-2 px-3 pt-3 sm:px-5 sm:pt-4", children: [onBack ? (_jsxs("button", { type: "button", onClick: onBack, "aria-label": backLabel, "data-cover-ink": scene.headerInk, className: cn("cover-floating-shell flex items-center gap-1 px-3 py-1.5 text-xs font-semibold transition-colors active:scale-[0.96]", onDarkCover ? "text-white hover:bg-black/60" : "text-zinc-900 hover:bg-white/90"), children: [_jsx(ChevronLeft, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }), _jsx("span", { className: "hidden sm:inline", children: "Back" })] })) : (_jsx("span", {})), floatingActions ? (_jsx("div", { "data-cover-ink": scene.headerInk, className: "cover-floating-shell flex items-center gap-1 p-1", children: floatingActions })) : null] }) }), _jsx("div", { ref: plateRef, className: "relative z-20 px-3.5 pb-4 sm:px-5 sm:pb-5 lg:px-8 lg:pb-6", children: _jsxs("div", { className: "cover-identity story-identity", style: { "--story-avatar-count": avatarCount }, children: [_jsx("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 rounded-[1.35rem]", hasAvatars && "cover-identity__plate story-identity__plate", coverPlateClass(scene.headerInk)) }), _jsxs("div", { className: cn("relative z-10 flex flex-col items-center px-3 pb-3 text-center sm:px-6 sm:pb-4", hasAvatars ? "pt-0" : "pt-3 sm:pt-4"), children: [hasAvatars ? (_jsx("div", { className: "cover-identity__avatars story-identity__avatars", children: _jsxs("div", { className: "flex -space-x-5 sm:-space-x-6", children: [visibleAvatars.map((avatar, index) => {
                                                                 const body = (_jsx("span", { style: {
                                                                         width: "var(--story-avatar-size)",
                                                                         height: "var(--story-avatar-size)",
@@ -66,6 +66,6 @@ export function CoverHero({ title, kicker, facts, avatars = [], hiddenAvatarCoun
                                                                     height: "var(--story-avatar-size)",
                                                                 }, className: "relative z-0 flex items-center justify-center rounded-full border-[3px] border-white bg-zinc-900/80 text-base font-black text-white dark:border-white/30", children: ["+", extra] })) : null] }) })) : null, _jsxs("div", { className: cn("w-full min-w-0", hasAvatars && "mt-2 sm:mt-2.5"), children: [kicker ? (_jsx("div", { className: "flex flex-wrap items-center justify-center gap-1.5", children: kicker })) : null, _jsx("h1", { className: cn("mt-2 text-balance text-[1.15rem] font-black leading-tight tracking-tight sm:text-[1.35rem] lg:text-[1.65rem]", coverTitleClass(scene.headerInk)), children: title }), facts && facts.length > 0 ? (_jsx("dl", { className: "mt-3 grid grid-cols-2 gap-x-4 gap-y-2 sm:flex sm:flex-wrap sm:justify-center sm:gap-x-6", children: facts.map((fact) => (_jsxs("div", { className: cn("flex min-w-0 items-center justify-center gap-2", fact.wide && "col-span-2 sm:col-span-1"), children: [fact.icon ? (_jsx("span", { className: cn("hidden h-7 w-7 shrink-0 items-center justify-center rounded-lg border backdrop-blur-md sm:flex", onDarkCover
                                                                             ? "border-white/20 bg-white/15 text-white/90"
-                                                                            : "border-zinc-950/10 bg-zinc-950/[0.06] text-zinc-700"), children: fact.icon })) : null, _jsxs("div", { className: "min-w-0 text-center sm:text-left", children: [_jsx("dt", { className: cn("text-[9px] font-black uppercase tracking-[0.18em]", coverMutedClass(scene.headerInk)), children: fact.label }), _jsx("dd", { className: cn("truncate text-[11px] font-bold sm:text-xs", coverTitleClass(scene.headerInk), fact.muted && "opacity-60"), children: fact.value })] })] }, fact.key))) })) : null, children] })] })] }) })] })] }), _jsx("div", { className: cn("sticky z-[60] h-0", compactOffsetClassName), children: !heroInView ? (_jsx("div", { className: "glass-header cover-chrome-bar absolute inset-x-0 top-0 border-b border-border/50 bg-background/85 backdrop-blur-md dark:bg-background/94", children: _jsxs("div", { className: "app-frame-pad flex items-center gap-2 py-1.5 sm:py-2", children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, "aria-label": backLabel, className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-foreground transition-colors hover:bg-muted", children: _jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }) })) : null, _jsx("h2", { className: "page-header-title min-w-0 flex-1 truncate", children: title }), compactActions] }) })) : null })] }));
+                                                                            : "border-zinc-950/10 bg-zinc-950/[0.06] text-zinc-700"), children: fact.icon })) : null, _jsxs("div", { className: "min-w-0 text-center sm:text-left", children: [_jsx("dt", { className: cn("text-[9px] font-black uppercase tracking-[0.18em]", coverMutedClass(scene.headerInk)), children: fact.label }), _jsx("dd", { className: cn("truncate text-[11px] font-bold sm:text-xs", coverTitleClass(scene.headerInk), fact.muted && "opacity-60"), children: fact.value })] })] }, fact.key))) })) : null, children] })] })] }) })] })] }), bleed ? (_jsx("div", { className: cn("sticky z-[60] h-0", compactOffsetClassName), children: !heroInView ? (_jsx("div", { className: "glass-header cover-chrome-bar absolute inset-x-0 top-0 border-b border-border/50 bg-background/85 backdrop-blur-md dark:bg-background/94", children: _jsxs("div", { className: "app-frame-pad flex items-center gap-2 py-1.5 sm:py-2", children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, "aria-label": backLabel, className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-foreground transition-colors hover:bg-muted", children: _jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }) })) : null, _jsx("h2", { className: "page-header-title min-w-0 flex-1 truncate", children: title }), compactActions] }) })) : null })) : null] }));
 }
 export { coverFloatingIconClass };

package/dist/composites/EntityMediaCard.d.ts

@@ -19,7 +19,7 @@ export type EntityMediaCardProps = {
     imageClassName?: string;
 };
 /**
- * Entity card with photo (or initials fallback) — contact / directory style.
+ * Entity card with photo (or generated cover + initials) — contact / album tile.
  */
 export declare function EntityMediaCard({ title, subtitle, statusLine, imageUrl, hideImage, fallbackLabel, tags, overlays, menu, meta, href, onClick, size, orientation, className, imageClassName, }: EntityMediaCardProps): import("react").JSX.Element;
 //# sourceMappingURL=EntityMediaCard.d.ts.map

package/dist/composites/EntityMediaCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntityMediaCard.d.ts","sourceRoot":"","sources":["../../src/composites/EntityMediaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAc,EACd,WAAqB,EACrB,SAAS,EACT,cAAc,GACf,EAAE,oBAAoB,+BA0EtB"}
+{"version":3,"file":"EntityMediaCard.d.ts","sourceRoot":"","sources":["../../src/composites/EntityMediaCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,IAAc,EACd,WAAqB,EACrB,SAAS,EACT,cAAc,GACf,EAAE,oBAAoB,+BAyFtB"}

package/dist/composites/EntityMediaCard.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn";
+import { coverTitleClass } from "../lib/cover-chrome";
+import { getCoverPattern } from "../lib/cover-pattern";
+import { CoverPattern } from "./CoverPattern";
 /**
- * Entity card with photo (or initials fallback) — contact / directory style.
+ * Entity card with photo (or generated cover + initials) — contact / album tile.
  */
 export function EntityMediaCard({ title, subtitle, statusLine, imageUrl, hideImage, fallbackLabel, tags, overlays, menu, meta, href, onClick, size = "large", orientation = "stack", className, imageClassName, }) {
     const Comp = href ? "a" : onClick ? "button" : "div";
@@ -12,6 +15,11 @@ export function EntityMediaCard({ title, subtitle, statusLine, imageUrl, hideIma
             .map((w) => w[0]?.toUpperCase() ?? "")
             .join("") ||
         "?";
-    const photoAspect = size === "compact" ? "aspect-square" : size === "small" ? "aspect-[4/3]" : "aspect-square";
-    return (_jsxs(Comp, { href: href, type: onClick && !href ? "button" : undefined, onClick: onClick, "data-slot": "entity-media-card", className: cn("group flex overflow-hidden rounded-2xl border border-white/45 bg-card text-left shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-[transform,border-color] duration-200 dark:border-white/12", "hover:-translate-y-0.5 hover:border-primary/15", orientation === "row" ? "flex-row" : "flex-col", className), children: [_jsxs("div", { className: cn("relative shrink-0 overflow-hidden bg-muted", orientation === "row" ? "w-[42%] min-w-[7rem]" : "w-full", orientation === "stack" && photoAspect, imageClassName), children: [!hideImage && imageUrl ? (_jsx("img", { src: imageUrl, alt: "", className: "size-full object-cover transition-transform duration-700 group-hover:scale-110" })) : (_jsx("div", { className: "flex size-full items-center justify-center bg-gradient-to-br from-primary/20 via-muted to-accent-highlight/20 text-2xl font-black text-primary", children: initials })), overlays ? _jsx("div", { className: "absolute inset-0 p-2", children: overlays }) : null] }), _jsxs("div", { className: cn("relative flex min-w-0 flex-1 flex-col bg-white dark:bg-card", size === "compact" ? "gap-1 p-2.5" : "gap-1.5 p-3 sm:p-4"), children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "truncate font-bold tracking-tight group-hover:text-primary", children: title }), subtitle ? (_jsx("p", { className: "truncate text-xs font-medium text-muted-foreground", children: subtitle })) : null, statusLine ? (_jsx("p", { className: "mt-0.5 text-[9px] font-bold uppercase tracking-widest text-muted-foreground/80", children: statusLine })) : null] }), menu] }), meta, tags ? _jsx("div", { className: "mt-auto flex flex-wrap gap-1 pt-1", children: tags }) : null] })] }));
+    const scene = getCoverPattern({ seed: title, hue: 210 });
+    const photoAspect = orientation === "row"
+        ? "h-full min-h-[6.5rem]"
+        : size === "compact"
+            ? "aspect-square"
+            : "aspect-[4/3]";
+    return (_jsxs(Comp, { href: href, type: onClick && !href ? "button" : undefined, onClick: onClick, "data-slot": "entity-media-card", "data-size": size, "data-orientation": orientation, className: cn("group flex h-full min-w-0 overflow-hidden rounded-2xl border border-border/60 bg-card text-left shadow-[0_8px_30px_color-mix(in_srgb,var(--foreground)_6%,transparent)] transition-[transform,border-color] duration-200", "hover:-translate-y-0.5 hover:border-primary/25", orientation === "row" ? "flex-row items-stretch" : "flex-col", className), children: [_jsxs("div", { className: cn("relative shrink-0 overflow-hidden bg-muted", orientation === "row" ? "w-[38%] min-w-[6.5rem] max-w-[9.5rem]" : "w-full", photoAspect, imageClassName), children: [!hideImage && imageUrl ? (_jsx("img", { src: imageUrl, alt: "", className: "absolute inset-0 size-full object-cover transition-transform duration-700 group-hover:scale-110" })) : (_jsxs(_Fragment, { children: [_jsx(CoverPattern, { seed: title, hue: 210 }), _jsx("div", { className: cn("absolute inset-0 flex items-center justify-center text-2xl font-black", coverTitleClass(scene.headerInk)), children: initials })] })), overlays ? _jsx("div", { className: "absolute inset-0 p-2", children: overlays }) : null] }), _jsxs("div", { className: cn("relative flex min-w-0 flex-1 flex-col justify-center bg-card", size === "compact" ? "gap-1 p-2.5" : "gap-1 p-3 sm:p-3.5"), children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h3", { className: "truncate font-bold tracking-tight group-hover:text-primary", children: title }), subtitle ? (_jsx("p", { className: "truncate text-xs font-medium text-muted-foreground", children: subtitle })) : null, statusLine ? (_jsx("p", { className: "mt-0.5 text-[9px] font-bold uppercase tracking-widest text-muted-foreground/80", children: statusLine })) : null] }), menu] }), meta, tags ? _jsx("div", { className: "mt-auto flex flex-wrap gap-1 pt-1", children: tags }) : null] })] }));
 }

package/dist/composites/EventCalendar.d.ts

@@ -0,0 +1,72 @@
+import { type ReactNode } from "react";
+import { type CalendarView, type NormalizedEvent, type SchedulerEvent, type SchedulerPreferences, type SchedulerResource } from "../lib/scheduler";
+export type EventCalendarEventVariant = "month-bar" | "month-timed" | "all-day" | "time-grid" | "agenda";
+export type EventCalendarEventRenderContext = {
+    view: CalendarView;
+    variant: EventCalendarEventVariant;
+    locale?: string;
+    hour12: boolean;
+    source?: SchedulerEvent;
+    defaultChildren: ReactNode;
+};
+export type EventCalendarToolbarContext = {
+    view: CalendarView;
+    date: Date;
+    title: string;
+    views: CalendarView[];
+    locale?: string;
+    preferences: Required<SchedulerPreferences>;
+    onViewChange: (view: CalendarView) => void;
+    onPrev: () => void;
+    onNext: () => void;
+    onToday: () => void;
+    onDateChange: (date: Date) => void;
+    onPreferencesChange: (next: Required<SchedulerPreferences>) => void;
+};
+export type EventCalendarProps = {
+    events?: SchedulerEvent[];
+    resources?: SchedulerResource[];
+    view?: CalendarView;
+    defaultView?: CalendarView;
+    onViewChange?: (view: CalendarView) => void;
+    date?: Date;
+    defaultDate?: Date;
+    onDateChange?: (date: Date) => void;
+    views?: CalendarView[];
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    hourStart?: number;
+    hourEnd?: number;
+    locale?: string;
+    readOnly?: boolean;
+    areEventsDraggable?: boolean;
+    areEventsResizable?: boolean;
+    preferences?: SchedulerPreferences;
+    defaultPreferences?: SchedulerPreferences;
+    onPreferencesChange?: (preferences: Required<SchedulerPreferences>) => void;
+    onEventClick?: (event: SchedulerEvent) => void;
+    onEventChange?: (event: SchedulerEvent, next: Partial<SchedulerEvent>) => void;
+    onEventCreate?: (event: SchedulerEvent) => void;
+    onEventDelete?: (event: SchedulerEvent) => void;
+    onSlotClick?: (slot: {
+        start: Date;
+        end: Date;
+        allDay: boolean;
+    }) => void;
+    /**
+     * Built-in create/edit dialog. Defaults to true.
+     * Set false when the host owns create/edit (custom schedule modal, etc.).
+     */
+    showEventEditor?: boolean;
+    /** Preferences gear in the default toolbar. Ignored when `renderToolbar` is set. */
+    showPreferences?: boolean;
+    /** Extra controls after the view menu. Ignored when `renderToolbar` is set. */
+    toolbarTrailing?: ReactNode;
+    /** Replace event chip contents. The kit still wraps with the click/drag trigger. */
+    renderEvent?: (event: NormalizedEvent, context: EventCalendarEventRenderContext) => ReactNode;
+    /** Replace the toolbar. The default kit toolbar is used when omitted. */
+    renderToolbar?: (context: EventCalendarToolbarContext) => ReactNode;
+    className?: string;
+};
+/** Month / week / day / agenda calendar with editor, resize, recurrence, and preferences. */
+export declare function EventCalendar({ events, resources, view: viewProp, defaultView, onViewChange, date: dateProp, defaultDate, onDateChange, views, weekStartsOn, hourStart, hourEnd, locale, readOnly, areEventsDraggable, areEventsResizable, preferences, defaultPreferences, onPreferencesChange, onEventClick, onEventChange, onEventCreate, onEventDelete, onSlotClick, showEventEditor, showPreferences, toolbarTrailing, renderEvent, renderToolbar, className, }: EventCalendarProps): import("react").JSX.Element;
+//# sourceMappingURL=EventCalendar.d.ts.map

package/dist/composites/EventCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventCalendar.d.ts","sourceRoot":"","sources":["../../src/composites/EventCalendar.tsx"],"names":[],"mappings":"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"}