@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

package/src/components/timeline.stories.tsx

@@ -2,6 +2,7 @@ import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
 import { formatAbsoluteDateTime } from "@multiplatform.one/theme";
 import { FrappeProvider } from "../FrappeProvider";
+import { FrappeStoryProvider } from "../frappeStoryTarget";
 import { Timeline, type FrappeComment, type FrappeVersion } from "./timeline";
 
 export default {
@@ -13,12 +14,99 @@ export default {
     docs: {
       description: {
         component:
-          "Frappe bridge for the generic Timeline: merges Comment and Version documents into TimelineEntry[], sorted newest-first, with a relative-time formatter by default.",
+          "Frappe bridge for the generic Timeline: merges Comment and Version documents into TimelineEntry[], sorted newest-first. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm — it targets STORYBOOK_FRAPPE_URL when reachable and falls back to fixtures otherwise.",
       },
     },
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves the *collection*, but DocType meta still resolves
+// over HTTP — so those stories fired a real cross-origin request the browser
+// rejected with CORS. MOCK_HOST keeps the same code path (real fetch, real
+// meta shape) without leaving the machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappetimeline.mock.test";
+
+function commentMetaRaw(name: string) {
+  return {
+    name,
+    module: "Core",
+    title_field: "content",
+    fields: [
+      { fieldname: "comment_type", fieldtype: "Select", label: "Comment Type" },
+      { fieldname: "content", fieldtype: "Text Editor", label: "Content" },
+      { fieldname: "comment_by", fieldtype: "Data", label: "Comment By" },
+      { fieldname: "reference_doctype", fieldtype: "Link", label: "Reference Document Type" },
+      { fieldname: "reference_name", fieldtype: "Dynamic Link", label: "Reference Name" },
+      { fieldname: "creation", fieldtype: "Datetime", label: "Created On" },
+    ],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function versionMetaRaw(name: string) {
+  return {
+    name,
+    module: "Core",
+    fields: [
+      { fieldname: "ref_doctype", fieldtype: "Link", label: "Reference Document Type" },
+      { fieldname: "docname", fieldtype: "Dynamic Link", label: "Document Name" },
+      { fieldname: "data", fieldtype: "Code", label: "Data" },
+      { fieldname: "creation", fieldtype: "Datetime", label: "Created On" },
+    ],
+    permissions: [{ role: "All", read: 1 }],
+  };
+}
+
+function metaFor(doctype: string) {
+  if (doctype === "Version") return versionMetaRaw(doctype);
+  return commentMetaRaw(doctype);
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeTimelineMockFetch) return;
+  w.__frappeTimelineMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "Comment";
+        return jsonResponse({ docs: [metaFor(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: metaFor(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({
+          data: [
+            { name: "Comment", module: "Core" },
+            { name: "Version", module: "Core" },
+          ],
+        });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
 const now = Date.now();
 const iso = (minutesAgo: number) => new Date(now - minutesAgo * 60_000).toISOString();
 
@@ -93,7 +181,7 @@ const makeFixtures = () =>
   new InMemoryFixtureProvider({ Comment: commentFixtures, Version: versionFixtures });
 
 export const Main = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Timeline
       doctype="Task"
       docname="TASK-001"
@@ -107,7 +195,7 @@ Main.storyName = "Main";
 
 /** Version/attachment/assignment entries hidden; only plain comments remain. */
 export const CommentsOnly = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Timeline
       doctype="Task"
       docname="TASK-001"
@@ -122,7 +210,7 @@ export const CommentsOnly = () => (
 
 /** No entries at all: base Timeline empty state plus comment input. */
 export const Empty = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Timeline
       doctype="Task"
       docname="TASK-EMPTY"
@@ -134,7 +222,7 @@ export const Empty = () => (
 
 /** enableAddComment=false must remove the comment composer. */
 export const ReadOnly = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Timeline doctype="Task" docname="TASK-001" label="Activity" enableAddComment={false} />
   </FrappeProvider>
 );
@@ -145,7 +233,7 @@ export const ReadOnly = () => (
  * (LC-12: even an ejected formatter speaks a human register, never raw ISO).
  */
 export const AbsoluteTimestamps = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Timeline
       doctype="Task"
       docname="TASK-001"
@@ -157,7 +245,40 @@ export const AbsoluteTimestamps = () => (
 
 /** Compact mode forwards to the base component. */
 export const Compact = () => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={makeFixtures()}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={makeFixtures()}>
     <Timeline doctype="Task" docname="TASK-001" label="Activity" compact />
   </FrappeProvider>
 );
+
+// ---------------------------------------------------------------------------
+// Live bench story — real Comment/Version documents over the live data path
+// ---------------------------------------------------------------------------
+
+/**
+ * Live timeline against the real bench (STORYBOOK_FRAPPE_URL, default the
+ * local dev bench proxied by the Storybook dev server). Subscribes to
+ * Comment and Version filtered by the target document so desk comments and
+ * version rows appear in place. Falls back to fixtures when the bench is
+ * unreachable.
+ */
+export const Live = (args: { doctype?: string; docname?: string }) => (
+  <FrappeStoryProvider fixtures={makeFixtures()}>
+    <Timeline
+      doctype={args.doctype || "Task"}
+      docname={args.docname || "TASK-001"}
+      label="Activity"
+      onAddComment={action("onAddComment")}
+      onEntryClick={action("onEntryClick")}
+    />
+  </FrappeStoryProvider>
+);
+Live.args = { doctype: "", docname: "" };
+Live.argTypes = { doctype: { control: "text" }, docname: { control: "text" } };
+Live.parameters = {
+  docs: {
+    description: {
+      story:
+        "Live Comment/Version feed over the real bench: realtime list_update events insert/evict rows in place. Fixture fallback (Task/TASK-001) when the bench is down.",
+    },
+  },
+};

package/src/desk/Awesomebar.stories.tsx

@@ -4,7 +4,7 @@ import { YStack } from "tamagui";
 import { FrappeProvider } from "../FrappeProvider";
 import { Awesomebar } from "./awesomebar";
 
-export default {
+const meta = {
   title: "FrappeUI/Desk/Awesomebar",
   component: Awesomebar,
   tags: ["!test"],
@@ -13,7 +13,7 @@ export default {
     docs: {
       description: {
         component:
-          "Global desk search: navigation results (DocType catalog), document results (global_search), inline math, and commands. Backed here by an in-story fetch mock. Try typing 'sales', 'todo', '2+2' or 'settings'.",
+          "Global desk search: navigation results (DocType catalog), document results (global_search), inline math, and commands. Trigger height comes from the LC-65 size recipe; radius=full is a pill. Backed here by an in-story fetch mock. Try typing 'sales', 'todo', '2+2' or 'settings'.",
       },
     },
   },
@@ -21,6 +21,7 @@ export default {
     basePath: { control: "text" },
   },
 };
+export default meta;
 
 const MOCK_HOST = "https://awesomebar.mock.test";
 const ERR_HOST = "https://forbidden.awesomebar.mock.test";

package/src/desk/DeskFormPage.tsx

@@ -18,7 +18,8 @@
 
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Text, YStack } from "tamagui";
+import { Button, formCommonColors } from "@multiplatform.one/forms";
+import { Text, YStack } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { ArrowLeftIcon } from "@phosphor-icons/react";
 import { DeskShell } from "./DeskShell";
@@ -82,7 +83,7 @@ export function DeskFormPage({ doctype, name, onNavigate }: DeskFormPageProps) {
         {...knobProps.containerRadius}
         {...knobProps.gap}
       >
-        <Text color="$color10" fontSize={knobProps.sizeToken} {...knobProps.body}>
+        <Text color={formCommonColors.muted} {...knobProps.body}>
           {t("No DocType specified")}
         </Text>
       </YStack>

package/src/desk/DeskListPage.tsx

@@ -12,6 +12,7 @@
 
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { formCommonColors } from "@multiplatform.one/forms";
 import { Text, YStack } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { DeskShell } from "./DeskShell";
@@ -60,7 +61,7 @@ export function DeskListPage({ doctype, onNavigate }: DeskListPageProps) {
         {...knobProps.containerRadius}
         {...knobProps.gap}
       >
-        <Text color="$color10" fontSize={knobProps.sizeToken} {...knobProps.body}>
+        <Text color={formCommonColors.muted} {...knobProps.body}>
           {t("No DocType specified")}
         </Text>
       </YStack>

package/src/desk/DeskShell.stories.tsx

@@ -1,6 +1,6 @@
 import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
 import { action } from "@multiplatform.one/storybook";
-import { Text, YStack } from "tamagui";
+import { Text, YStack } from "@multiplatform.one/components";
 import { FrappeProvider } from "../FrappeProvider";
 import { DeskShell } from "./DeskShell";
 
@@ -14,7 +14,7 @@ export default {
     docs: {
       description: {
         component:
-          "Top-level desk layout: Awesomebar header, DeskSidebar nav, breadcrumbs and main content. Navigation search is served by an in-story fetch mock.",
+          "Top-level desk layout: Awesomebar header, DeskSidebar nav, breadcrumbs and main content. Navigation search is served by an in-story fetch mock. Shell chrome rides house Button, phosphor icons, and surface/heading/gap/panelPadding knobs (R-NONE inverted-L).",
       },
     },
   },
@@ -140,3 +140,22 @@ export const Bare = () => (
     <DeskShell onNavigate={action("onNavigate")}>{content(1)}</DeskShell>
   </YStack>
 );
+
+/** Compact viewport: rail collapses to a phosphor toggle + overlay drawer. */
+export const Narrow = () => (
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({})}>
+    <YStack height={640}>
+      <DeskShell
+        breadcrumbs={[{ label: "Desk", href: "/desk" }, { label: "Todo" }]}
+        onNavigate={action("onNavigate")}
+        activePath="/desk/Todo"
+      >
+        {content(3)}
+      </DeskShell>
+    </YStack>
+  </FrappeProvider>
+);
+Narrow.parameters = {
+  viewport: { defaultViewport: "mobile1" },
+};
+Narrow.storyName = "Narrow";

package/src/desk/DeskShell.tsx

@@ -1,7 +1,7 @@
 /**
  * DeskShell - Top-level layout component for Frappe Desk.
  *
- * Composes the Awesomebar (top), DeskSidebar (left), Breadcrumbs,
+ * Composes the Awesomebar (top), DeskSidebar (start-edge), Breadcrumbs,
  * and a main content area into a full-page desk layout.
  *
  * Uses semantic HTML elements via Tamagui's `tag` prop for accessibility:
@@ -11,23 +11,31 @@
  *
  * Narrow viewports (<640px): sidebar becomes an overlay drawer so main
  * content keeps the full width (SB-M-1706). Banner bottom border follows
- * the surface borderWidth knob (SB-M-1708).
+ * the surface borderWidth knob (SB-M-1708). Shell chrome is R-NONE (no
+ * radius on the inverted-L) and consumes house Button / phosphor icons
+ * so knobs and DG-IDN-06 reach the banner.
  */
 
 import { useHotkey } from "@tanstack/react-hotkeys";
 import type React from "react";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Text, XStack, YStack } from "tamagui";
-import { NARROW_BREAKPOINT, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Awesomebar } from "./awesomebar";
+import { ListIcon, XIcon } from "@phosphor-icons/react";
 import {
   Breadcrumbs,
+  Button,
   CONTENT_MAX_WIDTH,
   PageHeadingScope,
+  SizableText,
+  SkipLink,
+  XStack,
+  YStack,
+  isWeb,
   useDocumentTitle,
   type BreadcrumbItem,
 } from "@multiplatform.one/components";
+import { NARROW_BREAKPOINT, useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Awesomebar } from "./awesomebar";
 import { DeskSidebar } from "./DeskSidebar";
 
 // ---------------------------------------------------------------------------
@@ -67,6 +75,13 @@ function useIsNarrowDesk(): boolean {
   return useLayoutSizeClass() === "compact";
 }
 
+/** Size token is a HEIGHT key — map the banner min-height from it, never fontSize. */
+function bannerMinHeight(sizeToken: string): "$5" | "$6" | "$7" {
+  if (sizeToken === "$5") return "$7";
+  if (sizeToken === "$3") return "$5";
+  return "$6";
+}
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -80,7 +95,7 @@ export function DeskShell({
   showAwesomebar = true,
 }: DeskShellProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ component: "DeskShell" });
   const isNarrow = useIsNarrowDesk();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
 
@@ -105,6 +120,7 @@ export function DeskShell({
   useHotkey(
     "Mod+K",
     () => {
+      if (typeof document === "undefined") return;
       const input = document.querySelector<HTMLInputElement>("[data-awesomebar-input]");
       if (input) input.focus();
     },
@@ -118,6 +134,7 @@ export function DeskShell({
         setMobileSidebarOpen(false);
         return;
       }
+      if (typeof document === "undefined") return;
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur();
       }
@@ -127,51 +144,48 @@ export function DeskShell({
 
   const surfaceBorderWidth = knobProps.surface.borderWidth;
   const showMobileToggle = showSidebar && isNarrow;
+  const drawerEdge = isWeb ? { insetInlineStart: 0 } : { start: 0 };
 
   const toggleButton = showMobileToggle ? (
     <Button
-      size="$3"
       chromeless
       circular
+      icon={mobileSidebarOpen ? XIcon : ListIcon}
       aria-label={t("Toggle sidebar")}
       aria-expanded={mobileSidebarOpen}
       aria-controls="desk-sidebar"
       onPress={() => setMobileSidebarOpen((open) => !open)}
-      marginEnd="$2"
       data-testid="desk-sidebar-toggle"
-    >
-      <Text fontSize="$5" lineHeight="$5">
-        {mobileSidebarOpen ? "\u2715" : "\u2630"}
-      </Text>
-    </Button>
+    />
   ) : null;
 
+  const chromeBorder = {
+    borderWidth: 0,
+    borderRadius: 0,
+    borderBottomWidth: surfaceBorderWidth,
+    borderBottomColor: knobProps.surface.borderColor,
+  } as const;
+
   return (
     <YStack flex={1} height="100%" width="100%" overflow="hidden" data-testid="desk-shell">
-      {/* Header with Awesomebar */}
+      {isWeb ? <SkipLink targetId="desk-main">{t("Skip to content")}</SkipLink> : null}
+
+      {/* Header with Awesomebar — R-NONE full-bleed chrome; knobs own pad/gap/type. */}
       {showAwesomebar && (
         <XStack
           role="banner"
           {...knobProps.surface}
-          // Surface knobs paint a full box border; keep only the bottom edge,
-          // and honor borderWidth:none (SB-M-1708).
-          borderWidth={0}
-          borderBottomWidth={surfaceBorderWidth}
-          borderBottomColor={knobProps.surface.borderColor}
-          height={knobProps.sizeToken === "$5" ? "$7" : knobProps.sizeToken === "$3" ? "$5" : "$6"}
+          {...knobProps.gap}
+          {...knobProps.panelPadding}
+          {...chromeBorder}
+          minHeight={bannerMinHeight(knobProps.sizeToken)}
           alignItems="center"
-          paddingHorizontal="$4"
           flexShrink={0}
         >
           {toggleButton}
-          <Text
-            fontSize={knobProps.sizeToken}
-            marginEnd="$4"
-            {...knobProps.heading}
-            fontWeight="700"
-          >
+          <SizableText {...knobProps.heading} {...knobProps.controlType} flexShrink={0}>
             {t("Desk")}
-          </Text>
+          </SizableText>
           <Awesomebar onNavigate={handleNavigate} flex={1} minWidth={0} />
         </XStack>
       )}
@@ -179,11 +193,11 @@ export function DeskShell({
       {/* Narrow + no awesomebar: still expose the drawer toggle */}
       {!showAwesomebar && showMobileToggle && (
         <XStack
+          {...knobProps.surface}
+          {...knobProps.gap}
+          {...knobProps.panelPadding}
+          {...chromeBorder}
           alignItems="center"
-          paddingHorizontal="$3"
-          paddingVertical="$2"
-          borderBottomWidth={surfaceBorderWidth}
-          borderBottomColor={knobProps.surface.borderColor}
           flexShrink={0}
         >
           {toggleButton}
@@ -191,7 +205,7 @@ export function DeskShell({
       )}
 
       <XStack flex={1} minWidth={0} position="relative" overflow="hidden">
-        {/* Desktop nav sidebar — in flow */}
+        {/* Desktop nav sidebar — in flow. Sidebar owns the painted surface. */}
         {showSidebar && !isNarrow && (
           <YStack
             role="navigation"
@@ -212,7 +226,8 @@ export function DeskShell({
               left={0}
               right={0}
               bottom={0}
-              backgroundColor="rgba(0,0,0,0.35)"
+              backgroundColor="$shadowColor"
+              opacity={0.5}
               zIndex={10}
               onPress={() => setMobileSidebarOpen(false)}
               data-testid="desk-sidebar-scrim"
@@ -222,10 +237,11 @@ export function DeskShell({
               id="desk-sidebar"
               position="absolute"
               top={0}
-              left={0}
               bottom={0}
               zIndex={11}
-              backgroundColor="$background"
+              {...drawerEdge}
+              {...knobProps.surface}
+              borderRadius={0}
               data-testid="desk-sidebar-drawer"
             >
               <DeskSidebar onNavigate={handleNavigate} activePath={activePath} />
@@ -234,15 +250,16 @@ export function DeskShell({
         )}
 
         {/* Main content */}
-        <YStack role="main" flex={1} minWidth={0}>
+        <YStack role="main" id="desk-main" tabIndex={-1} flex={1} minWidth={0} minHeight={0}>
           {/* DG-A11Y-02: one h1 budget per desk page (multiple-h1 DEV warn). */}
           <PageHeadingScope name="DeskShell">
             {/* Breadcrumbs — LC-35 WAYFINDING-CHROMELESS / Axiom 16: the
                 chromeless trail sits ON the page column's alignment line.
                 The shell renders above the page scaffold, so it mirrors
                 Screen's content column (max-width cap + centering +
-                panelPadding inset) to share the exact x that page templates
-                give headings and content. */}
+                panelPadding inset on the inline axis) to share the exact x
+                that page templates give headings and content. Vertical pad
+                stays 0 so the trail does not inflate above the page. */}
             {breadcrumbs && breadcrumbs.length > 0 && (
               <YStack
                 width="100%"

package/src/desk/awesomebar.tsx

@@ -20,11 +20,11 @@ import {
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Text, View, XStack, type XStackProps } from "tamagui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Combobox, type ComboboxOption } from "@multiplatform.one/forms";
+import { Combobox, formCommonColors, type ComboboxOption } from "@multiplatform.one/forms";
 import { writeToClipboard } from "@multiplatform.one/platform";
 import { storage } from "@multiplatform.one/store";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text, View, XStack, isWeb, type XStackProps } from "tamagui";
 import { useFrappeConfig } from "../FrappeProvider";
 
 // ---------------------------------------------------------------------------
@@ -133,7 +133,7 @@ function matchingCommands(query: string): Array<{ label: string; path: string }>
 
 export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: AwesomebarProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps, control } = useResolvedKnobs();
   const config = useFrappeConfig();
   const [query, setQuery] = useState("");
   const [docResults, setDocResults] = useState<DocSearchResult[]>([]);
@@ -311,34 +311,39 @@ export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: Aw
   useHotkey(
     "Mod+K",
     () => {
-      // Focus the combobox trigger
-      const trigger = document.querySelector("[data-awesomebar-trigger]") as HTMLElement;
+      if (!isWeb || typeof document === "undefined") return;
+      const trigger = document.querySelector("[data-awesomebar-trigger]") as HTMLElement | null;
       trigger?.click();
     },
     { conflictBehavior: "allow" },
   );
 
-  // Raw px heights (documented mapping). Combobox's custom-trigger wrapper used
-  // to collapse Tamagui `height` — pin via style + outer shell (SB-M-1703).
-  const triggerHeight = knobProps.sizeToken === "$3" ? 32 : knobProps.sizeToken === "$5" ? 44 : 36;
+  // Height from the LC-65 size recipe (not a private px map). Combobox's
+  // custom-trigger wrapper used to collapse Tamagui `height` — pin via style
+  // + outer shell (SB-M-1703).
+  const triggerHeight = knobProps.control.height;
 
-  // Custom trigger that shows the search input
   const renderTrigger = useCallback(
     (_selected: ComboboxOption | ComboboxOption[] | undefined, open: boolean) => (
       <XStack
         data-awesomebar-trigger
         width="100%"
         alignItems="center"
-        height={triggerHeight}
-        minHeight={triggerHeight}
-        maxHeight={triggerHeight}
-        paddingHorizontal={knobProps.sizeToken}
-        backgroundColor={open ? "$background" : "$color2"}
+        cursor="text"
+        backgroundColor={knobProps.inputBackground}
+        {...knobProps.control}
         {...knobProps.inputSurface}
         {...knobProps.borderRadius}
-        borderColor={open ? "$accentColor" : "$borderColor"}
-        cursor="text"
-        {...knobProps.gap}
+        borderColor={open ? "$borderColorFocus" : "$borderColor"}
+        hoverStyle={{
+          borderColor: "$borderColorHover",
+          ...control.hoverKnobProps,
+        }}
+        pressStyle={{ ...control.pressKnobProps }}
+        focusVisibleStyle={{
+          borderColor: "$borderColorFocus",
+          ...control.focusVisibleKnobProps,
+        }}
         // Inline style wins over flex-shrink collapse of the Combobox wrapper.
         style={{
           height: triggerHeight,
@@ -352,10 +357,10 @@ export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: Aw
       >
         <Text
           flex={1}
-          fontSize={knobProps.sizeToken}
-          color="$color10"
           numberOfLines={1}
+          color={formCommonColors.muted}
           {...knobProps.body}
+          {...knobProps.controlType}
         >
           {t("Search or type a command...")}
         </Text>
@@ -364,14 +369,20 @@ export function Awesomebar({ onNavigate, basePath = "/desk", ...stackProps }: Aw
           paddingVertical="$1"
           backgroundColor="$color3"
           {...knobProps.borderRadius}
+          borderWidth={0}
         >
-          <Text color="$color11" fontFamily="$mono">
+          <Text
+            fontFamily="$mono"
+            color={formCommonColors.muted}
+            {...knobProps.controlType}
+            {...knobProps.textWeight}
+          >
             ⌘K
           </Text>
         </View>
       </XStack>
     ),
-    [knobProps, t, triggerHeight],
+    [control, knobProps, t, triggerHeight],
   );
 
   return (