@surrealdb/ui 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@surrealdb/ui",
-    "version": "1.2.1",
+    "version": "1.2.3",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/res/_mixins.scss

@@ -70,11 +70,18 @@
 	}
 }
 
-@mixin background-blur {
-	backdrop-filter: var(--surreal-blur);
-	-webkit-backdrop-filter: var(--surreal-blur);
+@mixin edge-shadow-x($begin: 0px, $end: 0px) {
+	mask: linear-gradient(to right,
+			transparent,
+			black $begin,
+			black calc(100% - $end),
+			transparent);
+}
 
-	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-		background: var(--surreal-menu-background-color);
-	}
+@mixin edge-shadow-y($begin: 0px, $end: 0px) {
+	mask: linear-gradient(to bottom,
+			transparent,
+			black $begin,
+			black calc(100% - $end),
+			transparent);
 }

package/tools/duplicate-vector-mappings.json

@@ -0,0 +1,143 @@
+[
+    {
+        "uiKitFileName": "Memory",
+        "symbolId": "25796:1314",
+        "exportNodeId": "21128:24795",
+        "figmaVectorName": "Memory_vector",
+        "figmaFrameName": "Memory"
+    },
+    {
+        "uiKitFileName": "Compute",
+        "symbolId": "29295:58314",
+        "exportNodeId": "29295:58314",
+        "figmaVectorName": "Memory_vector",
+        "figmaFrameName": "Memory",
+        "figmaLightNodeId": "29295:58316"
+    },
+    {
+        "uiKitFileName": "HealthChat",
+        "symbolId": "25796:1395",
+        "exportNodeId": "21128:25857",
+        "figmaVectorName": "Chatbot_vector",
+        "figmaFrameName": "Chatbot"
+    },
+    {
+        "uiKitFileName": "Binary",
+        "symbolId": "25796:1513",
+        "exportNodeId": "25796:1513",
+        "figmaVectorName": "Code blob (JSON)_vector",
+        "figmaFrameName": "Code blob (JSON)",
+        "figmaLightNodeId": "25796:2418"
+    },
+    {
+        "uiKitFileName": "Clock",
+        "symbolId": "25796:1318",
+        "exportNodeId": "25796:1318",
+        "figmaVectorName": "Flexible_vector",
+        "figmaFrameName": "Flexible",
+        "figmaLightNodeId": "25796:2536"
+    },
+    {
+        "uiKitFileName": "CommitQueue",
+        "symbolId": "25796:1323",
+        "exportNodeId": "25796:1323",
+        "figmaVectorName": "Hands On_vector",
+        "figmaFrameName": "Hands On",
+        "figmaLightNodeId": "25796:2600"
+    },
+    {
+        "uiKitFileName": "Expand",
+        "symbolId": "25796:1502",
+        "exportNodeId": "25796:1502",
+        "figmaVectorName": "Scale_vector",
+        "figmaFrameName": "Scale",
+        "figmaLightNodeId": "25796:2001"
+    },
+    {
+        "uiKitFileName": "Swatch",
+        "symbolId": "25796:1413",
+        "exportNodeId": "25796:1413",
+        "figmaVectorName": "Palette_vector",
+        "figmaFrameName": "Palette",
+        "figmaLightNodeId": "25796:3530"
+    },
+    {
+        "uiKitFileName": "File",
+        "symbolId": "25796:1511",
+        "exportNodeId": "21128:25051",
+        "figmaVectorName": "Document_vector",
+        "figmaFrameName": "Document",
+        "figmaLightNodeId": "25796:2030"
+    },
+    {
+        "uiKitFileName": "Document",
+        "symbolId": "25796:1375",
+        "exportNodeId": "25796:1375",
+        "figmaVectorName": "Document_vector",
+        "figmaFrameName": "Document",
+        "figmaLightNodeId": "25796:2030"
+    },
+    {
+        "uiKitFileName": "Learn",
+        "symbolId": "25796:1493",
+        "exportNodeId": "21128:25729",
+        "figmaVectorName": "Learn_vector",
+        "figmaFrameName": "Learn",
+        "figmaLightNodeId": "25796:2836"
+    },
+    {
+        "uiKitFileName": "Tutorials",
+        "symbolId": "25796:1397",
+        "exportNodeId": "21128:25910",
+        "figmaVectorName": "Chat Heart_vector",
+        "figmaFrameName": "tutorials",
+        "figmaLightNodeId": "25796:2725"
+    },
+    {
+        "uiKitFileName": "MediaFile",
+        "symbolId": "25796:1452",
+        "exportNodeId": "25796:1452",
+        "figmaVectorName": "Video file_vector",
+        "figmaFrameName": "Video file",
+        "figmaLightNodeId": "25796:2498"
+    },
+    {
+        "uiKitFileName": "MergeQueue",
+        "symbolId": "25796:1356",
+        "exportNodeId": "25796:1356",
+        "figmaVectorName": "Flexible_vector",
+        "figmaFrameName": "Merge queue",
+        "figmaLightNodeId": "25796:3507"
+    },
+    {
+        "uiKitFileName": "Monitoring",
+        "symbolId": "25796:1527",
+        "exportNodeId": "25796:1527",
+        "figmaVectorName": "_vector",
+        "figmaFrameName": "Monitoring",
+        "figmaLightNodeId": "25796:3056"
+    },
+    {
+        "uiKitFileName": "Sun",
+        "symbolId": "25796:1363",
+        "exportNodeId": "25796:1363",
+        "figmaVectorName": "Union_vector",
+        "figmaFrameName": "Sun",
+        "figmaLightNodeId": "25796:3526"
+    },
+    {
+        "uiKitFileName": "Timeline",
+        "symbolId": "25796:1365",
+        "exportNodeId": "25796:1365",
+        "figmaVectorName": "Bars_vector",
+        "figmaFrameName": "Bars"
+    },
+    {
+        "uiKitFileName": "HealthBubble",
+        "symbolId": "25796:1366",
+        "exportNodeId": "21128:26006",
+        "figmaVectorName": "Health Chat_vector",
+        "figmaFrameName": "Health Bubble",
+        "figmaLightNodeId": "25796:3522"
+    }
+]

package/tools/glass-export-overrides.json

@@ -0,0 +1,8 @@
+[
+    {
+        "uiKitFileName": "Cursor",
+        "exportNodeId": "25755:47884",
+        "figmaFrameName": "Cursor",
+        "figmaLightName": "Cursor_light"
+    }
+]

package/tools/integration-gradient-exports.json

@@ -0,0 +1,57 @@
+[
+    { "uiKitFileName": "Sidekick", "exportNodeId": "22777:30583", "figmaFrameName": "Sidekick" },
+    { "uiKitFileName": "Development", "exportNodeId": "25796:1453", "figmaFrameName": "Settings" },
+    {
+        "uiKitFileName": "CloudNodes",
+        "exportNodeId": "25796:1426",
+        "figmaFrameName": "cloud nodes"
+    },
+    { "uiKitFileName": "Bot", "exportNodeId": "25796:1428", "figmaFrameName": "Agent / Bot" },
+    { "uiKitFileName": "Agno", "exportNodeId": "21128:26168", "figmaFrameName": "Agno" },
+    { "uiKitFileName": "Claude", "exportNodeId": "21128:26209", "figmaFrameName": "Claude" },
+    { "uiKitFileName": "GitHub", "exportNodeId": "21128:26223", "figmaFrameName": "GitHub" },
+    { "uiKitFileName": "Medium", "exportNodeId": "21128:26218", "figmaFrameName": "Medium" },
+    { "uiKitFileName": "LangChain", "exportNodeId": "21128:26198", "figmaFrameName": "LangChain" },
+    { "uiKitFileName": "Reddit", "exportNodeId": "21128:26190", "figmaFrameName": "Reddit" },
+    { "uiKitFileName": "X", "exportNodeId": "21128:26194", "figmaFrameName": "X" },
+    { "uiKitFileName": "MCP", "exportNodeId": "24452:1002", "figmaFrameName": "MCP" },
+    { "uiKitFileName": "RAG", "exportNodeId": "21128:26228", "figmaFrameName": "RAG" },
+    { "uiKitFileName": "Windsurf", "exportNodeId": "21128:26240", "figmaFrameName": "Windsurf" },
+    { "uiKitFileName": "Instagram", "exportNodeId": "21128:26248", "figmaFrameName": "Instagram" },
+    { "uiKitFileName": "Discord", "exportNodeId": "21128:26252", "figmaFrameName": "Discord" },
+    { "uiKitFileName": "Zapier", "exportNodeId": "21128:26256", "figmaFrameName": "Zapier" },
+    { "uiKitFileName": "Python", "exportNodeId": "21128:26096", "figmaFrameName": "Python" },
+    { "uiKitFileName": "Cline", "exportNodeId": "21128:26114", "figmaFrameName": "Cline" },
+    { "uiKitFileName": "Dev", "exportNodeId": "21128:26118", "figmaFrameName": "Dev" },
+    { "uiKitFileName": "Rust", "exportNodeId": "21128:24875", "figmaFrameName": "Rust" },
+    { "uiKitFileName": "Threads", "exportNodeId": "21128:26146", "figmaFrameName": "Threads" },
+    { "uiKitFileName": "Zed", "exportNodeId": "21128:26150", "figmaFrameName": "Zed" },
+    {
+        "uiKitFileName": "StackOverflow",
+        "exportNodeId": "21128:26164",
+        "figmaFrameName": "Stack Overflow"
+    },
+    { "uiKitFileName": "LinkedIn", "exportNodeId": "21128:26270", "figmaFrameName": "LinkedIn" },
+    { "uiKitFileName": "Youtube", "exportNodeId": "21128:26274", "figmaFrameName": "YouTube" },
+    { "uiKitFileName": "N8n", "exportNodeId": "21128:26131", "figmaFrameName": "n8n" },
+    { "uiKitFileName": "Wasm", "exportNodeId": "21128:26139", "figmaFrameName": "WebAssembly" },
+    {
+        "uiKitFileName": "VisualStudioCode",
+        "exportNodeId": "21128:26178",
+        "figmaFrameName": "Visual Studio Code"
+    },
+    { "uiKitFileName": "PDF", "exportNodeId": "25796:1324", "figmaFrameName": "Document / PDF" },
+    {
+        "uiKitFileName": "Javascript",
+        "exportNodeId": "23768:22323",
+        "figmaFrameName": "Javascript"
+    },
+    { "uiKitFileName": "OpenAI", "exportNodeId": "24452:982", "figmaFrameName": "OpenAI" },
+    {
+        "uiKitFileName": "SurrealMCP",
+        "exportNodeId": "24452:1007",
+        "figmaFrameName": "MCP"
+    },
+    { "uiKitFileName": "SurrealML", "exportNodeId": "25433:6610", "figmaFrameName": "SurrealML" },
+    { "uiKitFileName": "YUApp", "exportNodeId": "21128:24571", "figmaFrameName": "YU app" }
+]

package/tools/picto-compare.ts

@@ -0,0 +1,64 @@
+/**
+ * Compare Figma light exports against existing ui-kit pictos using perceptual hash.
+ * Used to validate the picto-figma-map.json name mappings.
+ *
+ * Usage:
+ *   bun tools/picto-compare.ts <urls-manifest.json>
+ *
+ * Manifest format: [{ fileName: "PadlockClosed", nodeId, url }] for light versions
+ */
+
+import { execSync } from "node:child_process";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+
+const PICTOS_DIR = join(import.meta.dir, "../src/assets/pictos");
+const TMP = join(import.meta.dir, "../.picto-compare");
+
+async function phash(path: string): Promise<string> {
+    return execSync(`magick "${path}" -colorspace Gray -resize 16x16! -depth 8 txt:-`, {
+        encoding: "utf8",
+    });
+}
+
+function hashDistance(a: string, b: string): number {
+    const valsA = [...a.matchAll(/\\((\\d+),(\\d+)\\)\\s+#(\\w+)/g)].map((m) =>
+        Number.parseInt(m[3], 16),
+    );
+    const valsB = [...b.matchAll(/\\((\\d+),(\\d+)\\)\\s+#(\\w+)/g)].map((m) =>
+        Number.parseInt(m[3], 16),
+    );
+    let dist = 0;
+    for (let i = 0; i < Math.min(valsA.length, valsB.length); i++) {
+        dist += Math.abs(valsA[i] - valsB[i]);
+    }
+    return dist;
+}
+
+async function main() {
+    const manifest: { fileName: string; url: string }[] = JSON.parse(
+        await readFile(process.argv[2], "utf8"),
+    );
+    await mkdir(TMP, { recursive: true });
+
+    const results: { fileName: string; distance: number; matched: boolean }[] = [];
+
+    for (const { fileName, url } of manifest) {
+        const figmaPng = join(TMP, `${fileName}-figma.png`);
+        const res = await fetch(url);
+        await writeFile(figmaPng, await res.arrayBuffer());
+
+        const repoWebp = join(PICTOS_DIR, `${fileName}.webp`);
+        const repoPng = join(TMP, `${fileName}-repo.png`);
+        execSync(`magick "${repoWebp}" "${repoPng}"`);
+
+        const dist = hashDistance(await phash(figmaPng), await phash(repoPng));
+        results.push({ fileName, distance: dist, matched: dist < 5000 });
+    }
+
+    const failed = results.filter((r) => !r.matched);
+    console.log(`Compared ${results.length}, mismatches: ${failed.length}`);
+    for (const f of failed) console.log(`  ${f.fileName}: distance ${f.distance}`);
+}
+
+main().catch(console.error);

package/tools/picto-merge-urls.ts

@@ -0,0 +1,43 @@
+/** Merge partial/agent screenshot URL results into urls.json */
+import { readdir, readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+
+const PNG_DIR = join(import.meta.dir, "../.picto-gradient-png");
+
+const batchFiles = (await readdir(PNG_DIR))
+    .filter((f) => f.startsWith("screenshot-batch-") && f.endsWith(".json"))
+    .sort((a, b) => Number(a.match(/\d+/)?.[0]) - Number(b.match(/\d+/)?.[0]));
+
+const expected: { fileName: string; nodeId: string }[] = [];
+for (const f of batchFiles) {
+    expected.push(...JSON.parse(await readFile(join(PNG_DIR, f), "utf8")));
+}
+
+const resultFiles = [
+    "results-transparent-partial.json",
+    "results-partial.json",
+    ...(await readdir(PNG_DIR))
+        .filter((f) => f.startsWith("results-agent-") && f.endsWith(".json"))
+        .sort(),
+];
+
+const byName = new Map<string, string>();
+for (const rf of resultFiles) {
+    try {
+        const entries: { fileName: string; url: string }[] = JSON.parse(
+            await readFile(join(PNG_DIR, rf), "utf8"),
+        );
+        for (const e of entries) byName.set(e.fileName, e.url);
+    } catch {
+        // file may not exist yet
+    }
+}
+
+const urls = expected.map(({ fileName }) => {
+    const url = byName.get(fileName);
+    if (!url) throw new Error(`Missing URL for ${fileName}`);
+    return { fileName, url };
+});
+
+await writeFile(join(PNG_DIR, "urls.json"), `${JSON.stringify(urls, null, 2)}\n`);
+console.log(`Merged ${urls.length} entries into urls.json`);