@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/skill/SkillDetailView.tsx

@@ -14,6 +14,7 @@ import { ErrorMessage } from "../error/ErrorMessage.js";
 import { VisibilityBadge } from "../library/VisibilitySelector.js";
 import { useManageAccess } from "../access/useManageAccess.js";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell.js";
 import { Section } from "../resource-detail/Section.js";
 import { useDetailTabs } from "../resource-detail/useDetailTabs.js";
@@ -247,7 +248,7 @@ export function SkillDetailView({
     org: meta?.org,
     slug: meta?.slug,
     description: undefined,
-    icon: <SkillIcon className="size-6 text-muted-foreground" />,
+    icon: <SkillIcon className="stg:size-6 stg:text-muted-foreground" />,
     createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
     updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
     status: status ? skillStateToPhase(status.state) : undefined,
@@ -324,11 +325,11 @@ function SkillOverview({
   readonly editable?: boolean;
 }) {
   return (
-    <div className="flex flex-col gap-6">
+    <div className="stg:flex stg:flex-col stg:gap-6">
       {(editable || spec?.description) && (
         <Section title="Description">
           {editable ? (
-            <div className="max-h-20 overflow-y-auto p-3">
+            <div className="stg:max-h-20 stg:overflow-y-auto stg:p-3">
               <InlineEditTextarea
                 value={spec?.description || ""}
                 onSave={async () => false}
@@ -339,8 +340,8 @@ function SkillOverview({
               />
             </div>
           ) : (
-            <div className="p-3">
-              <pre className="whitespace-pre-wrap break-words text-sm text-foreground font-sans">
+            <div className="stg:p-3">
+              <pre className="stg:whitespace-pre-wrap stg:break-words stg:text-sm stg:text-foreground stg:font-sans">
                 {spec?.description}
               </pre>
             </div>
@@ -351,7 +352,7 @@ function SkillOverview({
       {(editable || spec?.tag) && (
         <Section title="Tag">
           {editable ? (
-            <div className="p-3">
+            <div className="stg:p-3">
               <InlineEditText
                 value={spec?.tag || ""}
                 onSave={async () => false}
@@ -361,8 +362,8 @@ function SkillOverview({
               />
             </div>
           ) : (
-            <div className="flex items-center gap-2 px-3 py-2.5">
-              <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground">
+            <div className="stg:flex stg:items-center stg:gap-2 stg:px-3 stg:py-2.5">
+              <span className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-xs stg:font-medium stg:text-foreground">
                 {spec?.tag}
               </span>
             </div>
@@ -433,7 +434,7 @@ function SkillContentSection({ content }: { readonly content: string }) {
       }
     >
       {viewMode === "rendered" ? (
-        <div className="p-4">
+        <div className="stg:p-4">
           <Markdown
             remarkPlugins={REMARK_PLUGINS}
             components={MARKDOWN_COMPONENTS}
@@ -442,7 +443,7 @@ function SkillContentSection({ content }: { readonly content: string }) {
           </Markdown>
         </div>
       ) : (
-        <pre className="overflow-x-auto p-4 font-mono text-sm leading-relaxed text-foreground">
+        <pre className="stg:overflow-x-auto stg:p-4 stg:font-mono stg:text-sm stg:leading-relaxed stg:text-foreground">
           {content}
         </pre>
       )}
@@ -461,7 +462,7 @@ function ContentViewToggle({
     <div
       role="radiogroup"
       aria-label="Content view mode"
-      className="inline-flex rounded-md border border-input text-[11px]"
+      className="stg:inline-flex stg:rounded-md stg:border stg:border-input stg:text-[11px]"
     >
       <button
         type="button"
@@ -469,11 +470,11 @@ function ContentViewToggle({
         aria-checked={value === "rendered"}
         onClick={() => onChange("rendered")}
         className={cn(
-          "rounded-l-md px-2 py-0.5 font-medium transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "stg:rounded-l-md stg:px-2 stg:py-0.5 stg:font-medium stg:transition-colors",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           value === "rendered"
-            ? "bg-muted text-foreground"
-            : "text-muted-foreground hover:text-foreground",
+            ? "stg:bg-muted stg:text-foreground"
+            : "stg:text-muted-foreground stg:hover:text-foreground",
         )}
       >
         Preview
@@ -484,11 +485,11 @@ function ContentViewToggle({
         aria-checked={value === "source"}
         onClick={() => onChange("source")}
         className={cn(
-          "rounded-r-md border-l border-input px-2 py-0.5 font-medium transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          "stg:rounded-r-md stg:border-l stg:border-input stg:px-2 stg:py-0.5 stg:font-medium stg:transition-colors",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           value === "source"
-            ? "bg-muted text-foreground"
-            : "text-muted-foreground hover:text-foreground",
+            ? "stg:bg-muted stg:text-foreground"
+            : "stg:text-muted-foreground stg:hover:text-foreground",
         )}
       >
         Source
@@ -512,18 +513,22 @@ function VersionSection({
 
   return (
     <Section title="Version">
-      <div className="flex flex-col gap-3 p-3">
+      <div className="stg:flex stg:flex-col stg:gap-3 stg:p-3">
         {truncatedHash && (
-          <div className="flex items-baseline gap-2">
-            <span className="text-xs font-medium text-muted-foreground">
+          <div className="stg:flex stg:items-baseline stg:gap-2">
+            <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               Hash
             </span>
-            <code
-              className="font-mono text-xs text-foreground"
-              title={versionHash}
-            >
-              {truncatedHash}
-            </code>
+            <Tooltip>
+              <TooltipTrigger
+                render={<code className="stg:font-mono stg:text-xs stg:text-foreground" />}
+              >
+                {truncatedHash}
+              </TooltipTrigger>
+              <TooltipContent side="top" className="stg:break-all">
+                {versionHash}
+              </TooltipContent>
+            </Tooltip>
           </div>
         )}
 
@@ -544,44 +549,50 @@ function GitProvenanceDisplay({
     : null;
 
   return (
-    <div className="flex flex-col gap-1.5">
-      <div className="flex items-baseline gap-2">
-        <span className="text-xs font-medium text-muted-foreground">Git</span>
-        <div className="flex flex-wrap items-baseline gap-x-1.5 text-xs text-foreground">
+    <div className="stg:flex stg:flex-col stg:gap-1.5">
+      <div className="stg:flex stg:items-baseline stg:gap-2">
+        <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">Git</span>
+        <div className="stg:flex stg:flex-wrap stg:items-baseline stg:gap-x-1.5 stg:text-xs stg:text-foreground">
           {repoUrl ? (
             <a
               href={repoUrl}
-              className="text-primary underline underline-offset-2 hover:text-primary-muted"
+              className="stg:text-primary stg:underline stg:underline-offset-2 stg:hover:text-primary-muted"
               target="_blank"
               rel="noopener noreferrer"
             >
               {formatRepoName(repoUrl)}
             </a>
           ) : (
-            <span className="font-mono">{provenance.remoteUrl}</span>
+            <span className="stg:font-mono">{provenance.remoteUrl}</span>
           )}
           {provenance.ref && (
             <>
-              <span className="text-muted-foreground">@</span>
+              <span className="stg:text-muted-foreground">@</span>
               <span>{provenance.ref}</span>
             </>
           )}
           {truncatedCommit && (
-            <code
-              className="rounded bg-muted px-1 py-0.5 font-mono text-[10px]"
-              title={provenance.commit}
-            >
-              {truncatedCommit}
-            </code>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <code className="stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:font-mono stg:text-[10px]" />
+                }
+              >
+                {truncatedCommit}
+              </TooltipTrigger>
+              <TooltipContent side="top" className="stg:break-all">
+                {provenance.commit}
+              </TooltipContent>
+            </Tooltip>
           )}
         </div>
       </div>
       {provenance.subdir && (
-        <div className="flex items-baseline gap-2">
-          <span className="text-xs font-medium text-muted-foreground">
+        <div className="stg:flex stg:items-baseline stg:gap-2">
+          <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
             Path
           </span>
-          <code className="font-mono text-xs text-foreground">
+          <code className="stg:font-mono stg:text-xs stg:text-foreground">
             {provenance.subdir}
           </code>
         </div>
@@ -605,13 +616,13 @@ function SkillSection({
 }) {
   return (
     <section>
-      <div className="mb-2 flex items-center justify-between">
-        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+      <div className="stg:mb-2 stg:flex stg:items-center stg:justify-between">
+        <h3 className="stg:text-xs stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           {title}
         </h3>
         {trailing}
       </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>
@@ -625,29 +636,29 @@ function SkillSection({
 function LoadingSkeleton({ className }: { readonly className?: string }) {
   return (
     <div
-      className={cn("flex flex-col gap-6", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-6", className)}
       aria-busy="true"
       aria-label="Loading skill details"
     >
-      <div className="flex items-start gap-3">
-        <div className="mt-1 size-6 shrink-0 animate-pulse rounded bg-muted" />
-        <div className="flex-1 space-y-2">
-          <div className="h-5 w-48 animate-pulse rounded bg-muted" />
-          <div className="h-3 w-64 animate-pulse rounded bg-muted" />
-          <div className="h-4 w-full max-w-md animate-pulse rounded bg-muted" />
+      <div className="stg:flex stg:items-start stg:gap-3">
+        <div className="stg:mt-1 stg:size-6 stg:shrink-0 stg:animate-pulse stg:rounded stg:bg-muted" />
+        <div className="stg:flex-1 stg:space-y-2">
+          <div className="stg:h-5 stg:w-48 stg:animate-pulse stg:rounded stg:bg-muted" />
+          <div className="stg:h-3 stg:w-64 stg:animate-pulse stg:rounded stg:bg-muted" />
+          <div className="stg:h-4 stg:w-full stg:max-w-md stg:animate-pulse stg:rounded stg:bg-muted" />
         </div>
       </div>
-      <div className="space-y-2">
-        <div className="h-3 w-28 animate-pulse rounded bg-muted" />
+      <div className="stg:space-y-2">
+        <div className="stg:h-3 stg:w-28 stg:animate-pulse stg:rounded stg:bg-muted" />
         <div
-          className="animate-pulse rounded-lg border border-border bg-muted-faint"
+          className="stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted-faint"
           style={{ height: "240px" }}
         />
       </div>
-      <div className="space-y-2">
-        <div className="h-3 w-20 animate-pulse rounded bg-muted" />
+      <div className="stg:space-y-2">
+        <div className="stg:h-3 stg:w-20 stg:animate-pulse stg:rounded stg:bg-muted" />
         <div
-          className="animate-pulse rounded-lg border border-border bg-muted-faint"
+          className="stg:animate-pulse stg:rounded-lg stg:border stg:border-border stg:bg-muted-faint"
           style={{ height: "64px" }}
         />
       </div>
@@ -660,15 +671,15 @@ function NotFoundState({ className }: { readonly className?: string }) {
     <div
       role="status"
       className={cn(
-        "flex flex-col items-center gap-2 py-12 text-center",
+        "stg:flex stg:flex-col stg:items-center stg:gap-2 stg:py-12 stg:text-center",
         className,
       )}
     >
-      <SkillIcon className="size-10 text-muted-foreground-faint" />
-      <p className="text-sm font-medium text-muted-foreground">
+      <SkillIcon className="stg:size-10 stg:text-muted-foreground-faint" />
+      <p className="stg:text-sm stg:font-medium stg:text-muted-foreground">
         Skill not found
       </p>
-      <p className="text-xs text-muted-foreground-subtle">
+      <p className="stg:text-xs stg:text-muted-foreground-subtle">
         This skill doesn&apos;t exist or you don&apos;t have access to it.
       </p>
     </div>

package/src/skill/SkillDiffDialog.tsx

@@ -99,21 +99,21 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
       onCancel={handleDialogCancel}
       onClick={handleBackdropClick}
       className={cn(
-        "fixed inset-0 z-50 m-auto h-[85vh] w-full max-w-4xl 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:h-[85vh] stg:w-full stg:max-w-4xl 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 h-full flex-col">
+      <div className="stg:flex stg:h-full stg:flex-col">
         {/* Header */}
-        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3">
-          <div className="flex items-center gap-2 text-sm">
-            <span className="font-medium text-foreground">Comparing</span>
-            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:justify-between stg:border-b stg:border-border stg:px-4 stg:py-3">
+          <div className="stg:flex stg:items-center stg:gap-2 stg:text-sm">
+            <span className="stg:font-medium stg:text-foreground">Comparing</span>
+            <code className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground">
               {state.fromLabel}
             </code>
-            <ArrowIcon className="size-3.5 text-muted-foreground-faint" />
-            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground">
+            <ArrowIcon className="stg:size-3.5 stg:text-muted-foreground-faint" />
+            <code className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:text-muted-foreground">
               {state.toLabel}
             </code>
           </div>
@@ -122,17 +122,17 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
             onClick={onClose}
             aria-label="Close diff viewer"
             className={cn(
-              "rounded-md p-1.5 text-muted-foreground transition-colors",
-              "hover:bg-accent-hover hover:text-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:rounded-md stg:p-1.5 stg:text-muted-foreground stg:transition-colors",
+              "stg:hover:bg-accent-hover stg:hover:text-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
-            <CloseIcon className="size-4" />
+            <CloseIcon className="stg:size-4" />
           </button>
         </div>
 
         {/* Body */}
-        <div className="flex-1 overflow-auto p-4">
+        <div className="stg:flex-1 stg:overflow-auto stg:p-4">
           {isLoading ? (
             <DiffSkeleton />
           ) : error ? (
@@ -153,21 +153,21 @@ export function SkillDiffDialog({ state, onClose }: SkillDiffDialogProps) {
 function DiffSkeleton() {
   return (
     <div
-      className="flex flex-col gap-4"
+      className="stg:flex stg:flex-col stg:gap-4"
       aria-busy="true"
       aria-label="Loading diff"
     >
-      <div className="flex items-center gap-2">
-        <div className="h-4 w-36 animate-pulse rounded bg-muted" />
-        <div className="h-4 w-20 animate-pulse rounded bg-muted" />
-        <div className="h-4 w-20 animate-pulse rounded bg-muted" />
+      <div className="stg:flex stg:items-center stg:gap-2">
+        <div className="stg:h-4 stg:w-36 stg:animate-pulse stg:rounded stg:bg-muted" />
+        <div className="stg:h-4 stg:w-20 stg:animate-pulse stg:rounded stg:bg-muted" />
+        <div className="stg:h-4 stg:w-20 stg:animate-pulse stg:rounded stg:bg-muted" />
       </div>
-      <div className="h-6 w-full animate-pulse rounded bg-muted" />
+      <div className="stg:h-6 stg:w-full stg:animate-pulse stg:rounded stg:bg-muted" />
       {[1, 2, 3, 4, 5, 6].map((i) => (
-        <div key={i} className="flex gap-2">
-          <div className="h-4 w-10 animate-pulse rounded bg-muted" />
-          <div className="h-4 w-10 animate-pulse rounded bg-muted" />
-          <div className="h-4 flex-1 animate-pulse rounded bg-muted" />
+        <div key={i} className="stg:flex stg:gap-2">
+          <div className="stg:h-4 stg:w-10 stg:animate-pulse stg:rounded stg:bg-muted" />
+          <div className="stg:h-4 stg:w-10 stg:animate-pulse stg:rounded stg:bg-muted" />
+          <div className="stg:h-4 stg:flex-1 stg:animate-pulse stg:rounded stg:bg-muted" />
         </div>
       ))}
     </div>

package/src/skill/SkillFileBrowser.tsx

@@ -79,24 +79,24 @@ export function SkillFileBrowser({
   if (isLoading) {
     return (
       <div
-        className={cn("rounded-lg border border-border", className)}
+        className={cn("stg:rounded-lg stg:border stg:border-border", className)}
         aria-busy="true"
         aria-label="Loading skill package files"
       >
-        <div className="p-4">
-          <div className="h-3 w-32 animate-pulse rounded bg-muted" />
+        <div className="stg:p-4">
+          <div className="stg:h-3 stg:w-32 stg:animate-pulse stg:rounded stg:bg-muted" />
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-[200px_1fr] border-t border-border">
-          <div className="space-y-2 p-3 border-b md:border-b-0 md:border-r border-border">
+        <div className="stg:grid stg:grid-cols-1 stg:md:grid-cols-[200px_1fr] stg:border-t stg:border-border">
+          <div className="stg:space-y-2 stg:p-3 stg:border-b stg:md:border-b-0 stg:md:border-r stg:border-border">
             {[1, 2, 3].map((i) => (
-              <div key={i} className="h-4 w-full animate-pulse rounded bg-muted" />
+              <div key={i} className="stg:h-4 stg:w-full stg:animate-pulse stg:rounded stg:bg-muted" />
             ))}
           </div>
-          <div className="p-4">
-            <div className="space-y-2">
-              <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
-              <div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
-              <div className="h-4 w-2/3 animate-pulse rounded bg-muted" />
+          <div className="stg:p-4">
+            <div className="stg:space-y-2">
+              <div className="stg:h-4 stg:w-3/4 stg:animate-pulse stg:rounded stg:bg-muted" />
+              <div className="stg:h-4 stg:w-1/2 stg:animate-pulse stg:rounded stg:bg-muted" />
+              <div className="stg:h-4 stg:w-2/3 stg:animate-pulse stg:rounded stg:bg-muted" />
             </div>
           </div>
         </div>
@@ -106,8 +106,8 @@ export function SkillFileBrowser({
 
   if (error) {
     return (
-      <div className={cn("rounded-lg border border-border p-4", className)}>
-        <p className="text-sm text-destructive">
+      <div className={cn("stg:rounded-lg stg:border stg:border-border stg:p-4", className)}>
+        <p className="stg:text-sm stg:text-destructive">
           Failed to load skill package: {error.message}
         </p>
       </div>
@@ -117,22 +117,22 @@ export function SkillFileBrowser({
   if (!files || files.length === 0) return null;
 
   return (
-    <div className={cn("rounded-lg border border-border overflow-hidden", className)}>
+    <div className={cn("stg:rounded-lg stg:border stg:border-border stg:overflow-hidden", className)}>
       {/* Header */}
-      <div className="border-b border-border px-4 py-2">
-        <h3 className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+      <div className="stg:border-b stg:border-border stg:px-4 stg:py-2">
+        <h3 className="stg:text-xs stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
           Package Files
         </h3>
       </div>
 
       {/* Split pane */}
-      <div className="grid grid-cols-1 md:grid-cols-[220px_1fr]">
+      <div className="stg:grid stg:grid-cols-1 stg:md:grid-cols-[220px_1fr]">
         {/* File tree */}
         <nav
-          className="border-b border-border md:border-b-0 md:border-r overflow-y-auto"
+          className="stg:border-b stg:border-border stg:md:border-b-0 stg:md:border-r stg:overflow-y-auto"
           aria-label="Skill package file tree"
         >
-          <ul className="py-1" role="tree">
+          <ul className="stg:py-1" role="tree">
             {treeNodes.map((node) => (
               <FileTreeNode
                 key={node.path}
@@ -146,11 +146,11 @@ export function SkillFileBrowser({
         </nav>
 
         {/* Content viewer */}
-        <div className="min-h-[200px] max-h-[400px] overflow-y-auto p-4">
+        <div className="stg:min-h-[200px] stg:max-h-[400px] stg:overflow-y-auto stg:p-4">
           {selectedPath !== null && content !== null ? (
             <FileContentViewer path={selectedPath} content={content} />
           ) : (
-            <p className="text-sm text-muted-foreground-subtle italic">
+            <p className="stg:text-sm stg:text-muted-foreground-subtle stg:italic">
               Select a file to view its contents
             </p>
           )}
@@ -182,7 +182,7 @@ function FileContentViewer({
   }
 
   return (
-    <pre className="overflow-x-auto font-mono text-xs leading-relaxed text-foreground whitespace-pre-wrap">
+    <pre className="stg:overflow-x-auto stg:font-mono stg:text-xs stg:leading-relaxed stg:text-foreground stg:whitespace-pre-wrap">
       {content}
     </pre>
   );

package/src/skill/SkillPicker.tsx

@@ -160,33 +160,33 @@ export function SkillPicker({
   );
 
   return (
-    <div className={["space-y-2 w-72", className].filter(Boolean).join(" ")}>
+    <div className={["stg:space-y-2 stg:w-72", className].filter(Boolean).join(" ")}>
       {/* Selected items */}
       {value.length > 0 && (
-        <div className="space-y-1">
-          <div className="text-[0.65rem] font-medium text-muted-foreground">
+        <div className="stg:space-y-1">
+          <div className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
             Selected
           </div>
-          <div className="relative">
+          <div className="stg:relative">
             {selected_.canScrollUp && <ScrollFade position="top" />}
 
-            <div ref={selected_.scrollRef} className="max-h-28 space-y-1 overflow-y-auto">
+            <div ref={selected_.scrollRef} className="stg:max-h-28 stg:space-y-1 stg:overflow-y-auto">
               {value.map((ref) => {
                 const key = refKey(ref);
                 return (
                   <div
                     key={key}
-                    className="flex items-center gap-2 rounded-md bg-muted-faint px-2 py-1 text-xs"
+                    className="stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-muted-faint stg:px-2 stg:py-1 stg:text-xs"
                   >
                     <SkillIcon />
-                    <span className="min-w-0 flex-1 truncate text-foreground">
+                    <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
                       {ref.slug}
                     </span>
                     <button
                       type="button"
                       onClick={() => handleRemove(key)}
                       disabled={disabled}
-                      className="shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+                      className="stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
                       aria-label={`Remove ${ref.slug}`}
                     >
                       <XIcon />
@@ -216,16 +216,16 @@ export function SkillPicker({
         onChange={(e) => setQuery(e.target.value)}
         onKeyDown={handleSearchKeyDown}
         disabled={disabled}
-        className="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-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        className="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-2 stg:focus-visible:ring-ring stg:disabled:pointer-events-none stg:disabled:opacity-50"
         autoFocus
       />
 
       <ScopeToggle value={activeScope} onChange={setActiveScope} disabled={disabled} />
 
-      {error && <p className="text-xs text-destructive">{error.message}</p>}
+      {error && <p className="stg:text-xs stg:text-destructive">{error.message}</p>}
 
       {/* Scrollable results list */}
-      <div className="relative">
+      <div className="stg:relative">
         {results_.canScrollUp && <ScrollFade position="top" />}
 
         <div
@@ -233,12 +233,12 @@ export function SkillPicker({
           id={LIST_ID}
           role="listbox"
           aria-label="Skills"
-          className="max-h-52 overflow-y-auto"
+          className="stg:max-h-52 stg:overflow-y-auto"
         >
           {isLoading ? (
             <LoadingSkeleton />
           ) : availableResults.length === 0 ? (
-            <div className="py-4 text-center text-xs text-muted-foreground">
+            <div className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
               {query
                 ? "No skills match your search"
                 : value.length > 0
@@ -255,30 +255,30 @@ export function SkillPicker({
                 onClick={() => handleSelect(result)}
                 disabled={disabled}
                 className={cn(
-                  "group flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
-                  "disabled:pointer-events-none disabled:opacity-50",
+                  "stg:group stg:flex stg:w-full stg:flex-col stg:gap-0.5 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
+                  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                   idx === focusIndex
-                    ? "bg-accent text-foreground"
-                    : "text-foreground hover:bg-accent-hover",
+                    ? "stg:bg-accent stg:text-foreground"
+                    : "stg:text-foreground stg:hover:bg-accent-hover",
                 )}
                 role="option"
                 aria-selected={idx === focusIndex}
               >
-                <span className="flex items-center gap-1.5">
+                <span className="stg:flex stg:items-center stg:gap-1.5">
                   <SkillIcon />
-                  <span className="truncate font-medium">
+                  <span className="stg:truncate stg:font-medium">
                     <HighlightMatch text={result.name} query={query} />
                   </span>
-                  <span className="ml-auto shrink-0 text-[0.6rem] text-muted-foreground">
+                  <span className="stg:ml-auto stg:shrink-0 stg:text-[0.6rem] stg:text-muted-foreground">
                     {result.org}
                   </span>
                 </span>
                 {result.description && (
                   <span
                     className={cn(
-                      "pl-5 text-[0.65rem] text-muted-foreground",
+                      "stg:pl-5 stg:text-[0.65rem] stg:text-muted-foreground",
                       idx !== focusIndex &&
-                        "line-clamp-2 group-hover:line-clamp-none",
+                        "stg:line-clamp-2 stg:group-hover:line-clamp-none",
                     )}
                   >
                     {result.description}
@@ -302,7 +302,7 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
   return (
     <>
       {text.slice(0, idx)}
-      <span className="font-semibold">{text.slice(idx, idx + query.length)}</span>
+      <span className="stg:font-semibold">{text.slice(idx, idx + query.length)}</span>
       {text.slice(idx + query.length)}
     </>
   );
@@ -310,15 +310,15 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-1 py-1">
+    <div className="stg:space-y-1 stg:py-1">
       {[55, 70, 45, 62].map((w, i) => (
-        <div key={i} className="flex flex-col gap-1 px-2 py-1.5">
+        <div key={i} className="stg:flex stg:flex-col stg:gap-1 stg:px-2 stg:py-1.5">
           <div
-            className="h-3 rounded bg-muted animate-pulse"
+            className="stg:h-3 stg:rounded stg:bg-muted stg:animate-pulse"
             style={{ width: `${w}%` }}
           />
           <div
-            className="h-2 rounded bg-muted-subtle animate-pulse"
+            className="stg:h-2 stg:rounded stg:bg-muted-subtle stg:animate-pulse"
             style={{ width: `${Math.min(w + 15, 90)}%` }}
           />
         </div>
@@ -338,7 +338,7 @@ function SkillIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M2 3h12M2 7h8M2 11h10M2 15h6" />