@ai-matrx/vault 0.1.8 → 0.1.9

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { Look } from '@ai-matrx/design-system';
 import { KnobClient } from '@ai-matrx/data/knobs';
 import * as account from '@ai-matrx/api/account';
 import { Api } from '@ai-matrx/api';
@@ -1192,6 +1193,12 @@ interface VaultAppProps {
     onLocationChange?: (next: VaultLocation, how: "push" | "replace") => void;
     /** The host's own toasts; without it the vault shows its own short notices. */
     notify?: Notify;
+    /**
+     * The skin, never the screens: `"web"` (default) is the website's and the extension's look;
+     * `"desktop"` draws the same workspace in the desktop standard (Matrx Desktop: the system font,
+     * Apple's text styles, AppKit controls and grouped boxes, sheets for panels, light and dark).
+     */
+    look?: Look;
 }
 /** THE VAULT WORKSPACE: one component for the web app, the extension side panel and the desktop app. */
 declare function VaultApp(props: VaultAppProps): react.JSX.Element;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { Look } from '@ai-matrx/design-system';
 import { KnobClient } from '@ai-matrx/data/knobs';
 import * as account from '@ai-matrx/api/account';
 import { Api } from '@ai-matrx/api';
@@ -1192,6 +1193,12 @@ interface VaultAppProps {
     onLocationChange?: (next: VaultLocation, how: "push" | "replace") => void;
     /** The host's own toasts; without it the vault shows its own short notices. */
     notify?: Notify;
+    /**
+     * The skin, never the screens: `"web"` (default) is the website's and the extension's look;
+     * `"desktop"` draws the same workspace in the desktop standard (Matrx Desktop: the system font,
+     * Apple's text styles, AppKit controls and grouped boxes, sheets for panels, light and dark).
+     */
+    look?: Look;
 }
 /** THE VAULT WORKSPACE: one component for the web app, the extension side panel and the desktop app. */
 declare function VaultApp(props: VaultAppProps): react.JSX.Element;

package/dist/index.js

@@ -102,7 +102,7 @@ var init_keepass_xml_worker_client = __esm({
 
 // src/VaultApp.tsx
 import { useCallback as useCallback5, useEffect as useEffect23, useMemo as useMemo6, useRef as useRef19, useState as useState40 } from "react";
-import { DropdownMenu as DropdownMenu6, DropdownMenuContent as DropdownMenuContent6, DropdownMenuItem as DropdownMenuItem5, DropdownMenuTrigger as DropdownMenuTrigger6 } from "@ai-matrx/design-system";
+import { DropdownMenu as DropdownMenu6, DropdownMenuContent as DropdownMenuContent6, DropdownMenuItem as DropdownMenuItem5, DropdownMenuTrigger as DropdownMenuTrigger6, LookScope } from "@ai-matrx/design-system";
 import { Button as Button33, SearchField as SearchField4, Select as Select11 } from "@ai-matrx/design-system/controls";
 import { confirm as confirm13 } from "@ai-matrx/kit/confirm-opener";
 
@@ -560,7 +560,7 @@ function useElementWidth(ref) {
 // src/ui.tsx
 import { createContext as createContext4, useContext as useContext4, useEffect as useEffect4, useState as useState4 } from "react";
 import { Dialog as Dialog2, DialogContent as DialogContent2, DialogFooter, DialogHeader as DialogHeader2, DialogTitle as DialogTitle2 } from "@ai-matrx/design-system";
-import { cn as cn2 } from "@ai-matrx/design-system";
+import { cn as cn2, useLook } from "@ai-matrx/design-system";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var InPanel = createContext4(false);
 var Room = createContext4(null);
@@ -581,12 +581,13 @@ function useRoomOf(ref) {
 var RoomProvider = Room.Provider;
 function Section({ title, actions, children, className }) {
   const flat = useContext4(InPanel);
+  const desktop = useLook() === "desktop";
   return /* @__PURE__ */ jsxs4("section", { className: cn2("flex flex-col gap-1.5", className), children: [
     title || actions ? /* @__PURE__ */ jsxs4("div", { className: "flex min-h-7 items-center justify-between gap-2 px-1", children: [
-      title ? /* @__PURE__ */ jsx4("h3", { className: "text-xs font-medium text-muted-foreground", children: title }) : /* @__PURE__ */ jsx4("span", {}),
+      title ? /* @__PURE__ */ jsx4("h3", { className: desktop ? "text-sm font-semibold text-foreground" : "text-xs font-medium text-muted-foreground", children: title }) : /* @__PURE__ */ jsx4("span", {}),
       actions ? /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-1", children: actions }) : null
     ] }) : null,
-    /* @__PURE__ */ jsx4("div", { className: flat ? "-mx-3 flex flex-col sm:-mx-4" : "flex flex-col rounded-xl border border-border bg-card py-1", children })
+    /* @__PURE__ */ jsx4("div", { className: flat ? "-mx-3 flex flex-col sm:-mx-4" : desktop ? "flex flex-col divide-y divide-border rounded-xl bg-card" : "flex flex-col rounded-xl border border-border bg-card py-1", children })
   ] });
 }
 var ROW_GRID = {
@@ -7550,7 +7551,7 @@ function MatchRow({ itemId, item, tag, family, port, busy, running, onOpen, onFi
 
 // src/Sidebar.tsx
 import { useState as useState39 } from "react";
-import { cn as cn15 } from "@ai-matrx/design-system";
+import { cn as cn15, useLook as useLook2 } from "@ai-matrx/design-system";
 import { Select as Select10 } from "@ai-matrx/design-system/controls";
 import { jsx as jsx38, jsxs as jsxs36 } from "react/jsx-runtime";
 function vaultChoices(items, organizations, current) {
@@ -7610,13 +7611,14 @@ function viewOptions(views, allCount, deletedCount, hasFavorites, hasRecents, ha
   ];
 }
 function Entry({ on, glyph: Icon, label, count: count2, onClick }) {
+  const desktop = useLook2() === "desktop";
   return /* @__PURE__ */ jsxs36(
     "button",
     {
       type: "button",
       "aria-current": on ? "page" : void 0,
       onClick,
-      className: cn15("flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm", on ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"),
+      className: cn15("flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-sm", on ? desktop ? "bg-sidebar-accent text-primary" : "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent"),
       children: [
         /* @__PURE__ */ jsx38(Icon, { className: "size-4 shrink-0" }),
         /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate", children: label }),
@@ -7713,7 +7715,7 @@ function VaultApp(props) {
   const lock = props.host?.lock;
   const locked = useLocked(lock);
   const port = useMemo6(() => lock ? guardPort(props.port, () => lock.locked()) : props.port, [props.port, lock]);
-  return /* @__PURE__ */ jsx39("div", { className: "relative h-full min-h-0 w-full", children: /* @__PURE__ */ jsx39(NoticeProvider, { notify: props.notify, children: lock && locked ? /* @__PURE__ */ jsx39(LockedScreen, { lock }) : /* @__PURE__ */ jsx39(ClipboardProvider, { clipboard: props.host?.clipboard, children: /* @__PURE__ */ jsx39(RevealSecondsProvider, { seconds: props.host?.revealSeconds, children: /* @__PURE__ */ jsx39(IdentityGate, { identity: props.host?.identity, children: /* @__PURE__ */ jsx39(GeneratorLimitsProvider, { resolve: generatorLimitsFrom(props.host?.knobs), children: /* @__PURE__ */ jsx39(Workspace, { ...props, port }) }) }) }) }) }) });
+  return /* @__PURE__ */ jsx39(LookScope, { look: props.look ?? "web", className: "h-full min-h-0 w-full", children: /* @__PURE__ */ jsx39("div", { className: "relative h-full min-h-0 w-full", children: /* @__PURE__ */ jsx39(NoticeProvider, { notify: props.notify, children: lock && locked ? /* @__PURE__ */ jsx39(LockedScreen, { lock }) : /* @__PURE__ */ jsx39(ClipboardProvider, { clipboard: props.host?.clipboard, children: /* @__PURE__ */ jsx39(RevealSecondsProvider, { seconds: props.host?.revealSeconds, children: /* @__PURE__ */ jsx39(IdentityGate, { identity: props.host?.identity, children: /* @__PURE__ */ jsx39(GeneratorLimitsProvider, { resolve: generatorLimitsFrom(props.host?.knobs), children: /* @__PURE__ */ jsx39(Workspace, { ...props, port }) }) }) }) }) }) }) });
 }
 function LockedScreen({ lock }) {
   const [busy, setBusy] = useState40(false);