@texturehq/edges 1.29.0 → 1.30.0

package/dist/server.d.cts

@@ -1,10 +1,9 @@
-export { A as ActionItem, a as ActionMenuProps, b as AppShell, c as AppShellProps, d as AvatarProps, B as BadgeProps, e as BaseDataPoint, C as ChartMargin, f as CodeEditorProps, g as CodeLanguage, h as CodeTheme, E as ENTITY_CONFIG, i as EntityConfig, j as EntityType, H as Heading, I as InteractiveMapProps, L as Loader, k as Logo, M as MapPoint, l as MeterProps, S as SegmentOption, m as SegmentedControlProps, n as SideNav, o as SideNavItem, p as SideNavProps, q as StaticMapProps, T as TextLink, r as TooltipData, s as TooltipSeries, t as TopNav, u as TopNavProps, Y as YFormatSettings, v as YFormatType, w as clearColorCache, x as createCategoryColorMap, y as createXScale, z as createYScale, D as defaultMargin, F as getContrastingTextColor, G as getDefaultChartColor, J as getDefaultColors, K as getEntityConfig, N as getEntityIcon, O as getEntityLabel, P as getResolvedColor, Q as getThemeCategoricalColors, R as getYFormatSettings, U as isLightColor } from './colors-CkJf6_Bz.cjs';
+export { A as ActionItem, a as ActionMenuProps, b as AppShell, c as AppShellProps, d as AvatarProps, B as BadgeProps, e as BaseDataPoint, C as ChartMargin, f as CodeEditorProps, g as CodeLanguage, h as CodeTheme, E as ENTITY_CONFIG, i as EntityConfig, j as EntityType, H as Heading, I as InteractiveMapProps, L as Loader, k as Logo, M as MapPoint, l as MeterProps, S as SegmentOption, m as SegmentedControlProps, n as SideNav, o as SideNavItem, p as SideNavProps, q as StaticMapProps, T as TextLink, r as TooltipData, s as TooltipSeries, t as TopNav, u as TopNavProps, Y as YFormatSettings, v as YFormatType, w as clearColorCache, x as createCategoryColorMap, y as createXScale, z as createYScale, D as defaultMargin, F as getContrastingTextColor, G as getDefaultChartColor, J as getDefaultColors, K as getEntityConfig, N as getEntityIcon, O as getEntityLabel, P as getResolvedColor, Q as getThemeCategoricalColors, R as getYFormatSettings, U as isLightColor } from './colors-BgVu6fze.cjs';
 export { BreadcrumbProps, BreadcrumbsProps } from 'react-aria-components';
 export { D as DateFieldProps, F as FileUploadProps, R as RichTextEditorProps } from './RichTextEditor-CxrunTg7.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconProps } from '@phosphor-icons/react';
 import React__default from 'react';
-import '@visx/vendor/d3-scale';
 import 'd3-scale';
 import 'react-map-gl';
 

package/dist/server.d.ts

@@ -1,10 +1,9 @@
-export { A as ActionItem, a as ActionMenuProps, b as AppShell, c as AppShellProps, d as AvatarProps, B as BadgeProps, e as BaseDataPoint, C as ChartMargin, f as CodeEditorProps, g as CodeLanguage, h as CodeTheme, E as ENTITY_CONFIG, i as EntityConfig, j as EntityType, H as Heading, I as InteractiveMapProps, L as Loader, k as Logo, M as MapPoint, l as MeterProps, S as SegmentOption, m as SegmentedControlProps, n as SideNav, o as SideNavItem, p as SideNavProps, q as StaticMapProps, T as TextLink, r as TooltipData, s as TooltipSeries, t as TopNav, u as TopNavProps, Y as YFormatSettings, v as YFormatType, w as clearColorCache, x as createCategoryColorMap, y as createXScale, z as createYScale, D as defaultMargin, F as getContrastingTextColor, G as getDefaultChartColor, J as getDefaultColors, K as getEntityConfig, N as getEntityIcon, O as getEntityLabel, P as getResolvedColor, Q as getThemeCategoricalColors, R as getYFormatSettings, U as isLightColor } from './colors-DR1jXZhL.js';
+export { A as ActionItem, a as ActionMenuProps, b as AppShell, c as AppShellProps, d as AvatarProps, B as BadgeProps, e as BaseDataPoint, C as ChartMargin, f as CodeEditorProps, g as CodeLanguage, h as CodeTheme, E as ENTITY_CONFIG, i as EntityConfig, j as EntityType, H as Heading, I as InteractiveMapProps, L as Loader, k as Logo, M as MapPoint, l as MeterProps, S as SegmentOption, m as SegmentedControlProps, n as SideNav, o as SideNavItem, p as SideNavProps, q as StaticMapProps, T as TextLink, r as TooltipData, s as TooltipSeries, t as TopNav, u as TopNavProps, Y as YFormatSettings, v as YFormatType, w as clearColorCache, x as createCategoryColorMap, y as createXScale, z as createYScale, D as defaultMargin, F as getContrastingTextColor, G as getDefaultChartColor, J as getDefaultColors, K as getEntityConfig, N as getEntityIcon, O as getEntityLabel, P as getResolvedColor, Q as getThemeCategoricalColors, R as getYFormatSettings, U as isLightColor } from './colors-soT9-oWB.js';
 export { BreadcrumbProps, BreadcrumbsProps } from 'react-aria-components';
 export { D as DateFieldProps, F as FileUploadProps, R as RichTextEditorProps } from './RichTextEditor-CxrunTg7.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconProps } from '@phosphor-icons/react';
 import React__default from 'react';
-import '@visx/vendor/d3-scale';
 import 'd3-scale';
 import 'react-map-gl';
 

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
 @layer properties;
 :root, :host {
   --color-white: #ffffff;
@@ -79,7 +79,7 @@
   --motion-opacity-disabled: 0.5;
   --motion-scale-hover: 1.02;
   --motion-scale-press: 0.97;
-  --spacing-0: 0px;
+  --spacing-0: 0;
   --spacing-1: 0.25rem;
   --spacing-2: 0.5rem;
   --spacing-3: 0.75rem;
@@ -105,7 +105,7 @@
   --spacing-72: 18rem;
   --spacing-80: 20rem;
   --spacing-96: 24rem;
-  --radius-none: 0px;
+  --radius-none: 0;
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
@@ -477,7 +477,7 @@
   --motion-opacity-disabled: 0.5;
   --motion-scale-hover: 1.02;
   --motion-scale-press: 0.97;
-  --spacing-0: 0px;
+  --spacing-0: 0;
   --spacing-1: 0.25rem;
   --spacing-2: 0.5rem;
   --spacing-3: 0.75rem;
@@ -507,7 +507,7 @@
   --spacing-72: 18rem;
   --spacing-80: 20rem;
   --spacing-96: 24rem;
-  --radius-none: 0px;
+  --radius-none: 0;
   --radius-xs: 0.125rem;
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
@@ -537,7 +537,7 @@
   --font-lineheight-loose: 2;
   --font-letterspacing-tighter: -0.05em;
   --font-letterspacing-tight: -0.025em;
-  --font-letterspacing-normal: 0em;
+  --font-letterspacing-normal: 0;
   --font-letterspacing-wide: 0.025em;
   --font-letterspacing-wider: 0.05em;
   --font-letterspacing-widest: 0.1em;
@@ -1612,9 +1612,15 @@
   .inset-y-\[2px\] {
     inset-block: 2px;
   }
+  .start {
+    inset-inline-start: var(--spacing);
+  }
   .start-1 {
     inset-inline-start: var(--spacing-1);
   }
+  .end {
+    inset-inline-end: var(--spacing);
+  }
   .-top-2 {
     top: calc(var(--spacing-2) * -1);
   }
@@ -1625,7 +1631,7 @@
     top: var(--spacing-0);
   }
   .top-1\/2 {
-    top: calc(1/2 * 100%);
+    top: calc(1 / 2 * 100%);
   }
   .top-2 {
     top: var(--spacing-2);
@@ -1718,7 +1724,7 @@
     left: var(--spacing-0);
   }
   .left-1\/2 {
-    left: calc(1/2 * 100%);
+    left: calc(1 / 2 * 100%);
   }
   .left-2 {
     left: var(--spacing-2);
@@ -2021,7 +2027,7 @@
     height: calc(var(--spacing) * 1.5);
   }
   .h-1\/2 {
-    height: calc(1/2 * 100%);
+    height: calc(1 / 2 * 100%);
   }
   .h-2 {
     height: var(--spacing-2);
@@ -2173,9 +2179,6 @@
   .max-h-60 {
     max-height: var(--spacing-60);
   }
-  .max-h-\[90vh\] {
-    max-height: 90vh;
-  }
   .max-h-\[300px\] {
     max-height: 300px;
   }
@@ -2237,7 +2240,7 @@
     width: calc(var(--spacing) * 1.5);
   }
   .w-1\/2 {
-    width: calc(1/2 * 100%);
+    width: calc(1 / 2 * 100%);
   }
   .w-2 {
     width: var(--spacing-2);
@@ -2246,7 +2249,7 @@
     width: calc(var(--spacing) * 2.5);
   }
   .w-2\/3 {
-    width: calc(2/3 * 100%);
+    width: calc(2 / 3 * 100%);
   }
   .w-3 {
     width: var(--spacing-3);
@@ -2255,7 +2258,7 @@
     width: calc(var(--spacing) * 3.5);
   }
   .w-3\/4 {
-    width: calc(3/4 * 100%);
+    width: calc(3 / 4 * 100%);
   }
   .w-4 {
     width: var(--spacing-4);
@@ -2549,7 +2552,7 @@
     transform-origin: 100% 0;
   }
   .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-x-full {
@@ -2565,7 +2568,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .rotate-0 {
@@ -4074,9 +4077,6 @@
   .pt-8 {
     padding-top: var(--spacing-8);
   }
-  .pt-\[15vh\] {
-    padding-top: 15vh;
-  }
   .pr-0 {
     padding-right: var(--spacing-0);
   }

package/dist/utilities.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.29.0",
+  "version": "1.30.0",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",
@@ -94,6 +94,13 @@
           "description": "Hook for exporting DataTable data as CSV. Provides a stable callback for triggering exports with memoized dependencies. For client-side DataTables where all data is in the browser. For server-side exports, use the `onExport` callback pattern instead.",
           "category": "hooks",
           "file": "hooks/useTableExport.ts"
+        },
+        {
+          "name": "useVisualViewportHeight",
+          "type": "function",
+          "description": "useVisualViewportHeight Tracks `window.visualViewport` to handle the iOS soft keyboard. On iOS Safari, `position: fixed` elements are anchored to the layout viewport (full page size) and don't move when the keyboard opens. This hook returns: - `height`: the visible viewport height (shrinks when keyboard opens) - `keyboardOffset`: how many px to translate a fixed element upward to clear the keyboard Returns `null` on SSR or in browsers that don't support `visualViewport`.",
+          "category": "hooks",
+          "file": "hooks/useVisualViewportHeight.ts"
         }
       ]
     },
@@ -1049,6 +1056,13 @@
           "description": "Utility to check if export is supported in the current environment",
           "category": "charts",
           "file": "utils/chartExport.ts"
+        },
+        {
+          "name": "resolveCSSVariables",
+          "type": "function",
+          "description": "Resolves CSS custom properties (e.g. `var(--color-brand-primary)`) in a cloned SVG by reading computed styles from the original DOM-attached SVG. When an SVG is cloned and serialized for export (PNG/SVG), it loses access to the page's CSS context, so any `var(--*)` values become empty/transparent. This function walks both trees in parallel and replaces unresolved variables with their computed values.",
+          "category": "charts",
+          "file": "utils/chartExport.ts"
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",
@@ -133,7 +133,7 @@
     "tailwind-merge": "^3.2.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.2.4",
+    "@biomejs/biome": "2.4.9",
     "@hookform/resolvers": "^3.9.0",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",

package/scripts/generate-edges-docs.js

@@ -88,10 +88,7 @@ function findComponentFile(relPath) {
 function findStorybookFile(relPath) {
   const base = path.join(SRC_DIR, "components", relPath);
   const componentName = relPath.split("/").pop();
-  const candidates = [
-    path.join(base, `${componentName}.stories.tsx`),
-    path.join(base, `${componentName}.stories.ts`),
-  ];
+  const candidates = [path.join(base, `${componentName}.stories.tsx`), path.join(base, `${componentName}.stories.ts`)];
   for (const f of candidates) {
     if (fs.existsSync(f)) return f;
   }
@@ -153,15 +150,11 @@ function extractProps(content, componentName) {
   );
   let m = ifaceRe.exec(content);
   if (!m) {
-    const anyIfaceRe =
-      /export\s+interface\s+([A-Za-z0-9_]+Props)\s*(?:extends\s+[^{]+)?\{([\s\S]*?)\}/m;
+    const anyIfaceRe = /export\s+interface\s+([A-Za-z0-9_]+Props)\s*(?:extends\s+[^{]+)?\{([\s\S]*?)\}/m;
     m = anyIfaceRe.exec(content);
   }
   if (!m) {
-    const typeRe = new RegExp(
-      `export\\s+type\\s+${componentName}Props\\s*=\\s*(?:[^{&]+&\s*)?([\\s\\S]*?)\\}`,
-      "m"
-    );
+    const typeRe = new RegExp(`export\\s+type\\s+${componentName}Props\\s*=\\s*(?:[^{&]+&\s*)?([\\s\\S]*?)\\}`, "m");
     m = typeRe.exec(content);
   }
   const props = [];
@@ -302,9 +295,7 @@ function generateComponentsManifest() {
   ensureDir(DIST_DIR);
   writeFile(path.join(DIST_DIR, "components.manifest.json"), JSON.stringify(manifest, null, 2));
 
-  console.log(
-    `  Found ${components.length} components in ${Object.keys(categories).length} categories`
-  );
+  console.log(`  Found ${components.length} components in ${Object.keys(categories).length} categories`);
   return manifest;
 }
 
@@ -314,10 +305,7 @@ function generateComponentsManifest() {
 
 function extractJSDoc(content, functionName) {
   const patterns = [
-    new RegExp(
-      `\\/\\*\\*([^*]|\\*(?!\\/))*\\*\\/\\s*export\\s+(?:async\\s+)?function\\s+${functionName}\\b`,
-      "s"
-    ),
+    new RegExp(`\\/\\*\\*([^*]|\\*(?!\\/))*\\*\\/\\s*export\\s+(?:async\\s+)?function\\s+${functionName}\\b`, "s"),
     new RegExp(`\\/\\*\\*([^*]|\\*(?!\\/))*\\*\\/\\s*export\\s+const\\s+${functionName}\\s*=`, "s"),
   ];
 
@@ -326,9 +314,7 @@ function extractJSDoc(content, functionName) {
     if (match) {
       const jsdocMatch = match[0].match(/\/\*\*([\s\S]*?)\*\//);
       if (jsdocMatch) {
-        const lines = jsdocMatch[1]
-          .split("\n")
-          .map((line) => line.replace(/^\s*\*\s?/, "").trim());
+        const lines = jsdocMatch[1].split("\n").map((line) => line.replace(/^\s*\*\s?/, "").trim());
 
         // Extract only the main description (before any @tags)
         const descriptionLines = [];
@@ -406,10 +392,7 @@ function extractExportsFromFile(filePath) {
   while ((match = constPattern.exec(content))) {
     if (!isInComment(match.index)) {
       const name = match[1];
-      const afterMatch = content.slice(
-        match.index + match[0].length,
-        match.index + match[0].length + 50
-      );
+      const afterMatch = content.slice(match.index + match[0].length, match.index + match[0].length + 50);
       const isFunction = afterMatch.includes("=>") || afterMatch.includes("function");
 
       utilities.push({
@@ -517,17 +500,12 @@ function generateUtilitiesManifest() {
     };
   }
 
-  const totalUtilities = Object.values(manifest.categories).reduce(
-    (sum, cat) => sum + cat.utilities.length,
-    0
-  );
+  const totalUtilities = Object.values(manifest.categories).reduce((sum, cat) => sum + cat.utilities.length, 0);
 
   ensureDir(DIST_DIR);
   writeFile(path.join(DIST_DIR, "utilities.manifest.json"), JSON.stringify(manifest, null, 2));
 
-  console.log(
-    `  Found ${totalUtilities} utilities in ${Object.keys(manifest.categories).length} categories`
-  );
+  console.log(`  Found ${totalUtilities} utilities in ${Object.keys(manifest.categories).length} categories`);
   return manifest;
 }
 
@@ -1101,9 +1079,7 @@ async function main() {
     });
     console.log(output);
   } catch (_err) {
-    console.log(
-      "⚠️  Note: Could not merge agent instructions (merge script may not be available yet)"
-    );
+    console.log("⚠️  Note: Could not merge agent instructions (merge script may not be available yet)");
   }
 
   console.log("\n✅ Edges AI context generation complete!");

package/scripts/setup-cursor-rules-manual.js

@@ -132,8 +132,7 @@ const setupCursorRules = () => {
       for (const c of manifest.components || []) {
         lines.push(`- ${c.name}`);
         if (c.importRoot) lines.push(`  - Import: \`import { ${c.name} } from "${c.importRoot}"\``);
-        if (c.importPath)
-          lines.push(`  - Subpath: \`import { ${c.name} } from "${c.importPath}"\``);
+        if (c.importPath) lines.push(`  - Subpath: \`import { ${c.name} } from "${c.importPath}"\``);
         if (c.props && c.props.length) {
           const propNames = c.props
             .slice(0, 8)

package/scripts/setup-cursor-rules.js

@@ -34,18 +34,9 @@ const setupCursorRules = () => {
     }
   });
 
-  const cursorTemplatesDir = path.join(
-    path.dirname(new URL(import.meta.url).pathname),
-    "../templates/cursor-rules"
-  );
-  const claudeTemplatesDir = path.join(
-    path.dirname(new URL(import.meta.url).pathname),
-    "../templates/claude-rules"
-  );
-  const codexTemplatesDir = path.join(
-    path.dirname(new URL(import.meta.url).pathname),
-    "../templates/codex-rules"
-  );
+  const cursorTemplatesDir = path.join(path.dirname(new URL(import.meta.url).pathname), "../templates/cursor-rules");
+  const claudeTemplatesDir = path.join(path.dirname(new URL(import.meta.url).pathname), "../templates/claude-rules");
+  const codexTemplatesDir = path.join(path.dirname(new URL(import.meta.url).pathname), "../templates/codex-rules");
   const cursorDir = path.join(cwd, ".cursor");
   const rulesDir = path.join(cursorDir, "rules");
 
@@ -55,9 +46,7 @@ const setupCursorRules = () => {
 
   // Setup Cursor rules
   if (fs.existsSync(cursorTemplatesDir)) {
-    const templateFiles = fs
-      .readdirSync(cursorTemplatesDir)
-      .filter((file) => file.endsWith(".mdc"));
+    const templateFiles = fs.readdirSync(cursorTemplatesDir).filter((file) => file.endsWith(".mdc"));
 
     if (templateFiles.length > 0) {
       let copiedCount = 0;
@@ -80,18 +69,16 @@ const setupCursorRules = () => {
 
   // Setup Claude rules
   if (fs.existsSync(claudeTemplatesDir)) {
-    const _claudeTemplateFiles = fs
-      .readdirSync(claudeTemplatesDir)
-      .filter((file) => file.endsWith(".md"));
+    const _claudeTemplateFiles = fs.readdirSync(claudeTemplatesDir).filter((file) => file.endsWith(".md"));
 
     // Claude template processing is done later with component injection (lines 221-236)
     // so we don't need to copy templates here
   }
 
   // Also render edges-components.mdc from manifest when present
-  const manifestPath = [
-    path.join(cwd, "node_modules/@texturehq/edges/dist/components.manifest.json"),
-  ].find((p) => fs.existsSync(p));
+  const manifestPath = [path.join(cwd, "node_modules/@texturehq/edges/dist/components.manifest.json")].find((p) =>
+    fs.existsSync(p)
+  );
 
   // Track what we generated for summary
   let cursorComponentCount = 0;
@@ -153,9 +140,7 @@ const setupCursorRules = () => {
 
       fs.writeFileSync(cursorOutPath, cursorLines.join("\n"), "utf8");
       cursorComponentCount = manifest.components?.length || 0;
-      console.log(
-        `✅ Wrote .cursor/rules/edges-components.mdc from manifest (${cursorComponentCount} components)`
-      );
+      console.log(`✅ Wrote .cursor/rules/edges-components.mdc from manifest (${cursorComponentCount} components)`);
 
       // Generate Claude components list
       const claudeLines = [];
@@ -207,9 +192,7 @@ const setupCursorRules = () => {
         const claudeOutPath = path.join(claudeDir, "edges.md");
         fs.writeFileSync(claudeOutPath, claudeContent, "utf8");
         claudeComponentCount = manifest.components?.length || 0;
-        console.log(
-          `✅ Wrote .claude/edges.md with components list (${claudeComponentCount} components)`
-        );
+        console.log(`✅ Wrote .claude/edges.md with components list (${claudeComponentCount} components)`);
       }
 
       // Generate Codex docs using template
@@ -224,9 +207,7 @@ const setupCursorRules = () => {
         const codexOutPath = path.join(codexDir, "edges.md");
         fs.writeFileSync(codexOutPath, codexContent, "utf8");
         codexComponentCount = manifest.components?.length || 0;
-        console.log(
-          `✅ Wrote .codex/edges.md with components list (${codexComponentCount} components)`
-        );
+        console.log(`✅ Wrote .codex/edges.md with components list (${codexComponentCount} components)`);
       }
     } catch (err) {
       console.log("⚠️  Failed to read components.manifest.json:", err.message);