@multiplatform.one/backoffice 6.7.0 → 7.0.0

package/src/views/viewAvailability.ts

@@ -0,0 +1,85 @@
+// Meta-derived view availability — the single source of truth for which
+// backoffice views a doctype's switcher offers (desk ListViewSelect parity,
+// frappe/public/js/frappe/list/list_view_select.js @ frappe 15.8.1).
+//
+// Desk's per-view conditions, verified against the live bench (getdoctype
+// RPC payloads + the desk switcher itself — see
+// p-results/audit-view-switcher-meta.md):
+//   List / Report / Dashboard — unconditional.
+//   Tree     — frappe.treeview_settings[doctype] (registered by the meta's
+//              `__tree_js` asset) OR meta.is_tree.
+//   Image    — meta.image_field only (desk `list_view.meta.image_field`).
+//              A stray Attach Image field is not an image view.
+//   Kanban   — a visible Select field with options. Desk offers Kanban
+//              unconditionally (except File) and dead-ends doctypes without
+//              a Select field in a "No Select Field Found" modal. A board
+//              cannot even be created without a Select field, so that shape
+//              is truly unsupported and we hide it. A doctype WITH a Select
+//              field but no Kanban Board doc is supported but unconfigured:
+//              it stays visible, and KanbanView offers "Create board"
+//              rather than an empty board.
+//   Calendar — desk gates on frappe.views.calendar[doctype], populated by
+//              evaluating the meta's `__calendar_js` asset. A Date field
+//              alone is not a calendar config (Activity Log has
+//              communication_date and must not grow a Calendar tab).
+// Desk-only views the backoffice does not implement (Gantt, Inbox, Map,
+// File manager) are out of scope — BACKOFFICE_VIEWS does not contain them.
+import { BACKOFFICE_VIEWS, type BackofficeView } from "../navigation/paths";
+import type { DoctypeMeta } from "../shared/useDoctypeMeta";
+import { detectSelectField } from "./viewMeta";
+
+/** Views offered for every doctype (desk parity: condition literally true). */
+const UNCONDITIONAL_VIEWS: ReadonlySet<BackofficeView> = new Set(["list", "report", "dashboard"]);
+
+/**
+ * Can this doctype render `view` at all? (The meta preconditions above.)
+ * "Supported but unconfigured" — e.g. a Select field but no Kanban Board
+ * doc — is supported: config docs gate configuration, never availability.
+ */
+export function isViewSupported(view: BackofficeView, meta: DoctypeMeta): boolean {
+  switch (view) {
+    case "list":
+    case "report":
+    case "dashboard":
+      return true;
+    case "tree":
+      return Boolean(meta.is_tree) || Boolean(meta.__tree_js);
+    case "image":
+      return Boolean(meta.image_field);
+    case "kanban":
+      return Boolean(detectSelectField(meta));
+    case "calendar":
+      return Boolean(meta.__calendar_js);
+  }
+}
+
+export interface DeriveAvailableViewsOptions {
+  /**
+   * The view being rendered right now — always kept in the result so the
+   * switcher stays honest about where you are (e.g. a deep link to
+   * /view/tree on a flat doctype, which renders its own unsupported state).
+   */
+  current?: BackofficeView;
+  /** Host allowlist (capabilities.views.allow ∩ any per-screen allowlist). */
+  allow?: readonly BackofficeView[];
+}
+
+/**
+ * The views a doctype's switcher offers, in canonical BACKOFFICE_VIEWS
+ * order. Pure: fixture meta in, view list out. While meta is still loading
+ * (`undefined`), only the unconditional views are offered — conditional
+ * views stay hidden until meta confirms them rather than flashing in and
+ * out.
+ */
+export function deriveAvailableViews(
+  meta: DoctypeMeta | undefined,
+  options: DeriveAvailableViewsOptions = {},
+): BackofficeView[] {
+  const { current, allow } = options;
+  return BACKOFFICE_VIEWS.filter((candidate) => {
+    if (candidate === current) return true;
+    if (allow && !allow.includes(candidate)) return false;
+    if (!meta) return UNCONDITIONAL_VIEWS.has(candidate);
+    return isViewSupported(candidate, meta);
+  });
+}

package/src/workspace/WorkspaceLinkCard.tsx

@@ -5,12 +5,23 @@
  * Report/Page links go through the slug router best-effort (see
  * `resolveLinkTarget`).
  *
+ * LC-72 CONTAINER-CLIP: the Card frame is the stacked group. Rows stay
+ * square; overflow:hidden on the card cuts the last row's hover/ring to
+ * the outer radius. Keyboard ring is inset so the clip does not sever it
+ * (LC-71). Desk's Card Break `link_count` collapses long lists behind
+ * "+ N more" (capability parity with the links widget).
+ *
  * Rendering gates: link rows targeting doctypes outside the provider's
  * `doctypes` scope are hidden, and DocType/Report rows (list-surface
  * navigations) are hidden entirely when the `views` capability is off.
  */
 import { Card, SizableText, XStack, YStack } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  getGroupPosition,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   useBackofficeCapabilities,
@@ -20,6 +31,7 @@ import {
 } from "../config/BackofficeProvider";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import { createBackofficePaths, type BackofficePaths } from "../navigation/paths";
+import { collapseLinkRows } from "./parseContent";
 import type { WorkspaceLinkGroup, WorkspaceLinkRow } from "./types";
 
 const defaultPaths = createBackofficePaths();
@@ -55,29 +67,62 @@ export function resolveLinkTarget(
   }
 }
 
-function LinkRow({ row }: { row: WorkspaceLinkRow }) {
+function activateOnEnterOrSpace(onPress: () => void) {
+  return ((e: { key?: string; preventDefault?: () => void }) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress();
+    }
+  }) as unknown as () => void;
+}
+
+function LinkRow({
+  row,
+  index,
+  total,
+  pad,
+}: {
+  row: WorkspaceLinkRow;
+  index: number;
+  total: number;
+  pad: string | number;
+}) {
   const navigator = useBackofficeNavigator();
   const paths = useBackofficePaths();
   const target = resolveLinkTarget(row, paths);
+  const position = getGroupPosition(index, total);
+  const disabled = !!target.disabled;
+  const go = () => {
+    if (!disabled && target.path) navigator.navigate(target.path);
+  };
   return (
     <XStack
-      onPress={target.disabled ? undefined : () => target.path && navigator.navigate(target.path)}
-      disabled={target.disabled}
-      opacity={target.disabled ? 0.5 : 1}
-      cursor={target.disabled ? "default" : "pointer"}
+      onPress={disabled ? undefined : go}
+      disabled={disabled}
+      opacity={disabled ? 0.5 : 1}
+      cursor={disabled ? "default" : "pointer"}
       paddingVertical="$1.5"
+      paddingHorizontal={pad}
+      minHeight={36}
       alignItems="center"
       role="link"
       aria-label={row.label}
-      hoverStyle={target.disabled ? undefined : { backgroundColor: "$color3" }}
-      borderRadius="$2"
+      overflow="hidden"
+      borderRadius={0}
+      {...{ "data-group-position": position }}
+      hoverStyle={disabled ? undefined : { backgroundColor: "$color3" }}
+      pressStyle={disabled ? undefined : { backgroundColor: "$color4" }}
+      tabIndex={disabled ? undefined : 0}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+      onKeyDown={disabled ? undefined : activateOnEnterOrSpace(go)}
     >
       <SizableText
         size="$3"
-        color={target.disabled ? "$color10" : "$color12"}
+        color={disabled ? "$color10" : "$color12"}
         numberOfLines={1}
         flexShrink={1}
-        hoverStyle={target.disabled ? undefined : { color: "$color12" }}
       >
         {row.label}
       </SizableText>
@@ -87,13 +132,21 @@ function LinkRow({ row }: { row: WorkspaceLinkRow }) {
 
 export interface WorkspaceLinkCardProps {
   group: WorkspaceLinkGroup;
+  /**
+   * When true (default), honor Card Break `link_count` and collapse extra
+   * links behind "+ N more". The directory turns this off while a filter
+   * is active so matching rows are never hidden.
+   */
+  collapse?: boolean;
 }
 
-export function WorkspaceLinkCard({ group }: WorkspaceLinkCardProps) {
+export function WorkspaceLinkCard({ group, collapse = true }: WorkspaceLinkCardProps) {
   const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { views } = useBackofficeCapabilities();
   const isDoctypeAllowed = useIsDoctypeAllowed();
+  const [expanded, setExpanded] = useState(false);
+  const pad = knobProps.panelPadding.padding;
 
   // Visibility gates: doctype scope + the views capability (DocType/Report
   // rows navigate to list surfaces). Defaults (scope open, views on) keep
@@ -108,32 +161,75 @@ export function WorkspaceLinkCard({ group }: WorkspaceLinkCardProps) {
     return true;
   });
 
+  const preview = collapseLinkRows(visibleLinks, group.breakRow.link_count, {
+    collapse,
+    expanded,
+  });
+  const shown = preview.shown;
+  const hiddenCount = preview.hiddenCount;
+  const showMore = preview.showMore;
+  const rowTotal = shown.length + (showMore ? 1 : 0);
+
   return (
     // LC-10 FRAME-CONTAINMENT: no `height="100%"` — a cyclic percentage
     // against the auto-height grid row zeroed the card's intrinsic height
     // (with the basis-0 inner column) and the links painted past the card
     // border. flexGrow (basis auto) equalizes heights in the stretched grid
     // cell while the content keeps its intrinsic size.
-    <Card flexGrow={1}>
-      <YStack {...knobProps.panelPadding} {...knobProps.gap} flexGrow={1}>
+    //
+    // LC-72 CONTAINER-CLIP: eject Card's default panelPadding so link-row
+    // hover/ring can span the frame; overflow:hidden cuts the last row to
+    // the card radius. Caption keeps its own inset.
+    <Card flexGrow={1} padding={0} overflow="hidden">
+      <YStack paddingHorizontal={pad} paddingTop={pad} paddingBottom="$2">
         {/* Catalog list-group caption (Sidebar section-label treatment):
             small-caps muted label, no underline rule — a full-width rule
             under uneven columns read as table chrome (Axiom 16). */}
         <SizableText size="$2" fontWeight="600" textTransform="uppercase" color="$color11">
           {group.label}
         </SizableText>
-        {visibleLinks.length === 0 ? (
+      </YStack>
+      {visibleLinks.length === 0 ? (
+        <YStack paddingHorizontal={pad} paddingBottom={pad}>
           <SizableText size="$2" color="$color10">
             {t("workspaceCardEmpty", "No links in this section")}
           </SizableText>
-        ) : (
-          <YStack>
-            {visibleLinks.map((row) => (
-              <LinkRow key={row.name} row={row} />
-            ))}
-          </YStack>
-        )}
-      </YStack>
+        </YStack>
+      ) : (
+        <YStack paddingBottom={showMore ? 0 : undefined}>
+          {shown.map((row, index) => (
+            <LinkRow key={row.name} row={row} index={index} total={rowTotal} pad={pad} />
+          ))}
+          {showMore ? (
+            <XStack
+              onPress={() => setExpanded((value) => !value)}
+              cursor="pointer"
+              paddingVertical="$1.5"
+              paddingHorizontal={pad}
+              minHeight={36}
+              alignItems="center"
+              role="button"
+              aria-expanded={expanded}
+              overflow="hidden"
+              borderRadius={0}
+              {...{ "data-group-position": getGroupPosition(shown.length, rowTotal) }}
+              hoverStyle={{ backgroundColor: "$color3" }}
+              pressStyle={{ backgroundColor: "$color4" }}
+              tabIndex={0}
+              outlineWidth={0}
+              focusStyle={{ outlineWidth: 0 }}
+              focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+              onKeyDown={activateOnEnterOrSpace(() => setExpanded((value) => !value))}
+            >
+              <SizableText size="$3" color="$color11" fontWeight="600">
+                {expanded
+                  ? t("workspaceCardShowLess", "Show less")
+                  : t("workspaceCardMore", "+ {{count}} more", { count: hiddenCount })}
+              </SizableText>
+            </XStack>
+          ) : null}
+        </YStack>
+      )}
     </Card>
   );
 }

package/src/workspace/WorkspaceLinkDirectory.tsx

@@ -4,17 +4,24 @@
  * input, so 20–30 links stay fully reachable and searchable (capability
  * parity with desk) without owning the top of the landing page. Expanded by
  * default on desktop-width viewports, collapsed on phones and native.
+ *
+ * LC-71: Filter links SearchInput rings the whole box (magnifier included).
+ * The inner native field paints no outline; Accordion content keeps padding
+ * so a clip ancestor cannot sever the box ring.
  */
 import { EmptyState, Accordion, YStack } from "@multiplatform.one/components";
 import { SearchInput, useViewportGtSm } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureCompositeFocusRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import { filterLinkGroup } from "./parseContent";
 import type { WorkspaceLinkGroup } from "./types";
 import { WorkspaceGrid, type WorkspaceGridItem } from "./WorkspaceGrid";
 import { WorkspaceLinkCard } from "./WorkspaceLinkCard";
 
+export { filterLinkGroup } from "./parseContent";
+
 export interface WorkspaceLinkDirectoryItem {
   /** Stable key from the authored card block. */
   key: string;
@@ -29,22 +36,6 @@ export interface WorkspaceLinkDirectoryProps {
 
 const DIRECTORY_VALUE = "links";
 
-/**
- * Case-insensitive filter over a link group: a match on the group label
- * keeps the whole card; otherwise the card narrows to its matching links
- * (and disappears when none match).
- */
-export function filterLinkGroup(
-  group: WorkspaceLinkGroup,
-  query: string,
-): WorkspaceLinkGroup | undefined {
-  const needle = query.trim().toLowerCase();
-  if (!needle) return group;
-  if (group.label.toLowerCase().includes(needle)) return group;
-  const links = group.links.filter((row) => row.label.toLowerCase().includes(needle));
-  return links.length > 0 ? { ...group, links } : undefined;
-}
-
 export function WorkspaceLinkDirectory({ items }: WorkspaceLinkDirectoryProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const { knobProps } = useResolvedKnobs();
@@ -54,12 +45,15 @@ export function WorkspaceLinkDirectory({ items }: WorkspaceLinkDirectoryProps) {
   // phones/native (SPA render — the viewport is known at first render).
   // Later resizes don't override the user's toggle.
   const [openValue, setOpenValue] = useState(() => (viewportGtSm ? DIRECTORY_VALUE : ""));
+  ensureCompositeFocusRing();
 
   const totalLinks = useMemo(
     () => items.reduce((sum, item) => sum + item.group.links.length, 0),
     [items],
   );
 
+  const filtering = filter.trim().length > 0;
+
   const filteredItems = useMemo<WorkspaceGridItem[]>(
     () =>
       items.flatMap((item) => {
@@ -69,11 +63,11 @@ export function WorkspaceLinkDirectory({ items }: WorkspaceLinkDirectoryProps) {
           {
             key: item.key,
             col: item.col ?? 4,
-            node: <WorkspaceLinkCard group={group} />,
+            node: <WorkspaceLinkCard group={group} collapse={!filtering} />,
           },
         ];
       }),
-    [items, filter],
+    [items, filter, filtering],
   );
 
   return (
@@ -98,14 +92,25 @@ export function WorkspaceLinkDirectory({ items }: WorkspaceLinkDirectoryProps) {
         </Accordion.Trigger>
         <Accordion.Content>
           <YStack {...knobProps.gap}>
-            <SearchInput
-              value={filter}
-              onChange={setFilter}
-              debounceMs={0}
-              compact
-              placeholder={t("workspaceFilterLinks", "Filter links...")}
-              aria-label={t("workspaceFilterLinks", "Filter links...")}
-            />
+            {/* LC-71: 2px pad = default ring offset, so Accordion's clip
+                cannot cut the whole-box ring. Inner Area outline is
+                suppressed — the Box (magnifier included) carries it. */}
+            <YStack padding={2} overflow="visible" data-testid="workspace-filter-links">
+              <SearchInput
+                value={filter}
+                onChange={setFilter}
+                debounceMs={0}
+                compact
+                placeholder={t("workspaceFilterLinks", "Filter links...")}
+                aria-label={t("workspaceFilterLinks", "Filter links...")}
+                inputProps={{
+                  className: "mp-input-area",
+                  outlineWidth: 0,
+                  outlineStyle: "none",
+                  outlineColor: "transparent",
+                }}
+              />
+            </YStack>
             {filteredItems.length === 0 ? (
               <EmptyState
                 compact

package/src/workspace/WorkspaceNumberCard.tsx

@@ -10,12 +10,12 @@
  * rendered as an informational card for now (documented gap).
  */
 import { Card, SizableText, Skeleton, YStack } from "@multiplatform.one/components";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   FrappeKPICard,
   type FrappeAggregateOperation,
   type FrappeKPIDataSource,
 } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";

package/src/workspace/WorkspaceQuickList.tsx

@@ -7,7 +7,7 @@
  */
 import { Card, Separator, SizableText, XStack, YStack } from "@multiplatform.one/components";
 import { FrappeList } from "@multiplatform.one/frappe-ui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useBackofficeNavigator, useBackofficePaths } from "../config/BackofficeProvider";
@@ -41,9 +41,14 @@ export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
 
   const title = row.label || row.document_type;
 
+  const pad = knobProps.panelPadding.padding;
+
   return (
-    <Card flexGrow={1}>
-      <YStack {...knobProps.panelPadding} {...knobProps.gap}>
+    // LC-72 CONTAINER-CLIP: Card clips list-row hover/ring to the frame
+    // radius. Default Card padding is ejected so rows can span the box;
+    // the header keeps its own inset.
+    <Card flexGrow={1} padding={0} overflow="hidden">
+      <YStack paddingHorizontal={pad} paddingTop={pad} paddingBottom="$2" {...knobProps.gap}>
         <XStack justifyContent="space-between" alignItems="center" {...knobProps.gap}>
           <SizableText size="$4" fontWeight="700" numberOfLines={1} flexShrink={1}>
             {title}
@@ -53,6 +58,10 @@ export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
             color="$color11"
             cursor="pointer"
             role="link"
+            tabIndex={0}
+            outlineWidth={0}
+            focusStyle={{ outlineWidth: 0 }}
+            focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: 2 })}
             hoverStyle={{ color: "$color12" }}
             onPress={() => navigator.navigate(paths.list(row.document_type))}
           >
@@ -60,40 +69,48 @@ export function WorkspaceQuickList({ row }: WorkspaceQuickListProps) {
           </SizableText>
         </XStack>
         <Separator />
-        {/* Fixed-height box: FrappeList's internal flex-basis:0 stack
-            contributes no intrinsic height, so an unclamped Card collapses
-            and the rows paint past the frame (LC-10). The box gives the
-            flex chain a definite height to fill. */}
-        <YStack height={QUICK_LIST_HEIGHT} overflow="hidden">
-          <QuickList
-            doctype={row.document_type}
-            fields={["name"]}
-            filters={filters as Array<["name", string, unknown]> | undefined}
-            pageSize={4}
-            height={QUICK_LIST_HEIGHT}
-            estimateSize={44}
-            aria-label={title}
-            renderItem={(item) => (
-              <XStack
-                paddingVertical="$2"
-                paddingHorizontal="$2"
-                alignItems="center"
-                cursor="pointer"
-                borderRadius="$2"
-                hoverStyle={{ backgroundColor: "$color3" }}
-                onPress={() =>
-                  item.name && navigator.navigate(paths.form(row.document_type, item.name))
-                }
-                role="link"
-                aria-label={item.name}
-              >
-                <SizableText size="$3" numberOfLines={1} flexShrink={1}>
-                  {item.name}
-                </SizableText>
-              </XStack>
-            )}
-          />
-        </YStack>
+      </YStack>
+      {/* Fixed-height box: FrappeList's internal flex-basis:0 stack
+          contributes no intrinsic height, so an unclamped Card collapses
+          and the rows paint past the frame (LC-10). The box gives the
+          flex chain a definite height to fill. Rows stay square — this
+          box is the LC-72 clip container. */}
+      <YStack height={QUICK_LIST_HEIGHT} overflow="hidden">
+        <QuickList
+          doctype={row.document_type}
+          fields={["name"]}
+          filters={filters as Array<["name", string, unknown]> | undefined}
+          pageSize={4}
+          height={QUICK_LIST_HEIGHT}
+          estimateSize={44}
+          aria-label={title}
+          renderItem={(item) => (
+            <XStack
+              paddingVertical="$2"
+              paddingHorizontal={pad}
+              minHeight={44}
+              alignItems="center"
+              cursor="pointer"
+              overflow="hidden"
+              borderRadius={0}
+              hoverStyle={{ backgroundColor: "$color3" }}
+              pressStyle={{ backgroundColor: "$color4" }}
+              tabIndex={0}
+              outlineWidth={0}
+              focusStyle={{ outlineWidth: 0 }}
+              focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: -2 })}
+              onPress={() =>
+                item.name && navigator.navigate(paths.form(row.document_type, item.name))
+              }
+              role="link"
+              aria-label={item.name}
+            >
+              <SizableText size="$3" numberOfLines={1} flexShrink={1}>
+                {item.name}
+              </SizableText>
+            </XStack>
+          )}
+        />
       </YStack>
     </Card>
   );

package/src/workspace/WorkspaceRecents.tsx

@@ -13,7 +13,7 @@
  */
 import { ClockCounterClockwiseIcon } from "@phosphor-icons/react";
 import { Card, PageSection, SizableText, XStack, useTheme } from "@multiplatform.one/components";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { readRecentItems, type RecentItem } from "../chrome/awesomebar-data";
@@ -82,6 +82,10 @@ export function WorkspaceRecents() {
             pressStyle={{ scale: 0.98 }}
             role="link"
             aria-label={item.label}
+            tabIndex={0}
+            outlineWidth={0}
+            focusStyle={{ outlineWidth: 0 }}
+            focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: 2 })}
           >
             <XStack paddingHorizontal="$3" minHeight={44} alignItems="center" {...knobProps.gap}>
               <ClockCounterClockwiseIcon size={14} color={iconColor} aria-hidden />

package/src/workspace/WorkspaceShortcut.tsx

@@ -33,7 +33,7 @@ import {
 } from "@multiplatform.one/components";
 import { useFrappeAggregate, useFrappeConfig } from "@multiplatform.one/frappe-ui";
 import { openUrl } from "@multiplatform.one/platform";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -139,6 +139,8 @@ export function WorkspaceShortcut({ row, onPress }: WorkspaceShortcutProps) {
         ? {
             baseURL: config.baseURL,
             socketPort: config.socketPort,
+            siteName: config.siteName,
+            socketBaseURL: config.socketBaseURL,
             auth: config.auth,
             syncOptions: config.syncOptions,
             fixtures: config.fixtures,
@@ -211,6 +213,10 @@ export function WorkspaceShortcut({ row, onPress }: WorkspaceShortcutProps) {
       pressStyle={target.disabled && !onPress ? undefined : { scale: 0.98 }}
       role="button"
       aria-label={row.label}
+      tabIndex={target.disabled && !onPress ? undefined : 0}
+      outlineWidth={0}
+      focusStyle={{ outlineWidth: 0 }}
+      focusVisibleStyle={ensureFocusVisibleRing({ outlineOffset: 2 })}
     >
       {/* Compact chip anatomy: icon + label + count, ≥44px press target
           (DG-LAY-04), self-sized so the band wraps instead of stretching. */}