@ai-matrx/design-system 0.61.19 → 0.61.21

package/dist/desktop.d.cts

@@ -334,6 +334,9 @@ interface SourceListItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
     badge?: React.ReactNode;
     /** This row is the open page. */
     current?: boolean;
+    /** Not built yet: drawn dimmed with no hint (it still opens its Coming soon page). One look for
+     *  every unbuilt row, so no list repeats "Coming soon" row after row. */
+    soon?: boolean;
 }
 declare const SourceListItem: React.ForwardRefExoticComponent<SourceListItemProps & React.RefAttributes<HTMLButtonElement>>;
 /** "Show more / Show less" under a long section. */
@@ -462,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.
@@ -481,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

@@ -334,6 +334,9 @@ interface SourceListItemProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
     badge?: React.ReactNode;
     /** This row is the open page. */
     current?: boolean;
+    /** Not built yet: drawn dimmed with no hint (it still opens its Coming soon page). One look for
+     *  every unbuilt row, so no list repeats "Coming soon" row after row. */
+    soon?: boolean;
 }
 declare const SourceListItem: React.ForwardRefExoticComponent<SourceListItemProps & React.RefAttributes<HTMLButtonElement>>;
 /** "Show more / Show less" under a long section. */
@@ -462,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.
@@ -481,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

@@ -2175,7 +2175,7 @@ function SourceListSection({ title, action, className, children, ...props }) {
     children
   ] });
 }
-var SourceListItem = React19.forwardRef(function SourceListItem2({ icon, label, hint, badge, current, className, type = "button", ...props }, ref) {
+var SourceListItem = React19.forwardRef(function SourceListItem2({ icon, label, hint, badge, current, soon, className, type = "button", ...props }, ref) {
   return /* @__PURE__ */ jsxs13(
     "button",
     {
@@ -2183,10 +2183,12 @@ var SourceListItem = React19.forwardRef(function SourceListItem2({ icon, label,
       type,
       "data-slot": "source-list-item",
       "data-current": current || void 0,
+      "data-soon": soon || void 0,
       "aria-current": current ? "page" : void 0,
       className: cn(
         "focus-ring group/item flex w-full items-center gap-2 rounded-control px-2 text-left text-body text-label transition-colors duration-100 hover:bg-fill disabled:opacity-40",
-        hint ? "min-h-row py-1" : "h-sidebar-row",
+        hint && !soon ? "min-h-row py-1" : "h-sidebar-row",
+        soon && "text-label-tertiary",
         current && "bg-selection-muted font-medium hover:bg-selection-muted [[data-window-active=false]_&]:bg-fill",
         className
       ),
@@ -2195,7 +2197,7 @@ var SourceListItem = React19.forwardRef(function SourceListItem2({ icon, label,
         icon ? /* @__PURE__ */ jsx23("span", { className: cn("flex size-icon shrink-0 items-center justify-center text-label-secondary [&_svg]:size-icon", hint && "self-start mt-px"), children: icon }) : null,
         /* @__PURE__ */ jsxs13("span", { className: "flex min-w-0 flex-1 flex-col", children: [
           /* @__PURE__ */ jsx23("span", { className: "truncate", children: label }),
-          hint ? /* @__PURE__ */ jsx23("span", { className: "truncate text-callout font-normal text-label-secondary", children: hint }) : null
+          hint && !soon ? /* @__PURE__ */ jsx23("span", { className: "truncate text-callout font-normal text-label-secondary", children: hint }) : null
         ] }),
         badge ? /* @__PURE__ */ jsx23("span", { className: "flex shrink-0 items-center text-callout tabular-nums text-label-tertiary", children: badge }) : null
       ]
@@ -2376,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";
@@ -3485,6 +3518,8 @@ export {
   OrganizationMark,
   Page,
   PageHeader,
+  PlaceMark,
+  PlaceStrip,
   Popover,
   PopoverAnchor,
   PopoverContent,