@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.
- package/NOTICE +24 -0
- package/README.md +7 -1
- package/dist/ai.js +153 -133
- package/dist/{categorical-values-DYRiw5Qd.js → categorical-values-FYc43JCa.js} +4 -4
- package/dist/{chart-frame-RL1hCWBC.js → chart-frame-Bczk5sWj.js} +22 -14
- package/dist/{chart-input-Bm3ot1yD.js → chart-input-CbzVN76m.js} +2 -2
- package/dist/charts/cartesian.js +529 -450
- package/dist/charts/distribution.js +302 -261
- package/dist/charts/graph.js +137 -103
- package/dist/charts/hierarchy.js +7 -7
- package/dist/charts/matrix.js +187 -174
- package/dist/charts/timeline.js +119 -92
- package/dist/charts.js +1 -1
- package/dist/code-block-B7xzM3tD.js +180 -0
- package/dist/collections.js +319 -242
- package/dist/content/code.js +1 -1
- package/dist/content/diff.js +81 -63
- package/dist/content/link.js +1 -1
- package/dist/content/markdown.js +115 -96
- package/dist/content/tree.js +43 -38
- package/dist/{content-link-BrPrpBof.js → content-link-CatGOrbo.js} +6 -2
- package/dist/content.js +172 -153
- package/dist/{assets/stylex.css → elements.css} +585 -229
- package/dist/feedback.js +1 -1
- package/dist/forms/dates.js +25 -25
- package/dist/forms.js +1 -1
- package/dist/index.js +1 -1
- package/dist/layout.js +239 -192
- package/dist/navigation/commands.js +45 -42
- package/dist/{navigation-yxK3iQXo.js → navigation-D2_sGy3C.js} +2 -2
- package/dist/navigation.js +10 -10
- package/dist/overlays.js +1 -1
- package/dist/packages/ai/src/conversation.d.ts +14 -2
- package/dist/packages/ai/src/index.d.ts +1 -1
- package/dist/packages/charts/src/cartesian/bar-chart.d.ts +5 -0
- package/dist/packages/charts/src/cartesian/index.d.ts +2 -2
- package/dist/packages/charts/src/chart-frame.d.ts +3 -0
- package/dist/packages/charts/src/chart-theme.d.ts +2 -1
- package/dist/packages/charts/src/distribution/distribution-plot.d.ts +22 -2
- package/dist/packages/charts/src/timeline/waterfall.d.ts +3 -2
- package/dist/packages/collections/src/collection-scroll.d.ts +2 -1
- package/dist/packages/collections/src/index.d.ts +1 -0
- package/dist/packages/collections/src/inspector.d.ts +6 -3
- package/dist/packages/content/src/diff/pierre-diff.d.ts +2 -1
- package/dist/packages/content/src/viewer-styles.d.ts +64 -0
- package/dist/packages/core/src/agent-avatar-glyphs.d.ts +1 -1
- package/dist/packages/core/src/index.d.ts +1 -1
- package/dist/packages/core/src/surfaces.d.ts +5 -0
- package/dist/packages/feedback/src/index.d.ts +4 -1
- package/dist/packages/feedback/src/toast.d.ts +5 -27
- package/dist/packages/forms/src/field-styles.d.ts +9 -0
- package/dist/packages/forms/src/selection-styles.d.ts +18 -2
- package/dist/packages/foundations/src/overlay-styles.d.ts +3 -1
- package/dist/packages/foundations/src/popup-styles.d.ts +7 -0
- package/dist/packages/foundations/src/tokens.stylex.d.ts +9 -0
- package/dist/packages/layout/src/frame.stylex.d.ts +1 -0
- package/dist/packages/layout/src/sidebar.d.ts +3 -1
- package/dist/packages/overlays/src/alert-dialog.d.ts +5 -2
- package/dist/packages/overlays/src/dialog.d.ts +7 -3
- package/dist/pierre-diff--zsiHCCB.js +71 -0
- package/dist/pierre-theme-D9hnHv3Z.js +126 -0
- package/dist/{pierre-tree-CRk09rx7.js → pierre-tree-D47uA7lb.js} +3 -3
- package/dist/{src-Cc0Sadzr.js → src-C_heP5kL.js} +295 -221
- package/dist/src-Cs0dRc4X.js +617 -0
- package/dist/src-D05isEh_.js +1652 -0
- package/dist/src-DXsGTJgv.js +969 -0
- package/dist/tokens.js +33 -25
- package/dist/viewer-styles-CpHqp5Qv.js +70 -0
- package/package.json +2 -1
- package/packages/foundations/src/tokens.stylex.ts +55 -48
- package/styles.css +1 -1
- package/dist/code-block-B30xQKqg.js +0 -175
- package/dist/pierre-diff-CZdzgiYm.js +0 -66
- package/dist/pierre-theme-BpESNIsV.js +0 -96
- package/dist/popup-styles-CvtZDE2t.js +0 -135
- package/dist/src-CfDf8TY8.js +0 -466
- package/dist/src-DuuAmS-c.js +0 -360
- package/dist/src-elMBQ2Dh.js +0 -1087
|
@@ -15,17 +15,21 @@ export declare const selectionStyles: Readonly<{
|
|
|
15
15
|
readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
|
|
16
16
|
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
17
17
|
readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
|
|
18
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
18
19
|
readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
|
|
19
20
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
20
21
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
21
22
|
readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "left">;
|
|
22
23
|
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
23
24
|
readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
|
|
24
|
-
readonly ':hover:not([data-disabled])': stylex.StyleXClassNameFor<":hover:not([data-disabled])", {
|
|
25
|
+
readonly ':hover:not(:active, [data-disabled])': stylex.StyleXClassNameFor<":hover:not(:active, [data-disabled])", {
|
|
25
26
|
readonly backgroundColor: {
|
|
26
27
|
readonly [conditions.hoverPointer]: stylex.StyleXVar<string>;
|
|
27
28
|
};
|
|
28
29
|
}>;
|
|
30
|
+
readonly ':active:not([data-disabled])': stylex.StyleXClassNameFor<":active:not([data-disabled])", {
|
|
31
|
+
readonly backgroundColor: stylex.StyleXVar<string>;
|
|
32
|
+
}>;
|
|
29
33
|
readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
|
|
30
34
|
readonly opacity: stylex.StyleXVar<string>;
|
|
31
35
|
readonly cursor: "default";
|
|
@@ -67,6 +71,8 @@ export declare const selectionStyles: Readonly<{
|
|
|
67
71
|
readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "calc(100vw - 16px)">;
|
|
68
72
|
}>;
|
|
69
73
|
readonly popup: Readonly<{
|
|
74
|
+
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
75
|
+
readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
|
|
70
76
|
readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
|
|
71
77
|
readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
|
|
72
78
|
readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
|
|
@@ -75,6 +81,9 @@ export declare const selectionStyles: Readonly<{
|
|
|
75
81
|
readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
|
|
76
82
|
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
77
83
|
readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
|
|
84
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
85
|
+
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
86
|
+
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
78
87
|
readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
|
|
79
88
|
readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
|
|
80
89
|
readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "var(--available-height)">;
|
|
@@ -83,22 +92,29 @@ export declare const selectionStyles: Readonly<{
|
|
|
83
92
|
}>;
|
|
84
93
|
readonly option: Readonly<{
|
|
85
94
|
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
95
|
+
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
86
96
|
readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
|
|
87
97
|
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
88
98
|
readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
|
|
89
99
|
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
100
|
+
readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
|
|
90
101
|
readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
|
|
91
102
|
readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
|
|
103
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
92
104
|
readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
|
|
93
105
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
94
106
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
107
|
+
readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
|
|
95
108
|
readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
|
|
96
109
|
readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0>;
|
|
97
110
|
readonly ':is([data-highlighted])': stylex.StyleXClassNameFor<":is([data-highlighted])", {
|
|
98
111
|
readonly backgroundColor: stylex.StyleXVar<string>;
|
|
99
112
|
}>;
|
|
113
|
+
readonly ':active:not([data-disabled])': stylex.StyleXClassNameFor<":active:not([data-disabled])", {
|
|
114
|
+
readonly backgroundColor: stylex.StyleXVar<string>;
|
|
115
|
+
}>;
|
|
100
116
|
readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
|
|
101
|
-
readonly
|
|
117
|
+
readonly opacity: stylex.StyleXVar<string>;
|
|
102
118
|
readonly cursor: "default";
|
|
103
119
|
}>;
|
|
104
120
|
}>;
|
|
@@ -25,8 +25,9 @@ export declare const overlayStyles: Readonly<{
|
|
|
25
25
|
readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
|
|
26
26
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
27
27
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
28
|
-
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight",
|
|
28
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
29
29
|
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
30
|
+
readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
|
|
30
31
|
}>;
|
|
31
32
|
readonly description: Readonly<{
|
|
32
33
|
readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
|
|
@@ -34,6 +35,7 @@ export declare const overlayStyles: Readonly<{
|
|
|
34
35
|
readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
|
|
35
36
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
36
37
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
38
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
37
39
|
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
38
40
|
readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
|
|
39
41
|
}>;
|
|
@@ -21,6 +21,7 @@ export declare const popupStyles: Readonly<{
|
|
|
21
21
|
readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
|
|
22
22
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
23
23
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
24
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
24
25
|
readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0>;
|
|
25
26
|
}>;
|
|
26
27
|
readonly content: Readonly<{
|
|
@@ -37,6 +38,8 @@ export declare const popupStyles: Readonly<{
|
|
|
37
38
|
readonly display: stylex.StyleXClassNameFor<"display", "flex">;
|
|
38
39
|
readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
|
|
39
40
|
readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
|
|
41
|
+
readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
|
|
42
|
+
readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
|
|
40
43
|
readonly gap: stylex.StyleXClassNameFor<"gap", string>;
|
|
41
44
|
readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
|
|
42
45
|
readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
|
|
@@ -49,6 +52,9 @@ export declare const popupStyles: Readonly<{
|
|
|
49
52
|
readonly ':is([data-highlighted])': stylex.StyleXClassNameFor<":is([data-highlighted])", {
|
|
50
53
|
readonly backgroundColor: stylex.StyleXVar<string>;
|
|
51
54
|
}>;
|
|
55
|
+
readonly ':active:not([data-disabled])': stylex.StyleXClassNameFor<":active:not([data-disabled])", {
|
|
56
|
+
readonly backgroundColor: stylex.StyleXVar<string>;
|
|
57
|
+
}>;
|
|
52
58
|
readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
|
|
53
59
|
readonly opacity: stylex.StyleXVar<string>;
|
|
54
60
|
readonly cursor: "default";
|
|
@@ -66,6 +72,7 @@ export declare const popupStyles: Readonly<{
|
|
|
66
72
|
readonly color: stylex.StyleXClassNameFor<"color", string>;
|
|
67
73
|
readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
|
|
68
74
|
readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
|
|
75
|
+
readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
|
|
69
76
|
}>;
|
|
70
77
|
readonly separator: Readonly<{
|
|
71
78
|
readonly height: stylex.StyleXClassNameFor<"height", 1>;
|
|
@@ -137,9 +137,14 @@ export declare const spacing: stylex.VarGroup<Readonly<{
|
|
|
137
137
|
export declare const typography: stylex.VarGroup<Readonly<{
|
|
138
138
|
fontFamily: string;
|
|
139
139
|
monoFamily: string;
|
|
140
|
+
regularWeight: string;
|
|
141
|
+
mediumWeight: string;
|
|
142
|
+
strongWeight: string;
|
|
143
|
+
boldWeight: string;
|
|
140
144
|
bodySize: string;
|
|
141
145
|
bodyLineHeight: string;
|
|
142
146
|
multilineLineHeight: string;
|
|
147
|
+
proseLineHeight: string;
|
|
143
148
|
captionSize: string;
|
|
144
149
|
captionLineHeight: string;
|
|
145
150
|
inputSize: string;
|
|
@@ -186,6 +191,10 @@ export declare const layers: {
|
|
|
186
191
|
tooltip: string;
|
|
187
192
|
skipLink: string;
|
|
188
193
|
};
|
|
194
|
+
export declare const tableGeometry: {
|
|
195
|
+
rowHeight: number;
|
|
196
|
+
headerHeight: number;
|
|
197
|
+
};
|
|
189
198
|
export declare const conditions: {
|
|
190
199
|
coarsePointer: string;
|
|
191
200
|
hoverPointer: string;
|
|
@@ -33,8 +33,10 @@ type SidebarLabelProps = {
|
|
|
33
33
|
readonly children: ReactNode;
|
|
34
34
|
readonly grow?: boolean;
|
|
35
35
|
};
|
|
36
|
+
type SidebarFooterLayout = 'inline' | 'navigation';
|
|
36
37
|
type SidebarFooterProps = {
|
|
37
38
|
readonly children: ReactNode;
|
|
39
|
+
readonly layout?: SidebarFooterLayout;
|
|
38
40
|
};
|
|
39
41
|
export declare function Sidebar({ header, footer, close, children }: SidebarProps): ReactNode;
|
|
40
42
|
export declare function SidebarClose(): ReactNode;
|
|
@@ -46,6 +48,6 @@ export declare function NavigationSection({ children, label, }: {
|
|
|
46
48
|
export declare function NavigationItem({ children, icon, selected, onClick, ...props }: NavigationItemProps): ReactNode;
|
|
47
49
|
export declare function NavigationLink({ children, icon, selected, onClick, className, style, ...props }: NavigationLinkProps): ReactNode;
|
|
48
50
|
export declare function SidebarLabel({ children, grow }: SidebarLabelProps): ReactNode;
|
|
49
|
-
export declare function SidebarFooter({ children }: SidebarFooterProps): ReactNode;
|
|
51
|
+
export declare function SidebarFooter({ children, layout }: SidebarFooterProps): ReactNode;
|
|
50
52
|
export declare function SidebarToggle(): ReactNode;
|
|
51
53
|
export {};
|
|
@@ -7,9 +7,12 @@ export declare const AlertDialog: {
|
|
|
7
7
|
Root: typeof AlertDialogRoot;
|
|
8
8
|
Trigger: BaseAlertDialog.Trigger;
|
|
9
9
|
Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
|
-
Backdrop: ({ className, style, ...props }: Omit<import("@base-ui/react").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>
|
|
11
|
-
|
|
10
|
+
Backdrop: ({ className, style, motion, ...props }: Omit<import("@base-ui/react").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
|
|
11
|
+
readonly motion?: "none" | "standard";
|
|
12
|
+
}) => ReactNode;
|
|
13
|
+
Popup: ({ className, style, xstyle, motion, ...props }: Omit<import("@base-ui/react").DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
|
|
12
14
|
readonly xstyle?: import("../../foundations/src/style-composition.ts").PlacementStyle;
|
|
15
|
+
readonly motion?: "none" | "standard";
|
|
13
16
|
}) => ReactNode;
|
|
14
17
|
Title: ({ className, style, ...props }: Omit<import("@base-ui/react").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>) => ReactNode;
|
|
15
18
|
Description: ({ className, style, ...props }: Omit<import("@base-ui/react").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>) => ReactNode;
|
|
@@ -2,16 +2,20 @@ import { Dialog as BaseDialog } from '@base-ui/react/dialog';
|
|
|
2
2
|
import type { ComponentProps, ReactNode } from 'react';
|
|
3
3
|
import type { OpenStateProperties } from '../../foundations/src/control-state.ts';
|
|
4
4
|
import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
|
|
5
|
+
type DialogMotion = 'standard' | 'none';
|
|
5
6
|
type DialogRootProps<Payload> = Omit<BaseDialog.Root.Props<Payload>, 'open' | 'defaultOpen' | 'onOpenChange'> & OpenStateProperties<NonNullable<BaseDialog.Root.Props<Payload>['onOpenChange']>>;
|
|
6
|
-
type DialogBackdropProps = ComponentProps<typeof BaseDialog.Backdrop
|
|
7
|
+
type DialogBackdropProps = ComponentProps<typeof BaseDialog.Backdrop> & {
|
|
8
|
+
readonly motion?: DialogMotion;
|
|
9
|
+
};
|
|
7
10
|
type DialogPopupProps = ComponentProps<typeof BaseDialog.Popup> & {
|
|
8
11
|
readonly xstyle?: PlacementStyle;
|
|
12
|
+
readonly motion?: DialogMotion;
|
|
9
13
|
};
|
|
10
14
|
type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;
|
|
11
15
|
type DialogDescriptionProps = ComponentProps<typeof BaseDialog.Description>;
|
|
12
16
|
declare function DialogRoot<Payload = unknown>(props: DialogRootProps<Payload>): ReactNode;
|
|
13
|
-
declare function DialogBackdrop({ className, style, ...props }: DialogBackdropProps): ReactNode;
|
|
14
|
-
declare function DialogPopup({ className, style, xstyle, ...props }: DialogPopupProps): ReactNode;
|
|
17
|
+
declare function DialogBackdrop({ className, style, motion, ...props }: DialogBackdropProps): ReactNode;
|
|
18
|
+
declare function DialogPopup({ className, style, xstyle, motion, ...props }: DialogPopupProps): ReactNode;
|
|
15
19
|
declare function DialogTitle({ className, style, ...props }: DialogTitleProps): ReactNode;
|
|
16
20
|
declare function DialogDescription({ className, style, ...props }: DialogDescriptionProps): ReactNode;
|
|
17
21
|
export declare const Dialog: {
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { n as e, t } from "./pierre-theme-D9hnHv3Z.js";
|
|
2
|
+
import { t as n } from "./viewer-styles-CpHqp5Qv.js";
|
|
3
|
+
import * as r from "@stylexjs/stylex";
|
|
4
|
+
import { useCallback as i, useState as a } from "react";
|
|
5
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
6
|
+
import { Virtualizer as s, parseDiffFromFile as c, parsePatchFiles as l, registerCustomTheme as u } from "@pierre/diffs";
|
|
7
|
+
import { FileDiff as d, VirtualizerContext as f } from "@pierre/diffs/react";
|
|
8
|
+
// packages/content/src/diff/pierre-diff.tsx
|
|
9
|
+
var p = {
|
|
10
|
+
kVQacm: "xysyzu8",
|
|
11
|
+
$$css: !0
|
|
12
|
+
}, m = { viewport: (e) => [
|
|
13
|
+
p,
|
|
14
|
+
{
|
|
15
|
+
kskxy: e == null ? e : "x1jols5v",
|
|
16
|
+
$$css: !0
|
|
17
|
+
},
|
|
18
|
+
{ "--x-maxHeight": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e) }
|
|
19
|
+
] };
|
|
20
|
+
u("mechane", () => Promise.resolve(t), "zed");
|
|
21
|
+
function h(e) {
|
|
22
|
+
return e === null ? null : {
|
|
23
|
+
name: e.name,
|
|
24
|
+
contents: e.code,
|
|
25
|
+
lang: e.language ?? "text"
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
function g(e) {
|
|
29
|
+
return e.patch === void 0 ? [c(h(e.before), h(e.after), {}, !0)] : l(e.patch, { throwOnError: !0 }).flatMap((e) => e.files);
|
|
30
|
+
}
|
|
31
|
+
function _({ files: t, layout: c, wrap: l, showUnchanged: u, annotations: p, maxHeight: h, label: g }) {
|
|
32
|
+
let [_] = a(() => new s()), v = i((e) => {
|
|
33
|
+
e === null ? _.cleanUp() : _.setup(e);
|
|
34
|
+
}, [_]);
|
|
35
|
+
return /* @__PURE__ */ o(f.Provider, {
|
|
36
|
+
value: _,
|
|
37
|
+
children: /* @__PURE__ */ o("div", {
|
|
38
|
+
ref: v,
|
|
39
|
+
role: "region",
|
|
40
|
+
"aria-label": `${g} changes`,
|
|
41
|
+
tabIndex: 0,
|
|
42
|
+
...r.props(n.scrollRegion, m.viewport(h)),
|
|
43
|
+
children: /* @__PURE__ */ o("div", { children: t.map((t) => /* @__PURE__ */ o(d, {
|
|
44
|
+
fileDiff: t,
|
|
45
|
+
disableWorkerPool: !0,
|
|
46
|
+
options: {
|
|
47
|
+
preferredHighlighter: "highlights",
|
|
48
|
+
theme: "mechane",
|
|
49
|
+
themeType: "system",
|
|
50
|
+
unsafeCSS: e,
|
|
51
|
+
diffStyle: c,
|
|
52
|
+
overflow: l ? "wrap" : "scroll",
|
|
53
|
+
hunkSeparators: "metadata",
|
|
54
|
+
expandUnchanged: u,
|
|
55
|
+
tokenizeMaxLength: 2e5,
|
|
56
|
+
tokenizeMaxLineLength: 4096
|
|
57
|
+
},
|
|
58
|
+
lineAnnotations: p.filter((e) => e.file === t.name).map((e) => ({
|
|
59
|
+
side: e.side === "old" ? "deletions" : "additions",
|
|
60
|
+
lineNumber: e.line,
|
|
61
|
+
metadata: e.content
|
|
62
|
+
})),
|
|
63
|
+
renderAnnotation: (e) => /* @__PURE__ */ o("div", {
|
|
64
|
+
className: "x1mvvolr xeuugli x1hz01jw xtqrqnz x1778rvt xj0a0fe",
|
|
65
|
+
children: e.metadata
|
|
66
|
+
})
|
|
67
|
+
}, t.name)) })
|
|
68
|
+
})
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
export { _ as PierreDiff, g as prepareDiff };
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { colors as e, conditions as t, controls as n, spacing as r, syntaxColors as i, typography as a } from "./tokens.js";
|
|
2
|
+
// packages/content/src/pierre-theme.ts
|
|
3
|
+
var o = {
|
|
4
|
+
name: "Elements",
|
|
5
|
+
appearance: "light",
|
|
6
|
+
cssVariables: {
|
|
7
|
+
prefix: "--elements-syntax-",
|
|
8
|
+
defaults: {
|
|
9
|
+
foreground: e.ink,
|
|
10
|
+
background: e.surface,
|
|
11
|
+
keyword: i.keyword,
|
|
12
|
+
string: i.string,
|
|
13
|
+
comment: i.comment,
|
|
14
|
+
number: i.number,
|
|
15
|
+
type: i.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
|
+
}, s = `
|
|
37
|
+
:host {
|
|
38
|
+
color-scheme: inherit;
|
|
39
|
+
--diffs-font-family: ${a.monoFamily};
|
|
40
|
+
--diffs-header-font-family: ${a.fontFamily};
|
|
41
|
+
--diffs-font-size: ${a.captionSize};
|
|
42
|
+
--diffs-line-height: ${a.bodyLineHeight};
|
|
43
|
+
--diffs-gap-inline: ${r.sm};
|
|
44
|
+
--diffs-gap-block: ${r.sm};
|
|
45
|
+
--diffs-bg: ${e.surface};
|
|
46
|
+
--diffs-fg: ${e.ink};
|
|
47
|
+
--diffs-fg-number: ${e.muted};
|
|
48
|
+
--diffs-bg-addition: ${e.accentSoft};
|
|
49
|
+
--diffs-bg-deletion: ${e.dangerSoft};
|
|
50
|
+
--diffs-addition-color-override: ${e.accent};
|
|
51
|
+
--diffs-deletion-color-override: ${e.danger};
|
|
52
|
+
--diffs-modified-color-override: ${e.focus};
|
|
53
|
+
--diffs-bg-context-override: ${e.surface};
|
|
54
|
+
--diffs-bg-context-gutter-override: ${e.canvas};
|
|
55
|
+
--diffs-bg-separator-override: ${e.canvas};
|
|
56
|
+
--diffs-selection-background: ${e.accentSoft};
|
|
57
|
+
font-family: ${a.monoFamily};
|
|
58
|
+
font-size: ${a.captionSize};
|
|
59
|
+
color: ${e.ink};
|
|
60
|
+
background: ${e.surface};
|
|
61
|
+
}
|
|
62
|
+
pre { font-family: ${a.monoFamily}; font-size: ${a.captionSize}; line-height: ${a.bodyLineHeight}; }
|
|
63
|
+
[data-line-number] { color: ${e.muted}; }
|
|
64
|
+
[data-diffs-header] {
|
|
65
|
+
min-height: ${n.mdHeight};
|
|
66
|
+
padding-block: ${r.sm};
|
|
67
|
+
padding-inline: ${r.md};
|
|
68
|
+
border-bottom: 1px solid ${e.line};
|
|
69
|
+
font-size: ${a.captionSize};
|
|
70
|
+
line-height: ${a.captionLineHeight};
|
|
71
|
+
font-weight: ${a.mediumWeight};
|
|
72
|
+
flex-wrap: wrap;
|
|
73
|
+
}
|
|
74
|
+
[data-header-content] { flex: 1 1 12ch; }
|
|
75
|
+
`, c = `
|
|
76
|
+
:host {
|
|
77
|
+
color-scheme: inherit;
|
|
78
|
+
color: ${e.ink};
|
|
79
|
+
background: ${e.surface};
|
|
80
|
+
font-family: ${a.fontFamily};
|
|
81
|
+
font-size: ${a.bodySize};
|
|
82
|
+
--trees-font-family-override: ${a.fontFamily};
|
|
83
|
+
--trees-font-size-override: ${a.bodySize};
|
|
84
|
+
--trees-font-weight-regular-override: ${a.regularWeight};
|
|
85
|
+
--trees-font-weight-semibold-override: ${a.strongWeight};
|
|
86
|
+
--trees-search-font-weight-override: ${a.strongWeight};
|
|
87
|
+
--trees-padding-inline-override: ${r.md};
|
|
88
|
+
--trees-item-padding-x-override: ${r.sm};
|
|
89
|
+
--trees-item-row-gap-override: ${n.gap};
|
|
90
|
+
--trees-bg-override: ${e.surface};
|
|
91
|
+
--trees-fg-override: ${e.ink};
|
|
92
|
+
--trees-fg-muted-override: ${e.muted};
|
|
93
|
+
--trees-bg-muted-override: ${e.canvas};
|
|
94
|
+
--trees-input-bg-override: ${e.surface};
|
|
95
|
+
--trees-border-color-override: ${e.line};
|
|
96
|
+
--trees-border-radius-override: 0px;
|
|
97
|
+
--trees-accent-override: ${e.focus};
|
|
98
|
+
--trees-focus-ring-color-override: ${e.focus};
|
|
99
|
+
--trees-focus-ring-width-override: ${n.focusWidth};
|
|
100
|
+
--trees-focus-ring-offset-override: -2px;
|
|
101
|
+
--trees-selected-fg-override: ${e.ink};
|
|
102
|
+
--trees-selected-bg-override: ${e.canvas};
|
|
103
|
+
--trees-selected-focused-border-color-override: ${e.focus};
|
|
104
|
+
--trees-status-added-override: ${e.accent};
|
|
105
|
+
--trees-status-deleted-override: ${e.danger};
|
|
106
|
+
--trees-status-ignored-override: ${e.muted};
|
|
107
|
+
--trees-status-modified-override: ${e.warning};
|
|
108
|
+
--trees-status-renamed-override: ${e.warning};
|
|
109
|
+
--trees-status-untracked-override: ${e.accent};
|
|
110
|
+
}
|
|
111
|
+
[data-type="item"]:hover:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
|
|
112
|
+
background-color: ${e.surface};
|
|
113
|
+
--truncate-marker-background-overlay-color: transparent;
|
|
114
|
+
}
|
|
115
|
+
${t.hoverPointer} {
|
|
116
|
+
[data-type="item"]:hover:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
|
|
117
|
+
background-color: ${e.canvas};
|
|
118
|
+
--truncate-marker-background-overlay-color: ${e.canvas};
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
[data-type="item"]:active:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
|
|
122
|
+
background-color: ${e.canvas};
|
|
123
|
+
--truncate-marker-background-overlay-color: ${e.canvas};
|
|
124
|
+
}
|
|
125
|
+
`;
|
|
126
|
+
export { s as n, c as r, o as t };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { c as e } from "./src-
|
|
2
|
-
import { l as t } from "./src-
|
|
1
|
+
import { c as e } from "./src-D05isEh_.js";
|
|
2
|
+
import { l as t } from "./src-C_heP5kL.js";
|
|
3
3
|
import { conditions as n } from "./tokens.js";
|
|
4
|
-
import { r } from "./pierre-theme-
|
|
4
|
+
import { r } from "./pierre-theme-D9hnHv3Z.js";
|
|
5
5
|
import * as i from "@stylexjs/stylex";
|
|
6
6
|
import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
|
|
7
7
|
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|