@almadar/ui 5.9.0 → 5.9.2

package/dist/avl/index.cjs

@@ -32960,18 +32960,25 @@ function TableView({
     return dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
   }
   const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
       role: "row",
+      style: { gridTemplateColumns },
       className: cn(
-        "flex items-center gap-3 sticky top-0 z-10",
-        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
         "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
-        selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
         colDefs.map((col) => {
           const active = sortColumn === (col.field ?? col.key);
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -32981,7 +32988,6 @@ function TableView({
               onClick: () => handleSort(col),
               className: cn(
                 "flex items-center gap-1 min-w-0",
-                col.width ?? "flex-1",
                 alignClass[col.align ?? "left"],
                 col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
               ),
@@ -33001,7 +33007,7 @@ function TableView({
             col.key
           );
         }),
-        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true })
       ]
     }
   );
@@ -33013,16 +33019,18 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
-          "group flex items-center gap-3 transition-colors duration-fast",
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
           lk.rowPad,
-          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
           "hover:bg-[var(--color-surface-subtle)]",
-          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -33034,7 +33042,6 @@ function TableView({
             const raw = getNestedValue(row, col.field ?? col.key);
             const cellBase = cn(
               "flex items-center min-w-0",
-              col.width ?? "flex-1",
               alignClass[col.align ?? "left"],
               weightClass[col.weight ?? "normal"],
               col.className
@@ -33042,7 +33049,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
             Button,
@@ -37081,6 +37088,8 @@ var init_ReplyTree = __esm({
       const hasReplies = !!node.replies && node.replies.length > 0;
       const isCollapsed = collapsedSet.has(node.id);
       const atMaxDepth = depth >= maxDepth;
+      const [replyOpen, setReplyOpen] = React98.useState(false);
+      const [draft, setDraft] = React98.useState("");
       const handleVote = React98.useCallback(
         (next) => {
           onVote?.(node.id, next);
@@ -37090,8 +37099,19 @@ var init_ReplyTree = __esm({
       );
       const handleReply = React98.useCallback(() => {
         onReply?.(node.id);
-        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id });
-      }, [node.id, onReply, replyEvent, eventBus]);
+        setReplyOpen((open) => !open);
+      }, [node.id, onReply]);
+      const handleSubmitReply = React98.useCallback(() => {
+        const content = draft.trim();
+        if (!content) return;
+        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id, content });
+        setDraft("");
+        setReplyOpen(false);
+      }, [node.id, draft, replyEvent, eventBus]);
+      const handleCancelReply = React98.useCallback(() => {
+        setDraft("");
+        setReplyOpen(false);
+      }, []);
       const handleFlag = React98.useCallback(() => {
         onFlag?.(node.id);
         if (flagEvent) eventBus.emit(`UI:${flagEvent}`, { nodeId: node.id });
@@ -37178,6 +37198,33 @@ var init_ReplyTree = __esm({
               }
             )
           ] }),
+          replyOpen && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col gap-2 mt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                inputType: "textarea",
+                rows: 2,
+                value: draft,
+                placeholder: `Reply to ${node.authorName}\u2026`,
+                onChange: (e) => setDraft(e.target.value),
+                "aria-label": `Reply to ${node.authorName}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  leftIcon: "send",
+                  onClick: handleSubmitReply,
+                  disabled: !draft.trim(),
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelReply, children: "Cancel" })
+            ] })
+          ] }),
           hasReplies && !isCollapsed && (atMaxDepth ? /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {

package/dist/avl/index.js

@@ -32911,18 +32911,25 @@ function TableView({
     return dnd.enabled ? /* @__PURE__ */ jsx(Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
   }
   const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
     {
       role: "row",
+      style: { gridTemplateColumns },
       className: cn(
-        "flex items-center gap-3 sticky top-0 z-10",
-        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
         "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
-        selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
         colDefs.map((col) => {
           const active = sortColumn === (col.field ?? col.key);
           return /* @__PURE__ */ jsxs(
@@ -32932,7 +32939,6 @@ function TableView({
               onClick: () => handleSort(col),
               className: cn(
                 "flex items-center gap-1 min-w-0",
-                col.width ?? "flex-1",
                 alignClass[col.align ?? "left"],
                 col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
               ),
@@ -32952,7 +32958,7 @@ function TableView({
             col.key
           );
         }),
-        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsx(Box, { "aria-hidden": true })
       ]
     }
   );
@@ -32964,16 +32970,18 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
-          "group flex items-center gap-3 transition-colors duration-fast",
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
           lk.rowPad,
-          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
           "hover:bg-[var(--color-surface-subtle)]",
-          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(
+          selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -32985,7 +32993,6 @@ function TableView({
             const raw = getNestedValue(row, col.field ?? col.key);
             const cellBase = cn(
               "flex items-center min-w-0",
-              col.width ?? "flex-1",
               alignClass[col.align ?? "left"],
               weightClass[col.weight ?? "normal"],
               col.className
@@ -32993,7 +33000,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxs(
             Button,
@@ -37032,6 +37039,8 @@ var init_ReplyTree = __esm({
       const hasReplies = !!node.replies && node.replies.length > 0;
       const isCollapsed = collapsedSet.has(node.id);
       const atMaxDepth = depth >= maxDepth;
+      const [replyOpen, setReplyOpen] = useState(false);
+      const [draft, setDraft] = useState("");
       const handleVote = useCallback(
         (next) => {
           onVote?.(node.id, next);
@@ -37041,8 +37050,19 @@ var init_ReplyTree = __esm({
       );
       const handleReply = useCallback(() => {
         onReply?.(node.id);
-        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id });
-      }, [node.id, onReply, replyEvent, eventBus]);
+        setReplyOpen((open) => !open);
+      }, [node.id, onReply]);
+      const handleSubmitReply = useCallback(() => {
+        const content = draft.trim();
+        if (!content) return;
+        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id, content });
+        setDraft("");
+        setReplyOpen(false);
+      }, [node.id, draft, replyEvent, eventBus]);
+      const handleCancelReply = useCallback(() => {
+        setDraft("");
+        setReplyOpen(false);
+      }, []);
       const handleFlag = useCallback(() => {
         onFlag?.(node.id);
         if (flagEvent) eventBus.emit(`UI:${flagEvent}`, { nodeId: node.id });
@@ -37129,6 +37149,33 @@ var init_ReplyTree = __esm({
               }
             )
           ] }),
+          replyOpen && /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-2 mt-1", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                inputType: "textarea",
+                rows: 2,
+                value: draft,
+                placeholder: `Reply to ${node.authorName}\u2026`,
+                onChange: (e) => setDraft(e.target.value),
+                "aria-label": `Reply to ${node.authorName}`
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  leftIcon: "send",
+                  onClick: handleSubmitReply,
+                  disabled: !draft.trim(),
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelReply, children: "Cancel" })
+            ] })
+          ] }),
           hasReplies && !isCollapsed && (atMaxDepth ? /* @__PURE__ */ jsx(
             Button,
             {

package/dist/components/index.cjs

@@ -28419,18 +28419,25 @@ function TableView({
     return dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
   }
   const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Box,
     {
       role: "row",
+      style: { gridTemplateColumns },
       className: cn(
-        "flex items-center gap-3 sticky top-0 z-10",
-        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
         "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
-        selectable && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
         colDefs.map((col) => {
           const active = sortColumn === (col.field ?? col.key);
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -28440,7 +28447,6 @@ function TableView({
               onClick: () => handleSort(col),
               className: cn(
                 "flex items-center gap-1 min-w-0",
-                col.width ?? "flex-1",
                 alignClass[col.align ?? "left"],
                 col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
               ),
@@ -28460,7 +28466,7 @@ function TableView({
             col.key
           );
         }),
-        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { "aria-hidden": true })
       ]
     }
   );
@@ -28472,16 +28478,18 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
-          "group flex items-center gap-3 transition-colors duration-fast",
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
           lk.rowPad,
-          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
           "hover:bg-[var(--color-surface-subtle)]",
-          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
             exports.Checkbox,
             {
               checked: selected.has(id),
@@ -28493,7 +28501,6 @@ function TableView({
             const raw = getNestedValue(row, col.field ?? col.key);
             const cellBase = cn(
               "flex items-center min-w-0",
-              col.width ?? "flex-1",
               alignClass[col.align ?? "left"],
               weightClass[col.weight ?? "normal"],
               col.className
@@ -28501,7 +28508,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+            return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
             exports.Button,
@@ -32540,6 +32547,8 @@ var init_ReplyTree = __esm({
       const hasReplies = !!node.replies && node.replies.length > 0;
       const isCollapsed = collapsedSet.has(node.id);
       const atMaxDepth = depth >= maxDepth;
+      const [replyOpen, setReplyOpen] = React80.useState(false);
+      const [draft, setDraft] = React80.useState("");
       const handleVote = React80.useCallback(
         (next) => {
           onVote?.(node.id, next);
@@ -32549,8 +32558,19 @@ var init_ReplyTree = __esm({
       );
       const handleReply = React80.useCallback(() => {
         onReply?.(node.id);
-        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id });
-      }, [node.id, onReply, replyEvent, eventBus]);
+        setReplyOpen((open) => !open);
+      }, [node.id, onReply]);
+      const handleSubmitReply = React80.useCallback(() => {
+        const content = draft.trim();
+        if (!content) return;
+        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id, content });
+        setDraft("");
+        setReplyOpen(false);
+      }, [node.id, draft, replyEvent, eventBus]);
+      const handleCancelReply = React80.useCallback(() => {
+        setDraft("");
+        setReplyOpen(false);
+      }, []);
       const handleFlag = React80.useCallback(() => {
         onFlag?.(node.id);
         if (flagEvent) eventBus.emit(`UI:${flagEvent}`, { nodeId: node.id });
@@ -32637,6 +32657,33 @@ var init_ReplyTree = __esm({
               }
             )
           ] }),
+          replyOpen && /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex flex-col gap-2 mt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Input,
+              {
+                inputType: "textarea",
+                rows: 2,
+                value: draft,
+                placeholder: `Reply to ${node.authorName}\u2026`,
+                onChange: (e) => setDraft(e.target.value),
+                "aria-label": `Reply to ${node.authorName}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                exports.Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  leftIcon: "send",
+                  onClick: handleSubmitReply,
+                  disabled: !draft.trim(),
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", onClick: handleCancelReply, children: "Cancel" })
+            ] })
+          ] }),
           hasReplies && !isCollapsed && (atMaxDepth ? /* @__PURE__ */ jsxRuntime.jsx(
             exports.Button,
             {

package/dist/components/index.js

@@ -28370,18 +28370,25 @@ function TableView({
     return dnd.enabled ? /* @__PURE__ */ jsx(Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
   }
   const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
     {
       role: "row",
+      style: { gridTemplateColumns },
       className: cn(
-        "flex items-center gap-3 sticky top-0 z-10",
-        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
         "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
-        selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
         colDefs.map((col) => {
           const active = sortColumn === (col.field ?? col.key);
           return /* @__PURE__ */ jsxs(
@@ -28391,7 +28398,6 @@ function TableView({
               onClick: () => handleSort(col),
               className: cn(
                 "flex items-center gap-1 min-w-0",
-                col.width ?? "flex-1",
                 alignClass[col.align ?? "left"],
                 col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
               ),
@@ -28411,7 +28417,7 @@ function TableView({
             col.key
           );
         }),
-        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsx(Box, { "aria-hidden": true })
       ]
     }
   );
@@ -28423,16 +28429,18 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
-          "group flex items-center gap-3 transition-colors duration-fast",
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
           lk.rowPad,
-          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
           "hover:bg-[var(--color-surface-subtle)]",
-          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(
+          selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -28444,7 +28452,6 @@ function TableView({
             const raw = getNestedValue(row, col.field ?? col.key);
             const cellBase = cn(
               "flex items-center min-w-0",
-              col.width ?? "flex-1",
               alignClass[col.align ?? "left"],
               weightClass[col.weight ?? "normal"],
               col.className
@@ -28452,7 +28459,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxs(
             Button,
@@ -32491,6 +32498,8 @@ var init_ReplyTree = __esm({
       const hasReplies = !!node.replies && node.replies.length > 0;
       const isCollapsed = collapsedSet.has(node.id);
       const atMaxDepth = depth >= maxDepth;
+      const [replyOpen, setReplyOpen] = useState(false);
+      const [draft, setDraft] = useState("");
       const handleVote = useCallback(
         (next) => {
           onVote?.(node.id, next);
@@ -32500,8 +32509,19 @@ var init_ReplyTree = __esm({
       );
       const handleReply = useCallback(() => {
         onReply?.(node.id);
-        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id });
-      }, [node.id, onReply, replyEvent, eventBus]);
+        setReplyOpen((open) => !open);
+      }, [node.id, onReply]);
+      const handleSubmitReply = useCallback(() => {
+        const content = draft.trim();
+        if (!content) return;
+        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id, content });
+        setDraft("");
+        setReplyOpen(false);
+      }, [node.id, draft, replyEvent, eventBus]);
+      const handleCancelReply = useCallback(() => {
+        setDraft("");
+        setReplyOpen(false);
+      }, []);
       const handleFlag = useCallback(() => {
         onFlag?.(node.id);
         if (flagEvent) eventBus.emit(`UI:${flagEvent}`, { nodeId: node.id });
@@ -32588,6 +32608,33 @@ var init_ReplyTree = __esm({
               }
             )
           ] }),
+          replyOpen && /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-2 mt-1", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                inputType: "textarea",
+                rows: 2,
+                value: draft,
+                placeholder: `Reply to ${node.authorName}\u2026`,
+                onChange: (e) => setDraft(e.target.value),
+                "aria-label": `Reply to ${node.authorName}`
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  leftIcon: "send",
+                  onClick: handleSubmitReply,
+                  disabled: !draft.trim(),
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelReply, children: "Cancel" })
+            ] })
+          ] }),
           hasReplies && !isCollapsed && (atMaxDepth ? /* @__PURE__ */ jsx(
             Button,
             {

package/dist/components/molecules/ReplyTree.d.ts

@@ -31,6 +31,7 @@ export interface ReplyTreeProps {
     }>;
     replyEvent?: EventEmit<{
         parentNodeId: string;
+        content: string;
     }>;
     flagEvent?: EventEmit<{
         nodeId: string;

package/dist/components/molecules/TableView.d.ts

@@ -23,7 +23,9 @@ export interface TableViewColumn {
     header?: string;
     /** Accessibility / fallback label. */
     label?: string;
-    /** Width utility class applied to header + body cells (e.g. "w-28", "flex-1", "min-w-[10rem]"). */
+    /** CSS grid track size for this column (e.g. "7rem", "minmax(10rem, 1.5fr)",
+     *  "1fr"). Shared across header + body so columns align. Defaults to
+     *  "minmax(0, 1fr)" (equal flexible share). */
     width?: string;
     /** Horizontal alignment of the column's cells. */
     align?: 'left' | 'center' | 'right';

package/dist/providers/index.cjs

@@ -29372,18 +29372,25 @@ function TableView({
     return dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
   }
   const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
       role: "row",
+      style: { gridTemplateColumns },
       className: cn(
-        "flex items-center gap-3 sticky top-0 z-10",
-        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
         "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
-        selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
         colDefs.map((col) => {
           const active = sortColumn === (col.field ?? col.key);
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -29393,7 +29400,6 @@ function TableView({
               onClick: () => handleSort(col),
               className: cn(
                 "flex items-center gap-1 min-w-0",
-                col.width ?? "flex-1",
                 alignClass[col.align ?? "left"],
                 col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
               ),
@@ -29413,7 +29419,7 @@ function TableView({
             col.key
           );
         }),
-        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true })
       ]
     }
   );
@@ -29425,16 +29431,18 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
-          "group flex items-center gap-3 transition-colors duration-fast",
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
           lk.rowPad,
-          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
           "hover:bg-[var(--color-surface-subtle)]",
-          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -29446,7 +29454,6 @@ function TableView({
             const raw = getNestedValue(row, col.field ?? col.key);
             const cellBase = cn(
               "flex items-center min-w-0",
-              col.width ?? "flex-1",
               alignClass[col.align ?? "left"],
               weightClass[col.weight ?? "normal"],
               col.className
@@ -29454,7 +29461,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
             Button,
@@ -33493,6 +33500,8 @@ var init_ReplyTree = __esm({
       const hasReplies = !!node.replies && node.replies.length > 0;
       const isCollapsed = collapsedSet.has(node.id);
       const atMaxDepth = depth >= maxDepth;
+      const [replyOpen, setReplyOpen] = React86.useState(false);
+      const [draft, setDraft] = React86.useState("");
       const handleVote = React86.useCallback(
         (next) => {
           onVote?.(node.id, next);
@@ -33502,8 +33511,19 @@ var init_ReplyTree = __esm({
       );
       const handleReply = React86.useCallback(() => {
         onReply?.(node.id);
-        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id });
-      }, [node.id, onReply, replyEvent, eventBus]);
+        setReplyOpen((open) => !open);
+      }, [node.id, onReply]);
+      const handleSubmitReply = React86.useCallback(() => {
+        const content = draft.trim();
+        if (!content) return;
+        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id, content });
+        setDraft("");
+        setReplyOpen(false);
+      }, [node.id, draft, replyEvent, eventBus]);
+      const handleCancelReply = React86.useCallback(() => {
+        setDraft("");
+        setReplyOpen(false);
+      }, []);
       const handleFlag = React86.useCallback(() => {
         onFlag?.(node.id);
         if (flagEvent) eventBus.emit(`UI:${flagEvent}`, { nodeId: node.id });
@@ -33590,6 +33610,33 @@ var init_ReplyTree = __esm({
               }
             )
           ] }),
+          replyOpen && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col gap-2 mt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                inputType: "textarea",
+                rows: 2,
+                value: draft,
+                placeholder: `Reply to ${node.authorName}\u2026`,
+                onChange: (e) => setDraft(e.target.value),
+                "aria-label": `Reply to ${node.authorName}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  leftIcon: "send",
+                  onClick: handleSubmitReply,
+                  disabled: !draft.trim(),
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelReply, children: "Cancel" })
+            ] })
+          ] }),
           hasReplies && !isCollapsed && (atMaxDepth ? /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {

package/dist/providers/index.js

@@ -29323,18 +29323,25 @@ function TableView({
     return dnd.enabled ? /* @__PURE__ */ jsx(Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
   }
   const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
     {
       role: "row",
+      style: { gridTemplateColumns },
       className: cn(
-        "flex items-center gap-3 sticky top-0 z-10",
-        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
         "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
-        selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
         colDefs.map((col) => {
           const active = sortColumn === (col.field ?? col.key);
           return /* @__PURE__ */ jsxs(
@@ -29344,7 +29351,6 @@ function TableView({
               onClick: () => handleSort(col),
               className: cn(
                 "flex items-center gap-1 min-w-0",
-                col.width ?? "flex-1",
                 alignClass[col.align ?? "left"],
                 col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
               ),
@@ -29364,7 +29370,7 @@ function TableView({
             col.key
           );
         }),
-        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsx(Box, { "aria-hidden": true })
       ]
     }
   );
@@ -29376,16 +29382,18 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
-          "group flex items-center gap-3 transition-colors duration-fast",
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
           lk.rowPad,
-          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
           "hover:bg-[var(--color-surface-subtle)]",
-          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(
+          selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -29397,7 +29405,6 @@ function TableView({
             const raw = getNestedValue(row, col.field ?? col.key);
             const cellBase = cn(
               "flex items-center min-w-0",
-              col.width ?? "flex-1",
               alignClass[col.align ?? "left"],
               weightClass[col.weight ?? "normal"],
               col.className
@@ -29405,7 +29412,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxs(
             Button,
@@ -33444,6 +33451,8 @@ var init_ReplyTree = __esm({
       const hasReplies = !!node.replies && node.replies.length > 0;
       const isCollapsed = collapsedSet.has(node.id);
       const atMaxDepth = depth >= maxDepth;
+      const [replyOpen, setReplyOpen] = useState(false);
+      const [draft, setDraft] = useState("");
       const handleVote = useCallback(
         (next) => {
           onVote?.(node.id, next);
@@ -33453,8 +33462,19 @@ var init_ReplyTree = __esm({
       );
       const handleReply = useCallback(() => {
         onReply?.(node.id);
-        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id });
-      }, [node.id, onReply, replyEvent, eventBus]);
+        setReplyOpen((open) => !open);
+      }, [node.id, onReply]);
+      const handleSubmitReply = useCallback(() => {
+        const content = draft.trim();
+        if (!content) return;
+        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id, content });
+        setDraft("");
+        setReplyOpen(false);
+      }, [node.id, draft, replyEvent, eventBus]);
+      const handleCancelReply = useCallback(() => {
+        setDraft("");
+        setReplyOpen(false);
+      }, []);
       const handleFlag = useCallback(() => {
         onFlag?.(node.id);
         if (flagEvent) eventBus.emit(`UI:${flagEvent}`, { nodeId: node.id });
@@ -33541,6 +33561,33 @@ var init_ReplyTree = __esm({
               }
             )
           ] }),
+          replyOpen && /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-2 mt-1", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                inputType: "textarea",
+                rows: 2,
+                value: draft,
+                placeholder: `Reply to ${node.authorName}\u2026`,
+                onChange: (e) => setDraft(e.target.value),
+                "aria-label": `Reply to ${node.authorName}`
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  leftIcon: "send",
+                  onClick: handleSubmitReply,
+                  disabled: !draft.trim(),
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelReply, children: "Cancel" })
+            ] })
+          ] }),
           hasReplies && !isCollapsed && (atMaxDepth ? /* @__PURE__ */ jsx(
             Button,
             {

package/dist/runtime/index.cjs

@@ -29077,18 +29077,25 @@ function TableView({
     return dnd.enabled ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
   }
   const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
       role: "row",
+      style: { gridTemplateColumns },
       className: cn(
-        "flex items-center gap-3 sticky top-0 z-10",
-        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
         "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
-        selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
         colDefs.map((col) => {
           const active = sortColumn === (col.field ?? col.key);
           return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -29098,7 +29105,6 @@ function TableView({
               onClick: () => handleSort(col),
               className: cn(
                 "flex items-center gap-1 min-w-0",
-                col.width ?? "flex-1",
                 alignClass[col.align ?? "left"],
                 col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
               ),
@@ -29118,7 +29124,7 @@ function TableView({
             col.key
           );
         }),
-        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": true })
       ]
     }
   );
@@ -29130,16 +29136,18 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
-          "group flex items-center gap-3 transition-colors duration-fast",
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
           lk.rowPad,
-          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
           "hover:bg-[var(--color-surface-subtle)]",
-          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -29151,7 +29159,6 @@ function TableView({
             const raw = getNestedValue(row, col.field ?? col.key);
             const cellBase = cn(
               "flex items-center min-w-0",
-              col.width ?? "flex-1",
               alignClass[col.align ?? "left"],
               weightClass[col.weight ?? "normal"],
               col.className
@@ -29159,7 +29166,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
             Button,
@@ -33060,6 +33067,8 @@ var init_ReplyTree = __esm({
       const hasReplies = !!node.replies && node.replies.length > 0;
       const isCollapsed = collapsedSet.has(node.id);
       const atMaxDepth = depth >= maxDepth;
+      const [replyOpen, setReplyOpen] = React85.useState(false);
+      const [draft, setDraft] = React85.useState("");
       const handleVote = React85.useCallback(
         (next) => {
           onVote?.(node.id, next);
@@ -33069,8 +33078,19 @@ var init_ReplyTree = __esm({
       );
       const handleReply = React85.useCallback(() => {
         onReply?.(node.id);
-        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id });
-      }, [node.id, onReply, replyEvent, eventBus]);
+        setReplyOpen((open) => !open);
+      }, [node.id, onReply]);
+      const handleSubmitReply = React85.useCallback(() => {
+        const content = draft.trim();
+        if (!content) return;
+        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id, content });
+        setDraft("");
+        setReplyOpen(false);
+      }, [node.id, draft, replyEvent, eventBus]);
+      const handleCancelReply = React85.useCallback(() => {
+        setDraft("");
+        setReplyOpen(false);
+      }, []);
       const handleFlag = React85.useCallback(() => {
         onFlag?.(node.id);
         if (flagEvent) eventBus.emit(`UI:${flagEvent}`, { nodeId: node.id });
@@ -33157,6 +33177,33 @@ var init_ReplyTree = __esm({
               }
             )
           ] }),
+          replyOpen && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col gap-2 mt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                inputType: "textarea",
+                rows: 2,
+                value: draft,
+                placeholder: `Reply to ${node.authorName}\u2026`,
+                onChange: (e) => setDraft(e.target.value),
+                "aria-label": `Reply to ${node.authorName}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  leftIcon: "send",
+                  onClick: handleSubmitReply,
+                  disabled: !draft.trim(),
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelReply, children: "Cancel" })
+            ] })
+          ] }),
           hasReplies && !isCollapsed && (atMaxDepth ? /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {

package/dist/runtime/index.js

@@ -29028,18 +29028,25 @@ function TableView({
     return dnd.enabled ? /* @__PURE__ */ jsx(Fragment, { children: dnd.wrapContainer(emptyNode) }) : emptyNode;
   }
   const lk = LOOKS[look];
+  const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const gridTemplateColumns = [
+    selectable ? "auto" : null,
+    ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
+    hasActions ? "auto" : null
+  ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
     {
       role: "row",
+      style: { gridTemplateColumns },
       className: cn(
-        "flex items-center gap-3 sticky top-0 z-10",
-        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-table-border)]",
+        "grid items-center gap-3 sticky top-0 z-10",
+        "bg-[var(--color-surface-subtle)] border-b border-[var(--color-border)]",
         "text-[var(--color-text-muted)] uppercase text-xs font-semibold tracking-wide",
         lk.headPad
       ),
       children: [
-        selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
+        selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsx(Checkbox, { checked: allSelected, onChange: toggleAll, "aria-label": "Select all rows" }) }),
         colDefs.map((col) => {
           const active = sortColumn === (col.field ?? col.key);
           return /* @__PURE__ */ jsxs(
@@ -29049,7 +29056,6 @@ function TableView({
               onClick: () => handleSort(col),
               className: cn(
                 "flex items-center gap-1 min-w-0",
-                col.width ?? "flex-1",
                 alignClass[col.align ?? "left"],
                 col.sortable && sortEvent && "cursor-pointer select-none hover:text-foreground"
               ),
@@ -29069,7 +29075,7 @@ function TableView({
             col.key
           );
         }),
-        itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "w-px flex-shrink-0", "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsx(Box, { "aria-hidden": true })
       ]
     }
   );
@@ -29081,16 +29087,18 @@ function TableView({
         role: "row",
         "data-entity-row": true,
         "data-entity-id": id,
+        style: !hasRenderProp ? { gridTemplateColumns } : void 0,
         className: cn(
-          "group flex items-center gap-3 transition-colors duration-fast",
+          "group items-center gap-3 transition-colors duration-fast",
+          hasRenderProp ? "flex" : "grid",
           lk.rowPad,
-          lk.divider && "border-b border-[var(--color-table-border)]",
+          lk.divider && "border-b border-[var(--color-border)]",
           lk.striped && index % 2 === 1 && "bg-[var(--color-surface-subtle)]",
           "hover:bg-[var(--color-surface-subtle)]",
-          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-table-border)] [&>*:last-child]:border-r-0"
+          look === "bordered" && "[&>*]:border-r [&>*]:border-[var(--color-border)] [&>*:last-child]:border-r-0"
         ),
         children: [
-          selectable && /* @__PURE__ */ jsx(Box, { className: "w-8 flex-shrink-0 flex items-center", children: /* @__PURE__ */ jsx(
+          selectable && /* @__PURE__ */ jsx(Box, { className: "flex items-center", children: /* @__PURE__ */ jsx(
             Checkbox,
             {
               checked: selected.has(id),
@@ -29102,7 +29110,6 @@ function TableView({
             const raw = getNestedValue(row, col.field ?? col.key);
             const cellBase = cn(
               "flex items-center min-w-0",
-              col.width ?? "flex-1",
               alignClass[col.align ?? "left"],
               weightClass[col.weight ?? "normal"],
               col.className
@@ -29110,7 +29117,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cn(cellBase, "truncate block"), children: formatCell(raw, col.format) }, col.key);
+            return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxs(
             Button,
@@ -33011,6 +33018,8 @@ var init_ReplyTree = __esm({
       const hasReplies = !!node.replies && node.replies.length > 0;
       const isCollapsed = collapsedSet.has(node.id);
       const atMaxDepth = depth >= maxDepth;
+      const [replyOpen, setReplyOpen] = useState(false);
+      const [draft, setDraft] = useState("");
       const handleVote = useCallback(
         (next) => {
           onVote?.(node.id, next);
@@ -33020,8 +33029,19 @@ var init_ReplyTree = __esm({
       );
       const handleReply = useCallback(() => {
         onReply?.(node.id);
-        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id });
-      }, [node.id, onReply, replyEvent, eventBus]);
+        setReplyOpen((open) => !open);
+      }, [node.id, onReply]);
+      const handleSubmitReply = useCallback(() => {
+        const content = draft.trim();
+        if (!content) return;
+        if (replyEvent) eventBus.emit(`UI:${replyEvent}`, { parentNodeId: node.id, content });
+        setDraft("");
+        setReplyOpen(false);
+      }, [node.id, draft, replyEvent, eventBus]);
+      const handleCancelReply = useCallback(() => {
+        setDraft("");
+        setReplyOpen(false);
+      }, []);
       const handleFlag = useCallback(() => {
         onFlag?.(node.id);
         if (flagEvent) eventBus.emit(`UI:${flagEvent}`, { nodeId: node.id });
@@ -33108,6 +33128,33 @@ var init_ReplyTree = __esm({
               }
             )
           ] }),
+          replyOpen && /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-2 mt-1", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                inputType: "textarea",
+                rows: 2,
+                value: draft,
+                placeholder: `Reply to ${node.authorName}\u2026`,
+                onChange: (e) => setDraft(e.target.value),
+                "aria-label": `Reply to ${node.authorName}`
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { className: "flex flex-row gap-2 items-center", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  leftIcon: "send",
+                  onClick: handleSubmitReply,
+                  disabled: !draft.trim(),
+                  children: "Send"
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleCancelReply, children: "Cancel" })
+            ] })
+          ] }),
           hasReplies && !isCollapsed && (atMaxDepth ? /* @__PURE__ */ jsx(
             Button,
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.9.0",
+  "version": "5.9.2",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [