@devalok/shilp-sutra 0.1.0

package/dist/shell/notification-center.js

@@ -0,0 +1,221 @@
+import { jsxs as s, jsx as t, Fragment as S } from "react/jsx-runtime";
+import * as k from "react";
+import { useRef as $, useCallback as f } from "react";
+import { Popover as P, PopoverTrigger as Y, PopoverContent as _ } from "../ui/popover.js";
+import { Tooltip as Q, TooltipTrigger as U, TooltipContent as B } from "../ui/tooltip.js";
+import { IconBell as G, IconChecks as H, IconInbox as K } from "@tabler/icons-react";
+import { cn as x } from "../ui/lib/utils.js";
+function L(e) {
+  const l = Date.now(), a = new Date(e).getTime(), d = l - a, c = Math.floor(d / 1e3), o = Math.floor(c / 60), n = Math.floor(o / 60), i = Math.floor(n / 24);
+  return c < 60 ? "just now" : o < 60 ? `${o}m ago` : n < 24 ? `${n}h ago` : i < 7 ? `${i}d ago` : new Date(e).toLocaleDateString(void 0, {
+    day: "numeric",
+    month: "short"
+  });
+}
+function N(e, l) {
+  return e.getFullYear() === l.getFullYear() && e.getMonth() === l.getMonth() && e.getDate() === l.getDate();
+}
+function O(e) {
+  const l = new Date(e), a = /* @__PURE__ */ new Date(), d = /* @__PURE__ */ new Date();
+  return d.setDate(a.getDate() - 1), N(l, a) ? "Today" : N(l, d) ? "Yesterday" : "Earlier";
+}
+const g = {
+  INFO: "bg-info",
+  IMPORTANT: "bg-warning",
+  CRITICAL: "bg-error"
+};
+function q(e) {
+  if (!e.entityType) return null;
+  switch (e.entityType) {
+    case "TASK":
+      return e.projectId ? `/projects/${e.projectId}/board` : null;
+    case "BREAK_REQUEST":
+      return "/breaks";
+    case "ATTENDANCE":
+      return "/attendance";
+    case "CLIENT_REQUEST":
+      return e.projectId ? `/projects/${e.projectId}/requests` : null;
+    case "REVIEW_REQUEST":
+      return e.projectId ? `/projects/${e.projectId}/board` : null;
+    case "PROJECT":
+      return e.projectId ? `/projects/${e.projectId}/board` : "/projects";
+    default:
+      return null;
+  }
+}
+function z({
+  notification: e,
+  onRead: l,
+  onNavigate: a,
+  getRoute: d
+}) {
+  const c = d(e);
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      onClick: () => {
+        e.isRead || l(e.id), c && a(c);
+      },
+      className: x(
+        "flex w-full items-start gap-ds-04 px-ds-05 py-ds-04 text-left transition-colors",
+        "hover:bg-layer-02",
+        !e.isRead && "bg-interactive/[0.03]"
+      ),
+      children: [
+        /* @__PURE__ */ t("div", { className: "mt-ds-02b flex shrink-0", children: /* @__PURE__ */ t(
+          "span",
+          {
+            className: x(
+              "h-2 w-2 rounded-ds-full",
+              g[e.tier] || g.INFO,
+              e.isRead && "opacity-[0.38]"
+            )
+          }
+        ) }),
+        /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ t(
+            "p",
+            {
+              className: x(
+                "truncate text-ds-md text-text-primary",
+                !e.isRead && "font-semibold"
+              ),
+              children: e.title
+            }
+          ),
+          e.body && /* @__PURE__ */ t("p", { className: "mt-ds-01 line-clamp-2 text-ds-sm text-text-placeholder", children: e.body }),
+          /* @__PURE__ */ s("div", { className: "mt-ds-02 flex items-center gap-ds-03", children: [
+            /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-placeholder", children: L(e.createdAt) }),
+            e.project && /* @__PURE__ */ s(S, { children: [
+              /* @__PURE__ */ t("span", { className: "text-text-placeholder", children: "·" }),
+              /* @__PURE__ */ t("span", { className: "truncate text-ds-sm text-text-placeholder", children: e.project.title })
+            ] })
+          ] })
+        ] }),
+        !e.isRead && /* @__PURE__ */ t("div", { className: "mt-ds-02b shrink-0", children: /* @__PURE__ */ t("span", { className: "block h-2 w-2 rounded-ds-full bg-interactive" }) })
+      ]
+    }
+  );
+}
+const J = k.forwardRef(
+  ({
+    notifications: e = [],
+    unreadCount: l,
+    open: a,
+    onOpenChange: d,
+    isLoading: c = !1,
+    hasMore: o = !1,
+    onFetchMore: n,
+    onMarkRead: i,
+    onMarkAllRead: b,
+    onNavigate: h,
+    getNotificationRoute: w,
+    className: v,
+    ...j
+  }, T) => {
+    const y = $(null), m = l ?? e.filter((r) => !r.isRead).length, I = w ?? q, R = f(
+      (r) => {
+        d == null || d(!1), h == null || h(r);
+      },
+      [h, d]
+    ), E = f(
+      (r) => {
+        i == null || i(r);
+      },
+      [i]
+    ), C = f(() => {
+      const r = y.current;
+      !r || c || !o || r.scrollTop + r.clientHeight >= r.scrollHeight - 50 && (n == null || n());
+    }, [c, o, n]), D = e.reduce(
+      (r, u) => {
+        const p = O(u.createdAt);
+        return r[p] || (r[p] = []), r[p].push(u), r;
+      },
+      {}
+    ), A = ["Today", "Yesterday", "Earlier"];
+    return /* @__PURE__ */ s(P, { open: a, onOpenChange: d, children: [
+      /* @__PURE__ */ s(Q, { children: [
+        /* @__PURE__ */ t(U, { asChild: !0, children: /* @__PURE__ */ t(Y, { asChild: !0, children: /* @__PURE__ */ s(
+          "button",
+          {
+            ...j,
+            ref: T,
+            className: x(
+              "relative flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-full border border-border bg-layer-02 text-text-secondary transition-colors hover:bg-layer-03",
+              v
+            ),
+            children: [
+              /* @__PURE__ */ t(G, { className: "h-ico-sm w-ico-sm" }),
+              m > 0 && /* @__PURE__ */ t("span", { className: "absolute -right-ds-01 -top-ds-01 flex h-4 min-w-4 items-center justify-center rounded-ds-full bg-interactive px-ds-02 text-ds-xs font-semibold text-text-on-color", children: m > 99 ? "99+" : m })
+            ]
+          }
+        ) }) }),
+        /* @__PURE__ */ t(B, { side: "bottom", align: "center", children: "Notifications" })
+      ] }),
+      /* @__PURE__ */ s(
+        _,
+        {
+          className: "w-[380px] rounded-ds-xl border border-border bg-layer-01 p-0 shadow-03",
+          sideOffset: 8,
+          align: "end",
+          children: [
+            /* @__PURE__ */ s("div", { className: "flex items-center justify-between border-b border-border px-ds-05 py-ds-04", children: [
+              /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+                /* @__PURE__ */ t("h3", { className: "text-ds-md font-semibold text-text-primary", children: "Notifications" }),
+                m > 0 && /* @__PURE__ */ t("span", { className: "flex h-5 min-w-5 items-center justify-center rounded-ds-full bg-interactive/10 px-ds-02b text-ds-sm font-semibold text-interactive", children: m })
+              ] }),
+              m > 0 && b && /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  onClick: b,
+                  className: "flex items-center gap-ds-02 text-ds-sm text-text-placeholder transition-colors hover:text-interactive",
+                  children: [
+                    /* @__PURE__ */ t(H, { className: "h-ico-sm w-ico-sm" }),
+                    "Mark all read"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(
+              "div",
+              {
+                ref: y,
+                onScroll: C,
+                className: "max-h-[420px] overflow-y-auto",
+                children: [
+                  e.length === 0 ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center px-ds-05 py-12", children: [
+                    /* @__PURE__ */ t("div", { className: "flex h-ds-lg w-ds-lg items-center justify-center rounded-ds-full bg-layer-02", children: /* @__PURE__ */ t(K, { className: "h-ico-lg w-ico-lg text-text-placeholder" }) }),
+                    /* @__PURE__ */ t("p", { className: "mt-ds-04 text-ds-md text-text-placeholder", children: "No notifications yet" }),
+                    /* @__PURE__ */ t("p", { className: "mt-ds-02 text-ds-sm text-text-placeholder", children: "You're all caught up!" })
+                  ] }) : A.map((r) => {
+                    const u = D[r];
+                    return !u || u.length === 0 ? null : /* @__PURE__ */ s("div", { children: [
+                      /* @__PURE__ */ t("div", { className: "sticky top-0 z-raised bg-layer-01 px-ds-05 py-ds-02b", children: /* @__PURE__ */ t("span", { className: "text-ds-sm font-medium text-text-placeholder", children: r }) }),
+                      u.map((p) => /* @__PURE__ */ t(
+                        z,
+                        {
+                          notification: p,
+                          onRead: E,
+                          onNavigate: R,
+                          getRoute: I
+                        },
+                        p.id
+                      ))
+                    ] }, r);
+                  }),
+                  c && /* @__PURE__ */ t("div", { className: "flex items-center justify-center py-ds-05", children: /* @__PURE__ */ t("div", { className: "h-ico-md w-ico-md animate-spin rounded-ds-full border-2 border-border border-t-interactive" }) })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+J.displayName = "NotificationCenter";
+export {
+  J as NotificationCenter
+};

package/dist/shell/notification-preferences.d.ts

@@ -0,0 +1,41 @@
+export interface NotificationPreference {
+    id: string;
+    userId?: string;
+    projectId: string | null;
+    channel: string;
+    minTier: string;
+    muted: boolean;
+}
+export interface NotificationProject {
+    id: string;
+    title: string;
+}
+export interface NotificationPreferencesProps {
+    /** Current preference rules */
+    preferences?: NotificationPreference[];
+    /** Available projects for scoping rules */
+    projects?: NotificationProject[];
+    /** Whether data is loading */
+    isLoading?: boolean;
+    /** Called to add or update a preference */
+    onSave?: (preference: {
+        projectId: string | null;
+        channel: string;
+        minTier: string;
+        muted: boolean;
+    }) => void | Promise<void>;
+    /** Called to toggle mute on a preference */
+    onToggleMute?: (preference: NotificationPreference) => void | Promise<void>;
+    /** Called to update the tier on a preference */
+    onUpdateTier?: (preference: NotificationPreference, newTier: string) => void | Promise<void>;
+    /** Called to delete a preference */
+    onDelete?: (preferenceId: string) => void | Promise<void>;
+    /** Additional className */
+    className?: string;
+}
+declare function NotificationPreferences({ preferences, projects, isLoading, onSave, onToggleMute, onUpdateTier, onDelete, className, }: NotificationPreferencesProps): import("react/jsx-runtime").JSX.Element;
+declare namespace NotificationPreferences {
+    var displayName: string;
+}
+export default NotificationPreferences;
+//# sourceMappingURL=notification-preferences.d.ts.map

package/dist/shell/notification-preferences.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-preferences.d.ts","sourceRoot":"","sources":["../../src/shell/notification-preferences.tsx"],"names":[],"mappings":"AAiCA,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,4BAA4B;IAC3C,+BAA+B;IAC/B,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAA;IACtC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAA;IAChC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE;QACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;QACxB,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,OAAO,CAAA;KACf,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,sBAAsB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3E,gDAAgD;IAChD,YAAY,CAAC,EAAE,CACb,UAAU,EAAE,sBAAsB,EAClC,OAAO,EAAE,MAAM,KACZ,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACzB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACzD,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqBD,iBAAwB,uBAAuB,CAAC,EAC9C,WAAgB,EAChB,QAAa,EACb,SAAiB,EACjB,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE,4BAA4B,2CA6O9B;kBAtPuB,uBAAuB;;;eAAvB,uBAAuB"}

package/dist/shell/notification-preferences.js

@@ -0,0 +1,183 @@
+import { jsxs as t, Fragment as B, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { Button as b } from "../ui/button.js";
+import { Select as d, SelectTrigger as o, SelectValue as m, SelectContent as h, SelectItem as i } from "../ui/select.js";
+import { Dialog as D, DialogContent as z, DialogHeader as q, DialogTitle as J, DialogDescription as K } from "../ui/dialog.js";
+import { Switch as k } from "../ui/switch.js";
+import { Card as Q, CardHeader as W, CardTitle as X, CardContent as Y } from "../ui/card.js";
+import { IconPlus as Z, IconMessage as $, IconBell as U, IconTrash as ee } from "@tabler/icons-react";
+import { cn as le } from "../ui/lib/utils.js";
+const _ = {
+  IN_APP: { label: "In-App", icon: U },
+  GOOGLE_CHAT: { label: "Google Chat", icon: $ }
+}, G = {
+  INFO: "All (Info+)",
+  IMPORTANT: "Important+",
+  CRITICAL: "Critical only"
+};
+function te({
+  preferences: f = [],
+  projects: v = [],
+  isLoading: L = !1,
+  onSave: C,
+  onToggleMute: u,
+  onUpdateTier: x,
+  onDelete: p,
+  className: T
+}) {
+  const [E, a] = c(!1), [N, g] = c("global"), [I, w] = c("IN_APP"), [y, A] = c("INFO"), [P, j] = c(!1), [S, O] = c(!1), R = async () => {
+    if (C) {
+      O(!0);
+      try {
+        await C({
+          projectId: N === "global" ? null : N,
+          channel: I,
+          minTier: y,
+          muted: P
+        }), a(!1), F();
+      } catch (l) {
+        console.error("[Preferences] Failed to save:", l);
+      } finally {
+        O(!1);
+      }
+    }
+  }, F = () => {
+    g("global"), w("IN_APP"), A("INFO"), j(!1);
+  }, H = (l) => {
+    if (!l) return "Global (all projects)";
+    const n = v.find((s) => s.id === l);
+    return (n == null ? void 0 : n.title) || "Unknown project";
+  };
+  return /* @__PURE__ */ t(B, { children: [
+    /* @__PURE__ */ t(Q, { className: T, children: [
+      /* @__PURE__ */ t(W, { className: "flex flex-row items-center justify-between space-y-0 pb-ds-04", children: [
+        /* @__PURE__ */ e(X, { className: "text-ds-md font-semibold", children: "Notification Preferences" }),
+        /* @__PURE__ */ t(
+          b,
+          {
+            size: "sm",
+            variant: "secondary",
+            onClick: () => a(!0),
+            children: [
+              /* @__PURE__ */ e(Z, { className: "mr-ds-02b h-ico-sm w-ico-sm" }),
+              "Add Rule"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(Y, { children: L ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center py-ds-07", children: /* @__PURE__ */ e("div", { className: "h-ico-md w-ico-md animate-spin rounded-ds-full border-2 border-border border-t-interactive" }) }) : f.length === 0 ? /* @__PURE__ */ e("div", { className: "py-ds-07 text-center", children: /* @__PURE__ */ e("p", { className: "text-ds-md text-text-placeholder", children: "No custom preferences set. All notifications are delivered by default." }) }) : /* @__PURE__ */ e("div", { className: "flex flex-col", children: f.map((l, n) => {
+        const s = _[l.channel] || _.IN_APP, M = s.icon;
+        return /* @__PURE__ */ t(
+          "div",
+          {
+            className: le(
+              "flex items-center gap-ds-05 py-ds-04",
+              n < f.length - 1 && "border-b border-border"
+            ),
+            children: [
+              /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-ds-lg bg-layer-02", children: /* @__PURE__ */ e(M, { className: "h-ico-sm w-ico-sm text-text-secondary" }) }),
+              /* @__PURE__ */ t("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ e("p", { className: "text-ds-md font-medium text-text-primary", children: s.label }),
+                /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-placeholder", children: H(l.projectId) })
+              ] }),
+              /* @__PURE__ */ t(
+                d,
+                {
+                  value: l.minTier,
+                  onValueChange: (r) => x == null ? void 0 : x(l, r),
+                  children: [
+                    /* @__PURE__ */ e(o, { className: "h-ds-xs-plus w-[130px] text-ds-sm", children: /* @__PURE__ */ e(m, {}) }),
+                    /* @__PURE__ */ e(h, { children: Object.entries(G).map(([r, V]) => /* @__PURE__ */ e(i, { value: r, children: V }, r)) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t("div", { className: "flex items-center gap-ds-02b", children: [
+                /* @__PURE__ */ e("span", { className: "text-ds-sm text-text-placeholder", children: l.muted ? "Muted" : "Active" }),
+                /* @__PURE__ */ e(
+                  k,
+                  {
+                    checked: !l.muted,
+                    onCheckedChange: () => u == null ? void 0 : u(l)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => p == null ? void 0 : p(l.id),
+                  className: "shrink-0 rounded p-ds-02b text-text-placeholder transition-colors hover:bg-layer-02 hover:text-error",
+                  children: /* @__PURE__ */ e(ee, { className: "h-ico-sm w-ico-sm" })
+                }
+              )
+            ]
+          },
+          l.id
+        );
+      }) }) })
+    ] }),
+    /* @__PURE__ */ e(D, { open: E, onOpenChange: a, children: /* @__PURE__ */ t(z, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ t(q, { children: [
+        /* @__PURE__ */ e(J, { children: "Add Notification Rule" }),
+        /* @__PURE__ */ e(K, { children: "Customize how you receive notifications for a specific channel and project." })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-05 pt-ds-03", children: [
+        /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-02b", children: [
+          /* @__PURE__ */ e("label", { htmlFor: "pref-scope", className: "text-ds-sm font-medium text-text-secondary", children: "Scope" }),
+          /* @__PURE__ */ t(d, { value: N, onValueChange: g, children: [
+            /* @__PURE__ */ e(o, { id: "pref-scope", children: /* @__PURE__ */ e(m, { placeholder: "Select scope" }) }),
+            /* @__PURE__ */ t(h, { children: [
+              /* @__PURE__ */ e(i, { value: "global", children: "Global (all projects)" }),
+              v.map((l) => /* @__PURE__ */ e(i, { value: l.id, children: l.title }, l.id))
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-02b", children: [
+          /* @__PURE__ */ e("label", { htmlFor: "pref-channel", className: "text-ds-sm font-medium text-text-secondary", children: "Channel" }),
+          /* @__PURE__ */ t(d, { value: I, onValueChange: w, children: [
+            /* @__PURE__ */ e(o, { id: "pref-channel", children: /* @__PURE__ */ e(m, {}) }),
+            /* @__PURE__ */ t(h, { children: [
+              /* @__PURE__ */ e(i, { value: "IN_APP", children: "In-App" }),
+              /* @__PURE__ */ e(i, { value: "GOOGLE_CHAT", children: "Google Chat" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-02b", children: [
+          /* @__PURE__ */ e("label", { htmlFor: "pref-min-tier", className: "text-ds-sm font-medium text-text-secondary", children: "Minimum Tier" }),
+          /* @__PURE__ */ t(d, { value: y, onValueChange: A, children: [
+            /* @__PURE__ */ e(o, { id: "pref-min-tier", children: /* @__PURE__ */ e(m, {}) }),
+            /* @__PURE__ */ e(h, { children: Object.entries(G).map(([l, n]) => /* @__PURE__ */ e(i, { value: l, children: n }, l)) })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ e("label", { htmlFor: "pref-muted", className: "text-ds-md text-text-primary", children: "Mute this channel" }),
+          /* @__PURE__ */ e(k, { id: "pref-muted", checked: P, onCheckedChange: j })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex justify-end gap-ds-03 pt-ds-03", children: [
+          /* @__PURE__ */ e(
+            b,
+            {
+              variant: "ghost",
+              onClick: () => {
+                a(!1), F();
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ e(
+            b,
+            {
+              onClick: R,
+              disabled: S,
+              children: S ? "Saving..." : "Save Rule"
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+te.displayName = "NotificationPreferences";
+export {
+  te as default
+};

package/dist/shell/sidebar.d.ts

@@ -0,0 +1,51 @@
+/**
+ * AppSidebar -- Application-layer sidebar built on the Sidebar primitive.
+ *
+ * Design-system token migration (2026-02-28):
+ *   All V1 colour tokens have been replaced with semantic design-system tokens.
+ *   Typography classes replaced with Tailwind equivalents.
+ *
+ * Props-driven: accepts user info, currentPath, and navItems instead of
+ * reading from Remix hooks or Zustand stores.
+ */
+import * as React from 'react';
+export interface NavItem {
+    title: string;
+    href: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    /** When true, the route matches only when the path is exactly equal */
+    exact?: boolean;
+}
+export interface NavGroup {
+    label: string;
+    items: NavItem[];
+}
+export interface SidebarUser {
+    name: string;
+    email?: string;
+    image?: string | null;
+    designation?: string;
+    role?: string;
+}
+export interface AppSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Currently active pathname -- used to highlight the active nav item */
+    currentPath?: string;
+    /** User information displayed in the sidebar header */
+    user?: SidebarUser | null;
+    /** Primary navigation groups rendered in the main content area */
+    navGroups?: NavGroup[];
+    /** Optional logo element. Falls back to a text placeholder. */
+    logo?: React.ReactNode;
+    /** Footer links rendered at the bottom of the sidebar */
+    footerLinks?: Array<{
+        label: string;
+        href: string;
+    }>;
+    /** Additional className for the root sidebar element */
+    className?: string;
+}
+declare const AppSidebar: React.ForwardRefExoticComponent<AppSidebarProps & React.RefAttributes<HTMLDivElement>>;
+export { AppSidebar };
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/shell/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACjD,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,EAAE,CAAA;CACjB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACzB,kEAAkE;IAClE,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAA;IACtB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,yDAAyD;IACzD,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACpD,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAqCD,QAAA,MAAM,UAAU,wFA+Gf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/shell/sidebar.js

@@ -0,0 +1,101 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import * as v from "react";
+import o from "next/link";
+import { Sidebar as g, SidebarHeader as u, SidebarSeparator as c, SidebarContent as S, SidebarGroup as y, SidebarGroupLabel as w, SidebarGroupContent as A, SidebarMenu as C, SidebarFooter as M, SidebarMenuItem as j, SidebarMenuButton as G } from "../ui/sidebar.js";
+import { Avatar as L, AvatarImage as F, AvatarFallback as I } from "../ui/avatar.js";
+import { cn as m } from "../ui/lib/utils.js";
+function R({ item: t, isActive: a }) {
+  return /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(
+    G,
+    {
+      asChild: !0,
+      isActive: a,
+      tooltip: t.title,
+      className: m(
+        "relative gap-ds-04 rounded-ds-lg px-ds-04 py-ds-03 transition-colors",
+        a ? "bg-interactive-subtle text-interactive after:absolute after:right-0 after:top-0 after:h-full after:w-ds-01 after:rounded-l-ds-full after:bg-interactive after:content-['']" : "text-text-helper hover:bg-layer-02 hover:text-text-primary"
+      ),
+      children: /* @__PURE__ */ l(
+        o,
+        {
+          href: t.href,
+          "aria-label": t.title,
+          "aria-current": a ? "page" : void 0,
+          children: [
+            /* @__PURE__ */ e(t.icon, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ e("span", { className: "text-ds-base", children: t.title })
+          ]
+        }
+      )
+    }
+  ) });
+}
+const k = v.forwardRef(
+  ({
+    currentPath: t = "/",
+    user: a,
+    navGroups: p = [],
+    logo: h,
+    footerLinks: i = [],
+    className: x,
+    ...f
+  }, b) => {
+    var n;
+    const N = (r, s = !1) => s || r === "/" ? t === r : t.startsWith(r);
+    return /* @__PURE__ */ l(
+      g,
+      {
+        ...f,
+        ref: b,
+        "aria-label": "Main navigation",
+        className: m(
+          "z-raised hidden h-full flex-col border-r border-border bg-layer-01 md:flex",
+          x
+        ),
+        children: [
+          /* @__PURE__ */ e(u, { className: "px-ds-06 py-ds-06", children: h ?? /* @__PURE__ */ e("span", { className: "text-ds-lg font-semibold text-text-primary", children: "Logo" }) }),
+          a && /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-04 px-ds-06 pb-ds-05", children: [
+            /* @__PURE__ */ l(L, { className: "h-ds-sm-plus w-ds-sm-plus", children: [
+              a.image ? /* @__PURE__ */ e(F, { src: a.image, alt: a.name }) : null,
+              /* @__PURE__ */ e(I, { className: "bg-layer-03 text-text-primary", children: (n = a.name) == null ? void 0 : n.charAt(0).toUpperCase() })
+            ] }),
+            /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-col", children: [
+              /* @__PURE__ */ e("span", { className: "truncate text-ds-md text-text-primary", children: a.name }),
+              /* @__PURE__ */ e("span", { className: "truncate text-ds-sm text-text-placeholder", children: a.designation || a.role })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(c, {}),
+          /* @__PURE__ */ e(S, { className: "no-scrollbar px-ds-04", children: p.map((r, s) => /* @__PURE__ */ l("div", { children: [
+            s > 0 && /* @__PURE__ */ e(c, {}),
+            /* @__PURE__ */ l(y, { children: [
+              /* @__PURE__ */ e(w, { className: "px-ds-04 text-ds-sm text-text-placeholder", children: r.label }),
+              /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(C, { children: r.items.map((d) => /* @__PURE__ */ e(
+                R,
+                {
+                  item: d,
+                  isActive: N(d.href, d.exact)
+                },
+                d.href
+              )) }) })
+            ] })
+          ] }, r.label)) }),
+          i.length > 0 && /* @__PURE__ */ e(M, { className: "px-ds-06 py-ds-05", children: /* @__PURE__ */ e("div", { className: "flex items-center justify-start gap-ds-03", children: i.map((r, s) => /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-03", children: [
+            s > 0 && /* @__PURE__ */ e("div", { className: "h-4 w-px bg-border" }),
+            /* @__PURE__ */ e(
+              o,
+              {
+                className: "text-ds-md text-text-placeholder transition-colors hover:text-interactive",
+                href: r.href,
+                children: r.label
+              }
+            )
+          ] }, r.href)) }) })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "AppSidebar";
+export {
+  k as AppSidebar
+};

package/dist/shell/top-bar.d.ts

@@ -0,0 +1,33 @@
+/**
+ * TopBar -- Application top bar with sidebar trigger, user menu, and action
+ * buttons. All data is props-driven (no Zustand stores or Remix hooks).
+ */
+import * as React from 'react';
+export interface TopBarUser {
+    name: string;
+    email?: string;
+    image?: string | null;
+}
+export interface TopBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Page title displayed on desktop */
+    pageTitle?: string;
+    /** Current user information for the avatar dropdown */
+    user?: TopBarUser | null;
+    /** Called when the user clicks a navigation item (e.g. "Profile", "Login") */
+    onNavigate?: (path: string) => void;
+    /** Called when the user clicks the logout button */
+    onLogout?: () => void;
+    /** Called when the search button is clicked */
+    onSearchClick?: () => void;
+    /** Called when the AI chat button is clicked */
+    onAiChatClick?: () => void;
+    /** Optional mobile logo element */
+    mobileLogo?: React.ReactNode;
+    /** Notification center slot -- render your NotificationCenter here */
+    notificationSlot?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+}
+declare const TopBar: React.ForwardRefExoticComponent<TopBarProps & React.RefAttributes<HTMLDivElement>>;
+export { TopBar };
+//# sourceMappingURL=top-bar.d.ts.map

package/dist/shell/top-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-bar.d.ts","sourceRoot":"","sources":["../../src/shell/top-bar.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IACxB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,mCAAmC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD,QAAA,MAAM,MAAM,oFAqLX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}