@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/lib/trigger-query.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+import { findTriggerQuery, replaceTriggerRun } from "./trigger-query";
+
+describe("findTriggerQuery — word boundary (default)", () => {
+  it("finds a trigger + query run under the caret", () => {
+    const text = "Hi @ada";
+    expect(findTriggerQuery(text, text.length, "@")).toEqual({ start: 3, query: "ada" });
+  });
+
+  it("returns null when there is no trigger before the caret", () => {
+    expect(findTriggerQuery("hello", 5, "@")).toBeNull();
+  });
+
+  it("returns null when the run contains whitespace (the query already closed)", () => {
+    const text = "Hi @ada lovelace";
+    expect(findTriggerQuery(text, text.length, "@")).toBeNull();
+  });
+
+  it("returns null when the trigger is not at a word boundary (inside a token)", () => {
+    const text = "ping ada@example.com";
+    const at = text.indexOf("@");
+    expect(findTriggerQuery(text, at + 1, "@")).toBeNull();
+  });
+
+  it("allows the trigger at index 0", () => {
+    expect(findTriggerQuery("@ada", 4, "@")).toEqual({ start: 0, query: "ada" });
+  });
+
+  it("allows the trigger right after '(' or '['", () => {
+    expect(findTriggerQuery("see (@ada", 9, "@")).toEqual({ start: 5, query: "ada" });
+    expect(findTriggerQuery("see [@ada", 9, "@")).toEqual({ start: 5, query: "ada" });
+  });
+
+  it("supports a multi-character trigger", () => {
+    const text = "run ::deploy";
+    expect(findTriggerQuery(text, text.length, "::")).toEqual({ start: 4, query: "deploy" });
+  });
+});
+
+describe("findTriggerQuery — line-start boundary", () => {
+  it("opens a query at the start of a line", () => {
+    const text = "/help";
+    expect(findTriggerQuery(text, text.length, "/", { boundary: "line-start" })).toEqual({
+      start: 0,
+      query: "help",
+    });
+  });
+
+  it("opens a query right after a newline", () => {
+    const text = "first line\n/help";
+    expect(findTriggerQuery(text, text.length, "/", { boundary: "line-start" })).toEqual({
+      start: 11,
+      query: "help",
+    });
+  });
+
+  it("does not open mid-line, even at a word boundary the 'word' boundary would accept", () => {
+    const text = "cd /usr";
+    expect(findTriggerQuery(text, text.length, "/", { boundary: "line-start" })).toBeNull();
+  });
+});
+
+describe("findTriggerQuery — isTriggerConsumed veto", () => {
+  it("returns null when the candidate trigger has already been consumed", () => {
+    const text = "Hi @ada";
+    const result = findTriggerQuery(text, text.length, "@", {
+      isTriggerConsumed: (start) => start === 3,
+    });
+    expect(result).toBeNull();
+  });
+
+  it("returns the candidate when isTriggerConsumed reports false", () => {
+    const text = "Hi @ada";
+    const result = findTriggerQuery(text, text.length, "@", {
+      isTriggerConsumed: () => false,
+    });
+    expect(result).toEqual({ start: 3, query: "ada" });
+  });
+});
+
+describe("replaceTriggerRun", () => {
+  it("splices the insert text over the trigger + query run", () => {
+    const text = "Hi @ada how are you";
+    const result = replaceTriggerRun(text, 3, 7, "@Ada Lovelace ");
+    expect(result.text).toBe("Hi @Ada Lovelace  how are you");
+    expect(result.caret).toBe(3 + "@Ada Lovelace ".length);
+  });
+
+  it("places the caret immediately after the inserted text", () => {
+    const result = replaceTriggerRun("/help", 0, 5, "/deploy ");
+    expect(result.text).toBe("/deploy ");
+    expect(result.caret).toBe("/deploy ".length);
+  });
+});

package/src/lib/trigger-query.ts

@@ -0,0 +1,88 @@
+/**
+ * The generic, component-agnostic half of a trigger-driven inline palette —
+ * "is the caret sitting inside a `trigger + query` run, and how do I splice a
+ * chosen result back in". Zero React, zero DOM, zero knowledge of mentions.
+ *
+ * Lifted out of `MentionInput`'s private `findQuery`/`isWordBoundary`
+ * (docs/decisions/2026-09-01-brainless-adoption-architecture.md § 5) so a second
+ * trigger-driven surface (a slash-command palette) reuses the algorithm instead
+ * of re-implementing it. `MentionInput` consumes this module unchanged — see
+ * `mention-input.tsx`.
+ */
+
+/**
+ * Where a trigger character is allowed to START a query.
+ *
+ * `"word"`       — index 0, or preceded by whitespace / "(" / "[".  (`MentionInput`'s
+ *                  behaviour, unchanged — an "@" inside an email address must not open a popup.)
+ * `"line-start"` — index 0, or preceded by "\n".  (A slash palette: "/help" opens, "cd /usr" does not.)
+ */
+export type TriggerBoundary = "word" | "line-start";
+
+/** An in-progress `trigger + query` run under the caret. */
+export interface TriggerQuery {
+  /** Offset of the trigger character in `text`. */
+  start: number;
+  /** The query WITHOUT the trigger character. */
+  query: string;
+}
+
+export interface FindTriggerQueryOptions {
+  /** @default "word" */
+  boundary?: TriggerBoundary;
+  /**
+   * Veto a candidate whose trigger character has already been consumed by a
+   * committed token — `MentionInput` passes `mentionAt(...)` here so an
+   * inserted "@Ada Lovelace" cannot re-open the popup. Omit when there are no
+   * committed tokens (a slash palette has none).
+   */
+  isTriggerConsumed?: (start: number) => boolean;
+}
+
+function isBoundary(text: string, index: number, boundary: TriggerBoundary): boolean {
+  if (index === 0) return true;
+  const previous = text[index - 1] ?? "";
+  if (boundary === "line-start") return previous === "\n";
+  return /\s/.test(previous) || previous === "(" || previous === "[";
+}
+
+/**
+ * Is the caret sitting inside a `trigger + query` run?
+ *
+ * DERIVED from committed text + caret, never intercepted at keydown — a
+ * keydown-driven trigger must `preventDefault()` every printable character and
+ * re-insert it by hand, which destroys IME composition, native undo, spellcheck
+ * and paste. Deriving means the popup opens identically whether the trigger
+ * arrived by typing, pasting, an IME commit, or a click that moved the caret
+ * back into a half-typed query.
+ */
+export function findTriggerQuery(
+  text: string,
+  caret: number,
+  trigger: string,
+  options?: FindTriggerQueryOptions,
+): TriggerQuery | null {
+  const boundary = options?.boundary ?? "word";
+
+  if (caret < trigger.length) return null;
+  const start = text.lastIndexOf(trigger, caret - trigger.length);
+  if (start < 0) return null;
+
+  const query = text.slice(start + trigger.length, caret);
+  if (/\s/.test(query)) return null;
+  if (!isBoundary(text, start, boundary)) return null;
+  if (options?.isTriggerConsumed?.(start)) return null;
+
+  return { start, query };
+}
+
+/** The plain-text half of an insert: splice `insertText` over the run, and say where the caret lands. */
+export function replaceTriggerRun(
+  text: string,
+  queryStart: number,
+  caret: number,
+  insertText: string,
+): { text: string; caret: number } {
+  const nextText = text.slice(0, queryStart) + insertText + text.slice(caret);
+  return { text: nextText, caret: queryStart + insertText.length };
+}

package/src/lib/use-controllable-state.ts

@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+
+/**
+ * Shared controlled/uncontrolled state primitive.
+ *
+ * `isControlled` is fixed by whether `controlledValue` is `undefined` on the
+ * FIRST render (the usual React contract — don't flip modes across renders).
+ * The setter always does BOTH of its jobs, unconditionally:
+ * - uncontrolled: updates the internal state (so the next render reflects it)
+ * - always: calls `onChange`, so a listener attached to an otherwise
+ *   uncontrolled component still observes every change.
+ *
+ * A hand-rolled `value ?? internal` + `onChange ? onChange(v) : setInternal(v)`
+ * ternary gets this wrong in two ways: an uncontrolled component with an
+ * `onChange` handler stops updating its own displayed value (the ternary
+ * only ever takes one branch), and clearing a controlled value to `undefined`
+ * falls through to a stale `internal` instead of showing "no value" — see
+ * Combobox/DatePicker (#reviewed 1.7).
+ */
+export function useControllableState<T>(
+  controlledValue: T | undefined,
+  defaultValue: T,
+  onChange?: (value: T) => void,
+): [T, (next: T) => void] {
+  // Locked on mount, not recomputed every render: once a caller passes a
+  // defined `value`, the component stays controlled even if a later render
+  // clears it to `undefined` (e.g. "no date selected"). Recomputing
+  // `value !== undefined` on every render would flip a cleared controlled
+  // value to the (stale) uncontrolled `internal` state instead of showing
+  // "empty" — see DateRangePicker (#reviewed 1.7).
+  const isControlledRef = useRef(controlledValue !== undefined);
+  const isControlled = isControlledRef.current;
+  const [internal, setInternal] = useState<T>(defaultValue);
+  const value = isControlled ? (controlledValue as T) : internal;
+
+  const setValue = useCallback(
+    (next: T) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange],
+  );
+
+  return [value, setValue];
+}

package/src/lib/use-mobile.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { useIsMobile } from "./use-mobile";
+
+function setViewportWidth(width: number) {
+  Object.defineProperty(window, "innerWidth", {
+    writable: true,
+    configurable: true,
+    value: width,
+  });
+}
+
+describe("useIsMobile", () => {
+  const originalInnerWidth = window.innerWidth;
+
+  afterEach(() => {
+    setViewportWidth(originalInnerWidth);
+  });
+
+  it("reports the correct value on the very first render — no desktop flash", () => {
+    setViewportWidth(500);
+    const renderedValues: boolean[] = [];
+    function Probe() {
+      const isMobile = useIsMobile();
+      renderedValues.push(isMobile);
+      return <span>{String(isMobile)}</span>;
+    }
+    render(<Probe />);
+
+    // A stale `false` in the recorded renders means the mobile viewport
+    // still rendered the desktop layout for at least one paint before the
+    // effect corrected it — i.e. a flash.
+    expect(renderedValues.length).toBeGreaterThan(0);
+    expect(renderedValues.every((value) => value === true)).toBe(true);
+    expect(screen.getByText("true")).toBeInTheDocument();
+  });
+
+  it("reports false on a desktop-width viewport", () => {
+    setViewportWidth(1280);
+    function Probe() {
+      const isMobile = useIsMobile();
+      return <span>{String(isMobile)}</span>;
+    }
+    render(<Probe />);
+    expect(screen.getByText("false")).toBeInTheDocument();
+  });
+});

package/src/lib/use-mobile.ts

@@ -1,16 +1,38 @@
-import { useEffect, useState } from "react";
+"use client";
+
+import { useSyncExternalStore } from "react";
 
 const MOBILE_BREAKPOINT = 768;
 
-/** Returns true when the viewport is below the mobile breakpoint (768px). */
-export function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
-  useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
-  return !!isMobile;
+function subscribe(breakpoint: number, onStoreChange: () => void) {
+  const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+  mql.addEventListener("change", onStoreChange);
+  return () => mql.removeEventListener("change", onStoreChange);
+}
+
+function getSnapshot(breakpoint: number) {
+  return window.innerWidth < breakpoint;
+}
+
+// SSR / first-paint snapshot: no viewport to measure yet, so report "not
+// mobile" rather than guessing — this must match what the server rendered to
+// avoid a hydration mismatch, and useSyncExternalStore re-syncs to the real
+// value on the client before paint (no desktop-layout flash).
+function getServerSnapshot() {
+  return false;
+}
+
+/**
+ * Returns true when the viewport is below `breakpoint` (default 768px, the
+ * mobile breakpoint). Additive optional argument (ADR 0035 §5) — every
+ * existing zero-arg call site is unchanged. A caller with its own threshold
+ * (e.g. `ContextRail`'s `overlayBreakpoint`) passes it directly instead of a
+ * second hook.
+ */
+export function useIsMobile(breakpoint: number = MOBILE_BREAKPOINT): boolean {
+  return useSyncExternalStore(
+    (onStoreChange) => subscribe(breakpoint, onStoreChange),
+    () => getSnapshot(breakpoint),
+    getServerSnapshot,
+  );
 }

package/src/motion.stories.tsx

@@ -235,6 +235,12 @@ export const GateFloorNeverZero: Story = {
  * additions, these resolve to defaults/none and this fails.
  */
 export const UtilitiesGenerated: Story = {
+  // The suite runs under `prefers-reduced-motion: reduce`
+  // (`apps/docs/vitest.config.ts`, #125), which collapses the CSS gate to its
+  // floor. This assertion is ABOUT the full-motion scale, so the story opts
+  // back in explicitly — `data-motion-pref="full"` is the documented
+  // informed-consent override that beats the OS rule.
+  globals: { motionPref: "full" },
   render: () => (
     <div>
       <span data-testid="util-fast" className="transition-opacity duration-fast ease-standard" />

package/src/templates-object-detail-hub.stories.tsx

@@ -209,7 +209,7 @@ function PipelineList({
                   onClick={() => onSelect(p.id)}
                   className={[
                     "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-start transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "focus-ring",
                     selected ? "bg-primary/10 text-foreground" : "hover:bg-surface-muted",
                   ].join(" ")}
                 >
@@ -449,7 +449,7 @@ const meta = {
     docs: {
       description: {
         component:
-          "The canonical master-detail enterprise screen: a searchable object list (SplitPanel `start`) drives a detail HUB (`end`) with a sticky SectionHeader identity + status, a ButtonGroup toolbar, Tabs for the object's sections (Overview / Activity / Settings), Descriptions for attributes, a related-runs list, and a high-value Run task promoted to its own Dialog. Selecting nothing shows a real StatePanel empty state. Compose-only from @elabs-ai/components-* primitives; semantic tokens only; reads in all three themes.",
+          "The canonical master-detail enterprise screen: a searchable object list (SplitPanel `start`) drives a detail HUB (`end`) with a sticky SectionHeader identity + status, a ButtonGroup toolbar, Tabs for the object's sections (Overview / Activity / Settings), Descriptions for attributes, a related-runs list, and a high-value Run task promoted to its own Dialog. Selecting nothing shows a real StatePanel empty state. Compose-only from @elabs-ai/components-* primitives; semantic tokens only; reads in every theme.",
       },
     },
   },

package/src/templates-screen-states.stories.tsx

@@ -14,8 +14,8 @@
  *   • Error     — StatePanel kind="error" with a retry action (role="alert").
  *   • FirstRun  — onboarding empty: illustration slot + one sentence + one CTA.
  *
- * Compose-only from @elabs-ai/components-* primitives; semantic tokens only; reads in all
- * three themes. Verify with globals=theme:<slug>.
+ * Compose-only from @elabs-ai/components-* primitives; semantic tokens only; reads in
+ * every theme. Verify with globals=theme:<slug>.
  */
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Inbox, Plus, RotateCcw, Search, UploadCloud, UserPlus } from "lucide-react";
@@ -210,8 +210,8 @@ function CustomersScreen({ state = "ready" }: { state?: ScreenState }) {
         {state === "error" && (
           <StatePanel
             kind="error"
-            title="Couldn't load customers"
-            description="The billing service didn't respond. Your data is safe — this is a display error."
+            title="Couldn’t load customers"
+            description="The billing service didn’t respond. Your data is safe — this is a display error."
             actions={
               <Button variant="outline" size="sm" onClick={() => toast.success("Retrying…")}>
                 <RotateCcw className="size-4" aria-hidden="true" />
@@ -273,7 +273,7 @@ const meta = {
     docs: {
       description: {
         component:
-          'One representative data screen (Customers) rendered across the FULL state grid — Ready, Loading, Empty, Error, FirstRun — with the same chrome and the real state primitives (Table, Skeleton, StatePanel kind="empty"|"error"). This is the design-first state grid that the Patterns/Templates examples omit. Semantic tokens only; reads in all three themes.',
+          'One representative data screen (Customers) rendered across the FULL state grid — Ready, Loading, Empty, Error, FirstRun — with the same chrome and the real state primitives (Table, Skeleton, StatePanel kind="empty"|"error"). This is the design-first state grid that the Patterns/Templates examples omit. Semantic tokens only; reads in every theme.',
       },
     },
   },

package/src/templates-settings.stories.tsx

@@ -3,7 +3,7 @@
  * (app-shell + Descriptions + Wizard). This story is the single source of
  * truth: `pnpm gen:templates` derives the consumer template source
  * (`docs/playbooks/templates/settings.tsx`) from it.
- * Verify across all three themes with globals=theme:<slug>.
+ * Verify across every theme with globals=theme:<slug>.
  */
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";

package/src/blocks/sidebar-02/app-sidebar.tsx

@@ -1,160 +0,0 @@
-/** sidebar-02 — dashboard sidebar (copy-owned block). Adapted from blocks.so
- *  (ephraim duncan). framer-motion removed (plain fade); next/link -> <a>. */
-"use client";
-
-import {
-  Activity,
-  DollarSign,
-  Home,
-  Infinity as InfinityIcon,
-  Link as LinkIcon,
-  Package2,
-  Percent,
-  PieChart,
-  Settings,
-  ShoppingBag,
-  Sparkles,
-  Store,
-  TrendingUp,
-  Users,
-} from "lucide-react";
-import { AppSidebar, SidebarTrigger, cn, useSidebar } from "@elabs-ai/components-ui";
-import { Logo } from "./logo";
-import DashboardNavigation, { type Route } from "./nav-main";
-import { NotificationsPopover } from "./nav-notifications";
-import { TeamSwitcher } from "./team-switcher";
-
-const sampleNotifications = [
-  {
-    id: "1",
-    fallback: "OM",
-    text: "New order received.",
-    time: "10m ago",
-  },
-  {
-    id: "2",
-    fallback: "JL",
-    text: "Server upgrade completed.",
-    time: "1h ago",
-  },
-  {
-    id: "3",
-    fallback: "HH",
-    text: "New user signed up.",
-    time: "2h ago",
-  },
-];
-
-const dashboardRoutes: Route[] = [
-  { id: "home", title: "Home", icon: <Home className="size-4" />, link: "#" },
-  {
-    id: "products",
-    title: "Products",
-    icon: <Package2 className="size-4" />,
-    link: "#",
-    subs: [
-      { title: "Catalogue", link: "#" },
-      { title: "Checkout Links", link: "#" },
-      { title: "Discounts", link: "#" },
-    ],
-  },
-  {
-    id: "usage-billing",
-    title: "Usage Billing",
-    icon: <PieChart className="size-4" />,
-    link: "#",
-    subs: [
-      { title: "Meters", link: "#" },
-      { title: "Events", link: "#" },
-    ],
-  },
-  { id: "benefits", title: "Benefits", icon: <Sparkles className="size-4" />, link: "#" },
-  { id: "customers", title: "Customers", icon: <Users className="size-4" />, link: "#" },
-  {
-    id: "sales",
-    title: "Sales",
-    icon: <ShoppingBag className="size-4" />,
-    link: "#",
-    subs: [
-      { title: "Orders", link: "#" },
-      { title: "Subscriptions", link: "#" },
-    ],
-  },
-  { id: "storefront", title: "Storefront", icon: <Store className="size-4" />, link: "#" },
-  { id: "analytics", title: "Analytics", icon: <TrendingUp className="size-4" />, link: "#" },
-  {
-    id: "finance",
-    title: "Finance",
-    icon: <DollarSign className="size-4" />,
-    link: "#",
-    subs: [
-      { title: "Incoming", link: "#" },
-      { title: "Outgoing", link: "#" },
-      { title: "Payout Account", link: "#" },
-    ],
-  },
-  {
-    id: "settings",
-    title: "Settings",
-    icon: <Settings className="size-4" />,
-    link: "#",
-    subs: [
-      { title: "General", link: "#" },
-      { title: "Webhooks", link: "#" },
-      { title: "Custom Fields", link: "#" },
-    ],
-  },
-];
-
-// Reference icons retained for parity with the source data shape.
-void Activity;
-void InfinityIcon;
-void LinkIcon;
-void Percent;
-
-const teams = [
-  { name: "Alpha Inc.", logo: Logo, plan: "Free" },
-  { name: "Beta Corp.", logo: Logo, plan: "Free" },
-  { name: "Gamma Tech", logo: Logo, plan: "Free" },
-];
-
-export function DashboardSidebar() {
-  const { state } = useSidebar();
-  const isCollapsed = state === "collapsed";
-
-  const header = (
-    <div
-      className={cn(
-        "flex md:pt-3.5",
-        isCollapsed
-          ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
-          : "flex-row items-center justify-between",
-      )}
-    >
-      <a href="#" className="flex items-center gap-2">
-        <Logo className="h-8 w-8" />
-        {!isCollapsed && <span className="font-semibold text-foreground">Acme</span>}
-      </a>
-      <div
-        className={cn(
-          "flex items-center gap-2 animate-in fade-in",
-          isCollapsed ? "flex-row md:flex-col-reverse" : "flex-row",
-        )}
-      >
-        <NotificationsPopover notifications={sampleNotifications} />
-        <SidebarTrigger />
-      </div>
-    </div>
-  );
-
-  return (
-    <AppSidebar
-      variant="inset"
-      collapsible="icon"
-      header={header}
-      footer={<TeamSwitcher teams={teams} />}
-    >
-      <DashboardNavigation routes={dashboardRoutes} className="gap-4 px-2 py-4" />
-    </AppSidebar>
-  );
-}

package/src/blocks/sidebar-02/logo.tsx

@@ -1,18 +0,0 @@
-/** sidebar-02 — Acme logo mark (copy-owned block). */
-import type { SVGProps } from "react";
-
-export const Logo = (props: SVGProps<SVGSVGElement>) => (
-  <svg fill="currentColor" height="48" viewBox="0 0 40 48" width="40" {...props}>
-    <clipPath id="acme-a">
-      <path d="m0 0h40v48h-40z" />
-    </clipPath>
-    <g clipPath="url(#acme-a)">
-      <path d="m25.0887 5.05386-3.933-1.05386-3.3145 12.3696-2.9923-11.16736-3.9331 1.05386 3.233 12.0655-8.05262-8.0526-2.87919 2.8792 8.83271 8.8328-10.99975-2.9474-1.05385625 3.933 12.01860625 3.2204c-.1376-.5935-.2104-1.2119-.2104-1.8473 0-4.4976 3.646-8.1436 8.1437-8.1436 4.4976 0 8.1436 3.646 8.1436 8.1436 0 .6313-.0719 1.2459-.2078 1.8359l10.9227 2.9267 1.0538-3.933-12.0664-3.2332 11.0005-2.9476-1.0539-3.933-12.0659 3.233 8.0526-8.0526-2.8792-2.87916-8.7102 8.71026z" />
-      <path d="m27.8723 26.2214c-.3372 1.4256-1.0491 2.7063-2.0259 3.7324l7.913 7.9131 2.8792-2.8792z" />
-      <path d="m25.7665 30.0366c-.9886 1.0097-2.2379 1.7632-3.6389 2.1515l2.8794 10.746 3.933-1.0539z" />
-      <path d="m21.9807 32.2274c-.65.1671-1.3313.2559-2.0334.2559-.7522 0-1.4806-.102-2.1721-.2929l-2.882 10.7558 3.933 1.0538z" />
-      <path d="m17.6361 32.1507c-1.3796-.4076-2.6067-1.1707-3.5751-2.1833l-7.9325 7.9325 2.87919 2.8792z" />
-      <path d="m13.9956 29.8973c-.9518-1.019-1.6451-2.2826-1.9751-3.6862l-10.95836 2.9363 1.05385 3.933z" />
-    </g>
-  </svg>
-);

package/src/blocks/sidebar-02/nav-main.tsx

@@ -1,13 +0,0 @@
-/**
- * sidebar-02 — primary navigation.
- * Re-exports the shared `NavMain` primitive from `@elabs-ai/components-ui` so this block
- * no longer maintains its own copy (issue #99).
- *
- * The block-local alias `DashboardNavigation` is preserved for back-compat
- * so `app-sidebar.tsx` does not need to change its import name.
- */
-export { NavMain as default, NavMain as DashboardNavigation } from "@elabs-ai/components-ui";
-export type {
-  NavMainProps as DashboardNavigationProps,
-  NavMainRoute as Route,
-} from "@elabs-ai/components-ui";

package/src/blocks/sidebar-02/nav-notifications.tsx

@@ -1,7 +0,0 @@
-/**
- * sidebar-02 — notifications popover.
- * Re-exports the shared `NavNotifications` primitive from `@elabs-ai/components-ui` so this
- * block no longer maintains its own copy (issue #99).
- */
-export { NavNotifications as NotificationsPopover } from "@elabs-ai/components-ui";
-export type { NavNotificationsProps, NavNotification } from "@elabs-ai/components-ui";

package/src/blocks/sidebar-02/sidebar-02.stories.tsx

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { SidebarInset, SidebarProvider } from "@elabs-ai/components-ui";
-import { DashboardSidebar } from "./app-sidebar";
-
-const meta = {
-  title: "Layout/App Shell/Dashboard",
-  parameters: { layout: "fullscreen" },
-} satisfies Meta;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <SidebarProvider>
-      <div className="relative flex h-dvh w-full">
-        <DashboardSidebar />
-        <SidebarInset className="flex flex-col p-6 text-body text-muted-foreground">
-          Dashboard content area (collapsible icon sidebar — press ⌘/Ctrl+B).
-        </SidebarInset>
-      </div>
-    </SidebarProvider>
-  ),
-};

package/src/blocks/sidebar-02/team-switcher.tsx

@@ -1,7 +0,0 @@
-/**
- * sidebar-02 — team switcher.
- * Re-exports the shared `TeamSwitcher` primitive from `@elabs-ai/components-ui` so this block
- * no longer maintains its own copy (issue #99).
- */
-export { TeamSwitcher } from "@elabs-ai/components-ui";
-export type { TeamSwitcherProps, TeamSwitcherTeam } from "@elabs-ai/components-ui";