@openwarelabs/ui 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Openware UI
 
-React components and design tokens with Commandr's look: a midnight brand colour, a brass accent kept small, cool slate surfaces, tactile buttons that press in, and Inter. Light and dark themes, and a brand colour you can swap.
+React components and design tokens with a quiet, tactile look: a midnight brand colour, a brass accent kept small, cool slate surfaces, buttons that press in, and Inter. Light and dark themes, and a brand colour you can swap.
 
 ## Docs
 
@@ -98,4 +98,4 @@ The docs' header has a colour picker that does this live, and the Theming page s
 
 ## Credits
 
-Built from the components and styles of Commandr. Icons drawn inside the components are Lucide shapes (ISC). Inter and Geist Mono are under the SIL Open Font License 1.1. Toasts use sonner and the colour picker uses react-colorful, both under the MIT licence.
+Icons drawn inside the components are Lucide shapes (ISC). Inter and Geist Mono are under the SIL Open Font License 1.1. Toasts use sonner and the colour picker uses react-colorful, both under the MIT licence.

package/dist/components/Accordion/Accordion.d.cts

@@ -21,7 +21,7 @@ export interface DisclosureProps {
     children: ReactNode;
     className?: string;
 }
-/** A section that opens and closes under its title, like Commandr's "3 files changed". */
+/** A section that opens and closes under its title, like "3 files changed" in a code review. */
 export declare function Disclosure({ open, defaultOpen, onOpenChange, variant, headingLevel, className, ...props }: DisclosureProps): import("react").JSX.Element;
 export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
     /** `single` keeps one item open at a time; `multiple` lets any number be open.

package/dist/components/Accordion/Accordion.d.ts

@@ -21,7 +21,7 @@ export interface DisclosureProps {
     children: ReactNode;
     className?: string;
 }
-/** A section that opens and closes under its title, like Commandr's "3 files changed". */
+/** A section that opens and closes under its title, like "3 files changed" in a code review. */
 export declare function Disclosure({ open, defaultOpen, onOpenChange, variant, headingLevel, className, ...props }: DisclosureProps): import("react").JSX.Element;
 export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
     /** `single` keeps one item open at a time; `multiple` lets any number be open.

package/dist/components/Avatar/Avatar.d.cts

@@ -1,14 +1,25 @@
+import { type CSSProperties } from "react";
 export interface AvatarProps {
     /** The person's name; its initials show when there's no image. */
     name: string;
     /** A photo URL. If it fails to load, the initials show instead. */
     src?: string;
-    /** sm 24px, md 28px, lg 36px.
+    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
      * @default "md" */
-    size?: "sm" | "md" | "lg";
+    size?: AvatarSize;
     /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
     label?: string;
     className?: string;
 }
+export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;
+/**
+ * The class and style that size an avatar: a named size's class, or a pixel size through --ow-avatar-size.
+ * @internal
+ */
+export declare function avatarSize(size: AvatarSize): {
+    className: string;
+    style?: CSSProperties;
+    pixels: number;
+};
 /** A round picture of a person: their photo, else their initials on the brand colour, else a person icon. */
 export declare function Avatar({ name, src, size, label, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,14 +1,25 @@
+import { type CSSProperties } from "react";
 export interface AvatarProps {
     /** The person's name; its initials show when there's no image. */
     name: string;
     /** A photo URL. If it fails to load, the initials show instead. */
     src?: string;
-    /** sm 24px, md 28px, lg 36px.
+    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
      * @default "md" */
-    size?: "sm" | "md" | "lg";
+    size?: AvatarSize;
     /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
     label?: string;
     className?: string;
 }
+export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;
+/**
+ * The class and style that size an avatar: a named size's class, or a pixel size through --ow-avatar-size.
+ * @internal
+ */
+export declare function avatarSize(size: AvatarSize): {
+    className: string;
+    style?: CSSProperties;
+    pixels: number;
+};
 /** A round picture of a person: their photo, else their initials on the brand colour, else a person icon. */
 export declare function Avatar({ name, src, size, label, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/AvatarGroup.d.cts

@@ -1,14 +1,14 @@
 import { type ReactNode } from "react";
-import { type AvatarProps } from "./Avatar.cjs";
+import { type AvatarSize } from "./Avatar.cjs";
 export interface AvatarGroupProps {
     /** Avatars. */
     children: ReactNode;
     /** Shows this many, then a "+3" count.
      * @default 4 */
     max?: number;
-    /** Applied to every avatar in the group.
+    /** Applied to every avatar in the group: a named size or pixels.
      * @default "md" */
-    size?: AvatarProps["size"];
+    size?: AvatarSize;
     /** Names the group for screen readers, e.g. "5 people on this project". */
     label?: string;
     className?: string;
@@ -20,9 +20,10 @@ export interface UserProps {
     /** A second line: an email, a role. */
     description?: ReactNode;
     src?: string;
-    /** @default "md" */
-    size?: AvatarProps["size"];
+    /** The avatar's size; the name and gap grow with it from xl (48px) up.
+     * @default "md" */
+    size?: AvatarSize;
     className?: string;
 }
-/** A person: avatar, name and a line about them, as in Commandr's account menu. */
+/** A person: avatar, name and a line about them, as in an account menu. */
 export declare function User({ name, description, src, size, className }: UserProps): import("react").JSX.Element;

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -1,14 +1,14 @@
 import { type ReactNode } from "react";
-import { type AvatarProps } from "./Avatar.js";
+import { type AvatarSize } from "./Avatar.js";
 export interface AvatarGroupProps {
     /** Avatars. */
     children: ReactNode;
     /** Shows this many, then a "+3" count.
      * @default 4 */
     max?: number;
-    /** Applied to every avatar in the group.
+    /** Applied to every avatar in the group: a named size or pixels.
      * @default "md" */
-    size?: AvatarProps["size"];
+    size?: AvatarSize;
     /** Names the group for screen readers, e.g. "5 people on this project". */
     label?: string;
     className?: string;
@@ -20,9 +20,10 @@ export interface UserProps {
     /** A second line: an email, a role. */
     description?: ReactNode;
     src?: string;
-    /** @default "md" */
-    size?: AvatarProps["size"];
+    /** The avatar's size; the name and gap grow with it from xl (48px) up.
+     * @default "md" */
+    size?: AvatarSize;
     className?: string;
 }
-/** A person: avatar, name and a line about them, as in Commandr's account menu. */
+/** A person: avatar, name and a line about them, as in an account menu. */
 export declare function User({ name, description, src, size, className }: UserProps): import("react").JSX.Element;

package/dist/components/CodeBlock/CodeBlock.d.cts

@@ -36,7 +36,7 @@ export interface CodeBlockProps {
     maxHeight?: number;
     className?: string;
 }
-/** Code on Commandr's night ground, the same in both themes, with a copy button. */
+/** Code on a night ground, the same in both themes, with a copy button. */
 export declare function CodeBlock({ code, html, title, language, showLineNumbers, copyable, maxHeight, className }: CodeBlockProps): import("react").JSX.Element;
 export interface SnippetProps {
     /** The command or value, copied as is. */

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -36,7 +36,7 @@ export interface CodeBlockProps {
     maxHeight?: number;
     className?: string;
 }
-/** Code on Commandr's night ground, the same in both themes, with a copy button. */
+/** Code on a night ground, the same in both themes, with a copy button. */
 export declare function CodeBlock({ code, html, title, language, showLineNumbers, copyable, maxHeight, className }: CodeBlockProps): import("react").JSX.Element;
 export interface SnippetProps {
     /** The command or value, copied as is. */

package/dist/components/FileDropZone/FileDropZone.d.cts

@@ -23,7 +23,7 @@ export interface FileDropZoneProps {
     className?: string;
 }
 /**
- * Commandr's folder drop zone, for files: drop them on it, or press it to pick them.
+ * A drop zone for files: drop them on it, or press it to pick them.
  * It checks the type and size and says what was wrong.
  */
 export declare function FileDropZone({ onFiles, accept, multiple, maxSize, label, hint, error, icon, disabled, name, className, }: FileDropZoneProps): import("react").JSX.Element;

package/dist/components/FileDropZone/FileDropZone.d.ts

@@ -23,7 +23,7 @@ export interface FileDropZoneProps {
     className?: string;
 }
 /**
- * Commandr's folder drop zone, for files: drop them on it, or press it to pick them.
+ * A drop zone for files: drop them on it, or press it to pick them.
  * It checks the type and size and says what was wrong.
  */
 export declare function FileDropZone({ onFiles, accept, multiple, maxSize, label, hint, error, icon, disabled, name, className, }: FileDropZoneProps): import("react").JSX.Element;

package/dist/components/FileTree/FileTree.d.cts

@@ -23,7 +23,7 @@ export interface FileTreeProps {
     className?: string;
 }
 /**
- * Commandr's project structure explorer: folders open and close, files can be selected.
+ * A project structure explorer: folders open and close, files can be selected.
  * Up and Down move, Right opens a folder or goes into it, Left closes it or goes to its parent.
  */
 export declare function FileTree({ items, selected, defaultSelected, onSelect, defaultExpanded, label, className, }: FileTreeProps): import("react").JSX.Element;

package/dist/components/FileTree/FileTree.d.ts

@@ -23,7 +23,7 @@ export interface FileTreeProps {
     className?: string;
 }
 /**
- * Commandr's project structure explorer: folders open and close, files can be selected.
+ * A project structure explorer: folders open and close, files can be selected.
  * Up and Down move, Right opens a folder or goes into it, Left closes it or goes to its parent.
  */
 export declare function FileTree({ items, selected, defaultSelected, onSelect, defaultExpanded, label, className, }: FileTreeProps): import("react").JSX.Element;

package/dist/components/Progress/Progress.d.cts

@@ -12,7 +12,7 @@ export interface ProgressBarProps {
     showValue?: boolean;
     /** The text shown and read out for the value, e.g. "3 of 8 stages". Defaults to a percentage. */
     valueLabel?: string;
-    /** sm is 4px, Commandr's pipeline bar; md is 8px.
+    /** sm is 4px, for a pipeline bar; md is 8px.
      * @default "sm" */
     size?: "sm" | "md";
     /** @default "primary" */

package/dist/components/Progress/Progress.d.ts

@@ -12,7 +12,7 @@ export interface ProgressBarProps {
     showValue?: boolean;
     /** The text shown and read out for the value, e.g. "3 of 8 stages". Defaults to a percentage. */
     valueLabel?: string;
-    /** sm is 4px, Commandr's pipeline bar; md is 8px.
+    /** sm is 4px, for a pipeline bar; md is 8px.
      * @default "sm" */
     size?: "sm" | "md";
     /** @default "primary" */

package/dist/components/Stat/Stat.d.cts

@@ -16,5 +16,5 @@ export interface StatProps {
     trend?: number[];
     className?: string;
 }
-/** One headline number with its label, change and trend, like Commandr's overview cards. */
+/** One headline number with its label, change and trend, for overview cards. */
 export declare function Stat({ label, value, icon, change, changeTone, description, trend, className }: StatProps): import("react").JSX.Element;

package/dist/components/Stat/Stat.d.ts

@@ -16,5 +16,5 @@ export interface StatProps {
     trend?: number[];
     className?: string;
 }
-/** One headline number with its label, change and trend, like Commandr's overview cards. */
+/** One headline number with its label, change and trend, for overview cards. */
 export declare function Stat({ label, value, icon, change, changeTone, description, trend, className }: StatProps): import("react").JSX.Element;

package/dist/components/Steps/Steps.d.cts

@@ -3,7 +3,7 @@ export interface StepItem {
     title: ReactNode;
     /** A line under the title. Hidden once the step is done, in the vertical layout. */
     description?: ReactNode;
-    /** A control on the right of the current step, such as a small Button. */
+    /** A control on the right of the step while it's the current one, such as a small Button. Other steps don't show it. */
     action?: ReactNode;
     /** Overrides the status worked out from `current`. */
     status?: "done" | "current" | "upcoming";
@@ -13,7 +13,7 @@ export interface StepsProps {
     /** The index of the step in progress. Steps before it are done. Use items.length when every step is done.
      * @default 0 */
     current?: number;
-    /** `vertical` is Commandr's first-run checklist; `horizontal` is a compact progress strip.
+    /** `vertical` is a first-run checklist; `horizontal` is a compact progress strip.
      * @default "vertical" */
     orientation?: "vertical" | "horizontal";
     /** A heading above a vertical list, with a "2 of 4 done" count beside it. */

package/dist/components/Steps/Steps.d.ts

@@ -3,7 +3,7 @@ export interface StepItem {
     title: ReactNode;
     /** A line under the title. Hidden once the step is done, in the vertical layout. */
     description?: ReactNode;
-    /** A control on the right of the current step, such as a small Button. */
+    /** A control on the right of the step while it's the current one, such as a small Button. Other steps don't show it. */
     action?: ReactNode;
     /** Overrides the status worked out from `current`. */
     status?: "done" | "current" | "upcoming";
@@ -13,7 +13,7 @@ export interface StepsProps {
     /** The index of the step in progress. Steps before it are done. Use items.length when every step is done.
      * @default 0 */
     current?: number;
-    /** `vertical` is Commandr's first-run checklist; `horizontal` is a compact progress strip.
+    /** `vertical` is a first-run checklist; `horizontal` is a compact progress strip.
      * @default "vertical" */
     orientation?: "vertical" | "horizontal";
     /** A heading above a vertical list, with a "2 of 4 done" count beside it. */

package/dist/components/Table/Table.d.cts

@@ -41,6 +41,11 @@ export interface TableProps<Row> {
     selectedKeys?: Key[];
     defaultSelectedKeys?: Key[];
     onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
     /** Shown in place of the rows when there are none, such as an EmptyState. */
     emptyContent?: ReactNode;
     /** `compact` rows are 36px; `comfortable` 44px.
@@ -52,4 +57,4 @@ export interface TableProps<Row> {
     className?: string;
 }
 /** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -41,6 +41,11 @@ export interface TableProps<Row> {
     selectedKeys?: Key[];
     defaultSelectedKeys?: Key[];
     onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
     /** Shown in place of the rows when there are none, such as an EmptyState. */
     emptyContent?: ReactNode;
     /** `compact` rows are 36px; `comfortable` 44px.
@@ -52,4 +57,4 @@ export interface TableProps<Row> {
     className?: string;
 }
 /** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Tabs/Tabs.d.cts

@@ -5,7 +5,7 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChang
     /** The tab selected first when uncontrolled. */
     defaultValue?: string;
     onValueChange?(value: string): void;
-    /** `segmented` raises the chosen tab in a well (Commandr's switcher); `line` underlines it.
+    /** `segmented` raises the chosen tab in a well; `line` underlines it.
      * @default "segmented" */
     variant?: "segmented" | "line";
     children: ReactNode;

package/dist/components/Tabs/Tabs.d.ts

@@ -5,7 +5,7 @@ export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChang
     /** The tab selected first when uncontrolled. */
     defaultValue?: string;
     onValueChange?(value: string): void;
-    /** `segmented` raises the chosen tab in a well (Commandr's switcher); `line` underlines it.
+    /** `segmented` raises the chosen tab in a well; `line` underlines it.
      * @default "segmented" */
     variant?: "segmented" | "line";
     children: ReactNode;

package/dist/components/Tooltip/Tooltip.d.cts

@@ -4,15 +4,15 @@ export interface TooltipProps {
     label: ReactNode;
     /** The thing it explains: usually an icon-only Button with the same words as its aria-label. */
     children: ReactNode;
-    /** Which side it prefers; it flips when there's no room.
+    /** Which side it prefers; it flips to the opposite side when there's no room. `right` suits icons in a folded sidebar.
      * @default "top" */
-    placement?: "top" | "bottom";
+    placement?: "top" | "bottom" | "left" | "right";
     /** Milliseconds of hovering before it shows. Moving to a neighbour while one is showing skips the wait.
      * @default 400 */
     delay?: number;
 }
 /**
- * A small dark label above its child on hover or keyboard focus. It's for sighted users only: the child
+ * A small dark label beside its child (above, unless `placement` says otherwise) on hover or keyboard focus. It's for sighted users only: the child
  * carries the same words for screen readers (an aria-label, or visually hidden text), so they aren't read twice.
  * It sits in the top layer, so scroll areas and dialogs can't clip it.
  */

package/dist/components/Tooltip/Tooltip.d.ts

@@ -4,15 +4,15 @@ export interface TooltipProps {
     label: ReactNode;
     /** The thing it explains: usually an icon-only Button with the same words as its aria-label. */
     children: ReactNode;
-    /** Which side it prefers; it flips when there's no room.
+    /** Which side it prefers; it flips to the opposite side when there's no room. `right` suits icons in a folded sidebar.
      * @default "top" */
-    placement?: "top" | "bottom";
+    placement?: "top" | "bottom" | "left" | "right";
     /** Milliseconds of hovering before it shows. Moving to a neighbour while one is showing skips the wait.
      * @default 400 */
     delay?: number;
 }
 /**
- * A small dark label above its child on hover or keyboard focus. It's for sighted users only: the child
+ * A small dark label beside its child (above, unless `placement` says otherwise) on hover or keyboard focus. It's for sighted users only: the child
  * carries the same words for screen readers (an aria-label, or visually hidden text), so they aren't read twice.
  * It sits in the top layer, so scroll areas and dialogs can't clip it.
  */

package/dist/components.css

@@ -39,6 +39,7 @@
    back into it. useFloating sets data-side and --ow-floating-origin; usePresence sets data-state. */
 .ow-floating {
     --ow-floating-shift: -4px;
+    --ow-floating-shift-x: 0px;
     transform-origin: var(--ow-floating-origin, top center);
 }
 
@@ -46,6 +47,16 @@
     --ow-floating-shift: 4px;
 }
 
+.ow-floating[data-side="left"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: 4px;
+}
+
+.ow-floating[data-side="right"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: -4px;
+}
+
 .ow-floating[data-state="open"] {
     animation: ow-floating-in var(--ow-duration-base) var(--ow-ease-emphasized);
 }
@@ -58,14 +69,14 @@
 @keyframes ow-floating-in {
     from {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.96);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.96);
     }
 }
 
 @keyframes ow-floating-out {
     to {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.97);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.97);
     }
 }
 
@@ -441,7 +452,7 @@
     border-bottom-right-radius: 0;
 }
 
-/* CloseButton: Commandr's dialog close, a quiet square that darkens on hover. */
+/* CloseButton: a quiet square that darkens on hover, for dialogs and panels. */
 .ow-close-button {
     display: inline-flex;
     flex-shrink: 0;
@@ -481,7 +492,7 @@
 }
 
 /* components/SegmentedControl/SegmentedControl.css */
-/* SegmentedControl and segmented Tabs: Commandr's journey switcher, a well with the chosen segment raised. */
+/* SegmentedControl and segmented Tabs: a well with the chosen segment raised. */
 .ow-segmented,
 .ow-tabs--segmented .ow-tabs__list {
     position: relative;
@@ -494,6 +505,8 @@
     border-radius: var(--ow-radius-container);
     background: var(--ow-track);
     padding: var(--ow-space-2xs);
+    /* A hairline edge, so the well shows on the canvas as well as on a surface. */
+    box-shadow: inset 0 0 0 1px var(--ow-border);
 }
 
 .ow-segmented--full {
@@ -797,6 +810,8 @@
 .ow-input-group {
     display: flex;
     width: 100%;
+    /* Shrink in a narrow grid or flex column instead of pushing past it. */
+    min-width: 0;
     height: 40px;
     align-items: center;
     gap: var(--ow-space-sm);
@@ -843,6 +858,8 @@
 }
 
 .ow-input-group__input {
+    /* A percentage width lets the field's minimum size come from its start and end content alone. */
+    width: 100%;
     min-width: 0;
     height: 100%;
     flex: 1;
@@ -1449,7 +1466,7 @@
     width: 16px;
     height: 16px;
     border-radius: var(--ow-radius-pill);
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: var(--ow-shadow-control);
     transform: translateX(2px);
     transition:
@@ -1471,7 +1488,7 @@
 }
 
 /* components/Slider/Slider.css */
-/* Slider: native range inputs over a drawn track. The thumb is the switch's knob: white, round, with a soft shadow. */
+/* Slider: native range inputs over a drawn track. The thumb is the switch's knob (ow-knob): round, with a soft shadow. */
 .ow-slider {
     display: grid;
     gap: var(--ow-space-sm);
@@ -1562,7 +1579,7 @@
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -1575,7 +1592,7 @@
     height: 18px;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -1781,7 +1798,7 @@
 }
 
 /* components/FileDropZone/FileDropZone.css */
-/* FileDropZone: Commandr's folder drop zone, a dashed well that turns primary while something is dragged over it. */
+/* FileDropZone: a dashed well that turns primary while something is dragged over it. */
 .ow-dropzone {
     display: flex;
     min-height: 128px;
@@ -2123,7 +2140,7 @@
     transition: width var(--ow-duration-slow) var(--ow-ease-standard);
 }
 
-/* Unknown length: a segment sliding across, like Commandr's licence check. */
+/* Unknown length: a segment sliding across. */
 .ow-progress__track--indeterminate .ow-progress__fill {
     width: 37%;
     animation: ow-progress-slide 1.3s var(--ow-ease-standard) infinite;
@@ -2185,7 +2202,7 @@
 }
 
 /* components/Tooltip/Tooltip.css */
-/* Tooltip: a small dark label in the top layer, above the child (or below when there's no room). */
+/* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
 .ow-tooltip {
     display: inline-flex;
 }
@@ -2341,7 +2358,7 @@
     box-shadow: none;
 }
 
-/* The ✕ sits on the corner, as in Commandr. */
+/* The ✕ sits on the corner. */
 .ow-toaster.ow-toaster [data-sonner-toast][data-styled="true"] [data-close-button] {
     width: 22px;
     height: 22px;
@@ -3360,7 +3377,7 @@
 }
 
 /* components/Accordion/Accordion.css */
-/* Disclosure and Accordion: Commandr's change review header, a chevron that turns as the panel opens. */
+/* Disclosure and Accordion: a header with a chevron that turns as the panel opens. */
 .ow-disclosure,
 .ow-accordion--bordered,
 .ow-accordion--separated .ow-accordion__item {
@@ -3699,7 +3716,7 @@
 }
 
 /* components/Steps/Steps.css */
-/* Steps: Commandr's setup checklist (vertical) and a compact strip (horizontal). */
+/* Steps: a setup checklist (vertical) and a compact strip (horizontal). */
 .ow-steps--vertical {
     border: 1px solid var(--ow-border);
     border-radius: var(--ow-radius-container);
@@ -3989,6 +4006,19 @@
     font-size: 13px;
 }
 
+.ow-avatar--xl {
+    width: 48px;
+    height: 48px;
+    font-size: 17px;
+}
+
+/* Any size in pixels, through --ow-avatar-size: the initials stay in proportion. */
+.ow-avatar--custom {
+    width: var(--ow-avatar-size);
+    height: var(--ow-avatar-size);
+    font-size: calc(var(--ow-avatar-size) * 0.36);
+}
+
 .ow-avatar__image {
     width: 100%;
     height: 100%;
@@ -4025,6 +4055,18 @@
     gap: var(--ow-space-md);
 }
 
+.ow-user--xl {
+    gap: var(--ow-space-lg);
+}
+
+.ow-user--xl .ow-user__name {
+    font-size: 15px;
+}
+
+.ow-user--xl .ow-user__description {
+    font-size: 13px;
+}
+
 .ow-user__text {
     display: grid;
     min-width: 0;
@@ -4565,7 +4607,7 @@
 }
 
 /* components/Stat/Stat.css */
-/* Stat: Commandr's overview card. A muted label, a big tabular number, a change and an optional trend line. */
+/* Stat: an overview card. A muted label, a big tabular number, a change and an optional trend line. */
 .ow-stat {
     display: grid;
     min-width: 0;
@@ -4675,7 +4717,7 @@
 }
 
 /* components/FileTree/FileTree.css */
-/* FileTree: Commandr's structure explorer. Monospace names, hairline guides, a tinted selected file. */
+/* FileTree: a project structure explorer. Monospace names, hairline guides, a tinted selected file. */
 .ow-tree,
 .ow-tree__group {
     margin: 0;

package/dist/hooks/useFloating.d.cts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type RefObject } from "react";
-export type Placement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top";
+export type Placement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top" | "left" | "right";
 interface Options {
     open: boolean;
     anchorRef: RefObject<HTMLElement | null>;
@@ -14,7 +14,7 @@ interface Options {
 }
 /**
  * Positions a floating element (a popover, a listbox) against its anchor with fixed coordinates, flips it above
- * or below when there's no room, keeps it on screen, and follows the anchor when the page scrolls or resizes.
+ * or below (or, for "left" and "right", to the other side) when there's no room, keeps it on screen, and follows the anchor when the page scrolls or resizes.
  * It also puts the element in the browser's top layer (popover="manual"), so dialogs and overflow can't clip it.
  * Pass the element's `mounted` from usePresence as `open`, so it stays placed while it animates out.
  */