v0.1.27

Fix: Throughput API v1 available - Details posted to Irving. POWERBI_KEY was missing from the .ENV file, so was not live.
Add: Editor now supports editing a mix's resolved formula directly, with % and kg dual entry on ingredient rows
Fix: Mix Editor should bring through correct ingredients. New resolved formula (same logic we use in Mix Calculator).
Fix: Security headers on all API responses (hardening)
Add: New mix button available on the Mix Editor.
Add: New ingredient button available on the Ingredient Editor

frontend/src/lib/components/navigation/ClientTopbar.svelte

@@ -1,36 +1,48 @@
 <script lang="ts">
-  import { Settings, Sparkles } from 'lucide-svelte';
+  import { PanelLeft, Settings, Sparkles } from 'lucide-svelte';
 
   import ThemeToggle from '$lib/components/ThemeToggle.svelte';
-  import WorkspaceSearchTrigger from '$lib/components/navigation/WorkspaceSearchTrigger.svelte';
+  import WorkspaceSearchField from '$lib/components/navigation/WorkspaceSearchField.svelte';
+  import type { SearchItem } from '$lib/navigation/client-navigation';
   import { tooltip } from '$lib/actions/tooltip';
   import type { AppSession } from '$lib/session';
-  import type { Crumb } from '$lib/navigation/client-navigation';
 
   let {
-    breadcrumbs,
-    title,
     sessionHydrated,
     session,
+    showSidebarToggle,
+    sidebarOpen,
     userInitials,
     userMenuOpen,
     canUseWorkspaceSearch,
+    searchQuery = $bindable(''),
+    searchOpen = $bindable(false),
+    searchFocusRequest,
+    filteredSearchItems,
+    hiddenResultCount,
     canOpenSettings,
-    onOpenPalette,
+    onRunSearchItem,
+    onToggleSidebar,
     onToggleUserMenu,
     onOpenSettings,
     onSignOut,
     onShowWhatsNew
   }: {
-    breadcrumbs: Crumb[];
-    title: string;
     sessionHydrated: boolean;
     session: AppSession | null;
+    showSidebarToggle: boolean;
+    sidebarOpen: boolean;
     userInitials: string;
     userMenuOpen: boolean;
     canUseWorkspaceSearch: boolean;
+    searchQuery?: string;
+    searchOpen?: boolean;
+    searchFocusRequest: number;
+    filteredSearchItems: SearchItem[];
+    hiddenResultCount: number;
     canOpenSettings: boolean;
-    onOpenPalette: () => void;
+    onRunSearchItem: (item: SearchItem) => void | Promise<void>;
+    onToggleSidebar: () => void;
     onToggleUserMenu: () => void;
     onOpenSettings: () => void;
     onSignOut: () => void;
@@ -40,27 +52,35 @@
 
 <header class="topbar">
   <div class="topbar-start">
+    {#if showSidebarToggle}
+      <button
+        class="sidebar-toggle"
+        type="button"
+        aria-label={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
+        aria-pressed={sidebarOpen}
+        onclick={onToggleSidebar}
+        use:tooltip={sidebarOpen ? 'Hide menu' : 'Show menu'}
+      >
+        <PanelLeft size={17} strokeWidth={1.9} />
+      </button>
+    {/if}
+
     <a class="topbar-brand" href="/" aria-label="Hunter Premium Produce home">
-      <img src="/logo-hsf.png" alt="Hunter Premium Produce" />
+      <img src="/hunter-logo-sidebar.png" alt="Hunter Premium Produce" />
     </a>
-    <div class="topbar-copy">
-      <nav class="breadcrumbs" aria-label="Breadcrumb">
-        {#each breadcrumbs as crumb, index}
-          {#if index > 0}<span class="breadcrumb-sep" aria-hidden="true">/</span>{/if}
-          {#if crumb.href && index < breadcrumbs.length - 1}
-            <a href={crumb.href}>{crumb.label}</a>
-          {:else}
-            <span aria-current={index === breadcrumbs.length - 1 ? 'page' : undefined}>{crumb.label}</span>
-          {/if}
-        {/each}
-      </nav>
-      <h1>{title}</h1>
-    </div>
   </div>
 
   {#if canUseWorkspaceSearch}
     <div class="topbar-middle">
-      <WorkspaceSearchTrigger className="topbar-search" onClick={onOpenPalette} />
+      <WorkspaceSearchField
+        bind:query={searchQuery}
+        bind:open={searchOpen}
+        focusRequest={searchFocusRequest}
+        filteredSearchItems={filteredSearchItems}
+        {hiddenResultCount}
+        className="topbar-search"
+        onRunSearchItem={onRunSearchItem}
+      />
     </div>
   {:else}
     <div class="topbar-middle"></div>
@@ -135,10 +155,7 @@
 <style>
   .topbar {
     display: grid;
-    /* Left flexes/truncates, search shrinks within a cap, and the actions take
-       exactly their content width (auto) so they're never squeezed into
-       wrapping. */
-    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) auto;
+    grid-template-columns: minmax(0, 1fr) minmax(20rem, 3fr) minmax(0, 1fr);
     align-items: center;
     gap: 0.75rem;
     padding: 0.72rem 1.2rem;
@@ -174,61 +191,41 @@
     transform-origin: left center;
   }
 
-  .topbar-copy {
-    min-width: 0;
-  }
-
-  .topbar-copy h1 {
-    margin: 0.12rem 0 0;
-    font-size: 1.34rem;
-    font-weight: 700;
-    letter-spacing: -0.01em;
-    /* Yield gracefully when space is tight rather than pushing the actions
-       into a wrap. */
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .breadcrumbs {
-    display: flex;
+  .sidebar-toggle {
+    display: inline-flex;
     align-items: center;
-    flex-wrap: wrap;
-    gap: 0.32rem;
-    color: var(--muted);
-    font-size: 0.74rem;
-    font-weight: 500;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    flex-shrink: 0;
+    border: 1px solid transparent;
+    border-radius: 0.7rem;
+    background: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
   }
 
-  .breadcrumbs a {
-    color: var(--muted);
-    transition: color 140ms ease;
-  }
-
-  .breadcrumbs a:hover {
-    color: var(--green-deep);
-  }
-
-  .breadcrumbs span[aria-current='page'] {
-    color: var(--text);
-    font-weight: 600;
-  }
-
-  .breadcrumb-sep {
-    color: var(--color-text-muted);
-    font-size: 0.78rem;
+  .sidebar-toggle:hover {
+    background: var(--panel-soft);
+    border-color: var(--color-border);
+    color: var(--color-text-primary);
   }
 
   .topbar-middle {
     min-width: 0;
     display: flex;
     justify-content: center;
+    /* Fill the grid track; justify-self:center would collapse this to the
+       field's content width and clip the placeholder. */
+    justify-self: stretch;
+    padding-left: 0.9rem;
   }
 
   :global(.topbar-search) {
     width: 100%;
-    min-height: 2.75rem;
-    background: color-mix(in srgb, var(--panel-soft) 60%, var(--color-bg-surface));
+    /* ~half the topbar on a large laptop; centered within its track. */
+    max-width: 40rem;
   }
 
   .topbar-actions {
@@ -238,6 +235,7 @@
     /* Never let the What's-new / theme toggles wrap above the user button. */
     flex-wrap: nowrap;
     justify-content: flex-end;
+    justify-self: end;
   }
 
   /* Matches the ThemeToggle button so the two sit as a pair. */
@@ -447,7 +445,7 @@
   /* Drop the search to its own row early: with the 252px sidebar present, a
      laptop's content width is already tight well above the sidebar's own
      collapse point, so keep the top row to brand + actions only. */
-  @media (max-width: 1280px) {
+  @media (max-width: 1180px) {
     .topbar {
       grid-template-columns: minmax(0, 1fr) auto;
       grid-template-areas:
@@ -461,6 +459,17 @@
 
     .topbar-middle {
       grid-area: middle;
+      /* Span the full row instead of shrinking to the field's content width. */
+      justify-self: stretch;
+      padding-left: 0;
+    }
+
+    /* On its own row the field gets the whole width, which is too much — keep it
+       to ~half, centered, so it reads as a search bar rather than a banner. */
+    :global(.topbar-search) {
+      width: 55%;
+      min-width: 26rem;
+      max-width: 40rem;
     }
 
     .topbar-actions {