@pattern-stack/frontend-patterns 0.2.0-alpha.15 → 0.2.0-alpha.18

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0-alpha.17]
+
+### Fixed
+- **`SidebarButton` label no longer wraps mid-animation**: added `whitespace-nowrap` to the label `<span>` so the text stays on one line during the Sidebar's `w-16 ↔ w-64` expand/collapse width transition, instead of briefly wrapping onto two lines.
+
+## [0.2.0-alpha.16]
+
+### Added
+- **`Sidebar` renders `navigation.logo`**: the previously unused `NavigationConfig.logo` field now appears at the top of the sidebar when expanded. Strings render in a small semibold label (`text-sm font-semibold text-foreground truncate`); `ReactNode` values render as-is so consumers can pass an `<img>`, SVG, or composed branding element. The collapse toggle moves to the right of the logo when expanded; when collapsed, the toggle remains centered alone (unchanged behavior).
+
+### Changed
+- **`NavigationConfig.logo` widened to `string | ReactNode | undefined`** so consumers can pass arbitrary branding nodes, not just strings.
+
 ## [0.2.0-alpha.15]
 
 ### Fixed

package/dist/atoms/components/data/Duration/Duration.d.ts

@@ -0,0 +1,11 @@
+export interface DurationProps {
+    ms: number;
+    precision?: "auto" | "s" | "ms";
+    className?: string;
+}
+/**
+ * Duration — renders a millisecond value as a compact, human-readable span
+ * with an accessible spoken label (e.g. 1500 → "1.5s", aria-label "1.5 seconds").
+ */
+export declare function Duration({ ms, precision, className }: DurationProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Duration.d.ts.map

package/dist/atoms/components/data/Duration/Duration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Duration.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/Duration/Duration.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,EAAE,SAAkB,EAAE,SAAS,EAAE,EAAE,aAAa,2CAgB5E"}

package/dist/atoms/components/data/Duration/index.d.ts

@@ -0,0 +1,2 @@
+export { Duration, type DurationProps } from "./Duration";
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/components/data/Duration/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/Duration/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/atoms/components/data/LiveIndicator/LiveIndicator.d.ts

@@ -0,0 +1,12 @@
+export interface LiveIndicatorProps {
+    active: boolean;
+    label?: string;
+    className?: string;
+}
+/**
+ * LiveIndicator — a small status pill with a pulsing dot signalling a live /
+ * connected state (e.g. real-time sync, streaming). Announces its state via
+ * role="status" + aria-live for assistive tech.
+ */
+export declare function LiveIndicator({ active, label, className, }: LiveIndicatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LiveIndicator.d.ts.map

package/dist/atoms/components/data/LiveIndicator/LiveIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/LiveIndicator/LiveIndicator.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAc,EACd,SAAS,GACV,EAAE,kBAAkB,2CAuBpB"}

package/dist/atoms/components/data/LiveIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { LiveIndicator, type LiveIndicatorProps } from "./LiveIndicator";
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/components/data/LiveIndicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/LiveIndicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/atoms/components/data/Sparkline/Sparkline.d.ts

@@ -0,0 +1,16 @@
+export interface SparklineProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    fill?: string;
+    strokeWidth?: number;
+    markLast?: boolean;
+}
+/**
+ * Sparkline — a tiny inline trend chart drawn as a single SVG polyline.
+ * Lightweight alternative to <Chart> for in-cell / in-row sparklines.
+ * Renders an empty (aria-hidden) svg when given fewer than 2 points.
+ */
+export declare function Sparkline({ data, width, height, color, fill, strokeWidth, markLast, }: SparklineProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Sparkline.d.ts.map

package/dist/atoms/components/data/Sparkline/Sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/Sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAW,EACX,MAAW,EACX,KAAsC,EACtC,IAAI,EACJ,WAAiB,EACjB,QAAgB,GACjB,EAAE,cAAc,2CAyDhB"}

package/dist/atoms/components/data/Sparkline/index.d.ts

@@ -0,0 +1,2 @@
+export { Sparkline, type SparklineProps } from "./Sparkline";
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/components/data/Sparkline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/Sparkline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/atoms/components/data/Timestamp/Timestamp.d.ts

@@ -0,0 +1,13 @@
+export interface TimestampProps {
+    value: string | Date | number;
+    format?: "relative" | "absolute" | "both";
+    tz?: string;
+    className?: string;
+}
+/**
+ * Timestamp — renders a date/time value as a semantic <time> element.
+ * In "relative" / "both" modes it self-updates every 30s. "both" shows the
+ * absolute time with the relative time on hover.
+ */
+export declare function Timestamp({ value, format, tz, className, }: TimestampProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Timestamp.d.ts.map

package/dist/atoms/components/data/Timestamp/Timestamp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9B,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmCD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAmB,EACnB,EAAE,EACF,SAAS,GACV,EAAE,cAAc,2CA0BhB"}

package/dist/atoms/components/data/Timestamp/index.d.ts

@@ -0,0 +1,2 @@
+export { Timestamp, type TimestampProps } from "./Timestamp";
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/components/data/Timestamp/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/atoms/components/data/Timestamp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/atoms/components/data/index.d.ts

@@ -9,6 +9,10 @@ export { ProgressBar, type ProgressBarProps } from "./ProgressBar";
 export { ListCard, type ListCardProps } from "./ListCard";
 export { EntityIcon, type EntityIconProps } from "./EntityIcon";
 export { TruncatedText, type TruncatedTextProps } from "./TruncatedText";
+export { Duration, type DurationProps } from "./Duration";
+export { Timestamp, type TimestampProps } from "./Timestamp";
+export { Sparkline, type SparklineProps } from "./Sparkline";
+export { LiveIndicator, type LiveIndicatorProps } from "./LiveIndicator";
 export { ActivityFeed, type ActivityFeedProps, type ActivityItem, type ActivityType, type ActivityVariant, } from "./ActivityFeed";
 export { ConnectionStatus, type ConnectionStatusProps, } from "../../composed/ConnectionStatus";
 //# sourceMappingURL=index.d.ts.map

package/dist/atoms/components/data/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/components/data/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/components/data/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,MAAM,EACX,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,YAAY,EACZ,KAAK,iBAAiB,GACvB,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,KAAK,EACL,SAAS,EACT,YAAY,EACZ,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,KAAK,UAAU,GAChB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,iCAAiC,CAAC"}

package/dist/atoms/types/navigation.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 export type IconName = "Palette" | "Menu" | "X" | "Shield" | "Users" | "BarChart" | "BarChart2" | "BarChart3" | "BarChart4" | "LineChart" | "AreaChart" | "PieChart" | "Database" | "TrendingUp" | "TrendingDown" | "Activity" | "Layout" | "Home" | "Settings" | "Bell" | "Search" | "Plus" | "Edit" | "Trash2" | "Eye" | "Download" | "Upload" | "Share" | "Lock" | "Unlock" | "Mail" | "Phone" | "Calendar" | "Clock" | "MapPin" | "Map" | "Star" | "Heart" | "Bookmark" | "Tag" | "Flag" | "File" | "Folder" | "Image" | "Video" | "Music" | "ChevronRight" | "ChevronDown" | "ChevronLeft" | "ChevronUp" | "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown" | "Check" | "AlertCircle" | "Info" | "HelpCircle" | "Building" | "Truck" | "Handshake" | "User" | "Brain" | "Calculator" | "ShoppingCart" | "Utensils" | "Car" | "Zap" | "Film" | "ShoppingBag" | "Wrench" | "CreditCard" | "Wallet" | "PiggyBank" | "Receipt" | "DollarSign" | "Percent" | "Gift" | "Package" | "Coffee" | "Plane" | "Bus" | "Fuel" | "Sparkles" | "Scissors" | "Dumbbell" | "Pill" | "Stethoscope" | "GraduationCap" | "Book" | "BookOpen" | "Gamepad2" | "Tv" | "Wifi" | "Droplets" | "Flame" | "TreePine" | "Dog" | "Baby" | "Shirt" | "Sofa" | "Hammer" | "Paintbrush" | "Lightbulb";
 export interface NavigationItem {
     /** Unique identifier for the navigation item */
@@ -22,8 +23,14 @@ export interface NavigationConfig {
     items: NavigationItem[];
     /** Whether to show the default showcase navigation as fallback */
     showDefaultNavigation?: boolean;
-    /** Custom logo or title for the sidebar header */
-    logo?: string;
+    /**
+     * Custom logo or title for the sidebar header. Renders at the top of the
+     * Sidebar (left of the collapse toggle) when the sidebar is expanded; hidden
+     * when collapsed. A `string` is rendered inside a small semibold label;
+     * a `ReactNode` is rendered as-is so consumers can pass an `<img>`, SVG,
+     * or composed branding element.
+     */
+    logo?: string | ReactNode;
     /** Whether the sidebar starts expanded */
     defaultExpanded?: boolean;
 }

package/dist/atoms/types/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/atoms/types/navigation.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,MAAM,GACN,GAAG,GACH,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,UAAU,GACV,YAAY,GACZ,cAAc,GACd,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,QAAQ,GACR,KAAK,GACL,UAAU,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,GACP,OAAO,GACP,cAAc,GACd,aAAa,GACb,aAAa,GACb,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,OAAO,GACP,aAAa,GACb,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,WAAW,GACX,MAAM,GACN,OAAO,GACP,YAAY,GAEZ,cAAc,GACd,UAAU,GACV,KAAK,GACL,KAAK,GACL,MAAM,GACN,aAAa,GACb,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,YAAY,GACZ,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,KAAK,GACL,MAAM,GACN,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,aAAa,GACb,eAAe,GACf,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,GACJ,MAAM,GACN,UAAU,GACV,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,WAAW,CAAC;AAEhB,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,IAAI,EAAE,QAAQ,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,kEAAkE;IAClE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/atoms/types/navigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,MAAM,GACN,GAAG,GACH,QAAQ,GACR,OAAO,GACP,UAAU,GACV,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,UAAU,GACV,UAAU,GACV,YAAY,GACZ,cAAc,GACd,UAAU,GACV,QAAQ,GACR,MAAM,GACN,UAAU,GACV,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,QAAQ,GACR,KAAK,GACL,UAAU,GACV,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,GACN,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,GACP,OAAO,GACP,cAAc,GACd,aAAa,GACb,aAAa,GACb,WAAW,GACX,YAAY,GACZ,WAAW,GACX,SAAS,GACT,WAAW,GACX,OAAO,GACP,aAAa,GACb,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,WAAW,GACX,MAAM,GACN,OAAO,GACP,YAAY,GAEZ,cAAc,GACd,UAAU,GACV,KAAK,GACL,KAAK,GACL,MAAM,GACN,aAAa,GACb,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,WAAW,GACX,SAAS,GACT,YAAY,GACZ,SAAS,GACT,MAAM,GACN,SAAS,GACT,QAAQ,GACR,OAAO,GACP,KAAK,GACL,MAAM,GACN,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,aAAa,GACb,eAAe,GACf,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,GACJ,MAAM,GACN,UAAU,GACV,OAAO,GACP,UAAU,GACV,KAAK,GACL,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,WAAW,CAAC;AAEhB,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,IAAI,EAAE,QAAQ,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,kEAAkE;IAClE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B"}

package/dist/index.es.js

@@ -7750,6 +7750,201 @@ const TruncatedText = ({
     }
   );
 };
+function formatAuto(ms) {
+  if (ms < 1e3) {
+    return { visible: `${ms}ms`, spoken: `${ms} milliseconds` };
+  }
+  if (ms < 6e4) {
+    const secs = ms / 1e3;
+    return {
+      visible: `${secs.toFixed(1)}s`,
+      spoken: `${secs.toFixed(1)} seconds`
+    };
+  }
+  if (ms < 36e5) {
+    const m = Math.floor(ms / 6e4);
+    const s = Math.round(ms % 6e4 / 1e3);
+    return { visible: `${m}m ${s}s`, spoken: `${m} minutes ${s} seconds` };
+  }
+  if (ms < 864e5) {
+    const h2 = Math.floor(ms / 36e5);
+    const m = Math.round(ms % 36e5 / 6e4);
+    return { visible: `${h2}h ${m}m`, spoken: `${h2} hours ${m} minutes` };
+  }
+  const d = Math.floor(ms / 864e5);
+  const h = Math.round(ms % 864e5 / 36e5);
+  return { visible: `${d}d ${h}h`, spoken: `${d} days ${h} hours` };
+}
+function formatS(ms) {
+  const secs = ms / 1e3;
+  return {
+    visible: `${secs.toFixed(1)}s`,
+    spoken: `${secs.toFixed(1)} seconds`
+  };
+}
+function formatMs(ms) {
+  return { visible: `${ms}ms`, spoken: `${ms} milliseconds` };
+}
+function Duration({ ms, precision = "auto", className }) {
+  const { visible, spoken } = precision === "s" ? formatS(ms) : precision === "ms" ? formatMs(ms) : formatAuto(ms);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": spoken,
+      className: cn("font-mono text-xs text-muted-foreground", className),
+      children: visible
+    }
+  );
+}
+function toDate(v) {
+  return v instanceof Date ? v : new Date(v);
+}
+function formatRelative(date, now) {
+  const diffMs = now.getTime() - date.getTime();
+  const abs = Math.abs(diffMs);
+  const suffix = diffMs >= 0 ? "ago" : "from now";
+  if (abs < 6e4) return "just now";
+  if (abs < 36e5) {
+    const m = Math.floor(abs / 6e4);
+    return `${m}m ${suffix}`;
+  }
+  if (abs < 864e5) {
+    const h = Math.floor(abs / 36e5);
+    return `${h}h ${suffix}`;
+  }
+  if (abs < 6048e5) {
+    const d = Math.floor(abs / 864e5);
+    return d === 1 ? "yesterday" : `${d}d ${suffix}`;
+  }
+  return date.toLocaleDateString(void 0);
+}
+function formatAbsolute(date, tz) {
+  return date.toLocaleString(void 0, {
+    dateStyle: "short",
+    timeStyle: "short",
+    timeZone: tz
+  });
+}
+function Timestamp({
+  value,
+  format = "relative",
+  tz,
+  className
+}) {
+  const date = toDate(value);
+  const iso = date.toISOString();
+  const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
+  useEffect(() => {
+    if (format === "absolute") return;
+    const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), 3e4);
+    return () => clearInterval(id);
+  }, [format]);
+  const absolute = formatAbsolute(date, tz);
+  const relative = formatRelative(date, now);
+  const display = format === "relative" ? relative : absolute;
+  const title = format === "both" ? relative : void 0;
+  return /* @__PURE__ */ jsx(
+    "time",
+    {
+      dateTime: iso,
+      title,
+      className: cn("font-mono text-xs text-muted-foreground", className),
+      children: display
+    }
+  );
+}
+function Sparkline({
+  data,
+  width = 140,
+  height = 28,
+  color = "hsl(var(--muted-foreground))",
+  fill,
+  strokeWidth = 1.2,
+  markLast = false
+}) {
+  if (data.length < 2) {
+    return /* @__PURE__ */ jsx("svg", { width, height, "aria-hidden": true });
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const pad = strokeWidth;
+  const innerW = width - pad * 2;
+  const innerH = height - pad * 2;
+  const points = data.map((v, i) => {
+    const x = pad + i / (data.length - 1) * innerW;
+    const y = pad + innerH - (v - min) / range * innerH;
+    return [x, y];
+  });
+  const polyline = points.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join(" ");
+  const firstPt = points[0];
+  const lastPt = points[points.length - 1];
+  let fillPath;
+  if (fill) {
+    fillPath = [
+      `${firstPt[0].toFixed(2)},${(pad + innerH).toFixed(2)}`,
+      ...points.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`),
+      `${lastPt[0].toFixed(2)},${(pad + innerH).toFixed(2)}`
+    ].join(" ");
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      "aria-hidden": true,
+      style: { display: "block", overflow: "visible" },
+      children: [
+        fillPath && /* @__PURE__ */ jsx("polygon", { points: fillPath, fill, stroke: "none" }),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points: polyline,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        markLast && /* @__PURE__ */ jsx("circle", { cx: lastPt[0], cy: lastPt[1], r: strokeWidth * 2, fill: color })
+      ]
+    }
+  );
+}
+function LiveIndicator({
+  active,
+  label = "Live",
+  className
+}) {
+  const ariaLabel = active ? `${label} — connected` : `${label} — paused`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex items-center gap-2 text-xs font-mono",
+        active ? "text-primary" : "text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-block w-2 h-2 rounded-full",
+              active ? "bg-primary animate-pulse" : "bg-muted-foreground/40"
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
 const defaultActivityIconMap = {
   user: {
     icon: Users,
@@ -10601,7 +10796,7 @@ const SidebarButton = ({
             "span",
             {
               className: cn(
-                "text-sm font-medium flex-1 text-left",
+                "text-sm font-medium flex-1 text-left whitespace-nowrap",
                 active ? `text-category-${category}` : "text-foreground"
               ),
               children: label
@@ -10684,23 +10879,43 @@ const Sidebar = ({
       "data-component-name": "Sidebar",
       "data-collapsed": !isExpanded,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "flex justify-center p-3 pt-4", children: /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            onClick: toggleSidebar,
             className: cn(
-              "w-7 h-7 rounded-md",
-              "bg-muted/50 text-muted-foreground",
-              "flex items-center justify-center",
-              "hover:bg-muted hover:text-foreground",
-              "active:scale-95",
-              "transition-all duration-150 ease-out"
+              "flex items-center p-3 pt-4",
+              isExpanded ? "justify-between gap-2" : "justify-center"
             ),
-            "data-component-name": "SidebarToggle",
-            title: !isExpanded ? "Expand sidebar" : "Collapse sidebar",
-            children: !isExpanded ? /* @__PURE__ */ jsx(Menu, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            "data-component-name": "SidebarHeader",
+            children: [
+              isExpanded && (navigation == null ? void 0 : navigation.logo) != null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex-1 min-w-0 flex items-center",
+                  "data-component-name": "SidebarLogo",
+                  children: typeof navigation.logo === "string" ? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: navigation.logo }) : navigation.logo
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: toggleSidebar,
+                  className: cn(
+                    "w-7 h-7 rounded-md shrink-0",
+                    "bg-muted/50 text-muted-foreground",
+                    "flex items-center justify-center",
+                    "hover:bg-muted hover:text-foreground",
+                    "active:scale-95",
+                    "transition-all duration-150 ease-out"
+                  ),
+                  "data-component-name": "SidebarToggle",
+                  title: !isExpanded ? "Expand sidebar" : "Collapse sidebar",
+                  children: !isExpanded ? /* @__PURE__ */ jsx(Menu, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ]
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx("nav", { className: "flex-1 p-3 space-y-2", "data-component-name": "SidebarNav", children: items.map((item) => {
           const [itemBasePath, itemQuery] = item.path.split("?");
           const currentPath = location.pathname;
@@ -15677,14 +15892,12 @@ function createReactApp(config) {
     if (enableRouting) {
       tree = /* @__PURE__ */ jsx(NavigationProvider, { initialNavigation: navigation, children: /* @__PURE__ */ jsx(SidebarProvider, { children: tree }) });
     }
-    if (enableAuth) {
-      const authMode = (auth == null ? void 0 : auth.mode) || "pattern-stack";
-      if (authMode === "none") {
-        setGlobalAuthService(null);
-        tree = /* @__PURE__ */ jsx(NoAuthProvider, { children: tree });
-      } else {
-        tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
-      }
+    const authMode = (auth == null ? void 0 : auth.mode) || "pattern-stack";
+    if (enableAuth && authMode !== "none") {
+      tree = /* @__PURE__ */ jsx(AuthProvider, { config: auth, children: tree });
+    } else {
+      setGlobalAuthService(null);
+      tree = /* @__PURE__ */ jsx(NoAuthProvider, { children: tree });
     }
     if (enableQuery) {
       tree = /* @__PURE__ */ jsxs(QueryClientProvider, { client: queryClient, children: [
@@ -19151,6 +19364,7 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  Duration,
   EmptyState,
   EnhancedDataTemplate,
   EntityIcon,
@@ -19170,6 +19384,7 @@ export {
   ListCard,
   ListPageTemplate,
   ListToolbar,
+  LiveIndicator,
   Loading,
   LoginForm,
   LogoutButton,
@@ -19214,6 +19429,7 @@ export {
   SkeletonButton,
   SkeletonCard,
   SkeletonText,
+  Sparkline,
   Spinner,
   StatCard,
   StyleGuide,
@@ -19231,6 +19447,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Timestamp,
   Toast,
   ToastContainer,
   Tooltip,