@stigmer/react 3.9.0 → 3.11.0

package/src/resource-detail/ResourceDetailShell.tsx

@@ -56,11 +56,11 @@ export function ResourceDetailShell({
   const hasTabs = tabs != null && tabs.length > 0;
 
   return (
-    <div className={cn("flex flex-col gap-6", className)}>
+    <div className={cn("stg:flex stg:flex-col stg:gap-6", className)}>
       {headerBanner}
 
       {/* Header + Action bar row */}
-      <div className="flex items-start justify-between gap-4">
+      <div className="stg:flex stg:items-start stg:justify-between stg:gap-4">
         <Header
           header={header}
           visibilityControl={visibilityControl}
@@ -69,7 +69,7 @@ export function ResourceDetailShell({
         <ResourceActionBar
           primaryAction={primaryAction}
           actions={actions}
-          className="shrink-0"
+          className="stg:shrink-0"
         />
       </div>
 
@@ -121,25 +121,25 @@ function Header({
   const showSlug = slug && slug !== name && !qualifiedSlug;
 
   return (
-    <div className="flex min-w-0 items-start gap-3">
+    <div className="stg:flex stg:min-w-0 stg:items-start stg:gap-3">
       {iconUrl ? (
         <img
           src={iconUrl}
           alt=""
-          className="mt-0.5 size-8 shrink-0 rounded object-cover"
+          className="stg:mt-0.5 stg:size-8 stg:shrink-0 stg:rounded stg:object-cover"
         />
       ) : icon ? (
-        <span className="mt-1 shrink-0">{icon}</span>
+        <span className="stg:mt-1 stg:shrink-0">{icon}</span>
       ) : null}
-      <div className="min-w-0 flex-1">
-        <div className="flex items-center gap-2">
+      <div className="stg:min-w-0 stg:flex-1">
+        <div className="stg:flex stg:items-center stg:gap-2">
           {nameElement ?? (
-            <h2 className="truncate text-lg font-semibold text-foreground">
+            <h2 className="stg:truncate stg:text-lg stg:font-semibold stg:text-foreground">
               {name}
             </h2>
           )}
           {showSlug && (
-            <code className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+            <code className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-xs stg:font-medium stg:text-muted-foreground">
               {slug}
             </code>
           )}
@@ -152,11 +152,11 @@ function Header({
           {visibilityControl}
         </div>
         {qualifiedSlug && (
-          <span className="mt-0.5 block truncate font-mono text-xs text-muted-foreground">
+          <span className="stg:mt-0.5 stg:block stg:truncate stg:font-mono stg:text-xs stg:text-muted-foreground">
             {qualifiedSlug}
           </span>
         )}
-        <div className="mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-muted-foreground">
+        <div className="stg:mt-0.5 stg:flex stg:flex-wrap stg:items-center stg:gap-x-1.5 stg:text-xs stg:text-muted-foreground">
           {org && <span>{org}</span>}
           {metaExtra}
           {createdAt && (
@@ -173,7 +173,7 @@ function Header({
           )}
         </div>
         {description && (
-          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
+          <p className="stg:mt-2 stg:text-sm stg:text-muted-foreground">{description}</p>
         )}
       </div>
     </div>
@@ -186,7 +186,7 @@ function Header({
 
 function Dot() {
   return (
-    <span className="shrink-0" aria-hidden="true">
+    <span className="stg:shrink-0" aria-hidden="true">
       {"\u00B7"}
     </span>
   );

package/src/resource-detail/Section.tsx

@@ -39,17 +39,17 @@ export function Section({
 }: SectionProps) {
   return (
     <section className={className} data-scroll-target={scrollTarget}>
-      <div className="mb-2 flex items-center gap-2">
-        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+      <div className="stg:mb-2 stg:flex stg:items-center stg:gap-2">
+        <h3 className="stg:text-xs stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           {title}
         </h3>
         {count != null && count > 0 && (
-          <span className="inline-flex size-5 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
+          <span className="stg:inline-flex stg:size-5 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:text-[10px] stg:font-semibold stg:text-muted-foreground">
             {count}
           </span>
         )}
         {(headerActions || onEdit) && (
-          <div className="ml-auto flex items-center gap-1">
+          <div className="stg:ml-auto stg:flex stg:items-center stg:gap-1">
             {headerActions}
             {onEdit && (
               <button
@@ -57,19 +57,19 @@ export function Section({
                 onClick={onEdit}
                 aria-label={`Edit ${title.toLowerCase()}`}
                 className={cn(
-                  "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground",
-                  "hover:bg-accent-hover hover:text-foreground",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  "transition-colors",
+                  "stg:inline-flex stg:size-6 stg:items-center stg:justify-center stg:rounded-md stg:text-muted-foreground",
+                  "stg:hover:bg-accent-hover stg:hover:text-foreground",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                  "stg:transition-colors",
                 )}
               >
-                <PencilIcon className="size-3.5" />
+                <PencilIcon className="stg:size-3.5" />
               </button>
             )}
           </div>
         )}
       </div>
-      <div className="overflow-hidden rounded-lg border border-border">
+      <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border">
         {children}
       </div>
     </section>

package/src/resource-workbench/components/BulkActionBar.tsx

@@ -53,17 +53,17 @@ export function BulkActionBar<TData>({
       aria-label="Bulk actions"
       aria-live="polite"
       className={cn(
-        "flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-2 shadow-md",
+        "stg:flex stg:items-center stg:gap-3 stg:rounded-lg stg:border stg:border-border stg:bg-card stg:px-4 stg:py-2 stg:shadow-md",
         className,
       )}
     >
-      <span className="text-xs font-medium text-foreground">
+      <span className="stg:text-xs stg:font-medium stg:text-foreground">
         {selectedCount} {selectedCount === 1 ? "item" : "items"} selected
       </span>
 
-      <span className="h-4 w-px bg-border" aria-hidden="true" />
+      <span className="stg:h-4 stg:w-px stg:bg-border" aria-hidden="true" />
 
-      <div className="flex items-center gap-1">
+      <div className="stg:flex stg:items-center stg:gap-1">
         {actions.map((action) => (
           <BulkActionButton
             key={action.id}
@@ -77,9 +77,9 @@ export function BulkActionBar<TData>({
         type="button"
         onClick={onCancel}
         className={cn(
-          "ml-auto text-xs text-muted-foreground transition-colors",
-          "hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm",
+          "stg:ml-auto stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:text-foreground",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm",
         )}
       >
         Cancel
@@ -103,16 +103,16 @@ function BulkActionButton<TData>({
       disabled={action.disabled}
       onClick={() => action.onAction(selectedItems)}
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:transition-colors",
+        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         isDestructive
-          ? "text-destructive hover:bg-destructive-subtle"
-          : "text-foreground hover:bg-accent-hover",
+          ? "stg:text-destructive stg:hover:bg-destructive-subtle"
+          : "stg:text-foreground stg:hover:bg-accent-hover",
       )}
     >
       {action.icon && (
-        <span className="shrink-0" aria-hidden="true">
+        <span className="stg:shrink-0" aria-hidden="true">
           {action.icon}
         </span>
       )}

package/src/resource-workbench/components/ColumnHeader.tsx

@@ -42,7 +42,7 @@ export function ColumnHeader({
       <th
         scope="col"
         className={cn(
-          "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+          "stg:px-3 stg:py-2 stg:text-left stg:text-xs stg:font-medium stg:text-muted-foreground",
           className,
         )}
       >
@@ -56,7 +56,7 @@ export function ColumnHeader({
       scope="col"
       aria-sort={ariaSort}
       className={cn(
-        "px-3 py-2 text-left text-xs font-medium text-muted-foreground",
+        "stg:px-3 stg:py-2 stg:text-left stg:text-xs stg:font-medium stg:text-muted-foreground",
         className,
       )}
     >
@@ -64,10 +64,10 @@ export function ColumnHeader({
         type="button"
         onClick={onSort}
         className={cn(
-          "inline-flex items-center gap-1 rounded-sm px-0.5 py-0.5 -mx-0.5",
-          "hover:text-foreground transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          sortDirection && "text-foreground",
+          "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-sm stg:px-0.5 stg:py-0.5 stg:-mx-0.5",
+          "stg:hover:text-foreground stg:transition-colors",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          sortDirection && "stg:text-foreground",
         )}
       >
         {label}
@@ -94,9 +94,9 @@ function SortIndicator({
       strokeLinejoin="round"
       aria-hidden="true"
       className={cn(
-        "shrink-0 transition-transform",
-        !direction && "opacity-0 group-hover:opacity-40",
-        direction === "desc" && "rotate-180",
+        "stg:shrink-0 stg:transition-transform",
+        !direction && "stg:opacity-0 stg:group-hover:opacity-40",
+        direction === "desc" && "stg:rotate-180",
       )}
     >
       <path d="M6 2.5v7M3 6.5l3-4 3 4" />

package/src/resource-workbench/components/FilterBar.tsx

@@ -49,7 +49,7 @@ export function FilterBar({
     <div
       role="toolbar"
       aria-label="Active filters"
-      className={cn("flex flex-wrap items-center gap-1.5", className)}
+      className={cn("stg:flex stg:flex-wrap stg:items-center stg:gap-1.5", className)}
     >
       {filters.map((filter) => {
         const def = defMap.get(filter.filterId);
@@ -71,9 +71,9 @@ export function FilterBar({
           type="button"
           onClick={onClearAll}
           className={cn(
-            "text-xs text-muted-foreground transition-colors",
-            "hover:text-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm",
+            "stg:text-xs stg:text-muted-foreground stg:transition-colors",
+            "stg:hover:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm",
           )}
         >
           Clear all
@@ -99,19 +99,19 @@ function FilterChip({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground",
+        "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:bg-muted stg:px-2 stg:py-0.5 stg:text-xs stg:text-muted-foreground",
       )}
     >
-      <span className="font-medium">{label}:</span>
+      <span className="stg:font-medium">{label}:</span>
       <span>{value}</span>
       <button
         type="button"
         onClick={onRemove}
         aria-label={`Remove ${label} filter`}
         className={cn(
-          "ml-0.5 inline-flex items-center justify-center rounded-sm p-0.5",
-          "text-muted-foreground-subtle hover:text-foreground hover:bg-accent-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "stg:ml-0.5 stg:inline-flex stg:items-center stg:justify-center stg:rounded-sm stg:p-0.5",
+          "stg:text-muted-foreground-subtle stg:hover:text-foreground stg:hover:bg-accent-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
         )}
       >
         <XIcon />

package/src/resource-workbench/components/ResourceAvatar.tsx

@@ -22,20 +22,20 @@ export interface ResourceAvatarProps {
 }
 
 const AVATAR_COLORS = [
-  "bg-[#6366f1]",
-  "bg-[#8b5cf6]",
-  "bg-[#a855f7]",
-  "bg-[#d946ef]",
-  "bg-[#ec4899]",
-  "bg-[#f43f5e]",
-  "bg-[#ef4444]",
-  "bg-[#f97316]",
-  "bg-[#eab308]",
-  "bg-[#22c55e]",
-  "bg-[#14b8a6]",
-  "bg-[#06b6d4]",
-  "bg-[#3b82f6]",
-  "bg-[#2563eb]",
+  "stg:bg-[#6366f1]",
+  "stg:bg-[#8b5cf6]",
+  "stg:bg-[#a855f7]",
+  "stg:bg-[#d946ef]",
+  "stg:bg-[#ec4899]",
+  "stg:bg-[#f43f5e]",
+  "stg:bg-[#ef4444]",
+  "stg:bg-[#f97316]",
+  "stg:bg-[#eab308]",
+  "stg:bg-[#22c55e]",
+  "stg:bg-[#14b8a6]",
+  "stg:bg-[#06b6d4]",
+  "stg:bg-[#3b82f6]",
+  "stg:bg-[#2563eb]",
 ] as const;
 
 function hashSlug(slug: string): number {
@@ -47,8 +47,8 @@ function hashSlug(slug: string): number {
 }
 
 const SIZE_CLASSES = {
-  sm: "size-6 text-[10px]",
-  md: "size-8 text-xs",
+  sm: "stg:size-6 stg:text-[10px]",
+  md: "stg:size-8 stg:text-xs",
 } as const;
 
 /**
@@ -76,7 +76,7 @@ export function ResourceAvatar({
     return (
       <span
         className={cn(
-          "inline-flex shrink-0 items-center justify-center rounded-full bg-muted",
+          "stg:inline-flex stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:bg-muted",
           sizeClass,
           className,
         )}
@@ -84,7 +84,7 @@ export function ResourceAvatar({
         <img
           src={iconUrl}
           alt=""
-          className="size-4/5 object-contain"
+          className="stg:size-4/5 stg:object-contain"
         />
       </span>
     );
@@ -97,7 +97,7 @@ export function ResourceAvatar({
     <span
       aria-hidden="true"
       className={cn(
-        "inline-flex shrink-0 items-center justify-center rounded-full font-medium text-white",
+        "stg:inline-flex stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:font-medium stg:text-white",
         sizeClass,
         colorClass,
         className,

package/src/resource-workbench/components/ResourceCards.tsx

@@ -58,7 +58,7 @@ export function ResourceCards<TData>({
       role="list"
       aria-label={ariaLabel}
       className={cn(
-        "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        "stg:grid stg:grid-cols-1 stg:gap-3 stg:sm:grid-cols-2 stg:lg:grid-cols-3",
         className,
       )}
     >
@@ -88,14 +88,14 @@ export function ResourceCards<TData>({
                 : undefined
             }
             className={cn(
-              "relative flex rounded-lg border border-border bg-card p-4 transition-colors",
-              isSelected && "border-primary/40 bg-primary-subtle",
-              isClickable && "cursor-pointer hover:border-primary/40 hover:bg-accent-hover",
-              isClickable && "focus-within:ring-2 focus-within:ring-ring",
+              "stg:relative stg:flex stg:rounded-lg stg:border stg:border-border stg:bg-card stg:p-4 stg:transition-colors",
+              isSelected && "stg:border-primary/40 stg:bg-primary-subtle",
+              isClickable && "stg:cursor-pointer stg:hover:border-primary/40 stg:hover:bg-accent-hover",
+              isClickable && "stg:focus-within:ring-2 stg:focus-within:ring-ring",
             )}
           >
             {enableSelection && onToggleSelection && (
-              <div className="absolute left-2 top-2">
+              <div className="stg:absolute stg:left-2 stg:top-2">
                 <SelectionCheckbox
                   checked={isSelected}
                   onChange={() => onToggleSelection(id)}
@@ -103,11 +103,11 @@ export function ResourceCards<TData>({
                 />
               </div>
             )}
-            <div className={cn("min-w-0 flex-1", enableSelection && "pl-5")}>
+            <div className={cn("stg:min-w-0 stg:flex-1", enableSelection && "stg:pl-5")}>
               {renderCard(item, index)}
             </div>
             {renderCardAction && (
-              <div className="ml-2 shrink-0" onClick={(e) => e.stopPropagation()}>
+              <div className="stg:ml-2 stg:shrink-0" onClick={(e) => e.stopPropagation()}>
                 {renderCardAction(item)}
               </div>
             )}

package/src/resource-workbench/components/ResourceInspector.tsx

@@ -41,13 +41,13 @@ export function ResourceInspector({
       role="complementary"
       aria-label={ariaLabel}
       className={cn(
-        "flex w-80 shrink-0 flex-col border-l border-border bg-card",
-        "lg:w-96",
+        "stg:flex stg:w-80 stg:shrink-0 stg:flex-col stg:border-l stg:border-border stg:bg-card",
+        "stg:lg:w-96",
         className,
       )}
     >
-      <div className="flex items-center justify-between border-b border-border px-4 py-2">
-        <span className="text-xs font-medium text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-2">
+        <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
           Preview
         </span>
         <button
@@ -55,15 +55,15 @@ export function ResourceInspector({
           onClick={onClose}
           aria-label="Close inspector"
           className={cn(
-            "inline-flex items-center justify-center rounded-sm p-1",
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:inline-flex stg:items-center stg:justify-center stg:rounded-sm stg:p-1",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           <CloseIcon />
         </button>
       </div>
-      <div className="flex-1 overflow-y-auto p-4">
+      <div className="stg:flex-1 stg:overflow-y-auto stg:p-4">
         {children}
       </div>
     </aside>

package/src/resource-workbench/components/ResourceList.tsx

@@ -57,7 +57,7 @@ export function ResourceList<TData>({
     <div
       role="list"
       aria-label={ariaLabel}
-      className={cn("flex flex-col", className)}
+      className={cn("stg:flex stg:flex-col", className)}
     >
       {items.map((item, index) => {
         const id = getItemId(item);
@@ -85,10 +85,10 @@ export function ResourceList<TData>({
                 : undefined
             }
             className={cn(
-              "flex items-center gap-3 rounded-lg px-3 py-2.5 transition-colors",
-              isSelected && "bg-primary-subtle",
-              isClickable && "cursor-pointer hover:bg-accent-hover",
-              isClickable && "focus-within:ring-2 focus-within:ring-inset focus-within:ring-ring",
+              "stg:flex stg:items-center stg:gap-3 stg:rounded-lg stg:px-3 stg:py-2.5 stg:transition-colors",
+              isSelected && "stg:bg-primary-subtle",
+              isClickable && "stg:cursor-pointer stg:hover:bg-accent-hover",
+              isClickable && "stg:focus-within:ring-2 stg:focus-within:ring-inset stg:focus-within:ring-ring",
             )}
           >
             {enableSelection && onToggleSelection && (
@@ -98,11 +98,11 @@ export function ResourceList<TData>({
                 aria-label={`Select item ${id}`}
               />
             )}
-            <div className="min-w-0 flex-1">
+            <div className="stg:min-w-0 stg:flex-1">
               {renderRow(item, index)}
             </div>
             {renderRowAction && (
-              <div className="ml-auto shrink-0" onClick={(e) => e.stopPropagation()}>
+              <div className="stg:ml-auto stg:shrink-0" onClick={(e) => e.stopPropagation()}>
                 {renderRowAction(item)}
               </div>
             )}

package/src/resource-workbench/components/ResourceTable.tsx

@@ -66,20 +66,20 @@ export function ResourceTable<TData>({
   const someSelected = table.getIsSomeRowsSelected();
 
   return (
-    <div className={cn("overflow-x-auto", className)}>
+    <div className={cn("stg:overflow-x-auto", className)}>
       <table
         role="table"
         aria-label={ariaLabel}
-        className="w-full border-collapse text-sm"
+        className="stg:w-full stg:border-collapse stg:text-sm"
       >
         <thead>
           {headerGroups.map((headerGroup) => (
             <tr
               key={headerGroup.id}
-              className="border-b border-border"
+              className="stg:border-b stg:border-border"
             >
               {enableSelection && (
-                <th scope="col" className="w-10 px-3 py-2">
+                <th scope="col" className="stg:w-10 stg:px-3 stg:py-2">
                   <SelectionCheckbox
                     checked={allSelected}
                     indeterminate={someSelected && !allSelected}
@@ -122,8 +122,8 @@ export function ResourceTable<TData>({
                 );
               })}
               {renderRowAction && (
-                <th scope="col" className="w-10 px-3 py-2">
-                  <span className="sr-only">Actions</span>
+                <th scope="col" className="stg:w-10 stg:px-3 stg:py-2">
+                  <span className="stg:sr-only">Actions</span>
                 </th>
               )}
             </tr>
@@ -167,9 +167,9 @@ function TableRow<TData>({
   return (
     <tr
       className={cn(
-        "border-b border-border-muted transition-colors",
-        isSelected && "bg-primary-subtle",
-        isClickable && "cursor-pointer hover:bg-accent-hover",
+        "stg:border-b stg:border-border-muted stg:transition-colors",
+        isSelected && "stg:bg-primary-subtle",
+        isClickable && "stg:cursor-pointer stg:hover:bg-accent-hover",
       )}
       onClick={
         isClickable
@@ -191,7 +191,7 @@ function TableRow<TData>({
       aria-selected={enableSelection ? isSelected : undefined}
     >
       {enableSelection && (
-        <td className="w-10 px-3 py-2">
+        <td className="stg:w-10 stg:px-3 stg:py-2">
           <SelectionCheckbox
             checked={isSelected}
             onChange={() => row.toggleSelected()}
@@ -202,7 +202,7 @@ function TableRow<TData>({
       {row.getVisibleCells().map((cell) => (
         <td
           key={cell.id}
-          className="px-3 py-2 text-sm text-foreground"
+          className="stg:px-3 stg:py-2 stg:text-sm stg:text-foreground"
           style={{
             minWidth: cell.column.columnDef.minSize
               ? `${cell.column.columnDef.minSize}px`
@@ -213,7 +213,7 @@ function TableRow<TData>({
         </td>
       ))}
       {renderRowAction && (
-        <td className="w-10 px-3 py-2 text-right">
+        <td className="stg:w-10 stg:px-3 stg:py-2 stg:text-right">
           {renderRowAction(item)}
         </td>
       )}