Refine the AmplHeader WORKSHOP switcher dropdown (v0.3.1)

CONSUMING.md

@@ -653,7 +653,15 @@ The git tag is the contract for `@ampl/kit`. Consumers pin to an exact tag:
 "@ampl/kit": "github:UCSB-AMPLab/ampl-kit#v0.2.1"
 ```
 
-**This release:** `v0.3.0` adds `AmplHeader` — a new UI component exported from
+**This release:** `v0.3.1` refines the `AmplHeader` WORKSHOP switcher dropdown —
+it now surfaces the current tool in a banner above a "switch to" list, on a
+deeper-plum panel that separates from the band without a shadow. No API change
+(the `AmplHeader` props are unchanged); internally it adds the `accent-deepest`
+token and swaps the kit `switcher.heading` string for `switcher.current` /
+`switcher.switchTo`. A patch bump — consumers pinning `v0.3.0` upgrade by
+bumping the ref; nothing else changes.
+
+`v0.3.0` adds `AmplHeader` — a new UI component exported from
 `@ampl/kit/ui`, along with the `DEFAULT_TOOLS` registry and the types
 `AmplHeaderProps`, `NavItem`, `ToolLink`, `ToolId`, `AccountInfo`, and
 `HeaderSize`. It also adds the `kit.nav`, `kit.switcher`, and `kit.header` i18n

kit/locales/en.ts

@@ -48,7 +48,8 @@ export default {
     people: "People",
   },
   switcher: {
-    heading: "AMPL Workshop",
+    current: "Current",
+    switchTo: "Switch to",
     tagline: {
       calamus: "Practice reading manuscripts",
       scheduling: "booking & polls",

kit/locales/es.ts

@@ -48,7 +48,8 @@ export default {
     people: "Personas",
   },
   switcher: {
-    heading: "Taller AMPL",
+    current: "Actual",
+    switchTo: "Cambiar a",
     tagline: {
       calamus: "Practica leer manuscritos",
       scheduling: "reservas y encuestas",

kit/theme.css

@@ -34,6 +34,7 @@
   --color-accent:      #A5469A;   /* THE AMPL plum — the single UI accent */
   --color-accent-ink:  #8B467D;   /* footer band plum */
   --color-accent-deep: #743A6A;   /* footer-bottom plum + WORKSHOP band */
+  --color-accent-deepest: #5b2e53; /* dropdown panel on the plum band — separates without a shadow */
   --color-accent-pale: #efd6e9;   /* WORKSHOP eyebrow + current-tool in switcher (on plum) */
 
   --color-hue-orange:  #D97743;   /* per-project accent override ONLY */

kit/ui/ampl-header/ToolSwitcher.tsx

@@ -1,8 +1,9 @@
 /**
  * Tool switcher — the `Workshop · {tool} ▾` cluster on the WORKSHOP band, a
- * native <details> disclosure listing the AMPL tool registry; marks the current tool.
+ * native <details> disclosure. The panel surfaces the current tool in a banner,
+ * then lists the other AMPL tools you can switch to (current-banner + others).
  *
- * @version v0.3.0
+ * @version v0.3.1
  */
 import { useTranslation } from "react-i18next";
 import type { ToolId, ToolLink } from "./types";
@@ -17,6 +18,8 @@ export function ToolSwitcher({
   tools: ToolLink[];
 }) {
   const { t } = useTranslation("kit");
+  const current = tools.find((tl) => tl.id === tool);
+  const others = tools.filter((tl) => tl.id !== tool);
 
   return (
     <details className="relative [&_summary::-webkit-details-marker]:hidden">
@@ -29,28 +32,41 @@ export function ToolSwitcher({
         <span className="font-title text-[20px] font-medium tracking-[-0.2px] text-white">{toolName}</span>
         <span className="ml-0.5 text-[11px] text-white/60" aria-hidden>▾</span>
       </summary>
-      <div className="absolute left-0 top-full z-20 -mt-px min-w-[230px] border border-t-0 border-white/20 bg-accent-deep p-1.5">
-        <div className="px-2.5 pt-2 pb-1 font-display text-[10px] uppercase tracking-[1px] text-white/60">
-          {t("switcher.heading")}
+
+      <div className="absolute left-0 top-full z-20 w-64 border border-white/20 bg-accent-deepest">
+        {/* Current tool — where you are now */}
+        <div aria-current="true" className="border-b border-white/20 bg-black/20 px-3.5 py-3">
+          <span className="mb-[3px] block font-display text-[8px] uppercase tracking-[1px] text-accent-pale">
+            {t("switcher.current")}
+          </span>
+          <span className="font-title text-[15px] font-medium text-white">{current?.name ?? toolName}</span>
+          {current && (
+            <span className="mt-px block font-body text-[11px] text-white/60">
+              {t(`switcher.tagline.${current.id}`, current.descriptor)}
+            </span>
+          )}
         </div>
-        {tools.map((tl) => {
-          const current = tl.id === tool;
-          return (
-            <a
-              key={tl.id}
-              href={tl.href}
-              aria-current={current ? "true" : undefined}
-              className="flex items-baseline gap-2 rounded-[6px] px-2.5 py-2.5 no-underline hover:bg-black/20"
-            >
-              <span className={`font-title text-[15px] font-medium ${current ? "text-accent-pale" : "text-white"}`}>
-                {tl.name}
-              </span>
-              <span className="font-body text-[11px] text-white/60">
-                — {t(`switcher.tagline.${tl.id}`, tl.descriptor)}
-              </span>
-            </a>
-          );
-        })}
+
+        {/* Switch to — the other tools */}
+        {others.length > 0 && (
+          <>
+            <div className="px-3.5 pt-[9px] pb-[3px] font-display text-[8px] uppercase tracking-[1px] text-white/60">
+              {t("switcher.switchTo")}
+            </div>
+            {others.map((tl) => (
+              <a
+                key={tl.id}
+                href={tl.href}
+                className="block px-3.5 pt-[7px] pb-[9px] no-underline hover:bg-black/20"
+              >
+                <span className="block font-title text-[14px] font-medium leading-tight text-white">{tl.name}</span>
+                <span className="block font-body text-[11px] leading-tight text-white/60">
+                  {t(`switcher.tagline.${tl.id}`, tl.descriptor)}
+                </span>
+              </a>
+            ))}
+          </>
+        )}
       </div>
     </details>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampl/kit",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
   "type": "module",
   "description": "Shared foundation for the AMPL tools suite: the ampl-auth Worker (ampl.tools/auth) + the @ampl/kit design system, surfaces, and session-validation helper consumed by every tool.",