@mechane-ai/elements 0.0.0-stage → 0.4.1

package/dist/navigation.js

@@ -0,0 +1,58 @@
+import { n as e, t } from "./navigation-yxK3iQXo.js";
+import { t as n } from "./style-composition-uYlczSsB.js";
+import { mergeProps as r } from "@base-ui/react/merge-props";
+import "@stylexjs/stylex";
+import { jsx as i } from "react/jsx-runtime";
+import { Tabs as a } from "@base-ui/react/tabs";
+// packages/navigation/src/skip-link.tsx
+function o(e) {
+	return /* @__PURE__ */ i("a", { ...r({ className: "xixxii4 x1ridm32 x12hha37 xkwijxb x174j0rr x1mvvolr x9f619 xvv7f4i x1ok0vyi xpvm0e4 xbixft x1hz01jw xtqrqnz x1778rvt xvmahel xujl8zx x1wfrlr2 x1tkds87 x1de710j x1gnsi0 x1cm8ssg" }, e) });
+}
+// packages/navigation/src/tabs.tsx
+function s({ className: e, style: t, ...r }) {
+	return /* @__PURE__ */ i(a.Root, {
+		...r,
+		...n({
+			className: e,
+			style: t,
+			styles: { className: "x1hz01jw xvmahel xeuugli" }
+		})
+	});
+}
+function c({ className: e, style: t, ...r }) {
+	return /* @__PURE__ */ i(a.List, {
+		...r,
+		...n({
+			className: e,
+			style: t,
+			styles: { className: "x78zum5 x1j825kq xso031l x1q0q8m5 x1qndepd xw2csxc" }
+		})
+	});
+}
+function l({ className: e, style: t, ...r }) {
+	return /* @__PURE__ */ i(a.Tab, {
+		...r,
+		...n({
+			className: e,
+			style: t,
+			styles: { className: "x1hz01jw xvmahel xc342km xid9utz xn9t2bk xnjsko4 xjbqb8w xlxy82 x1q0q8m5 x16stqrj x153jb6y x1ypdohk x12myhf4 x1778rvt xuxw1ft x1wlwa7r x1wu4q4p x11v428d xwj21n9 x1m8qfh3 x13qnu6 x9v5kkp x19rmrnh x1bqaal" }
+		})
+	});
+}
+function u({ className: e, style: t, ...r }) {
+	return /* @__PURE__ */ i(a.Panel, {
+		...r,
+		...n({
+			className: e,
+			style: t,
+			styles: { className: "x1o3kwql x1k57tk5" }
+		})
+	});
+}
+var d = {
+	Root: s,
+	List: c,
+	Tab: l,
+	Panel: u
+};
+export { t as Breadcrumb, e as Kbd, o as SkipLink, d as Tabs };

package/dist/overlays.js

@@ -0,0 +1 @@
+export { o as AlertDialog, s as Dialog, a as Drawer, i as Menu, r as Popover, n as Preview, t as Tooltip } from "./src-CfDf8TY8.js";

package/dist/packages/ai/src/approval.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+type PendingApproval = {
+    readonly status: 'pending';
+    readonly onApprove: () => void;
+    readonly onDeny: () => void;
+    readonly busy?: 'approve' | 'deny' | undefined;
+    readonly disabled?: boolean;
+    readonly approveLabel?: string;
+    readonly denyLabel?: string;
+    readonly statusLabel?: never;
+};
+type SettledApproval = {
+    readonly status: 'approved' | 'denied' | 'expired';
+    readonly statusLabel: string;
+    readonly onApprove?: never;
+    readonly onDeny?: never;
+    readonly busy?: never;
+    readonly disabled?: never;
+    readonly approveLabel?: never;
+    readonly denyLabel?: never;
+};
+export type ApprovalProps = (PendingApproval | SettledApproval) & {
+    readonly requestId: string;
+    readonly title: string;
+    readonly description?: string;
+    readonly children?: ReactNode;
+};
+export declare function Approval(props: ApprovalProps): ReactNode;
+export {};

package/dist/packages/ai/src/conversation.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+export type ConversationRootProps = {
+    readonly children: ReactNode;
+    readonly initialPosition?: 'start' | 'end';
+    readonly follow?: boolean;
+};
+export type ConversationViewportProps = {
+    readonly label: string;
+    readonly children: ReactNode;
+};
+export type ConversationContentProps = {
+    readonly children: ReactNode;
+    readonly streaming?: boolean;
+};
+export type ConversationItemProps = {
+    readonly messageId: string;
+    readonly children: ReactNode;
+};
+export type ConversationJumpProps = {
+    readonly label?: string;
+};
+declare function ConversationRoot({ children, initialPosition, follow }: ConversationRootProps): ReactNode;
+declare function ConversationViewport({ label, children }: ConversationViewportProps): ReactNode;
+declare function ConversationContent({ children, streaming }: ConversationContentProps): ReactNode;
+declare function ConversationItem({ messageId, children }: ConversationItemProps): ReactNode;
+declare function ConversationJumpToLatest({ label }: ConversationJumpProps): ReactNode;
+export declare const Conversation: {
+    Root: typeof ConversationRoot;
+    Viewport: typeof ConversationViewport;
+    Content: typeof ConversationContent;
+    Item: typeof ConversationItem;
+    JumpToLatest: typeof ConversationJumpToLatest;
+};
+export {};

package/dist/packages/ai/src/index.d.ts

@@ -0,0 +1,10 @@
+export type { ApprovalProps } from './approval.tsx';
+export { Approval } from './approval.tsx';
+export type { ConversationRootProps, ConversationViewportProps, ConversationContentProps, ConversationItemProps, ConversationJumpProps, } from './conversation.tsx';
+export { Conversation } from './conversation.tsx';
+export type { MessageKind, MessageProps, MessageAttachmentProps } from './message.tsx';
+export { Message, MessageAttachment } from './message.tsx';
+export type { PromptInputProps } from './prompt-input.tsx';
+export { PromptInput } from './prompt-input.tsx';
+export type { Source, SourcesProps, InlineCitationProps } from './sources.tsx';
+export { Sources, InlineCitation } from './sources.tsx';

package/dist/packages/ai/src/message.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export type MessageKind = 'user' | 'assistant' | 'system';
+export type MessageProps = {
+    readonly author: string;
+    readonly children: ReactNode;
+    readonly id?: string;
+    readonly kind?: MessageKind;
+    readonly meta?: ReactNode;
+    readonly actions?: ReactNode;
+    readonly attachments?: ReactNode;
+};
+export type MessageAttachmentProps = {
+    readonly name: string;
+    readonly description?: string;
+    readonly href?: string;
+    readonly actions?: ReactNode;
+};
+export declare function Message({ author, children, id, kind, meta, actions, attachments, }: MessageProps): ReactNode;
+export declare function MessageAttachment({ name, description, href, actions }: MessageAttachmentProps): ReactNode;

package/dist/packages/ai/src/prompt-input.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentProps, ReactNode } from 'react';
+export type PromptInputProps = {
+    readonly label: string;
+    readonly value: string;
+    readonly onValueChange: (value: string) => void;
+    readonly onSubmit: NonNullable<ComponentProps<'form'>['onSubmit']>;
+    readonly name?: string;
+    readonly placeholder?: string;
+    readonly maxLength?: number;
+    readonly required?: boolean;
+    readonly pending?: boolean;
+    readonly disabled?: boolean;
+    readonly submitDisabled?: boolean;
+    readonly submitLabel?: string;
+    readonly pendingLabel?: string;
+    readonly enterBehavior?: 'newline' | 'submit';
+    readonly description?: ReactNode;
+    readonly error?: string | undefined;
+    readonly controls?: ReactNode;
+    readonly attachments?: ReactNode;
+    readonly onStop?: (() => void) | undefined;
+    readonly stopPending?: boolean;
+    readonly stopLabel?: string;
+};
+export declare function PromptInput({ label, value, onValueChange, onSubmit, name, placeholder, maxLength, required, pending, disabled, submitDisabled, submitLabel, pendingLabel, enterBehavior, description, error, controls, attachments, onStop, stopPending, stopLabel, }: PromptInputProps): ReactNode;

package/dist/packages/ai/src/sources.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export type Source = {
+    readonly id: string;
+    readonly title: string;
+    readonly href: string;
+    readonly description?: string;
+};
+export type SourcesProps = {
+    readonly sources: ReadonlyArray<Source>;
+    readonly label?: string;
+};
+export type InlineCitationProps = {
+    readonly source: Source;
+    readonly label: string;
+};
+export declare function Sources({ sources, label }: SourcesProps): ReactNode;
+export declare function InlineCitation({ source, label }: InlineCitationProps): ReactNode;

package/dist/packages/charts/src/cartesian/bar-chart.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+export type BarSeries = {
+    readonly id: string;
+    readonly label: string;
+    readonly values: ReadonlyArray<number | null>;
+    readonly tone?: ChartTone | undefined;
+};
+export type BarChartProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly categories: ReadonlyArray<{
+        readonly id: string;
+        readonly label: string;
+    }>;
+    readonly series: ReadonlyArray<BarSeries>;
+    readonly domain: readonly [number, number];
+    readonly mode?: 'grouped' | 'stacked' | undefined;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection | undefined;
+    readonly height?: number | undefined;
+};
+export declare function BarChart({ title, description, categories, series, domain, mode, formatValue, selection, height, }: BarChartProps): ReactNode;

package/dist/packages/charts/src/cartesian/breakdown-bar.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { BreakdownItem } from '../categorical-values.tsx';
+import type { ChartSelection } from '../chart-frame.tsx';
+export type BreakdownBarProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly items: ReadonlyArray<BreakdownItem>;
+    readonly total: number;
+    readonly formatValue: (value: number) => string;
+    readonly selection?: ChartSelection | undefined;
+};
+export declare function BreakdownBar({ title, description, items, total, formatValue, selection, }: BreakdownBarProps): ReactNode;

package/dist/packages/charts/src/cartesian/index.d.ts

@@ -0,0 +1,12 @@
+export type { BarSeries, BarChartProps } from './bar-chart.tsx';
+export { BarChart } from './bar-chart.tsx';
+export type { BreakdownBarProps } from './breakdown-bar.tsx';
+export { BreakdownBar } from './breakdown-bar.tsx';
+export type { ScatterPoint, ScatterRange, ScatterRangeSelection, ScatterPlotProps } from './scatter-plot.tsx';
+export { MAX_SCATTER_POINTS, ScatterPlot } from './scatter-plot.tsx';
+export type { SparklineProps } from './sparkline.tsx';
+export { Sparkline } from './sparkline.tsx';
+export type { TimeSeriesPoint, TimeSeries, TimeSeriesMarker } from './time-series-data.ts';
+export { timeSeriesLimits } from './time-series-data.ts';
+export type { TimeSeriesChartProps, AreaChartProps, SmallMultiplesProps } from './time-series.tsx';
+export { LineChart, AreaChart, SmallMultiples } from './time-series.tsx';

package/dist/packages/charts/src/cartesian/scatter-plot.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from '../chart-frame.tsx';
+import type { ChartTone } from '../chart-theme.ts';
+export type ScatterPoint = {
+    readonly id: string;
+    readonly label: string;
+    readonly x: number;
+    readonly y: number;
+    readonly tone: ChartTone;
+};
+export type ScatterRange = {
+    readonly x: readonly [number, number];
+    readonly y: readonly [number, number];
+};
+export type ScatterRangeSelection = {
+    readonly value: ScatterRange | null;
+    readonly onChange: (range: ScatterRange | null) => void;
+    readonly xStep: number;
+    readonly yStep: number;
+    readonly locale: string;
+};
+export type ScatterPlotProps = {
+    readonly title: string;
+    readonly description: string;
+    readonly points: ReadonlyArray<ScatterPoint>;
+    readonly xDomain: readonly [number, number];
+    readonly yDomain: readonly [number, number];
+    readonly xLabel: string;
+    readonly yLabel: string;
+    readonly formatX: (value: number) => string;
+    readonly formatY: (value: number) => string;
+    readonly selection?: ChartSelection | undefined;
+    readonly rangeSelection?: ScatterRangeSelection | undefined;
+    readonly emptyLabel: string;
+};
+export declare const MAX_SCATTER_POINTS = 1000;
+export declare function ScatterPlot(props: ScatterPlotProps): ReactNode;

package/dist/packages/charts/src/cartesian/sparkline.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { TimeSeries } from './time-series-data.ts';
+export type SparklineProps = {
+    readonly title: string;
+    readonly summary: string;
+    readonly unit: string;
+    readonly timestampUnit: 'seconds' | 'milliseconds';
+    readonly series: TimeSeries;
+    readonly valueDomain: readonly [number, number];
+};
+export declare function Sparkline({ title, summary, unit, timestampUnit, series, valueDomain }: SparklineProps): ReactNode;

package/dist/packages/charts/src/cartesian/time-series-data.d.ts

@@ -0,0 +1,54 @@
+import type { ChartTone } from '../chart-theme.ts';
+export type TimeSeriesPoint = {
+    readonly timestamp: number;
+    readonly value: number | null;
+};
+export type TimeSeries = {
+    readonly id: string;
+    readonly label: string;
+    readonly points: ReadonlyArray<TimeSeriesPoint>;
+    readonly tone?: ChartTone | undefined;
+};
+export type TimeSeriesMarker = {
+    readonly id: string;
+    readonly timestamp: number;
+    readonly label: string;
+} & ({
+    readonly kind: 'time';
+    readonly seriesId?: never;
+    readonly value?: never;
+} | {
+    readonly kind: 'point';
+    readonly seriesId: string;
+    readonly value: number;
+});
+export type PlotPoint = {
+    readonly timestamp: number;
+    readonly value: number | null;
+    readonly base: number;
+};
+export type PlotSeries = {
+    readonly id: string;
+    readonly label: string;
+    readonly tone: ChartTone;
+    readonly points: ReadonlyArray<PlotPoint>;
+};
+export declare const timeSeriesLimits: {
+    readonly series: 12;
+    readonly pointsPerSeries: 2000;
+    readonly markers: 200;
+    readonly panels: 12;
+};
+export declare function validateTimeSeries({ series, isStacked, markers, }: {
+    readonly series: ReadonlyArray<TimeSeries>;
+    readonly isStacked: boolean;
+    readonly markers: ReadonlyArray<TimeSeriesMarker>;
+}): string | undefined;
+export declare function timeSeriesSignature({ series, markers, timestampUnit, isStacked, }: {
+    readonly series: ReadonlyArray<TimeSeries>;
+    readonly markers: ReadonlyArray<TimeSeriesMarker>;
+    readonly timestampUnit: string;
+    readonly isStacked: boolean;
+}): string;
+export declare function observationDomain(minimum: number, maximum: number, startsAtZero?: boolean): readonly [number, number];
+export declare function prepareTimeSeries(series: ReadonlyArray<TimeSeries>, isStacked: boolean): ReadonlyArray<PlotSeries>;

package/dist/packages/charts/src/cartesian/time-series-line.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { PlotSeries } from './time-series-data.ts';
+export declare function TimeSeriesLine({ series, x, y, inspectedTimestamp, pointRadius, }: {
+    readonly series: PlotSeries;
+    readonly x: (timestamp: number) => number;
+    readonly y: (value: number) => number;
+    readonly inspectedTimestamp?: number | undefined;
+    readonly pointRadius?: number | undefined;
+}): ReactNode;

package/dist/packages/charts/src/cartesian/time-series.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { TimeSeries, TimeSeriesMarker } from './time-series-data.ts';
+export type TimeSeriesChartProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly series: ReadonlyArray<TimeSeries>;
+    readonly timestampUnit: 'seconds' | 'milliseconds';
+    readonly formatTimestamp: (timestamp: number) => string;
+    readonly formatValue: (value: number) => string;
+    readonly markers?: ReadonlyArray<TimeSeriesMarker> | undefined;
+    readonly height?: number | undefined;
+    readonly actions?: ReactNode;
+};
+export type AreaChartProps = TimeSeriesChartProps & {
+    readonly stacked?: boolean | undefined;
+};
+export type SmallMultiplesProps = Omit<TimeSeriesChartProps, 'series' | 'title' | 'description' | 'actions' | 'formatValue' | 'markers'> & {
+    readonly charts: ReadonlyArray<{
+        readonly id: string;
+        readonly title: string;
+        readonly series: ReadonlyArray<TimeSeries>;
+        readonly description?: string | undefined;
+        readonly formatValue: (value: number) => string;
+        readonly markers?: ReadonlyArray<TimeSeriesMarker> | undefined;
+    }>;
+};
+export declare function LineChart(props: TimeSeriesChartProps): ReactNode;
+export declare function AreaChart({ stacked, ...props }: AreaChartProps): ReactNode;
+export declare function SmallMultiples({ charts, ...props }: SmallMultiplesProps): ReactNode;

package/dist/packages/charts/src/categorical-values.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { ChartSelection } from './chart-frame.tsx';
+import type { ChartTone } from './chart-theme.ts';
+export type BreakdownItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly value: number | null;
+    readonly tone?: ChartTone | undefined;
+};
+export declare const categoricalLimits: {
+    readonly items: 200;
+    readonly series: 12;
+};
+export declare function colorTone(tone: ChartTone | undefined, index: number): ChartTone;
+export declare function validateBreakdown(items: ReadonlyArray<BreakdownItem>): string | undefined;
+export declare function CategoricalValues({ items, selection, }: {
+    readonly items: ReadonlyArray<{
+        readonly id: string;
+        readonly label: string;
+        readonly valueLabel: string;
+        readonly tone: ChartTone;
+    }>;
+    readonly selection?: ChartSelection | undefined;
+}): ReactNode;

package/dist/packages/charts/src/chart-frame.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import type { ChartTone } from './chart-theme.ts';
+export type ChartSelection = {
+    readonly selectedId: string | undefined;
+    readonly onSelect: (id: string) => void;
+};
+export type ChartFrameProps = {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly children: ReactNode;
+    readonly actions?: ReactNode;
+    readonly footer?: ReactNode;
+};
+export type ChartLegendItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly tone: ChartTone;
+};
+export type ChartLegendProps = {
+    readonly items: ReadonlyArray<ChartLegendItem>;
+    readonly label?: string | undefined;
+};
+export declare function ChartFrame({ title, description, children, actions, footer }: ChartFrameProps): ReactNode;
+export declare function ChartLegend({ items, label }: ChartLegendProps): ReactNode;
+export declare function ChartDatumButton({ label, selected, onSelect, children, }: {
+    readonly label: string;
+    readonly selected?: boolean | undefined;
+    readonly onSelect?: (() => void) | undefined;
+    readonly children: ReactNode;
+}): ReactNode;
+export declare function ChartDataDisclosure({ children, label, }: {
+    readonly children: ReactNode;
+    readonly label?: string | undefined;
+}): ReactNode;

package/dist/packages/charts/src/chart-input.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export declare function isFiniteDomain(domain: readonly [number, number]): boolean;
+export declare function hasUniqueIds(records: ReadonlyArray<{
+    readonly id: string;
+}>): boolean;
+export declare function ChartInputError({ title, description, message, }: {
+    readonly title: string;
+    readonly description?: string | undefined;
+    readonly message: string;
+}): ReactNode;

package/dist/packages/charts/src/chart-theme.d.ts

@@ -0,0 +1,48 @@
+import * as stylex from '@stylexjs/stylex';
+export type ChartTone = 'series1' | 'series2' | 'series3' | 'series4' | 'series5' | 'series6' | 'positive' | 'negative' | 'neutral';
+export declare const chartToneColors: Readonly<Record<ChartTone, string>>;
+export declare const chartStyles: Readonly<{
+    readonly plot: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+    readonly svg: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "visible">;
+    }>;
+    readonly axis: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 1>;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly grid: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 1>;
+        readonly strokeDasharray: stylex.StyleXClassNameFor<"strokeDasharray", "3 3">;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly label: Readonly<{
+        readonly fill: stylex.StyleXClassNameFor<"fill", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+    }>;
+    readonly mark: Readonly<{
+        readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 1.5>;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly selected: Readonly<{
+        readonly stroke: stylex.StyleXClassNameFor<"stroke", string>;
+        readonly strokeWidth: stylex.StyleXClassNameFor<"strokeWidth", 2>;
+        readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
+    }>;
+    readonly focus: Readonly<{
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineColor: stylex.StyleXVar<string>;
+            readonly outlineStyle: "solid";
+            readonly outlineWidth: stylex.StyleXVar<string>;
+            readonly outlineOffset: 2;
+        }>;
+    }>;
+}>;

package/dist/packages/charts/src/distribution/distribution-input.d.ts

@@ -0,0 +1,14 @@
+export type NumericDomain = readonly [minimum: number, maximum: number];
+export declare const distributionLimits: {
+    readonly bins: 200;
+    readonly cumulativePoints: 2000;
+    readonly rows: 200;
+};
+export declare function distributionInputError({ items, domain, maxEntries, }: {
+    readonly items: ReadonlyArray<{
+        readonly id: string;
+    }>;
+    readonly domain: NumericDomain;
+    readonly maxEntries: number;
+}): string | undefined;
+export declare function outsideDomain(value: number, domain: NumericDomain): boolean;