@stigmer/react 3.9.0 → 3.11.0

package/src/datastore/RecordFormPanel.tsx

@@ -234,15 +234,15 @@ export function RecordFormPanel({
           : `Insert record into ${collection.name}`
       }
       className={cn(
-        "fixed inset-0 z-50 m-auto w-full max-w-md rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
-        "backdrop:bg-black/50",
-        "open:animate-in open:fade-in-0 open:zoom-in-95",
+        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
+        "stg:backdrop:bg-black/50",
+        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
       )}
     >
-      <div className="flex max-h-[80vh] flex-col gap-4 overflow-y-auto p-6">
-        <h3 className="text-base font-semibold text-foreground">
+      <div className="stg:flex stg:max-h-[80vh] stg:flex-col stg:gap-4 stg:overflow-y-auto stg:p-6">
+        <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
           {isEdit ? "Edit record" : "Insert record"}
-          <span className="ml-2 font-mono text-xs font-normal text-muted-foreground">
+          <span className="stg:ml-2 stg:font-mono stg:text-xs stg:font-normal stg:text-muted-foreground">
             {collection.name}
           </span>
         </h3>
@@ -250,7 +250,7 @@ export function RecordFormPanel({
         {bannerError && (
           <div
             role="alert"
-            className="rounded-md border border-destructive bg-card px-3 py-2 text-sm text-destructive"
+            className="stg:rounded-md stg:border stg:border-destructive stg:bg-card stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
           >
             {bannerError}
           </div>
@@ -258,7 +258,7 @@ export function RecordFormPanel({
 
         {isEdit && record && <SystemFieldsSummary record={record} />}
 
-        <div className="flex flex-col gap-3">
+        <div className="stg:flex stg:flex-col stg:gap-3">
           {collection.fields.map((field) => (
             <FieldRow
               key={field.name}
@@ -273,9 +273,9 @@ export function RecordFormPanel({
           ))}
         </div>
 
-        <div className="flex items-center justify-end gap-2">
+        <div className="stg:flex stg:items-center stg:justify-end stg:gap-2">
           {missingRequired.length > 0 && (
-            <span className="mr-auto text-xs text-muted-foreground">
+            <span className="stg:mr-auto stg:text-xs stg:text-muted-foreground">
               Required: {missingRequired.join(", ")}
             </span>
           )}
@@ -283,9 +283,9 @@ export function RecordFormPanel({
             type="button"
             onClick={() => onOpenChange(false)}
             className={cn(
-              "rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-foreground",
-              "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-foreground",
+              "stg:hover:bg-accent stg:hover:text-accent-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             Cancel
@@ -295,10 +295,10 @@ export function RecordFormPanel({
             onClick={handleSubmit}
             disabled={isSaving || missingRequired.length > 0}
             className={cn(
-              "rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground",
-              "hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:bg-primary stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-primary-foreground",
+              "stg:hover:bg-primary-hover",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             {isSaving ? "Saving…" : isEdit ? "Save changes" : "Insert"}
@@ -362,12 +362,12 @@ function FieldRow({
   const showClear = isEdit && !field.required && !cleared && value !== undefined;
 
   return (
-    <div className="flex flex-col gap-1">
-      <div className="flex items-baseline gap-1">
-        <label htmlFor={controlId} className="text-xs font-medium text-muted-foreground">
+    <div className="stg:flex stg:flex-col stg:gap-1">
+      <div className="stg:flex stg:items-baseline stg:gap-1">
+        <label htmlFor={controlId} className="stg:text-xs stg:font-medium stg:text-muted-foreground">
           {field.name}
           {field.required && (
-            <span className="text-destructive" aria-label="required">
+            <span className="stg:text-destructive" aria-label="required">
               {" "}
               *
             </span>
@@ -379,25 +379,25 @@ function FieldRow({
             onClick={onClear}
             aria-label={`Clear ${field.name}`}
             className={cn(
-              "ml-auto text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "stg:ml-auto stg:text-xs stg:text-muted-foreground stg:underline-offset-2 stg:hover:text-foreground stg:hover:underline",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
             )}
           >
             Clear
           </button>
         )}
         {cleared && (
-          <span className="ml-auto text-xs italic text-muted-foreground">
+          <span className="stg:ml-auto stg:text-xs stg:italic stg:text-muted-foreground">
             will be cleared
           </span>
         )}
       </div>
       {field.description && (
-        <p className="text-xs leading-tight text-muted-foreground">{field.description}</p>
+        <p className="stg:text-xs stg:leading-tight stg:text-muted-foreground">{field.description}</p>
       )}
       <FieldValueControl id={controlId} field={field} value={value} onChange={onChange} />
       {error && (
-        <span role="alert" className="text-xs text-destructive">
+        <span role="alert" className="stg:text-xs stg:text-destructive">
           {error}
         </span>
       )}
@@ -408,23 +408,23 @@ function FieldRow({
 /** Read-only envelope columns shown in edit mode; never editable, never submitted. */
 function SystemFieldsSummary({ record }: { readonly record: RecordEnvelope }) {
   return (
-    <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md bg-muted p-3 text-xs">
-      <dt className="font-medium text-muted-foreground">id</dt>
-      <dd className="truncate font-mono text-foreground">{record.id}</dd>
-      <dt className="font-medium text-muted-foreground">created_at</dt>
-      <dd className="font-mono text-foreground">
+    <dl className="stg:grid stg:grid-cols-[auto_1fr] stg:gap-x-3 stg:gap-y-1 stg:rounded-md stg:bg-muted stg:p-3 stg:text-xs">
+      <dt className="stg:font-medium stg:text-muted-foreground">id</dt>
+      <dd className="stg:truncate stg:font-mono stg:text-foreground">{record.id}</dd>
+      <dt className="stg:font-medium stg:text-muted-foreground">created_at</dt>
+      <dd className="stg:font-mono stg:text-foreground">
         {record.createdAt
           ? formatSystemTimestamp(timestampDate(record.createdAt).toISOString())
           : ""}
       </dd>
-      <dt className="font-medium text-muted-foreground">updated_at</dt>
-      <dd className="font-mono text-foreground">
+      <dt className="stg:font-medium stg:text-muted-foreground">updated_at</dt>
+      <dd className="stg:font-mono stg:text-foreground">
         {record.updatedAt
           ? formatSystemTimestamp(timestampDate(record.updatedAt).toISOString())
           : ""}
       </dd>
-      <dt className="font-medium text-muted-foreground">created_by</dt>
-      <dd className="truncate font-mono text-foreground">
+      <dt className="stg:font-medium stg:text-muted-foreground">created_by</dt>
+      <dd className="stg:truncate stg:font-mono stg:text-foreground">
         {formatSubject(record.createdBy)}
       </dd>
     </dl>

package/src/dependency-graph/DependencyGraph.tsx

@@ -98,13 +98,13 @@ export function DependencyGraph({
   const { root } = tree;
 
   return (
-    <div className={cn("py-2", className)}>
-      <div className="mb-3 flex items-center gap-2 px-2">
-        <TreeIcon className="size-4 text-muted-foreground" />
-        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+    <div className={cn("stg:py-2", className)}>
+      <div className="stg:mb-3 stg:flex stg:items-center stg:gap-2 stg:px-2">
+        <TreeIcon className="stg:size-4 stg:text-muted-foreground" />
+        <h3 className="stg:text-xs stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           Dependency Tree
         </h3>
-        <span className="text-xs text-muted-foreground">
+        <span className="stg:text-xs stg:text-muted-foreground">
           {tree.nodeCount} {tree.nodeCount === 1 ? "node" : "nodes"}
         </span>
       </div>
@@ -114,7 +114,7 @@ export function DependencyGraph({
         role="tree"
         aria-label={`Dependencies of ${root.label}`}
         onKeyDown={handleKeyDown}
-        className="rounded-lg border border-border p-2"
+        className="stg:rounded-lg stg:border stg:border-border stg:p-2"
       >
         <DependencyTreeNode
           node={root}

package/src/dependency-graph/DependencyTreeNode.tsx

@@ -72,34 +72,34 @@ export function DependencyTreeNode({
   );
 
   const content = (
-    <div className="flex min-w-0 items-center gap-2">
+    <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-2">
       {isCollapsible && (
         <ChevronIcon
           className={cn(
-            "size-3.5 shrink-0 text-muted-foreground transition-transform",
-            expanded && "rotate-90",
+            "stg:size-3.5 stg:shrink-0 stg:text-muted-foreground stg:transition-transform",
+            expanded && "stg:rotate-90",
           )}
         />
       )}
-      <NodeIcon kind={node.kind} className="size-4 shrink-0 text-muted-foreground" />
+      <NodeIcon kind={node.kind} className="stg:size-4 stg:shrink-0 stg:text-muted-foreground" />
       {!isRoot && (
         <span
           className={cn(
-            "shrink-0 rounded px-1.5 py-px text-[10px] font-medium leading-tight",
+            "stg:shrink-0 stg:rounded stg:px-1.5 stg:py-px stg:text-[10px] stg:font-medium stg:leading-tight",
             kindBadgeClasses(node.kind),
           )}
         >
           {KIND_LABELS[node.kind]}
         </span>
       )}
-      <span className="min-w-0 truncate text-sm font-medium text-foreground">
+      <span className="stg:min-w-0 stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
         {node.qualifiedLabel ?? node.label}
       </span>
       {node.metadata &&
         Object.entries(node.metadata).map(([key, value]) => (
           <span
             key={key}
-            className="shrink-0 text-xs text-muted-foreground"
+            className="stg:shrink-0 stg:text-xs stg:text-muted-foreground"
           >
             {value}
           </span>
@@ -116,8 +116,8 @@ export function DependencyTreeNode({
       role="treeitem"
       aria-expanded={isCollapsible ? expanded : isAlwaysExpanded ? true : undefined}
       className={cn(
-        "list-none",
-        isChild && "relative before:absolute before:left-[-12px] before:top-[14px] before:h-px before:w-3 before:bg-border before:content-['']",
+        "stg:list-none",
+        isChild && "stg:relative stg:before:absolute stg:before:left-[-12px] stg:before:top-[14px] stg:before:h-px stg:before:w-3 stg:before:bg-border stg:before:content-['']",
       )}
     >
       {isInteractive ? (
@@ -127,15 +127,15 @@ export function DependencyTreeNode({
           onKeyDown={handleKeyDown}
           tabIndex={-1}
           className={cn(
-            "flex w-full items-center rounded-md px-2 py-1.5 text-left transition-colors",
-            "hover:bg-accent-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            "stg:flex stg:w-full stg:items-center stg:rounded-md stg:px-2 stg:py-1.5 stg:text-left stg:transition-colors",
+            "stg:hover:bg-accent-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
           )}
         >
           {content}
         </button>
       ) : (
-        <div className="flex items-center px-2 py-1.5">
+        <div className="stg:flex stg:items-center stg:px-2 stg:py-1.5">
           {content}
         </div>
       )}
@@ -143,8 +143,8 @@ export function DependencyTreeNode({
       {node.description && !isRoot && (
         <p
           className={cn(
-            "px-2 pb-1 text-xs text-muted-foreground",
-            isCollapsible ? "ml-[calc(0.5rem+14px+0.5rem)]" : "ml-2",
+            "stg:px-2 stg:pb-1 stg:text-xs stg:text-muted-foreground",
+            isCollapsible ? "stg:ml-[calc(0.5rem+14px+0.5rem)]" : "stg:ml-2",
           )}
         >
           {node.description}
@@ -154,7 +154,7 @@ export function DependencyTreeNode({
       {showChildren && (
         <ul
           role="group"
-          className="relative ml-[11px] border-l border-border pl-3"
+          className="stg:relative stg:ml-[11px] stg:border-l stg:border-border stg:pl-3"
         >
           {node.children.map((child) => (
             <DependencyTreeNode
@@ -178,17 +178,17 @@ export function DependencyTreeNode({
 function kindBadgeClasses(kind: NodeKind): string {
   switch (kind) {
     case "mcp-server":
-      return "bg-[var(--stgm-status-running-subtle)] text-[var(--stgm-status-running)]";
+      return "stg:bg-[var(--stgm-status-running-subtle)] stg:text-[var(--stgm-status-running)]";
     case "skill":
-      return "bg-[var(--stgm-status-pending-subtle)] text-[var(--stgm-status-pending)]";
+      return "stg:bg-[var(--stgm-status-pending-subtle)] stg:text-[var(--stgm-status-pending)]";
     // Badges borrow status hues as category colors (skill=pending,
     // sub-agent=ready); datastore takes the remaining distinct hue.
     case "datastore":
-      return "bg-[var(--stgm-status-degraded-subtle)] text-[var(--stgm-status-degraded)]";
+      return "stg:bg-[var(--stgm-status-degraded-subtle)] stg:text-[var(--stgm-status-degraded)]";
     case "sub-agent":
-      return "bg-[var(--stgm-status-ready-subtle)] text-[var(--stgm-status-ready)]";
+      return "stg:bg-[var(--stgm-status-ready-subtle)] stg:text-[var(--stgm-status-ready)]";
     case "agent":
-      return "bg-muted text-muted-foreground";
+      return "stg:bg-muted stg:text-muted-foreground";
   }
 }
 

package/src/empty-state/EmptyState.tsx

@@ -54,23 +54,23 @@ export function EmptyState({
     <div
       role={resolved.role}
       className={cn(
-        "flex flex-col items-center gap-3 py-12 text-center",
+        "stg:flex stg:flex-col stg:items-center stg:gap-3 stg:py-12 stg:text-center",
         className,
       )}
     >
-      <div className="text-muted-foreground-faint">
+      <div className="stg:text-muted-foreground-faint">
         {icon ?? resolved.defaultIcon}
       </div>
-      <div className="flex flex-col gap-1">
-        <p className="text-sm font-medium text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:gap-1">
+        <p className="stg:text-sm stg:font-medium stg:text-muted-foreground">
           {resolved.title}
         </p>
-        <p className="max-w-sm text-xs text-muted-foreground-subtle">
+        <p className="stg:max-w-sm stg:text-xs stg:text-muted-foreground-subtle">
           {resolved.description}
         </p>
       </div>
       {children
-        ? <div className="mt-1">{children}</div>
+        ? <div className="stg:mt-1">{children}</div>
         : action && (
           <Button
             // A retry after an error is a recovery affordance, not the
@@ -78,7 +78,7 @@ export function EmptyState({
             variant={variant === "error" ? "outline" : "primary"}
             icon={action.icon}
             onClick={action.onClick}
-            className="mt-1"
+            className="stg:mt-1"
           >
             {action.label}
           </Button>

package/src/empty-state/useEmptyState.ts

@@ -2,7 +2,7 @@ import { useMemo, createElement } from "react";
 import { Package, SearchX, Lock, AlertCircle } from "lucide-react";
 import type { UseEmptyStateOptions, UseEmptyStateReturn } from "./types.js";
 
-const ICON_CLASSES = "h-10 w-10";
+const ICON_CLASSES = "stg:h-10 stg:w-10";
 
 function resolveDefaults(
   variant: UseEmptyStateOptions["variant"],

package/src/environment/CreateEnvironmentForm.tsx

@@ -76,12 +76,12 @@ export function CreateEnvironmentForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className={cn("space-y-3", className)}>
-      <div className="space-y-2">
-        <div className="space-y-1">
+    <form onSubmit={handleSubmit} className={cn("stg:space-y-3", className)}>
+      <div className="stg:space-y-2">
+        <div className="stg:space-y-1">
           <label
             htmlFor="stgm-new-env-name"
-            className="text-xs font-medium text-foreground"
+            className="stg:text-xs stg:font-medium stg:text-foreground"
           >
             Name
           </label>
@@ -95,21 +95,21 @@ export function CreateEnvironmentForm({
             autoFocus
             required
             className={cn(
-              "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+              "stg:placeholder:text-muted-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           />
         </div>
 
-        <div className="space-y-1">
+        <div className="stg:space-y-1">
           <label
             htmlFor="stgm-new-env-desc"
-            className="text-xs font-medium text-muted-foreground"
+            className="stg:text-xs stg:font-medium stg:text-muted-foreground"
           >
             Description{" "}
-            <span className="text-muted-foreground-subtle">(optional)</span>
+            <span className="stg:text-muted-foreground-subtle">(optional)</span>
           </label>
           <input
             id="stgm-new-env-desc"
@@ -119,29 +119,29 @@ export function CreateEnvironmentForm({
             placeholder="What is this environment for?"
             disabled={isCreating}
             className={cn(
-              "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-              "placeholder:text-muted-foreground",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+              "stg:placeholder:text-muted-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           />
         </div>
       </div>
 
       {error && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -154,9 +154,9 @@ export function CreateEnvironmentForm({
             onClick={onCancel}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -181,7 +181,7 @@ function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />