From 8100823a9fa1ed1671f14001a207daecafddc503 Mon Sep 17 00:00:00 2001 From: Juan Cobo Betancourt Date: Sat, 30 May 2026 17:21:06 -0700 Subject: [PATCH 1/2] Redesign the WORKSHOP switcher dropdown: current-tool banner over a switch-to list Separates the panel from the band with a deeper plum surface (no shadow), tightens spacing, and stops the descriptor wrapping. Adds the accent-deepest token and the switcher current/switch-to strings (EN and ES). --- kit/locales/en.ts | 3 +- kit/locales/es.ts | 3 +- kit/theme.css | 1 + kit/ui/ampl-header/ToolSwitcher.tsx | 62 ++++++++++++++++++----------- 4 files changed, 44 insertions(+), 25 deletions(-) diff --git a/kit/locales/en.ts b/kit/locales/en.ts index 238e210..d606fa2 100644 --- a/kit/locales/en.ts +++ b/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", diff --git a/kit/locales/es.ts b/kit/locales/es.ts index eafd431..77ebc01 100644 --- a/kit/locales/es.ts +++ b/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", diff --git a/kit/theme.css b/kit/theme.css index fccfa3f..e98065d 100644 --- a/kit/theme.css +++ b/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 */ diff --git a/kit/ui/ampl-header/ToolSwitcher.tsx b/kit/ui/ampl-header/ToolSwitcher.tsx index fc5433e..7b4491d 100644 --- a/kit/ui/ampl-header/ToolSwitcher.tsx +++ b/kit/ui/ampl-header/ToolSwitcher.tsx @@ -1,8 +1,9 @@ /** * Tool switcher — the `Workshop · {tool} ▾` cluster on the WORKSHOP band, a - * native
disclosure listing the AMPL tool registry; marks the current tool. + * native
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 (
@@ -29,28 +32,41 @@ export function ToolSwitcher({ {toolName} ▾ -
-
- {t("switcher.heading")} + +
+ {/* Current tool — where you are now */} +
+ + {t("switcher.current")} + + {current?.name ?? toolName} + {current && ( + + {t(`switcher.tagline.${current.id}`, current.descriptor)} + + )}
- {tools.map((tl) => { - const current = tl.id === tool; - return ( - - - {tl.name} - - - — {t(`switcher.tagline.${tl.id}`, tl.descriptor)} - - - ); - })} + + {/* Switch to — the other tools */} + {others.length > 0 && ( + <> +
+ {t("switcher.switchTo")} +
+ {others.map((tl) => ( + + {tl.name} + + {t(`switcher.tagline.${tl.id}`, tl.descriptor)} + + + ))} + + )}
); From 597909e10d444e23a9dd304c577879a1f44a42ab Mon Sep 17 00:00:00 2001 From: Juan Cobo Betancourt Date: Sat, 30 May 2026 17:21:22 -0700 Subject: [PATCH 2/2] Bump @ampl/kit to 0.3.1 --- CONSUMING.md | 10 +++++++++- package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/CONSUMING.md b/CONSUMING.md index 5fe5b26..0bc6888 100644 --- a/CONSUMING.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 9f8b74a..04f504c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ampl/kit", - "version": "0.3.0", + "version": "0.3.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ampl/kit", - "version": "0.3.0", + "version": "0.3.1", "hasInstallScript": true, "dependencies": { "@oslojs/crypto": "^1.0.1", diff --git a/package.json b/package.json index 7e3b3b3..0390521 100644 --- a/package.json +++ b/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.",