@ggui-ai/dev-stack 0.26.0 → 0.28.0

package/dist/hub-preview/client.js

@@ -21210,7 +21210,7 @@ function resolveToneCss(tone) {
     case "muted":
       return "var(--ggui-color-onSunken, #52525b)";
     case "subtle":
-      return "var(--ggui-color-neutral-500, #71717a)";
+      return "var(--ggui-color-onSunken, #52525b)";
     case "emphasized":
       return "var(--ggui-color-link, var(--ggui-color-primary-700, #0369a1))";
     case "loud":
@@ -27656,11 +27656,11 @@ function FormField({ label, children, error, helperText, required, description,
     color: "var(--ggui-color-onContainer, #374151)"
   }, children: [label, required && (0, import_jsx_runtime32.jsx)("span", { style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), description && (0, import_jsx_runtime32.jsx)("span", { style: {
     fontSize: fontSize.xs,
-    color: "var(--ggui-color-neutral-500, #6b7280)",
+    color: resolveToneCss("subtle"),
     marginBottom: "4px"
   }, children: description }), children, (error || helperText) && (0, import_jsx_runtime32.jsx)("span", { style: {
     fontSize: fontSize.xs,
-    color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-neutral-500, #6b7280)"
+    color: hasError ? "var(--ggui-color-error-500, #ef4444)" : resolveToneCss("subtle")
   }, children: error || helperText })] });
 }
 function MenuItem({ label, icon, rightElement, onClick, disabled, active, danger, style, className }) {
@@ -27892,7 +27892,7 @@ function Autocomplete({ value = "", onChange, onSelect, options, placeholder, la
   }, children: loading ? (0, import_jsx_runtime36.jsx)("div", { style: { padding: "12px", display: "flex", justifyContent: "center" }, children: (0, import_jsx_runtime36.jsx)(Spinner, { size: 20 }) }) : filteredOptions.length === 0 ? (0, import_jsx_runtime36.jsx)("div", { style: {
     padding: "12px",
     textAlign: "center",
-    color: "var(--ggui-color-neutral-500, #6b7280)",
+    color: resolveToneCss("subtle"),
     fontSize: fontSize.sm
   }, children: noResultsText }) : filteredOptions.map((option, index) => (0, import_jsx_runtime36.jsxs)("div", { onClick: () => !option.disabled && handleSelect(option), style: {
     padding: "8px 12px",
@@ -27903,7 +27903,7 @@ function Autocomplete({ value = "", onChange, onSelect, options, placeholder, la
     display: "flex",
     alignItems: "center",
     gap: "8px"
-  }, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime36.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime36.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime36.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime36.jsx)("div", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: option.description })] })] }, option.value)) })] });
+  }, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime36.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime36.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime36.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime36.jsx)("div", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: option.description })] })] }, option.value)) })] });
 }
 function Breadcrumb({ items, separator = "/", onItemClick, style, className }) {
   return (0, import_jsx_runtime37.jsx)("nav", { "aria-label": "Breadcrumb", className, style: {
@@ -27917,7 +27917,7 @@ function Breadcrumb({ items, separator = "/", onItemClick, style, className }) {
     return (0, import_jsx_runtime37.jsxs)(import_react33.Fragment, { children: [index > 0 && (0, import_jsx_runtime37.jsx)("span", { style: { color: "var(--ggui-color-neutral-400, #9ca3af)" }, children: separator }), item.icon && (0, import_jsx_runtime37.jsx)("span", { style: {
       display: "flex",
       alignItems: "center",
-      color: isLast ? "var(--ggui-color-onContainer, #111827)" : "var(--ggui-color-neutral-500, #6b7280)"
+      color: isLast ? "var(--ggui-color-onContainer, #111827)" : resolveToneCss("subtle")
     }, children: item.icon }), isLast ? (0, import_jsx_runtime37.jsx)("span", { style: {
       color: "var(--ggui-color-onContainer, #111827)",
       fontWeight: 500
@@ -27930,7 +27930,7 @@ function Breadcrumb({ items, separator = "/", onItemClick, style, className }) {
       background: "none",
       border: "none",
       padding: 0,
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       cursor: "pointer",
       fontSize: "inherit"
     }, children: item.label })] }, index);
@@ -28641,7 +28641,7 @@ function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
     }
   };
   const timestamp = comment.timestamp instanceof Date ? comment.timestamp.toLocaleString() : comment.timestamp;
-  return (0, import_jsx_runtime46.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime46.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime46.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime46.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime46.jsx)("span", { style: { color: "var(--ggui-color-neutral-500, #6b7280)", fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime46.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: "var(--ggui-color-onContainer, #374151)" }, children: comment.content }), (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime46.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
+  return (0, import_jsx_runtime46.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime46.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime46.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime46.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime46.jsx)("span", { style: { color: resolveToneCss("subtle"), fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime46.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: "var(--ggui-color-onContainer, #374151)" }, children: comment.content }), (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime46.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
     padding: "2px 8px",
     border: `1px solid var(--ggui-color-outlineVariant, #e5e7eb)`,
     borderRadius: "12px",
@@ -28651,7 +28651,7 @@ function CommentItem({ comment, onReply, onReaction, depth = 0 }) {
   }, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime46.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
     background: "none",
     border: "none",
-    color: "var(--ggui-color-neutral-500, #6b7280)",
+    color: resolveToneCss("subtle"),
     fontSize: fontSize.xs,
     cursor: "pointer"
   }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime46.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime46.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime46.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime46.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime46.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime46.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
@@ -28706,7 +28706,7 @@ function DataTable({ columns, data, rowKey = "id", loading, emptyText = "No data
     borderBottom: "1px solid var(--ggui-color-outlineVariant, #e5e7eb)",
     cursor: col.sortable ? "pointer" : void 0,
     width: col.width
-  }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime47.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime47.jsx)("tbody", { children: loading ? (0, import_jsx_runtime47.jsx)("tr", { children: (0, import_jsx_runtime47.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime47.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime47.jsx)("tr", { children: (0, import_jsx_runtime47.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: emptyText }) }) : data.map((row, index) => {
+  }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime47.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime47.jsx)("tbody", { children: loading ? (0, import_jsx_runtime47.jsx)("tr", { children: (0, import_jsx_runtime47.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime47.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime47.jsx)("tr", { children: (0, import_jsx_runtime47.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: resolveToneCss("subtle") }, children: emptyText }) }) : data.map((row, index) => {
     const key = getRowKey(row, index);
     const isSelected = selectedKeys.includes(key);
     return (0, import_jsx_runtime47.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
@@ -28783,7 +28783,7 @@ function ChatWindow({ messages, currentUserId, onSendMessage, loading, typing, p
       // takes the muted tier itself (ggui#1566).
       ...isOwn ? { opacity: 0.7 } : { color: "var(--ggui-color-onSunken, #52525b)" }
     }, children: [(0, import_jsx_runtime48.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime48.jsxs)("span", { children: [message.status === "sending" && "\u2022", message.status === "sent" && "\u2713", message.status === "delivered" && "\u2713\u2713", message.status === "read" && "\u2713\u2713", message.status === "error" && "!"] })] })] })] }, message.id);
-  }), typing && (0, import_jsx_runtime48.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime48.jsxs)("span", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime48.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime48.jsxs)("div", { style: {
+  }), typing && (0, import_jsx_runtime48.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime48.jsxs)("span", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime48.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime48.jsxs)("div", { style: {
     padding: "12px 16px",
     borderTop: `1px solid var(--ggui-color-outlineVariant, #e5e7eb)`,
     display: "flex",
@@ -28904,7 +28904,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
     cursor: disabled ? "not-allowed" : "pointer",
     transition: "all 0.2s",
     opacity: disabled ? 0.5 : 1
-  }, children: [(0, import_jsx_runtime50.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime50.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime50.jsx)("p", { style: { margin: "12px 0 4px", color: "var(--ggui-color-onContainer, #374151)", fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime50.jsxs)("p", { style: { margin: 0, color: "var(--ggui-color-neutral-500, #6b7280)", fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime50.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file) => (0, import_jsx_runtime50.jsxs)("div", { style: {
+  }, children: [(0, import_jsx_runtime50.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime50.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime50.jsx)("p", { style: { margin: "12px 0 4px", color: "var(--ggui-color-onContainer, #374151)", fontSize: fontSize.sm }, children: dragDrop ? "Drag and drop files here, or click to browse" : "Click to browse files" }), (0, import_jsx_runtime50.jsxs)("p", { style: { margin: 0, color: resolveToneCss("subtle"), fontSize: fontSize.xs }, children: [accept && `Accepted: ${accept}`, maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`, maxFiles && ` \u2022 Max files: ${maxFiles}`] })] }), files.length > 0 && (0, import_jsx_runtime50.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file) => (0, import_jsx_runtime50.jsxs)("div", { style: {
     display: "flex",
     alignItems: "center",
     gap: "12px",
@@ -28919,7 +28919,7 @@ function FileUploader({ files = [], onFilesSelected, onFileRemove, accept, multi
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis"
-  }, children: file.name }), (0, import_jsx_runtime50.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: [formatFileSize(file.size), file.error && (0, import_jsx_runtime50.jsx)("span", { style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "8px" }, children: file.error })] }), file.status === "uploading" && file.progress !== void 0 && (0, import_jsx_runtime50.jsx)(Progress, { value: file.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime50.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file.id), children: (0, import_jsx_runtime50.jsx)(Icon, { name: "x", size: 16 }) })] }, file.id)) })] });
+  }, children: file.name }), (0, import_jsx_runtime50.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: [formatFileSize(file.size), file.error && (0, import_jsx_runtime50.jsx)("span", { style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "8px" }, children: file.error })] }), file.status === "uploading" && file.progress !== void 0 && (0, import_jsx_runtime50.jsx)(Progress, { value: file.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime50.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file.id), children: (0, import_jsx_runtime50.jsx)(Icon, { name: "x", size: 16 }) })] }, file.id)) })] });
 }
 var variantColors2 = {
   info: "var(--ggui-color-info-500, #06b6d4)",
@@ -28934,7 +28934,10 @@ function NotificationItem({ notification, onMarkAsRead, onDismiss }) {
     display: "flex",
     gap: "12px",
     padding: "12px",
-    backgroundColor: notification.read ? "transparent" : "var(--ggui-color-primaryContainer, #f0f9ff)",
+    // Unread is carried by the dot and the title's weight; the row takes the
+    // ground its muted text is measured on (ggui#1567), not a raised accent
+    // ground where that text falls under AA in dark themes.
+    backgroundColor: notification.read ? "transparent" : "var(--ggui-color-sunken, #f4f4f5)",
     borderRadius: radius.md,
     transition: "background-color 0.15s"
   }, children: [(0, import_jsx_runtime51.jsx)("div", { style: {
@@ -28960,7 +28963,7 @@ function NotificationItem({ notification, onMarkAsRead, onDismiss }) {
     margin: "4px 0 0",
     color: "var(--ggui-color-onSunken, #4b5563)",
     fontSize: fontSize.xs
-  }, children: notification.message }), (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime51.jsx)("span", { style: { color: "var(--ggui-color-neutral-400, #9ca3af)", fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime51.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
+  }, children: notification.message }), (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime51.jsx)("span", { style: { color: resolveToneCss("subtle"), fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime51.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
     background: "none",
     border: "none",
     padding: 0,
@@ -28995,7 +28998,7 @@ function NotificationCenter({ notifications, onMarkAsRead, onMarkAllAsRead, onDi
     color: "var(--ggui-color-onPrimaryContainer, #0369a1)",
     fontSize: fontSize.xs,
     fontWeight: fontWeight.medium
-  }, children: unreadCount })] }), (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime51.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime51.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime51.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime51.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime51.jsx)("div", { style: { textAlign: "center", padding: "32px", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: emptyText }) : (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime51.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
+  }, children: unreadCount })] }), (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime51.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime51.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime51.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime51.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime51.jsx)("div", { style: { textAlign: "center", padding: "32px", color: resolveToneCss("subtle") }, children: emptyText }) : (0, import_jsx_runtime51.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime51.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
 }
 var sizeWidths = {
   sm: "400px",
@@ -29177,11 +29180,11 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
     fontSize: fontSize.base,
     outline: "none",
     backgroundColor: "transparent"
-  } })] }) }), (0, import_jsx_runtime53.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime53.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime53.jsx)(Spinner, { size: 24 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime53.jsx)("div", { style: { textAlign: "center", padding: "32px", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: "No commands found" }) : Array.from(filteredCommands.entries()).map(([group, cmds]) => (0, import_jsx_runtime53.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime53.jsx)("div", { style: {
+  } })] }) }), (0, import_jsx_runtime53.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime53.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime53.jsx)(Spinner, { size: 24 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime53.jsx)("div", { style: { textAlign: "center", padding: "32px", color: resolveToneCss("subtle") }, children: "No commands found" }) : Array.from(filteredCommands.entries()).map(([group, cmds]) => (0, import_jsx_runtime53.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime53.jsx)("div", { style: {
     padding: "8px 12px",
     fontSize: fontSize.xs,
     fontWeight: fontWeight.semibold,
-    color: "var(--ggui-color-neutral-500, #6b7280)",
+    color: resolveToneCss("subtle"),
     textTransform: "uppercase",
     letterSpacing: "0.05em"
   }, children: group }), cmds.map((cmd) => {
@@ -29204,12 +29207,12 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
       color: cmd.disabled ? "var(--ggui-color-neutral-400, #9ca3af)" : "var(--ggui-color-onElevated, #111827)",
       textAlign: "left",
       cursor: cmd.disabled ? "not-allowed" : "pointer"
-    }, children: [cmd.icon && (0, import_jsx_runtime53.jsx)("span", { style: { display: "flex", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: cmd.icon }), (0, import_jsx_runtime53.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime53.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime53.jsx)("div", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime53.jsx)("kbd", { style: {
+    }, children: [cmd.icon && (0, import_jsx_runtime53.jsx)("span", { style: { display: "flex", color: resolveToneCss("subtle") }, children: cmd.icon }), (0, import_jsx_runtime53.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime53.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime53.jsx)("div", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime53.jsx)("kbd", { style: {
       padding: "2px 6px",
       backgroundColor: "var(--ggui-color-sunken, #f3f4f6)",
       borderRadius: radius.sm,
       fontSize: fontSize.xs,
-      color: "var(--ggui-color-neutral-500, #6b7280)",
+      color: resolveToneCss("subtle"),
       fontFamily: "inherit"
     }, children: cmd.shortcut })] }, cmd.id);
   })] }, group)) }), (0, import_jsx_runtime53.jsxs)("div", { style: {
@@ -29219,7 +29222,7 @@ function CommandPalette({ open, onClose, commands, onSelect, placeholder = "Sear
     alignItems: "center",
     gap: "16px",
     fontSize: fontSize.xs,
-    color: "var(--ggui-color-neutral-500, #6b7280)"
+    color: resolveToneCss("subtle")
   }, children: [(0, import_jsx_runtime53.jsx)("span", { children: "\u2191\u2193 Navigate" }), (0, import_jsx_runtime53.jsx)("span", { children: "\u21B5 Select" }), (0, import_jsx_runtime53.jsx)("span", { children: "Esc Close" })] })] })] });
 }
 function Footer({ brand, columns, socialLinks, bottomText, bottomLinks, background, bordered = true, style, className }) {
@@ -29269,20 +29272,20 @@ function Footer({ brand, columns, socialLinks, bottomText, bottomLinks, backgrou
     borderTop: "1px solid var(--ggui-color-outlineVariant, #e5e7eb)"
   }, children: [bottomText && (0, import_jsx_runtime54.jsx)("span", { style: {
     fontSize: fontSize.sm,
-    color: "var(--ggui-color-neutral-500, #6b7280)",
+    color: resolveToneCss("subtle"),
     lineHeight: lineHeight.normal
   }, children: bottomText }), (0, import_jsx_runtime54.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "20px" }, children: [socialLinks?.map((social, idx) => (0, import_jsx_runtime54.jsx)("a", { href: social.href, "aria-label": social.label, style: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: "var(--ggui-color-neutral-500, #6b7280)",
+    color: resolveToneCss("subtle"),
     transition: "color 0.15s"
   }, children: social.icon }, idx)), bottomLinks?.map((link, idx) => (0, import_jsx_runtime54.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
     e.preventDefault();
     link.onClick?.();
   } : void 0, style: {
     fontSize: fontSize.sm,
-    color: "var(--ggui-color-neutral-500, #6b7280)",
+    color: resolveToneCss("subtle"),
     textDecoration: "none",
     transition: "color 0.15s"
   }, children: link.label }, idx))] })] })] });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ggui-ai/dev-stack",
-  "version": "0.26.0",
-  "description": "Shared local dev engine for the ggui protocol: local UI registry discovery, compile-on-demand, filesystem watcher with SSE, and a read-only HTTP surface for dev tooling. Framework-neutral — agent runtime supervision plugs in via an adapter seam, so no agent SDK is hardcoded.",
+  "version": "0.28.0",
+  "description": "Shared local dev engine for the GGUI protocol: local UI registry discovery, compile-on-demand, filesystem watcher with SSE, and a read-only HTTP surface for dev tooling. Framework-neutral — agent runtime supervision plugs in via an adapter seam, so no agent SDK is hardcoded.",
   "keywords": [
     "ggui",
     "dev-server",
@@ -28,9 +28,9 @@
   "dependencies": {
     "chokidar": "^4.0.3",
     "esbuild": "^0.28.2",
-    "@ggui-ai/agent-runtime": "0.26.0",
-    "@ggui-ai/ui-registry": "0.26.0",
-    "@ggui-ai/project-config": "0.26.0"
+    "@ggui-ai/project-config": "0.28.0",
+    "@ggui-ai/agent-runtime": "0.28.0",
+    "@ggui-ai/ui-registry": "0.28.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
@@ -40,9 +40,9 @@
     "react-dom": "^19.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.6",
-    "@ggui-ai/design": "0.26.0",
-    "@ggui-ai/mcp-apps-react": "0.26.0",
-    "@ggui-ai/wire": "0.26.0"
+    "@ggui-ai/design": "0.28.0",
+    "@ggui-ai/mcp-apps-react": "0.28.0",
+    "@ggui-ai/wire": "0.28.0"
   },
   "repository": {
     "type": "git",