@mechane-ai/elements 0.7.1 → 0.9.0

package/dist/packages/core/src/actions.d.ts

@@ -1,4 +1,5 @@
 import { Button as BaseButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
 import type { ComponentProps, ReactNode } from 'react';
 import type { ControlStyle, PlacementStyle } from '../../foundations/src/style-composition.ts';
 type ButtonVariant = 'solid' | 'outline' | 'ghost';
@@ -17,6 +18,11 @@ type ButtonProps = ComponentProps<typeof BaseButton> & PendingProps & {
 type IconButtonProps = Omit<ButtonProps, 'aria-label' | 'pendingLabel'> & {
     readonly 'aria-label': string;
 };
+type IconLinkProps = Omit<useRender.ComponentProps<'a'>, 'aria-label'> & {
+    readonly 'aria-label': string;
+    readonly 'size'?: ControlSize;
+    readonly 'xstyle'?: PlacementStyle;
+};
 type TextButtonProps = ComponentProps<typeof BaseButton> & PendingProps & {
     readonly tone?: ButtonTone;
     readonly xstyle?: PlacementStyle;
@@ -28,4 +34,5 @@ export declare function Button({ variant, tone, size, pending, pendingLabel, chi
 export declare function IconButton({ size, children, xstyle, ...props }: IconButtonProps): ReactNode;
 export declare function TextButton({ tone, pending, pendingLabel, children, className, style, xstyle, disabled, ...props }: TextButtonProps): ReactNode;
 export declare function TextLink({ xstyle, ...props }: TextLinkProps): ReactNode;
+export declare function IconLink({ size, children, xstyle, render, ref, ...props }: IconLinkProps): ReactNode;
 export {};

package/dist/packages/core/src/agent-avatar-glyphs.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export declare const seededAgentAvatarShapes: readonly ["spark", "facet", "orbit", "loop", "clover", "petal", "wheel", "compass", "grid", "steps", "chevron", "wave", "ripple", "arch", "bridge", "peak", "zigzag", "helix", "kite", "cube", "prism", "frame", "brackets", "diamond", "hexagon", "signal", "crest", "bolt", "link", "split", "aster", "portal"];
+export declare const agentAvatarShapes: readonly ["spark", "facet", "orbit", "loop", "clover", "petal", "wheel", "compass", "grid", "steps", "chevron", "wave", "ripple", "arch", "bridge", "peak", "zigzag", "helix", "kite", "cube", "prism", "frame", "brackets", "diamond", "hexagon", "signal", "crest", "bolt", "link", "split", "aster", "portal"];
+export type AgentAvatarShape = (typeof agentAvatarShapes)[number];
+export declare const agentAvatarGlyphs: Readonly<Record<AgentAvatarShape, ReactNode>>;

package/dist/packages/core/src/agent-avatar.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { AgentAvatarShape } from './agent-avatar-glyphs.tsx';
+export declare const agentAvatarColors: readonly ["ember", "coral", "rose", "berry", "plum", "orchid", "violet", "indigo", "iris", "cobalt", "blue", "sky", "cyan", "lagoon", "teal", "jade", "mint", "forest", "leaf", "moss", "olive", "ochre", "amber", "copper"];
+export type AgentAvatarColor = (typeof agentAvatarColors)[number];
+export type AgentAvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+export type AgentAppearance = {
+    readonly shape: AgentAvatarShape;
+    readonly color: AgentAvatarColor;
+};
+export declare function agentAppearance(seed: string): AgentAppearance;
+export type AgentAvatarProps = {
+    readonly seed: string;
+    readonly appearance?: AgentAppearance | undefined;
+    readonly size?: AgentAvatarSize;
+    readonly label?: string;
+};
+export declare function AgentAvatar({ seed, appearance, size, label }: AgentAvatarProps): ReactNode;

package/dist/packages/core/src/copy-value.d.ts

@@ -4,6 +4,7 @@ type CopySource = string | (() => string);
 type CopyValueProps = Omit<ComponentProps<typeof BaseButton>, 'value'> & {
     readonly value: CopySource;
     readonly label: string;
+    readonly display?: 'value' | 'icon';
 };
-export declare function CopyValue({ value, label, children, className, style, disabled, onClick, ...props }: CopyValueProps): ReactNode;
+export declare function CopyValue({ value, label, display, children, className, style, disabled, onClick, render, ...props }: CopyValueProps): ReactNode;
 export {};

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

@@ -1,6 +1,10 @@
-export { Button, IconButton, TextButton, TextLink } from './actions.tsx';
+export { Button, IconButton, IconLink, TextButton, TextLink } from './actions.tsx';
 export type { AvatarProps } from './avatar.tsx';
 export { Avatar } from './avatar.tsx';
+export type { AgentAvatarShape } from './agent-avatar-glyphs.tsx';
+export { agentAvatarShapes } from './agent-avatar-glyphs.tsx';
+export type { AgentAppearance, AgentAvatarColor, AgentAvatarProps, AgentAvatarSize } from './agent-avatar.tsx';
+export { AgentAvatar, agentAppearance, agentAvatarColors } from './agent-avatar.tsx';
 export { CopyValue } from './copy-value.tsx';
 export { Accordion, Collapsible } from './disclosure.tsx';
 export { Panel, Row, Stack, Columns, Divider } from './surfaces.tsx';

package/dist/packages/forms/src/agent-avatar-picker.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { AgentAppearance } from '../../core/src/index.ts';
+export type AgentAvatarPickerProps = {
+    readonly value: AgentAppearance;
+    readonly onValueChange: (value: AgentAppearance) => void;
+    readonly disabled?: boolean;
+};
+export declare function AgentAvatarPicker({ value, onValueChange, disabled }: AgentAvatarPickerProps): ReactNode;

package/dist/packages/forms/src/field-styles.d.ts

@@ -68,6 +68,25 @@ export declare const fieldStyles: Readonly<{
         readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "30dvh">;
     }>;
 }>;
+export declare const textareaAppearanceStyles: Readonly<{
+    readonly field: {};
+    readonly plain: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "30dvh">;
+        readonly fieldSizing: stylex.StyleXClassNameFor<"fieldSizing", "content">;
+        readonly resize: stylex.StyleXClassNameFor<"resize", "none">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineStyle: "none";
+        }>;
+        readonly ':disabled': stylex.StyleXClassNameFor<":disabled", {
+            readonly backgroundColor: "transparent";
+        }>;
+    }>;
+}>;
 export declare const inputSizeStyles: Readonly<{
     readonly sm: Readonly<{
         readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;

package/dist/packages/forms/src/forms.d.ts

@@ -18,6 +18,7 @@ type NativeTextareaProps = ComponentProps<'textarea'>;
 type TextareaProps = Omit<NativeTextareaProps, 'value' | 'defaultValue' | 'onChange' | 'readOnly'> & TextValueProperties<NonNullable<NativeTextareaProps['value']>, NonNullable<NativeTextareaProps['onChange']>, NonNullable<BaseInputProps['onValueChange']>> & {
     readonly xstyle?: PlacementStyle;
     readonly compact?: boolean;
+    readonly appearance?: 'field' | 'plain';
 };
 declare function FieldRoot({ className, style, xstyle, ...props }: FieldRootProps): ReactNode;
 declare function FieldLabel({ className, style, ...props }: FieldLabelProps): ReactNode;
@@ -30,5 +31,5 @@ export declare const Field: {
     Error: typeof FieldError;
 };
 export declare function Input({ className, style, xstyle, size, ...props }: InputProps): ReactNode;
-export declare function Textarea({ compact, value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
+export declare function Textarea({ compact, appearance, value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
 export {};

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

@@ -1,4 +1,6 @@
 export { Combobox } from './combobox.tsx';
+export type { AgentAvatarPickerProps } from './agent-avatar-picker.tsx';
+export { AgentAvatarPicker } from './agent-avatar-picker.tsx';
 export { FilePicker, Fieldset, InputGroup, NumberField, Slider } from './form-controls.tsx';
 export { Field, Input, Textarea } from './forms.tsx';
 export { Select } from './select.tsx';

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

@@ -59,6 +59,58 @@ export declare const darkChartColors: {
     positive: string;
     missing: string;
 };
+export declare const avatarColors: stylex.VarGroup<Readonly<{
+    identity1: string;
+    identity2: string;
+    identity3: string;
+    identity4: string;
+    identity5: string;
+    identity6: string;
+    identity7: string;
+    identity8: string;
+    identity9: string;
+    identity10: string;
+    identity11: string;
+    identity12: string;
+    identity13: string;
+    identity14: string;
+    identity15: string;
+    identity16: string;
+    identity17: string;
+    identity18: string;
+    identity19: string;
+    identity20: string;
+    identity21: string;
+    identity22: string;
+    identity23: string;
+    identity24: string;
+}>, symbol>;
+export declare const darkAvatarColors: {
+    identity1: string;
+    identity2: string;
+    identity3: string;
+    identity4: string;
+    identity5: string;
+    identity6: string;
+    identity7: string;
+    identity8: string;
+    identity9: string;
+    identity10: string;
+    identity11: string;
+    identity12: string;
+    identity13: string;
+    identity14: string;
+    identity15: string;
+    identity16: string;
+    identity17: string;
+    identity18: string;
+    identity19: string;
+    identity20: string;
+    identity21: string;
+    identity22: string;
+    identity23: string;
+    identity24: string;
+};
 export declare const syntaxColors: stylex.VarGroup<Readonly<{
     keyword: string;
     string: string;

package/dist/packages/layout/src/app-shell.d.ts

@@ -5,6 +5,7 @@ type AppShellProps = {
     readonly footer?: ReactNode;
     readonly children: ReactNode;
     readonly mainId?: string;
+    readonly focus?: boolean;
 };
-export declare function AppShell({ sidebarHeader, sidebar, footer, children, mainId }: AppShellProps): ReactNode;
+export declare function AppShell({ sidebarHeader, sidebar, footer, children, mainId, focus, }: AppShellProps): ReactNode;
 export {};

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

@@ -2,9 +2,10 @@ export { AppShell } from './app-shell.tsx';
 export { DetailPage } from './detail-page.tsx';
 export { FocusPage } from './focus-page.tsx';
 export { Workbench, WorkbenchScroll, WorkbenchFooter } from './workbench.tsx';
+export { ViewStack } from './view-stack.tsx';
 export { PageToolbar, ToolbarAction } from './page-toolbar.tsx';
 export type { RecordPageRootProps, RecordPageToolbarProps, RecordPageBodyProps, RecordPageHeaderProps, RecordPageContentProps, RecordPageAsideProps, } from './record-page.tsx';
 export { RecordPage } from './record-page.tsx';
 export type { ResizableRootProps, ResizablePaneProps, ResizableHandleProps } from './resizable.tsx';
 export { Resizable } from './resizable.tsx';
-export { Navigation, NavigationItem, NavigationLink, SidebarLabel, SidebarFooter } from './sidebar.tsx';
+export { Navigation, NavigationSection, NavigationItem, NavigationLink, SidebarLabel, SidebarFooter, } from './sidebar.tsx';

package/dist/packages/layout/src/page-toolbar.d.ts

@@ -5,10 +5,12 @@ type PageToolbarProps = {
     readonly actions?: ReactNode;
     readonly breadcrumb?: boolean;
     readonly navigation?: boolean;
+    readonly views?: ReactNode;
+    readonly leading?: ReactNode;
 };
 type ToolbarActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'xstyle'> & {
     readonly icon?: ReactNode;
 };
-export declare function PageToolbar({ title, actions, breadcrumb, navigation }: PageToolbarProps): ReactNode;
+export declare function PageToolbar({ title, actions, breadcrumb, navigation, views, leading, }: PageToolbarProps): ReactNode;
 export declare function ToolbarAction({ icon, children, ...props }: ToolbarActionProps): ReactNode;
 export {};

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

@@ -39,6 +39,10 @@ type SidebarFooterProps = {
 export declare function Sidebar({ header, footer, close, children }: SidebarProps): ReactNode;
 export declare function SidebarClose(): ReactNode;
 export declare function Navigation({ children, label }: NavigationProps): ReactNode;
+export declare function NavigationSection({ children, label, }: {
+    readonly children: ReactNode;
+    readonly label: string;
+}): ReactNode;
 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;

package/dist/packages/layout/src/view-stack.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+declare function ViewStackRoot({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;
+declare function ViewStackPanel({ active, children }: {
+    readonly active: boolean;
+    readonly children: ReactNode;
+}): ReactNode;
+export declare const ViewStack: {
+    Root: typeof ViewStackRoot;
+    Panel: typeof ViewStackPanel;
+};
+export {};

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

@@ -1,11 +1,14 @@
 import type { ReactNode } from 'react';
 export declare function Workbench({ header, children, inspector, }: {
-    readonly header: ReactNode;
+    readonly header?: ReactNode;
     readonly children: ReactNode;
     readonly inspector?: ReactNode;
 }): ReactNode;
-export declare function WorkbenchScroll({ children }: {
+export declare function WorkbenchScroll({ label, children, flush, scrollRestorationId, }: {
+    readonly label: string;
     readonly children: ReactNode;
+    readonly flush?: boolean;
+    readonly scrollRestorationId?: string;
 }): ReactNode;
 export declare function WorkbenchFooter({ children }: {
     readonly children: ReactNode;

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

@@ -1,5 +1,5 @@
-import { c as e } from "./src-BkCsvZGi.js";
-import { l as t } from "./src-DjTM64tN.js";
+import { c as e } from "./src-elMBQ2Dh.js";
+import { l as t } from "./src-Cc0Sadzr.js";
 import { conditions as n } from "./tokens.js";
 import { r } from "./pierre-theme-BpESNIsV.js";
 import * as i from "@stylexjs/stylex";