@ggui-ai/ui-visual-tester 0.26.0 → 0.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/fixture/fixture-runtime.js +27 -24
  2. package/package.json +5 -5
package/fixture/fixture-runtime.js CHANGED
@@ -20085,7 +20085,7 @@
20085
20085
  case "muted":
20086
20086
  return "var(--ggui-color-onSunken, #52525b)";
20087
20087
  case "subtle":
20088
- return "var(--ggui-color-neutral-500, #71717a)";
20088
+ return "var(--ggui-color-onSunken, #52525b)";
20089
20089
  case "emphasized":
20090
20090
  return "var(--ggui-color-link, var(--ggui-color-primary-700, #0369a1))";
20091
20091
  case "loud":
@@ -26662,11 +26662,11 @@
26662
26662
  color: "var(--ggui-color-onContainer, #374151)"
26663
26663
  }, children: [label, required && (0, import_jsx_runtime30.jsx)("span", { style: { color: "var(--ggui-color-error-500, #ef4444)", marginLeft: "2px" }, children: "*" })] }), description && (0, import_jsx_runtime30.jsx)("span", { style: {
26664
26664
  fontSize: fontSize.xs,
26665
- color: "var(--ggui-color-neutral-500, #6b7280)",
26665
+ color: resolveToneCss("subtle"),
26666
26666
  marginBottom: "4px"
26667
26667
  }, children: description }), children, (error || helperText) && (0, import_jsx_runtime30.jsx)("span", { style: {
26668
26668
  fontSize: fontSize.xs,
26669
- color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-neutral-500, #6b7280)"
26669
+ color: hasError ? "var(--ggui-color-error-500, #ef4444)" : resolveToneCss("subtle")
26670
26670
  }, children: error || helperText })] });
26671
26671
  }
26672
26672
 
@@ -26912,7 +26912,7 @@
26912
26912
  }, children: loading ? (0, import_jsx_runtime34.jsx)("div", { style: { padding: "12px", display: "flex", justifyContent: "center" }, children: (0, import_jsx_runtime34.jsx)(Spinner, { size: 20 }) }) : filteredOptions.length === 0 ? (0, import_jsx_runtime34.jsx)("div", { style: {
26913
26913
  padding: "12px",
26914
26914
  textAlign: "center",
26915
- color: "var(--ggui-color-neutral-500, #6b7280)",
26915
+ color: resolveToneCss("subtle"),
26916
26916
  fontSize: fontSize.sm
26917
26917
  }, children: noResultsText }) : filteredOptions.map((option, index) => (0, import_jsx_runtime34.jsxs)("div", { onClick: () => !option.disabled && handleSelect(option), style: {
26918
26918
  padding: "8px 12px",
@@ -26923,7 +26923,7 @@
26923
26923
  display: "flex",
26924
26924
  alignItems: "center",
26925
26925
  gap: "8px"
26926
- }, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime34.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime34.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime34.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime34.jsx)("div", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: option.description })] })] }, option.value)) })] });
26926
+ }, onMouseEnter: () => setHighlightedIndex(index), children: [option.icon && (0, import_jsx_runtime34.jsx)("span", { style: { flexShrink: 0 }, children: option.icon }), (0, import_jsx_runtime34.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime34.jsx)("div", { children: option.label }), option.description && (0, import_jsx_runtime34.jsx)("div", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: option.description })] })] }, option.value)) })] });
26927
26927
  }
26928
26928
 
26929
26929
  // ../design/dist/components/Breadcrumb.js
@@ -26941,7 +26941,7 @@
26941
26941
  return (0, import_jsx_runtime35.jsxs)(import_react23.Fragment, { children: [index > 0 && (0, import_jsx_runtime35.jsx)("span", { style: { color: "var(--ggui-color-neutral-400, #9ca3af)" }, children: separator }), item.icon && (0, import_jsx_runtime35.jsx)("span", { style: {
26942
26942
  display: "flex",
26943
26943
  alignItems: "center",
26944
- color: isLast ? "var(--ggui-color-onContainer, #111827)" : "var(--ggui-color-neutral-500, #6b7280)"
26944
+ color: isLast ? "var(--ggui-color-onContainer, #111827)" : resolveToneCss("subtle")
26945
26945
  }, children: item.icon }), isLast ? (0, import_jsx_runtime35.jsx)("span", { style: {
26946
26946
  color: "var(--ggui-color-onContainer, #111827)",
26947
26947
  fontWeight: 500
@@ -26954,7 +26954,7 @@
26954
26954
  background: "none",
26955
26955
  border: "none",
26956
26956
  padding: 0,
26957
- color: "var(--ggui-color-neutral-500, #6b7280)",
26957
+ color: resolveToneCss("subtle"),
26958
26958
  cursor: "pointer",
26959
26959
  fontSize: "inherit"
26960
26960
  }, children: item.label })] }, index);
@@ -27700,7 +27700,7 @@
27700
27700
  }
27701
27701
  };
27702
27702
  const timestamp = comment.timestamp instanceof Date ? comment.timestamp.toLocaleString() : comment.timestamp;
27703
- return (0, import_jsx_runtime44.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime44.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime44.jsx)("span", { style: { color: "var(--ggui-color-neutral-500, #6b7280)", fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime44.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: "var(--ggui-color-onContainer, #374151)" }, children: comment.content }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime44.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
27703
+ return (0, import_jsx_runtime44.jsxs)("div", { style: { marginLeft: depth > 0 ? "40px" : 0 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, import_jsx_runtime44.jsx)(Avatar, { name: comment.author.name, src: comment.author.avatar, size: "sm" }), (0, import_jsx_runtime44.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [(0, import_jsx_runtime44.jsx)("span", { style: { fontWeight: 500, fontSize: fontSize.sm }, children: comment.author.name }), (0, import_jsx_runtime44.jsx)("span", { style: { color: resolveToneCss("subtle"), fontSize: fontSize.xs }, children: timestamp })] }), (0, import_jsx_runtime44.jsx)("p", { style: { margin: "4px 0 8px", fontSize: fontSize.sm, color: "var(--ggui-color-onContainer, #374151)" }, children: comment.content }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [comment.reactions?.map((reaction) => (0, import_jsx_runtime44.jsxs)("button", { onClick: () => onReaction?.(comment.id, reaction.emoji), style: {
27704
27704
  padding: "2px 8px",
27705
27705
  border: `1px solid var(--ggui-color-outlineVariant, #e5e7eb)`,
27706
27706
  borderRadius: "12px",
@@ -27710,7 +27710,7 @@
27710
27710
  }, children: [reaction.emoji, " ", reaction.count] }, reaction.emoji)), (0, import_jsx_runtime44.jsx)("button", { onClick: () => setShowReplyInput(!showReplyInput), style: {
27711
27711
  background: "none",
27712
27712
  border: "none",
27713
- color: "var(--ggui-color-neutral-500, #6b7280)",
27713
+ color: resolveToneCss("subtle"),
27714
27714
  fontSize: fontSize.xs,
27715
27715
  cursor: "pointer"
27716
27716
  }, children: "Reply" })] }), showReplyInput && (0, import_jsx_runtime44.jsxs)("div", { style: { marginTop: "12px" }, children: [(0, import_jsx_runtime44.jsx)(TextArea, { value: replyContent, onChange: setReplyContent, placeholder: "Write a reply...", rows: 2 }), (0, import_jsx_runtime44.jsxs)("div", { style: { display: "flex", gap: "8px", marginTop: "8px" }, children: [(0, import_jsx_runtime44.jsx)(Button, { size: "sm", onClick: handleSubmitReply, children: "Reply" }), (0, import_jsx_runtime44.jsx)(Button, { size: "sm", variant: "ghost", onClick: () => setShowReplyInput(false), children: "Cancel" })] })] })] })] }), comment.replies?.map((reply) => (0, import_jsx_runtime44.jsx)("div", { style: { marginTop: "16px" }, children: (0, import_jsx_runtime44.jsx)(CommentItem, { comment: reply, onReply, onReaction, depth: depth + 1 }) }, reply.id))] });
@@ -27768,7 +27768,7 @@
27768
27768
  borderBottom: "1px solid var(--ggui-color-outlineVariant, #e5e7eb)",
27769
27769
  cursor: col.sortable ? "pointer" : void 0,
27770
27770
  width: col.width
27771
- }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime45.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime45.jsx)("tbody", { children: loading ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime45.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.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) => {
27771
+ }, onClick: () => col.sortable && onSort?.(col.key, sortKey === col.key && sortDirection === "asc" ? "desc" : "asc"), children: (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [col.header, col.sortable && sortKey === col.key && (0, import_jsx_runtime45.jsx)(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: 14 })] }) }, col.key))] }) }), (0, import_jsx_runtime45.jsx)("tbody", { children: loading ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center" }, children: (0, import_jsx_runtime45.jsx)(Spinner, { size: 24 }) }) }) : data.length === 0 ? (0, import_jsx_runtime45.jsx)("tr", { children: (0, import_jsx_runtime45.jsx)("td", { colSpan: columns.length + (selectable ? 1 : 0), style: { padding: "48px", textAlign: "center", color: resolveToneCss("subtle") }, children: emptyText }) }) : data.map((row, index) => {
27772
27772
  const key = getRowKey(row, index);
27773
27773
  const isSelected = selectedKeys.includes(key);
27774
27774
  return (0, import_jsx_runtime45.jsxs)("tr", { onClick: () => onRowClick?.(row, index), style: {
@@ -27849,7 +27849,7 @@
27849
27849
  // takes the muted tier itself (ggui#1566).
27850
27850
  ...isOwn ? { opacity: 0.7 } : { color: "var(--ggui-color-onSunken, #52525b)" }
27851
27851
  }, children: [(0, import_jsx_runtime46.jsx)("span", { children: timestamp }), isOwn && message.status && (0, import_jsx_runtime46.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);
27852
- }), typing && (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime46.jsxs)("span", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime46.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime46.jsxs)("div", { style: {
27852
+ }), typing && (0, import_jsx_runtime46.jsx)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: (0, import_jsx_runtime46.jsxs)("span", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: [typing.name, " is typing..."] }) }), (0, import_jsx_runtime46.jsx)("div", { ref: messagesEndRef })] }), (0, import_jsx_runtime46.jsxs)("div", { style: {
27853
27853
  padding: "12px 16px",
27854
27854
  borderTop: `1px solid var(--ggui-color-outlineVariant, #e5e7eb)`,
27855
27855
  display: "flex",
@@ -27977,7 +27977,7 @@
27977
27977
  cursor: disabled ? "not-allowed" : "pointer",
27978
27978
  transition: "all 0.2s",
27979
27979
  opacity: disabled ? 0.5 : 1
27980
- }, children: [(0, import_jsx_runtime48.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime48.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime48.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_runtime48.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_runtime48.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file) => (0, import_jsx_runtime48.jsxs)("div", { style: {
27980
+ }, children: [(0, import_jsx_runtime48.jsx)("input", { ref: inputRef, type: "file", accept, multiple, onChange: (e) => handleFiles(e.target.files), disabled, style: { display: "none" } }), (0, import_jsx_runtime48.jsx)(Icon, { name: "plus", size: 32, tone: "subtle" }), (0, import_jsx_runtime48.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_runtime48.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_runtime48.jsx)("div", { style: { marginTop: "16px", display: "flex", flexDirection: "column", gap: "8px" }, children: files.map((file) => (0, import_jsx_runtime48.jsxs)("div", { style: {
27981
27981
  display: "flex",
27982
27982
  alignItems: "center",
27983
27983
  gap: "12px",
@@ -27992,7 +27992,7 @@
27992
27992
  whiteSpace: "nowrap",
27993
27993
  overflow: "hidden",
27994
27994
  textOverflow: "ellipsis"
27995
- }, children: file.name }), (0, import_jsx_runtime48.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_runtime48.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_runtime48.jsx)(Progress, { value: file.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime48.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file.id), children: (0, import_jsx_runtime48.jsx)(Icon, { name: "x", size: 16 }) })] }, file.id)) })] });
27995
+ }, children: file.name }), (0, import_jsx_runtime48.jsxs)("p", { style: { margin: "2px 0 0", fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: [formatFileSize(file.size), file.error && (0, import_jsx_runtime48.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_runtime48.jsx)(Progress, { value: file.progress, size: "sm", style: { marginTop: "8px" } })] }), (0, import_jsx_runtime48.jsx)(Button, { variant: "ghost", size: "sm", onClick: () => onFileRemove?.(file.id), children: (0, import_jsx_runtime48.jsx)(Icon, { name: "x", size: 16 }) })] }, file.id)) })] });
27996
27996
  }
27997
27997
 
27998
27998
  // ../design/dist/compositions/NotificationCenter.js
@@ -28010,7 +28010,10 @@
28010
28010
  display: "flex",
28011
28011
  gap: "12px",
28012
28012
  padding: "12px",
28013
- backgroundColor: notification.read ? "transparent" : "var(--ggui-color-primaryContainer, #f0f9ff)",
28013
+ // Unread is carried by the dot and the title's weight; the row takes the
28014
+ // ground its muted text is measured on (ggui#1567), not a raised accent
28015
+ // ground where that text falls under AA in dark themes.
28016
+ backgroundColor: notification.read ? "transparent" : "var(--ggui-color-sunken, #f4f4f5)",
28014
28017
  borderRadius: radius.md,
28015
28018
  transition: "background-color 0.15s"
28016
28019
  }, children: [(0, import_jsx_runtime49.jsx)("div", { style: {
@@ -28036,7 +28039,7 @@
28036
28039
  margin: "4px 0 0",
28037
28040
  color: "var(--ggui-color-onSunken, #4b5563)",
28038
28041
  fontSize: fontSize.xs
28039
- }, children: notification.message }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime49.jsx)("span", { style: { color: "var(--ggui-color-neutral-400, #9ca3af)", fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime49.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
28042
+ }, children: notification.message }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "8px" }, children: [(0, import_jsx_runtime49.jsx)("span", { style: { color: resolveToneCss("subtle"), fontSize: fontSize.xs }, children: timestamp }), !notification.read && (0, import_jsx_runtime49.jsx)("button", { onClick: () => onMarkAsRead?.(notification.id), style: {
28040
28043
  background: "none",
28041
28044
  border: "none",
28042
28045
  padding: 0,
@@ -28071,7 +28074,7 @@
28071
28074
  color: "var(--ggui-color-onPrimaryContainer, #0369a1)",
28072
28075
  fontSize: fontSize.xs,
28073
28076
  fontWeight: fontWeight.medium
28074
- }, children: unreadCount })] }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime49.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime49.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime49.jsx)("div", { style: { textAlign: "center", padding: "32px", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: emptyText }) : (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime49.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
28077
+ }, children: unreadCount })] }), (0, import_jsx_runtime49.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [unreadCount > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onMarkAllAsRead, children: "Mark all read" }), notifications.length > 0 && (0, import_jsx_runtime49.jsx)(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: "Clear all" })] })] }), (0, import_jsx_runtime49.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: "8px" }, children: loading ? (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", justifyContent: "center", padding: "32px" }, children: (0, import_jsx_runtime49.jsx)(Spinner, { size: 24 }) }) : notifications.length === 0 ? (0, import_jsx_runtime49.jsx)("div", { style: { textAlign: "center", padding: "32px", color: resolveToneCss("subtle") }, children: emptyText }) : (0, import_jsx_runtime49.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: notifications.map((notification) => (0, import_jsx_runtime49.jsx)(NotificationItem, { notification, onMarkAsRead, onDismiss }, notification.id)) }) })] });
28075
28078
  }
28076
28079
 
28077
28080
  // ../design/dist/compositions/Modal.js
@@ -28261,11 +28264,11 @@
28261
28264
  fontSize: fontSize.base,
28262
28265
  outline: "none",
28263
28266
  backgroundColor: "transparent"
28264
- } })] }) }), (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 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime51.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_runtime51.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime51.jsx)("div", { style: {
28267
+ } })] }) }), (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 }) }) : flatCommands.length === 0 ? (0, import_jsx_runtime51.jsx)("div", { style: { textAlign: "center", padding: "32px", color: resolveToneCss("subtle") }, children: "No commands found" }) : Array.from(filteredCommands.entries()).map(([group, cmds]) => (0, import_jsx_runtime51.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, import_jsx_runtime51.jsx)("div", { style: {
28265
28268
  padding: "8px 12px",
28266
28269
  fontSize: fontSize.xs,
28267
28270
  fontWeight: fontWeight.semibold,
28268
- color: "var(--ggui-color-neutral-500, #6b7280)",
28271
+ color: resolveToneCss("subtle"),
28269
28272
  textTransform: "uppercase",
28270
28273
  letterSpacing: "0.05em"
28271
28274
  }, children: group }), cmds.map((cmd) => {
@@ -28288,12 +28291,12 @@
28288
28291
  color: cmd.disabled ? "var(--ggui-color-neutral-400, #9ca3af)" : "var(--ggui-color-onElevated, #111827)",
28289
28292
  textAlign: "left",
28290
28293
  cursor: cmd.disabled ? "not-allowed" : "pointer"
28291
- }, children: [cmd.icon && (0, import_jsx_runtime51.jsx)("span", { style: { display: "flex", color: "var(--ggui-color-neutral-500, #6b7280)" }, children: cmd.icon }), (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.xs, color: "var(--ggui-color-neutral-500, #6b7280)" }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime51.jsx)("kbd", { style: {
28294
+ }, children: [cmd.icon && (0, import_jsx_runtime51.jsx)("span", { style: { display: "flex", color: resolveToneCss("subtle") }, children: cmd.icon }), (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1 }, children: [(0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.sm }, children: cmd.label }), cmd.description && (0, import_jsx_runtime51.jsx)("div", { style: { fontSize: fontSize.xs, color: resolveToneCss("subtle") }, children: cmd.description })] }), cmd.shortcut && (0, import_jsx_runtime51.jsx)("kbd", { style: {
28292
28295
  padding: "2px 6px",
28293
28296
  backgroundColor: "var(--ggui-color-sunken, #f3f4f6)",
28294
28297
  borderRadius: radius.sm,
28295
28298
  fontSize: fontSize.xs,
28296
- color: "var(--ggui-color-neutral-500, #6b7280)",
28299
+ color: resolveToneCss("subtle"),
28297
28300
  fontFamily: "inherit"
28298
28301
  }, children: cmd.shortcut })] }, cmd.id);
28299
28302
  })] }, group)) }), (0, import_jsx_runtime51.jsxs)("div", { style: {
@@ -28303,7 +28306,7 @@
28303
28306
  alignItems: "center",
28304
28307
  gap: "16px",
28305
28308
  fontSize: fontSize.xs,
28306
- color: "var(--ggui-color-neutral-500, #6b7280)"
28309
+ color: resolveToneCss("subtle")
28307
28310
  }, children: [(0, import_jsx_runtime51.jsx)("span", { children: "\u2191\u2193 Navigate" }), (0, import_jsx_runtime51.jsx)("span", { children: "\u21B5 Select" }), (0, import_jsx_runtime51.jsx)("span", { children: "Esc Close" })] })] })] });
28308
28311
  }
28309
28312
 
@@ -28356,20 +28359,20 @@
28356
28359
  borderTop: "1px solid var(--ggui-color-outlineVariant, #e5e7eb)"
28357
28360
  }, children: [bottomText && (0, import_jsx_runtime52.jsx)("span", { style: {
28358
28361
  fontSize: fontSize.sm,
28359
- color: "var(--ggui-color-neutral-500, #6b7280)",
28362
+ color: resolveToneCss("subtle"),
28360
28363
  lineHeight: lineHeight.normal
28361
28364
  }, children: bottomText }), (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "20px" }, children: [socialLinks?.map((social, idx) => (0, import_jsx_runtime52.jsx)("a", { href: social.href, "aria-label": social.label, style: {
28362
28365
  display: "flex",
28363
28366
  alignItems: "center",
28364
28367
  justifyContent: "center",
28365
- color: "var(--ggui-color-neutral-500, #6b7280)",
28368
+ color: resolveToneCss("subtle"),
28366
28369
  transition: "color 0.15s"
28367
28370
  }, children: social.icon }, idx)), bottomLinks?.map((link, idx) => (0, import_jsx_runtime52.jsx)("a", { href: link.href, onClick: link.onClick ? (e) => {
28368
28371
  e.preventDefault();
28369
28372
  link.onClick?.();
28370
28373
  } : void 0, style: {
28371
28374
  fontSize: fontSize.sm,
28372
- color: "var(--ggui-color-neutral-500, #6b7280)",
28375
+ color: resolveToneCss("subtle"),
28373
28376
  textDecoration: "none",
28374
28377
  transition: "color 0.15s"
28375
28378
  }, children: link.label }, idx))] })] })] });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ggui-ai/ui-visual-tester",
3
- "version": "0.26.0",
4
- "description": "Behavioral validator for ggui-generated component code. Renders a component in real Chromium via Playwright, clicks each action declared in its contract, and verifies the action actually does something — mutating bound state or dispatching to the agent. Catches buttons wired to no-op handlers that structural validators miss. Playwright is an optional peer dependency, injected by the caller.",
3
+ "version": "0.28.0",
4
+ "description": "Behavioral validator for GGUI-generated component code. Renders a component in real Chromium via Playwright, clicks each action declared in its contract, and verifies the action actually does something — mutating bound state or dispatching to the agent. Catches buttons wired to no-op handlers that structural validators miss. Playwright is an optional peer dependency, injected by the caller.",
5
5
  "keywords": [
6
6
  "ggui",
7
7
  "playwright",
@@ -53,9 +53,9 @@
53
53
  "dependencies": {
54
54
  "react": "^19.0.0",
55
55
  "react-dom": "^19.0.0",
56
- "@ggui-ai/design": "0.26.0",
57
- "@ggui-ai/wire": "0.26.0",
58
- "@ggui-ai/protocol": "0.26.0"
56
+ "@ggui-ai/wire": "0.28.0",
57
+ "@ggui-ai/design": "0.28.0",
58
+ "@ggui-ai/protocol": "0.28.0"
59
59
  },
60
60
  "devDependencies": {
61
61
  "@playwright/test": "^1.60.0",