/* eslint-disable */
// Shared shell components for Receipt Analytics mockups
// Exposes: Icon, AppShell, TopBar, Sidebar, FilterBar, KPICard, Card, Delta,
// SectionTitle, Tag, Avatar, tokens, fmt

const { useState, useEffect, useMemo, useRef } = React;

/* ---------- tokens ---------- */
const tokens = {
  brand: "#4F46E5",      // indigo-600
  brandSoft: "#EEF2FF",  // indigo-50
  brandRing: "#C7D2FE",  // indigo-200
  ok: "#10B981",
  bad: "#EF4444",
  warn: "#F59E0B",
  ink: "#0B0B12",
  // grayscale for competitor charts
  gray: ["#E5E7EB", "#D1D5DB", "#9CA3AF", "#6B7280", "#4B5563", "#374151", "#1F2937"],
};

/* ---------- formatters ---------- */
const fmt = {
  int: (n) => new Intl.NumberFormat("ro-RO").format(Math.round(n)),
  lei: (n) => new Intl.NumberFormat("ro-RO").format(Math.round(n)) + " LEI",
  leiK: (n) => {
    if (n >= 1_000_000) return (n / 1_000_000).toFixed(2).replace(/\.0+$/, "") + "M LEI";
    if (n >= 1000) return Math.round(n / 1000) + "K LEI";
    return Math.round(n) + " LEI";
  },
  pct: (n, d = 0) => (Math.round(n * Math.pow(10, d)) / Math.pow(10, d)).toFixed(d) + "%",
  delta: (n) => (n > 0 ? "+" : "") + n + "%",
};

/* ---------- Icon library (lucide stroke style, 24 viewBox) ---------- */
const ICON_PATHS = {
  // nav
  "layout-grid": "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  receipt: "M4 2v20l2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2V2l-2 2-2-2-2 2-2-2-2 2-2-2-2 2-2-2zM8 7h8M8 12h8M8 17h5",
  package: "M16.5 9.4 7.5 4.21M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16zM3.27 6.96 12 12.01l8.73-5.05M12 22.08V12",
  "folder-tree": "M13 10h7a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 2h-2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zM13 21h7a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1h-2.88a1 1 0 0 1-.9-.55l-.44-.9a1 1 0 0 0-.9-.55H13a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zM3 3v2c0 1.1.9 2 2 2h3M3 3v13c0 1.1.9 2 2 2h3",
  store: "M2 7h20l-1.5 4.5a2 2 0 0 1-1.9 1.5h-13.2a2 2 0 0 1-1.9-1.5L2 7zM4 7V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2M4 13v7h16v-7M10 20v-5h4v5",
  map: "M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3V6zM9 3v15M15 6v15",
  sparkles: "M12 3l1.9 4.4L18.4 9 14 11l-2 4-2-4-4.4-2 4.4-1.6L12 3zM5 14l.9 2.1L8 17l-2.1.9L5 20l-.9-2.1L2 17l2.1-.9L5 14zM19 4l.6 1.4L21 6l-1.4.6L19 8l-.6-1.4L17 6l1.4-.6L19 4z",
  search: "M11 11m-7 0a7 7 0 1 0 14 0a7 7 0 1 0-14 0M21 21l-4.35-4.35",
  bell: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0",
  "chevron-down": "M6 9l6 6 6-6",
  "chevron-right": "M9 6l6 6-6 6",
  "chevron-up": "M18 15l-6-6-6 6",
  "chevron-left": "M15 18l-6-6 6-6",
  "chevrons-up-down": "M7 15l5 5 5-5M7 9l5-5 5 5",
  "arrow-up": "M12 19V5M5 12l7-7 7 7",
  "arrow-down": "M12 5v14M19 12l-7 7-7-7",
  "arrow-up-right": "M7 7h10v10M7 17l10-10",
  "arrow-down-right": "M7 7l10 10M17 7v10H7",
  "arrow-right": "M5 12h14M12 5l7 7-7 7",
  "arrow-left": "M19 12H5M12 19l-7-7 7-7",
  filter: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z",
  calendar: "M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6zM16 2v4M8 2v4M3 10h18",
  x: "M18 6L6 18M6 6l12 12",
  download: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3",
  upload: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12",
  settings: "M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3h.1a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8v.1a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z",
  user: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z",
  "help-circle": "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01",
  info: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 16v-4M12 8h.01",
  "external-link": "M15 3h6v6M10 14L21 3M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5",
  "trending-up": "M22 7l-9.5 9.5-5-5L1 18M16 7h6v6",
  "trending-down": "M22 17l-9.5-9.5-5 5L1 6M16 17h6v-6",
  plus: "M12 5v14M5 12h14",
  minus: "M5 12h14",
  check: "M20 6L9 17l-5-5",
  "check-circle": "M22 11.08V12a10 10 0 1 1-5.93-9.14M22 4L12 14.01l-3-3",
  "alert-circle": "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 8v4M12 16h.01",
  "alert-triangle": "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01",
  "more-horizontal": "M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM19 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM5 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z",
  eye: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
  "file-text": "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 2v6h6M16 13H8M16 17H8M10 9H8",
  building: "M3 21V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14M3 21h18M9 9h.01M9 13h.01M9 17h.01M15 9h.01M15 13h.01M15 17h.01",
  "map-pin": "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0zM12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
  "zoom-in": "M11 11m-8 0a8 8 0 1 0 16 0a8 8 0 1 0-16 0M21 21l-4.35-4.35M11 8v6M8 11h6",
  "zoom-out": "M11 11m-8 0a8 8 0 1 0 16 0a8 8 0 1 0-16 0M21 21l-4.35-4.35M8 11h6",
  send: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z",
  image: "M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zM8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM21 15l-5-5L5 21",
  command: "M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z",
  "message-square": "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z",
  bot: "M12 8V4H8M2 14h2M20 14h2M15 13v2M9 13v2M5 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z",
  copy: "M9 9a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2V9zM5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1",
  refresh: "M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5",
  scan: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M7 12h10",
  paperclip: "M21.4 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48",
  globe: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z",
  layers: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5",
  list: "M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01",
  grid: "M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  edit: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z",
  trash: "M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6",
  lock: "M5 11h14a2 2 0 0 1 2 2v8H3v-8a2 2 0 0 1 2-2zM7 11V7a5 5 0 0 1 10 0v4",
  "circle-dot": "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z",
  flag: "M4 22V4a2 2 0 0 1 2-2h13l-3 6 3 6H6a2 2 0 0 0-2 2",
  star: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z",
  link: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
  "pie-chart": "M21.21 15.89A10 10 0 1 1 8 2.83M22 12A10 10 0 0 0 12 2v10z",
  "bar-chart": "M12 20V10M18 20V4M6 20v-6",
  database: "M12 8c4.97 0 9-1.79 9-4s-4.03-4-9-4-9 1.79-9 4 4.03 4 9 4zM3 5v14c0 2.21 4.03 4 9 4s9-1.79 9-4V5M3 12c0 2.21 4.03 4 9 4s9-1.79 9-4",
};

function Icon({ name, size = 16, className = "", strokeWidth = 1.75, style }) {
  const d = ICON_PATHS[name];
  if (!d) return <svg width={size} height={size} className={className} />;
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      style={style}
      aria-hidden="true"
    >
      {d.split(/(?=M)/).map((p, i) => <path key={i} d={p} />)}
    </svg>
  );
}

/* ---------- Top bar ---------- */
function TopBar({ activeProject = "Campania Q1 2026" }) {
  return (
    <header className="h-14 border-b border-gray-200 bg-white flex items-center px-4 shrink-0">
      <div className="flex items-center gap-2.5 w-[232px]">
        <div className="w-7 h-7 rounded-md bg-[#4F46E5] flex items-center justify-center text-white text-[13px] font-semibold tracking-tight">
          R
        </div>
        <span className="text-[14px] font-semibold text-gray-900 tracking-tight">Receipt Analytics</span>
      </div>

      <div className="flex-1"></div>

      <div className="flex items-center gap-1.5">
        <button className="w-9 h-9 inline-flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500"><Icon name="help-circle" size={16} /></button>
        <button className="w-9 h-9 inline-flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-500 relative">
          <Icon name="bell" size={16} />
          <span className="absolute top-2 right-2 w-1.5 h-1.5 rounded-full bg-rose-500"></span>
        </button>
        <div className="ml-1 w-8 h-8 rounded-full bg-gradient-to-br from-indigo-400 to-indigo-600 text-white text-[11px] font-semibold flex items-center justify-center">
          MT
        </div>
      </div>
    </header>
  );
}

/* ---------- Sidebar ---------- */
const NAV = [
  { key: "overview",   label: "Overview",   icon: "layout-grid", href: "01-overview.html" },
  { key: "receipts",   label: "Receipts",   icon: "receipt",     href: "06-receipts.html", badge: "12.8K" },
  { key: "products",   label: "Products",   icon: "package",     href: "07-products.html" },
  { key: "categories", label: "Categories", icon: "folder-tree", href: "04-categories-l2.html" },
  { key: "stores",     label: "Stores",     icon: "store",       href: "10-stores.html" },
  { key: "map",        label: "Map",        icon: "map",         href: "02-map.html" },
  { key: "ai",         label: "AI Chat",    icon: "sparkles",    href: "05-ai-chat.html" },
];

function Sidebar({ active = "overview" }) {
  return (
    <aside className="w-[232px] shrink-0 border-r border-gray-200 bg-white flex flex-col">
      <nav className="p-3 flex-1">
        <div className="px-2 pt-1 pb-1.5 text-[10.5px] font-medium uppercase tracking-[0.08em] text-gray-400">
          Workspace
        </div>
        <ul className="space-y-0.5">
          {NAV.map((n) => {
            const isActive = n.key === active;
            return (
              <li key={n.key}>
                <a
                  href={n.href}
                  className={
                    "group flex items-center gap-2.5 h-8 px-2 rounded-md text-[13px] " +
                    (isActive
                      ? "bg-indigo-50 text-indigo-700 font-medium"
                      : "text-gray-700 hover:bg-gray-100")
                  }
                >
                  <Icon name={n.icon} size={16} className={isActive ? "text-indigo-600" : "text-gray-500"} />
                  <span className="flex-1">{n.label}</span>
                  {n.badge && (
                    <span className="text-[10.5px] font-mono text-gray-400 tabular-nums">{n.badge}</span>
                  )}
                </a>
              </li>
            );
          })}
        </ul>

        <div className="px-2 pt-5 pb-1.5 text-[10.5px] font-medium uppercase tracking-[0.08em] text-gray-400">
          Project
        </div>
        <ul className="space-y-0.5">
          <li><a href="11-wizard-paste.html" className="flex items-center gap-2.5 h-8 px-2 rounded-md text-[13px] text-gray-700 hover:bg-gray-100"><Icon name="database" size={16} className="text-gray-500" />Catalog</a></li>
          <li><a href="#" className="flex items-center gap-2.5 h-8 px-2 rounded-md text-[13px] text-gray-700 hover:bg-gray-100"><Icon name="settings" size={16} className="text-gray-500" />Settings</a></li>
        </ul>
      </nav>

      <div className="border-t border-gray-200 p-3">
        <div className="rounded-lg bg-gray-50 border border-gray-200 p-3">
          <div className="flex items-center gap-2 mb-1.5">
            <Icon name="check-circle" size={14} className="text-emerald-500" />
            <span className="text-[12px] font-medium text-gray-900">Campania activă</span>
          </div>
          <div className="text-[11.5px] text-gray-500 leading-snug">
            12.03 – 11.04.2026<br/>
            <span className="font-mono tabular-nums text-gray-700">12.847</span> bonuri ingerate
          </div>
        </div>
      </div>
    </aside>
  );
}

/* ---------- Filter bar (global, sticky) ---------- */
function FilterPill({ icon, label, value, count, active = false, onChange }) {
  return (
    <button
      className={
        "h-8 inline-flex items-center gap-2 px-2.5 rounded-md border text-[12.5px] whitespace-nowrap " +
        (active
          ? "border-indigo-200 bg-indigo-50 text-indigo-700"
          : "border-gray-200 bg-white text-gray-700 hover:bg-gray-50")
      }
    >
      {icon && <Icon name={icon} size={13} className={active ? "text-indigo-600" : "text-gray-400"} />}
      <span className="text-gray-500">{label}</span>
      <span className="font-medium text-gray-900">{value}</span>
      {count && (
        <span className="font-mono tabular-nums text-[10.5px] text-gray-400 ml-0.5">{count}</span>
      )}
      <Icon name="chevron-down" size={12} className="text-gray-400 -mr-0.5" />
    </button>
  );
}

function FilterBar({ extra, onlyMine, onOnlyMineChange }) {
  const [internal, setInternal] = useState(true);
  const controlled = onlyMine !== undefined;
  const value = controlled ? onlyMine : internal;
  const toggle = () => {
    const next = !value;
    if (!controlled) setInternal(next);
    if (onOnlyMineChange) onOnlyMineChange(next);
  };
  return (
    <div className="border-b border-gray-200 bg-white px-6 h-[52px] flex items-center gap-2 shrink-0">
      <FilterPill icon="calendar" label="" value="12 mar – 11 apr 2026" active />
      <FilterPill icon="building" label="Retaileri:" value="Toate" count="3" />
      <FilterPill icon="map-pin" label="Regiuni:" value="România" count="42" />
      <FilterPill icon="folder-tree" label="Categorii:" value="Toate" count="7" />
      <div className="h-5 w-px bg-gray-200 mx-1"></div>
      <button type="button" onClick={toggle} className="inline-flex items-center gap-2 text-[12.5px] text-gray-700 select-none cursor-pointer">
        <span className="relative inline-flex items-center transition">
          <span className={"w-7 h-4 rounded-full inline-block transition " + (value ? "bg-indigo-600" : "bg-gray-300")}></span>
          <span className={"absolute w-3 h-3 rounded-full bg-white shadow-sm transition-all " + (value ? "right-0.5" : "left-0.5")}></span>
        </span>
        Doar bonuri cu produsele mele
      </button>
      <div className="flex-1"></div>
      {extra}
      <button className="h-8 px-2.5 inline-flex items-center gap-1.5 text-[12px] text-gray-500 hover:text-gray-900">
        <Icon name="x" size={12} />
        Reset
      </button>
    </div>
  );
}

/* ---------- Card primitives ---------- */
function Card({ className = "", children, padding = "p-5", style, ...rest }) {
  return (
    <div
      className={`bg-white border border-gray-200 rounded-xl ${padding} ${className}`}
      style={style}
      {...rest}
    >
      {children}
    </div>
  );
}

function CardHeader({ title, subtitle, action, kicker, className = "" }) {
  return (
    <div className={`flex items-start justify-between gap-3 ${className}`}>
      <div className="min-w-0">
        {kicker && <div className="text-[10.5px] font-medium uppercase tracking-[0.08em] text-gray-400 mb-1">{kicker}</div>}
        <div className="text-[14px] font-semibold text-gray-900 tracking-tight">{title}</div>
        {subtitle && <div className="text-[12px] text-gray-500 mt-0.5">{subtitle}</div>}
      </div>
      {action}
    </div>
  );
}

function Delta({ value, suffix = "%", className = "" }) {
  const positive = value > 0;
  const negative = value < 0;
  return (
    <span
      className={
        "inline-flex items-center gap-0.5 font-mono tabular-nums text-[11.5px] " +
        (positive ? "text-emerald-600 " : negative ? "text-rose-600 " : "text-gray-500 ") +
        className
      }
    >
      <Icon name={positive ? "arrow-up" : negative ? "arrow-down" : "minus"} size={11} strokeWidth={2.4} />
      {Math.abs(value)}{suffix}
    </span>
  );
}

function Tag({ children, tone = "gray", className = "" }) {
  const tones = {
    gray: "bg-gray-100 text-gray-700",
    indigo: "bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-100",
    emerald: "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-100",
    rose: "bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-100",
    amber: "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-100",
    outline: "border border-gray-200 text-gray-700 bg-white",
  };
  return (
    <span className={`inline-flex items-center gap-1 h-5 px-1.5 rounded text-[10.5px] font-medium ${tones[tone]} ${className}`}>
      {children}
    </span>
  );
}

/* ---------- App shell ---------- */
function AppShell({ active = "overview", filterBarExtra, children, hideFilterBar = false, projectName, onlyMine, onOnlyMineChange }) {
  return (
    <div className="h-screen w-screen bg-[#FAFAFA] flex flex-col text-gray-900 antialiased overflow-hidden">
      <TopBar activeProject={projectName} />
      <div className="flex flex-1 min-h-0">
        <Sidebar active={active} />
        <main className="flex-1 min-w-0 flex flex-col">
          {!hideFilterBar && <FilterBar extra={filterBarExtra} onlyMine={onlyMine} onOnlyMineChange={onOnlyMineChange} />}
          <div className="flex-1 min-h-0 overflow-auto">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}

/* ---------- expose ---------- */
Object.assign(window, {
  Icon, AppShell, TopBar, Sidebar, FilterBar, FilterPill,
  Card, CardHeader, Delta, Tag,
  tokens, fmt,
});