@lovett/ui 0.0.5 → 0.0.7

package/dist/index.js

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Minus, Check, EyeOff, Eye, ChevronDown, Search, Play, VolumeX, Volume2, X, Pencil, GripVertical, Loader2, ChevronUp, ChevronsUpDown, ChevronLeft, ChevronRight, SlidersHorizontal, Copy, Plus, FolderClosed, FolderPlus, Folder, Paperclip, Upload, Image, Code, Table as Table$1, FileText, FileType, AlertCircle, RotateCcw, Link2, ArrowRight, MoreHorizontal, ThumbsUp as ThumbsUp$1, MessageCircle, Share2, Lock, Info, BarChart3, ExternalLink } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Link } from 'react-router-dom';
-import { Toaster as Toaster$1, toast } from 'sonner';
+import { toast, Toaster as Toaster$1 } from 'sonner';
 export { toast } from 'sonner';
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, rectSortingStrategy, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
@@ -17,7 +17,7 @@ import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
 import diff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
 import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
 import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-import jsx62 from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
+import jsx66 from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
 import markdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
 import markup from 'react-syntax-highlighter/dist/esm/languages/prism/markup';
 import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
@@ -167,7 +167,7 @@ function MetaItem({
       style: { color: "rgb(var(--text-tertiary))" },
       children: [
         icon && /* @__PURE__ */ jsx("span", { style: { opacity: 0.7 }, className: "shrink-0 inline-flex", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "truncate tnum", children })
+        /* @__PURE__ */ jsx("span", { className: "truncate tabular-nums", children })
       ]
     }
   );
@@ -291,6 +291,59 @@ Card2.ActionButton = ActionButton;
 Card2.IconTile = IconTile;
 Card2.TagRow = TagRow;
 var card_default = Card2;
+function CollapsibleCard({
+  title,
+  icon,
+  meta,
+  actions,
+  defaultOpen = true,
+  contentClassName = "px-4 py-4",
+  children
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const bodyId = useId();
+  return /* @__PURE__ */ jsxs(card_default, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center justify-between gap-3 px-4 py-3",
+        style: {
+          borderBottom: `1px solid ${open ? "rgb(var(--border))" : "transparent"}`
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOpen((o) => !o),
+              "aria-expanded": open,
+              "aria-controls": bodyId,
+              className: "flex min-w-0 flex-1 items-center gap-2 rounded-[var(--radius-sm)] py-0.5 text-left transition-colors focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]",
+              children: [
+                /* @__PURE__ */ jsx(
+                  ChevronDown,
+                  {
+                    className: "h-4 w-4 shrink-0 transition-transform duration-200 ease-out motion-reduce:transition-none",
+                    style: {
+                      color: "rgb(var(--text-tertiary))",
+                      transform: open ? "rotate(0deg)" : "rotate(-90deg)"
+                    },
+                    "aria-hidden": "true"
+                  }
+                ),
+                icon,
+                /* @__PURE__ */ jsx("span", { className: "truncate text-[14px] font-semibold", style: { color: "rgb(var(--foreground))" }, children: title }),
+                meta
+              ]
+            }
+          ),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { id: bodyId, className: contentClassName, children })
+  ] });
+}
 var VARIANT_CLASS = {
   primary: "btn-primary",
   secondary: "btn-secondary",
@@ -457,24 +510,60 @@ function Modal({ isOpen, onClose, title, children, className }) {
         ),
         style: { borderRadius: "var(--radius-xl)" },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between shrink-0 px-6 pt-6 pb-4", children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-[rgb(var(--foreground))]", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 shrink-0 px-4 py-3", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-[15px] font-bold tracking-[-0.01em] text-[rgb(var(--foreground))]", children: title }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: onClose,
-                className: "rounded-lg p-1.5 text-[rgb(var(--muted-foreground))] hover:bg-[rgb(var(--muted))] hover:text-[rgb(var(--foreground))] transition-colors",
+                className: "inline-flex items-center justify-center w-6 h-6 shrink-0 rounded-[var(--radius-sm)] text-[rgb(var(--text-tertiary))] hover:bg-[rgb(var(--surface-hover))] hover:text-[rgb(var(--foreground))] transition-colors",
                 "aria-label": "Close",
-                children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ jsx(X, { className: "h-[15px] w-[15px]" })
               }
             )
           ] }),
-          children
+          renderBody(children)
         ]
       }
     )
   ] });
 }
+function renderBody(children) {
+  const kids = Children.toArray(children);
+  const tray = kids.find(
+    (c) => isValidElement(c) && c.type === Tray2
+  );
+  const footer = kids.find(
+    (c) => isValidElement(c) && c.type === Footer
+  );
+  if (!tray || !footer) return children;
+  const rest = kids.filter((c) => c !== tray && c !== footer);
+  const trayProps = tray.props;
+  const footerProps = footer.props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    rest,
+    /* @__PURE__ */ jsxs("div", { className: "ds-card-tray flex flex-col flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...trayProps,
+          className: cn("flex-1 min-h-0 overflow-y-auto p-5", trayProps.className)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...footerProps,
+          className: cn(
+            "flex items-center justify-end gap-2 shrink-0 px-5 py-3.5 border-t",
+            footerProps.className
+          ),
+          style: { borderColor: "rgb(var(--border))", ...footerProps.style }
+        }
+      )
+    ] })
+  ] });
+}
 function Tray2({ className, ...rest }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -863,10 +952,14 @@ function SectionHead({ icon, title, subtitle, actions }) {
   const sizedIcon = isValidElement(icon) ? cloneElement(
     icon,
     {
+      // Sizing rides on `size`, which Lucide honours. A previous
+      // `h-[${HEAD_ICON_SIZE}px]` here never did anything: Tailwind
+      // scans source statically, so an interpolated class is never
+      // generated. Keep the literal in sync with HEAD_ICON_SIZE.
       size: HEAD_ICON_SIZE,
       className: cn(
         icon.props.className,
-        `h-[${HEAD_ICON_SIZE}px] w-[${HEAD_ICON_SIZE}px]`
+        "h-[17px] w-[17px]"
       )
     }
   ) : icon;
@@ -1045,12 +1138,13 @@ function ProfileSection(props) {
     }
   ) : props.actions ?? /* @__PURE__ */ jsx(ActionButton3, { label: "Edit", children: /* @__PURE__ */ jsx(Pencil, { className: "h-[14px] w-[14px]" }) });
   const children = editable ? props.children(isEditing) : props.children;
+  const flat = props.flat ?? false;
   return /* @__PURE__ */ jsxs(
     "section",
     {
       id,
       "data-section-id": id,
-      "data-framed": "true",
+      "data-framed": flat ? void 0 : "true",
       className: cn("ds-card-surface flex flex-col", className),
       style: { scrollMarginTop: "var(--section-scroll-offset)" },
       children: [
@@ -1063,7 +1157,24 @@ function ProfileSection(props) {
             actions: headActions
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "ds-card-tray p-5", style: { flex: "1 1 auto" }, children }),
+        flat ? (
+          /* One surface. The divider does the separating that the tray's
+             fill does in the default shape. */
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "px-4 pb-4 pt-4 border-t",
+              style: { flex: "1 1 auto", borderColor: "rgb(var(--border))" },
+              children
+            }
+          )
+        ) : (
+          /* flex:1 lets the tray fill remaining height when the section is
+             stretched (e.g. side-by-side in an equal-height grid), so trays
+             bottom-align instead of leaving a gap under a shorter-header card.
+             No effect on un-stretched (vertically-stacked) sections. */
+          /* @__PURE__ */ jsx("div", { className: "ds-card-tray p-5", style: { flex: "1 1 auto" }, children })
+        ),
         foot && /* @__PURE__ */ jsx(Foot2, { ...foot })
       ]
     }
@@ -1374,6 +1485,147 @@ function MicrosoftLogo({ size = 18, className }) {
     }
   );
 }
+function BrandMeta({ size = 16, className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "-5.12 -5.12 266.24 180.28",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M27.651 112.136c0 9.775 2.146 17.28 4.95 21.82c3.677 5.947 9.16 8.466 14.751 8.466c7.211 0 13.808-1.79 26.52-19.372c10.185-14.092 22.186-33.874 30.26-46.275l13.675-21.01c9.499-14.591 20.493-30.811 33.1-41.806C161.196 4.985 172.298 0 183.47 0c18.758 0 36.625 10.87 50.3 31.257C248.735 53.584 256 81.707 256 110.729c0 17.253-3.4 29.93-9.187 39.946c-5.591 9.686-16.488 19.363-34.818 19.363v-27.616c15.695 0 19.612-14.422 19.612-30.927c0-23.52-5.484-49.623-17.564-68.273c-8.574-13.23-19.684-21.313-31.907-21.313c-13.22 0-23.859 9.97-35.815 27.75c-6.356 9.445-12.882 20.956-20.208 33.944l-8.066 14.289c-16.203 28.728-20.307 35.271-28.408 46.07c-14.2 18.91-26.324 26.076-42.287 26.076c-18.935 0-30.91-8.2-38.325-20.556C2.973 139.413 0 126.202 0 111.148z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M21.802 33.206C34.48 13.666 52.774 0 73.757 0C85.91 0 97.99 3.597 110.605 13.897c13.798 11.261 28.505 29.805 46.853 60.368l6.58 10.967c15.881 26.459 24.917 40.07 30.205 46.49c6.802 8.243 11.565 10.7 17.752 10.7c15.695 0 19.612-14.422 19.612-30.927l24.393-.766c0 17.253-3.4 29.93-9.187 39.946c-5.591 9.686-16.488 19.363-34.818 19.363c-11.395 0-21.49-2.475-32.654-13.007c-8.582-8.083-18.615-22.443-26.334-35.352l-22.96-38.352C118.528 64.08 107.96 49.73 101.845 43.23c-6.578-6.988-15.036-15.428-28.532-15.428c-10.923 0-20.2 7.666-27.963 19.39z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M73.312 27.802c-10.923 0-20.2 7.666-27.963 19.39c-10.976 16.568-17.698 41.245-17.698 64.944c0 9.775 2.146 17.28 4.95 21.82L9.027 149.482C2.973 139.413 0 126.202 0 111.148C0 83.772 7.514 55.24 21.802 33.206C34.48 13.666 52.774 0 73.757 0z", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function BrandFacebook({ size = 16, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "-5.12 -5.12 266.24 264.69",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445", fill: "currentColor" })
+    }
+  );
+}
+function BrandInstagram({ size = 16, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "-5.12 -5.12 266.24 266.24",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M128 23.064c34.177 0 38.225.13 51.722.745c12.48.57 19.258 2.655 23.769 4.408c5.974 2.322 10.238 5.096 14.717 9.575s7.253 8.743 9.575 14.717c1.753 4.511 3.838 11.289 4.408 23.768c.615 13.498.745 17.546.745 51.723s-.13 38.226-.745 51.723c-.57 12.48-2.655 19.257-4.408 23.768c-2.322 5.974-5.096 10.239-9.575 14.718s-8.743 7.253-14.717 9.574c-4.511 1.753-11.289 3.839-23.769 4.408c-13.495.616-17.543.746-51.722.746s-38.228-.13-51.723-.746c-12.48-.57-19.257-2.655-23.768-4.408c-5.974-2.321-10.239-5.095-14.718-9.574c-4.479-4.48-7.253-8.744-9.574-14.718c-1.753-4.51-3.839-11.288-4.408-23.768c-.616-13.497-.746-17.545-.746-51.723s.13-38.225.746-51.722c.57-12.48 2.655-19.258 4.408-23.769c2.321-5.974 5.095-10.238 9.574-14.717c4.48-4.48 8.744-7.253 14.718-9.575c4.51-1.753 11.288-3.838 23.768-4.408c13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95c-8.418 3.271-15.556 7.648-22.672 14.764S9.991 35.738 6.72 44.155C3.555 52.297 1.392 61.602.77 75.226C.147 88.878 0 93.237 0 128s.147 39.122.77 52.774c.622 13.625 2.785 22.93 5.95 31.071c3.27 8.417 7.647 15.556 14.763 22.672s14.254 11.492 22.672 14.763c8.142 3.165 17.446 5.328 31.07 5.95c13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95c8.418-3.27 15.556-7.647 22.672-14.763s11.493-14.254 14.764-22.672c3.164-8.142 5.328-17.446 5.95-31.07c.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07c-3.271-8.418-7.648-15.556-14.764-22.672S220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0m0 62.27c-36.302 0-65.73 29.43-65.73 65.73s29.428 65.73 65.73 65.73c36.301 0 65.73-29.428 65.73-65.73c0-36.301-29.429-65.73-65.73-65.73m0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667m83.686-110.994c0 8.484-6.876 15.36-15.36 15.36s-15.36-6.876-15.36-15.36s6.877-15.36 15.36-15.36s15.36 6.877 15.36 15.36", fill: "currentColor" })
+    }
+  );
+}
+function BrandMessenger({ size = 16, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "-5.12 -5.12 266.24 266.24",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M128,0c-72.106,0 -128,52.818 -128,124.16c0,37.317 15.293,69.562 40.2,91.835c2.09,1.871 3.352,4.493 3.438,7.298l0.697,22.77c0.223,7.262 7.724,11.988 14.37,9.054l25.406,-11.217c2.15335,-0.94916 4.56829,-1.12613 6.837,-0.501c11.675,3.21 24.1,4.92 37.052,4.92c72.106,0 128,-52.818 128,-124.16c0,-71.342 -55.894,-124.159 -128,-124.159 M51.137,160.47l37.6,-59.653c5.98,-9.49 18.788,-11.853 27.762,-5.123l29.905,22.43c2.744,2.05808 6.52006,2.04706 9.252,-0.027l40.388,-30.652c5.39,-4.091 12.428,2.36 8.82,8.085l-37.6,59.654c-5.981,9.489 -18.79,11.852 -27.763,5.122l-29.906,-22.43c-2.74359,-2.05707 -6.51846,-2.04605 -9.25,0.027l-40.39,30.652c-5.39,4.09 -12.427,-2.36 -8.818,-8.085", fill: "currentColor" })
+    }
+  );
+}
+function BrandLinkedIn({ size = 16, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "1.44 -0.56 29.12 29.12",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M8.268 28H2.463V9.306h5.805zM5.362 6.756C3.506 6.756 2 5.218 2 3.362a3.362 3.362 0 0 1 6.724 0c0 1.856-1.506 3.394-3.362 3.394M29.994 28h-5.792v-9.1c0-2.169-.044-4.95-3.018-4.95c-3.018 0-3.481 2.356-3.481 4.794V28h-5.799V9.306h5.567v2.55h.081c.775-1.469 2.668-3.019 5.492-3.019c5.875 0 6.955 3.869 6.955 8.894V28z", fill: "currentColor" })
+    }
+  );
+}
+function BrandNextdoor({ size = 16, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "-1.28 5.29 66.56 53.4",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M0 25.993c.285-.085.56-.2.82-.343l9.538-5.894c.166-.125.325-.26.477-.4V6.708h10.168v6.524L32 6.574l32 19.6-5.265 8.622-5.475-3.338h-.172a.21.21 0 0 0 0 .114v25.58c-1.068.267-38.343.362-41.967.134V56.8q0-12.533 0-25.104l-.114-.23-5.76 3.32L3.1 31.373c-.916-1.488-1.908-2.976-2.766-4.464A1.91 1.91 0 0 0 0 26.508z", fill: "currentColor" })
+    }
+  );
+}
+function BrandPinterest({ size = 16, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "3.38 -0.22 25.25 32.44",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M16.75.406C10.337.406 4 4.681 4 11.6c0 4.4 2.475 6.9 3.975 6.9c.619 0 .975-1.725.975-2.212c0-.581-1.481-1.819-1.481-4.238c0-5.025 3.825-8.588 8.775-8.588c4.256 0 7.406 2.419 7.406 6.863c0 3.319-1.331 9.544-5.644 9.544c-1.556 0-2.888-1.125-2.888-2.737c0-2.363 1.65-4.65 1.65-7.088c0-4.137-5.869-3.387-5.869 1.613c0 1.05.131 2.212.6 3.169c-.863 3.713-2.625 9.244-2.625 13.069c0 1.181.169 2.344.281 3.525c.212.238.106.213.431.094c3.15-4.313 3.038-5.156 4.463-10.8c.769 1.463 2.756 2.25 4.331 2.25c6.637 0 9.619-6.469 9.619-12.3c0-6.206-5.363-10.256-11.25-10.256z", fill: "currentColor" })
+    }
+  );
+}
+function BrandSnapchat({ size = 16, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "208.68 112.18 391.9 368.85",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M407.001,473.488c-1.068,0-2.087-0.039-2.862-0.076c-0.615,0.053-1.25,0.076-1.886,0.076 c-22.437,0-37.439-10.607-50.678-19.973c-9.489-6.703-18.438-13.031-28.922-14.775c-5.149-0.854-10.271-1.287-15.22-1.287 c-8.917,0-15.964,1.383-21.109,2.389c-3.166,0.617-5.896,1.148-8.006,1.148c-2.21,0-4.895-0.49-6.014-4.311 c-0.887-3.014-1.523-5.934-2.137-8.746c-1.536-7.027-2.65-11.316-5.281-11.723c-28.141-4.342-44.768-10.738-48.08-18.484 c-0.347-0.814-0.541-1.633-0.584-2.443c-0.129-2.309,1.501-4.334,3.777-4.711c22.348-3.68,42.219-15.492,59.064-35.119 c13.049-15.195,19.457-29.713,20.145-31.316c0.03-0.072,0.065-0.148,0.101-0.217c3.247-6.588,3.893-12.281,1.926-16.916 c-3.626-8.551-15.635-12.361-23.58-14.882c-1.976-0.625-3.845-1.217-5.334-1.808c-7.043-2.782-18.626-8.66-17.083-16.773 c1.124-5.916,8.949-10.036,15.273-10.036c1.756,0,3.312,0.308,4.622,0.923c7.146,3.348,13.575,5.045,19.104,5.045 c6.876,0,10.197-2.618,11-3.362c-0.198-3.668-0.44-7.546-0.674-11.214c0-0.004-0.005-0.048-0.005-0.048 c-1.614-25.675-3.627-57.627,4.546-75.95c24.462-54.847,76.339-59.112,91.651-59.112c0.408,0,6.674-0.062,6.674-0.062 c0.283-0.005,0.59-0.009,0.908-0.009c15.354,0,67.339,4.27,91.816,59.15c8.173,18.335,6.158,50.314,4.539,76.016l-0.076,1.23 c-0.222,3.49-0.427,6.793-0.6,9.995c0.756,0.696,3.795,3.096,9.978,3.339c5.271-0.202,11.328-1.891,17.998-5.014 c2.062-0.968,4.345-1.169,5.895-1.169c2.343,0,4.727,0.456,6.714,1.285l0.106,0.041c5.66,2.009,9.367,6.024,9.447,10.242 c0.071,3.932-2.851,9.809-17.223,15.485c-1.472,0.583-3.35,1.179-5.334,1.808c-7.952,2.524-19.951,6.332-23.577,14.878 c-1.97,4.635-1.322,10.326,1.926,16.912c0.036,0.072,0.067,0.145,0.102,0.221c1,2.344,25.205,57.535,79.209,66.432 c2.275,0.379,3.908,2.406,3.778,4.711c-0.048,0.828-0.248,1.656-0.598,2.465c-3.289,7.703-19.915,14.09-48.064,18.438 c-2.642,0.408-3.755,4.678-5.277,11.668c-0.63,2.887-1.271,5.717-2.146,8.691c-0.819,2.797-2.641,4.164-5.567,4.164h-0.441 c-1.905,0-4.604-0.346-8.008-1.012c-5.95-1.158-12.623-2.236-21.109-2.236c-4.948,0-10.069,0.434-15.224,1.287 c-10.473,1.744-19.421,8.062-28.893,14.758C444.443,462.88,429.436,473.488,407.001,473.488", fill: "currentColor" })
+    }
+  );
+}
+function BrandTikTok({ size = 16, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "-5.79 -5.79 267.56 300.84",
+      className,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { d: "M189.722,104.42243l0,96.99357c0,48.525 -39.357,87.857 -87.905,87.857c-24.62405,0 -46.88248,-10.1174 -62.84421,-26.42813c-0.00093,-0.00062 -0.00186,-0.00125 -0.00279,-0.00187c-0.00254,-0.00259 -0.00508,-0.00519 -0.00761,-0.00778c-23.49917,-15.76977 -38.96239,-42.57494 -38.96239,-72.99022c0,-48.518 39.355,-87.852 87.905,-87.852c4.03423,-0.001 8.06385,0.2723 12.061,0.818l0,10.76898c4.64967,-0.09894 9.30133,0.17007 13.911,0.80102v48.593c-3.94487,-1.25017 -8.05877,-1.88528 -12.197,-1.883c-22.209,0 -40.21,17.994 -40.21,40.186c-0.00942,6.11418 1.38223,12.11209 4.025,17.54894l-17.941,-29.11894c0,-6.79366 1.68644,-13.19354 4.66379,-18.8042c-2.97797,5.61107 -4.66479,12.01139 -4.66479,18.8052c0,15.692 8.998,29.28 22.118,35.898c0.00103,0.00136 0.00207,0.00271 0.0031,0.00407c5.60932,2.82644 11.80469,4.29426 18.0859,4.28493c22.162,0 40.132,-17.92 40.208,-40.05v-189.845h47.834v6.113c0.1689,1.82808 0.41177,3.64857 0.728,5.457l-34.643,0.001v189.844c-0.078,22.132 -18.05,40.05 -40.21,40.05c-5.67604,0 -11.07698,-1.17525 -15.97293,-3.29552c4.89621,2.12093 10.2975,3.29652 15.97393,3.29652c22.161,0 40.131,-17.92 40.21,-40.052v-189.843l47.832,0v6.113c1.356,14.892 7.624,28.362 17.17,38.785h-0.001c10.55395,6.58342 22.74707,10.06504 35.186,10.047v10.116c4.57579,0.96983 9.24056,1.45782 13.918,1.456v47.53c-24.71212,0 -47.59337,-7.85144 -66.271,-21.19557zM99.964,151.40168c0.00033,0.00011 0.00067,0.00021 0.001,0.00032l0,-37.82098c-0.00033,0.00001 -0.00067,0.00001 -0.001,0.00002zM242.075,114.045v-0.001c-24.712,0 -47.589,-7.851 -66.272,-21.195v0.001c18.682,13.344 41.561,21.195 66.272,21.195zM69.673,225.607c-1.62409,-2.12792 -3.02095,-4.40072 -4.178,-6.78106zM228.74787,72.27412c3.67381,1.65002 7.52454,2.97698 11.51604,3.94463c-3.9686,-0.96405 -7.82207,-2.2874 -11.51604,-3.94463z", fill: "currentColor" })
+    }
+  );
+}
+var BRAND_ICONS = {
+  meta: BrandMeta,
+  facebook: BrandFacebook,
+  instagram: BrandInstagram,
+  messenger: BrandMessenger,
+  linkedin: BrandLinkedIn,
+  nextdoor: BrandNextdoor,
+  pinterest: BrandPinterest,
+  snapchat: BrandSnapchat,
+  tiktok: BrandTikTok
+};
 var RING_FILLS = ["rgb(var(--accent) / 0.45)", "rgb(var(--accent) / 0.28)", "rgb(var(--accent) / 0.14)"];
 var RING_STROKE = "rgb(var(--accent) / 0.5)";
 var GRID_STROKE = "rgb(var(--foreground) / 0.04)";
@@ -2475,6 +2727,150 @@ function TokenBadge({
     }
   );
 }
+
+// src/lib/clipboard.ts
+async function copyText(value, label) {
+  try {
+    await navigator.clipboard.writeText(value);
+    toast.success(label ? `Copied ${label}` : `Copied ${value}`);
+  } catch {
+    toast.error("Copy failed");
+  }
+}
+var ValueChip = forwardRef(
+  function ValueChip2({ children, copyValue, copyLabel, size = "md", fill, className, ...rest }, ref) {
+    const shared = cn(
+      "inline-flex items-center justify-center px-2 py-1 font-mono tabular-nums truncate",
+      size === "sm" ? "text-[10px]" : "text-[11px]",
+      fill && "flex-1 min-w-0",
+      className
+    );
+    const surface = {
+      background: "rgb(var(--surface-inset))",
+      border: "1px solid rgb(var(--border))",
+      borderRadius: "var(--radius-sm)",
+      color: "rgb(var(--text-secondary))"
+    };
+    if (!copyValue) {
+      return /* @__PURE__ */ jsx("span", { className: shared, style: surface, children });
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: () => void copyText(copyValue, copyLabel),
+        className: cn(
+          shared,
+          "cursor-pointer transition-colors",
+          "hover:border-[rgb(var(--border-strong))] hover:text-[rgb(var(--foreground))]",
+          "focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]"
+        ),
+        style: surface,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var MetaCell = forwardRef(
+  function MetaCell2({ label, children, icon, className, style, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-0.5 px-2.5 py-2 min-w-0", className),
+        style: {
+          background: "rgb(var(--surface-inset))",
+          border: "1px solid rgb(var(--border))",
+          borderRadius: "var(--radius-sm)",
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 text-[9px] font-semibold uppercase tracking-[0.06em]",
+              style: { color: "rgb(var(--text-tertiary))" },
+              children: [
+                icon,
+                label
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-[12px] font-semibold tabular-nums truncate",
+              style: { color: "rgb(var(--foreground))" },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+// src/lib/color.ts
+function hexToRgbTuple(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const r = parseInt(full.slice(0, 2), 16) || 0;
+  const g = parseInt(full.slice(2, 4), 16) || 0;
+  const b = parseInt(full.slice(4, 6), 16) || 0;
+  return [r, g, b];
+}
+function rgbString(hex) {
+  const [r, g, b] = hexToRgbTuple(hex);
+  return `${r}, ${g}, ${b}`;
+}
+function rgbCss(hex) {
+  return `rgb(${rgbString(hex)})`;
+}
+function hslString(hex) {
+  const [r, g, b] = hexToRgbTuple(hex).map((v) => v / 255);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === r) h = (g - b) / d + (g < b ? 6 : 0);
+    else if (max === g) h = (b - r) / d + 2;
+    else h = (r - g) / d + 4;
+    h /= 6;
+  }
+  return `${Math.round(h * 360)}\xB0 ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+function relativeLuminance(hex) {
+  const lin = hexToRgbTuple(hex).map((v) => {
+    const c = v / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+}
+function contrastRatio(a, b) {
+  const [hi, lo] = a > b ? [a, b] : [b, a];
+  return (hi + 0.05) / (lo + 0.05);
+}
+function bestTextOn(hex) {
+  const l = relativeLuminance(hex);
+  const vsWhite = contrastRatio(l, 1);
+  const vsBlack = contrastRatio(l, 0);
+  return { onLight: vsBlack >= vsWhite, ratio: Math.max(vsWhite, vsBlack) };
+}
+function wcagBadges(hex) {
+  const best = bestTextOn(hex).ratio;
+  return [
+    { label: "AA Large", pass: best >= 3 },
+    { label: "AA", pass: best >= 4.5 },
+    { label: "AAA", pass: best >= 7 }
+  ];
+}
 function AllocationSparkbar({
   values,
   baseColorVar,
@@ -2559,7 +2955,7 @@ function FloatingStatusBar({
       role: "status",
       className: cn(
         "fixed bottom-4 left-1/2 z-30 flex -translate-x-1/2 items-center gap-3.5 px-3.5 py-2.5",
-        "motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2",
+        "ds-enter-rise",
         className
       ),
       style: {
@@ -2725,7 +3121,13 @@ function SortableTable({
             onClick: onRowClick ? () => onRowClick(row) : void 0,
             className: onRowClick ? "cursor-pointer transition-colors" : void 0,
             style: {
-              background: zebra && idx % 2 === 1 ? "rgb(var(--surface-overlay-soft) / 0.5)" : "transparent"
+              background: (
+                /* --surface-overlay-soft already carries an alpha; nesting a
+                   second one produced `rgb(0 0 0 / 0.03 / 0.5)` — invalid, so
+                   the banding never painted. --muted is the opaque zebra fill
+                   the data-display recipe (CLAUDE.md §2) calls for. */
+                zebra && idx % 2 === 1 ? "rgb(var(--muted))" : "transparent"
+              )
             },
             children: columns.map((col) => /* @__PURE__ */ jsx(
               "td",
@@ -2875,6 +3277,7 @@ function Tabs({
             role: "tab",
             type: "button",
             "aria-selected": isActive,
+            "aria-label": tab.ariaLabel,
             disabled: tab.disabled,
             onClick: () => onTabChange(tab.id),
             className: `${className2} ${tab.disabled ? "cursor-not-allowed opacity-40" : "cursor-pointer"}`,
@@ -2907,19 +3310,19 @@ function Tabs({
 var ACTIVE_STYLE = {
   neutral: {
     bg: "rgb(var(--accent))",
-    color: "rgb(var(--accent-foreground, 255 255 255))"
+    color: "rgb(var(--surface-on-accent))"
   },
   accent: {
     bg: "rgb(var(--accent))",
-    color: "rgb(var(--accent-foreground, 255 255 255))"
+    color: "rgb(var(--surface-on-accent))"
   },
   success: {
     bg: "rgb(var(--success))",
-    color: "rgb(var(--success-bg))"
+    color: "rgb(var(--surface-on-accent))"
   },
   warning: {
     bg: "rgb(var(--warning))",
-    color: "rgb(var(--warning-bg))"
+    color: "rgb(var(--surface-on-accent))"
   },
   destructive: {
     bg: "rgb(var(--destructive))",
@@ -2927,7 +3330,7 @@ var ACTIVE_STYLE = {
   },
   info: {
     bg: "rgb(var(--info))",
-    color: "rgb(var(--info-bg))"
+    color: "rgb(var(--surface-on-accent))"
   }
 };
 function PillButton({
@@ -3174,7 +3577,7 @@ function DropdownMenuContent({
           "fixed z-[100] min-w-48 max-w-[min(28rem,calc(100vw-16px))]",
           "p-1.5 overflow-y-auto",
           "rounded-[var(--radius-lg)]",
-          isPositioned && "animate-in fade-in-0 zoom-in-95 duration-100",
+          isPositioned && "ds-enter-pop",
           className
         ),
         style: {
@@ -3999,40 +4402,51 @@ function DataGridTableBody({
     );
   };
   return /* @__PURE__ */ jsxs(TableBody, { children: [
-    visibleRows.map((row, rowIndex) => /* @__PURE__ */ jsxs(TableRow, { children: [
-      /* @__PURE__ */ jsx(
-        TableCell,
+    visibleRows.map((row, rowIndex) => (
+      // TableRow styles `data-[state=selected]`; without this attribute a
+      // checked row had no visual state at all — only the checkbox changed.
+      /* @__PURE__ */ jsxs(
+        TableRow,
         {
-          className: "h-10 px-0 text-center",
-          style: {
-            borderRight: "1px solid rgb(var(--border))",
-            ...controlStyle
-          },
-          children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              "aria-label": `Select ${getRowLabel(row)}`,
-              checked: selectedRowIds.includes(row.id),
-              onCheckedChange: (checked) => onToggleRowSelection(row.id, checked === true),
-              className: "mx-auto"
-            }
-          )
-        }
-      ),
-      leading.map(
-        (column, colIndex) => renderDataCell(row, rowIndex, column, colIndex)
-      ),
-      fillWidth ? /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: "auto", padding: 0 } }) : null,
-      rightPinned.map(
-        (column, i) => renderDataCell(
-          row,
-          rowIndex,
-          column,
-          leading.length + i,
-          i === rightPinned.length - 1
-        )
+          ...selectedRowIds.includes(row.id) ? { "data-state": "selected" } : {},
+          children: [
+            /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: "h-10 px-0 text-center",
+                style: {
+                  borderRight: "1px solid rgb(var(--border))",
+                  ...controlStyle
+                },
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    "aria-label": `Select ${getRowLabel(row)}`,
+                    checked: selectedRowIds.includes(row.id),
+                    onCheckedChange: (checked) => onToggleRowSelection(row.id, checked === true),
+                    className: "mx-auto"
+                  }
+                )
+              }
+            ),
+            leading.map(
+              (column, colIndex) => renderDataCell(row, rowIndex, column, colIndex)
+            ),
+            fillWidth ? /* @__PURE__ */ jsx("td", { "aria-hidden": true, style: { width: "auto", padding: 0 } }) : null,
+            rightPinned.map(
+              (column, i) => renderDataCell(
+                row,
+                rowIndex,
+                column,
+                leading.length + i,
+                i === rightPinned.length - 1
+              )
+            )
+          ]
+        },
+        row.id
       )
-    ] }, row.id)),
+    )),
     fillHeight ? (
       // Filler row absorbs the leftover height (table is height:100%) so
       // the summary footer stays pinned to the bottom even with few rows.
@@ -5589,7 +6003,7 @@ function TagChipInput({
         className: cn(
           "flex flex-wrap items-center gap-1.5 px-2 py-1.5 min-h-10 cursor-text",
           "border transition-colors",
-          error ? "border-[rgb(var(--ring-error))]" : "border-[rgb(var(--border))] focus-within:border-[rgb(var(--accent))]",
+          error ? "border-[rgb(var(--destructive))] focus-within:border-[rgb(var(--destructive))]" : "border-[rgb(var(--border))] focus-within:border-[rgb(var(--accent))]",
           isDisabled && "opacity-60 cursor-not-allowed",
           className
         ),
@@ -5916,13 +6330,12 @@ function FolderTreePicker({
         "aria-controls": open ? popoverId : void 0,
         disabled,
         onClick: () => setOpen((o) => !o),
-        className: cn(
-          "btn btn-secondary justify-between w-full",
-          error && "is-error",
-          className
-        ),
+        className: cn("btn btn-secondary justify-between w-full", className),
         style: {
-          borderColor: error ? "rgb(var(--ring-error))" : void 0
+          /* --ring-error is a box-shadow LIST, not a colour; rgb(var(--ring-error))
+             is invalid CSS and gets dropped, which left this error state inert.
+             The colour token is --destructive (what .input-shell.is-error uses). */
+          borderColor: error ? "rgb(var(--destructive))" : void 0
         },
         children: [
           /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 min-w-0", children: [
@@ -6637,8 +7050,8 @@ var BANNER_TONE = {
     icon: "rgb(var(--warning))"
   },
   destructive: {
-    bg: "rgb(var(--surface-overlay-soft))",
-    border: "rgb(var(--ring-error))",
+    bg: "rgb(var(--destructive-bg))",
+    border: "rgb(var(--destructive))",
     icon: "rgb(var(--destructive))"
   }
 };
@@ -7833,7 +8246,7 @@ var LANGUAGES = {
   javascript,
   js: javascript,
   json,
-  jsx: jsx62,
+  jsx: jsx66,
   markdown,
   md: markdown,
   html: markup,
@@ -8329,7 +8742,7 @@ function Kbd({ children, size = "md" }) {
   return /* @__PURE__ */ jsx("kbd", { style, children });
 }
 var FrameStack = forwardRef(
-  function FrameStack2({ className, style, gap = "10px", children, ...rest }, ref) {
+  function FrameStack2({ className, style, gap = "10px", padding = "var(--tray-inset)", children, ...rest }, ref) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -8340,7 +8753,7 @@ var FrameStack = forwardRef(
           background: "rgb(var(--card-frame-bg))",
           border: "1px solid rgb(var(--border-card))",
           borderRadius: "var(--radius-xl)",
-          padding: "10px",
+          padding,
           gap,
           ...style
         },
@@ -9793,7 +10206,7 @@ var C = {
   name: "rgb(8, 8, 8)",
   sub: "rgb(101, 103, 107)",
   body: "rgb(0, 0, 0)",
-  seeMore: "#1877F2",
+  seeMore: "var(--color-meta-blue)",
   imageBg: "#F0F2F5",
   imageEdge: "rgba(0, 0, 0, 0.06)",
   card: "#F7F8FA",
@@ -13603,7 +14016,7 @@ var C3 = {
   name: "rgb(8, 8, 8)",
   sub: "rgb(101, 103, 107)",
   body: "rgb(0, 0, 0)",
-  seeMore: "#1877F2",
+  seeMore: "var(--color-meta-blue)",
   imageBg: "#F0F2F5",
   cardBorder: "rgba(0, 0, 0, 0.1)",
   headline: "rgb(28, 32, 40)",
@@ -14033,6 +14446,6 @@ var PLACEMENT_CONFIGS = [
   }
 ];
 
-export { AccordionCompound as Accordion, AllocationSparkbar, AppScroll, Badge, BrandLogoTile, BulkActionBar, Button, ButtonGroup, CalculatorShell, CalculatorShellV2, card_default as Card, Checkbox, ChipNav, Choropleth, CodeBlock, CompletionRing, CopyField, DataGrid, DataGridColumnOptionsMenu, DataGridDragOverlay, DataGridDropIndicator, DataGridToolbar, DetailSection, DeviceFrame, DragHandle, DropdownButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyPlaceholder, EmptyState, FOLDER_COLOR_KEYS, FileDropZone, FilePreviewGrid, FilePreviewItem, FileThumbnail, FileUploadButton, FilterBar, FilterDropdown, FloatingDrawer, FloatingStatusBar, FolderCard, FolderTreePicker, FrameStack, HEADER_HEIGHT, HeroFormCardCompound as HeroFormCard, IconTile, IdentityLabel, IdentityValue, Input, Kbd, ListItem, MarkdownCode, MarkdownRenderer, MenuButton, meta_previews_exports as MetaPreviews, MetricCard, MicrosoftLogo, modal_default as Modal, OptionTile, OptionTileGroup, PLACEMENT_CONFIGS, PageHeaderHost, PageHeaderSlotProvider, PageHero, page_shell_default as PageShell, Pagination, PillButton, profile_section_default as ProfileSection, ProgressBar, Radio, RadioGroup, RangeSlider, ResizableHandle, ResizablePane, SECTION_SCROLL_OFFSET, SearchBar, SectionLabel, SegmentedPill, Shell2 as Shell, ShellStat, Slider, SortableItem, SortableList, SortableTable, StatRow, StatsGrid, StepLoader, Tabs, TagChipInput, TagRow, TextInput, Textarea, TextareaInput, Toaster, TokenBadge, cn, folderColorVar, formatCurrency, formatNumber, formatPercent, formatRatio, useFileUpload };
+export { AccordionCompound as Accordion, AllocationSparkbar, AppScroll, BRAND_ICONS, Badge, BrandFacebook, BrandInstagram, BrandLinkedIn, BrandLogoTile, BrandMessenger, BrandMeta, BrandNextdoor, BrandPinterest, BrandSnapchat, BrandTikTok, BulkActionBar, Button, ButtonGroup, CalculatorShell, CalculatorShellV2, card_default as Card, Checkbox, ChipNav, Choropleth, CodeBlock, CollapsibleCard, CompletionRing, CopyField, DataGrid, DataGridColumnOptionsMenu, DataGridDragOverlay, DataGridDropIndicator, DataGridToolbar, DetailSection, DeviceFrame, DragHandle, DropdownButton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EmptyPlaceholder, EmptyState, FOLDER_COLOR_KEYS, FileDropZone, FilePreviewGrid, FilePreviewItem, FileThumbnail, FileUploadButton, FilterBar, FilterDropdown, FloatingDrawer, FloatingStatusBar, FolderCard, FolderTreePicker, FrameStack, HEADER_HEIGHT, HeroFormCardCompound as HeroFormCard, IconTile, IdentityLabel, IdentityValue, Input, Kbd, ListItem, MarkdownCode, MarkdownRenderer, MenuButton, MetaCell, meta_previews_exports as MetaPreviews, MetricCard, MicrosoftLogo, modal_default as Modal, OptionTile, OptionTileGroup, PLACEMENT_CONFIGS, PageHeaderHost, PageHeaderSlotProvider, PageHero, page_shell_default as PageShell, Pagination, PillButton, profile_section_default as ProfileSection, ProgressBar, Radio, RadioGroup, RangeSlider, ResizableHandle, ResizablePane, SECTION_SCROLL_OFFSET, SearchBar, SectionLabel, SegmentedPill, Shell2 as Shell, ShellStat, Slider, SortableItem, SortableList, SortableTable, StatRow, StatsGrid, StepLoader, Tabs, TagChipInput, TagRow, TextInput, Textarea, TextareaInput, Toaster, TokenBadge, ValueChip, bestTextOn, cn, contrastRatio, copyText, folderColorVar, formatCurrency, formatNumber, formatPercent, formatRatio, hexToRgbTuple, hslString, relativeLuminance, rgbCss, rgbString, useFileUpload, wcagBadges };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map