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

package/dist/index.js

@@ -7793,6 +7793,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__ */ jsxRuntime.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] = React.useState(() => /* @__PURE__ */ new Date());
+  React.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      "aria-hidden": true,
+      style: { display: "block", overflow: "visible" },
+      children: [
+        fillPath && /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: fillPath, fill, stroke: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "polyline",
+          {
+            points: polyline,
+            fill: "none",
+            stroke: color,
+            strokeWidth,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        markLast && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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: lucideReact.Users,
@@ -10644,7 +10839,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
@@ -10727,23 +10922,43 @@ const Sidebar = ({
       "data-component-name": "Sidebar",
       "data-collapsed": !isExpanded,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center p-3 pt-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+            "data-component-name": "SidebarHeader",
+            children: [
+              isExpanded && (navigation == null ? void 0 : navigation.logo) != null && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex-1 min-w-0 flex items-center",
+                  "data-component-name": "SidebarLogo",
+                  children: typeof navigation.logo === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: navigation.logo }) : navigation.logo
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+                }
+              )
+            ]
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.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;
@@ -15720,14 +15935,12 @@ function createReactApp(config) {
     if (enableRouting) {
       tree = /* @__PURE__ */ jsxRuntime.jsx(NavigationProvider, { initialNavigation: navigation, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider, { children: tree }) });
     }
-    if (enableAuth) {
-      const authMode = (auth == null ? void 0 : auth.mode) || "pattern-stack";
-      if (authMode === "none") {
-        setGlobalAuthService(null);
-        tree = /* @__PURE__ */ jsxRuntime.jsx(NoAuthProvider, { children: tree });
-      } else {
-        tree = /* @__PURE__ */ jsxRuntime.jsx(AuthProvider, { config: auth, children: tree });
-      }
+    const authMode = (auth == null ? void 0 : auth.mode) || "pattern-stack";
+    if (enableAuth && authMode !== "none") {
+      tree = /* @__PURE__ */ jsxRuntime.jsx(AuthProvider, { config: auth, children: tree });
+    } else {
+      setGlobalAuthService(null);
+      tree = /* @__PURE__ */ jsxRuntime.jsx(NoAuthProvider, { children: tree });
     }
     if (enableQuery) {
       tree = /* @__PURE__ */ jsxRuntime.jsxs(reactQuery.QueryClientProvider, { client: queryClient, children: [
@@ -19193,6 +19406,7 @@ exports.DropdownMenuSub = DropdownMenuSub;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.Duration = Duration;
 exports.EmptyState = EmptyState;
 exports.EnhancedDataTemplate = EnhancedDataTemplate;
 exports.EntityIcon = EntityIcon;
@@ -19212,6 +19426,7 @@ exports.Label = Label;
 exports.ListCard = ListCard;
 exports.ListPageTemplate = ListPageTemplate;
 exports.ListToolbar = ListToolbar;
+exports.LiveIndicator = LiveIndicator;
 exports.Loading = Loading;
 exports.LoginForm = LoginForm;
 exports.LogoutButton = LogoutButton;
@@ -19256,6 +19471,7 @@ exports.SkeletonAvatar = SkeletonAvatar;
 exports.SkeletonButton = SkeletonButton;
 exports.SkeletonCard = SkeletonCard;
 exports.SkeletonText = SkeletonText;
+exports.Sparkline = Sparkline;
 exports.Spinner = Spinner;
 exports.StatCard = StatCard;
 exports.StyleGuide = StyleGuide;
@@ -19273,6 +19489,7 @@ exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
+exports.Timestamp = Timestamp;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;
 exports.Tooltip = Tooltip;