@mechane-ai/elements 0.9.0 → 0.10.0

package/dist/packages/foundations/src/popup-styles.d.ts

@@ -21,6 +21,7 @@ export declare const popupStyles: Readonly<{
         readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0>;
     }>;
     readonly content: Readonly<{
@@ -37,6 +38,8 @@ export declare const popupStyles: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
         readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
@@ -49,6 +52,9 @@ export declare const popupStyles: Readonly<{
         readonly ':is([data-highlighted])': stylex.StyleXClassNameFor<":is([data-highlighted])", {
             readonly backgroundColor: stylex.StyleXVar<string>;
         }>;
+        readonly ':active:not([data-disabled])': stylex.StyleXClassNameFor<":active:not([data-disabled])", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
         readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
             readonly opacity: stylex.StyleXVar<string>;
             readonly cursor: "default";
@@ -66,6 +72,7 @@ export declare const popupStyles: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
     }>;
     readonly separator: Readonly<{
         readonly height: stylex.StyleXClassNameFor<"height", 1>;

package/dist/packages/foundations/src/tokens.stylex.d.ts

@@ -137,9 +137,14 @@ export declare const spacing: stylex.VarGroup<Readonly<{
 export declare const typography: stylex.VarGroup<Readonly<{
     fontFamily: string;
     monoFamily: string;
+    regularWeight: string;
+    mediumWeight: string;
+    strongWeight: string;
+    boldWeight: string;
     bodySize: string;
     bodyLineHeight: string;
     multilineLineHeight: string;
+    proseLineHeight: string;
     captionSize: string;
     captionLineHeight: string;
     inputSize: string;
@@ -186,6 +191,10 @@ export declare const layers: {
     tooltip: string;
     skipLink: string;
 };
+export declare const tableGeometry: {
+    rowHeight: number;
+    headerHeight: number;
+};
 export declare const conditions: {
     coarsePointer: string;
     hoverPointer: string;

package/dist/packages/layout/src/frame.stylex.d.ts

@@ -22,4 +22,5 @@ export declare const frameConditions: {
     sidebarCoarse: string;
     detailMobile: string;
     toolbarCompact: string;
+    workbenchCompact: string;
 };

package/dist/packages/layout/src/sidebar.d.ts

@@ -33,8 +33,10 @@ type SidebarLabelProps = {
     readonly children: ReactNode;
     readonly grow?: boolean;
 };
+type SidebarFooterLayout = 'inline' | 'navigation';
 type SidebarFooterProps = {
     readonly children: ReactNode;
+    readonly layout?: SidebarFooterLayout;
 };
 export declare function Sidebar({ header, footer, close, children }: SidebarProps): ReactNode;
 export declare function SidebarClose(): ReactNode;
@@ -46,6 +48,6 @@ export declare function NavigationSection({ children, label, }: {
 export declare function NavigationItem({ children, icon, selected, onClick, ...props }: NavigationItemProps): ReactNode;
 export declare function NavigationLink({ children, icon, selected, onClick, className, style, ...props }: NavigationLinkProps): ReactNode;
 export declare function SidebarLabel({ children, grow }: SidebarLabelProps): ReactNode;
-export declare function SidebarFooter({ children }: SidebarFooterProps): ReactNode;
+export declare function SidebarFooter({ children, layout }: SidebarFooterProps): ReactNode;
 export declare function SidebarToggle(): ReactNode;
 export {};

package/dist/packages/overlays/src/alert-dialog.d.ts

@@ -7,9 +7,12 @@ export declare const AlertDialog: {
     Root: typeof AlertDialogRoot;
     Trigger: BaseAlertDialog.Trigger;
     Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Backdrop: ({ className, style, ...props }: Omit<import("@base-ui/react").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>) => ReactNode;
-    Popup: ({ className, style, xstyle, ...props }: Omit<import("@base-ui/react").DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    Backdrop: ({ className, style, motion, ...props }: Omit<import("@base-ui/react").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+        readonly motion?: "none" | "standard";
+    }) => ReactNode;
+    Popup: ({ className, style, xstyle, motion, ...props }: Omit<import("@base-ui/react").DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
         readonly xstyle?: import("../../foundations/src/style-composition.ts").PlacementStyle;
+        readonly motion?: "none" | "standard";
     }) => ReactNode;
     Title: ({ className, style, ...props }: Omit<import("@base-ui/react").DialogTitleProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>) => ReactNode;
     Description: ({ className, style, ...props }: Omit<import("@base-ui/react").DialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>) => ReactNode;

package/dist/packages/overlays/src/dialog.d.ts

@@ -2,16 +2,20 @@ import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import type { ComponentProps, ReactNode } from 'react';
 import type { OpenStateProperties } from '../../foundations/src/control-state.ts';
 import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
+type DialogMotion = 'standard' | 'none';
 type DialogRootProps<Payload> = Omit<BaseDialog.Root.Props<Payload>, 'open' | 'defaultOpen' | 'onOpenChange'> & OpenStateProperties<NonNullable<BaseDialog.Root.Props<Payload>['onOpenChange']>>;
-type DialogBackdropProps = ComponentProps<typeof BaseDialog.Backdrop>;
+type DialogBackdropProps = ComponentProps<typeof BaseDialog.Backdrop> & {
+    readonly motion?: DialogMotion;
+};
 type DialogPopupProps = ComponentProps<typeof BaseDialog.Popup> & {
     readonly xstyle?: PlacementStyle;
+    readonly motion?: DialogMotion;
 };
 type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;
 type DialogDescriptionProps = ComponentProps<typeof BaseDialog.Description>;
 declare function DialogRoot<Payload = unknown>(props: DialogRootProps<Payload>): ReactNode;
-declare function DialogBackdrop({ className, style, ...props }: DialogBackdropProps): ReactNode;
-declare function DialogPopup({ className, style, xstyle, ...props }: DialogPopupProps): ReactNode;
+declare function DialogBackdrop({ className, style, motion, ...props }: DialogBackdropProps): ReactNode;
+declare function DialogPopup({ className, style, xstyle, motion, ...props }: DialogPopupProps): ReactNode;
 declare function DialogTitle({ className, style, ...props }: DialogTitleProps): ReactNode;
 declare function DialogDescription({ className, style, ...props }: DialogDescriptionProps): ReactNode;
 export declare const Dialog: {

package/dist/pierre-diff--zsiHCCB.js

@@ -0,0 +1,71 @@
+import { n as e, t } from "./pierre-theme-D9hnHv3Z.js";
+import { t as n } from "./viewer-styles-CpHqp5Qv.js";
+import * as r from "@stylexjs/stylex";
+import { useCallback as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { Virtualizer as s, parseDiffFromFile as c, parsePatchFiles as l, registerCustomTheme as u } from "@pierre/diffs";
+import { FileDiff as d, VirtualizerContext as f } from "@pierre/diffs/react";
+// packages/content/src/diff/pierre-diff.tsx
+var p = {
+	kVQacm: "xysyzu8",
+	$$css: !0
+}, m = { viewport: (e) => [
+	p,
+	{
+		kskxy: e == null ? e : "x1jols5v",
+		$$css: !0
+	},
+	{ "--x-maxHeight": ((e) => typeof e == "number" ? e + "px" : e ?? void 0)(e) }
+] };
+u("mechane", () => Promise.resolve(t), "zed");
+function h(e) {
+	return e === null ? null : {
+		name: e.name,
+		contents: e.code,
+		lang: e.language ?? "text"
+	};
+}
+function g(e) {
+	return e.patch === void 0 ? [c(h(e.before), h(e.after), {}, !0)] : l(e.patch, { throwOnError: !0 }).flatMap((e) => e.files);
+}
+function _({ files: t, layout: c, wrap: l, showUnchanged: u, annotations: p, maxHeight: h, label: g }) {
+	let [_] = a(() => new s()), v = i((e) => {
+		e === null ? _.cleanUp() : _.setup(e);
+	}, [_]);
+	return /* @__PURE__ */ o(f.Provider, {
+		value: _,
+		children: /* @__PURE__ */ o("div", {
+			ref: v,
+			role: "region",
+			"aria-label": `${g} changes`,
+			tabIndex: 0,
+			...r.props(n.scrollRegion, m.viewport(h)),
+			children: /* @__PURE__ */ o("div", { children: t.map((t) => /* @__PURE__ */ o(d, {
+				fileDiff: t,
+				disableWorkerPool: !0,
+				options: {
+					preferredHighlighter: "highlights",
+					theme: "mechane",
+					themeType: "system",
+					unsafeCSS: e,
+					diffStyle: c,
+					overflow: l ? "wrap" : "scroll",
+					hunkSeparators: "metadata",
+					expandUnchanged: u,
+					tokenizeMaxLength: 2e5,
+					tokenizeMaxLineLength: 4096
+				},
+				lineAnnotations: p.filter((e) => e.file === t.name).map((e) => ({
+					side: e.side === "old" ? "deletions" : "additions",
+					lineNumber: e.line,
+					metadata: e.content
+				})),
+				renderAnnotation: (e) => /* @__PURE__ */ o("div", {
+					className: "x1mvvolr xeuugli x1hz01jw xtqrqnz x1778rvt xj0a0fe",
+					children: e.metadata
+				})
+			}, t.name)) })
+		})
+	});
+}
+export { _ as PierreDiff, g as prepareDiff };

package/dist/pierre-theme-D9hnHv3Z.js

@@ -0,0 +1,126 @@
+import { colors as e, conditions as t, controls as n, spacing as r, syntaxColors as i, typography as a } from "./tokens.js";
+// packages/content/src/pierre-theme.ts
+var o = {
+	name: "Elements",
+	appearance: "light",
+	cssVariables: {
+		prefix: "--elements-syntax-",
+		defaults: {
+			foreground: e.ink,
+			background: e.surface,
+			keyword: i.keyword,
+			string: i.string,
+			comment: i.comment,
+			number: i.number,
+			type: i.type,
+			punctuation: e.muted
+		}
+	},
+	style: {
+		"editor.background": "background",
+		"editor.foreground": "foreground",
+		syntax: {
+			keyword: {
+				color: "keyword",
+				font_weight: 600
+			},
+			string: "string",
+			comment: "comment",
+			number: "number",
+			type: "type",
+			function: "foreground",
+			operator: "punctuation",
+			punctuation: "punctuation"
+		}
+	}
+}, s = `
+:host {
+  color-scheme: inherit;
+  --diffs-font-family: ${a.monoFamily};
+  --diffs-header-font-family: ${a.fontFamily};
+  --diffs-font-size: ${a.captionSize};
+  --diffs-line-height: ${a.bodyLineHeight};
+  --diffs-gap-inline: ${r.sm};
+  --diffs-gap-block: ${r.sm};
+  --diffs-bg: ${e.surface};
+  --diffs-fg: ${e.ink};
+  --diffs-fg-number: ${e.muted};
+  --diffs-bg-addition: ${e.accentSoft};
+  --diffs-bg-deletion: ${e.dangerSoft};
+  --diffs-addition-color-override: ${e.accent};
+  --diffs-deletion-color-override: ${e.danger};
+  --diffs-modified-color-override: ${e.focus};
+  --diffs-bg-context-override: ${e.surface};
+  --diffs-bg-context-gutter-override: ${e.canvas};
+  --diffs-bg-separator-override: ${e.canvas};
+  --diffs-selection-background: ${e.accentSoft};
+  font-family: ${a.monoFamily};
+  font-size: ${a.captionSize};
+  color: ${e.ink};
+  background: ${e.surface};
+}
+pre { font-family: ${a.monoFamily}; font-size: ${a.captionSize}; line-height: ${a.bodyLineHeight}; }
+[data-line-number] { color: ${e.muted}; }
+[data-diffs-header] {
+  min-height: ${n.mdHeight};
+  padding-block: ${r.sm};
+  padding-inline: ${r.md};
+  border-bottom: 1px solid ${e.line};
+  font-size: ${a.captionSize};
+  line-height: ${a.captionLineHeight};
+  font-weight: ${a.mediumWeight};
+  flex-wrap: wrap;
+}
+[data-header-content] { flex: 1 1 12ch; }
+`, c = `
+:host {
+  color-scheme: inherit;
+  color: ${e.ink};
+  background: ${e.surface};
+  font-family: ${a.fontFamily};
+  font-size: ${a.bodySize};
+  --trees-font-family-override: ${a.fontFamily};
+  --trees-font-size-override: ${a.bodySize};
+  --trees-font-weight-regular-override: ${a.regularWeight};
+  --trees-font-weight-semibold-override: ${a.strongWeight};
+  --trees-search-font-weight-override: ${a.strongWeight};
+  --trees-padding-inline-override: ${r.md};
+  --trees-item-padding-x-override: ${r.sm};
+  --trees-item-row-gap-override: ${n.gap};
+  --trees-bg-override: ${e.surface};
+  --trees-fg-override: ${e.ink};
+  --trees-fg-muted-override: ${e.muted};
+  --trees-bg-muted-override: ${e.canvas};
+  --trees-input-bg-override: ${e.surface};
+  --trees-border-color-override: ${e.line};
+  --trees-border-radius-override: 0px;
+  --trees-accent-override: ${e.focus};
+  --trees-focus-ring-color-override: ${e.focus};
+  --trees-focus-ring-width-override: ${n.focusWidth};
+  --trees-focus-ring-offset-override: -2px;
+  --trees-selected-fg-override: ${e.ink};
+  --trees-selected-bg-override: ${e.canvas};
+  --trees-selected-focused-border-color-override: ${e.focus};
+  --trees-status-added-override: ${e.accent};
+  --trees-status-deleted-override: ${e.danger};
+  --trees-status-ignored-override: ${e.muted};
+  --trees-status-modified-override: ${e.warning};
+  --trees-status-renamed-override: ${e.warning};
+  --trees-status-untracked-override: ${e.accent};
+}
+[data-type="item"]:hover:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
+  background-color: ${e.surface};
+  --truncate-marker-background-overlay-color: transparent;
+}
+${t.hoverPointer} {
+  [data-type="item"]:hover:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
+    background-color: ${e.canvas};
+    --truncate-marker-background-overlay-color: ${e.canvas};
+  }
+}
+[data-type="item"]:active:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
+  background-color: ${e.canvas};
+  --truncate-marker-background-overlay-color: ${e.canvas};
+}
+`;
+export { s as n, c as r, o as t };

package/dist/{pierre-tree-CRk09rx7.js → pierre-tree-BFxEuxwb.js}

@@ -1,7 +1,7 @@
-import { c as e } from "./src-elMBQ2Dh.js";
-import { l as t } from "./src-Cc0Sadzr.js";
+import { c as e } from "./src-sU9b0oZW.js";
+import { l as t } from "./src-Be7NLG8c.js";
 import { conditions as n } from "./tokens.js";
-import { r } from "./pierre-theme-BpESNIsV.js";
+import { r } from "./pierre-theme-D9hnHv3Z.js";
 import * as i from "@stylexjs/stylex";
 import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";