@asteby/metacore-runtime-react 20.1.0 → 20.1.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @asteby/metacore-runtime-react
 
+## 20.1.1
+
+### Patch Changes
+
+- eb6c65f: Kanban responsive board + cards truncate; sidebar nav lights the default view on a view-less landing
+
+  Two frontend UX fixes reported against the ops board.
+
+  **Kanban now adapts instead of overflowing (`@asteby/metacore-runtime-react`).**
+  `DynamicKanban` lanes were fixed-width (`w-72 shrink-0`), so with 4+ stages the
+  last lane was clipped off-viewport and long card text was cut by the card edge
+  with no ellipsis. Lanes are now responsive — `flex-1 min-w-[220px] max-w-[320px]`
+  — so they shrink to fit the available width and only scroll horizontally when
+  they genuinely can't fit. Card titles now `line-clamp-2 break-words` and the
+  secondary field rows carry `min-w-0` so long values ellipsize _inside_ the card
+  rather than being clipped by the border. The optimistic drag-to-move (PUT
+  `<base>/<id>`) is untouched.
+
+  **Sidebar nav active-state on the default/view-less landing (`@asteby/metacore-ui`,
+  `@asteby/metacore-starter-core`).** Landing on a model's bare list surface
+  (e.g. `/m/github_issues?per_page=15` — a transient param, no `view`) lit
+  _neither_ the "Tablero" (`?view=kanban`) nor the "Issues" (`?view=list`) nav
+  item, because the empty view bucket matched neither sibling's explicit view.
+  `checkIsActive` now treats the empty/`view=list`/`view=table` buckets as
+  "default-equivalent": a view-less current URL lights the list/default item while
+  the board (`?view=kanban`, never a default bucket) stays mutually exclusive. The
+  prior Board-vs-Issues exclusivity, `f_` filter and transient (page/sort/search)
+  behaviour are all preserved (18 matcher tests, +4 new). Ported to the
+  `starter-core` scaffold's embedded copy for parity.
+
+- Updated dependencies [eb6c65f]
+  - @asteby/metacore-ui@2.6.1
+
 ## 20.1.0
 
 ### Minor Changes

package/dist/dynamic-kanban.js

@@ -284,7 +284,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, pa
         }
     }, [api, endpoint, groupByKey, model, records, stageOfCard, t, transitions]);
     if (loading) {
-        return (_jsx("div", { className: "flex gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "w-72 shrink-0 space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] }, i))) }));
+        return (_jsx("div", { className: "flex gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "min-w-[220px] max-w-[320px] flex-1 space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] }, i))) }));
     }
     if (!metadata || !groupByKey || stages.length === 0) {
         return (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground", children: t('kanban.noStages', {
@@ -322,7 +322,7 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }) {
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     });
-    return (_jsxs("div", { ref: setNodeRef, className: "flex w-72 shrink-0 flex-col rounded-lg border bg-muted/30 transition-opacity", style: {
+    return (_jsxs("div", { ref: setNodeRef, className: "flex min-w-[220px] max-w-[320px] flex-1 flex-col rounded-lg border bg-muted/30 transition-opacity", style: {
             opacity: dimmed ? 0.45 : 1,
             outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
             outlineOffset: 2,
@@ -333,14 +333,14 @@ function KanbanCard({ card, titleCol, fieldCols, actions, locale, timeZone, curr
         id: String(card.id),
     });
     const visibleActions = actions.filter((a) => isActionAllowedForRowState(a, card));
-    return (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing border-border/70 shadow-sm", style: { opacity: isDragging ? 0.4 : 1 }, onClick: () => onClick?.(card), "data-card-id": String(card.id), children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "min-w-0 flex-1 text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (_jsx("span", { className: "truncate", children: String(card.id) })) }), visibleActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0 -mr-1 -mt-1", 
+    return (_jsx(Card, { ref: setNodeRef, ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing border-border/70 shadow-sm", style: { opacity: isDragging ? 0.4 : 1 }, onClick: () => onClick?.(card), "data-card-id": String(card.id), children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("div", { className: "line-clamp-2 min-w-0 flex-1 break-words text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (_jsx("span", { className: "truncate", children: String(card.id) })) }), visibleActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6 shrink-0 -mr-1 -mt-1", 
                                         // Don't start a drag / card click from the menu button.
                                         onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", onClick: (e) => e.stopPropagation(), children: visibleActions.map((a) => (_jsxs(DropdownMenuItem, { onClick: (e) => {
                                             e.stopPropagation();
                                             onAction(a, card);
-                                        }, children: [_jsx(DynamicIcon, { name: a.icon || 'Zap', className: "mr-2 h-4 w-4" }), a.label] }, a.key))) })] }))] }), fieldCols.map((col) => (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
+                                        }, children: [_jsx(DynamicIcon, { name: a.icon || 'Zap', className: "mr-2 h-4 w-4" }), a.label] }, a.key))) })] }))] }), fieldCols.map((col) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
 }
 // Static preview rendered inside the DragOverlay (no dnd hooks, no menu).
 function CardPreview({ card, titleCol, fieldCols, locale, timeZone, currency, }) {
-    return (_jsx(Card, { className: "w-72 cursor-grabbing border-primary/40 shadow-lg", children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsx("div", { className: "text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (String(card.id)) }), fieldCols.map((col) => (_jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
+    return (_jsx(Card, { className: "w-72 cursor-grabbing border-primary/40 shadow-lg", children: _jsxs(CardContent, { className: "space-y-1.5 p-3", children: [_jsx("div", { className: "line-clamp-2 break-words text-sm font-medium leading-snug", children: titleCol ? (_jsx(ActivityValueRenderer, { value: card[titleCol.key], col: titleCol, locale: locale, timeZone: timeZone, currency: currency })) : (String(card.id)) }), fieldCols.map((col) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground", children: [_jsxs("span", { className: "shrink-0 opacity-70", children: [col.label, ":"] }), _jsx("span", { className: "min-w-0 truncate", children: _jsx(ActivityValueRenderer, { value: card[col.key], col: col, locale: locale, timeZone: timeZone, currency: currency }) })] }, col.key)))] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "20.1.0",
+  "version": "20.1.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.6.0"
+    "@asteby/metacore-ui": "^2.6.1"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.6.0"
+    "@asteby/metacore-ui": "2.6.1"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-kanban.tsx

@@ -441,7 +441,7 @@ export function DynamicKanban({
         return (
             <div className="flex gap-4 overflow-x-auto p-1">
                 {[0, 1, 2, 3].map((i) => (
-                    <div key={i} className="w-72 shrink-0 space-y-3">
+                    <div key={i} className="min-w-[220px] max-w-[320px] flex-1 space-y-3">
                         <Skeleton className="h-8 w-full" />
                         <Skeleton className="h-24 w-full" />
                         <Skeleton className="h-24 w-full" />
@@ -580,7 +580,7 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
     return (
         <div
             ref={setNodeRef}
-            className="flex w-72 shrink-0 flex-col rounded-lg border bg-muted/30 transition-opacity"
+            className="flex min-w-[220px] max-w-[320px] flex-1 flex-col rounded-lg border bg-muted/30 transition-opacity"
             style={{
                 opacity: dimmed ? 0.45 : 1,
                 outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
@@ -655,7 +655,7 @@ function KanbanCard({
         >
             <CardContent className="space-y-1.5 p-3">
                 <div className="flex items-start justify-between gap-2">
-                    <div className="min-w-0 flex-1 text-sm font-medium leading-snug">
+                    <div className="line-clamp-2 min-w-0 flex-1 break-words text-sm font-medium leading-snug">
                         {titleCol ? (
                             <ActivityValueRenderer
                                 value={card[titleCol.key]}
@@ -705,7 +705,7 @@ function KanbanCard({
                 {fieldCols.map((col) => (
                     <div
                         key={col.key}
-                        className="flex items-center gap-1.5 text-xs text-muted-foreground"
+                        className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground"
                     >
                         <span className="shrink-0 opacity-70">{col.label}:</span>
                         <span className="min-w-0 truncate">
@@ -736,7 +736,7 @@ function CardPreview({
     return (
         <Card className="w-72 cursor-grabbing border-primary/40 shadow-lg">
             <CardContent className="space-y-1.5 p-3">
-                <div className="text-sm font-medium leading-snug">
+                <div className="line-clamp-2 break-words text-sm font-medium leading-snug">
                     {titleCol ? (
                         <ActivityValueRenderer
                             value={card[titleCol.key]}
@@ -752,7 +752,7 @@ function CardPreview({
                 {fieldCols.map((col) => (
                     <div
                         key={col.key}
-                        className="flex items-center gap-1.5 text-xs text-muted-foreground"
+                        className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground"
                     >
                         <span className="shrink-0 opacity-70">{col.label}:</span>
                         <span className="min-w-0 truncate">