@ggui-ai/dev-stack 0.20.0 → 0.21.0

package/dist/hub-preview/client.js

@@ -21587,14 +21587,29 @@ var easing = {
   easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
   spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
 };
+var motionVar = {
+  duration: {
+    fast: "var(--ggui-motion-duration-fast)",
+    base: "var(--ggui-motion-duration-base)",
+    slow: "var(--ggui-motion-duration-slow)"
+  },
+  easing: {
+    /** The system's ease-in-out — the default for colour, border and size changes. */
+    standard: "var(--ggui-motion-easing-standard)",
+    /** The decelerating arrival — transforms and entrances. */
+    emphasized: "var(--ggui-motion-easing-emphasized)",
+    /** The accelerating departure. */
+    exit: "var(--ggui-motion-easing-exit)"
+  }
+};
 var transition = {
   none: "none",
-  fast: `${duration.fast} ${easing.easeInOut}`,
-  normal: `${duration.normal} ${easing.easeInOut}`,
-  slow: `${duration.slow} ${easing.easeInOut}`,
-  colors: `color ${duration.normal} ${easing.easeInOut}, background-color ${duration.normal} ${easing.easeInOut}, border-color ${duration.normal} ${easing.easeInOut}`,
-  opacity: `opacity ${duration.normal} ${easing.easeInOut}`,
-  transform: `transform ${duration.normal} ${easing.easeOut}`
+  fast: `${motionVar.duration.fast} ${motionVar.easing.standard}`,
+  normal: `${motionVar.duration.base} ${motionVar.easing.standard}`,
+  slow: `${motionVar.duration.slow} ${motionVar.easing.standard}`,
+  colors: `color ${motionVar.duration.base} ${motionVar.easing.standard}, background-color ${motionVar.duration.base} ${motionVar.easing.standard}, border-color ${motionVar.duration.base} ${motionVar.easing.standard}`,
+  opacity: `opacity ${motionVar.duration.base} ${motionVar.easing.standard}`,
+  transform: `transform ${motionVar.duration.base} ${motionVar.easing.emphasized}`
 };
 var sizeStyles = {
   xs: {
@@ -21668,7 +21683,7 @@ function Button({ children, variant = "primary", size = "md", fullWidth, loading
     cursor: isDisabled ? "not-allowed" : "pointer",
     opacity: isDisabled ? 0.5 : 1,
     width: fullWidth ? "100%" : void 0,
-    transition: `background-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}, opacity ${duration.normal} ${easing.easeInOut}`,
+    transition: `background-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}, opacity ${motionVar.duration.base} ${motionVar.easing.standard}`,
     boxShadow: "var(--ggui-shape-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))",
     ...style
   }, ...rest, children: loading ? (0, import_jsx_runtime9.jsx)(Spinner, { size: 16, tone: "inherit" }) : (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [leftIcon, children, rightIcon] }) });
@@ -21709,7 +21724,7 @@ function Input({ label, placeholder, value, onChange, type = "text", error, help
     border: `1px solid ${hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-outline, #d4d4d8)"}`,
     backgroundColor: disabled ? "var(--ggui-color-sunken, #fafafa)" : "var(--ggui-color-sunken, #ffffff)",
     color: "var(--ggui-color-onContainer, #18181b)",
-    transition: `border-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}`,
+    transition: `border-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}`,
     boxSizing: "border-box"
   }, ...rest }), hasMessage && (0, import_jsx_runtime11.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
@@ -21741,7 +21756,7 @@ function TextArea({ label, placeholder, value, onChange, rows = 4, error, helper
     color: "var(--ggui-color-onContainer, #18181b)",
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontFamily: "inherit",
-    transition: `border-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}`,
+    transition: `border-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}`,
     boxSizing: "border-box",
     resize: autoResize ? "none" : "vertical"
   }, ...rest }), (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", justifyContent: "space-between" }, children: [hasMessage && (0, import_jsx_runtime12.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
@@ -21782,7 +21797,7 @@ function Select({ label, value, onChange, options, placeholder, error, helperTex
     backgroundPosition: "right 12px center",
     paddingRight: "36px",
     boxSizing: "border-box",
-    transition: `border-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}`
+    transition: `border-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}`
   }, ...rest, children: [placeholder && (0, import_jsx_runtime13.jsx)("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (0, import_jsx_runtime13.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))] }), hasMessage && (0, import_jsx_runtime13.jsx)("span", { id: messageId, role: hasError ? "alert" : void 0, style: {
     fontSize: "var(--ggui-font-size-xs, 12px)",
     color: hasError ? "var(--ggui-color-error-500, #ef4444)" : "var(--ggui-color-onSunken, #52525b)"
@@ -21821,7 +21836,7 @@ function Checkbox({ label, checked, onChange, disabled, description, indetermina
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    transition: "all 0.2s"
+    transition: `all ${motionVar.duration.base} ${motionVar.easing.standard}`
   }, children: (checked || indeterminate) && (0, import_jsx_runtime14.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { color: "var(--ggui-color-onPrimary, #ffffff)" }, children: indeterminate ? (0, import_jsx_runtime14.jsx)("path", { d: "M2.5 6H9.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) : (0, import_jsx_runtime14.jsx)("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), (label || description) && (0, import_jsx_runtime14.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [label && (0, import_jsx_runtime14.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
     fontWeight: "var(--ggui-font-weight-medium, 500)",
@@ -21859,7 +21874,7 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
     borderRadius: "9999px",
     backgroundColor: checked ? "var(--ggui-color-primary-600, #0284c7)" : "var(--ggui-color-outline, #d4d4d8)",
     position: "relative",
-    transition: `background-color ${duration.normal} ${easing.easeInOut}, box-shadow ${duration.normal} ${easing.easeInOut}`,
+    transition: `background-color ${motionVar.duration.base} ${motionVar.easing.standard}, box-shadow ${motionVar.duration.base} ${motionVar.easing.standard}`,
     flexShrink: 0,
     outline: "none",
     boxShadow: focused ? "0 0 0 3px var(--ggui-color-primary-200, #bae6fd)" : void 0
@@ -21871,7 +21886,7 @@ function Toggle({ label, checked, onChange, disabled, size = "md", style, classN
     position: "absolute",
     top: (config.height - config.knob) / 2,
     left: checked ? config.width - config.knob - (config.height - config.knob) / 2 : (config.height - config.knob) / 2,
-    transition: `left ${duration.normal} ${easing.easeInOut}`,
+    transition: `left ${motionVar.duration.base} ${motionVar.easing.standard}`,
     boxShadow: "var(--ggui-shape-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))"
   } }) }), label && (0, import_jsx_runtime15.jsx)("span", { style: {
     fontSize: "var(--ggui-font-size-sm, 14px)",
@@ -21925,7 +21940,7 @@ function RadioGroup({ label, value, onChange, options, direction = "vertical", d
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      transition: "all 0.2s"
+      transition: `all ${motionVar.duration.base} ${motionVar.easing.standard}`
     }, children: isSelected && (0, import_jsx_runtime16.jsx)("div", { style: {
       width: "8px",
       height: "8px",
@@ -21969,7 +21984,7 @@ function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disa
     height: "6px",
     borderRadius: "3px",
     backgroundColor: disabled ? "var(--ggui-color-outline, #d4d4d8)" : "var(--ggui-color-primary-600, #0284c7)",
-    transition: "width 0.1s"
+    transition: `width ${motionVar.duration.fast} ${motionVar.easing.standard}`
   } }), (0, import_jsx_runtime17.jsx)("input", { id: sliderId, type: "range", min, max, step, value, onChange: (e) => onChange?.(Number(e.target.value)), disabled, "aria-labelledby": label ? labelId : void 0, "aria-label": label ? void 0 : "Slider", "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, style: {
     position: "absolute",
     width: "100%",
@@ -21987,7 +22002,7 @@ function Slider({ label, value = 0, onChange, min = 0, max = 100, step = 1, disa
     backgroundColor: "#ffffff",
     border: `2px solid ${disabled ? "var(--ggui-color-outline, #d4d4d8)" : "var(--ggui-color-primary-600, #0284c7)"}`,
     boxShadow: "var(--ggui-shape-shadow-sm, 0 1px 2px rgba(0,0,0,0.05))",
-    transition: "left 0.1s",
+    transition: `left ${motionVar.duration.fast} ${motionVar.easing.standard}`,
     pointerEvents: "none"
   } })] })] });
 }
@@ -22199,7 +22214,7 @@ function Progress({ value, max = 100, variant = "default", size = "md", label, s
     height: "100%",
     borderRadius: height / 2,
     backgroundColor: barColor,
-    transition: indeterminate ? "none" : "width 0.3s ease",
+    transition: indeterminate ? "none" : `width ${motionVar.duration.slow} ${motionVar.easing.standard}`,
     ...indeterminate ? {
       width: "30%",
       animation: "ggui-progress-indeterminate 1.5s ease-in-out infinite"
@@ -26816,7 +26831,7 @@ function Link({ children, href, external, tone, underline = "hover", style, clas
     color: linkColor,
     textDecoration: underlineStyle,
     cursor: "pointer",
-    transition: "color 0.2s",
+    transition: `color ${motionVar.duration.base} ${motionVar.easing.standard}`,
     ...style
   }, onMouseEnter: (e) => {
     if (underline === "hover") {
@@ -26968,7 +26983,7 @@ function Table({ columns, data, sortKey, sortDirection = "asc", onSort, striped
     cursor: col.sortable ? "pointer" : "default"
   }, children: (0, import_jsx_runtime27.jsxs)("span", { style: { display: "inline-flex", alignItems: "center" }, children: [col.header, col.sortable && sortIndicator(sortKey === col.key, sortDirection)] }) }, col.key)) }) }), (0, import_jsx_runtime27.jsx)("tbody", { children: data.map((row, rowIndex) => (0, import_jsx_runtime27.jsx)("tr", { onMouseEnter: hoverable ? () => setHoveredRow(rowIndex) : void 0, onMouseLeave: hoverable ? () => setHoveredRow(null) : void 0, style: {
     backgroundColor: hoverable && hoveredRow === rowIndex ? "var(--ggui-color-sunken, #fafafa)" : striped && rowIndex % 2 === 1 ? "var(--ggui-color-sunken, #fafafa)" : "transparent",
-    transition: "background-color 0.15s ease"
+    transition: `background-color ${motionVar.duration.fast} ${motionVar.easing.standard}`
   }, children: columns.map((col) => (0, import_jsx_runtime27.jsx)("td", { style: {
     padding: cellPadding,
     textAlign: col.align || "left",
@@ -27038,7 +27053,7 @@ function Tabs({ items, activeKey, onChange, variant = "line", size = "md", fullW
       background: "none",
       border: "none",
       fontWeight: isActive ? "var(--ggui-font-weight-semibold, 600)" : "var(--ggui-font-weight-medium, 500)",
-      transition: `color ${duration.normal} ${easing.easeInOut}, background-color ${duration.normal} ${easing.easeInOut}, border-color ${duration.normal} ${easing.easeInOut}`,
+      transition: `color ${motionVar.duration.base} ${motionVar.easing.standard}, background-color ${motionVar.duration.base} ${motionVar.easing.standard}, border-color ${motionVar.duration.base} ${motionVar.easing.standard}`,
       whiteSpace: "nowrap",
       flex: fullWidth ? 1 : void 0,
       justifyContent: fullWidth ? "center" : void 0
@@ -27320,7 +27335,7 @@ function Toast({ message, variant = "info", title, duration: duration2 = 5e3, on
   }, children: (0, import_jsx_runtime29.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", children: (0, import_jsx_runtime29.jsx)("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] });
 }
 var chevron = (expanded) => (0, import_jsx_runtime30.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style: {
-  transition: `transform ${duration.normal} ${easing.easeInOut}`,
+  transition: `transform ${motionVar.duration.base} ${motionVar.easing.standard}`,
   transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
   flexShrink: 0
 }, children: (0, import_jsx_runtime30.jsx)("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) });
@@ -27393,7 +27408,7 @@ function Accordion({ items, expandedKeys, onChange, multiple = false, variant =
       fontWeight: "var(--ggui-font-weight-medium, 500)",
       color: "var(--ggui-color-onContainer, #18181b)",
       textAlign: "left",
-      transition: `background-color ${duration.fast} ${easing.easeInOut}`
+      transition: `background-color ${motionVar.duration.fast} ${motionVar.easing.standard}`
     }, children: [(0, import_jsx_runtime30.jsx)("span", { children: item.title }), chevron(isExpanded)] }) }), (0, import_jsx_runtime30.jsx)("div", { id: `${uniqueId}-panel-${item.key}`, role: "region", "aria-labelledby": `${uniqueId}-header-${item.key}`, hidden: !isExpanded, style: {
       overflow: "hidden"
     }, children: isExpanded && (0, import_jsx_runtime30.jsx)("div", { style: {
@@ -27552,7 +27567,7 @@ function MenuItem({ label, icon, rightElement, onClick, disabled, active, danger
     fontWeight: active ? fontWeight.medium : fontWeight.normal,
     textAlign: "left",
     cursor: disabled ? "not-allowed" : "pointer",
-    transition: "background-color 0.15s",
+    transition: `background-color ${motionVar.duration.fast} ${motionVar.easing.standard}`,
     ...style
   }, onMouseEnter: (e) => {
     if (!disabled && !active) {
@@ -27852,7 +27867,7 @@ function Pagination({ currentPage, totalPages, onPageChange, showFirstLast = tru
     fontWeight: active ? fontWeight.medium : fontWeight.normal,
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.5 : 1,
-    transition: "all 0.15s"
+    transition: `all ${motionVar.duration.fast} ${motionVar.easing.standard}`
   }, children: page });
   return (0, import_jsx_runtime38.jsxs)("nav", { "aria-label": "Pagination", className, style: {
     display: "flex",
@@ -27911,7 +27926,7 @@ function Marker({ index, state }) {
     justifyContent: "center",
     flexShrink: 0,
     boxSizing: "border-box",
-    transition: "background-color 0.2s, border-color 0.2s, color 0.2s",
+    transition: `background-color ${motionVar.duration.base} ${motionVar.easing.standard}, border-color ${motionVar.duration.base} ${motionVar.easing.standard}, color ${motionVar.duration.base} ${motionVar.easing.standard}`,
     ...markerStyles[state]
   }, children: state === "completed" ? (0, import_jsx_runtime41.jsx)(Icon, { name: "check", size: 16, tone: "inherit" }) : (0, import_jsx_runtime41.jsx)(Text, { is: "span", size: "sm", weight: "semibold", tone: "inherit", children: index + 1 }) });
 }
@@ -29449,6 +29464,14 @@ var consumed_tokens_manifest_default = {
     "--ggui-font-weight-normal",
     "--ggui-font-weight-semibold",
     "--ggui-letter-spacing-heading",
+    "--ggui-motion-duration-base",
+    "--ggui-motion-duration-fast",
+    "--ggui-motion-duration-slow",
+    "--ggui-motion-easing-emphasized",
+    "--ggui-motion-easing-exit",
+    "--ggui-motion-easing-standard",
+    "--ggui-scrim-opacity",
+    "--ggui-scrim-tint",
     "--ggui-shape-radius-control",
     "--ggui-shape-radius-full",
     "--ggui-shape-radius-lg",
@@ -29600,6 +29623,7 @@ var NAMED_SPACING = { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px",
 var SIZE_EXP = { xs: -2, sm: -1, base: 0, lg: 1, xl: 2, "2xl": 3, "3xl": 4, "4xl": 5 };
 var ROLE_STOP = { display: "4xl", h1: "3xl", h2: "2xl", body: "base", label: "xs" };
 var LAYER1_SPACING_UNIT_PX = 4;
+var SCRIM_DEFAULT_OPACITY = "0.45";
 function tokenValue(t) {
   if (t === void 0 || t === null || typeof t !== "object" || !("$value" in t))
     return void 0;
@@ -29631,6 +29655,15 @@ function readToken(t, path, report) {
 function stated(group, key) {
   return tokenValue(group?.[key]);
 }
+function scrimTint(tone) {
+  if (tone === void 0)
+    return void 0;
+  if (tone === "light")
+    return "#ffffff";
+  if (tone === "dark")
+    return "#000000";
+  return tokenValue(tone);
+}
 function familyRamp(group, anchor) {
   const statedStops = {};
   for (const stop of STOPS) {
@@ -29833,6 +29866,16 @@ function deriveThemeVariables(doc, mode, options = {}) {
   const sh = doc.shape?.shadow;
   for (const [key, value] of Object.entries(shadow))
     V[`--ggui-shape-shadow-${key}`] = stated(sh, key) ?? String(value);
+  const md = doc.motion?.duration;
+  const me = doc.motion?.easing;
+  V["--ggui-motion-duration-fast"] = stated(md, "fast") ?? duration.fast;
+  V["--ggui-motion-duration-base"] = stated(md, "base") ?? duration.normal;
+  V["--ggui-motion-duration-slow"] = stated(md, "slow") ?? duration.slow;
+  V["--ggui-motion-easing-standard"] = stated(me, "standard") ?? easing.easeInOut;
+  V["--ggui-motion-easing-emphasized"] = stated(me, "emphasized") ?? easing.easeOut;
+  V["--ggui-motion-easing-exit"] = stated(me, "exit") ?? easing.easeIn;
+  V["--ggui-scrim-tint"] = scrimTint(doc.scrim?.tone) ?? V["--ggui-color-ground"];
+  V["--ggui-scrim-opacity"] = tokenValue(doc.scrim?.opacity) ?? SCRIM_DEFAULT_OPACITY;
   if (missing.length > 0)
     throw new ThemeDocumentInvalidError(missing);
   const floor = new Set(NON_THEME_DEFINABLE_TOKENS);
@@ -33025,6 +33068,7 @@ var TOKENS_EXPORTS = [
   "duration",
   "easing",
   "transition",
+  "motionVar",
   "keyframes",
   "thinkingAnimation",
   "thinkingKeyframes",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ggui-ai/dev-stack",
-  "version": "0.20.0",
+  "version": "0.21.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",
@@ -28,9 +28,9 @@
   "dependencies": {
     "chokidar": "^4.0.3",
     "esbuild": "^0.28.2",
-    "@ggui-ai/agent-runtime": "0.20.0",
-    "@ggui-ai/project-config": "0.20.0",
-    "@ggui-ai/ui-registry": "0.20.0"
+    "@ggui-ai/agent-runtime": "0.21.0",
+    "@ggui-ai/project-config": "0.21.0",
+    "@ggui-ai/ui-registry": "0.21.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.20.0",
-    "@ggui-ai/mcp-apps-react": "0.20.0",
-    "@ggui-ai/wire": "0.20.0"
+    "@ggui-ai/mcp-apps-react": "0.21.0",
+    "@ggui-ai/wire": "0.21.0",
+    "@ggui-ai/design": "0.21.0"
   },
   "repository": {
     "type": "git",