@mechane-ai/elements 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/NOTICE +24 -0
  2. package/README.md +7 -1
  3. package/dist/ai.js +153 -133
  4. package/dist/{categorical-values-DYRiw5Qd.js → categorical-values-FYc43JCa.js} +4 -4
  5. package/dist/{chart-frame-RL1hCWBC.js → chart-frame-Bczk5sWj.js} +22 -14
  6. package/dist/{chart-input-Bm3ot1yD.js → chart-input-CbzVN76m.js} +2 -2
  7. package/dist/charts/cartesian.js +529 -450
  8. package/dist/charts/distribution.js +302 -261
  9. package/dist/charts/graph.js +137 -103
  10. package/dist/charts/hierarchy.js +7 -7
  11. package/dist/charts/matrix.js +187 -174
  12. package/dist/charts/timeline.js +119 -92
  13. package/dist/charts.js +1 -1
  14. package/dist/code-block-B7xzM3tD.js +180 -0
  15. package/dist/collections.js +319 -242
  16. package/dist/content/code.js +1 -1
  17. package/dist/content/diff.js +81 -63
  18. package/dist/content/link.js +1 -1
  19. package/dist/content/markdown.js +115 -96
  20. package/dist/content/tree.js +43 -38
  21. package/dist/{content-link-BrPrpBof.js → content-link-CatGOrbo.js} +6 -2
  22. package/dist/content.js +172 -153
  23. package/dist/{assets/stylex.css → elements.css} +585 -229
  24. package/dist/feedback.js +1 -1
  25. package/dist/forms/dates.js +25 -25
  26. package/dist/forms.js +1 -1
  27. package/dist/index.js +1 -1
  28. package/dist/layout.js +239 -192
  29. package/dist/navigation/commands.js +45 -42
  30. package/dist/{navigation-yxK3iQXo.js → navigation-D2_sGy3C.js} +2 -2
  31. package/dist/navigation.js +10 -10
  32. package/dist/overlays.js +1 -1
  33. package/dist/packages/ai/src/conversation.d.ts +14 -2
  34. package/dist/packages/ai/src/index.d.ts +1 -1
  35. package/dist/packages/charts/src/cartesian/bar-chart.d.ts +5 -0
  36. package/dist/packages/charts/src/cartesian/index.d.ts +2 -2
  37. package/dist/packages/charts/src/chart-frame.d.ts +3 -0
  38. package/dist/packages/charts/src/chart-theme.d.ts +2 -1
  39. package/dist/packages/charts/src/distribution/distribution-plot.d.ts +22 -2
  40. package/dist/packages/charts/src/timeline/waterfall.d.ts +3 -2
  41. package/dist/packages/collections/src/collection-scroll.d.ts +2 -1
  42. package/dist/packages/collections/src/index.d.ts +1 -0
  43. package/dist/packages/collections/src/inspector.d.ts +6 -3
  44. package/dist/packages/content/src/diff/pierre-diff.d.ts +2 -1
  45. package/dist/packages/content/src/viewer-styles.d.ts +64 -0
  46. package/dist/packages/core/src/agent-avatar-glyphs.d.ts +1 -1
  47. package/dist/packages/core/src/index.d.ts +1 -1
  48. package/dist/packages/core/src/surfaces.d.ts +5 -0
  49. package/dist/packages/feedback/src/index.d.ts +4 -1
  50. package/dist/packages/feedback/src/toast.d.ts +5 -27
  51. package/dist/packages/forms/src/field-styles.d.ts +9 -0
  52. package/dist/packages/forms/src/selection-styles.d.ts +18 -2
  53. package/dist/packages/foundations/src/overlay-styles.d.ts +3 -1
  54. package/dist/packages/foundations/src/popup-styles.d.ts +7 -0
  55. package/dist/packages/foundations/src/tokens.stylex.d.ts +9 -0
  56. package/dist/packages/layout/src/frame.stylex.d.ts +1 -0
  57. package/dist/packages/layout/src/sidebar.d.ts +3 -1
  58. package/dist/packages/overlays/src/alert-dialog.d.ts +5 -2
  59. package/dist/packages/overlays/src/dialog.d.ts +7 -3
  60. package/dist/pierre-diff--zsiHCCB.js +71 -0
  61. package/dist/pierre-theme-D9hnHv3Z.js +126 -0
  62. package/dist/{pierre-tree-CRk09rx7.js → pierre-tree-D47uA7lb.js} +3 -3
  63. package/dist/{src-Cc0Sadzr.js → src-C_heP5kL.js} +295 -221
  64. package/dist/src-Cs0dRc4X.js +617 -0
  65. package/dist/src-D05isEh_.js +1652 -0
  66. package/dist/src-DXsGTJgv.js +969 -0
  67. package/dist/tokens.js +33 -25
  68. package/dist/viewer-styles-CpHqp5Qv.js +70 -0
  69. package/package.json +2 -1
  70. package/packages/foundations/src/tokens.stylex.ts +55 -48
  71. package/styles.css +1 -1
  72. package/dist/code-block-B30xQKqg.js +0 -175
  73. package/dist/pierre-diff-CZdzgiYm.js +0 -66
  74. package/dist/pierre-theme-BpESNIsV.js +0 -96
  75. package/dist/popup-styles-CvtZDE2t.js +0 -135
  76. package/dist/src-CfDf8TY8.js +0 -466
  77. package/dist/src-DuuAmS-c.js +0 -360
  78. package/dist/src-elMBQ2Dh.js +0 -1087
package/dist/tokens.js CHANGED
@@ -85,30 +85,30 @@ var e = {
85
85
  identity24: "var(--x9u8ejr)",
86
86
  __varGroupHash__: "x6mvf7n"
87
87
  }, a = {
88
- identity1: "#e7938d",
89
- identity2: "#e7a88d",
90
- identity3: "#e78da7",
91
- identity4: "#e78dc0",
92
- identity5: "#e78ddf",
93
- identity6: "#d28de7",
94
- identity7: "#ba8de7",
95
- identity8: "#a28de7",
96
- identity9: "#8d8de7",
97
- identity10: "#8da5e7",
98
- identity11: "#8dbae7",
99
- identity12: "#8dcfe7",
100
- identity13: "#8de1e7",
101
- identity14: "#8de7de",
102
- identity15: "#8de7ce",
103
- identity16: "#8de7bc",
104
- identity17: "#8de7aa",
105
- identity18: "#8de795",
106
- identity19: "#9ee78d",
107
- identity20: "#b9e78d",
108
- identity21: "#d5e78d",
109
- identity22: "#e7dc8d",
110
- identity23: "#e7c68d",
111
- identity24: "#e7b38d"
88
+ identity1: "#f07d75",
89
+ identity2: "#f09a75",
90
+ identity3: "#f07598",
91
+ identity4: "#f075bb",
92
+ identity5: "#f075e6",
93
+ identity6: "#d375f0",
94
+ identity7: "#b375f0",
95
+ identity8: "#9275f0",
96
+ identity9: "#7575f0",
97
+ identity10: "#7596f0",
98
+ identity11: "#75b3f0",
99
+ identity12: "#75cff0",
100
+ identity13: "#75e8f0",
101
+ identity14: "#75f0e3",
102
+ identity15: "#75f0cd",
103
+ identity16: "#75f0b5",
104
+ identity17: "#75f09c",
105
+ identity18: "#75f080",
106
+ identity19: "#8cf075",
107
+ identity20: "#b0f075",
108
+ identity21: "#d7f075",
109
+ identity22: "#f0e175",
110
+ identity23: "#f0c375",
111
+ identity24: "#f0a875"
112
112
  }, o = {
113
113
  keyword: "var(--x1t6rq9)",
114
114
  string: "var(--x1pa6z6o)",
@@ -134,9 +134,14 @@ var e = {
134
134
  }, l = {
135
135
  fontFamily: "var(--xax3y77)",
136
136
  monoFamily: "var(--xntcpct)",
137
+ regularWeight: "var(--x15yhtsr)",
138
+ mediumWeight: "var(--x1nq3oar)",
139
+ strongWeight: "var(--x1j0x2uk)",
140
+ boldWeight: "var(--xeequbj)",
137
141
  bodySize: "var(--x105xqs)",
138
142
  bodyLineHeight: "var(--x1eh4a5a)",
139
143
  multilineLineHeight: "var(--x1kk28mq)",
144
+ proseLineHeight: "var(--x1sf6ltt)",
140
145
  captionSize: "var(--xobsf79)",
141
146
  captionLineHeight: "var(--xdvbmuj)",
142
147
  inputSize: "var(--x1af0fv0)",
@@ -180,10 +185,13 @@ var e = {
180
185
  tooltip: "40",
181
186
  skipLink: "50"
182
187
  }, g = {
188
+ rowHeight: 48,
189
+ headerHeight: 36
190
+ }, _ = {
183
191
  coarsePointer: "@media (pointer: coarse)",
184
192
  hoverPointer: "@media (hover: hover) and (pointer: fine)",
185
193
  compactText: "@media (max-width:639px)",
186
194
  compactTable: "@media (max-width:600px)",
187
195
  reducedMotion: "@media (prefers-reduced-motion: reduce)"
188
196
  };
189
- export { i as avatarColors, n as chartColors, e as colors, g as conditions, u as controls, a as darkAvatarColors, r as darkChartColors, t as darkColors, m as darkShadows, s as darkSyntaxColors, h as layers, f as motion, d as radii, p as shadows, c as spacing, o as syntaxColors, l as typography };
197
+ export { i as avatarColors, n as chartColors, e as colors, _ as conditions, u as controls, a as darkAvatarColors, r as darkChartColors, t as darkColors, m as darkShadows, s as darkSyntaxColors, h as layers, f as motion, d as radii, p as shadows, c as spacing, o as syntaxColors, g as tableGeometry, l as typography };
@@ -0,0 +1,70 @@
1
+ import "@stylexjs/stylex";
2
+ // packages/content/src/viewer-styles.ts
3
+ var e = {
4
+ root: {
5
+ k7Eaqz: "xeuugli",
6
+ kMzoRj: "xmkeg23",
7
+ ksu8eU: "x1y0btm7",
8
+ kVAM5u: "x1ey3b81",
9
+ kWkggS: "xpvm0e4",
10
+ kMwMTN: "xbixft",
11
+ kMv6JI: "x1hz01jw",
12
+ kGuDYH: "xtqrqnz",
13
+ kLWn49: "x1778rvt",
14
+ k63SB2: "xj57cvi",
15
+ $$css: !0
16
+ },
17
+ header: {
18
+ k1xSpc: "x78zum5",
19
+ kwnvtZ: "x1a02dak",
20
+ kGNEyG: "x6s0dn4",
21
+ kjj79g: "x1qughib",
22
+ kOIVth: "x1hnptsi",
23
+ k7Eaqz: "xeuugli",
24
+ k8WAf4: "xn9t2bk",
25
+ kg3NbH: "x1doqdfy",
26
+ kGuDYH: "xy8obcc",
27
+ kLWn49: "xas2l8k",
28
+ k63SB2: "xk4h15q",
29
+ kMwMTN: "x153jb6y",
30
+ kt9PQ7: "xso031l",
31
+ kfdmCh: "x1q0q8m5",
32
+ kL6WhQ: "x1qndepd",
33
+ $$css: !0
34
+ },
35
+ label: {
36
+ kUk6DE: "x148l3ej",
37
+ k7Eaqz: "xeuugli",
38
+ kHjlTd: "xj0a0fe",
39
+ $$css: !0
40
+ },
41
+ actions: {
42
+ k1xSpc: "x78zum5",
43
+ kwnvtZ: "x1a02dak",
44
+ kGNEyG: "x6s0dn4",
45
+ kOIVth: "x1hnptsi",
46
+ k7Eaqz: "xeuugli",
47
+ $$css: !0
48
+ },
49
+ scrollRegion: {
50
+ k7Eaqz: "xeuugli",
51
+ k3XXqK: "x1t137rt",
52
+ kPJHz1: "x13qnu6",
53
+ k7shQP: "x9v5kkp",
54
+ kZs9gx: "x19rmrnh",
55
+ kiEn40: "x17c0hmk",
56
+ $$css: !0
57
+ },
58
+ note: {
59
+ kogj98: "x1ghz6dp",
60
+ k8WAf4: "xn9t2bk",
61
+ kg3NbH: "x1doqdfy",
62
+ kMwMTN: "x153jb6y",
63
+ kMv6JI: "x1hz01jw",
64
+ kGuDYH: "xy8obcc",
65
+ kLWn49: "xas2l8k",
66
+ kHjlTd: "xj0a0fe",
67
+ $$css: !0
68
+ }
69
+ };
70
+ export { e as t };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mechane-ai/elements",
3
- "version": "0.9.0",
3
+ "version": "0.11.0",
4
4
  "description": "Elements by Mechane — React components for applications, AI interfaces, and analytical graphics",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -145,6 +145,7 @@
145
145
  "@visx/shape": "4.0.0",
146
146
  "lucide-react": "1.66.0",
147
147
  "react-resizable-panels": "4.18.0",
148
+ "sonner": "2.0.8",
148
149
  "streamdown": "2.7.1",
149
150
  "strip-ansi": "7.2.0"
150
151
  },
@@ -65,57 +65,57 @@ export const darkChartColors = stylex.defineConsts({
65
65
  });
66
66
 
67
67
  export const avatarColors = stylex.defineVars({
68
- identity1: '#993029',
69
- identity2: '#994a29',
70
- identity3: '#992949',
71
- identity4: '#992968',
72
- identity5: '#992990',
73
- identity6: '#7f2999',
74
- identity7: '#612999',
75
- identity8: '#432999',
76
- identity9: '#292999',
77
- identity10: '#294799',
78
- identity11: '#296199',
79
- identity12: '#277693',
80
- identity13: '#22797f',
81
- identity14: '#217b72',
82
- identity15: '#217d63',
83
- identity16: '#217d51',
84
- identity17: '#227f3f',
85
- identity18: '#227f2a',
86
- identity19: '#327d21',
87
- identity20: '#4c7b21',
88
- identity21: '#64751f',
89
- identity22: '#7b7021',
90
- identity23: '#8d6725',
91
- identity24: '#995829',
68
+ identity1: '#e3291c',
69
+ identity2: '#e1571c',
70
+ identity3: '#e31c54',
71
+ identity4: '#e31c8d',
72
+ identity5: '#e31cd2',
73
+ identity6: '#b51ce3',
74
+ identity7: '#801ce3',
75
+ identity8: '#4a1ce3',
76
+ identity9: '#1c1ce3',
77
+ identity10: '#1c51e3',
78
+ identity11: '#1c80e3',
79
+ identity12: '#178db8',
80
+ identity13: '#13919a',
81
+ identity14: '#129487',
82
+ identity15: '#139671',
83
+ identity16: '#139858',
84
+ identity17: '#13983d',
85
+ identity18: '#13981e',
86
+ identity19: '#2b9813',
87
+ identity20: '#519412',
88
+ identity21: '#748d11',
89
+ identity22: '#948412',
90
+ identity23: '#b17816',
91
+ identity24: '#d1661a',
92
92
  });
93
93
 
94
94
  export const darkAvatarColors = stylex.defineConsts({
95
- identity1: '#e7938d',
96
- identity2: '#e7a88d',
97
- identity3: '#e78da7',
98
- identity4: '#e78dc0',
99
- identity5: '#e78ddf',
100
- identity6: '#d28de7',
101
- identity7: '#ba8de7',
102
- identity8: '#a28de7',
103
- identity9: '#8d8de7',
104
- identity10: '#8da5e7',
105
- identity11: '#8dbae7',
106
- identity12: '#8dcfe7',
107
- identity13: '#8de1e7',
108
- identity14: '#8de7de',
109
- identity15: '#8de7ce',
110
- identity16: '#8de7bc',
111
- identity17: '#8de7aa',
112
- identity18: '#8de795',
113
- identity19: '#9ee78d',
114
- identity20: '#b9e78d',
115
- identity21: '#d5e78d',
116
- identity22: '#e7dc8d',
117
- identity23: '#e7c68d',
118
- identity24: '#e7b38d',
95
+ identity1: '#f07d75',
96
+ identity2: '#f09a75',
97
+ identity3: '#f07598',
98
+ identity4: '#f075bb',
99
+ identity5: '#f075e6',
100
+ identity6: '#d375f0',
101
+ identity7: '#b375f0',
102
+ identity8: '#9275f0',
103
+ identity9: '#7575f0',
104
+ identity10: '#7596f0',
105
+ identity11: '#75b3f0',
106
+ identity12: '#75cff0',
107
+ identity13: '#75e8f0',
108
+ identity14: '#75f0e3',
109
+ identity15: '#75f0cd',
110
+ identity16: '#75f0b5',
111
+ identity17: '#75f09c',
112
+ identity18: '#75f080',
113
+ identity19: '#8cf075',
114
+ identity20: '#b0f075',
115
+ identity21: '#d7f075',
116
+ identity22: '#f0e175',
117
+ identity23: '#f0c375',
118
+ identity24: '#f0a875',
119
119
  });
120
120
 
121
121
  export const syntaxColors = stylex.defineVars({
@@ -147,9 +147,14 @@ export const spacing = stylex.defineVars({
147
147
  export const typography = stylex.defineVars({
148
148
  fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif',
149
149
  monoFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
150
+ regularWeight: '400',
151
+ mediumWeight: '500',
152
+ strongWeight: '600',
153
+ boldWeight: '700',
150
154
  bodySize: '13px',
151
155
  bodyLineHeight: '20px',
152
156
  multilineLineHeight: '1.6',
157
+ proseLineHeight: '1.7',
153
158
  captionSize: '12px',
154
159
  captionLineHeight: '18px',
155
160
  inputSize: '14px',
@@ -190,6 +195,8 @@ export const darkShadows = stylex.defineConsts({ popup: '0 4px 16px #00000066' }
190
195
 
191
196
  export const layers = stylex.defineConsts({ backdrop: '20', dialog: '21', popup: '30', tooltip: '40', skipLink: '50' });
192
197
 
198
+ export const tableGeometry = stylex.defineConsts({ rowHeight: 48, headerHeight: 36 });
199
+
193
200
  export const conditions = stylex.defineConsts({
194
201
  coarsePointer: '@media (pointer: coarse)',
195
202
  hoverPointer: '@media (hover: hover) and (pointer: fine)',
package/styles.css CHANGED
@@ -1,2 +1,2 @@
1
1
  @layer reset;
2
- @import './dist/assets/stylex.css';
2
+ @import './dist/elements.css';
@@ -1,175 +0,0 @@
1
- import { g as e } from "./src-elMBQ2Dh.js";
2
- import { colors as t } from "./tokens.js";
3
- import { t as n } from "./pierre-theme-BpESNIsV.js";
4
- import * as r from "@stylexjs/stylex";
5
- import { useEffect as i, useRef as a, useState as o } from "react";
6
- import { jsx as s, jsxs as c } from "react/jsx-runtime";
7
- // packages/content/src/code/use-highlighted-code.ts
8
- var l = 2e5, u = 4096;
9
- function d(e, t) {
10
- let r = a(null), [s, c] = o();
11
- return i(() => () => {
12
- r.current !== null && (r.current.tokenizer.dispose(), r.current = null);
13
- }, []), i(() => {
14
- let i = !0;
15
- async function a() {
16
- try {
17
- let a = await import("@pierre/highlights");
18
- if (!i || e.length > l || !a.isSupportedLanguage(t)) return;
19
- let o = r.current, s = o !== null && o.language === t, d = s ? o : {
20
- language: t,
21
- source: e,
22
- tokenizer: new a.LiveTokenizer({
23
- code: e,
24
- lang: t,
25
- theme: n,
26
- tokenizeMaxLineLength: u
27
- })
28
- };
29
- if (s) {
30
- if (e.startsWith(o.source)) {
31
- let t = d.tokenizer.lineCount - 1, n = {
32
- line: t,
33
- character: d.tokenizer.getLineLength(t)
34
- };
35
- d.tokenizer.applyEdits([{
36
- range: {
37
- start: n,
38
- end: n
39
- },
40
- newText: e.slice(o.source.length)
41
- }]);
42
- } else d.tokenizer.reset(e);
43
- } else o !== null && o.tokenizer.dispose();
44
- r.current = {
45
- ...d,
46
- source: e
47
- };
48
- let f = d.tokenizer;
49
- f.flush();
50
- let p = Array.from({ length: f.lineCount }, (e, t) => f.getLineTokens(t).tokens);
51
- c({
52
- code: e,
53
- language: t,
54
- lines: p,
55
- hasFailed: !1
56
- });
57
- } catch {
58
- i && c({
59
- code: e,
60
- language: t,
61
- lines: [],
62
- hasFailed: !0
63
- });
64
- }
65
- }
66
- return a(), () => {
67
- i = !1;
68
- };
69
- }, [e, t]), s !== void 0 && s.code === e && s.language === t ? s : void 0;
70
- }
71
- // packages/content/src/code/code-block.tsx
72
- var f = {
73
- kVQacm: "xysyzu8",
74
- $$css: !0
75
- }, p = {
76
- viewport: (e) => [
77
- f,
78
- {
79
- kskxy: e == null ? e : "x1jols5v",
80
- $$css: !0
81
- },
82
- { "--x-maxHeight": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e) }
83
- ],
84
- token: (e) => [{
85
- kMwMTN: e == null ? e : "x14rh7hd",
86
- $$css: !0
87
- }, { "--x-color": e ?? void 0 }],
88
- italic: {
89
- kKX8nH: "x1k4tb9n",
90
- $$css: !0
91
- },
92
- bold: {
93
- k63SB2: "x1s688f",
94
- $$css: !0
95
- }
96
- }, m = 2e5;
97
- function h({ token: e }) {
98
- let n = e.fontStyle ?? 0, [i, a] = [!!(n & 1), !!(n & 2)];
99
- return /* @__PURE__ */ s("span", {
100
- ...r.props(p.token(e.color ?? t.ink), i && p.italic, a && p.bold),
101
- children: e.content
102
- });
103
- }
104
- function g({ code: t, language: n = "text", filename: i, streaming: a = !1, wrap: o = !1, lineNumbers: l = !0, selectedLines: u, annotations: f = [], maxHeight: g = 400, maxLines: _ = 2e3 }) {
105
- let v = d(t, n), y = t.slice(0, m).split(/\r\n|\n|\r/u), b = y.slice(0, Math.max(1, _)).map((e, t) => ({
106
- text: e,
107
- line: t + 1
108
- })), x = i ?? n;
109
- return /* @__PURE__ */ c("section", {
110
- "aria-label": i ?? "Code",
111
- className: "xeuugli xmkeg23 x1y0btm7 x1ey3b81 xpvm0e4 xbixft xv06hpe",
112
- children: [
113
- /* @__PURE__ */ c("div", {
114
- className: "x78zum5 x6s0dn4 x1qughib x1n8ia3y xn9t2bk x1doqdfy x1hz01jw xy8obcc x1778rvt x153jb6y xso031l x1q0q8m5 x1qndepd",
115
- children: [/* @__PURE__ */ c("span", { children: [x, a && " · streaming"] }), /* @__PURE__ */ s(e, {
116
- label: i ?? "code",
117
- value: t,
118
- children: "Copy"
119
- })]
120
- }),
121
- /* @__PURE__ */ s("div", {
122
- role: "region",
123
- "aria-label": `${x} source`,
124
- tabIndex: 0,
125
- ...r.props(p.viewport(g)),
126
- children: /* @__PURE__ */ s("pre", {
127
- ...{
128
- 0: { className: "x1ghz6dp xn9t2bk xiard35 xy8obcc x1778rvt xeq4nuv xk8lq53" },
129
- 1: { className: "x1ghz6dp xn9t2bk xiard35 xy8obcc x1778rvt xeq4nuv xeuugli x126k92a xj0a0fe" }
130
- }[!!o | 0],
131
- children: /* @__PURE__ */ s("code", {
132
- className: "xjb2p0i",
133
- children: b.map(({ text: e, line: t }) => {
134
- let n = v === void 0 ? void 0 : v.lines[t - 1], r = u !== void 0 && t >= u.start && t <= (u.end ?? u.start), i = f.find((e) => e.line === t);
135
- return /* @__PURE__ */ c("span", { children: [/* @__PURE__ */ c("span", {
136
- ...{
137
- 0: { className: "x78zum5 x16exltd" },
138
- 1: { className: "x78zum5 x16exltd x1r8u7ye" }
139
- }[!!r | 0],
140
- children: [l && /* @__PURE__ */ s("span", {
141
- "aria-hidden": !0,
142
- className: "x1rg5ohu x2lah0s xl3ry0p x5g2kb4 xp4054r x12ldcl5 x87ps6o",
143
- children: t
144
- }), /* @__PURE__ */ c("span", {
145
- className: "x1lliihq x12lumcd x1doqdfy xeuugli",
146
- children: [n === void 0 ? e : n.map((e) => /* @__PURE__ */ s(h, { token: e }, e.offset)), e.length === 0 && "\n"]
147
- })]
148
- }), i !== void 0 && /* @__PURE__ */ s("span", {
149
- className: "x1lliihq x1mvvolr x1r7kqkb x1hz01jw xtqrqnz xeaf4i8",
150
- children: i.content
151
- })] }, t);
152
- })
153
- })
154
- })
155
- }),
156
- y.length > b.length && /* @__PURE__ */ s("div", {
157
- className: "xn9t2bk x1doqdfy x1hz01jw xy8obcc x1778rvt x153jb6y",
158
- children: "Additional lines omitted. Copy includes the complete source."
159
- }),
160
- t.length > m && /* @__PURE__ */ s("div", {
161
- className: "xn9t2bk x1doqdfy x1hz01jw xy8obcc x1778rvt x153jb6y",
162
- children: "Preview limited to the first 200,000 characters. Copy includes the complete source."
163
- }),
164
- t.length === 0 && /* @__PURE__ */ s("div", {
165
- className: "xn9t2bk x1doqdfy x1hz01jw xy8obcc x1778rvt x153jb6y",
166
- children: "No source text."
167
- }),
168
- v !== void 0 && v.hasFailed && /* @__PURE__ */ s("div", {
169
- className: "xn9t2bk x1doqdfy x1hz01jw xy8obcc x1778rvt x153jb6y",
170
- children: "Syntax highlighting unavailable. The source is shown unchanged."
171
- })
172
- ]
173
- });
174
- }
175
- export { g as t };
@@ -1,66 +0,0 @@
1
- import { n as e, t } from "./pierre-theme-BpESNIsV.js";
2
- import * as n from "@stylexjs/stylex";
3
- import { useCallback as r, useState as i } from "react";
4
- import { jsx as a } from "react/jsx-runtime";
5
- import { Virtualizer as o, parseDiffFromFile as s, parsePatchFiles as c, registerCustomTheme as l } from "@pierre/diffs";
6
- import { FileDiff as u, VirtualizerContext as d } from "@pierre/diffs/react";
7
- // packages/content/src/diff/pierre-diff.tsx
8
- var f = {
9
- kVQacm: "xysyzu8",
10
- $$css: !0
11
- }, p = { viewport: (e) => [
12
- f,
13
- {
14
- kskxy: e == null ? e : "x1jols5v",
15
- $$css: !0
16
- },
17
- { "--x-maxHeight": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e) }
18
- ] };
19
- l("mechane", () => Promise.resolve(t), "zed");
20
- function m(e) {
21
- return e === null ? null : {
22
- name: e.name,
23
- contents: e.code,
24
- lang: e.language ?? "text"
25
- };
26
- }
27
- function h(e) {
28
- return e.patch === void 0 ? [s(m(e.before), m(e.after), {}, !0)] : c(e.patch, { throwOnError: !0 }).flatMap((e) => e.files);
29
- }
30
- function g({ files: t, layout: s, wrap: c, annotations: l, maxHeight: f, label: m }) {
31
- let [h] = i(() => new o()), g = r((e) => {
32
- e === null ? h.cleanUp() : h.setup(e);
33
- }, [h]);
34
- return /* @__PURE__ */ a(d.Provider, {
35
- value: h,
36
- children: /* @__PURE__ */ a("div", {
37
- ref: g,
38
- role: "region",
39
- "aria-label": `${m} changes`,
40
- tabIndex: 0,
41
- ...n.props(p.viewport(f)),
42
- children: /* @__PURE__ */ a("div", { children: t.map((t) => /* @__PURE__ */ a(u, {
43
- fileDiff: t,
44
- disableWorkerPool: !0,
45
- options: {
46
- preferredHighlighter: "highlights",
47
- theme: "mechane",
48
- themeType: "system",
49
- unsafeCSS: e,
50
- diffStyle: s,
51
- overflow: c ? "wrap" : "scroll",
52
- hunkSeparators: "line-info",
53
- tokenizeMaxLength: 2e5,
54
- tokenizeMaxLineLength: 4096
55
- },
56
- lineAnnotations: l.filter((e) => e.file === t.name).map((e) => ({
57
- side: e.side === "old" ? "deletions" : "additions",
58
- lineNumber: e.line,
59
- metadata: e.content
60
- })),
61
- renderAnnotation: (e) => e.metadata
62
- }, t.name)) })
63
- })
64
- });
65
- }
66
- export { g as PierreDiff, h as prepareDiff };
@@ -1,96 +0,0 @@
1
- import { colors as e, controls as t, spacing as n, syntaxColors as r, typography as i } from "./tokens.js";
2
- // packages/content/src/pierre-theme.ts
3
- var a = {
4
- name: "Elements",
5
- appearance: "light",
6
- cssVariables: {
7
- prefix: "--elements-syntax-",
8
- defaults: {
9
- foreground: e.ink,
10
- background: e.surface,
11
- keyword: r.keyword,
12
- string: r.string,
13
- comment: r.comment,
14
- number: r.number,
15
- type: r.type,
16
- punctuation: e.muted
17
- }
18
- },
19
- style: {
20
- "editor.background": "background",
21
- "editor.foreground": "foreground",
22
- syntax: {
23
- keyword: {
24
- color: "keyword",
25
- font_weight: 600
26
- },
27
- string: "string",
28
- comment: "comment",
29
- number: "number",
30
- type: "type",
31
- function: "foreground",
32
- operator: "punctuation",
33
- punctuation: "punctuation"
34
- }
35
- }
36
- }, o = `
37
- :host {
38
- color-scheme: inherit;
39
- --diffs-font-family: ${i.monoFamily};
40
- --diffs-header-font-family: ${i.fontFamily};
41
- --diffs-font-size: ${i.captionSize};
42
- --diffs-line-height: ${i.bodyLineHeight};
43
- --diffs-bg: ${e.surface};
44
- --diffs-fg: ${e.ink};
45
- --diffs-fg-number: ${e.muted};
46
- --diffs-bg-addition: ${e.accentSoft};
47
- --diffs-bg-deletion: ${e.dangerSoft};
48
- --diffs-addition-color-override: ${e.accent};
49
- --diffs-deletion-color-override: ${e.danger};
50
- --diffs-modified-color-override: ${e.focus};
51
- --diffs-bg-context-override: ${e.surface};
52
- --diffs-bg-context-gutter-override: ${e.canvas};
53
- --diffs-bg-separator-override: ${e.canvas};
54
- --diffs-selection-background: ${e.accentSoft};
55
- font-family: ${i.monoFamily};
56
- font-size: ${i.captionSize};
57
- color: ${e.ink};
58
- background: ${e.surface};
59
- }
60
- pre { font-family: ${i.monoFamily}; font-size: ${i.captionSize}; line-height: ${i.bodyLineHeight}; }
61
- [data-line-number] { color: ${e.muted}; }
62
- [data-diffs-header] { min-height: ${t.mdHeight}; border-bottom: 1px solid ${e.line}; }
63
- `, s = `
64
- :host {
65
- color-scheme: inherit;
66
- color: ${e.ink};
67
- background: ${e.surface};
68
- font-family: ${i.fontFamily};
69
- font-size: ${i.bodySize};
70
- --trees-font-family-override: ${i.fontFamily};
71
- --trees-font-size-override: ${i.bodySize};
72
- --trees-bg-override: ${e.surface};
73
- --trees-fg-override: ${e.ink};
74
- --trees-fg-muted-override: ${e.muted};
75
- --trees-bg-muted-override: ${e.canvas};
76
- --trees-input-bg-override: ${e.surface};
77
- --trees-border-color-override: ${e.line};
78
- --trees-border-radius-override: 0px;
79
- --trees-accent-override: ${e.focus};
80
- --trees-focus-ring-color-override: ${e.focus};
81
- --trees-focus-ring-width-override: ${t.focusWidth};
82
- --trees-selected-fg-override: ${e.ink};
83
- --trees-selected-bg-override: ${e.canvas};
84
- --trees-selected-focused-border-color-override: ${e.focus};
85
- --trees-status-added-override: ${e.accent};
86
- --trees-status-deleted-override: ${e.danger};
87
- --trees-status-ignored-override: ${e.muted};
88
- --trees-status-modified-override: ${e.warning};
89
- --trees-status-renamed-override: ${e.warning};
90
- --trees-status-untracked-override: ${e.accent};
91
- }
92
- [role="treeitem"] { border-radius: 0; padding-inline: ${n.sm}; }
93
- [role="treeitem"][aria-selected="true"] { background: ${e.canvas}; color: ${e.ink}; }
94
- [role="treeitem"]:focus-visible { outline: ${t.focusWidth} solid ${e.focus}; outline-offset: -2px; }
95
- `;
96
- export { o as n, s as r, a as t };