@unicitylabs/sphere-ui 0.1.8 → 0.1.11

package/README.md

@@ -7,7 +7,7 @@ Shared UI library for the Sphere ecosystem. Provides a unified design system, co
 | App | Description |
 |-----|-------------|
 | [sphere](https://github.com/unicity-sphere/sphere) | Wallet & marketplace |
-| [sphere-dev](https://github.com/unicity-sphere/sphere-dev) | Developer Portal |
+| [sphere-dev-portal](https://github.com/unicity-sphere/sphere-dev-portal) | Developer Portal |
 | [sphere-backoffice](https://github.com/unicity-sphere/sphere-backoffice) | Admin panel |
 | [sphere-quest](https://github.com/unicity-sphere/sphere-quest) | Quest frontend (iframe) |
 

package/dist/index.d.ts

@@ -15,7 +15,7 @@ interface DashboardLayoutProps {
 }
 /**
  * Dashboard shell with sidebar + main content area.
- * Used by sphere-backoffice and sphere-dev.
+ * Used by sphere-backoffice and sphere-dev-portal.
  */
 declare function DashboardLayout({ logo, nav, footer, children }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 
@@ -137,6 +137,29 @@ interface EmptyStateProps {
 }
 declare function EmptyState({ title, description, action }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
+interface SkeletonProps {
+    width?: string;
+    height?: string;
+    radius?: string;
+    className?: string;
+}
+declare function Skeleton({ width, height, radius, className, }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface SkeletonTextProps {
+    lines?: number;
+    lineHeight?: string;
+    gap?: string;
+    className?: string;
+}
+declare function SkeletonText({ lines, lineHeight, gap, className, }: SkeletonTextProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonCircleSize = 'sm' | 'md' | 'lg' | (string & {});
+interface SkeletonCircleProps {
+    size?: SkeletonCircleSize;
+    className?: string;
+}
+declare function SkeletonCircle({ size, className }: SkeletonCircleProps): react_jsx_runtime.JSX.Element;
+
 interface SelectOption {
     value: string;
     label: string;
@@ -255,4 +278,4 @@ declare const IconStar: (p: IconProps) => react_jsx_runtime.JSX.Element;
 declare const IconDiamond: (p: IconProps) => react_jsx_runtime.JSX.Element;
 declare const IconCircle: (p: IconProps) => react_jsx_runtime.JSX.Element;
 
-export { AddressDisplay, AlertBanner, AppLogo, Button, type ButtonProps, type ButtonVariant, ChainInput, ConfirmDialog, CustomSelect, DashboardLayout, DataTable, EmptyState, Field, FormModal, IconArrowRight, IconBack, IconChain, IconCheck, IconChevronDown, IconChevronUp, IconChevronsDown, IconChevronsRight, IconCircle, IconDiamond, IconEdit, IconPlay, IconPlus, IconQuests, IconSearch, IconSettings, IconStar, IconTracks, IconTrash, IconUndo, IconX, Input, type InputProps, JsonPanel, JsonToggleButton, type MemoCondition, MemoConditionsEditor, type NavGroup, type NavItem, PageShell, SearchInput, Section, Select, type SelectOption, type SelectProps, SidebarNav, StatusBadge, Textarea, type TextareaProps, tagColor };
+export { AddressDisplay, AlertBanner, AppLogo, Button, type ButtonProps, type ButtonVariant, ChainInput, ConfirmDialog, CustomSelect, DashboardLayout, DataTable, EmptyState, Field, FormModal, IconArrowRight, IconBack, IconChain, IconCheck, IconChevronDown, IconChevronUp, IconChevronsDown, IconChevronsRight, IconCircle, IconDiamond, IconEdit, IconPlay, IconPlus, IconQuests, IconSearch, IconSettings, IconStar, IconTracks, IconTrash, IconUndo, IconX, Input, type InputProps, JsonPanel, JsonToggleButton, type MemoCondition, MemoConditionsEditor, type NavGroup, type NavItem, PageShell, SearchInput, Section, Select, type SelectOption, type SelectProps, SidebarNav, Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonCircleSize, type SkeletonProps, SkeletonText, type SkeletonTextProps, StatusBadge, Textarea, type TextareaProps, tagColor };

package/dist/index.js

@@ -396,13 +396,19 @@ function ConfirmDialog({
 // src/components/StatusBadge.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 var STATUS_COLORS = {
+  // Quest/Achievement statuses (uppercase)
   ACTIVE: "badge-green",
   DRAFT: "badge-gray",
   PAUSED: "badge-yellow",
   EXPIRED: "badge-red",
   ENDED: "badge-red",
   AWARDED: "badge-green",
-  REJECTED: "badge-red"
+  REJECTED: "badge-red",
+  // Project statuses (lowercase)
+  draft: "badge-gray",
+  review: "badge-yellow",
+  published: "badge-green",
+  suspended: "badge-red"
 };
 function StatusBadge({ status, className = "" }) {
   return /* @__PURE__ */ jsx8("span", { className: `badge ${STATUS_COLORS[status] ?? "badge-gray"} ${className}`, children: status });
@@ -473,10 +479,81 @@ function EmptyState({ title, description, action }) {
   ] });
 }
 
+// src/components/Skeleton.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Skeleton({
+  width = "100%",
+  height = "1rem",
+  radius = "var(--radius-md)",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: `animate-skeleton-pulse ${className}`.trim(),
+      "aria-busy": "true",
+      style: {
+        width,
+        height,
+        borderRadius: radius,
+        background: "var(--bg-hover)",
+        border: "1px solid var(--border)"
+      }
+    }
+  );
+}
+
+// src/components/SkeletonText.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function SkeletonText({
+  lines = 1,
+  lineHeight = "0.875rem",
+  gap = "0.5rem",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className,
+      role: "status",
+      "aria-busy": "true",
+      style: { display: "flex", flexDirection: "column", gap },
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1 && lines > 1;
+        return /* @__PURE__ */ jsx12(
+          Skeleton,
+          {
+            width: isLast ? "70%" : "100%",
+            height: lineHeight,
+            radius: "var(--radius-sm)"
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/components/SkeletonCircle.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var NAMED_SIZES = {
+  sm: "1.5rem",
+  md: "2.5rem",
+  lg: "4rem"
+};
+function resolveSize(size) {
+  if (size === "sm" || size === "md" || size === "lg") return NAMED_SIZES[size];
+  return size;
+}
+function SkeletonCircle({ size = "md", className = "" }) {
+  const dim = resolveSize(size);
+  return /* @__PURE__ */ jsx13(Skeleton, { width: dim, height: dim, radius: "50%", className });
+}
+
 // src/components/CustomSelect.tsx
 import { useState as useState2, useRef, useEffect as useEffect3, useCallback } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function CustomSelect({
   options,
   value,
@@ -539,8 +616,8 @@ function CustomSelect({
         className: `admin-input w-full flex items-center justify-between gap-2 ${textSize} text-left`,
         style: { color: selected ? "var(--text-primary)" : "var(--text-muted)" },
         children: [
-          /* @__PURE__ */ jsx11("span", { className: "truncate", children: label }),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx14("span", { className: "truncate", children: label }),
+          /* @__PURE__ */ jsx14(
             "svg",
             {
               width: "12",
@@ -556,14 +633,14 @@ function CustomSelect({
                 color: "var(--text-muted)",
                 transform: open ? "rotate(180deg)" : "rotate(0deg)"
               },
-              children: /* @__PURE__ */ jsx11("path", { d: "M3 4.5L6 7.5L9 4.5" })
+              children: /* @__PURE__ */ jsx14("path", { d: "M3 4.5L6 7.5L9 4.5" })
             }
           )
         ]
       }
     ),
     open && createPortal3(
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx14(
         "div",
         {
           ref: dropRef,
@@ -580,7 +657,7 @@ function CustomSelect({
             borderRadius: "var(--radius-md)",
             boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
           },
-          children: options.map((opt) => /* @__PURE__ */ jsx11(
+          children: options.map((opt) => /* @__PURE__ */ jsx14(
             "button",
             {
               type: "button",
@@ -611,17 +688,17 @@ function CustomSelect({
 }
 
 // src/components/PageShell.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function PageShell({ title, subtitle, action, maxWidth, children }) {
   return /* @__PURE__ */ jsxs11("div", { className: `p-6 lg:p-8 ${maxWidth ?? ""}`, children: [
     /* @__PURE__ */ jsxs11("div", { className: "page-header", children: [
       /* @__PURE__ */ jsxs11("div", { children: [
-        /* @__PURE__ */ jsx12("h1", { className: "page-title", children: title }),
-        subtitle && /* @__PURE__ */ jsx12("p", { className: "page-subtitle", children: subtitle })
+        /* @__PURE__ */ jsx15("h1", { className: "page-title", children: title }),
+        subtitle && /* @__PURE__ */ jsx15("p", { className: "page-subtitle", children: subtitle })
       ] }),
       action
     ] }),
-    /* @__PURE__ */ jsx12("div", { className: "animate-fade-in", children })
+    /* @__PURE__ */ jsx15("div", { className: "animate-fade-in", children })
   ] });
 }
 
@@ -634,7 +711,7 @@ import {
   getFilteredRowModel,
   flexRender
 } from "@tanstack/react-table";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function DataTable({
   columns,
   data,
@@ -658,10 +735,10 @@ function DataTable({
     getFilteredRowModel: getFilteredRowModel()
   });
   if (isLoading) {
-    return /* @__PURE__ */ jsx13("div", { className: "py-12 text-center", style: { color: "var(--text-muted)" }, children: "Loading\u2026" });
+    return /* @__PURE__ */ jsx16("div", { className: "py-12 text-center", style: { color: "var(--text-muted)" }, children: "Loading\u2026" });
   }
   return /* @__PURE__ */ jsxs12("div", { children: [
-    enableSearch && /* @__PURE__ */ jsx13("div", { className: "mb-4 max-w-xs", children: /* @__PURE__ */ jsx13(
+    enableSearch && /* @__PURE__ */ jsx16("div", { className: "mb-4 max-w-xs", children: /* @__PURE__ */ jsx16(
       SearchInput,
       {
         value: globalFilter,
@@ -669,21 +746,21 @@ function DataTable({
         placeholder: searchPlaceholder ?? "Search..."
       }
     ) }),
-    table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx13(EmptyState, { title: emptyMessage }) : /* @__PURE__ */ jsx13("div", { className: "admin-card overflow-hidden", children: /* @__PURE__ */ jsxs12("table", { className: "admin-table", children: [
-      /* @__PURE__ */ jsx13("thead", { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx13("tr", { children: hg.headers.map((header) => /* @__PURE__ */ jsx13(
+    table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx16(EmptyState, { title: emptyMessage }) : /* @__PURE__ */ jsx16("div", { className: "admin-card overflow-hidden", children: /* @__PURE__ */ jsxs12("table", { className: "admin-table", children: [
+      /* @__PURE__ */ jsx16("thead", { children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsx16("tr", { children: hg.headers.map((header) => /* @__PURE__ */ jsx16(
         "th",
         {
           className: header.column.getCanSort() ? "cursor-pointer select-none" : "",
           onClick: header.column.getToggleSortingHandler(),
           children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
             flexRender(header.column.columnDef.header, header.getContext()),
-            header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx13("span", { style: { color: "var(--accent-text)" }, children: "\u25B2" }),
-            header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx13("span", { style: { color: "var(--accent-text)" }, children: "\u25BC" })
+            header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx16("span", { style: { color: "var(--accent-text)" }, children: "\u25B2" }),
+            header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx16("span", { style: { color: "var(--accent-text)" }, children: "\u25BC" })
           ] })
         },
         header.id
       )) }, hg.id)) }),
-      /* @__PURE__ */ jsx13("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx16("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx16(
         "tr",
         {
           onClick: () => onRowClick?.(row.original),
@@ -695,7 +772,7 @@ function DataTable({
           onMouseLeave: (e) => {
             if (onRowClick) e.currentTarget.style.background = "";
           },
-          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx13("td", { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx16("td", { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
         },
         row.id
       )) })
@@ -704,7 +781,7 @@ function DataTable({
 }
 
 // src/components/AlertBanner.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var STYLES = {
   warning: {
     bg: "rgba(251,191,36,0.06)",
@@ -721,16 +798,16 @@ var STYLES = {
 };
 function AlertBanner({ type, title, children }) {
   const s = STYLES[type];
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       className: "rounded-lg p-3 text-sm",
       style: { background: s.bg, border: `1px solid ${s.border}` },
       children: /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx14("span", { className: "flex-shrink-0 text-sm leading-5", children: s.icon }),
+        /* @__PURE__ */ jsx17("span", { className: "flex-shrink-0 text-sm leading-5", children: s.icon }),
         /* @__PURE__ */ jsxs13("div", { children: [
-          /* @__PURE__ */ jsx14("div", { className: "font-medium text-xs mb-0.5", style: { color: s.titleColor }, children: title }),
-          /* @__PURE__ */ jsx14("div", { style: { color: "var(--text-muted)", fontSize: "0.75rem", lineHeight: "1.4" }, children })
+          /* @__PURE__ */ jsx17("div", { className: "font-medium text-xs mb-0.5", style: { color: s.titleColor }, children: title }),
+          /* @__PURE__ */ jsx17("div", { style: { color: "var(--text-muted)", fontSize: "0.75rem", lineHeight: "1.4" }, children })
         ] })
       ] })
     }
@@ -739,7 +816,7 @@ function AlertBanner({ type, title, children }) {
 
 // src/components/AddressDisplay.tsx
 import { useState as useState4, useCallback as useCallback2 } from "react";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function truncateAddress(address) {
   const prefix = "DIRECT://";
   if (address.startsWith(prefix)) {
@@ -763,12 +840,12 @@ function AddressDisplay({ address, nametag, truncate = true }) {
   }, [address]);
   const displayAddress = truncate ? truncateAddress(address) : address;
   return /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1.5 min-w-0", children: [
-    /* @__PURE__ */ jsx15("div", { className: "min-w-0 flex-1", children: nametag ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
+    /* @__PURE__ */ jsx18("div", { className: "min-w-0 flex-1", children: nametag ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
       /* @__PURE__ */ jsxs14("div", { className: "text-sm font-medium", style: { color: "var(--text-primary)" }, children: [
         "@",
         nametag
       ] }),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx18(
         "div",
         {
           className: "text-[11px] font-mono truncate",
@@ -777,7 +854,7 @@ function AddressDisplay({ address, nametag, truncate = true }) {
           children: displayAddress
         }
       )
-    ] }) : /* @__PURE__ */ jsx15(
+    ] }) : /* @__PURE__ */ jsx18(
       "div",
       {
         className: "text-xs font-mono truncate",
@@ -786,7 +863,7 @@ function AddressDisplay({ address, nametag, truncate = true }) {
         children: displayAddress
       }
     ) }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx18(
       "button",
       {
         onClick: handleCopy,
@@ -799,9 +876,9 @@ function AddressDisplay({ address, nametag, truncate = true }) {
           if (!copied) e.currentTarget.style.color = "var(--text-muted)";
         },
         title: copied ? "Copied!" : "Copy address",
-        children: copied ? /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx15("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxs14("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ jsx15("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-          /* @__PURE__ */ jsx15("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+        children: copied ? /* @__PURE__ */ jsx18("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx18("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxs14("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx18("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsx18("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
         ] })
       }
     )
@@ -810,7 +887,7 @@ function AddressDisplay({ address, nametag, truncate = true }) {
 
 // src/components/JsonPanel.tsx
 import { useState as useState5, useEffect as useEffect4, useRef as useRef2, useCallback as useCallback3 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function JsonPanel({
   value,
   onChange,
@@ -858,9 +935,9 @@ function JsonPanel({
           " ",
           title
         ] }),
-        parseError && /* @__PURE__ */ jsx16("span", { className: "text-[10px] px-1.5 py-0.5 rounded", style: { background: "rgba(239,68,68,0.1)", color: "#f87171" }, children: "Error" })
+        parseError && /* @__PURE__ */ jsx19("span", { className: "text-[10px] px-1.5 py-0.5 rounded", style: { background: "rgba(239,68,68,0.1)", color: "#f87171" }, children: "Error" })
       ] }),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx19(
         "button",
         {
           onClick: handleCopy,
@@ -881,8 +958,8 @@ function JsonPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx16("div", { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsxs15("div", { className: "absolute inset-0 flex overflow-auto", children: [
-      /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx19("div", { className: "flex-1 relative overflow-hidden", children: /* @__PURE__ */ jsxs15("div", { className: "absolute inset-0 flex overflow-auto", children: [
+      /* @__PURE__ */ jsx19(
         "div",
         {
           className: "shrink-0 text-right pr-2 pt-3 select-none",
@@ -896,10 +973,10 @@ function JsonPanel({
             background: "var(--bg-surface)",
             borderRight: "1px solid var(--border)"
           },
-          children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx16("div", { children: i + 1 }, i))
+          children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx19("div", { children: i + 1 }, i))
         }
       ),
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx19(
         "textarea",
         {
           ref: textareaRef,
@@ -921,11 +998,11 @@ function JsonPanel({
         }
       )
     ] }) }),
-    parseError && /* @__PURE__ */ jsx16("div", { className: "px-3 py-1.5 text-[10px]", style: { background: "rgba(239,68,68,0.06)", color: "#f87171", borderTop: "1px solid rgba(239,68,68,0.15)" }, children: parseError })
+    parseError && /* @__PURE__ */ jsx19("div", { className: "px-3 py-1.5 text-[10px]", style: { background: "rgba(239,68,68,0.06)", color: "#f87171", borderTop: "1px solid rgba(239,68,68,0.15)" }, children: parseError })
   ] });
 }
 function JsonToggleButton({ active, onClick }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19(
     "button",
     {
       onClick,
@@ -957,7 +1034,7 @@ function JsonToggleButton({ active, onClick }) {
 
 // src/components/ChainInput.tsx
 import { useState as useState6, useId } from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var TAG_PALETTES = [
   { bg: "rgba(16, 185, 129, 0.12)", color: "#34d399", border: "rgba(16, 185, 129, 0.2)" },
   { bg: "rgba(59, 130, 246, 0.12)", color: "#60a5fa", border: "rgba(59, 130, 246, 0.2)" },
@@ -1027,7 +1104,7 @@ function ChainInput({ chains, suggestions, onChange, size = "md" }) {
                 style: { background: c.bg, color: c.color, border: `1px solid ${c.border}` },
                 children: [
                   name,
-                  /* @__PURE__ */ jsx17(
+                  /* @__PURE__ */ jsx20(
                     "input",
                     {
                       type: "number",
@@ -1039,7 +1116,7 @@ function ChainInput({ chains, suggestions, onChange, size = "md" }) {
                       onClick: (e) => e.stopPropagation()
                     }
                   ),
-                  /* @__PURE__ */ jsx17(
+                  /* @__PURE__ */ jsx20(
                     "button",
                     {
                       type: "button",
@@ -1056,7 +1133,7 @@ function ChainInput({ chains, suggestions, onChange, size = "md" }) {
               name
             );
           }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx20(
             "input",
             {
               id: inputId,
@@ -1116,7 +1193,7 @@ function ChainInput({ chains, suggestions, onChange, size = "md" }) {
                   e.currentTarget.style.background = "transparent";
                 },
                 children: [
-                  /* @__PURE__ */ jsx17("span", { className: "w-2 h-2 rounded-full flex-shrink-0", style: { background: c.color } }),
+                  /* @__PURE__ */ jsx20("span", { className: "w-2 h-2 rounded-full flex-shrink-0", style: { background: c.color } }),
                   s
                 ]
               },
@@ -1130,7 +1207,7 @@ function ChainInput({ chains, suggestions, onChange, size = "md" }) {
 }
 
 // src/components/MemoConditionsEditor.tsx
-import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var MEMO_OPERATORS = [
   { value: "eq", label: "Equals (=)", values: 1 },
   { value: "neq", label: "Not equals (\u2260)", values: 1 },
@@ -1178,14 +1255,14 @@ function MemoConditionsEditor({ conditions, onChange }) {
   const opMeta = (op) => MEMO_OPERATORS.find((o) => o.value === op) ?? MEMO_OPERATORS[0];
   return /* @__PURE__ */ jsxs17("div", { children: [
     /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 mb-2", children: [
-      /* @__PURE__ */ jsx18("span", { className: "text-xs font-medium", style: { color: "var(--text-muted)" }, children: "Memo Conditions" }),
-      /* @__PURE__ */ jsx18("button", { type: "button", onClick: add, className: "text-[10px] px-2 py-0.5 rounded cursor-pointer", style: { background: "var(--bg-elevated)", color: "var(--accent-text)" }, children: "+ Add" })
+      /* @__PURE__ */ jsx21("span", { className: "text-xs font-medium", style: { color: "var(--text-muted)" }, children: "Memo Conditions" }),
+      /* @__PURE__ */ jsx21("button", { type: "button", onClick: add, className: "text-[10px] px-2 py-0.5 rounded cursor-pointer", style: { background: "var(--bg-elevated)", color: "var(--accent-text)" }, children: "+ Add" })
     ] }),
-    conditions.length > 0 ? /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-2", children: conditions.map((cond, i) => {
+    conditions.length > 0 ? /* @__PURE__ */ jsx21("div", { className: "flex flex-col gap-2", children: conditions.map((cond, i) => {
       const meta = opMeta(cond.operator);
       return /* @__PURE__ */ jsxs17("div", { className: "rounded-lg p-2.5", style: { background: "rgba(255,255,255,0.02)", border: "1px solid var(--border)" }, children: [
         /* @__PURE__ */ jsxs17("div", { className: "flex gap-2 items-center", children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx21(
             "input",
             {
               className: "admin-input flex-1 text-xs",
@@ -1194,7 +1271,7 @@ function MemoConditionsEditor({ conditions, onChange }) {
               onChange: (e) => update(i, { key: e.target.value })
             }
           ),
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx21(
             CustomSelect,
             {
               size: "sm",
@@ -1204,7 +1281,7 @@ function MemoConditionsEditor({ conditions, onChange }) {
               options: MEMO_OPERATORS.map((o) => ({ value: o.value, label: o.label }))
             }
           ),
-          meta.values >= 1 && /* @__PURE__ */ jsx18(
+          meta.values >= 1 && /* @__PURE__ */ jsx21(
             "input",
             {
               className: "admin-input flex-1 text-xs",
@@ -1214,8 +1291,8 @@ function MemoConditionsEditor({ conditions, onChange }) {
             }
           ),
           meta.values === 2 && /* @__PURE__ */ jsxs17(Fragment3, { children: [
-            /* @__PURE__ */ jsx18("span", { className: "text-[10px]", style: { color: "var(--text-muted)" }, children: "and" }),
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx21("span", { className: "text-[10px]", style: { color: "var(--text-muted)" }, children: "and" }),
+            /* @__PURE__ */ jsx21(
               "input",
               {
                 className: "admin-input flex-1 text-xs",
@@ -1225,18 +1302,18 @@ function MemoConditionsEditor({ conditions, onChange }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx18("button", { type: "button", onClick: () => remove(i), className: "text-red-400 text-sm px-1 cursor-pointer", children: "\xD7" })
+          /* @__PURE__ */ jsx21("button", { type: "button", onClick: () => remove(i), className: "text-red-400 text-sm px-1 cursor-pointer", children: "\xD7" })
         ] }),
-        /* @__PURE__ */ jsx18("p", { className: "text-[10px] mt-1.5 ml-0.5", style: { color: "var(--text-muted)", fontStyle: "italic" }, children: conditionPreview(cond) })
+        /* @__PURE__ */ jsx21("p", { className: "text-[10px] mt-1.5 ml-0.5", style: { color: "var(--text-muted)", fontStyle: "italic" }, children: conditionPreview(cond) })
       ] }, i);
-    }) }) : /* @__PURE__ */ jsx18("p", { className: "text-[10px]", style: { color: "var(--text-muted)" }, children: 'No conditions \u2014 matches any memo transaction. Click "+ Add" to filter.' })
+    }) }) : /* @__PURE__ */ jsx21("p", { className: "text-[10px]", style: { color: "var(--text-muted)" }, children: 'No conditions \u2014 matches any memo transaction. Click "+ Add" to filter.' })
   ] });
 }
 
 // src/components/Icons.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function I({ d, size = 16, className, style }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     "svg",
     {
       width: size,
@@ -1249,7 +1326,7 @@ function I({ d, size = 16, className, style }) {
       strokeLinejoin: "round",
       className,
       style,
-      children: /* @__PURE__ */ jsx19("path", { d })
+      children: /* @__PURE__ */ jsx22("path", { d })
     }
   );
 }
@@ -1281,27 +1358,27 @@ var P = {
   diamond: "M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0L2.7 10.3z",
   circle: "M12 12m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0"
 };
-var IconBack = (p) => /* @__PURE__ */ jsx19(I, { d: P.back, ...p });
-var IconUndo = (p) => /* @__PURE__ */ jsx19(I, { d: P.undo, ...p });
-var IconQuests = (p) => /* @__PURE__ */ jsx19(I, { d: P.quests, ...p });
-var IconTracks = (p) => /* @__PURE__ */ jsx19(I, { d: P.tracks, ...p });
-var IconSettings = (p) => /* @__PURE__ */ jsx19(I, { d: P.settings, ...p });
-var IconChain = (p) => /* @__PURE__ */ jsx19(I, { d: P.chain, ...p });
-var IconPlus = (p) => /* @__PURE__ */ jsx19(I, { d: P.plus, ...p });
-var IconEdit = (p) => /* @__PURE__ */ jsx19(I, { d: P.edit, ...p });
-var IconTrash = (p) => /* @__PURE__ */ jsx19(I, { d: P.trash, ...p });
-var IconX = (p) => /* @__PURE__ */ jsx19(I, { d: P.x, ...p });
-var IconCheck = (p) => /* @__PURE__ */ jsx19(I, { d: P.check, ...p });
-var IconSearch = (p) => /* @__PURE__ */ jsx19(I, { d: P.search, ...p });
-var IconChevronUp = (p) => /* @__PURE__ */ jsx19(I, { d: P.chevronUp, ...p });
-var IconChevronDown = (p) => /* @__PURE__ */ jsx19(I, { d: P.chevronDown, ...p });
-var IconChevronsDown = (p) => /* @__PURE__ */ jsx19(I, { d: P.chevronsDown, ...p });
-var IconChevronsRight = (p) => /* @__PURE__ */ jsx19(I, { d: P.chevronsRight, ...p });
-var IconArrowRight = (p) => /* @__PURE__ */ jsx19(I, { d: P.arrowRight, ...p });
-var IconPlay = (p) => /* @__PURE__ */ jsx19(I, { d: P.play, ...p });
-var IconStar = (p) => /* @__PURE__ */ jsx19(I, { d: P.star, ...p });
-var IconDiamond = (p) => /* @__PURE__ */ jsx19(I, { d: P.diamond, ...p });
-var IconCircle = (p) => /* @__PURE__ */ jsx19(I, { d: P.circle, ...p });
+var IconBack = (p) => /* @__PURE__ */ jsx22(I, { d: P.back, ...p });
+var IconUndo = (p) => /* @__PURE__ */ jsx22(I, { d: P.undo, ...p });
+var IconQuests = (p) => /* @__PURE__ */ jsx22(I, { d: P.quests, ...p });
+var IconTracks = (p) => /* @__PURE__ */ jsx22(I, { d: P.tracks, ...p });
+var IconSettings = (p) => /* @__PURE__ */ jsx22(I, { d: P.settings, ...p });
+var IconChain = (p) => /* @__PURE__ */ jsx22(I, { d: P.chain, ...p });
+var IconPlus = (p) => /* @__PURE__ */ jsx22(I, { d: P.plus, ...p });
+var IconEdit = (p) => /* @__PURE__ */ jsx22(I, { d: P.edit, ...p });
+var IconTrash = (p) => /* @__PURE__ */ jsx22(I, { d: P.trash, ...p });
+var IconX = (p) => /* @__PURE__ */ jsx22(I, { d: P.x, ...p });
+var IconCheck = (p) => /* @__PURE__ */ jsx22(I, { d: P.check, ...p });
+var IconSearch = (p) => /* @__PURE__ */ jsx22(I, { d: P.search, ...p });
+var IconChevronUp = (p) => /* @__PURE__ */ jsx22(I, { d: P.chevronUp, ...p });
+var IconChevronDown = (p) => /* @__PURE__ */ jsx22(I, { d: P.chevronDown, ...p });
+var IconChevronsDown = (p) => /* @__PURE__ */ jsx22(I, { d: P.chevronsDown, ...p });
+var IconChevronsRight = (p) => /* @__PURE__ */ jsx22(I, { d: P.chevronsRight, ...p });
+var IconArrowRight = (p) => /* @__PURE__ */ jsx22(I, { d: P.arrowRight, ...p });
+var IconPlay = (p) => /* @__PURE__ */ jsx22(I, { d: P.play, ...p });
+var IconStar = (p) => /* @__PURE__ */ jsx22(I, { d: P.star, ...p });
+var IconDiamond = (p) => /* @__PURE__ */ jsx22(I, { d: P.diamond, ...p });
+var IconCircle = (p) => /* @__PURE__ */ jsx22(I, { d: P.circle, ...p });
 export {
   AddressDisplay,
   AlertBanner,
@@ -1345,6 +1422,9 @@ export {
   Section,
   Select,
   SidebarNav,
+  Skeleton,
+  SkeletonCircle,
+  SkeletonText,
   StatusBadge,
   Textarea,
   tagColor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.8",
+  "version": "0.1.11",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -35,29 +35,37 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "lint": "eslint src/",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@tanstack/react-query": "^5.0.0",
-    "@tanstack/react-table": "^8.0.0",
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "lucide-react": "^0.400.0"
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "lucide-react": "^0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@tanstack/react-query": "^5.40.0",
-    "@tanstack/react-table": "^8.17.3",
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.0.0",
+    "@tanstack/react-query": "^5.40.0",
+    "@tanstack/react-table": "^8.17.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "jsdom": "^25.0.1",
     "lucide-react": "^0.400.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.0.0",
-    "typescript": "~5.9.0"
+    "typescript": "~5.9.0",
+    "vitest": "^2.1.9"
   }
 }

package/src/styles/components.css

@@ -119,3 +119,12 @@ select.admin-input {
 @keyframes pulse-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
 @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
 .animate-fade-in { animation: fade-in 0.3s ease-out both; }
+
+/* ─── Skeleton ────────────────────────────────────────────────────────── */
+@keyframes skeleton-pulse {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 1; }
+}
+.animate-skeleton-pulse {
+  animation: skeleton-pulse 1.6s ease-in-out infinite;
+}

package/src/styles/tokens.css

@@ -1,7 +1,7 @@
 /* ═══════════════════════════════════════════════════════════════════════════
    Sphere UI — Design Tokens
    Brand: Unicity Brand Guidelines
-   Used by: sphere, sphere-backoffice, sphere-dev, sphere-quest
+   Used by: sphere, sphere-backoffice, sphere-dev-portal, sphere-quest
    ═══════════════════════════════════════════════════════════════════════════ */
 
 /* Brand fonts — Anton (headlines), Geist (body), Geist Mono (code) */