@ai-matrx/design-system 0.61.20 → 0.61.21

package/dist/desktop.d.cts

@@ -465,6 +465,23 @@ interface StatusLightProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
 declare function StatusLight({ tone, label, className, ...props }: StatusLightProps): React.JSX.Element;
 /** A keyboard shortcut, e.g. `<Kbd>⌘K</Kbd>`. */
 declare function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
+/**
+ * Where one thing is, per place (a chat per window): `in` filled, `out` an empty ring, `hidden` a
+ * tint ring (there, but that place does not show it), `open` green (in use there now). `marked`
+ * adds a small dot inside (the place's own mark, e.g. its pin). 12 px; the label is the tooltip
+ * and the accessible name, so a mark is never unexplained.
+ */
+type PlaceMarkState = "in" | "out" | "hidden" | "open";
+interface PlaceMarkProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    state: PlaceMarkState;
+    /** The place's own mark on the thing (a pin): a dot inside the circle. */
+    marked?: boolean;
+    /** What the mark says ("emily: listed, pinned"); tooltip and accessible name. */
+    label: string;
+}
+declare function PlaceMark({ state, marked, label, className, ...props }: PlaceMarkProps): React.JSX.Element;
+/** A row of PlaceMarks in a fixed order (one per place), e.g. a chat's windows in a table cell. */
+declare function PlaceStrip({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
 
 /**
  * Display formatting for desktop screens: ONE way to show a size, a duration, a time and an error.
@@ -484,4 +501,4 @@ declare function formatClockTime(at: Date | number | string | null | undefined):
 /** How much of a capacity is used, in the same words everywhere: "183 GB of 275 GB in use". */
 declare function formatUsage(used: number | null | undefined, total: number | null | undefined): string;
 
-export { Banner, type BannerProps, type BannerTone, Button, type ButtonProps, CodeBlock, type CodeBlockProps, type Column, ComingSoon, type ComingSoonProps, DataTable, type DataTableProps, ErrorBanner, type ErrorBannerProps, FIELD, FieldRow, type FieldRowProps, IconButton, type IconButtonProps, Kbd, METER_THRESHOLDS, Meter, type MeterProps, Page, PageHeader, type PageHeaderProps, type PageProps, type PageWidth, Resource, type ResourceProps, type ResourceState, Row, type RowAction, type RowMenuItem, type RowProps, SearchField, type SearchFieldProps, Section, SectionContent, type SectionProps, type Segment, Segmented, type SegmentedProps, Select, type SelectOption, type SelectProps, type SortState, SourceList, SourceListItem, type SourceListItemProps, SourceListMore, type SourceListMoreProps, SourceListSection, type SourceListSectionProps, Spinner, type SpinnerProps, StateView, type StateViewProps, StatusLight, type StatusLightProps, type StatusTone as StatusLightTone, TEXT_TONE, Tag, type TagProps, type TagTone, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant, Toolbar, ToolbarDivider, type ToolbarProps, ToolbarSpacer, buttonVariants, cn, errorMessage, formatAge, formatBytes, formatClockTime, formatDuration, formatRelativeTime, formatUsage, meterTone };
+export { Banner, type BannerProps, type BannerTone, Button, type ButtonProps, CodeBlock, type CodeBlockProps, type Column, ComingSoon, type ComingSoonProps, DataTable, type DataTableProps, ErrorBanner, type ErrorBannerProps, FIELD, FieldRow, type FieldRowProps, IconButton, type IconButtonProps, Kbd, METER_THRESHOLDS, Meter, type MeterProps, Page, PageHeader, type PageHeaderProps, type PageProps, type PageWidth, PlaceMark, type PlaceMarkProps, type PlaceMarkState, PlaceStrip, Resource, type ResourceProps, type ResourceState, Row, type RowAction, type RowMenuItem, type RowProps, SearchField, type SearchFieldProps, Section, SectionContent, type SectionProps, type Segment, Segmented, type SegmentedProps, Select, type SelectOption, type SelectProps, type SortState, SourceList, SourceListItem, type SourceListItemProps, SourceListMore, type SourceListMoreProps, SourceListSection, type SourceListSectionProps, Spinner, type SpinnerProps, StateView, type StateViewProps, StatusLight, type StatusLightProps, type StatusTone as StatusLightTone, TEXT_TONE, Tag, type TagProps, type TagTone, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant, Toolbar, ToolbarDivider, type ToolbarProps, ToolbarSpacer, buttonVariants, cn, errorMessage, formatAge, formatBytes, formatClockTime, formatDuration, formatRelativeTime, formatUsage, meterTone };

package/dist/desktop.d.ts

@@ -465,6 +465,23 @@ interface StatusLightProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
 declare function StatusLight({ tone, label, className, ...props }: StatusLightProps): React.JSX.Element;
 /** A keyboard shortcut, e.g. `<Kbd>⌘K</Kbd>`. */
 declare function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
+/**
+ * Where one thing is, per place (a chat per window): `in` filled, `out` an empty ring, `hidden` a
+ * tint ring (there, but that place does not show it), `open` green (in use there now). `marked`
+ * adds a small dot inside (the place's own mark, e.g. its pin). 12 px; the label is the tooltip
+ * and the accessible name, so a mark is never unexplained.
+ */
+type PlaceMarkState = "in" | "out" | "hidden" | "open";
+interface PlaceMarkProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    state: PlaceMarkState;
+    /** The place's own mark on the thing (a pin): a dot inside the circle. */
+    marked?: boolean;
+    /** What the mark says ("emily: listed, pinned"); tooltip and accessible name. */
+    label: string;
+}
+declare function PlaceMark({ state, marked, label, className, ...props }: PlaceMarkProps): React.JSX.Element;
+/** A row of PlaceMarks in a fixed order (one per place), e.g. a chat's windows in a table cell. */
+declare function PlaceStrip({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
 
 /**
  * Display formatting for desktop screens: ONE way to show a size, a duration, a time and an error.
@@ -484,4 +501,4 @@ declare function formatClockTime(at: Date | number | string | null | undefined):
 /** How much of a capacity is used, in the same words everywhere: "183 GB of 275 GB in use". */
 declare function formatUsage(used: number | null | undefined, total: number | null | undefined): string;
 
-export { Banner, type BannerProps, type BannerTone, Button, type ButtonProps, CodeBlock, type CodeBlockProps, type Column, ComingSoon, type ComingSoonProps, DataTable, type DataTableProps, ErrorBanner, type ErrorBannerProps, FIELD, FieldRow, type FieldRowProps, IconButton, type IconButtonProps, Kbd, METER_THRESHOLDS, Meter, type MeterProps, Page, PageHeader, type PageHeaderProps, type PageProps, type PageWidth, Resource, type ResourceProps, type ResourceState, Row, type RowAction, type RowMenuItem, type RowProps, SearchField, type SearchFieldProps, Section, SectionContent, type SectionProps, type Segment, Segmented, type SegmentedProps, Select, type SelectOption, type SelectProps, type SortState, SourceList, SourceListItem, type SourceListItemProps, SourceListMore, type SourceListMoreProps, SourceListSection, type SourceListSectionProps, Spinner, type SpinnerProps, StateView, type StateViewProps, StatusLight, type StatusLightProps, type StatusTone as StatusLightTone, TEXT_TONE, Tag, type TagProps, type TagTone, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant, Toolbar, ToolbarDivider, type ToolbarProps, ToolbarSpacer, buttonVariants, cn, errorMessage, formatAge, formatBytes, formatClockTime, formatDuration, formatRelativeTime, formatUsage, meterTone };
+export { Banner, type BannerProps, type BannerTone, Button, type ButtonProps, CodeBlock, type CodeBlockProps, type Column, ComingSoon, type ComingSoonProps, DataTable, type DataTableProps, ErrorBanner, type ErrorBannerProps, FIELD, FieldRow, type FieldRowProps, IconButton, type IconButtonProps, Kbd, METER_THRESHOLDS, Meter, type MeterProps, Page, PageHeader, type PageHeaderProps, type PageProps, type PageWidth, PlaceMark, type PlaceMarkProps, type PlaceMarkState, PlaceStrip, Resource, type ResourceProps, type ResourceState, Row, type RowAction, type RowMenuItem, type RowProps, SearchField, type SearchFieldProps, Section, SectionContent, type SectionProps, type Segment, Segmented, type SegmentedProps, Select, type SelectOption, type SelectProps, type SortState, SourceList, SourceListItem, type SourceListItemProps, SourceListMore, type SourceListMoreProps, SourceListSection, type SourceListSectionProps, Spinner, type SpinnerProps, StateView, type StateViewProps, StatusLight, type StatusLightProps, type StatusTone as StatusLightTone, TEXT_TONE, Tag, type TagProps, type TagTone, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, type TextTone, type TextVariant, Toolbar, ToolbarDivider, type ToolbarProps, ToolbarSpacer, buttonVariants, cn, errorMessage, formatAge, formatBytes, formatClockTime, formatDuration, formatRelativeTime, formatUsage, meterTone };

package/dist/desktop.js

@@ -2378,6 +2378,37 @@ function Kbd({ className, ...props }) {
     }
   );
 }
+var PLACE = {
+  in: "bg-tint",
+  out: "border border-label-tertiary",
+  hidden: "border-2 border-tint",
+  open: "bg-system-green"
+};
+var PLACE_DOT = {
+  in: "bg-window",
+  out: "bg-label-secondary",
+  hidden: "bg-tint",
+  open: "bg-window"
+};
+function PlaceMark({ state, marked = false, label, className, ...props }) {
+  return /* @__PURE__ */ jsx26(
+    "span",
+    {
+      role: "img",
+      "aria-label": label,
+      title: label,
+      "data-slot": "place-mark",
+      "data-state": state,
+      "data-marked": marked ? "true" : void 0,
+      className: cn("inline-flex size-3 shrink-0 items-center justify-center rounded-full", PLACE[state], className),
+      ...props,
+      children: marked ? /* @__PURE__ */ jsx26("span", { className: cn("size-1.5 rounded-full", PLACE_DOT[state]) }) : null
+    }
+  );
+}
+function PlaceStrip({ className, ...props }) {
+  return /* @__PURE__ */ jsx26("span", { "data-slot": "place-strip", className: cn("inline-flex items-center gap-1", className), ...props });
+}
 
 // src/desktop/coming-soon.tsx
 import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
@@ -3487,6 +3518,8 @@ export {
   OrganizationMark,
   Page,
   PageHeader,
+  PlaceMark,
+  PlaceStrip,
   Popover,
   PopoverAnchor,
   PopoverContent,