@jinaan/uikit 0.1.49 → 0.1.51

package/dist/table-empty-state.d.ts

@@ -7,8 +7,10 @@ interface TableEmptyStateProps {
     className?: string;
 }
 /**
- * Centered, contextual empty state for a table panel: an 80px icon chip, a
- * large heading, supporting text, and an optional accent action.
+ * Centered, contextual empty state for a table panel: an icon chip, a compact
+ * heading, supporting text, and an optional action. Typography matches the
+ * onboarding empty cards (e.g. the MCP servers card) so tables never shout
+ * louder than the surrounding surface.
  */
 export declare function TableEmptyState({ icon, title, description, action, className, }: TableEmptyStateProps): import("react").JSX.Element;
 export {};

package/dist/table-empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../src/table-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,oBAAoB,+BA4BtB"}
+{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../src/table-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,oBAAoB,+BAwBtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -441,16 +441,7 @@ export function DataTable<T>({
   useLayoutEffect(() => {
     const table = bodyTableRef.current;
     if (!table) return;
-    if (structureRef.current !== structureKey || contentRef.current !== contentKey) {
-      // Column set or row content changed: drop the pinned widths so the body
-      // re-renders content-sized (table-auto) and the next pass measures
-      // intrinsic widths again. Without this, the effect would measure the
-      // stale colgroup's shifted layout and pin the wrong (truncating) widths.
-      structureRef.current = structureKey;
-      contentRef.current = contentKey;
-      setColumnWidths((prev) => (prev.length === 0 ? prev : []));
-      return;
-    }
+
     const measure = () => {
       const cells = table.tBodies[0]?.rows.item(0)?.cells;
       if (!cells || cells.length === 0) {
@@ -481,6 +472,23 @@ export function DataTable<T>({
         prev.length === widths.length && prev.every((w, i) => w === widths[i]) ? prev : widths,
       );
     };
+    if (structureRef.current !== structureKey || contentRef.current !== contentKey) {
+      // Column set or row content changed: drop the pinned widths so the body
+      // re-renders content-sized (table-auto) and the next pass measures
+      // intrinsic widths again. Without this, the effect would measure the
+      // stale colgroup's shifted layout and pin the wrong (truncating) widths.
+      structureRef.current = structureKey;
+      contentRef.current = contentKey;
+      if (pinned) {
+        // The widths -> [] state flip re-runs this effect (see `pinned` in the
+        // deps); measuring now would read the still-pinned layout.
+        setColumnWidths([]);
+        return;
+      }
+      // Already unpinned: no state flip would re-run the effect, so measure
+      // the content-sized layout right away.
+    }
+
     measure();
     syncBandScroll();
     if (typeof ResizeObserver === "undefined") return;

package/src/table-empty-state.tsx

@@ -11,8 +11,10 @@ interface TableEmptyStateProps {
 }
 
 /**
- * Centered, contextual empty state for a table panel: an 80px icon chip, a
- * large heading, supporting text, and an optional accent action.
+ * Centered, contextual empty state for a table panel: an icon chip, a compact
+ * heading, supporting text, and an optional action. Typography matches the
+ * onboarding empty cards (e.g. the MCP servers card) so tables never shout
+ * louder than the surrounding surface.
  */
 export function TableEmptyState({
   icon,
@@ -24,28 +26,24 @@ export function TableEmptyState({
   return (
     <div
       className={cn(
-        "flex min-h-[22rem] flex-col items-center justify-center gap-5 px-6 py-16 text-center",
+        "flex flex-col items-center justify-center gap-4 px-6 py-12 text-center",
         className,
       )}
     >
       {icon ? (
-        <div className="flex size-[var(--table-empty-icon)] items-center justify-center rounded-2xl border border-table-empty-icon-border bg-table-empty-icon text-table-muted [&_svg]:size-8">
+        <div className="flex size-12 items-center justify-center rounded-xl border border-line bg-elevated text-subtle [&_svg]:size-5">
           {icon}
         </div>
       ) : null}
-      <div className="space-y-2">
-        <p className="text-[1.75rem] font-semibold leading-tight text-table-header-active">
-          {title}
-        </p>
+      <div className="space-y-1">
+        <p className="text-base font-medium text-table-header-active">{title}</p>
         {description ? (
-          <p className="mx-auto max-w-md text-base leading-relaxed text-table-muted">
+          <p className="mx-auto max-w-md text-[13px] leading-5 text-table-muted">
             {description}
           </p>
         ) : null}
       </div>
-      {action ? (
-        <div className="text-sm font-medium text-table-accent">{action}</div>
-      ) : null}
+      {action ? <div className="text-table-accent">{action}</div> : null}
     </div>
   );
 }