@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/layouts/documentation-workspace/documentation-workspace.tsx

@@ -0,0 +1,34 @@
+import { BookOpenIcon } from 'lucide-react'
+
+import { MainWorkspace, type MainWorkspaceProps } from '../main-workspace'
+
+export type DocumentationWorkspaceProps = MainWorkspaceProps
+
+/** Shared MDI workspace defaults for documentation and knowledge applications. */
+export function DocumentationWorkspace({
+  applicationIcon = BookOpenIcon,
+  applicationId = 'docs',
+  applicationName = 'Docs',
+  primaryAction = null,
+  searchPlaceholder = 'Search documentation',
+  sidebarContentClassName = 'docs-sidebar-scroll',
+  sidebarStateKey = `codexsun.${applicationId}.sidebar`,
+  statusLabel = 'Ready',
+  workspaceTitle = 'Documentation',
+  ...props
+}: DocumentationWorkspaceProps) {
+  return (
+    <MainWorkspace
+      {...props}
+      applicationIcon={applicationIcon}
+      applicationId={applicationId}
+      applicationName={applicationName}
+      primaryAction={primaryAction}
+      searchPlaceholder={searchPlaceholder}
+      sidebarContentClassName={sidebarContentClassName}
+      sidebarStateKey={sidebarStateKey}
+      statusLabel={statusLabel}
+      workspaceTitle={workspaceTitle}
+    />
+  )
+}

package/src/layouts/documentation-workspace/index.ts

@@ -0,0 +1 @@
+export { DocumentationWorkspace, type DocumentationWorkspaceProps } from './documentation-workspace'

package/src/layouts/ecommerce-header/ecommerce-actions.tsx

@@ -0,0 +1,89 @@
+import { HeartIcon, ShoppingBagIcon, UserIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { Button } from "../../components/button";
+import type { EcommerceHeaderActions } from "./ecommerce-header-types";
+
+type EcommerceActionsProps = {
+  actions?: EcommerceHeaderActions;
+};
+
+export function EcommerceActions({ actions }: EcommerceActionsProps) {
+  const cartCount = actions?.cartCount ?? 0;
+  const wishlistCount = actions?.wishlistCount ?? 0;
+
+  return (
+    <div className="flex items-center gap-1.5 sm:gap-2">
+      <CountAction count={wishlistCount} label="Wishlist" onClick={actions?.onWishlistClick}>
+        <HeartIcon className="size-5" />
+      </CountAction>
+      <CartAction actions={actions} count={cartCount} />
+      <Button
+        aria-label="User account"
+        className="px-2.5 text-muted-foreground hover:text-foreground"
+        size="sm"
+        variant="ghost"
+        onClick={actions?.onAccountClick}
+      >
+        <UserIcon className="size-5" />
+        <span className="ml-1.5 hidden text-xs font-medium xl:inline-block">Account</span>
+      </Button>
+    </div>
+  );
+}
+
+function CountAction({
+  children,
+  count,
+  label,
+  onClick,
+}: {
+  children: ReactNode;
+  count: number;
+  label: string;
+  onClick?: () => void;
+}) {
+  return (
+    <Button
+      aria-label={label}
+      className="relative px-2.5 text-muted-foreground hover:text-foreground"
+      size="sm"
+      variant="ghost"
+      onClick={onClick}
+    >
+      {children}
+      {count > 0 ? (
+        <span className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-rose-600 text-[10px] font-bold text-white">
+          {count > 99 ? "99+" : count}
+        </span>
+      ) : null}
+      <span className="ml-1.5 hidden text-xs font-medium xl:inline-block">{label}</span>
+    </Button>
+  );
+}
+
+function CartAction({ actions, count }: { actions?: EcommerceHeaderActions; count: number }) {
+  return (
+    <Button
+      aria-label="Shopping cart"
+      className="relative gap-2 px-3 shadow-xs"
+      size="sm"
+      onClick={actions?.onCartClick}
+    >
+      <span className="relative">
+        <ShoppingBagIcon className="size-4" />
+        {count > 0 ? (
+          <span className="absolute -top-2 -right-2 flex size-4 items-center justify-center rounded-full bg-accent text-[10px] font-bold text-accent-foreground">
+            {count > 99 ? "99+" : count}
+          </span>
+        ) : null}
+      </span>
+      <span className="flex flex-col items-start text-left leading-none">
+        <span className="text-xs font-semibold">Cart</span>
+        {actions?.cartSubtotal ? (
+          <span className="text-[10px] font-medium opacity-90">{actions.cartSubtotal}</span>
+        ) : null}
+      </span>
+    </Button>
+  );
+}

package/src/layouts/ecommerce-header/ecommerce-announcement.tsx

@@ -0,0 +1,43 @@
+import { SparklesIcon } from "lucide-react";
+
+import type { EcommerceHeaderProps } from "./ecommerce-header-types";
+
+type EcommerceAnnouncementProps = {
+  announcement: NonNullable<EcommerceHeaderProps["announcement"]>;
+};
+
+export function EcommerceAnnouncement({ announcement }: EcommerceAnnouncementProps) {
+  const progress = Math.min(100, Math.max(0, announcement.freeShippingProgress ?? 75));
+
+  return (
+    <div className="relative border-b border-border/40 bg-muted/60 px-4 py-1.5 text-xs text-muted-foreground">
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <div className="flex items-center gap-2">
+          <SparklesIcon className="size-3.5 text-primary" />
+          <span>{announcement.message}</span>
+          {announcement.actionLabel ? (
+            <a
+              className="font-semibold text-primary underline underline-offset-2 hover:opacity-80"
+              href={announcement.actionHref ?? "#"}
+            >
+              {announcement.actionLabel}
+            </a>
+          ) : null}
+        </div>
+        {announcement.showFreeShippingMeter ? <ShippingMeter progress={progress} /> : null}
+      </div>
+    </div>
+  );
+}
+
+function ShippingMeter({ progress }: { progress: number }) {
+  return (
+    <div className="hidden items-center gap-2 sm:flex">
+      <span>Free shipping on orders over $50</span>
+      <div className="h-1.5 w-24 overflow-hidden rounded-full bg-border">
+        <div className="h-full bg-primary transition-all duration-300" style={{ width: `${progress}%` }} />
+      </div>
+      <span className="font-semibold text-foreground">{progress}%</span>
+    </div>
+  );
+}

package/src/layouts/ecommerce-header/ecommerce-drawer.tsx

@@ -0,0 +1,97 @@
+import { MenuIcon, SearchIcon, ShoppingBagIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Badge } from "../../components/badge";
+import { Button } from "../../components/button";
+import type { EcommerceCategoryItem, EcommerceHeaderActions } from "./ecommerce-header-types";
+
+type EcommerceDrawerProps = {
+  actions?: EcommerceHeaderActions;
+  brandTitle: string;
+  cartCount: number;
+  categories: readonly EcommerceCategoryItem[];
+};
+
+export function EcommerceDrawer({ actions, brandTitle, cartCount, categories }: EcommerceDrawerProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+
+  return (
+    <>
+      <Button
+        aria-label="Open storefront navigation"
+        className="size-9 md:hidden"
+        size="icon"
+        variant="ghost"
+        onClick={() => setOpen(true)}
+      >
+        <MenuIcon className="size-5" />
+      </Button>
+      {open ? (
+        <DrawerPanel
+          actions={actions}
+          brandTitle={brandTitle}
+          cartCount={cartCount}
+          categories={categories}
+          query={query}
+          onClose={() => setOpen(false)}
+          onQueryChange={setQuery}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function DrawerPanel({
+  actions,
+  brandTitle,
+  cartCount,
+  categories,
+  query,
+  onClose,
+  onQueryChange,
+}: EcommerceDrawerProps & { query: string; onClose: () => void; onQueryChange: (value: string) => void }) {
+  return (
+    <div className="fixed inset-0 z-50 flex bg-background/80 backdrop-blur-sm md:hidden">
+      <div className="flex w-full max-w-xs flex-col justify-between border-r border-border/80 bg-background p-6 shadow-2xl">
+        <div className="space-y-6">
+          <div className="flex items-center justify-between">
+            <span className="text-lg font-bold">{brandTitle}</span>
+            <Button aria-label="Close storefront navigation" size="icon" variant="ghost" onClick={onClose}>
+              <XIcon className="size-5" />
+            </Button>
+          </div>
+          <div className="flex items-center rounded-lg border border-input bg-muted/40 px-3 py-1.5">
+            <SearchIcon className="mr-2 size-4 text-muted-foreground" />
+            <input
+              className="w-full bg-transparent text-sm focus:outline-none"
+              placeholder="Search store..."
+              type="search"
+              value={query}
+              onChange={(event) => onQueryChange(event.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <p className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">Categories</p>
+            {categories.map((category) => (
+              <a
+                className="flex items-center justify-between rounded-lg p-2 text-sm font-medium text-foreground hover:bg-muted"
+                href={category.href}
+                key={category.id}
+              >
+                <span>{category.label}</span>
+                {category.isHot ? <Badge variant="destructive">Hot</Badge> : null}
+              </a>
+            ))}
+          </div>
+        </div>
+        <div className="space-y-2 border-t border-border pt-6">
+          <Button className="w-full gap-2" onClick={actions?.onCartClick}>
+            <ShoppingBagIcon className="size-4" />
+            <span>View Cart ({cartCount})</span>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/layouts/ecommerce-header/ecommerce-header-types.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+
+export type EcommerceCurrency = {
+  readonly code: string;
+  readonly label: string;
+  readonly symbol: string;
+};
+
+export type EcommerceCategoryItem = {
+  readonly href: string;
+  readonly icon?: ReactNode;
+  readonly id: string;
+  readonly isHot?: boolean;
+  readonly isNew?: boolean;
+  readonly label: string;
+  readonly subcategories?: readonly {
+    readonly description?: string;
+    readonly href: string;
+    readonly label: string;
+  }[];
+};
+
+export type EcommerceHeaderActions = {
+  readonly cartCount?: number;
+  readonly cartSubtotal?: string;
+  readonly currency?: string;
+  readonly isSearching?: boolean;
+  readonly onAccountClick?: () => void;
+  readonly onCartClick?: () => void;
+  readonly onCurrencyChange?: (currency: string) => void;
+  readonly onSearch?: (query: string) => void;
+  readonly onWishlistClick?: () => void;
+  readonly wishlistCount?: number;
+};
+
+export type EcommerceHeaderProps = {
+  readonly actions?: EcommerceHeaderActions;
+  readonly announcement?: {
+    readonly actionHref?: string;
+    readonly actionLabel?: string;
+    readonly freeShippingProgress?: number;
+    readonly message: string;
+    readonly showFreeShippingMeter?: boolean;
+  };
+  readonly brand: {
+    readonly href?: string;
+    readonly logo?: ReactNode;
+    readonly title: string;
+  };
+  readonly categories?: readonly EcommerceCategoryItem[];
+  readonly className?: string;
+  readonly popularSearches?: readonly string[];
+  readonly quickLinks?: readonly {
+    readonly badge?: string;
+    readonly href: string;
+    readonly label: string;
+  }[];
+  readonly supportPhone?: string;
+};

package/src/layouts/ecommerce-header/ecommerce-header.tsx

@@ -0,0 +1,47 @@
+import { cn } from "../../lib/utils";
+
+import { EcommerceActions } from "./ecommerce-actions";
+import { EcommerceAnnouncement } from "./ecommerce-announcement";
+import { EcommerceDrawer } from "./ecommerce-drawer";
+import { EcommerceNavigation } from "./ecommerce-navigation";
+import { EcommerceSearch } from "./ecommerce-search";
+import type { EcommerceHeaderProps } from "./ecommerce-header-types";
+
+const defaultSearches = ["Wireless Earbuds", "Mechanical Keyboard", "Ergonomic Desk", "Smart Watch"];
+const defaultLinks = [
+  { badge: "Hot", href: "#deals", label: "Flash Deals" },
+  { href: "#bestsellers", label: "Best Sellers" },
+  { href: "#new", label: "New Arrivals" },
+  { href: "#brands", label: "Featured Brands" },
+];
+
+export function EcommerceHeader({
+  actions,
+  announcement,
+  brand,
+  categories = [],
+  className,
+  popularSearches = defaultSearches,
+  quickLinks = defaultLinks,
+  supportPhone = "1-800-CODEXSUN",
+}: EcommerceHeaderProps) {
+  const cartCount = actions?.cartCount ?? 0;
+
+  return (
+    <header className={cn("w-full border-b border-border/80 bg-background/95 backdrop-blur-md", className)}>
+      {announcement ? <EcommerceAnnouncement announcement={announcement} /> : null}
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-3.5">
+        <div className="flex items-center gap-3">
+          <EcommerceDrawer actions={actions} brandTitle={brand.title} cartCount={cartCount} categories={categories} />
+          <a className="flex items-center gap-2.5 focus-visible:outline-none" href={brand.href ?? "/"}>
+            {brand.logo}
+            <span className="text-xl font-bold tracking-tight text-foreground">{brand.title}</span>
+          </a>
+        </div>
+        <EcommerceSearch actions={actions} popularSearches={popularSearches} />
+        <EcommerceActions actions={actions} />
+      </div>
+      <EcommerceNavigation categories={categories} quickLinks={quickLinks} supportPhone={supportPhone} />
+    </header>
+  );
+}

package/src/layouts/ecommerce-header/ecommerce-navigation.tsx

@@ -0,0 +1,98 @@
+import { ChevronDownIcon, PhoneCallIcon } from "lucide-react";
+
+import { Badge } from "../../components/badge";
+import type { EcommerceCategoryItem, EcommerceHeaderProps } from "./ecommerce-header-types";
+
+type EcommerceNavigationProps = {
+  categories: readonly EcommerceCategoryItem[];
+  quickLinks: NonNullable<EcommerceHeaderProps["quickLinks"]>;
+  supportPhone?: string;
+};
+
+export function EcommerceNavigation({ categories, quickLinks, supportPhone }: EcommerceNavigationProps) {
+  return (
+    <div className="border-t border-border/40 bg-muted/20 px-4 py-1.5 text-xs">
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-4">
+        <div className="no-scrollbar flex items-center gap-1 overflow-x-auto py-0.5">
+          {categories.map((category) => (
+            <CategoryMenu category={category} key={category.id} />
+          ))}
+          <div className="mx-1.5 h-4 w-px bg-border/60" />
+          {quickLinks.map((link) => (
+            <QuickLink href={link.href} key={link.label} label={link.label} badge={link.badge} />
+          ))}
+        </div>
+        {supportPhone ? <SupportPhone value={supportPhone} /> : null}
+      </div>
+    </div>
+  );
+}
+
+function CategoryMenu({ category }: { category: EcommerceCategoryItem }) {
+  return (
+    <div className="group relative">
+      <a
+        className="flex items-center gap-1.5 rounded-md px-2.5 py-1 font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground group-hover:bg-muted group-hover:text-primary"
+        href={category.href}
+      >
+        {category.icon}
+        <span>{category.label}</span>
+        {category.subcategories?.length ? <ChevronDownIcon className="size-3 text-muted-foreground" /> : null}
+        {category.isHot ? (
+          <Badge className="h-4 px-1 text-[9px] font-bold uppercase" variant="destructive">
+            Hot
+          </Badge>
+        ) : null}
+      </a>
+      {category.subcategories?.length ? <SubcategoryMenu category={category} /> : null}
+    </div>
+  );
+}
+
+function SubcategoryMenu({ category }: { category: EcommerceCategoryItem }) {
+  return (
+    <div className="animate-in fade-in-0 zoom-in-95 invisible absolute top-full left-0 z-50 mt-1 w-64 rounded-xl border border-border/80 bg-popover p-3 opacity-0 shadow-xl transition-opacity group-hover:visible group-hover:opacity-100">
+      <p className="mb-2 text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">
+        {category.label} subcategories
+      </p>
+      <div className="space-y-1">
+        {category.subcategories?.map((subcategory) => (
+          <a
+            className="flex flex-col rounded-lg p-1.5 text-foreground transition-colors hover:bg-muted"
+            href={subcategory.href}
+            key={subcategory.label}
+          >
+            <span className="text-xs font-medium">{subcategory.label}</span>
+            {subcategory.description ? (
+              <span className="text-[10px] text-muted-foreground">{subcategory.description}</span>
+            ) : null}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function QuickLink({ badge, href, label }: { badge?: string; href: string; label: string }) {
+  return (
+    <a
+      className="flex items-center gap-1 whitespace-nowrap rounded-md px-2 py-1 font-medium text-muted-foreground transition-colors hover:text-foreground"
+      href={href}
+    >
+      <span>{label}</span>
+      {badge ? (
+        <span className="rounded bg-rose-500/10 px-1 py-0.5 text-[9px] font-semibold text-rose-500">{badge}</span>
+      ) : null}
+    </a>
+  );
+}
+
+function SupportPhone({ value }: { value: string }) {
+  return (
+    <div className="hidden shrink-0 items-center gap-1.5 text-muted-foreground lg:flex">
+      <PhoneCallIcon className="size-3.5 text-primary" />
+      <span>Need help?</span>
+      <span className="font-semibold text-foreground">{value}</span>
+    </div>
+  );
+}

package/src/layouts/ecommerce-header/ecommerce-search.tsx

@@ -0,0 +1,86 @@
+import { SearchIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "../../components/button";
+import { cn } from "../../lib/utils";
+import type { EcommerceHeaderActions } from "./ecommerce-header-types";
+
+type EcommerceSearchProps = {
+  actions?: EcommerceHeaderActions;
+  popularSearches: readonly string[];
+};
+
+export function EcommerceSearch({ actions, popularSearches }: EcommerceSearchProps) {
+  const [query, setQuery] = useState("");
+  const [focused, setFocused] = useState(false);
+
+  function search(value = query) {
+    actions?.onSearch?.(value);
+  }
+
+  return (
+    <div className="relative hidden max-w-xl flex-1 md:flex">
+      <div
+        className={cn(
+          "flex w-full items-center rounded-xl border border-input bg-muted/30 px-3 py-1.5 transition-all",
+          focused && "border-ring bg-background ring-2 ring-ring/20",
+        )}
+      >
+        <SearchIcon className="mr-2 size-4 shrink-0 text-muted-foreground" />
+        <input
+          className="w-full bg-transparent text-sm placeholder:text-muted-foreground focus:outline-none"
+          placeholder="Search products, brands, categories..."
+          type="search"
+          value={query}
+          onBlur={() => setTimeout(() => setFocused(false), 200)}
+          onChange={(event) => setQuery(event.target.value)}
+          onFocus={() => setFocused(true)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") search();
+          }}
+        />
+        {query ? <ClearSearch onClear={() => setQuery("")} /> : null}
+        <Button className="h-7 px-3 text-xs" size="sm" onClick={() => search()}>
+          Search
+        </Button>
+      </div>
+      {focused ? (
+        <SearchSuggestions
+          items={popularSearches}
+          onSelect={(item) => {
+            setQuery(item);
+            search(item);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function ClearSearch({ onClear }: { onClear: () => void }) {
+  return (
+    <button className="mr-1 text-muted-foreground hover:text-foreground" type="button" onClick={onClear}>
+      <XIcon className="size-3.5" />
+    </button>
+  );
+}
+
+function SearchSuggestions({ items, onSelect }: { items: readonly string[]; onSelect: (item: string) => void }) {
+  return (
+    <div className="animate-in fade-in-0 zoom-in-95 absolute top-full right-0 left-0 z-50 mt-1.5 rounded-xl border border-border/80 bg-popover p-3 shadow-xl">
+      <p className="mb-2 text-[11px] font-semibold tracking-wider text-muted-foreground uppercase">Popular searches</p>
+      <div className="flex flex-wrap gap-1.5">
+        {items.map((item) => (
+          <button
+            key={item}
+            className="rounded-lg bg-muted px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-primary/10 hover:text-primary"
+            type="button"
+            onClick={() => onSelect(item)}
+          >
+            {item}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/layouts/ecommerce-header/index.ts

@@ -0,0 +1,2 @@
+export * from "./ecommerce-header";
+export * from "./ecommerce-header-types";

package/src/layouts/main-workspace/index.ts

@@ -0,0 +1,28 @@
+export { MainWorkspace, type MainWorkspaceProps } from '../mdi-main/mdi-main'
+export { createDefaultMdiApps } from '../mdi-main/mdi-app-catalog'
+export { MdiNotificationsMenu } from '../mdi-main/mdi-notifications-menu'
+export { MdiAppSwitcher } from '../mdi-main/mdi-app-switcher'
+export { MdiFeatureSettings } from '../mdi-main/mdi-feature-settings'
+export { MdiGlobalSearch } from '../mdi-main/mdi-global-search'
+export { MdiProfileMenu } from '../mdi-main/mdi-profile-menu'
+export { MdiSidebar } from '../mdi-main/mdi-sidebar'
+export { MdiStatusBar } from '../mdi-main/mdi-status-bar'
+export { MdiTopMenu } from '../mdi-main/mdi-top-menu'
+export { mdiTopologySections, useMdiTopology } from '../mdi-main/mdi-topology'
+export type { MdiCanvas, MdiDensity } from '../mdi-main/mdi-tweak-panel'
+export type {
+  MdiAppItem,
+  MdiFeatureKey,
+  MdiFeatures,
+  MdiNavigationItem,
+  MdiNavigationSection,
+  MdiNotification,
+  MdiPrimaryAction,
+  MdiSettingsContentProps,
+  MdiUser,
+} from '../mdi-main/mdi-types'
+export type {
+  AgentWorkspaceProps,
+  AgentWorkspaceRail,
+  AgentWorkspaceRailItem,
+} from '../agent-workspace'

package/src/layouts/mdi/index.ts

@@ -0,0 +1 @@
+export { Mdi, type MdiProps } from "./mdi";

package/src/layouts/mdi/mdi.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/utils";
+
+export type MdiProps = {
+  children?: ReactNode;
+  className?: string;
+  label?: string;
+};
+
+export function Mdi({ children, className, label = "MDI" }: MdiProps) {
+  return (
+    <section
+      aria-label={label}
+      className={cn("grid size-full min-h-0 place-items-center bg-background text-foreground", className)}
+    >
+      {children ?? <span className="text-sm font-medium text-muted-foreground">{label}</span>}
+    </section>
+  );
+}

package/src/layouts/mdi-main/index.ts

@@ -0,0 +1,27 @@
+export { createDefaultMdiApps } from './mdi-app-catalog'
+export { MdiNotificationsMenu } from './mdi-notifications-menu'
+export { MdiAppSwitcher } from './mdi-app-switcher'
+export { MdiFeatureSettings } from './mdi-feature-settings'
+export { MdiGlobalSearch } from './mdi-global-search'
+export { MdiProfileMenu } from './mdi-profile-menu'
+export { MdiSidebar } from './mdi-sidebar'
+export { MdiStatusBar } from './mdi-status-bar'
+export { MdiTopMenu } from './mdi-top-menu'
+export { mdiTopologySections, useMdiTopology } from './mdi-topology'
+export type { MdiCanvas, MdiDensity } from './mdi-tweak-panel'
+export type {
+  MdiAppItem,
+  MdiFeatureKey,
+  MdiFeatures,
+  MdiNavigationItem,
+  MdiNavigationSection,
+  MdiNotification,
+  MdiPrimaryAction,
+  MdiSettingsContentProps,
+  MdiUser,
+} from './mdi-types'
+export type {
+  AgentWorkspaceProps,
+  AgentWorkspaceRail,
+  AgentWorkspaceRailItem,
+} from '../agent-workspace'