@superblocksteam/vite-plugin-file-sync 2.0.129 → 2.0.130-next.0

package/dist/ai-service/quota-client.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Pre-call AI quota check (extracted from AiService for APPS-4708).
+ *
+ * One HTTP round-trip to the server per prompt, before generation starts.
+ * Fail-open by design: a missing JWT or a flaky quota endpoint must never
+ * block legitimate work, so every failure path returns `allowed: true`.
+ * The check runs inside a `quota.check` LLMObs span so the pre-LLM latency
+ * it adds is attributed in the trace.
+ */
+import { type Logger } from "../util/logger.js";
+import { LLMObsTracer } from "./llmobs/tracer.js";
+export interface AiQuotaResult {
+    allowed: boolean;
+    reason?: string;
+    message?: string;
+}
+export interface CheckAiQuotaOptions {
+    superblocksBaseUrl: string;
+    /** Resolved auth token; the no-token case fails open without a request. */
+    jwt: string | undefined;
+    logger: Logger;
+    /** Injectable for tests; defaults to the global fetch. */
+    fetchFn?: typeof fetch;
+    /** Injectable for tests; defaults to the LLMObs singleton. */
+    tracer?: LLMObsTracer;
+}
+export declare function checkAiQuota(options: CheckAiQuotaOptions): Promise<AiQuotaResult>;
+//# sourceMappingURL=quota-client.d.ts.map

package/dist/ai-service/quota-client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quota-client.d.ts","sourceRoot":"","sources":["../../src/ai-service/quota-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2EAA2E;IAC3E,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,KAAK,CAAC;IACvB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,wBAAsB,YAAY,CAChC,OAAO,EAAE,mBAAmB,GAC3B,OAAO,CAAC,aAAa,CAAC,CA2BxB"}

package/dist/ai-service/quota-client.js

@@ -0,0 +1,68 @@
+/**
+ * Pre-call AI quota check (extracted from AiService for APPS-4708).
+ *
+ * One HTTP round-trip to the server per prompt, before generation starts.
+ * Fail-open by design: a missing JWT or a flaky quota endpoint must never
+ * block legitimate work, so every failure path returns `allowed: true`.
+ * The check runs inside a `quota.check` LLMObs span so the pre-LLM latency
+ * it adds is attributed in the trace.
+ */
+import { getErrorMeta } from "../util/logger.js";
+import { LLMObsTracer } from "./llmobs/tracer.js";
+export async function checkAiQuota(options) {
+    const { superblocksBaseUrl, jwt, logger } = options;
+    const fetchFn = options.fetchFn ?? fetch;
+    const tracer = options.tracer ?? LLMObsTracer.instance;
+    if (!jwt) {
+        logger.warn("[ai-service] No JWT available for quota check, skipping");
+        return { allowed: true };
+    }
+    return tracer.trace({ kind: "task", name: "quota.check" }, async (span) => {
+        const startedAt = performance.now();
+        const result = await fetchQuota({
+            superblocksBaseUrl,
+            jwt,
+            logger,
+            fetchFn,
+        });
+        tracer.annotate(span, {
+            metadata: {
+                allowed: result.allowed,
+                durationMs: Math.round(performance.now() - startedAt),
+                ...(result.reason !== undefined ? { reason: result.reason } : {}),
+            },
+        });
+        return result;
+    });
+}
+async function fetchQuota({ superblocksBaseUrl, jwt, logger, fetchFn, }) {
+    try {
+        const url = `${superblocksBaseUrl}/api/v1/ai/quota`;
+        const response = await fetchFn(url, {
+            method: "GET",
+            headers: {
+                Authorization: `Bearer ${jwt}`,
+                "Content-Type": "application/json",
+            },
+        });
+        if (!response.ok) {
+            throw new Error(`Call to v1/ai/quota failed with status ${response.status}`);
+        }
+        const quota = (await response.json());
+        if (!quota.allowed) {
+            const reason = quota.reason ?? "token_limit_exceeded";
+            const message = reason === "trial_expired"
+                ? "Your AI trial period has ended."
+                : reason === "no_seat_assigned"
+                    ? "You don't have an AI Builder license assigned. Ask your admin to assign a license."
+                    : "Your organization has reached its AI usage limit.";
+            return { allowed: false, reason, message };
+        }
+        return { allowed: true };
+    }
+    catch (error) {
+        logger.warn("[ai-service] Quota check failed, allowing request", getErrorMeta(error));
+        return { allowed: true };
+    }
+}
+//# sourceMappingURL=quota-client.js.map

package/dist/ai-service/quota-client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quota-client.js","sourceRoot":"","sources":["../../src/ai-service/quota-client.ts"],"names":[],"mappings":"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"}

package/dist/ai-service/security/index.d.ts

@@ -5,5 +5,5 @@
  */
 export { scanContentForSecrets, isTrufflehogAvailable, disposeSecretScanner, } from "./secret-scanner-service.js";
 export { formatSecretFindings, redactSecrets, SecretRedactor, type SecretFinding, type SecretScanOptions, type SecretScanResult, } from "./secret-scanner.js";
-export { classifyPromptSafety, createBlockedUserMessage, FAIL_OPEN_RESULT, FAIL_CLOSED_RESULT, type SafetyCategory, type SafetyClassificationResult, type SafetyClassificationOptions, type SafetyClassificationConfig, } from "./safety-classifier.js";
+export { classifyPromptSafety, createBlockedUserMessage, FAIL_CLOSED_RESULT, FAIL_OPEN_RESULT, type SafetyCategory, type SafetyClassificationConfig, type SafetyClassificationOptions, type SafetyClassificationResult, } from "./safety-classifier.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/ai-service/security/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ai-service/security/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,gBAAgB,EAChB,kBAAkB,EAClB,KAAK,cAAc,EACnB,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,0BAA0B,GAChC,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ai-service/security/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,kBAAkB,EAClB,gBAAgB,EAChB,KAAK,cAAc,EACnB,KAAK,0BAA0B,EAC/B,KAAK,2BAA2B,EAChC,KAAK,0BAA0B,GAChC,MAAM,wBAAwB,CAAC"}

package/dist/ai-service/security/index.js

@@ -5,5 +5,5 @@
  */
 export { scanContentForSecrets, isTrufflehogAvailable, disposeSecretScanner, } from "./secret-scanner-service.js";
 export { formatSecretFindings, redactSecrets, SecretRedactor, } from "./secret-scanner.js";
-export { classifyPromptSafety, createBlockedUserMessage, FAIL_OPEN_RESULT, FAIL_CLOSED_RESULT, } from "./safety-classifier.js";
+export { classifyPromptSafety, createBlockedUserMessage, FAIL_CLOSED_RESULT, FAIL_OPEN_RESULT, } from "./safety-classifier.js";
 //# sourceMappingURL=index.js.map

package/dist/ai-service/security/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ai-service/security/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,cAAc,GAIf,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,gBAAgB,EAChB,kBAAkB,GAKnB,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ai-service/security/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,cAAc,GAIf,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,oBAAoB,EACpB,wBAAwB,EACxB,kBAAkB,EAClB,gBAAgB,GAKjB,MAAM,wBAAwB,CAAC"}

package/dist/ai-service/security/safety-classifier.d.ts

@@ -1,27 +1,20 @@
 /**
- * Safety classification utilities.
+ * Safety classification utilities for Clark (the AI coding assistant).
  *
  * Provides functions for classifying user prompts as safe or unsafe
  * before they are processed by the main LLM model. Uses a fast LLM
  * model to perform binary classification with justification.
+ *
+ * Categories, result types, and default results are imported from
+ * `@superblocksteam/shared`. The system prompt is local because it
+ * is specific to Clark's conversational context.
  */
 import type { LanguageModelV3 } from "@ai-sdk/provider";
 import type { UserModelMessage } from "ai";
-/**
- * Categories of unsafe content that can be detected.
- */
-export type SafetyCategory = "harmful_instructions" | "illegal_activity" | "malicious_code" | "personal_data_extraction" | "prompt_injection" | "jailbreak_attempt" | "system_extraction" | "other";
-/**
- * Result of safety classification.
- */
-export interface SafetyClassificationResult {
-    /** Whether the prompt is safe to process */
-    safe: boolean;
-    /** Brief justification for the classification */
-    justification: string;
-    /** Categories that triggered unsafe classification (only if unsafe) */
-    categories?: SafetyCategory[];
-}
+import { type SafetyCategory, type SafetyClassificationResult } from "@superblocksteam/shared";
+export type { SafetyCategory, SafetyClassificationResult };
+export declare const FAIL_OPEN_RESULT: SafetyClassificationResult;
+export declare const FAIL_CLOSED_RESULT: SafetyClassificationResult;
 /**
  * Options for safety classification.
  */
@@ -48,16 +41,6 @@ export interface SafetyClassificationConfig {
     /** Which text parts to scan: "all" (default) or "last" (user prompt only) */
     scope?: "all" | "last";
 }
-/**
- * Default classification result for fail-open scenarios.
- * Returns safe=true to allow the request to proceed.
- */
-export declare const FAIL_OPEN_RESULT: SafetyClassificationResult;
-/**
- * Default classification result for fail-closed scenarios.
- * Returns safe=false to block the request.
- */
-export declare const FAIL_CLOSED_RESULT: SafetyClassificationResult;
 /**
  * Classifies a user prompt for safety.
  *

package/dist/ai-service/security/safety-classifier.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"safety-classifier.d.ts","sourceRoot":"","sources":["../../../src/ai-service/security/safety-classifier.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAM3C;;GAEG;AACH,MAAM,MAAM,cAAc,GACtB,sBAAsB,GACtB,kBAAkB,GAClB,gBAAgB,GAChB,0BAA0B,GAC1B,kBAAkB,GAClB,mBAAmB,GACnB,mBAAmB,GACnB,OAAO,CAAC;AAEZ;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,4CAA4C;IAC5C,IAAI,EAAE,OAAO,CAAC;IACd,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,0EAA0E;IAC1E,KAAK,EAAE,eAAe,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACxB;AAmFD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,0BAI9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,0BAKhC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,oBAAoB,CACxC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,2BAA2B,GACnC,OAAO,CAAC,0BAA0B,CAAC,CA6CrC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,wBAAwB,CACtC,aAAa,EAAE,gBAAgB,EAC/B,cAAc,EAAE,0BAA0B,GACzC,gBAAgB,CAclB"}
+{"version":3,"file":"safety-classifier.d.ts","sourceRoot":"","sources":["../../../src/ai-service/security/safety-classifier.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAG3C,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,0BAA0B,EAChC,MAAM,yBAAyB,CAAC;AAKjC,YAAY,EAAE,cAAc,EAAE,0BAA0B,EAAE,CAAC;AAE3D,eAAO,MAAM,gBAAgB,EAAE,0BAI9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,0BAKhC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC1C,0EAA0E;IAC1E,KAAK,EAAE,eAAe,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACxB;AAqED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,oBAAoB,CACxC,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,2BAA2B,GACnC,OAAO,CAAC,0BAA0B,CAAC,CA6CrC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,wBAAwB,CACtC,aAAa,EAAE,gBAAgB,EAC/B,cAAc,EAAE,0BAA0B,GACzC,gBAAgB,CAclB"}

package/dist/ai-service/security/safety-classifier.js

@@ -1,42 +1,28 @@
 /**
- * Safety classification utilities.
+ * Safety classification utilities for Clark (the AI coding assistant).
  *
  * Provides functions for classifying user prompts as safe or unsafe
  * before they are processed by the main LLM model. Uses a fast LLM
  * model to perform binary classification with justification.
+ *
+ * Categories, result types, and default results are imported from
+ * `@superblocksteam/shared`. The system prompt is local because it
+ * is specific to Clark's conversational context.
  */
 import { generateObject } from "ai";
 import { z } from "zod";
+import { SAFETY_CATEGORIES, } from "@superblocksteam/shared";
 import { getLogger } from "../../util/logger.js";
 import llmobs from "../llmobs/index.js";
-/**
- * Zod schema for safety classification response.
- * Used with generateObject for structured output.
- */
-const SafetyClassificationSchema = z.object({
-    safe: z
-        .boolean()
-        .describe("Whether the prompt is safe to process. True if safe, false if unsafe."),
-    justification: z
-        .string()
-        .describe("Brief (1-2 sentence) justification for the classification decision."),
-    categories: z
-        .array(z.enum([
-        "harmful_instructions",
-        "illegal_activity",
-        "malicious_code",
-        "personal_data_extraction",
-        "prompt_injection",
-        "jailbreak_attempt",
-        "system_extraction",
-        "other",
-    ]))
-        .optional()
-        .describe("Categories of unsafe content detected (only if unsafe)."),
-});
-/**
- * System prompt for safety classification.
- */
+export const FAIL_OPEN_RESULT = {
+    safe: true,
+    justification: "Classification failed, allowing request to proceed (fail-open policy).",
+};
+export const FAIL_CLOSED_RESULT = {
+    safe: false,
+    justification: "Classification failed, blocking request (fail-closed policy).",
+    categories: ["other"],
+};
 const SAFETY_CLASSIFICATION_SYSTEM_PROMPT = `You are a safety classifier for a low-code application builder AI assistant. Your task is to determine if a user's request is safe to process.
 
 ## Classification Criteria
@@ -83,22 +69,21 @@ A request is **SAFE** if it:
 
 Analyze the following user request and provide your classification.`;
 /**
- * Default classification result for fail-open scenarios.
- * Returns safe=true to allow the request to proceed.
- */
-export const FAIL_OPEN_RESULT = {
-    safe: true,
-    justification: "Classification failed, allowing request to proceed (fail-open policy).",
-};
-/**
- * Default classification result for fail-closed scenarios.
- * Returns safe=false to block the request.
+ * Zod schema for safety classification response.
+ * Derives its enum values from the shared SAFETY_CATEGORIES tuple.
  */
-export const FAIL_CLOSED_RESULT = {
-    safe: false,
-    justification: "Classification failed, blocking request (fail-closed policy).",
-    categories: ["other"],
-};
+const SafetyClassificationSchema = z.object({
+    safe: z
+        .boolean()
+        .describe("Whether the prompt is safe to process. True if safe, false if unsafe."),
+    justification: z
+        .string()
+        .describe("Brief (1-2 sentence) justification for the classification decision."),
+    categories: z
+        .array(z.enum(SAFETY_CATEGORIES))
+        .optional()
+        .describe("Categories of unsafe content detected (only if unsafe)."),
+});
 /**
  * Classifies a user prompt for safety.
  *

package/dist/ai-service/security/safety-classifier.js.map

@@ -1 +1 @@
-{"version":3,"file":"safety-classifier.js","sourceRoot":"","sources":["../../../src/ai-service/security/safety-classifier.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"safety-classifier.js","sourceRoot":"","sources":["../../../src/ai-service/security/safety-classifier.ts"],"names":[],"mappings":"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"}

package/dist/ai-service/skills/system/_registry.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_registry.generated.d.ts","sourceRoot":"","sources":["../../../../src/ai-service/skills/system/_registry.generated.ts"],"names":[],"mappings":"AAmBA;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAgBhD,CAAC"}
+{"version":3,"file":"_registry.generated.d.ts","sourceRoot":"","sources":["../../../../src/ai-service/skills/system/_registry.generated.ts"],"names":[],"mappings":"AAoBA;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAiBhD,CAAC"}

package/dist/ai-service/skills/system/_registry.generated.js

@@ -1,5 +1,6 @@
 // Auto-generated skills registry
 // Do not edit directly - run npm run generate-skills
+import { content as common_import_issues_skill } from "./common-import-issues/skill.generated.js";
 import { content as superblocks_api_references_code_blocks } from "./superblocks-api/references/code-blocks.generated.js";
 import { content as superblocks_api_references_graphql } from "./superblocks-api/references/graphql.generated.js";
 import { content as superblocks_api_references_rest_apis } from "./superblocks-api/references/rest-apis.generated.js";
@@ -20,6 +21,7 @@ import { content as third_party_migration_v0 } from "./third-party-migration/v0.
  * Keys are relative paths from skills/system/ (e.g., "superblocks-frontend/SKILL.md")
  */
 export const SYSTEM_SKILLS = {
+    "common-import-issues/SKILL.md": common_import_issues_skill,
     "superblocks-api/SKILL.md": superblocks_api_skill,
     "superblocks-api/references/code-blocks.md": superblocks_api_references_code_blocks,
     "superblocks-api/references/graphql.md": superblocks_api_references_graphql,

package/dist/ai-service/skills/system/_registry.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"_registry.generated.js","sourceRoot":"","sources":["../../../../src/ai-service/skills/system/_registry.generated.ts"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,qDAAqD;AAErD,OAAO,EAAE,OAAO,IAAI,sCAAsC,EAAE,MAAM,uDAAuD,CAAC;AAC1H,OAAO,EAAE,OAAO,IAAI,kCAAkC,EAAE,MAAM,mDAAmD,CAAC;AAClH,OAAO,EAAE,OAAO,IAAI,oCAAoC,EAAE,MAAM,qDAAqD,CAAC;AACtH,OAAO,EAAE,OAAO,IAAI,wCAAwC,EAAE,MAAM,yDAAyD,CAAC;AAC9H,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,yCAAyC,EAAE,MAAM,0DAA0D,CAAC;AAChI,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,8CAA8C,EAAE,MAAM,+DAA+D,CAAC;AAC1I,OAAO,EAAE,OAAO,IAAI,mDAAmD,EAAE,MAAM,oEAAoE,CAAC;AACpJ,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,4CAA4C,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,oDAAoD,CAAC;AACpH,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,8CAA8C,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,6CAA6C,CAAC;AACtG,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,4CAA4C,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AAE9F;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B;IACnD,0BAA0B,EAAE,qBAAqB;IACjD,2CAA2C,EAAE,sCAAsC;IACnF,uCAAuC,EAAE,kCAAkC;IAC3E,yCAAyC,EAAE,oCAAoC;IAC/E,6CAA6C,EAAE,wCAAwC;IACvF,+BAA+B,EAAE,0BAA0B;IAC3D,8CAA8C,EAAE,yCAAyC;IACzF,gCAAgC,EAAE,2BAA2B;IAC7D,mDAAmD,EAAE,8CAA8C;IACnG,wDAAwD,EAAE,mDAAmD;IAC7G,gCAAgC,EAAE,2BAA2B;IAC7D,wCAAwC,EAAE,mCAAmC;IAC7E,kCAAkC,EAAE,6BAA6B;IACjE,iCAAiC,EAAE,4BAA4B;IAC/D,6BAA6B,EAAE,wBAAwB;CACxD,CAAC"}
+{"version":3,"file":"_registry.generated.js","sourceRoot":"","sources":["../../../../src/ai-service/skills/system/_registry.generated.ts"],"names":[],"mappings":"AAAA,iCAAiC;AACjC,qDAAqD;AAErD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,sCAAsC,EAAE,MAAM,uDAAuD,CAAC;AAC1H,OAAO,EAAE,OAAO,IAAI,kCAAkC,EAAE,MAAM,mDAAmD,CAAC;AAClH,OAAO,EAAE,OAAO,IAAI,oCAAoC,EAAE,MAAM,qDAAqD,CAAC;AACtH,OAAO,EAAE,OAAO,IAAI,wCAAwC,EAAE,MAAM,yDAAyD,CAAC;AAC9H,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,yCAAyC,EAAE,MAAM,0DAA0D,CAAC;AAChI,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AAClG,OAAO,EAAE,OAAO,IAAI,8CAA8C,EAAE,MAAM,+DAA+D,CAAC;AAC1I,OAAO,EAAE,OAAO,IAAI,mDAAmD,EAAE,MAAM,oEAAoE,CAAC;AACpJ,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,4CAA4C,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,mCAAmC,EAAE,MAAM,oDAAoD,CAAC;AACpH,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,8CAA8C,CAAC;AACxG,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,6CAA6C,CAAC;AACtG,OAAO,EAAE,OAAO,IAAI,2BAA2B,EAAE,MAAM,4CAA4C,CAAC;AACpG,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AAE9F;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAA2B;IACnD,+BAA+B,EAAE,0BAA0B;IAC3D,0BAA0B,EAAE,qBAAqB;IACjD,2CAA2C,EAAE,sCAAsC;IACnF,uCAAuC,EAAE,kCAAkC;IAC3E,yCAAyC,EAAE,oCAAoC;IAC/E,6CAA6C,EAAE,wCAAwC;IACvF,+BAA+B,EAAE,0BAA0B;IAC3D,8CAA8C,EAAE,yCAAyC;IACzF,gCAAgC,EAAE,2BAA2B;IAC7D,mDAAmD,EAAE,8CAA8C;IACnG,wDAAwD,EAAE,mDAAmD;IAC7G,gCAAgC,EAAE,2BAA2B;IAC7D,wCAAwC,EAAE,mCAAmC;IAC7E,kCAAkC,EAAE,6BAA6B;IACjE,iCAAiC,EAAE,4BAA4B;IAC/D,6BAA6B,EAAE,wBAAwB;CACxD,CAAC"}

package/dist/ai-service/skills/system/common-import-issues/skill.generated.d.ts

@@ -0,0 +1,2 @@
+export declare const content = "---\nname: common-import-issues\ndescription: |\n  Catalog of known import/module-resolution errors in Superblocks apps and their fixes.\n  Load when a build error, runtime error, or blank/broken preview points at an import \u2014 e.g.\n  \"does not provide an export named X\", \"Failed to resolve import\", or a module-not-found error.\nreadOnly: true\nmetadata:\n  author: superblocks\n  version: \"1.0\"\n---\n\n# Common Import Issues\n\nThis skill is a catalog of import and module-resolution errors that break Superblocks\napps, together with the exact fix for each. App code is transpiled per-file (esbuild/Vite),\nso an import mistake that a normal bundler would tolerate can crash the app at runtime and\nleave the preview blank \u2014 which then blocks UI verification (navigation/screenshot) entirely.\n\n## How to use this skill\n\n1. Read the error message and find the failing import.\n2. Match it against an entry below.\n3. Apply the fix, reload the file, and re-test.\n4. If the error is **not** in this catalog, debug it normally \u2014 do not guess a fix from a\n   superficially similar entry.\n\nWhen you fix an import error, prevent it everywhere: scan the rest of the app for the same\nmistake rather than fixing only the file that happened to throw.\n\n---\n\n## Entry 1 \u2014 lucide-react/dynamic: `IconName` is type-only\n\n### Symptom\n\nThe app crashes at runtime (preview is blank, navigation/screenshot tools time out) with:\n\n```\nSyntaxError: The requested module '/node_modules/.vite/deps/lucide-react_dynamic.js'\ndoes not provide an export named 'IconName'\n```\n\n### Cause\n\nIn `lucide-react/dynamic`, `IconName` is a **type-only** export and `DynamicIcon` is the\n**value** export. Importing `IconName` as a value (no `type` keyword) leaves a runtime\nimport in the transpiled file. Because `lucide-react` (v0.540.0) ships no `exports` map for\nthe runtime entry, the import resolves to a module that has no `IconName` runtime binding,\nso the module fails to evaluate and the whole app fails to mount.\n\n```typescript\n// \u274C WRONG \u2014 value import of a type-only export crashes the app at runtime\nimport { IconName } from \"lucide-react/dynamic\";\n\n// \u274C ALSO WRONG \u2014 DynamicIcon is fine as a value, but IconName must still be a type\nimport { DynamicIcon, IconName } from \"lucide-react/dynamic\";\n```\n\n### Fix\n\nImport `IconName` with the `type` keyword. Keep `DynamicIcon` as a normal value import.\n\n```typescript\n// \u2705 CORRECT \u2014 IconName as a type, DynamicIcon as a value\nimport { DynamicIcon, type IconName } from \"lucide-react/dynamic\";\n\n// \u2705 ALSO CORRECT \u2014 separate type-only import\nimport { DynamicIcon } from \"lucide-react/dynamic\";\nimport type { IconName } from \"lucide-react/dynamic\";\n```\n\n`IconName` is still fully usable as a type (props, generics, `Prop.any<IconName>()`); only\nits runtime materialization is invalid. Unknown icon _names_ render gracefully (a `?`\nplaceholder) \u2014 they do not cause this crash. The crash is always the module import itself.\n\n---\n\n## Adding new entries\n\nThis catalog is meant to grow. When you (or a teammate) confirm a new recurring\nimport/module-resolution failure, add an entry with the same structure:\n\n- **Symptom** \u2014 the exact error string Clark will see, plus the user-visible effect.\n- **Cause** \u2014 why the per-file transpile makes it fail.\n- **Fix** \u2014 the corrected import, with a wrong/right code pair.\n\nKeep entries specific and verified. A vague entry is worse than none because it invites\nguessing.\n";
+//# sourceMappingURL=skill.generated.d.ts.map

package/dist/ai-service/skills/system/common-import-issues/skill.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill.generated.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/skills/system/common-import-issues/skill.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,+gHAyFnB,CAAC"}

package/dist/ai-service/skills/system/common-import-issues/skill.generated.js

@@ -0,0 +1,93 @@
+// Auto-generated from src/ai-service/skills/system/common-import-issues/SKILL.md
+// Do not edit directly - edit the .md file instead
+export const content = `---
+name: common-import-issues
+description: |
+  Catalog of known import/module-resolution errors in Superblocks apps and their fixes.
+  Load when a build error, runtime error, or blank/broken preview points at an import — e.g.
+  "does not provide an export named X", "Failed to resolve import", or a module-not-found error.
+readOnly: true
+metadata:
+  author: superblocks
+  version: "1.0"
+---
+
+# Common Import Issues
+
+This skill is a catalog of import and module-resolution errors that break Superblocks
+apps, together with the exact fix for each. App code is transpiled per-file (esbuild/Vite),
+so an import mistake that a normal bundler would tolerate can crash the app at runtime and
+leave the preview blank — which then blocks UI verification (navigation/screenshot) entirely.
+
+## How to use this skill
+
+1. Read the error message and find the failing import.
+2. Match it against an entry below.
+3. Apply the fix, reload the file, and re-test.
+4. If the error is **not** in this catalog, debug it normally — do not guess a fix from a
+   superficially similar entry.
+
+When you fix an import error, prevent it everywhere: scan the rest of the app for the same
+mistake rather than fixing only the file that happened to throw.
+
+---
+
+## Entry 1 — lucide-react/dynamic: \`IconName\` is type-only
+
+### Symptom
+
+The app crashes at runtime (preview is blank, navigation/screenshot tools time out) with:
+
+\`\`\`
+SyntaxError: The requested module '/node_modules/.vite/deps/lucide-react_dynamic.js'
+does not provide an export named 'IconName'
+\`\`\`
+
+### Cause
+
+In \`lucide-react/dynamic\`, \`IconName\` is a **type-only** export and \`DynamicIcon\` is the
+**value** export. Importing \`IconName\` as a value (no \`type\` keyword) leaves a runtime
+import in the transpiled file. Because \`lucide-react\` (v0.540.0) ships no \`exports\` map for
+the runtime entry, the import resolves to a module that has no \`IconName\` runtime binding,
+so the module fails to evaluate and the whole app fails to mount.
+
+\`\`\`typescript
+// ❌ WRONG — value import of a type-only export crashes the app at runtime
+import { IconName } from "lucide-react/dynamic";
+
+// ❌ ALSO WRONG — DynamicIcon is fine as a value, but IconName must still be a type
+import { DynamicIcon, IconName } from "lucide-react/dynamic";
+\`\`\`
+
+### Fix
+
+Import \`IconName\` with the \`type\` keyword. Keep \`DynamicIcon\` as a normal value import.
+
+\`\`\`typescript
+// ✅ CORRECT — IconName as a type, DynamicIcon as a value
+import { DynamicIcon, type IconName } from "lucide-react/dynamic";
+
+// ✅ ALSO CORRECT — separate type-only import
+import { DynamicIcon } from "lucide-react/dynamic";
+import type { IconName } from "lucide-react/dynamic";
+\`\`\`
+
+\`IconName\` is still fully usable as a type (props, generics, \`Prop.any<IconName>()\`); only
+its runtime materialization is invalid. Unknown icon _names_ render gracefully (a \`?\`
+placeholder) — they do not cause this crash. The crash is always the module import itself.
+
+---
+
+## Adding new entries
+
+This catalog is meant to grow. When you (or a teammate) confirm a new recurring
+import/module-resolution failure, add an entry with the same structure:
+
+- **Symptom** — the exact error string Clark will see, plus the user-visible effect.
+- **Cause** — why the per-file transpile makes it fail.
+- **Fix** — the corrected import, with a wrong/right code pair.
+
+Keep entries specific and verified. A vague entry is worse than none because it invites
+guessing.
+`;
+//# sourceMappingURL=skill.generated.js.map

package/dist/ai-service/skills/system/common-import-issues/skill.generated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill.generated.js","sourceRoot":"","sources":["../../../../../src/ai-service/skills/system/common-import-issues/skill.generated.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mDAAmD;AAEnD,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFtB,CAAC"}

package/dist/ai-service/skills/system/superblocks-frontend/skill.generated.d.ts

@@ -1,2 +1,2 @@
-export declare const content = "---\nname: superblocks-frontend\ndescription: |\n  Build frontend UI using React, Tailwind CSS, and Superblocks components. Essential for connecting Superblocks UIs with APIs.\n  Use when creating pages, components, handling user interactions, or working with the design system.\nreadOnly: true\nmetadata:\n  author: superblocks\n  version: \"1.0\"\n---\n\n# Superblocks Frontend Development\n\nThis skill covers building frontend UI for Superblocks applications using React, Tailwind CSS v4, and the Superblocks component library.\n\n## Platform Overview\n\nThis is a React-based web application platform. Use standard React patterns:\n\n- `useState`, `useEffect`, `useCallback`, `useMemo`\n- Event handlers and controlled components\n- JSX with Tailwind CSS classes\n\n## Using APIs from Frontend\n\nThree primitives are available from `@superblocksteam/library`:\n\n- **`useApiData`** \u2014 declarative reads with SWR caching (preferred for data loading)\n- **`useApi`** \u2014 imperative mutations (for event-driven actions)\n- **`executeApi`** \u2014 plain Promise outside React (utility functions, event handlers without hooks)\n\n**Data loading** \u2014 auto-fetches on mount and when inputs change (preferred for reads):\n\n```typescript\nimport { useApiData } from \"@superblocksteam/library\";\n\n// Auto-fetches when email or name changes. No useEffect or HMR guards needed.\n// IMPORTANT: Always use `fetching` to show a loading indicator during refetches.\nconst { data, loading, fetching, isError, error } = useApiData(\"GetUsers\", {\n  email,\n  name,\n});\n```\n\n**Mutations** \u2014 call `run()` manually (for event-driven actions like form submissions):\n\n```typescript\nimport { useApi } from \"@superblocksteam/library\";\nimport { toast } from \"sonner\";\n\nconst { run: createOrder, loading } = useApi(\"CreateOrder\");\n\nconst handleSubmit = useCallback(async () => {\n  try {\n    await createOrder({ item, qty });\n  } catch (error) {\n    const message =\n      error && typeof error === \"object\" && \"message\" in error\n        ? String((error as { message: unknown }).message)\n        : String(error);\n    toast.error(\"Error creating order: \" + message);\n  }\n}, [item, qty, createOrder]);\n```\n\n**Outside React** \u2014 call APIs as a plain Promise (utility functions, event handlers):\n\n```typescript\nimport { executeApi } from \"@superblocksteam/library\";\n\nconst result = await executeApi(\"GetUsers\", { email });\n```\n\n`useApiData` returns `{ data, loading, fetching, isError, isSuccess, isStale, error, status, fetchStatus, refetch, cancel }`. `data` persists across background refetches (stale-while-revalidate). `loading` is true on first fetch with no cached data. `fetching` is true during any fetch including background refetch. `status` is `\"pending\"` | `\"success\"` | `\"error\"`. `fetchStatus` is `\"idle\"` | `\"fetching\"`. `cancel()` is synchronous (returns `void`).\n\n`useApi` returns `{ run, cancel, reset, loading, data, error, status, variables }`. `data` persists across re-runs (shows previous result while loading). `error` holds the most recent failure, or `undefined` on success. `status` is `\"idle\"` | `\"pending\"` | `\"success\"` | `\"error\"`. `variables` holds the inputs from the most recent `run()`. `reset()` clears all state back to idle. HMR double-fetch prevention is built in \u2014 no `useRef` guard needed.\n\n### useApiData Options\n\n```typescript\nconst { data } = useApiData(\"GetUsers\", { email }, {\n  enabled: true,           // Skip fetching when false (conditional fetching)\n  staleTime: 0,            // Ms before cached data is considered stale (0 = always refetch)\n  retry: 3,                // Retry attempts on failure (false to disable)\n  retryDelay: (n) => ...,  // Custom delay strategy (default: exponential backoff, max 30s)\n  refetchOnWindowFocus: false, // Refetch when tab regains focus\n  refetchOnReconnect: true,    // Refetch when network reconnects\n  refetchInterval: false,      // Polling interval in ms (false = disabled)\n  structuralSharing: false,    // Deep-compare to preserve object identity\n  placeholderData: undefined,  // Shown while the first fetch is in progress\n});\n```\n\n### Cache invalidation and optimistic updates\n\n**Same scope as the read**: After a mutation, prefer `refetch()` from the `useApiData` that loads the data (same component or wherever you can pass `refetch`).\n\n```typescript\nimport { useApi, useApiData } from \"@superblocksteam/library\";\nimport { toast } from \"sonner\";\n\nconst { data: orders, refetch } = useApiData(\"GetOrders\", { status });\nconst { run: createOrder } = useApi(\"CreateOrder\");\n\nconst handleSubmit = useCallback(async () => {\n  try {\n    await createOrder({ item, qty });\n    await refetch();\n  } catch (error) {\n    const message =\n      error && typeof error === \"object\" && \"message\" in error\n        ? String((error as { message: unknown }).message)\n        : String(error);\n    toast.error(\"Error creating order: \" + message);\n  }\n}, [item, qty, createOrder, refetch]);\n```\n\n**Cross-scope or broad invalidation**: Use `queryClient.invalidateQueries` when you cannot call that `refetch` (mutation in a different place than the `useApiData`, or you need every cached variant of an API to refetch). For **`queryClient.invalidateQueries`, `buildCacheKey`, `setQueryData`, and any other `queryClient` usage, always import `queryClient` from `@superblocksteam/library`**.\n\n```typescript\nimport { queryClient, useApi } from \"@superblocksteam/library\";\nimport { toast } from \"sonner\";\n\nconst { run: createOrder } = useApi(\"CreateOrder\");\n\nconst handleSubmit = useCallback(async () => {\n  try {\n    await createOrder({ item, qty });\n    await queryClient.invalidateQueries(\"GetOrders\");\n  } catch (error) {\n    const message =\n      error && typeof error === \"object\" && \"message\" in error\n        ? String((error as { message: unknown }).message)\n        : String(error);\n    toast.error(\"Error creating order: \" + message);\n  }\n}, [item, qty, createOrder]);\n```\n\n```typescript\n// Optimistic update: set cached data without refetching\nimport { queryClient } from \"@superblocksteam/library\";\n\nconst cacheKey = queryClient.buildCacheKey(\"GetOrders\", { status: \"active\" });\nqueryClient.setQueryData(cacheKey, (old) => ({\n  ...old,\n  orders: [...old.orders, newOrder],\n}));\n```\n\n### Critical API Rules\n\n1. **MUST call API by exact name**: Format is `<ApiName>` matching folder `apis/<ApiName>/api.yaml`\n2. **Use `useApiData` for data loading, `useApi` for mutations**: For data fetching, use `useApiData(\"GetUsers\", { email })`. Only use `useApi` for event-driven actions (button clicks, form submissions). Use `executeApi` for API calls outside React components.\n3. **Use the hook's state fields**: Do NOT create separate `useState` for loading or response data \u2014 the hooks manage this for you\n4. **ALWAYS check API interfaces**: NEVER guess the response structure\n5. **Include all parameters**: Even optional ones should be passed as `null`\n6. **ALWAYS use try/catch**: In imperative mode, APIs throw errors when they fail - wrap ALL `run()` calls in try/catch blocks. In declarative mode, check the `error` field for failure details.\n\n### File Handling\n\n**CRITICAL: Files must be wrapped in `{ files: [...] }` format:**\n\n```tsx\n// \u2705 CORRECT - Frontend: wrap files in { files: [...] }\nconst response = await runUploadApi({ userFile: { files: selectedFiles } });\n\n// \u274C WRONG - backend cannot process unwrapped files\nconst response = await runUploadApi({ userFile: selectedFiles });\n```\n\n## Platform Hooks and Functions\n\nAvailable hooks and functions from `@superblocksteam/library`:\n\n### User and Group Context\n\n```typescript\nimport {\n  useSuperblocksUser,\n  useSuperblocksGroups,\n} from \"@superblocksteam/library\";\n\n// Get current user info\nconst user = useSuperblocksUser();\n// user.name, user.email, user.id, user.groups, user.username, user.metadata\n\n// Get organization groups\nconst groups = useSuperblocksGroups();\n```\n\n### Environments and Data Tags\n\nConcepts & terminology:\n\n- `Data tags` are labels for different data segments, such as `Staging`, `Production`, or `us-east`.\n- `Profiles` is the legacy term for the same concept. If a user asks about profiles, treat that as data tags.\n- `Environments` are `Edit`, `Preview`, and `Production`, and each data tag is allowed in one or more of those environments.\n- Clark operates in `Edit` mode, so the data tags visible in app context represent the tags available in `Edit`; do not assume this is the same set that will be available in `Preview` or `Production`.\n- When implementing app code, prefer `useSuperblocksDataTags()`, `dataTags`, and `setDataTag()`.\n\nThe `DataTag` type has these fields (it is an alias for `Profile` from `@superblocksteam/shared`):\n\n```typescript\ntype DataTag = {\n  id: string;\n  key: string;\n  displayName: string; // human-readable label \u2014 use this for display, NOT \"name\"\n  description: string;\n  type: \"RESERVED\" | \"CUSTOM\";\n};\n```\n\nRelevant hooks and functions:\n\n```typescript\nimport { useSuperblocksDataTags, getAppMode } from \"@superblocksteam/library\";\nimport type { DataTag, DataTags } from \"@superblocksteam/library\";\n\n// Manage data tags\nconst { dataTags, setDataTag } = useSuperblocksDataTags();\n// dataTags.available: DataTag[]   \u2014 all tags in the current environment\n// dataTags.selected:  DataTag | undefined \u2014 currently active tag (may be undefined)\n// dataTags.default:   DataTag     \u2014 the default tag\n// setDataTag(dataTag.key)         \u2014 switch the active tag by key\n\n// Read the current app mode when reasoning about environment-specific behavior\nconst appMode = getAppMode();\n```\n\nExample \u2014 data tag switcher using a Select:\n\n```tsx\nconst { dataTags, setDataTag } = useSuperblocksDataTags();\n\n<Select value={dataTags?.selected?.key} onValueChange={setDataTag}>\n  {dataTags?.available.map((tag) => (\n    <SelectItem key={tag.key} value={tag.key}>\n      {tag.displayName}\n    </SelectItem>\n  ))}\n</Select>;\n```\n\n### Embedded Applications\n\n**For embedded applications**, see the `references/embedding.md` file for `useEmbedProperties`, `useEmbedEvent`, and `useEmitEmbedEvent` hooks.\n\n## Logging Out of Integrations\n\nWhen building a \"Log out\" or \"Sign out\" button for apps that use OAuth-like integrations, use `logoutIntegrations` from the library to clear OAuth tokens:\n\n```typescript\nimport { logoutIntegrations } from \"@superblocksteam/library\";\n\nconst handleLogout = async () => {\n  await logoutIntegrations();\n  // Optionally redirect or show confirmation\n};\n```\n\n## Application Architecture\n\n### App.tsx Layout Structure\n\n**For single-page applications:**\n\n- Put all content in `pages/<pageName>/index.tsx`\n- Use components to compose and build the page\n- Keep `App.tsx` minimal with just `<AppProvider>` and `<Outlet />`\n\n**For multi-page applications:**\n\n- Put shared navigation/layout in `App.tsx` (sidebars, headers, footers)\n- Always include `<Outlet />` for page content\n- Always include `<AppProvider />` wrapper\n- Individual pages focus on content, not layout\n\n```tsx\n// \u2705 CORRECT - Multi-page App.tsx layout\n<AppProvider>\n  <div className=\"flex flex-row size-screen\">\n    {/* Sidebar - persistent across all pages */}\n    <div className=\"flex bg-sidebar border-r w-[250px]\">\n      <Navigation />\n    </div>\n\n    {/* Main content area */}\n    <div className=\"flex flex-1 h-full flex-col\">\n      {/* Header - persistent across all pages */}\n      <div className=\"flex bg-header border-b h-[60px]\">\n        <Header />\n      </div>\n\n      {/* Page content area */}\n      <div className=\"flex p-4 flex-1 overflow-auto\">\n        <Outlet />\n      </div>\n    </div>\n  </div>\n</AppProvider>\n```\n\n**PROTECTED: NEVER remove `<AppProvider>` or `<Outlet />` from App.tsx!**\n\n### Page Structure\n\n```tsx\n// \u2705 CORRECT - Page focuses on content only\n<div className=\"flex flex-col gap-4 size-screen overflow-auto\">\n  <h1 className=\"text-3xl font-bold\">Dashboard Content</h1>\n  <Card>{/* Page-specific content */}</Card>\n</div>\n```\n\n**IMPORTANT**: The first div on the page must have `overflow-auto` so the user's page can scroll.\n\n## Routing\n\nUse `react-router@7` in data mode. Standard patterns apply:\n\n- `useNavigate()` for programmatic navigation\n- `useParams()` for route parameters\n- `useSearchParams()` for query strings\n\n**If you add new pages or rename files, you MUST update the router.**\n\n## Design System (Tailwind CSS v4)\n\n**All design tokens are defined in `index.css`**. Apps come with a professional black-and-white theme by default.\n\n### Semantic Tokens Rule\n\n**ALWAYS use semantic tokens** \u2014 NEVER raw Tailwind utilities:\n\n```tsx\n// \u2705 CORRECT\n<Card className=\"bg-background text-foreground border border-border\" />\n\n// \u274C WRONG\n<Card className=\"bg-white text-black border-gray-200\" />\n```\n\n### When to Modify index.css\n\nOnly modify when:\n\n- User explicitly requests branding/theme changes\n- Replicating a specific brand look (e.g., Yelp, Instacart)\n- Migrating an attached third-party app \u2014 see `skills/system/third-party-migration/SKILL.md` (its theme-port rules override the Modification Rules below \u2014 copy source tokens as-is, do not convert to OKLCH or trim the palette)\n- Feature requests (lists, filters, CRUD) do NOT require changes\n\n**Modification Rules:**\n\n- All colors must be in OKLCH format\n- Use semantic names (`--color-warning`, `--shadow-elevated`)\n- Do not remove or rename existing tokens\n- Limit color palette to 5 colors max\n- Avoid gradients unless explicitly requested\n- Minimal font sizes (3 max: body, section heading, main heading)\n\n### Component Variants\n\nUse or create variants instead of one-off styles:\n\n```tsx\n// \u274C WRONG - Hacky inline overrides\n<Button className=\"text-white border-white hover:bg-white\" />\n\n// \u2705 CORRECT - Use a variant\n<Button variant=\"secondary\" />\n```\n\n## Icons\n\nUse icons from Lucide React library:\n\n```tsx\nimport { Icon } from \"@/components/ui/icon\";\n<Icon icon=\"heart\" />;\n\nimport { Button } from \"@/components/ui/button\";\n<Button>\n  <Icon icon=\"plus\" /> Add Item\n</Button>;\n```\n\n**Always use icons rather than emojis unless explicitly requested.**\n\nUse current Lucide icon names, not stale aliases: use `house` instead of `home`, `life-buoy` instead of `help-circle` or `circle-help`, and `chart-column-big` instead of `bar-chart-3`.\n\n## Custom Components\n\n**CRITICAL: Component composition is MANDATORY. DO NOT create monolithic pages.**\n\n### The Composition Rule\n\nWhen building ANY feature:\n\n1. **First**, identify reusable parts (list items, cards, forms, filters, headers)\n2. **Then**, create separate component files\n3. **Finally**, compose them together in the page\n\n### When to Create Components\n\n- **Rendering any list** - Extract to a component\n- **Building cards/complex UI** - Each card type is a component\n- **Creating forms** - Form sections are components\n- **Adding filters/headers** - These are components\n- **Page has >50 lines JSX** - Break it down\n\n### Component Boundary Rules\n\n**Inside a custom component:**\n\n- \u2705 Use React hooks (useState, useReducer, useEffect, etc.)\n- \u2705 Use local React state\n- \u2705 Use internal helper components\n- \u2705 Use other registered components\n- \u274C CANNOT call APIs - must pass data into the component\n\n### Example: Proper Component Structure\n\n```tsx\n// components/ProductCard/index.tsx - Extract to component\nimport { Card } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\ntype ProductCardProps = {\n  product: {\n    id: string;\n    name: string;\n    image: string;\n  };\n};\n\nexport default function ProductCard(props: ProductCardProps) {\n  return (\n    <Card>\n      <img src={props.product.image} />\n      <h3 className=\"text-lg font-semibold\">{props.product.name}</h3>\n      <Button>Add</Button>\n    </Card>\n  );\n}\n\n// pages/Products/index.tsx - Clean composition\nimport ProductCard from \"@/components/ProductCard\";\n\nconst ProductsPage = () => {\n  const [products, setProducts] = useState([]);\n\n  return (\n    <div className=\"grid grid-cols-3 gap-4\">\n      {products.map((p) => (\n        <ProductCard key={p.id} product={p} />\n      ))}\n    </div>\n  );\n};\n```\n\n## Visual Excellence\n\n**Prioritize visual excellence from the start:**\n\n1. **Design System Enhancement**: Start by enhancing `index.css` with app-specific colors that match the target aesthetic\n2. **Professional Layout Architecture**: Use sophisticated layouts with proper spacing, responsive design\n3. **Rich Interactive Components**: Leverage advanced components with proper variants and states\n4. **Visual Polish**: Add shadows, smooth transitions, skeleton loaders, hover effects, typography hierarchy\n5. **Real-World UI Patterns**: Create layouts that feel like professional applications\n\n**Make applications that look and feel like real, polished products - not basic wireframes.**\n\n### Loading States\n\nLoading behavior must differ based on whether data has already been fetched:\n\n**Initial load (no data yet):** Show skeleton shimmers that mirror the shape of the final content. Never show a blank screen or a generic spinner.\n\n**Refetch / background refresh (data already exists):** Keep showing the existing data. Use `fetching` from `useApiData` to apply a subtle visual indicator: light opacity (e.g. `opacity-70`) to signal a refresh is in progress, plus a non-blocking label such as a small inline spinner, a thin progress bar, or an \"Updating\u2026\" label. **Do not** use `pointer-events-none` or otherwise disable the content \u2014 it must remain fully interactive during refetch.\n\nUse `loading` and `fetching` from `useApiData` to distinguish these states:\n\n```tsx\nconst { data, loading, fetching, isError, error } = useApiData(\"GetOrders\", {\n  status: statusFilter,\n  search,\n});\n\n// Initial load \u2014 no data yet \u2192 show skeleton placeholder\nif (loading) {\n  return <OrderTableSkeleton />;\n}\n\nif (isError) return <ErrorBanner error={error} />;\n\n// Refetch \u2014 data exists \u2192 subtle opacity + indicator, table stays interactive\nreturn (\n  <div>\n    {fetching && <div className=\"text-xs text-muted-foreground\">Updating\u2026</div>}\n    <div className={fetching ? \"opacity-70\" : \"\"}>\n      <OrderTable orders={data.orders} />\n    </div>\n  </div>\n);\n```\n\n```tsx\n// \u274C WRONG \u2014 pointer-events-none disables the table, making it feel broken\nreturn (\n  <div className={fetching ? \"pointer-events-none\" : \"\"}>\n    <OrderTable orders={data.orders} />\n  </div>\n);\n\n// \u274C WRONG \u2014 no loading feedback when filters change\nif (loading) return <Skeleton />;\nreturn <OrderTable orders={data.orders} />;\n```\n\n#### Table Loading Rules\n\n- **Do not** use `pointer-events-none` on a table during loading \u2014 this disables interaction and makes the UI feel broken. During refetch, apply a subtle opacity (e.g. `opacity-70`) plus a non-blocking indicator (e.g., an \"Updating\u2026\" label or a thin progress bar). The table must remain clickable, sortable, and scrollable.\n- **Do not** replace a populated table with a full skeleton on refetch \u2014 this causes disorienting content flashes.\n- **Skeleton tables are only for initial load** (`loading` is true) when there is no data to display yet. Build them to match the real table's column structure (header + a few placeholder rows).\n\n### Efficient Loading Patterns\n\n1. **Always show loading indicators on refetch**: When inputs change (e.g. filters, search), show a non-blocking visual indicator while new data loads. Use `fetching` from `useApiData`.\n2. **Loading State Hierarchy**:\n   - No data yet (`loading`) \u2192 Full skeleton placeholder\n   - Has data, refetching (`fetching` && !`loading`) \u2192 Keep showing current data with a subtle visual indicator: light opacity (e.g. `opacity-70`) plus a non-blocking label (e.g. \"Updating\u2026\" text, thin progress bar, inline spinner). Do not use `pointer-events-none` \u2014 the content must remain fully interactive.\n   - Error state (`isError`) \u2192 Show error with retry option, optionally keep stale data visible\n3. **Debounce Rapid Requests**: Prevent multiple API calls in short succession\n4. **Use useApiData for automatic refetching**: `useApiData` auto-refetches when inputs change and supports `staleTime`, `refetchOnWindowFocus`, `refetchOnReconnect`, `refetchInterval`, and `retry` options.\n\n## Performance Rules\n\n### 1. ALWAYS Paginate Tables and Lists\n\n**NEVER render more than 50 rows without pagination.** Always add client-side pagination:\n\n```tsx\nfunction PaginatedTable({ data }: { data: any[] }) {\n  const PAGE_SIZE = 20;\n  const [page, setPage] = useState(0);\n  const totalPages = Math.ceil(data.length / PAGE_SIZE);\n  const pageData = useMemo(\n    () => data.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE),\n    [data, page],\n  );\n\n  useEffect(() => {\n    setPage(0);\n  }, [data.length]);\n\n  return (\n    <>\n      <Table>{/* render pageData rows */}</Table>\n      <span>\n        Page {page + 1} of {totalPages} ({data.length} total rows)\n      </span>\n      <Button\n        onClick={() => setPage((p) => Math.max(0, p - 1))}\n        disabled={page === 0}\n      >\n        Previous\n      </Button>\n      <Button\n        onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}\n        disabled={page >= totalPages - 1}\n      >\n        Next\n      </Button>\n    </>\n  );\n}\n```\n\nFor 200+ rows, prefer **server-side pagination**; use cursor/keyset pagination for high offsets instead of `LIMIT`/`OFFSET`.\n\nFor 500+ item lists where pagination doesn't fit the UX (chat messages, infinite scroll feeds, large dropdowns), use **virtualization** (`react-virtuoso` or `@tanstack/react-virtual`) to render only the items visible in the viewport.\n\n### 2. ALWAYS Debounce Input-Driven API Calls\n\n**NEVER call an API directly from onChange.** Debounce search/filter inputs with a 300ms timer:\n\n```tsx\nfunction DebouncedSearch({ onSearch }: { onSearch: (query: string) => void }) {\n  const [localValue, setLocalValue] = useState(\"\");\n  const timerRef = useRef<ReturnType<typeof setTimeout>>();\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setLocalValue(e.target.value);\n      clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => onSearch(e.target.value), 300);\n    },\n    [onSearch],\n  );\n  useEffect(() => () => clearTimeout(timerRef.current), []);\n\n  return (\n    <Input value={localValue} onChange={handleChange} placeholder=\"Search...\" />\n  );\n}\n```\n\n### 3. Memoize Expensive Renders\n\nUse memoization (`memo()`, `useMemo`, `useCallback`) when it prevents measurable re-renders or expensive recomputation:\n\n```tsx\nconst OrderRow = memo(function OrderRow({\n  order,\n  onSelect,\n}: {\n  order: Order;\n  onSelect: (id: string) => void;\n}) {\n  return (\n    <TableRow onClick={() => onSelect(order.id)}>\n      <TableCell>{order.id}</TableCell>...\n    </TableRow>\n  );\n});\n\nconst handleSelect = useCallback((id: string) => {\n  setSelectedId(id);\n}, []);\n\nconst filtered = useMemo(\n  () =>\n    orders.filter((o) => o.status === status).sort((a, b) => b.total - a.total),\n  [orders, status],\n);\n```\n\n### 4. ALWAYS Clean Up Side Effects\n\nClean up timers, event listeners, and subscriptions in `useEffect` return functions:\n\n```tsx\nuseEffect(() => {\n  const handler = (e: KeyboardEvent) => {\n    /* ... */\n  };\n  window.addEventListener(\"keydown\", handler);\n  return () => window.removeEventListener(\"keydown\", handler);\n}, []);\n```\n\n### 5. Cancel In-Flight API Requests on Unmount\n\nFor search/filter patterns, prefer `useApiData` \u2014 it handles cancellation and cleanup automatically:\n\n```tsx\n// useApiData: auto-fetches and cancels on unmount/input change\nconst { data, fetching } = useApiData(\"SearchProducts\", { query });\n```\n\nFor imperative usage with manual cleanup, use the `cancel()` function:\n\n```tsx\nconst { run, cancel } = useApi(\"SearchProducts\");\n\nuseEffect(() => {\n  if (!query) return;\n  run({ query }).catch(console.error);\n  return () => {\n    cancel().catch(() => {});\n  };\n}, [query, run, cancel]);\n```\n";
+export declare const content = "---\nname: superblocks-frontend\ndescription: |\n  Build frontend UI using React, Tailwind CSS, and Superblocks components. Essential for connecting Superblocks UIs with APIs.\n  Use when creating pages, components, handling user interactions, or working with the design system.\nreadOnly: true\nmetadata:\n  author: superblocks\n  version: \"1.0\"\n---\n\n# Superblocks Frontend Development\n\nThis skill covers building frontend UI for Superblocks applications using React, Tailwind CSS v4, and the Superblocks component library.\n\n## Platform Overview\n\nThis is a React-based web application platform. Use standard React patterns:\n\n- `useState`, `useEffect`, `useCallback`, `useMemo`\n- Event handlers and controlled components\n- JSX with Tailwind CSS classes\n\n## Using APIs from Frontend\n\nThree primitives are available from `@superblocksteam/library`:\n\n- **`useApiData`** \u2014 declarative reads with SWR caching (preferred for data loading)\n- **`useApi`** \u2014 imperative mutations (for event-driven actions)\n- **`executeApi`** \u2014 plain Promise outside React (utility functions, event handlers without hooks)\n\n**Data loading** \u2014 auto-fetches on mount and when inputs change (preferred for reads):\n\n```typescript\nimport { useApiData } from \"@superblocksteam/library\";\n\n// Auto-fetches when email or name changes. No useEffect or HMR guards needed.\n// IMPORTANT: Always use `fetching` to show a loading indicator during refetches.\nconst { data, loading, fetching, isError, error } = useApiData(\"GetUsers\", {\n  email,\n  name,\n});\n```\n\n**Mutations** \u2014 call `run()` manually (for event-driven actions like form submissions):\n\n```typescript\nimport { useApi } from \"@superblocksteam/library\";\nimport { toast } from \"sonner\";\n\nconst { run: createOrder, loading } = useApi(\"CreateOrder\");\n\nconst handleSubmit = useCallback(async () => {\n  try {\n    await createOrder({ item, qty });\n  } catch (error) {\n    const message =\n      error && typeof error === \"object\" && \"message\" in error\n        ? String((error as { message: unknown }).message)\n        : String(error);\n    toast.error(\"Error creating order: \" + message);\n  }\n}, [item, qty, createOrder]);\n```\n\n**Outside React** \u2014 call APIs as a plain Promise (utility functions, event handlers):\n\n```typescript\nimport { executeApi } from \"@superblocksteam/library\";\n\nconst result = await executeApi(\"GetUsers\", { email });\n```\n\n`useApiData` returns `{ data, loading, fetching, isError, isSuccess, isStale, error, status, fetchStatus, refetch, cancel }`. `data` persists across background refetches (stale-while-revalidate). `loading` is true on first fetch with no cached data. `fetching` is true during any fetch including background refetch. `status` is `\"pending\"` | `\"success\"` | `\"error\"`. `fetchStatus` is `\"idle\"` | `\"fetching\"`. `cancel()` is synchronous (returns `void`).\n\n`useApi` returns `{ run, cancel, reset, loading, data, error, status, variables }`. `data` persists across re-runs (shows previous result while loading). `error` holds the most recent failure, or `undefined` on success. `status` is `\"idle\"` | `\"pending\"` | `\"success\"` | `\"error\"`. `variables` holds the inputs from the most recent `run()`. `reset()` clears all state back to idle. HMR double-fetch prevention is built in \u2014 no `useRef` guard needed.\n\n### useApiData Options\n\n```typescript\nconst { data } = useApiData(\"GetUsers\", { email }, {\n  enabled: true,           // Skip fetching when false (conditional fetching)\n  staleTime: 0,            // Ms before cached data is considered stale (0 = always refetch)\n  retry: 3,                // Retry attempts on failure (false to disable)\n  retryDelay: (n) => ...,  // Custom delay strategy (default: exponential backoff, max 30s)\n  refetchOnWindowFocus: false, // Refetch when tab regains focus\n  refetchOnReconnect: true,    // Refetch when network reconnects\n  refetchInterval: false,      // Polling interval in ms (false = disabled)\n  structuralSharing: false,    // Deep-compare to preserve object identity\n  placeholderData: undefined,  // Shown while the first fetch is in progress\n});\n```\n\n### Cache invalidation and optimistic updates\n\n**Same scope as the read**: After a mutation, prefer `refetch()` from the `useApiData` that loads the data (same component or wherever you can pass `refetch`).\n\n```typescript\nimport { useApi, useApiData } from \"@superblocksteam/library\";\nimport { toast } from \"sonner\";\n\nconst { data: orders, refetch } = useApiData(\"GetOrders\", { status });\nconst { run: createOrder } = useApi(\"CreateOrder\");\n\nconst handleSubmit = useCallback(async () => {\n  try {\n    await createOrder({ item, qty });\n    await refetch();\n  } catch (error) {\n    const message =\n      error && typeof error === \"object\" && \"message\" in error\n        ? String((error as { message: unknown }).message)\n        : String(error);\n    toast.error(\"Error creating order: \" + message);\n  }\n}, [item, qty, createOrder, refetch]);\n```\n\n**Cross-scope or broad invalidation**: Use `queryClient.invalidateQueries` when you cannot call that `refetch` (mutation in a different place than the `useApiData`, or you need every cached variant of an API to refetch). For **`queryClient.invalidateQueries`, `buildCacheKey`, `setQueryData`, and any other `queryClient` usage, always import `queryClient` from `@superblocksteam/library`**.\n\n```typescript\nimport { queryClient, useApi } from \"@superblocksteam/library\";\nimport { toast } from \"sonner\";\n\nconst { run: createOrder } = useApi(\"CreateOrder\");\n\nconst handleSubmit = useCallback(async () => {\n  try {\n    await createOrder({ item, qty });\n    await queryClient.invalidateQueries(\"GetOrders\");\n  } catch (error) {\n    const message =\n      error && typeof error === \"object\" && \"message\" in error\n        ? String((error as { message: unknown }).message)\n        : String(error);\n    toast.error(\"Error creating order: \" + message);\n  }\n}, [item, qty, createOrder]);\n```\n\n```typescript\n// Optimistic update: set cached data without refetching\nimport { queryClient } from \"@superblocksteam/library\";\n\nconst cacheKey = queryClient.buildCacheKey(\"GetOrders\", { status: \"active\" });\nqueryClient.setQueryData(cacheKey, (old) => ({\n  ...old,\n  orders: [...old.orders, newOrder],\n}));\n```\n\n### Critical API Rules\n\n1. **MUST call API by exact name**: Format is `<ApiName>` matching folder `apis/<ApiName>/api.yaml`\n2. **Use `useApiData` for data loading, `useApi` for mutations**: For data fetching, use `useApiData(\"GetUsers\", { email })`. Only use `useApi` for event-driven actions (button clicks, form submissions). Use `executeApi` for API calls outside React components.\n3. **Use the hook's state fields**: Do NOT create separate `useState` for loading or response data \u2014 the hooks manage this for you\n4. **ALWAYS check API interfaces**: NEVER guess the response structure\n5. **Include all parameters**: Even optional ones should be passed as `null`\n6. **ALWAYS use try/catch**: In imperative mode, APIs throw errors when they fail - wrap ALL `run()` calls in try/catch blocks. In declarative mode, check the `error` field for failure details.\n\n### File Handling\n\n**CRITICAL: Files must be wrapped in `{ files: [...] }` format:**\n\n```tsx\n// \u2705 CORRECT - Frontend: wrap files in { files: [...] }\nconst response = await runUploadApi({ userFile: { files: selectedFiles } });\n\n// \u274C WRONG - backend cannot process unwrapped files\nconst response = await runUploadApi({ userFile: selectedFiles });\n```\n\n## Platform Hooks and Functions\n\nAvailable hooks and functions from `@superblocksteam/library`:\n\n### User and Group Context\n\n```typescript\nimport {\n  useSuperblocksUser,\n  useSuperblocksGroups,\n} from \"@superblocksteam/library\";\n\n// Get current user info\nconst user = useSuperblocksUser();\n// user.name, user.email, user.id, user.groups, user.username, user.metadata\n\n// Get organization groups\nconst groups = useSuperblocksGroups();\n```\n\n### Environments and Data Tags\n\nConcepts & terminology:\n\n- `Data tags` are labels for different data segments, such as `Staging`, `Production`, or `us-east`.\n- `Profiles` is the legacy term for the same concept. If a user asks about profiles, treat that as data tags.\n- `Environments` are `Edit`, `Preview`, and `Production`, and each data tag is allowed in one or more of those environments.\n- Clark operates in `Edit` mode, so the data tags visible in app context represent the tags available in `Edit`; do not assume this is the same set that will be available in `Preview` or `Production`.\n- When implementing app code, prefer `useSuperblocksDataTags()`, `dataTags`, and `setDataTag()`.\n\nThe `DataTag` type has these fields (it is an alias for `Profile` from `@superblocksteam/shared`):\n\n```typescript\ntype DataTag = {\n  id: string;\n  key: string;\n  displayName: string; // human-readable label \u2014 use this for display, NOT \"name\"\n  description: string;\n  type: \"RESERVED\" | \"CUSTOM\";\n};\n```\n\nRelevant hooks and functions:\n\n```typescript\nimport { useSuperblocksDataTags, getAppMode } from \"@superblocksteam/library\";\nimport type { DataTag, DataTags } from \"@superblocksteam/library\";\n\n// Manage data tags\nconst { dataTags, setDataTag } = useSuperblocksDataTags();\n// dataTags.available: DataTag[]   \u2014 all tags in the current environment\n// dataTags.selected:  DataTag | undefined \u2014 currently active tag (may be undefined)\n// dataTags.default:   DataTag     \u2014 the default tag\n// setDataTag(dataTag.key)         \u2014 switch the active tag by key\n\n// Read the current app mode when reasoning about environment-specific behavior\nconst appMode = getAppMode();\n```\n\nExample \u2014 data tag switcher using a Select:\n\n```tsx\nconst { dataTags, setDataTag } = useSuperblocksDataTags();\n\n<Select value={dataTags?.selected?.key} onValueChange={setDataTag}>\n  {dataTags?.available.map((tag) => (\n    <SelectItem key={tag.key} value={tag.key}>\n      {tag.displayName}\n    </SelectItem>\n  ))}\n</Select>;\n```\n\n### Embedded Applications\n\n**For embedded applications**, see the `references/embedding.md` file for `useEmbedProperties`, `useEmbedEvent`, and `useEmitEmbedEvent` hooks.\n\n## Logging Out of Integrations\n\nWhen building a \"Log out\" or \"Sign out\" button for apps that use OAuth-like integrations, use `logoutIntegrations` from the library to clear OAuth tokens:\n\n```typescript\nimport { logoutIntegrations } from \"@superblocksteam/library\";\n\nconst handleLogout = async () => {\n  await logoutIntegrations();\n  // Optionally redirect or show confirmation\n};\n```\n\n## Application Architecture\n\n### App.tsx Layout Structure\n\n**For single-page applications:**\n\n- Put all content in `pages/<pageName>/index.tsx`\n- Use components to compose and build the page\n- Keep `App.tsx` minimal with just `<AppProvider>` and `<Outlet />`\n\n**For multi-page applications:**\n\n- Put shared navigation/layout in `App.tsx` (sidebars, headers, footers)\n- Always include `<Outlet />` for page content\n- Always include `<AppProvider />` wrapper\n- Individual pages focus on content, not layout\n\n```tsx\n// \u2705 CORRECT - Multi-page App.tsx layout\n<AppProvider>\n  <div className=\"flex flex-row size-screen\">\n    {/* Sidebar - persistent across all pages */}\n    <div className=\"flex bg-sidebar border-r w-[250px]\">\n      <Navigation />\n    </div>\n\n    {/* Main content area */}\n    <div className=\"flex flex-1 h-full flex-col\">\n      {/* Header - persistent across all pages */}\n      <div className=\"flex bg-header border-b h-[60px]\">\n        <Header />\n      </div>\n\n      {/* Page content area */}\n      <div className=\"flex p-4 flex-1 overflow-auto\">\n        <Outlet />\n      </div>\n    </div>\n  </div>\n</AppProvider>\n```\n\n**PROTECTED: NEVER remove `<AppProvider>` or `<Outlet />` from App.tsx!**\n\n### Page Structure\n\n```tsx\n// \u2705 CORRECT - Page focuses on content only\n<div className=\"flex flex-col gap-4 size-screen overflow-auto\">\n  <h1 className=\"text-3xl font-bold\">Dashboard Content</h1>\n  <Card>{/* Page-specific content */}</Card>\n</div>\n```\n\n**IMPORTANT**: The first div on the page must have `overflow-auto` so the user's page can scroll.\n\n## Routing\n\nUse `react-router@7` in data mode. Standard patterns apply:\n\n- `useNavigate()` for programmatic navigation\n- `useParams()` for route parameters\n- `useSearchParams()` for query strings\n\n**If you add new pages or rename files, you MUST update the router.**\n\n## Design System (Tailwind CSS v4)\n\n**All design tokens are defined in `index.css`**. Apps come with a professional black-and-white theme by default.\n\n### Semantic Tokens Rule\n\n**ALWAYS use semantic tokens** \u2014 NEVER raw Tailwind utilities:\n\n```tsx\n// \u2705 CORRECT\n<Card className=\"bg-background text-foreground border border-border\" />\n\n// \u274C WRONG\n<Card className=\"bg-white text-black border-gray-200\" />\n```\n\n### When to Modify index.css\n\nOnly modify when:\n\n- User explicitly requests branding/theme changes\n- Replicating a specific brand look (e.g., Yelp, Instacart)\n- Migrating an attached third-party app \u2014 see `skills/system/third-party-migration/SKILL.md` (its theme-port rules override the Modification Rules below \u2014 copy source tokens as-is, do not convert to OKLCH or trim the palette)\n- Feature requests (lists, filters, CRUD) do NOT require changes\n\n**Modification Rules:**\n\n- All colors must be in OKLCH format\n- Use semantic names (`--color-warning`, `--shadow-elevated`)\n- Do not remove or rename existing tokens\n- Limit color palette to 5 colors max\n- Avoid gradients unless explicitly requested\n- Minimal font sizes (3 max: body, section heading, main heading)\n\n### Component Variants\n\nUse or create variants instead of one-off styles:\n\n```tsx\n// \u274C WRONG - Hacky inline overrides\n<Button className=\"text-white border-white hover:bg-white\" />\n\n// \u2705 CORRECT - Use a variant\n<Button variant=\"secondary\" />\n```\n\n## Icons\n\nUse icons from Lucide React library:\n\n```tsx\nimport { Icon } from \"@/components/ui/icon\";\n<Icon icon=\"heart\" />;\n\nimport { Button } from \"@/components/ui/button\";\n<Button>\n  <Icon icon=\"plus\" /> Add Item\n</Button>;\n```\n\n**Always use icons rather than emojis unless explicitly requested.**\n\nUse current Lucide icon names, not stale aliases: use `house` instead of `home`, `life-buoy` instead of `help-circle` or `circle-help`, and `chart-column-big` instead of `bar-chart-3`.\n\nWhen storing icon names as data (arrays/objects), type them with `IconName`. **`IconName` is a TYPE-only export \u2014 you MUST import it with the `type` keyword.** A value import compiles but CRASHES the app at runtime (`does not provide an export named 'IconName'`) and leaves the preview blank, which blocks UI verification. If you hit that error, read `skills/system/common-import-issues/SKILL.md`.\n\n```tsx\n// \u2705 CORRECT \u2014 type-only import\nimport type { IconName } from \"lucide-react/dynamic\";\n\nconst navItems: { icon: IconName; label: string }[] = [\n  { icon: \"house\", label: \"Home\" },\n  { icon: \"settings\", label: \"Settings\" },\n];\n\n// \u274C WRONG \u2014 value import crashes the app at runtime and blanks the preview\nimport { IconName } from \"lucide-react/dynamic\";\n```\n\n## Custom Components\n\n**CRITICAL: Component composition is MANDATORY. DO NOT create monolithic pages.**\n\n### The Composition Rule\n\nWhen building ANY feature:\n\n1. **First**, identify reusable parts (list items, cards, forms, filters, headers)\n2. **Then**, create separate component files\n3. **Finally**, compose them together in the page\n\n### When to Create Components\n\n- **Rendering any list** - Extract to a component\n- **Building cards/complex UI** - Each card type is a component\n- **Creating forms** - Form sections are components\n- **Adding filters/headers** - These are components\n- **Page has >50 lines JSX** - Break it down\n\n### Component Boundary Rules\n\n**Inside a custom component:**\n\n- \u2705 Use React hooks (useState, useReducer, useEffect, etc.)\n- \u2705 Use local React state\n- \u2705 Use internal helper components\n- \u2705 Use other registered components\n- \u274C CANNOT call APIs - must pass data into the component\n\n### Example: Proper Component Structure\n\n```tsx\n// components/ProductCard/index.tsx - Extract to component\nimport { Card } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\n\ntype ProductCardProps = {\n  product: {\n    id: string;\n    name: string;\n    image: string;\n  };\n};\n\nexport default function ProductCard(props: ProductCardProps) {\n  return (\n    <Card>\n      <img src={props.product.image} />\n      <h3 className=\"text-lg font-semibold\">{props.product.name}</h3>\n      <Button>Add</Button>\n    </Card>\n  );\n}\n\n// pages/Products/index.tsx - Clean composition\nimport ProductCard from \"@/components/ProductCard\";\n\nconst ProductsPage = () => {\n  const [products, setProducts] = useState([]);\n\n  return (\n    <div className=\"grid grid-cols-3 gap-4\">\n      {products.map((p) => (\n        <ProductCard key={p.id} product={p} />\n      ))}\n    </div>\n  );\n};\n```\n\n## Visual Excellence\n\n**Prioritize visual excellence from the start:**\n\n1. **Design System Enhancement**: Start by enhancing `index.css` with app-specific colors that match the target aesthetic\n2. **Professional Layout Architecture**: Use sophisticated layouts with proper spacing, responsive design\n3. **Rich Interactive Components**: Leverage advanced components with proper variants and states\n4. **Visual Polish**: Add shadows, smooth transitions, skeleton loaders, hover effects, typography hierarchy\n5. **Real-World UI Patterns**: Create layouts that feel like professional applications\n\n**Make applications that look and feel like real, polished products - not basic wireframes.**\n\n### Loading States\n\nLoading behavior must differ based on whether data has already been fetched:\n\n**Initial load (no data yet):** Show skeleton shimmers that mirror the shape of the final content. Never show a blank screen or a generic spinner.\n\n**Refetch / background refresh (data already exists):** Keep showing the existing data. Use `fetching` from `useApiData` to apply a subtle visual indicator: light opacity (e.g. `opacity-70`) to signal a refresh is in progress, plus a non-blocking label such as a small inline spinner, a thin progress bar, or an \"Updating\u2026\" label. **Do not** use `pointer-events-none` or otherwise disable the content \u2014 it must remain fully interactive during refetch.\n\nUse `loading` and `fetching` from `useApiData` to distinguish these states:\n\n```tsx\nconst { data, loading, fetching, isError, error } = useApiData(\"GetOrders\", {\n  status: statusFilter,\n  search,\n});\n\n// Initial load \u2014 no data yet \u2192 show skeleton placeholder\nif (loading) {\n  return <OrderTableSkeleton />;\n}\n\nif (isError) return <ErrorBanner error={error} />;\n\n// Refetch \u2014 data exists \u2192 subtle opacity + indicator, table stays interactive\nreturn (\n  <div>\n    {fetching && <div className=\"text-xs text-muted-foreground\">Updating\u2026</div>}\n    <div className={fetching ? \"opacity-70\" : \"\"}>\n      <OrderTable orders={data.orders} />\n    </div>\n  </div>\n);\n```\n\n```tsx\n// \u274C WRONG \u2014 pointer-events-none disables the table, making it feel broken\nreturn (\n  <div className={fetching ? \"pointer-events-none\" : \"\"}>\n    <OrderTable orders={data.orders} />\n  </div>\n);\n\n// \u274C WRONG \u2014 no loading feedback when filters change\nif (loading) return <Skeleton />;\nreturn <OrderTable orders={data.orders} />;\n```\n\n#### Table Loading Rules\n\n- **Do not** use `pointer-events-none` on a table during loading \u2014 this disables interaction and makes the UI feel broken. During refetch, apply a subtle opacity (e.g. `opacity-70`) plus a non-blocking indicator (e.g., an \"Updating\u2026\" label or a thin progress bar). The table must remain clickable, sortable, and scrollable.\n- **Do not** replace a populated table with a full skeleton on refetch \u2014 this causes disorienting content flashes.\n- **Skeleton tables are only for initial load** (`loading` is true) when there is no data to display yet. Build them to match the real table's column structure (header + a few placeholder rows).\n\n### Efficient Loading Patterns\n\n1. **Always show loading indicators on refetch**: When inputs change (e.g. filters, search), show a non-blocking visual indicator while new data loads. Use `fetching` from `useApiData`.\n2. **Loading State Hierarchy**:\n   - No data yet (`loading`) \u2192 Full skeleton placeholder\n   - Has data, refetching (`fetching` && !`loading`) \u2192 Keep showing current data with a subtle visual indicator: light opacity (e.g. `opacity-70`) plus a non-blocking label (e.g. \"Updating\u2026\" text, thin progress bar, inline spinner). Do not use `pointer-events-none` \u2014 the content must remain fully interactive.\n   - Error state (`isError`) \u2192 Show error with retry option, optionally keep stale data visible\n3. **Debounce Rapid Requests**: Prevent multiple API calls in short succession\n4. **Use useApiData for automatic refetching**: `useApiData` auto-refetches when inputs change and supports `staleTime`, `refetchOnWindowFocus`, `refetchOnReconnect`, `refetchInterval`, and `retry` options.\n\n## Performance Rules\n\n### 1. ALWAYS Paginate Tables and Lists\n\n**NEVER render more than 50 rows without pagination.** Always add client-side pagination:\n\n```tsx\nfunction PaginatedTable({ data }: { data: any[] }) {\n  const PAGE_SIZE = 20;\n  const [page, setPage] = useState(0);\n  const totalPages = Math.ceil(data.length / PAGE_SIZE);\n  const pageData = useMemo(\n    () => data.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE),\n    [data, page],\n  );\n\n  useEffect(() => {\n    setPage(0);\n  }, [data.length]);\n\n  return (\n    <>\n      <Table>{/* render pageData rows */}</Table>\n      <span>\n        Page {page + 1} of {totalPages} ({data.length} total rows)\n      </span>\n      <Button\n        onClick={() => setPage((p) => Math.max(0, p - 1))}\n        disabled={page === 0}\n      >\n        Previous\n      </Button>\n      <Button\n        onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}\n        disabled={page >= totalPages - 1}\n      >\n        Next\n      </Button>\n    </>\n  );\n}\n```\n\nFor 200+ rows, prefer **server-side pagination**; use cursor/keyset pagination for high offsets instead of `LIMIT`/`OFFSET`.\n\nFor 500+ item lists where pagination doesn't fit the UX (chat messages, infinite scroll feeds, large dropdowns), use **virtualization** (`react-virtuoso` or `@tanstack/react-virtual`) to render only the items visible in the viewport.\n\n### 2. ALWAYS Debounce Input-Driven API Calls\n\n**NEVER call an API directly from onChange.** Debounce search/filter inputs with a 300ms timer:\n\n```tsx\nfunction DebouncedSearch({ onSearch }: { onSearch: (query: string) => void }) {\n  const [localValue, setLocalValue] = useState(\"\");\n  const timerRef = useRef<ReturnType<typeof setTimeout>>();\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setLocalValue(e.target.value);\n      clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => onSearch(e.target.value), 300);\n    },\n    [onSearch],\n  );\n  useEffect(() => () => clearTimeout(timerRef.current), []);\n\n  return (\n    <Input value={localValue} onChange={handleChange} placeholder=\"Search...\" />\n  );\n}\n```\n\n### 3. Memoize Expensive Renders\n\nUse memoization (`memo()`, `useMemo`, `useCallback`) when it prevents measurable re-renders or expensive recomputation:\n\n```tsx\nconst OrderRow = memo(function OrderRow({\n  order,\n  onSelect,\n}: {\n  order: Order;\n  onSelect: (id: string) => void;\n}) {\n  return (\n    <TableRow onClick={() => onSelect(order.id)}>\n      <TableCell>{order.id}</TableCell>...\n    </TableRow>\n  );\n});\n\nconst handleSelect = useCallback((id: string) => {\n  setSelectedId(id);\n}, []);\n\nconst filtered = useMemo(\n  () =>\n    orders.filter((o) => o.status === status).sort((a, b) => b.total - a.total),\n  [orders, status],\n);\n```\n\n### 4. ALWAYS Clean Up Side Effects\n\nClean up timers, event listeners, and subscriptions in `useEffect` return functions:\n\n```tsx\nuseEffect(() => {\n  const handler = (e: KeyboardEvent) => {\n    /* ... */\n  };\n  window.addEventListener(\"keydown\", handler);\n  return () => window.removeEventListener(\"keydown\", handler);\n}, []);\n```\n\n### 5. Cancel In-Flight API Requests on Unmount\n\nFor search/filter patterns, prefer `useApiData` \u2014 it handles cancellation and cleanup automatically:\n\n```tsx\n// useApiData: auto-fetches and cancels on unmount/input change\nconst { data, fetching } = useApiData(\"SearchProducts\", { query });\n```\n\nFor imperative usage with manual cleanup, use the `cancel()` function:\n\n```tsx\nconst { run, cancel } = useApi(\"SearchProducts\");\n\nuseEffect(() => {\n  if (!query) return;\n  run({ query }).catch(console.error);\n  return () => {\n    cancel().catch(() => {});\n  };\n}, [query, run, cancel]);\n```\n";
 //# sourceMappingURL=skill.generated.d.ts.map

package/dist/ai-service/skills/system/superblocks-frontend/skill.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skill.generated.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/skills/system/superblocks-frontend/skill.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,4qwBAmqBnB,CAAC"}
+{"version":3,"file":"skill.generated.d.ts","sourceRoot":"","sources":["../../../../../src/ai-service/skills/system/superblocks-frontend/skill.generated.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,09xBAkrBnB,CAAC"}

package/dist/ai-service/skills/system/superblocks-frontend/skill.generated.js

@@ -392,6 +392,21 @@ import { Button } from "@/components/ui/button";
 
 Use current Lucide icon names, not stale aliases: use \`house\` instead of \`home\`, \`life-buoy\` instead of \`help-circle\` or \`circle-help\`, and \`chart-column-big\` instead of \`bar-chart-3\`.
 
+When storing icon names as data (arrays/objects), type them with \`IconName\`. **\`IconName\` is a TYPE-only export — you MUST import it with the \`type\` keyword.** A value import compiles but CRASHES the app at runtime (\`does not provide an export named 'IconName'\`) and leaves the preview blank, which blocks UI verification. If you hit that error, read \`skills/system/common-import-issues/SKILL.md\`.
+
+\`\`\`tsx
+// ✅ CORRECT — type-only import
+import type { IconName } from "lucide-react/dynamic";
+
+const navItems: { icon: IconName; label: string }[] = [
+  { icon: "house", label: "Home" },
+  { icon: "settings", label: "Settings" },
+];
+
+// ❌ WRONG — value import crashes the app at runtime and blanks the preview
+import { IconName } from "lucide-react/dynamic";
+\`\`\`
+
 ## Custom Components
 
 **CRITICAL: Component composition is MANDATORY. DO NOT create monolithic pages.**