@flesler/cursor-canvas-web 1.0.2 → 1.1.0

package/dist/host-tokens-Cjzmp0z_.cjs

@@ -0,0 +1 @@
+"use strict";const g={foreground:"#E4E4E4EB",foregroundSecondary:"#E4E4E48D",foregroundTertiary:"#E4E4E45E",foregroundQuaternary:"#E4E4E442",editor:"#181818",chrome:"#141414",sidebar:"#141414",elevated:"#181818",fillPrimary:"#E4E4E430",fillSecondary:"#E4E4E41E",fillTertiary:"#E4E4E411",fillQuaternary:"#E4E4E40A",strokePrimary:"#E4E4E433",strokeSecondary:"#E4E4E41F",strokeTertiary:"#E4E4E414",strokeFocused:"#599CE7",accent:"#599CE7",buttonBackground:"#599CE7",buttonForeground:"#191c22",buttonHoverBackground:"#6AABE9",link:"#87c3ff",diffInsertedLine:"#3FA26633",diffRemovedLine:"#B8004933",diffStripAdded:"#3FA2668F",diffStripRemoved:"#FC6B838F"},u={foreground:"#141414F0",foregroundSecondary:"#141414BD",foregroundTertiary:"#1414148A",foregroundQuaternary:"#1414145C",editor:"#FCFCFC",chrome:"#F8F8F8",sidebar:"#F3F3F3",elevated:"#FCFCFC",fillPrimary:"#14141433",fillSecondary:"#14141424",fillTertiary:"#14141414",fillQuaternary:"#1414140F",strokePrimary:"#14141433",strokeSecondary:"#1414141F",strokeTertiary:"#14141414",strokeFocused:"#3685BF",accent:"#3685BF",buttonBackground:"#3685BF",buttonForeground:"#FCFCFC",buttonHoverBackground:"#2E76AB",link:"#3685BF",diffInsertedLine:"#1F8A651F",diffRemovedLine:"#CF2D5614",diffStripAdded:"#1F8A65CC",diffStripRemoved:"#CF2D56CC"},A={accent:"#1084FE",buttonBackground:"#1084FE",buttonForeground:"#070707",buttonHoverBackground:"#459FFE",link:"#80BEFE",strokeFocused:"#1084FE"},b={accent:"#0C64C1",buttonBackground:"#0C64C1",buttonForeground:"#FAFAFA",buttonHoverBackground:"#1084FE",link:"#0C64C1",strokeFocused:"#0C64C1"},h={...g,...A},y={...u,...b},s={gray:"#8888A8E0",purple:"#7B64B8F0",green:"#1F8A65E8",yellow:"#E8C030E0",cyan:"#2A9A8AE0",pink:"#C85898E0",blue:"#2E79B5E0",orange:"#F0A040E0",red:"#C04848E0"},F={gray:"#8888A8E0",purple:"#7B64B8F0",green:"#1F8A65E8",yellow:"#E8C030E0",cyan:"#2A9A8AE0",pink:"#C85898E0",blue:"#2E79B5E0",orange:"#F0A088E0",red:"#CF2D56E0"},m={gray:"#777777E0",purple:"#9159FEF0",green:"#00C972E8",yellow:"#FF9800E0",cyan:"#00BCA6E0",pink:"#FF309BE0",blue:"#1084FEE0",orange:"#FF6700E0",red:"#FF263CE0"},v={...m},P=s,S=["blue","purple","green","yellow","cyan","pink","orange","red","gray"],i={green:"#1F8A65E8",darkGreen:"#0D855AE0",lightGreen:"#52B896E0",mintGreen:"#7DCAB0E0",blue:"#2E79B5E0",lightBlue:"#70B0D8E0",indigo:"#5A6CC0F0",lightIndigo:"#9AAADCE0",purple:"#7B64B8F0",lightPurple:"#AA98D8E0",warmPink:"#C85898E0",lightPink:"#E8A0C4E0",brightOrange:"#F0A040E0",deepOrange:"#C06028E0",goldenYellow:"#E8C030E0",darkAmber:"#C04848E0",warmPeach:"#F0A088E0",vibrantTeal:"#2A9A8AE0",muted:"#8888A8E0",neutralLine:"#888899D0"},a={green:"#00C972E8",darkGreen:"#009957E0",lightGreen:"#38D591E0",mintGreen:"#78E2B4E0",blue:"#1084FEE0",lightBlue:"#459FFEE0",indigo:"#0C64C1F0",lightIndigo:"#80BEFEE0",purple:"#9159FEF0",lightPurple:"#A97EFEE0",warmPink:"#FF309BE0",lightPink:"#FF5EB1E0",brightOrange:"#FF6700E0",deepOrange:"#C24E00E0",goldenYellow:"#FF9800E0",darkAmber:"#FF263CE0",warmPeach:"#FF8838E0",vibrantTeal:"#00BCA6E0",muted:"#777777E0",neutralLine:"#777777D0"},T=[i.green,i.lightBlue,i.indigo,i.brightOrange,i.deepOrange,i.goldenYellow,i.warmPink,i.warmPeach,i.purple,i.mintGreen,i.muted,i.vibrantTeal],L=[a.green,a.lightBlue,a.indigo,a.brightOrange,a.deepOrange,a.goldenYellow,a.warmPink,a.warmPeach,a.purple,a.mintGreen,a.muted,a.vibrantTeal],p={fontFamily:"inherit",h1:{fontSize:"24px",lineHeight:"30px",fontWeight:590},h2:{fontSize:"18px",lineHeight:"24px",fontWeight:590},h3:{fontSize:"16px",lineHeight:"22px",fontWeight:590},body:{fontSize:"14px",lineHeight:"20px",fontWeight:400},small:{fontSize:"12px",lineHeight:"16px",fontWeight:400}},x='ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',D={"0.5":2,1:4,"1.5":6,2:8,"2.5":10,3:12,"3.5":14,4:16,"4.5":18,5:20,6:24,7:28,8:32,9:36,10:40},C={none:0,xs:2,sm:4,md:6,lg:8,xl:12,full:9999},G={...C,md:8,lg:10,xl:14},H={...p,fontFamily:x};function f(e,n){return{bg:{editor:e.editor,chrome:e.chrome,elevated:e.elevated},text:{primary:e.foreground,secondary:e.foregroundSecondary,tertiary:e.foregroundTertiary,quaternary:e.foregroundQuaternary,link:e.link,onAccent:e.buttonForeground},stroke:{primary:e.strokePrimary,secondary:e.strokeSecondary,tertiary:e.strokeTertiary,focused:e.strokeFocused},fill:{primary:e.fillPrimary,secondary:e.fillSecondary,tertiary:e.fillTertiary,quaternary:e.fillQuaternary},accent:{primary:e.accent,control:e.buttonBackground,controlHover:e.buttonHoverBackground},diff:{insertedLine:e.diffInsertedLine,removedLine:e.diffRemovedLine,stripAdded:e.diffStripAdded,stripRemoved:e.diffStripRemoved},category:n}}const I=f(g,s),R=f(u,F);function E(e){const n=e.trim(),o=/^#([0-9a-f]{3,8})$/i.exec(n);if(!o)return;const r=o[1];if(r.length===3||r.length===4){const t=k=>k+k,c=parseInt(t(r[0]),16),d=parseInt(t(r[1]),16),l=parseInt(t(r[2]),16);return{r:c,g:d,b:l}}if(r.length===6||r.length===8){const t=parseInt(r.slice(0,2),16),c=parseInt(r.slice(2,4),16),d=parseInt(r.slice(4,6),16);return{r:t,g:c,b:d}}}function q(e){const n=o=>{const r=o/255;return r<=.03928?r/12.92:((r+.055)/1.055)**2.4};return .2126*n(e.r)+.7152*n(e.g)+.0722*n(e.b)}function M(e,n,o){const r=Math.min(1,Math.max(0,o));return{r:Math.round(e.r*(1-r)+n.r*r),g:Math.round(e.g*(1-r)+n.g*r),b:Math.round(e.b*(1-r)+n.b*r)}}function O(e){const n=o=>o.toString(16).padStart(2,"0");return`#${n(e.r)}${n(e.g)}${n(e.b)}`}function B(e){return e==="grok"?"grok":"cursor"}function Q(e,n){let o=e;if(typeof n.editorBackground=="string"&&E(n.editorBackground)){const r=n.editorBackground;o={...o,editor:r,chrome:r,sidebar:r,elevated:r}}if(typeof n.editorForeground=="string"&&E(n.editorForeground)){const r=n.editorForeground;o={...o,foreground:r,foregroundSecondary:r,foregroundTertiary:r,foregroundQuaternary:r}}return o}function W(e,n){const o=E(n);if(!o)return e;const r=M(o,{r:255,g:255,b:255},.12),t=q(o)>.45?"#141414":"#FAFAFA";return{...e,accent:n,buttonBackground:n,buttonHoverBackground:O(r),link:n,strokeFocused:n,buttonForeground:t}}const z=new Set(["light","hc-light"]);function Y(e){return z.has(e)}function $(e,n){const o=B(n==null?void 0:n.brand),r=Y(e);let t,c;return o==="grok"?(t=r?y:h,c=r?v:m):(t=r?u:g,c=r?F:s),t=Q(t,n??{}),o!=="grok"&&typeof(n==null?void 0:n.primary)=="string"&&(t=W(t,n.primary)),{tokens:f(t,c),palette:t,brand:o}}function _(e){return e==="grok"?{palette:a,sequence:L}:{palette:i,sequence:T}}function K(e){return e==="grok"?G:C}function N(e){return e==="grok"?H:p}function U(){var n;if(typeof window>"u")return;const e=window.__cursorCanvas;return(n=e==null?void 0:e.state)==null?void 0:n.theme}function j(e,n){let o=typeof(e==null?void 0:e.kind)=="string"&&e.kind.length>0?e.kind:void 0;o||(n?o=n:typeof window<"u"&&window.matchMedia?o=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":o="dark");const r={brand:B(e==null?void 0:e.brand),primary:typeof(e==null?void 0:e.primary)=="string"?e.primary:void 0,editorBackground:typeof(e==null?void 0:e.editorBackground)=="string"?e.editorBackground:void 0,editorForeground:typeof(e==null?void 0:e.editorForeground)=="string"?e.editorForeground:void 0},{tokens:t,palette:c,brand:d}=$(o,r),l=_(d);return{...t,kind:o,brand:d,tokens:t,palette:c,category:t.category,radius:K(d),typography:N(d),chart:l,spacing:D}}function w(e){const n=U();return j(n,e)}exports.canvasPaletteDark=g;exports.canvasPaletteGrokDark=h;exports.canvasPaletteGrokLight=y;exports.canvasPaletteLight=u;exports.canvasTokens=I;exports.canvasTokensLight=R;exports.categoryPaletteDark=s;exports.categoryPaletteLight=F;exports.colorPalette=P;exports.resolveThemeForColorScheme=w;exports.usageColorSequence=S;

package/dist/host-tokens-Dh2BFFjv.js

@@ -0,0 +1,412 @@
+const s = {
+  foreground: "#E4E4E4EB",
+  foregroundSecondary: "#E4E4E48D",
+  foregroundTertiary: "#E4E4E45E",
+  foregroundQuaternary: "#E4E4E442",
+  editor: "#181818",
+  chrome: "#141414",
+  sidebar: "#141414",
+  elevated: "#181818",
+  fillPrimary: "#E4E4E430",
+  fillSecondary: "#E4E4E41E",
+  fillTertiary: "#E4E4E411",
+  fillQuaternary: "#E4E4E40A",
+  strokePrimary: "#E4E4E433",
+  strokeSecondary: "#E4E4E41F",
+  strokeTertiary: "#E4E4E414",
+  strokeFocused: "#599CE7",
+  accent: "#599CE7",
+  buttonBackground: "#599CE7",
+  buttonForeground: "#191c22",
+  buttonHoverBackground: "#6AABE9",
+  link: "#87c3ff",
+  diffInsertedLine: "#3FA26633",
+  diffRemovedLine: "#B8004933",
+  diffStripAdded: "#3FA2668F",
+  diffStripRemoved: "#FC6B838F"
+}, l = {
+  foreground: "#141414F0",
+  foregroundSecondary: "#141414BD",
+  foregroundTertiary: "#1414148A",
+  foregroundQuaternary: "#1414145C",
+  editor: "#FCFCFC",
+  chrome: "#F8F8F8",
+  sidebar: "#F3F3F3",
+  elevated: "#FCFCFC",
+  fillPrimary: "#14141433",
+  fillSecondary: "#14141424",
+  fillTertiary: "#14141414",
+  fillQuaternary: "#1414140F",
+  strokePrimary: "#14141433",
+  strokeSecondary: "#1414141F",
+  strokeTertiary: "#14141414",
+  strokeFocused: "#3685BF",
+  accent: "#3685BF",
+  buttonBackground: "#3685BF",
+  buttonForeground: "#FCFCFC",
+  buttonHoverBackground: "#2E76AB",
+  link: "#3685BF",
+  diffInsertedLine: "#1F8A651F",
+  diffRemovedLine: "#CF2D5614",
+  diffStripAdded: "#1F8A65CC",
+  diffStripRemoved: "#CF2D56CC"
+}, C = {
+  accent: "#1084FE",
+  buttonBackground: "#1084FE",
+  buttonForeground: "#070707",
+  buttonHoverBackground: "#459FFE",
+  link: "#80BEFE",
+  strokeFocused: "#1084FE"
+}, B = {
+  accent: "#0C64C1",
+  buttonBackground: "#0C64C1",
+  buttonForeground: "#FAFAFA",
+  buttonHoverBackground: "#1084FE",
+  link: "#0C64C1",
+  strokeFocused: "#0C64C1"
+}, A = {
+  ...s,
+  ...C
+}, b = {
+  ...l,
+  ...B
+}, E = {
+  gray: "#8888A8E0",
+  purple: "#7B64B8F0",
+  green: "#1F8A65E8",
+  yellow: "#E8C030E0",
+  cyan: "#2A9A8AE0",
+  pink: "#C85898E0",
+  blue: "#2E79B5E0",
+  orange: "#F0A040E0",
+  red: "#C04848E0"
+}, k = {
+  gray: "#8888A8E0",
+  purple: "#7B64B8F0",
+  green: "#1F8A65E8",
+  yellow: "#E8C030E0",
+  cyan: "#2A9A8AE0",
+  pink: "#C85898E0",
+  blue: "#2E79B5E0",
+  orange: "#F0A088E0",
+  red: "#CF2D56E0"
+}, y = {
+  gray: "#777777E0",
+  purple: "#9159FEF0",
+  green: "#00C972E8",
+  yellow: "#FF9800E0",
+  cyan: "#00BCA6E0",
+  pink: "#FF309BE0",
+  blue: "#1084FEE0",
+  orange: "#FF6700E0",
+  red: "#FF263CE0"
+}, v = {
+  ...y
+}, K = E, N = [
+  "blue",
+  "purple",
+  "green",
+  "yellow",
+  "cyan",
+  "pink",
+  "orange",
+  "red",
+  "gray"
+], i = {
+  green: "#1F8A65E8",
+  darkGreen: "#0D855AE0",
+  lightGreen: "#52B896E0",
+  mintGreen: "#7DCAB0E0",
+  blue: "#2E79B5E0",
+  lightBlue: "#70B0D8E0",
+  indigo: "#5A6CC0F0",
+  lightIndigo: "#9AAADCE0",
+  purple: "#7B64B8F0",
+  lightPurple: "#AA98D8E0",
+  warmPink: "#C85898E0",
+  lightPink: "#E8A0C4E0",
+  brightOrange: "#F0A040E0",
+  deepOrange: "#C06028E0",
+  goldenYellow: "#E8C030E0",
+  darkAmber: "#C04848E0",
+  warmPeach: "#F0A088E0",
+  vibrantTeal: "#2A9A8AE0",
+  muted: "#8888A8E0",
+  neutralLine: "#888899D0"
+}, a = {
+  green: "#00C972E8",
+  darkGreen: "#009957E0",
+  lightGreen: "#38D591E0",
+  mintGreen: "#78E2B4E0",
+  blue: "#1084FEE0",
+  lightBlue: "#459FFEE0",
+  indigo: "#0C64C1F0",
+  lightIndigo: "#80BEFEE0",
+  purple: "#9159FEF0",
+  lightPurple: "#A97EFEE0",
+  warmPink: "#FF309BE0",
+  lightPink: "#FF5EB1E0",
+  brightOrange: "#FF6700E0",
+  deepOrange: "#C24E00E0",
+  goldenYellow: "#FF9800E0",
+  darkAmber: "#FF263CE0",
+  warmPeach: "#FF8838E0",
+  vibrantTeal: "#00BCA6E0",
+  muted: "#777777E0",
+  neutralLine: "#777777D0"
+}, S = [
+  i.green,
+  i.lightBlue,
+  i.indigo,
+  i.brightOrange,
+  i.deepOrange,
+  i.goldenYellow,
+  i.warmPink,
+  i.warmPeach,
+  i.purple,
+  i.mintGreen,
+  i.muted,
+  i.vibrantTeal
+], P = [
+  a.green,
+  a.lightBlue,
+  a.indigo,
+  a.brightOrange,
+  a.deepOrange,
+  a.goldenYellow,
+  a.warmPink,
+  a.warmPeach,
+  a.purple,
+  a.mintGreen,
+  a.muted,
+  a.vibrantTeal
+], h = {
+  fontFamily: "inherit",
+  h1: { fontSize: "24px", lineHeight: "30px", fontWeight: 590 },
+  h2: { fontSize: "18px", lineHeight: "24px", fontWeight: 590 },
+  h3: { fontSize: "16px", lineHeight: "22px", fontWeight: 590 },
+  body: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 },
+  small: { fontSize: "12px", lineHeight: "16px", fontWeight: 400 }
+}, T = 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', x = {
+  "0.5": 2,
+  1: 4,
+  "1.5": 6,
+  2: 8,
+  "2.5": 10,
+  3: 12,
+  "3.5": 14,
+  4: 16,
+  "4.5": 18,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40
+}, m = {
+  none: 0,
+  xs: 2,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  full: 9999
+}, D = {
+  ...m,
+  md: 8,
+  lg: 10,
+  xl: 14
+}, L = {
+  ...h,
+  fontFamily: T
+};
+function F(e, n) {
+  return {
+    bg: {
+      editor: e.editor,
+      chrome: e.chrome,
+      elevated: e.elevated
+    },
+    text: {
+      primary: e.foreground,
+      secondary: e.foregroundSecondary,
+      tertiary: e.foregroundTertiary,
+      quaternary: e.foregroundQuaternary,
+      link: e.link,
+      onAccent: e.buttonForeground
+    },
+    stroke: {
+      primary: e.strokePrimary,
+      secondary: e.strokeSecondary,
+      tertiary: e.strokeTertiary,
+      focused: e.strokeFocused
+    },
+    fill: {
+      primary: e.fillPrimary,
+      secondary: e.fillSecondary,
+      tertiary: e.fillTertiary,
+      quaternary: e.fillQuaternary
+    },
+    accent: {
+      primary: e.accent,
+      control: e.buttonBackground,
+      controlHover: e.buttonHoverBackground
+    },
+    diff: {
+      insertedLine: e.diffInsertedLine,
+      removedLine: e.diffRemovedLine,
+      stripAdded: e.diffStripAdded,
+      stripRemoved: e.diffStripRemoved
+    },
+    category: n
+  };
+}
+const U = F(
+  s,
+  E
+), j = F(
+  l,
+  k
+);
+function u(e) {
+  const n = e.trim(), o = /^#([0-9a-f]{3,8})$/i.exec(n);
+  if (!o)
+    return;
+  const r = o[1];
+  if (r.length === 3 || r.length === 4) {
+    const t = (f) => f + f, c = parseInt(t(r[0]), 16), d = parseInt(t(r[1]), 16), g = parseInt(t(r[2]), 16);
+    return { r: c, g: d, b: g };
+  }
+  if (r.length === 6 || r.length === 8) {
+    const t = parseInt(r.slice(0, 2), 16), c = parseInt(r.slice(2, 4), 16), d = parseInt(r.slice(4, 6), 16);
+    return { r: t, g: c, b: d };
+  }
+}
+function G(e) {
+  const n = (o) => {
+    const r = o / 255;
+    return r <= 0.03928 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * n(e.r) + 0.7152 * n(e.g) + 0.0722 * n(e.b);
+}
+function H(e, n, o) {
+  const r = Math.min(1, Math.max(0, o));
+  return {
+    r: Math.round(e.r * (1 - r) + n.r * r),
+    g: Math.round(e.g * (1 - r) + n.g * r),
+    b: Math.round(e.b * (1 - r) + n.b * r)
+  };
+}
+function I(e) {
+  const n = (o) => o.toString(16).padStart(2, "0");
+  return `#${n(e.r)}${n(e.g)}${n(e.b)}`;
+}
+function p(e) {
+  return e === "grok" ? "grok" : "cursor";
+}
+function R(e, n) {
+  let o = e;
+  if (typeof n.editorBackground == "string" && u(n.editorBackground)) {
+    const r = n.editorBackground;
+    o = {
+      ...o,
+      editor: r,
+      chrome: r,
+      sidebar: r,
+      elevated: r
+    };
+  }
+  if (typeof n.editorForeground == "string" && u(n.editorForeground)) {
+    const r = n.editorForeground;
+    o = {
+      ...o,
+      foreground: r,
+      foregroundSecondary: r,
+      foregroundTertiary: r,
+      foregroundQuaternary: r
+    };
+  }
+  return o;
+}
+function M(e, n) {
+  const o = u(n);
+  if (!o)
+    return e;
+  const r = H(o, { r: 255, g: 255, b: 255 }, 0.12), t = G(o) > 0.45 ? "#141414" : "#FAFAFA";
+  return {
+    ...e,
+    accent: n,
+    buttonBackground: n,
+    buttonHoverBackground: I(r),
+    link: n,
+    strokeFocused: n,
+    buttonForeground: t
+  };
+}
+const O = /* @__PURE__ */ new Set(["light", "hc-light"]);
+function q(e) {
+  return O.has(e);
+}
+function Q(e, n) {
+  const o = p(n == null ? void 0 : n.brand), r = q(e);
+  let t, c;
+  return o === "grok" ? (t = r ? b : A, c = r ? v : y) : (t = r ? l : s, c = r ? k : E), t = R(t, n ?? {}), o !== "grok" && typeof (n == null ? void 0 : n.primary) == "string" && (t = M(t, n.primary)), { tokens: F(t, c), palette: t, brand: o };
+}
+function W(e) {
+  return e === "grok" ? {
+    palette: a,
+    sequence: P
+  } : { palette: i, sequence: S };
+}
+function z(e) {
+  return e === "grok" ? D : m;
+}
+function Y(e) {
+  return e === "grok" ? L : h;
+}
+function $() {
+  var n;
+  if (typeof window > "u")
+    return;
+  const e = window.__cursorCanvas;
+  return (n = e == null ? void 0 : e.state) == null ? void 0 : n.theme;
+}
+function _(e, n) {
+  let o = typeof (e == null ? void 0 : e.kind) == "string" && e.kind.length > 0 ? e.kind : void 0;
+  o || (n ? o = n : typeof window < "u" && window.matchMedia ? o = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : o = "dark");
+  const r = {
+    brand: p(e == null ? void 0 : e.brand),
+    primary: typeof (e == null ? void 0 : e.primary) == "string" ? e.primary : void 0,
+    editorBackground: typeof (e == null ? void 0 : e.editorBackground) == "string" ? e.editorBackground : void 0,
+    editorForeground: typeof (e == null ? void 0 : e.editorForeground) == "string" ? e.editorForeground : void 0
+  }, { tokens: t, palette: c, brand: d } = Q(o, r), g = W(d);
+  return {
+    ...t,
+    kind: o,
+    brand: d,
+    tokens: t,
+    palette: c,
+    category: t.category,
+    radius: z(d),
+    typography: Y(d),
+    chart: g,
+    spacing: x
+  };
+}
+function w(e) {
+  const n = $();
+  return _(n, e);
+}
+export {
+  A as a,
+  b,
+  s as c,
+  l as d,
+  U as e,
+  j as f,
+  E as g,
+  k as h,
+  K as i,
+  w as r,
+  N as u
+};

package/dist/runtime/index.d.ts

@@ -1,16 +1,14 @@
+import { MantineColorScheme } from '@mantine/core';
 import { ReactNode } from 'react';
 import { Root } from 'react-dom/client';
-import { MantineColorScheme } from '@mantine/core';
+import { CanvasMantineRoot } from '../shim/canvas-mantine-root';
 export interface CanvasRootProps {
     children: ReactNode;
     /** Initial color scheme; defaults to following the OS preference. */
     defaultColorScheme?: MantineColorScheme;
 }
-/**
- * Wraps a canvas in the `MantineProvider` the shim components require. Use this
- * when you manage your own React root (e.g. inside an existing app tree).
- */
-export declare function CanvasRoot({ children, defaultColorScheme, }: CanvasRootProps): import("react").JSX.Element;
+/** @deprecated Use `CanvasMantineRoot` — same behavior. */
+export declare const CanvasRoot: typeof CanvasMantineRoot;
 export interface MountCanvasOptions {
     defaultColorScheme?: MantineColorScheme;
     /** Skip `StrictMode` (e.g. for libraries that double-render badly). */
@@ -18,7 +16,7 @@ export interface MountCanvasOptions {
 }
 /**
  * One-call entry for a standalone page: resolves the container (element or id),
- * mounts the canvas inside `CanvasRoot`, and returns the React root so callers
+ * mounts the canvas inside `CanvasMantineRoot`, and returns the React root so callers
  * can `unmount()` later.
  */
 export declare function mountCanvas(container: HTMLElement | string, canvas: ReactNode, options?: MountCanvasOptions): Root;

package/dist/runtime.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("react"),l=require("react-dom/client"),m=require("@mantine/core");function u({children:t,defaultColorScheme:e="auto"}){return o.jsx(m.MantineProvider,{defaultColorScheme:e,children:t})}function f(t,e,c={}){const{defaultColorScheme:i="auto",strict:a=!0}=c,r=typeof t=="string"?document.getElementById(t):t;if(!r)throw new Error(`mountCanvas: container ${typeof t=="string"?`#${t}`:""} not found`);const n=l.createRoot(r),s=o.jsx(u,{defaultColorScheme:i,children:e});return n.render(a?o.jsx(d.StrictMode,{children:s}):s),n}exports.CanvasRoot=u;exports.mountCanvas=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),g=require("react-dom/client"),l=require("@mantine/core"),u=require("./host-tokens-Cjzmp0z_.cjs");function f(t){return[t,t,t,t,t,t,t,t,t,t]}function d(t){const{typography:e,radius:n}=t;return l.createTheme({primaryColor:"accent",colors:{accent:f(t.palette.accent)},fontFamily:e.fontFamily,defaultRadius:`${n.md}`,radius:{xs:`${n.xs}px`,sm:`${n.sm}px`,md:`${n.md}px`,lg:`${n.lg}px`,xl:`${n.xl}px`},headings:{fontFamily:e.fontFamily,fontWeight:String(e.h1.fontWeight),sizes:{h1:{fontSize:e.h1.fontSize,lineHeight:e.h1.lineHeight,fontWeight:String(e.h1.fontWeight)},h2:{fontSize:e.h2.fontSize,lineHeight:e.h2.lineHeight,fontWeight:String(e.h2.fontWeight)},h3:{fontSize:e.h3.fontSize,lineHeight:e.h3.lineHeight,fontWeight:String(e.h3.fontWeight)},h4:{fontSize:e.body.fontSize,lineHeight:e.body.lineHeight,fontWeight:String(e.body.fontWeight)}}}})}function y(t){const e=window.matchMedia("(prefers-color-scheme: dark)");return e.addEventListener("change",t),()=>e.removeEventListener("change",t)}function S(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function p(t){const e=r.useSyncExternalStore(y,S,()=>"light");return t==="dark"?"dark":t==="light"?"light":e}function m({children:t,defaultColorScheme:e="auto"}){const n=p(e),o=r.useMemo(()=>u.resolveThemeForColorScheme(n),[n]),s=r.useMemo(()=>d(o),[o]);return i.jsx(l.MantineProvider,{theme:s,defaultColorScheme:e,forceColorScheme:n,children:i.jsx("div",{style:{minHeight:"inherit",background:o.bg.editor,color:o.text.primary,fontFamily:o.typography.fontFamily},children:t})})}const v=m;function H(t,e,n={}){const{defaultColorScheme:o="auto",strict:s=!0}=n,c=typeof t=="string"?document.getElementById(t):t;if(!c)throw new Error(`mountCanvas: container ${typeof t=="string"?`#${t}`:""} not found`);const a=g.createRoot(c),h=i.jsx(m,{defaultColorScheme:o,children:e});return a.render(s?i.jsx(r.StrictMode,{children:h}):h),a}exports.CanvasRoot=v;exports.mountCanvas=H;

package/dist/runtime.js

@@ -1,23 +1,110 @@
-import { jsx as r } from "react/jsx-runtime";
-import { StrictMode as s } from "react";
-import { createRoot as c } from "react-dom/client";
-import { MantineProvider as d } from "@mantine/core";
-function a({
+import { jsx as i } from "react/jsx-runtime";
+import { useMemo as m, useSyncExternalStore as f, StrictMode as l } from "react";
+import { createRoot as g } from "react-dom/client";
+import { MantineProvider as d, createTheme as u } from "@mantine/core";
+import { r as y } from "./host-tokens-Dh2BFFjv.js";
+function p(t) {
+  return [t, t, t, t, t, t, t, t, t, t];
+}
+function S(t) {
+  const { typography: e, radius: n } = t;
+  return u({
+    primaryColor: "accent",
+    colors: {
+      accent: p(t.palette.accent)
+    },
+    fontFamily: e.fontFamily,
+    defaultRadius: `${n.md}`,
+    radius: {
+      xs: `${n.xs}px`,
+      sm: `${n.sm}px`,
+      md: `${n.md}px`,
+      lg: `${n.lg}px`,
+      xl: `${n.xl}px`
+    },
+    headings: {
+      fontFamily: e.fontFamily,
+      fontWeight: String(e.h1.fontWeight),
+      sizes: {
+        h1: {
+          fontSize: e.h1.fontSize,
+          lineHeight: e.h1.lineHeight,
+          fontWeight: String(e.h1.fontWeight)
+        },
+        h2: {
+          fontSize: e.h2.fontSize,
+          lineHeight: e.h2.lineHeight,
+          fontWeight: String(e.h2.fontWeight)
+        },
+        h3: {
+          fontSize: e.h3.fontSize,
+          lineHeight: e.h3.lineHeight,
+          fontWeight: String(e.h3.fontWeight)
+        },
+        h4: {
+          fontSize: e.body.fontSize,
+          lineHeight: e.body.lineHeight,
+          fontWeight: String(e.body.fontWeight)
+        }
+      }
+    }
+  });
+}
+function v(t) {
+  const e = window.matchMedia("(prefers-color-scheme: dark)");
+  return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+}
+function H() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function W(t) {
+  const e = f(
+    v,
+    H,
+    () => "light"
+  );
+  return t === "dark" ? "dark" : t === "light" ? "light" : e;
+}
+function c({
   children: t,
-  defaultColorScheme: o = "auto"
+  defaultColorScheme: e = "auto"
 }) {
-  return /* @__PURE__ */ r(d, { defaultColorScheme: o, children: t });
+  const n = W(e), o = m(
+    () => y(n),
+    [n]
+  ), r = m(() => S(o), [o]);
+  return /* @__PURE__ */ i(
+    d,
+    {
+      theme: r,
+      defaultColorScheme: e,
+      forceColorScheme: n,
+      children: /* @__PURE__ */ i(
+        "div",
+        {
+          style: {
+            minHeight: "inherit",
+            background: o.bg.editor,
+            color: o.text.primary,
+            fontFamily: o.typography.fontFamily
+          },
+          children: t
+        }
+      )
+    }
+  );
 }
-function C(t, o, i = {}) {
-  const { defaultColorScheme: u = "auto", strict: f = !0 } = i, e = typeof t == "string" ? document.getElementById(t) : t;
-  if (!e)
+const k = c;
+function w(t, e, n = {}) {
+  const { defaultColorScheme: o = "auto", strict: r = !0 } = n, s = typeof t == "string" ? document.getElementById(t) : t;
+  if (!s)
     throw new Error(
       `mountCanvas: container ${typeof t == "string" ? `#${t}` : ""} not found`
     );
-  const n = c(e), m = /* @__PURE__ */ r(a, { defaultColorScheme: u, children: o });
-  return n.render(f ? /* @__PURE__ */ r(s, { children: m }) : m), n;
+  const a = g(s), h = /* @__PURE__ */ i(c, { defaultColorScheme: o, children: e });
+  return a.render(r ? /* @__PURE__ */ i(l, { children: h }) : h), a;
 }
 export {
-  a as CanvasRoot,
-  C as mountCanvas
+  k as CanvasRoot,
+  w as mountCanvas
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@flesler/cursor-canvas-web",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "repository": "github:flesler/cursor-canvas-web",
   "type": "module",
   "description": "Deploy your Cursor canvases to the web.",
@@ -19,17 +19,21 @@
   },
   "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src/vendor"
   ],
   "main": "./dist/cursor-canvas.cjs",
   "module": "./dist/cursor-canvas.js",
-  "types": "./dist/shim/cursor-canvas.d.ts",
+  "types": "./src/vendor/canvas-sdk/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/shim/cursor-canvas.d.ts",
+      "types": "./src/vendor/canvas-sdk/index.d.ts",
       "import": "./dist/cursor-canvas.js",
       "require": "./dist/cursor-canvas.cjs"
     },
+    "./canvas-sdk": {
+      "types": "./src/vendor/canvas-sdk/index.d.ts"
+    },
     "./runtime": {
       "types": "./dist/runtime/index.d.ts",
       "import": "./dist/runtime.js",
@@ -48,16 +52,19 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "sync:sdk": "bash scripts/sync-cursor-sdk-snapshot.sh",
-    "check:sdk-exports": "node scripts/diff-sdk-exports.mjs",
-    "test:contract": "pnpm run build:lib && pnpm run check:sdk-exports",
-    "check:sdk-live": "node scripts/diff-sdk-exports.mjs \"${HOME}/.cursor/skills-cursor/canvas/sdk/index.d.ts\"",
-    "test:contract:strict": "pnpm run build:lib && node scripts/generate-contract-consumer.mjs && pnpm exec tsc -p test/contract/tsconfig.json",
+    "check:sdk-exports": "tsx scripts/diff-sdk-exports.ts --strict",
+    "test:contract": "pnpm run check:sdk-exports && tsx scripts/generate-contract-consumer.ts && tsc --noEmit && pnpm run build:lib",
+    "check:sdk-live": "tsx scripts/diff-sdk-exports.ts --strict \"${HOME}/.cursor/skills-cursor/canvas/sdk/index.d.ts\"",
+    "test:contract:strict": "pnpm run test:contract",
     "test:contract:ci": "pnpm run test:contract",
     "sync:demo": "bash scripts/sync-demo-canvas.sh",
     "demo:screenshot": "bash scripts/readme-screenshot.sh",
+    "test:demo-screenshots": "bash scripts/test-demo-screenshots.sh",
+    "test:demo-screenshots:update": "bash scripts/test-demo-screenshots.sh --update",
+    "test:render-compat": "bash scripts/test-render-compat.sh",
     "ci:local": "pnpm typecheck && pnpm lint && pnpm test && pnpm test:contract:ci",
     "prepare": "[ \"$CI\" != \"true\" ] && [ -d node_modules/husky ] && husky || true",
-    "prepublishOnly": "pnpm typecheck && pnpm test && pnpm build:lib"
+    "prepublishOnly": "pnpm typecheck && pnpm test && pnpm run check:sdk-exports && pnpm build:lib"
   },
   "peerDependencies": {
     "@mantine/charts": "^8.3.0",
@@ -71,9 +78,6 @@
     "@mantine/charts": "^8.3.18",
     "@mantine/core": "^8.3.18",
     "@mantine/hooks": "^8.3.18",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "recharts": "^3.10.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/node": "^22.13.1",
@@ -87,10 +91,14 @@
     "husky": "^9.1.7",
     "jsdom": "^26.0.0",
     "prettier": "^3.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^3.10.1",
+    "tsx": "^4.21.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.24.0",
     "vite": "^6.1.0",
     "vite-plugin-dts": "^5.0.2",
-    "vitest": "^3.0.5"
+    "vitest": "^4.1.11"
   }
 }