@domicile-desktop/component-library 0.0.0-alpha-0bd0d2a4d04f → 0.0.0-alpha-a2ee8eaa5f91

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-0bd0d2a4d04f",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-0bd0d2a4d04f",
+    "@domicile-desktop/sdk": "0.0.0-alpha-a2ee8eaa5f91",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-a2ee8eaa5f91",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -159,5 +159,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-0bd0d2a4d04f"
+  "version": "0.0.0-alpha-a2ee8eaa5f91"
 }

package/src/Autocomplete/Autocomplete.tsx

@@ -36,6 +36,11 @@ type CommonProps<V> = Partial<ControlVariant> & {
   disabled?: boolean | undefined;
   /** Shown in place of the list when `suggestions` is empty. */
   emptyMessage?: ReactNode | undefined;
+  /**
+   * A tinted field with no edge until hovered or focused, as in an address
+   * bar, which sits on a toolbar rather than on a page.
+   */
+  filled?: boolean | undefined;
   onSuggestionTaken?: ((value: V) => void) | undefined;
   onValueChange?: ((value: string) => void) | undefined;
   rounded?: boolean | undefined;
@@ -74,6 +79,7 @@ export const Autocomplete = <V,>({
   autoHighlight = false,
   disabled,
   emptyMessage,
+  filled = false,
   onSuggestionTaken,
   onValueChange,
   prefixButtons,
@@ -107,7 +113,7 @@ export const Autocomplete = <V,>({
         className={cx(
           control({ size }),
           wrapperBase,
-          wrapperStyles({ rounded, size }),
+          wrapperStyles({ filled, rounded, size }),
         )}
         onMouseDown={focusControlOnMouseDown}
         ref={attach}
@@ -211,6 +217,15 @@ const wrapperStyles = cva({
     { css: { paddingInline: 11.5 }, rounded: true, size: "4xl" },
   ],
   variants: {
+    // `wrapperBase` still draws the hover and focus edges.
+    filled: {
+      false: {},
+      true: {
+        backgroundColor: "card",
+        borderColor: "transparent",
+        borderRadius: "lg",
+      },
+    },
     rounded: {
       true: { borderRadius: "full" },
     },

package/src/FilePicker/FilePicker.tsx

@@ -820,13 +820,16 @@ const sidebarStyles = flex({
 
 const placesStyles = flex({
   "& > button": {
+    // 13px, the desktop's text size, as the folder's rows.
+    fontSize: "0.8125rem",
     gap: 2.5,
     inlineSize: "100%",
     justifyContent: "flex-start",
   },
   "& > button[aria-current=location]": {
-    backgroundColor: "color-mix(in oklab, {colors.accent} 16%, transparent)",
-    color: "accent",
+    backgroundColor:
+      "color-mix(in oklab, {colors.foreground} 10%, transparent)",
+    color: "foreground",
     fontWeight: "semibold",
   },
   direction: "column",
@@ -883,7 +886,11 @@ const crumbSeparatorStyles = css({
 });
 
 const resultsStyles = css({
-  backgroundColor: "color-mix(in oklab, {colors.background} 30%, transparent)",
+  // White in light mode, as a document is.
+  backgroundColor: {
+    _light: "color-mix(in oklab, {colors.white} 80%, transparent)",
+    base: "color-mix(in oklab, {colors.background} 30%, transparent)",
+  },
   border: "1px solid {colors.border}",
   borderRadius: "lg",
   flex: "1 1 auto",
@@ -902,7 +909,8 @@ const columnsStyles = grid({
   backgroundColor: "color-mix(in oklab, {colors.card} 70%, transparent)",
   color: "textTertiary",
   columnGap: 3,
-  fontSize: "2xs",
+  // 11px, which has no scale token.
+  fontSize: "0.6875rem",
   fontWeight: "semibold",
   gridTemplateColumns: "minmax(0, 1fr) {spacing.32}",
   insetBlockStart: 0,
@@ -927,21 +935,14 @@ const rowStyles = grid({
   _hoverEnabled: {
     backgroundColor: "color-mix(in oklab, {colors.foreground} 5%, transparent)",
   },
-  // The tile color shows the file kind. Tones that blend two hues mix in
-  // OKLCH, since OKLab mixing passes through gray.
-  "& [data-row-tile]": {
-    backgroundColor: "color-mix(in oklab, var(--tone) 16%, transparent)",
-    borderColor: "color-mix(in oklab, var(--tone) 26%, transparent)",
-    color: "var(--tone)",
-  },
+  "--tone": "{colors.muted}",
+  // A plain glyph, teal for a folder and gray for anything else, so folders
+  // stand out without a tile behind every row.
+  "& [data-row-tile]": { color: "var(--tone)" },
+  // A neutral wash: color is kept for focus and the main action.
   "&[data-highlighted]": {
-    backgroundImage:
-      "linear-gradient(to right, color-mix(in oklab, {colors.accent} 30%, transparent), color-mix(in oklab, {colors.accent} 8%, transparent))",
-  },
-  "&[data-highlighted] [data-row-tile]": {
-    backgroundColor: "color-mix(in oklab, {colors.accent} 28%, transparent)",
-    borderColor: "color-mix(in oklab, {colors.accent} 45%, transparent)",
-    color: "accent",
+    backgroundColor:
+      "color-mix(in oklab, {colors.foreground} 10%, transparent)",
   },
   "&[data-marked] [data-row-tile]": {
     backgroundColor: "accent",
@@ -952,24 +953,8 @@ const rowStyles = grid({
   "&[data-replaced]": {
     backgroundColor: "color-mix(in oklab, {colors.warning} 14%, transparent)",
   },
-  "&[data-tone=archive]": { "--tone": "{colors.warning}" },
-  "&[data-tone=audio]": {
-    "--tone": "color-mix(in oklch, {colors.warning} 50%, {colors.danger})",
-  },
-  "&[data-tone=code]": { "--tone": "{colors.success}" },
-  "&[data-tone=document]": {
-    "--tone": "color-mix(in oklab, {colors.accent} 45%, {colors.foreground})",
-  },
   "&[data-tone=folder]": { "--tone": "{colors.accent}" },
-  "&[data-tone=image]": {
-    "--tone": "color-mix(in oklch, {colors.danger} 55%, {colors.accent})",
-  },
-  "&[data-tone=other]": { "--tone": "{colors.muted}" },
-  "&[data-tone=parent]": { "--tone": "{colors.muted}", color: "muted" },
-  "&[data-tone=pdf]": { "--tone": "{colors.danger}" },
-  "&[data-tone=video]": {
-    "--tone": "color-mix(in oklch, {colors.danger} 80%, {colors.warning})",
-  },
+  "&[data-tone=parent]": { color: "muted" },
   alignItems: "center",
   borderRadius: "md",
   color: "foreground",
@@ -994,7 +979,8 @@ const rowTileStyles = css({
 });
 
 const rowNameStyles = css({
-  fontSize: "sm",
+  // 13px, the desktop's text size, between the scale's 12px and 14px.
+  fontSize: "0.8125rem",
   fontWeight: "medium",
   overflow: "hidden",
   textOverflow: "ellipsis",

package/src/Input/Input.tsx

@@ -17,6 +17,11 @@ export { SIZES, type Size } from "../control-sizes";
 
 type CommonProps = Partial<ControlVariant> & {
   clearable?: boolean | undefined;
+  /**
+   * No box: just the text and its icons, for a field that heads a panel. It
+   * draws no edge, fill or focus ring.
+   */
+  flush?: boolean | undefined;
   prefixIcon?: ReactNode | undefined;
   // Narrower than base-ui's `Ref<HTMLElement>` since this always renders an
   // `<input>`. Ref objects are invariant, so the wider type would need a cast.
@@ -36,6 +41,7 @@ type Props = ExtendProps<
 
 export const Input = ({
   clearable = false,
+  flush = false,
   prefixIcon,
   rounded = false,
   size = "md",
@@ -74,8 +80,9 @@ export const Input = ({
       className={cx(
         control({ size }),
         wrapperBase,
-        wrapperStyles({ rounded, size }),
+        wrapperStyles({ flush, rounded, size }),
       )}
+      data-flush={flush ? "" : undefined}
       onMouseDown={focusControlOnMouseDown}
       style={controlSizingStyle({ width })}
     >
@@ -133,6 +140,20 @@ const wrapperStyles = cva({
     { css: { paddingInline: 11.5 }, rounded: true, size: "4xl" },
   ],
   variants: {
+    // `wrapperBase` and glass surfaces skip their edges and fills for
+    // `[data-flush]`.
+    // Under `[data-flush]`, to outrank `wrapperBase`'s own fill and edge.
+    flush: {
+      false: {},
+      true: {
+        "&[data-flush]": {
+          backgroundColor: "transparent",
+          borderColor: "transparent",
+          borderRadius: 0,
+          outlineStyle: "none",
+        },
+      },
+    },
     rounded: {
       true: { borderRadius: "full" },
     },

package/src/ModalDialog/ModalDialog.tsx

@@ -31,8 +31,8 @@ export const SURFACES = ["card", "glass"] as const;
 export type Surface = (typeof SURFACES)[number];
 
 /**
- * The popup's width. `lg` fits rows with several columns; `xl` fits a list
- * beside a preview.
+ * The popup's width. `lg` fits rows with several columns, or a compact list
+ * beside a preview; `xl` fits a roomy list beside a preview.
  */
 export const SIZES = ["md", "lg", "xl"] as const;
 export type Size = (typeof SIZES)[number];
@@ -68,6 +68,11 @@ type Props = ExtendProps<
     size?: Size | undefined;
     surface?: Surface | undefined;
     title?: ReactNode | undefined;
+    /**
+     * Whether `title` is for screen readers only, as when the popup's first
+     * control already says what it is for.
+     */
+    titleHidden?: boolean | undefined;
     trigger?: ReactElement | undefined;
   }
 >;
@@ -83,6 +88,7 @@ const ModalDialogComponent = ({
   size = "md",
   surface = "card",
   title,
+  titleHidden = false,
   trigger,
   ...rootProps
 }: Props) => {
@@ -119,7 +125,12 @@ const ModalDialogComponent = ({
               finalFocus={returnFocus}
               onKeyDown={moveFooterFocus}
             >
-              {title !== undefined && (
+              {title !== undefined && titleHidden && (
+                <BaseDialog.Title className={hiddenTitleStyles}>
+                  {title}
+                </BaseDialog.Title>
+              )}
+              {title !== undefined && !titleHidden && (
                 <header
                   className={headerStyles({ hasCloseButton: closeButton })}
                 >
@@ -143,7 +154,7 @@ const ModalDialogComponent = ({
                 className={bodyStyles({
                   hasCloseButton: closeButton,
                   hasFooter: footer !== undefined,
-                  hasTitle: title !== undefined,
+                  hasTitle: title !== undefined && !titleHidden,
                 })}
               >
                 {children}
@@ -225,7 +236,7 @@ const popupStyles = flex({
     marginBlockStart: "8cqh",
   },
   "&[data-size=lg]": {
-    inlineSize: "min({spacing.180}, 92cqw)",
+    inlineSize: "min({spacing.220}, 92cqw)",
   },
   "&[data-size=xl]": {
     inlineSize: "min({spacing.320}, 92cqw)",
@@ -241,20 +252,24 @@ const popupStyles = flex({
       position: "absolute",
     },
     backdropFilter: "blur({spacing.5}) saturate(180%)",
-    backgroundColor: "color-mix(in oklab, {colors.card} 62%, transparent)",
+    // Near white in light mode: the light card through blur reads as gray.
+    backgroundColor: {
+      _light: "color-mix(in oklab, {colors.white} 86%, transparent)",
+      base: "color-mix(in oklab, {colors.card} 62%, transparent)",
+    },
     borderColor: "color-mix(in oklab, {colors.foreground} 16%, transparent)",
   },
   // Makes form controls translucent on glass. Controls mark their element
   // with `data-control`, so its parent is the wrapper that paints the
   // background. The descendant selector outranks the wrapper's own class
   // regardless of order (see `_control/wrapperBase.ts`).
-  "&[data-surface=glass] :has(> [data-control])": {
+  "&[data-surface=glass] :has(> [data-control]):not([data-flush])": {
     backgroundColor:
       "color-mix(in oklab, {colors.background} 45%, transparent)",
   },
   backgroundColor: "card",
   border: "1px solid {colors.border}",
-  borderRadius: "lg",
+  borderRadius: "0.875rem",
   boxShadow: "modal",
   direction: "column",
   inlineSize: "min({spacing.120}, 92cqw)",
@@ -293,6 +308,8 @@ const titleStyles = css({
   margin: 0,
 });
 
+const hiddenTitleStyles = css({ srOnly: true });
+
 const closeStyles = css({
   insetBlockStart: 3,
   insetInlineEnd: 3,

package/src/PortalDialogs/AccessDialog.tsx

@@ -13,44 +13,56 @@ type Props = {
 };
 
 /** A yes/no question from an application. Dismissing it denies. */
-export const AccessDialog = ({ answer, asker, body, screen }: Props) => (
-  <ModalDialog
-    closeButton={false}
-    footer={
-      <>
-        <Button
-          onClick={() => {
-            answer(Answer.Canceled());
-          }}
-          variant="outline"
-        >
-          {body.denyLabel ?? "Deny"}
-        </Button>
-        <Button
-          onClick={() => {
-            answer(Answer.Access());
-          }}
-          variant={body.destructive ? "danger" : "primary"}
-        >
-          {body.grantLabel ?? "Allow"}
-        </Button>
-      </>
-    }
-    onOpenChange={(open) => {
-      if (!open) {
-        answer(Answer.Canceled());
+export const AccessDialog = ({ answer, asker, body, screen }: Props) => {
+  // One line under the title. The subtitle mostly restates the title, so the
+  // body wins when there is one.
+  const detail = [body.body, body.subtitle].find((text) => text !== "");
+  return (
+    <ModalDialog
+      closeButton={false}
+      footer={
+        <>
+          {asker !== undefined && (
+            <p className={askerStyles}>{`${asker} asks`}</p>
+          )}
+          <Button
+            onClick={() => {
+              answer(Answer.Canceled());
+            }}
+            variant="outline"
+          >
+            {body.denyLabel ?? "Deny"}
+          </Button>
+          <Button
+            onClick={() => {
+              answer(Answer.Access());
+            }}
+            variant={body.destructive ? "danger" : "accent"}
+          >
+            {body.grantLabel ?? "Allow"}
+          </Button>
+        </>
       }
-    }}
-    open
-    screen={screen}
-    title={body.title}
-  >
-    {asker !== undefined && <p className={askerStyles}>{`${asker} asks`}</p>}
-    {body.subtitle !== "" && <p className={textStyles}>{body.subtitle}</p>}
-    {body.body !== "" && <p className={textStyles}>{body.body}</p>}
-  </ModalDialog>
-);
+      onOpenChange={(open) => {
+        if (!open) {
+          answer(Answer.Canceled());
+        }
+      }}
+      open
+      screen={screen}
+      title={body.title}
+    >
+      {detail !== undefined && <p className={detailStyles}>{detail}</p>}
+    </ModalDialog>
+  );
+};
 
-const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
+// Who asks sits opposite the buttons, leaving the body one line.
+const askerStyles = css({
+  color: "muted",
+  fontSize: "0.8125rem",
+  margin: 0,
+  marginInlineEnd: "auto",
+});
 
-const textStyles = css({ color: "foreground", margin: 0 });
+const detailStyles = css({ color: "muted", margin: 0 });

package/src/_control/wrapperBase.ts

@@ -7,7 +7,8 @@ import { css } from "../../styled-system/css";
  * it, marked `data-control`. Selectors always target `[data-control]` so
  * suffix buttons can't affect the wrapper; a disabled Send button must not
  * gray out the textarea. Precedence is disabled, invalid, focused, hovered,
- * enforced by the `:not(...)` chains.
+ * enforced by the `:not(...)` chains. A `[data-flush]` wrapper (a flush
+ * `Input`) draws no hover or focus edge.
  *
  * The wrapper looks focused when the control has `:focus`,
  * `[data-popup-open]` (a Select popup holds focus), or `[data-active]`
@@ -31,7 +32,7 @@ export const wrapperBase = css({
   "&:has([data-control]:is(:focus, [data-popup-open], [data-active]))": {
     color: "foreground",
   },
-  "&:has([data-control]:is(:focus, [data-popup-open], [data-active])):not(:has([data-control][data-invalid]))":
+  "&:has([data-control]:is(:focus, [data-popup-open], [data-active])):not(:has([data-control][data-invalid])):not([data-flush])":
     {
       borderColor: "accent",
       outlineColor: "accent",
@@ -65,7 +66,7 @@ export const wrapperBase = css({
   "&:has([data-control][data-resizing]) [data-resize-handle]": {
     color: "muted",
   },
-  "&:is(:hover, :has([data-control][data-resizing])):not(:has([data-control]:disabled)):not(:has([data-control]:is(:focus, [data-popup-open], [data-active]))):not(:has([data-control][data-invalid]))":
+  "&:is(:hover, :has([data-control][data-resizing])):not(:has([data-control]:disabled)):not(:has([data-control]:is(:focus, [data-popup-open], [data-active]))):not(:has([data-control][data-invalid])):not([data-flush])":
     {
       borderColor: "muted",
     },