@maykonpaulo/maestro-admin 0.3.0 → 0.4.0-next.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/MaestroAdmin.tsx
-import { useMemo as useMemo3, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo7, useState as useState14 } from "react";
 
 // src/client/MaestroClient.ts
 var MaestroApiError = class extends Error {
@@ -110,6 +110,11 @@ function useEntity(entityId) {
   const entities = useEntities();
   return entityId ? entities.find((e) => e.id === entityId) : void 0;
 }
+var RootContext = createContext(null);
+var AdminRootProvider = RootContext.Provider;
+function useAdminRoot() {
+  return useContext(RootContext);
+}
 
 // src/hooks.ts
 import { useCallback, useEffect, useState } from "react";
@@ -198,9 +203,6 @@ function formFields(entity, mode) {
   return entity.fields.filter((f) => mode === "create" ? f.form.creatable : f.form.editable).sort((a, b) => (a.form.order ?? 0) - (b.form.order ?? 0));
 }
 
-// src/components/Sidebar.tsx
-import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
-
 // src/grouping.ts
 var MIN_PREFIX = 4;
 function commonPrefix(a, b) {
@@ -257,6 +259,9 @@ function buildMenu(entities, labels) {
   return { groups, ungrouped };
 }
 
+// src/components/Sidebar.tsx
+import { useMemo, useState as useState2 } from "react";
+
 // src/i18n.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var EN = {
@@ -264,7 +269,7 @@ var EN = {
   loadingMetadata: "Loading metadata\u2026",
   records: (total) => `${total} record${total === 1 ? "" : "s"}`,
   searchPlaceholder: (plural) => `Search ${plural.toLowerCase()}\u2026`,
-  newRecord: "+ New",
+  newRecord: "New",
   view: "View",
   edit: "Edit",
   clone: "Clone",
@@ -303,14 +308,42 @@ var EN = {
   searchMenu: "Search menu\u2026",
   recents: "Recents",
   menus: "Menus",
-  noMenuResults: "No matches"
+  noMenuResults: "No matches",
+  hub: "Hub",
+  breadcrumb: "Breadcrumb",
+  search: "Search",
+  commandKey: "\u2318K",
+  commandPalette: "Command palette",
+  palettePlaceholder: "Go to an entity, or run an action\u2026",
+  goTo: "Go to",
+  onThisScreen: "On this screen",
+  appearance: "Appearance",
+  palette: "Palette",
+  density: "Density",
+  colorScheme: "Light / dark",
+  schemeSystem: "system",
+  schemeLight: "light",
+  schemeDark: "dark",
+  entities: "Entities",
+  hubMeta: (entities, sources) => `${entities} ${entities === 1 ? "entity" : "entities"} across ${sources} ${sources === 1 ? "datasource" : "datasources"}.`,
+  otherEntities: "Other",
+  noEntities: "No entities",
+  noEntitiesHint: "The server served an empty metadata document.",
+  fieldCount: (count) => `${count} field${count === 1 ? "" : "s"}`,
+  capRead: "read",
+  capCreate: "create",
+  capUpdate: "update",
+  capDelete: "delete",
+  columns: "Columns",
+  columnsCount: (visible, total) => `${visible}/${total}`,
+  resetColumns: "Reset columns"
 };
 var PT_BR = {
   loading: "Carregando\u2026",
   loadingMetadata: "Carregando metadados\u2026",
   records: (total) => `${total} registro${total === 1 ? "" : "s"}`,
   searchPlaceholder: (plural) => `Buscar ${plural.toLowerCase()}\u2026`,
-  newRecord: "+ Novo",
+  newRecord: "Novo",
   view: "Visualizar",
   edit: "Editar",
   clone: "Clonar",
@@ -349,7 +382,35 @@ var PT_BR = {
   searchMenu: "Buscar no menu\u2026",
   recents: "Recentes",
   menus: "Menus",
-  noMenuResults: "Nada encontrado"
+  noMenuResults: "Nada encontrado",
+  hub: "Hub",
+  breadcrumb: "Trilha",
+  search: "Buscar",
+  commandKey: "\u2318K",
+  commandPalette: "Paleta de comandos",
+  palettePlaceholder: "Ir para uma entidade, ou executar uma a\xE7\xE3o\u2026",
+  goTo: "Ir para",
+  onThisScreen: "Nesta tela",
+  appearance: "Apar\xEAncia",
+  palette: "Paleta",
+  density: "Densidade",
+  colorScheme: "Claro / escuro",
+  schemeSystem: "sistema",
+  schemeLight: "claro",
+  schemeDark: "escuro",
+  entities: "Entidades",
+  hubMeta: (entities, sources) => `${entities} ${entities === 1 ? "entidade" : "entidades"} em ${sources} ${sources === 1 ? "origem de dados" : "origens de dados"}.`,
+  otherEntities: "Outras",
+  noEntities: "Nenhuma entidade",
+  noEntitiesHint: "O servidor entregou um documento de metadados vazio.",
+  fieldCount: (count) => `${count} campo${count === 1 ? "" : "s"}`,
+  capRead: "ler",
+  capCreate: "criar",
+  capUpdate: "editar",
+  capDelete: "excluir",
+  columns: "Colunas",
+  columnsCount: (visible, total) => `${visible}/${total}`,
+  resetColumns: "Restaurar colunas"
 };
 var LOCALES = { en: EN, "pt-BR": PT_BR };
 function stringsFor(locale) {
@@ -361,8 +422,179 @@ function useT() {
   return useContext2(I18nContext);
 }
 
-// src/components/Sidebar.tsx
+// src/components/icons.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PATHS = {
+  hub: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3.5", y: "3.5", width: "7", height: "7", rx: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "13.5", y: "3.5", width: "7", height: "7", rx: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "3.5", y: "13.5", width: "7", height: "7", rx: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "13.5", y: "13.5", width: "7", height: "7", rx: "1.5" })
+  ] }),
+  baton: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 20 14 10" }),
+    /* @__PURE__ */ jsx("circle", { cx: "17", cy: "7", r: "3.2" })
+  ] }),
+  search: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "6.5" }),
+    /* @__PURE__ */ jsx("path", { d: "m16 16 4.5 4.5" })
+  ] }),
+  chevronRight: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7" }),
+  chevronLeft: /* @__PURE__ */ jsx("path", { d: "M15 5 8 12l7 7" }),
+  chevronsLeft: /* @__PURE__ */ jsx("path", { d: "M17 5l-7 7 7 7M10 5l-7 7 7 7" }),
+  chevronsRight: /* @__PURE__ */ jsx("path", { d: "m7 5 7 7-7 7M14 5l7 7-7 7" }),
+  plus: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }),
+  close: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18" }),
+  check: /* @__PURE__ */ jsx("path", { d: "m4.5 12.5 5 5 10-11" }),
+  filter: /* @__PURE__ */ jsx("path", { d: "M3 5h18l-7 8v6l-4 2v-8L3 5Z" }),
+  download: /* @__PURE__ */ jsx("path", { d: "M12 3v12M7.5 10.5 12 15l4.5-4.5M4 20h16" }),
+  columns: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.5 4v16M15 4v16" })
+  ] }),
+  rows: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 9.3h18M3 14.7h18" })
+  ] }),
+  sun: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2.5v2.2M12 19.3v2.2M4.2 4.2l1.6 1.6M18.2 18.2l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.2 19.8l1.6-1.6M18.2 5.8l1.6-1.6" })
+  ] }),
+  moon: /* @__PURE__ */ jsx("path", { d: "M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z" }),
+  swatch: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "4.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15.5", cy: "8.5", r: "4.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "15", r: "4.5" })
+  ] }),
+  dots: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1.4" })
+  ] }),
+  trash: /* @__PURE__ */ jsx("path", { d: "M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13" }),
+  pencil: /* @__PURE__ */ jsx("path", { d: "M4 20h4L20 8l-4-4L4 16v4Z" }),
+  eye: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] }),
+  copy: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "11", height: "11", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 6.5V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h.5" })
+  ] }),
+  clone: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "11", height: "11", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 20h9a2 2 0 0 0 2-2V9" })
+  ] }),
+  arrowUpRight: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M9 7h8v8" }),
+  arrowLeft: /* @__PURE__ */ jsx("path", { d: "M19 12H6M11 6l-5 6 5 6" }),
+  sort: /* @__PURE__ */ jsx("path", { d: "M8 9 12 5l4 4M8 15l4 4 4-4" }),
+  sortAsc: /* @__PURE__ */ jsx("path", { d: "M12 19V6M7 11l5-5 5 5" }),
+  sortDesc: /* @__PURE__ */ jsx("path", { d: "M12 5v13M7 13l5 5 5-5" }),
+  database: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "6", rx: "8", ry: "3.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 6v12c0 1.8 3.6 3.2 8 3.2s8-1.4 8-3.2V6M4 12c0 1.8 3.6 3.2 8 3.2s8-1.4 8-3.2" })
+  ] }),
+  table: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 9.5h18M9 9.5V20" })
+  ] }),
+  users: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "8", r: "3.2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 19c0-3 2.7-4.8 6-4.8s6 1.8 6 4.8" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 5.5a3 3 0 0 1 0 5.6M17.5 14.6c2 .6 3.5 2.1 3.5 4.4" })
+  ] }),
+  box: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 3 20.5 7.5v9L12 21l-8.5-4.5v-9L12 3Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.5 7.5 12 12l8.5-4.5M12 12v9" })
+  ] }),
+  receipt: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 3h14v18l-2.3-1.6-2.3 1.6-2.4-1.6L9.6 21l-2.3-1.6L5 21V3Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 8h6M9 12h6" })
+  ] }),
+  key: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "13", r: "4" }),
+    /* @__PURE__ */ jsx("path", { d: "m11 11 8-8M17 5l2 2M15 7l2 2" })
+  ] }),
+  shield: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 3 20 6v6c0 4.4-3.3 7.9-8 9-4.7-1.1-8-4.6-8-9V6l8-3Z" }),
+    /* @__PURE__ */ jsx("path", { d: "m9 12 2.2 2.2L15.5 10" })
+  ] }),
+  activity: /* @__PURE__ */ jsx("path", { d: "M3 12h4l2.5-6 4 12 2.5-6h5" }),
+  tag: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 11.5V4h7.5l10 10-7.5 7.5-10-10Z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "7.5", cy: "7.5", r: "1.3" })
+  ] }),
+  map: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 4 3 6.5v13L9 17l6 2.5 6-2.5v-13L15 6.5 9 4Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 4v13M15 6.5v13" })
+  ] }),
+  calendar: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3.5", y: "5", width: "17", height: "15", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.5 10h17M8 3v4M16 3v4" })
+  ] }),
+  mail: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m3.5 7 8.5 6 8.5-6" })
+  ] }),
+  file: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M13 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9l-6-6Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M13 3v6h6" })
+  ] }),
+  alert: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 4 2.5 20h19L12 4Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 10v4.5M12 17.4v.2" })
+  ] })
+};
+function Icon({
+  name,
+  size = 15,
+  className,
+  title
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      className: className ? `mst-icon ${className}` : "mst-icon",
+      "aria-hidden": title ? void 0 : true,
+      role: title ? "img" : void 0,
+      focusable: "false",
+      children: [
+        title && /* @__PURE__ */ jsx("title", { children: title }),
+        PATHS[name]
+      ]
+    }
+  );
+}
+var ENTITY_ICON_HINTS = [
+  [["user", "usuario", "people", "pessoa", "customer", "cliente", "associado", "member", "contact"], "users"],
+  [["invoice", "fatura", "cobranca", "billing", "receipt", "nota"], "receipt"],
+  [["payment", "pagamento", "transaction", "transacao", "ledger"], "table"],
+  [["product", "produto", "item", "sku", "inventory", "estoque", "catalog"], "box"],
+  [["address", "endereco", "location", "local", "region", "city", "cidade"], "map"],
+  [["role", "papel", "permission", "permissao", "grant", "token", "credential"], "key"],
+  [["audit", "auditoria", "log", "event", "evento", "metric"], "activity"],
+  [["policy", "politica", "security", "seguranca", "consent", "consentimento"], "shield"],
+  [["tag", "label", "category", "categoria", "plan", "plano", "subscription", "assinatura"], "tag"],
+  [["schedule", "agenda", "appointment", "date", "periodo", "calendar"], "calendar"],
+  [["message", "mensagem", "email", "notification", "notificacao", "ticket"], "mail"],
+  [["document", "documento", "file", "arquivo", "contract", "contrato", "report"], "file"]
+];
+function fold(text) {
+  return text.toLowerCase().normalize("NFD").replace(/\p{M}/gu, "");
+}
+function entityIcon(entity) {
+  const haystack = fold(`${entity.id} ${entity.table} ${entity.label.singular} ${entity.label.plural}`);
+  for (const [words, icon] of ENTITY_ICON_HINTS) {
+    if (words.some((word) => haystack.includes(word))) return icon;
+  }
+  return "table";
+}
+
+// src/components/Sidebar.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function normalize(text) {
   return text.toLowerCase().normalize("NFD").replace(/\p{M}/gu, "");
 }
@@ -381,9 +613,9 @@ function Highlight({ label, query }) {
   if (idx === -1) return label;
   const start = originalIndex[idx];
   const end = (originalIndex[idx + foldedQuery.length - 1] ?? label.length - 1) + 1;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     label.slice(0, start),
-    /* @__PURE__ */ jsx("mark", { className: "rounded-sm bg-amber-200 text-inherit", children: label.slice(start, end) }),
+    /* @__PURE__ */ jsx2("mark", { children: label.slice(start, end) }),
     label.slice(end)
   ] });
 }
@@ -394,33 +626,40 @@ function EntityButton({
   subtitle,
   query
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
+      type: "button",
+      "aria-current": active,
       onClick: () => onSelect(entity.id),
-      className: `flex w-full flex-col rounded-md px-3 py-1.5 text-left text-sm transition-colors ${active ? "bg-indigo-100 font-medium text-indigo-700" : "text-slate-700 hover:bg-slate-100"}`,
+      className: "mst-navitem",
+      title: entity.label.plural,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: query ? /* @__PURE__ */ jsx(Highlight, { label: entity.label.plural, query }) : entity.label.plural }),
-        subtitle && /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-normal text-slate-400", children: subtitle })
+        /* @__PURE__ */ jsx2(Icon, { name: entityIcon(entity), size: 14 }),
+        /* @__PURE__ */ jsxs2("span", { className: "mst-navitem__label", children: [
+          query ? /* @__PURE__ */ jsx2(Highlight, { label: entity.label.plural, query }) : entity.label.plural,
+          subtitle && /* @__PURE__ */ jsxs2("span", { className: "mst-navitem__sub", children: [
+            " \xB7 ",
+            subtitle
+          ] })
+        ] })
       ]
     }
   );
 }
-function SectionTitle({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wide text-slate-400", children });
-}
 function Sidebar({
   entities,
   activeId,
   onSelect,
   title,
   labels,
-  recents = []
+  recents = [],
+  onHome,
+  homeActive = false
 }) {
   const t = useT();
   const [query, setQuery] = useState2("");
   const [expanded, setExpanded] = useState2({});
-  const searchRef = useRef(null);
   const menu = useMemo(() => buildMenu(entities, labels), [entities, labels]);
   const groupOf = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -433,27 +672,19 @@ function Sidebar({
     const q = normalize(query);
     return entities.filter((e) => normalize(`${e.label.plural} ${e.label.singular} ${e.table}`).includes(q)).sort((a, b) => a.label.plural.localeCompare(b.label.plural));
   }, [entities, query]);
-  useEffect2(() => {
-    const onKey = (e) => {
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
-        e.preventDefault();
-        searchRef.current?.focus();
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, []);
   const select = (entityId) => {
     setQuery("");
     onSelect(entityId);
   };
   const isExpanded = (groupId, hasActive) => expanded[groupId] ?? hasActive;
-  return /* @__PURE__ */ jsxs("aside", { className: "flex w-64 shrink-0 flex-col border-r border-slate-200 bg-slate-50", children: [
-    /* @__PURE__ */ jsx("div", { className: "border-b border-slate-200 px-4 py-4", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold tracking-tight text-slate-900", children: title }) }),
-    /* @__PURE__ */ jsx("div", { className: "px-2 pt-2", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("aside", { className: "mst-side", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mst-side__brand", children: [
+      /* @__PURE__ */ jsx2("span", { className: "mst-mark", children: /* @__PURE__ */ jsx2(Icon, { name: "baton", size: 15 }) }),
+      /* @__PURE__ */ jsx2("span", { className: "mst-side__title", children: title })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "mst-side__search", children: /* @__PURE__ */ jsx2(
       "input",
       {
-        ref: searchRef,
         type: "search",
         value: query,
         onChange: (e) => setQuery(e.target.value),
@@ -461,11 +692,11 @@ function Sidebar({
           if (e.key === "Escape") setQuery("");
           if (e.key === "Enter" && results[0]) select(results[0].id);
         },
-        placeholder: `${t.searchMenu}  (Ctrl+K)`,
-        className: "w-full rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+        placeholder: t.searchMenu,
+        "aria-label": t.searchMenu
       }
     ) }),
-    /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto p-2", children: query ? results.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-sm text-slate-400", children: t.noMenuResults }) : results.map((e) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2("nav", { className: "mst-side__nav", children: query ? results.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "mst-side__empty", children: t.noMenuResults }) : results.map((e) => /* @__PURE__ */ jsx2(
       EntityButton,
       {
         entity: e,
@@ -475,90 +706,599 @@ function Sidebar({
         query
       },
       e.id
-    )) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      recentEntities.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(SectionTitle, { children: t.recents }),
-        recentEntities.map((e) => /* @__PURE__ */ jsx(EntityButton, { entity: e, active: e.id === activeId, onSelect: select }, e.id))
+    )) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      onHome && /* @__PURE__ */ jsxs2("button", { type: "button", className: "mst-navitem", "aria-current": homeActive, onClick: onHome, title: t.hub, children: [
+        /* @__PURE__ */ jsx2(Icon, { name: "hub", size: 14 }),
+        /* @__PURE__ */ jsx2("span", { className: "mst-navitem__label", children: t.hub })
       ] }),
-      /* @__PURE__ */ jsx(SectionTitle, { children: t.menus }),
+      recentEntities.length > 0 && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx2("p", { className: "mst-side__section", children: t.recents }),
+        recentEntities.map((e) => /* @__PURE__ */ jsx2(EntityButton, { entity: e, active: e.id === activeId, onSelect: select }, e.id))
+      ] }),
+      /* @__PURE__ */ jsx2("p", { className: "mst-side__section", children: t.menus }),
       menu.groups.map((group) => {
         const hasActive = group.entities.some((e) => e.id === activeId);
         const open = isExpanded(group.id, hasActive);
-        return /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsxs2(
             "button",
             {
+              type: "button",
+              "aria-expanded": open,
               onClick: () => setExpanded((prev) => ({ ...prev, [group.id]: !open })),
-              className: "flex w-full items-center gap-1.5 rounded-md px-3 py-1.5 text-left text-sm font-medium text-slate-600 hover:bg-slate-100",
+              className: "mst-navitem mst-navitem--folder",
               children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400", children: open ? "\u25BE" : "\u25B8" }),
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: group.label }),
-                /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-slate-400", children: group.entities.length })
+                /* @__PURE__ */ jsx2(
+                  Icon,
+                  {
+                    name: "chevronRight",
+                    size: 12,
+                    className: open ? "mst-navitem__chev mst-navitem__chev--open" : "mst-navitem__chev"
+                  }
+                ),
+                /* @__PURE__ */ jsx2("span", { className: "mst-navitem__label", children: group.label }),
+                /* @__PURE__ */ jsx2("span", { className: "mst-navitem__count", children: group.entities.length })
               ]
             }
           ),
-          open && /* @__PURE__ */ jsx("div", { className: "ml-3 border-l border-slate-200 pl-1", children: group.entities.map((e) => /* @__PURE__ */ jsx(EntityButton, { entity: e, active: e.id === activeId, onSelect: select }, e.id)) })
+          open && /* @__PURE__ */ jsx2("div", { className: "mst-side__children", children: group.entities.map((e) => /* @__PURE__ */ jsx2(EntityButton, { entity: e, active: e.id === activeId, onSelect: select }, e.id)) })
         ] }, group.id);
       }),
-      menu.ungrouped.map((e) => /* @__PURE__ */ jsx(EntityButton, { entity: e, active: e.id === activeId, onSelect: select }, e.id))
+      menu.ungrouped.map((e) => /* @__PURE__ */ jsx2(EntityButton, { entity: e, active: e.id === activeId, onSelect: select }, e.id))
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "border-t border-slate-200 px-4 py-3 text-xs text-slate-400", children: t.entitiesFooter(entities.length) })
+    /* @__PURE__ */ jsxs2("div", { className: "mst-side__foot", children: [
+      /* @__PURE__ */ jsx2("span", { className: "mst-pulse", "aria-hidden": true }),
+      /* @__PURE__ */ jsx2("span", { children: t.entitiesFooter(entities.length) })
+    ] })
   ] });
 }
 
-// src/components/EntityList.tsx
-import { useMemo as useMemo2, useState as useState5 } from "react";
+// src/components/Header.tsx
+import { useState as useState5 } from "react";
 
-// src/components/ui.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var VARIANTS = {
-  primary: "bg-indigo-600 text-white hover:bg-indigo-500 disabled:bg-indigo-300",
-  secondary: "bg-white text-slate-700 ring-1 ring-inset ring-slate-300 hover:bg-slate-50",
-  danger: "bg-red-600 text-white hover:bg-red-500 disabled:bg-red-300",
-  ghost: "text-slate-600 hover:bg-slate-100"
+// src/theme.tsx
+import { createContext as createContext3, useCallback as useCallback2, useContext as useContext3, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MAESTRO_THEMES = [
+  { id: "cobalto", label: "Grafite & Cobalto", swatch: "#3557e8" },
+  { id: "latao", label: "Ard\xF3sia & Lat\xE3o", swatch: "#9a6a22" },
+  { id: "teal", label: "Tinta & Teal", swatch: "#0e7c74" }
+];
+var STORAGE_KEY = "maestro-admin:appearance";
+var DEFAULTS = {
+  preset: "cobalto",
+  scheme: "system",
+  density: "comfortable"
+};
+function normalizeConfig(input) {
+  if (!input) return {};
+  return typeof input === "string" ? { preset: input } : input;
+}
+function readStored() {
+  try {
+    const raw = globalThis.localStorage?.getItem(STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : null;
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+function writeStored(value) {
+  try {
+    globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(value));
+  } catch {
+  }
+}
+var ThemeContext = createContext3({
+  ...DEFAULTS,
+  picker: true,
+  setPreset: () => void 0,
+  setScheme: () => void 0,
+  setDensity: () => void 0
+});
+function useTheme() {
+  return useContext3(ThemeContext);
+}
+function MaestroThemeProvider({
+  theme,
+  className,
+  children,
+  rootRef
+}) {
+  const config = useMemo2(() => normalizeConfig(theme), [theme]);
+  const remember = config.remember !== false;
+  const [state, setState] = useState3(() => {
+    const stored = remember ? readStored() : {};
+    return {
+      preset: stored.preset ?? config.preset ?? DEFAULTS.preset,
+      scheme: stored.scheme ?? config.scheme ?? DEFAULTS.scheme,
+      density: stored.density ?? config.density ?? DEFAULTS.density
+    };
+  });
+  const update = useCallback2(
+    (patch) => {
+      setState((prev) => {
+        const next = { ...prev, ...patch };
+        if (remember) writeStored(next);
+        return next;
+      });
+    },
+    [remember]
+  );
+  const value = useMemo2(
+    () => ({
+      preset: state.preset ?? DEFAULTS.preset,
+      scheme: state.scheme ?? DEFAULTS.scheme,
+      density: state.density ?? DEFAULTS.density,
+      picker: config.picker !== false,
+      setPreset: (preset) => update({ preset }),
+      setScheme: (scheme) => update({ scheme }),
+      setDensity: (density) => update({ density })
+    }),
+    [state, config.picker, update]
+  );
+  return /* @__PURE__ */ jsx3(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: rootRef,
+      className,
+      "data-maestro-theme": value.preset,
+      "data-maestro-scheme": value.scheme,
+      "data-maestro-density": value.density,
+      style: config.tokens,
+      children
+    }
+  ) });
+}
+
+// src/components/menu.tsx
+import { useEffect as useEffect2, useLayoutEffect, useRef, useState as useState4 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function PopMenu({ anchor, items, onClose }) {
+  const ref = useRef(null);
+  const [pos, setPos] = useState4(anchor);
+  const root = useAdminRoot();
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    setPos({
+      x: Math.max(4, Math.min(anchor.x, window.innerWidth - rect.width - 8)),
+      y: Math.max(4, Math.min(anchor.y, window.innerHeight - rect.height - 8))
+    });
+  }, [anchor]);
+  useEffect2(() => {
+    const onDown = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) onClose();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onClose, true);
+    window.addEventListener("resize", onClose);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onClose, true);
+      window.removeEventListener("resize", onClose);
+    };
+  }, [onClose]);
+  return createPortal(
+    /* @__PURE__ */ jsx4("div", { ref, role: "menu", style: { left: pos.x, top: pos.y }, className: "mst-menu", children: items.map((item) => /* @__PURE__ */ jsxs3("div", { children: [
+      item.separated && /* @__PURE__ */ jsx4("div", { className: "mst-menu__sep" }),
+      /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          type: "button",
+          role: "menuitem",
+          onClick: () => {
+            onClose();
+            item.onSelect();
+          },
+          className: `mst-menu__item${item.danger ? " mst-menu__item--danger" : ""}`,
+          children: [
+            item.icon && /* @__PURE__ */ jsx4(Icon, { name: item.icon, size: 14 }),
+            item.label
+          ]
+        }
+      )
+    ] }, item.id)) }),
+    root ?? document.body
+  );
+}
+function MenuButton({ items, label }) {
+  const [anchor, setAnchor] = useState4(void 0);
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        title: label,
+        onClick: (e) => {
+          const rect = e.currentTarget.getBoundingClientRect();
+          setAnchor({ x: rect.right - 184, y: rect.bottom + 4 });
+        },
+        className: "mst-iconbtn",
+        children: /* @__PURE__ */ jsx4(Icon, { name: "dots", size: 14 })
+      }
+    ),
+    anchor && /* @__PURE__ */ jsx4(PopMenu, { anchor, items, onClose: () => setAnchor(void 0) })
+  ] });
+}
+
+// src/components/Header.tsx
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var NEXT_SCHEME = { system: "light", light: "dark", dark: "system" };
+var SCHEME_ICON = {
+  system: "swatch",
+  light: "sun",
+  dark: "moon"
 };
+function Header({ crumbs, onOpenPalette }) {
+  const t = useT();
+  const theme = useTheme();
+  const [anchor, setAnchor] = useState5(void 0);
+  const themeItems = MAESTRO_THEMES.map((option) => ({
+    id: option.id,
+    label: /* @__PURE__ */ jsxs4(Fragment4, { children: [
+      /* @__PURE__ */ jsx5("span", { className: "mst-swatch", style: { background: option.swatch } }),
+      option.label,
+      theme.preset === option.id && /* @__PURE__ */ jsx5(Icon, { name: "check", size: 13 })
+    ] }),
+    onSelect: () => theme.setPreset(option.id)
+  }));
+  const schemeLabel = theme.scheme === "system" ? t.schemeSystem : theme.scheme === "light" ? t.schemeLight : t.schemeDark;
+  return /* @__PURE__ */ jsxs4("header", { className: "mst-header", children: [
+    /* @__PURE__ */ jsx5("nav", { className: "mst-crumbs", "aria-label": t.breadcrumb, children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs4("span", { className: "mst-crumbs__item", children: [
+      index > 0 && /* @__PURE__ */ jsx5(Icon, { name: "chevronRight", size: 12, className: "mst-crumbs__sep" }),
+      crumb.onClick ? /* @__PURE__ */ jsxs4("button", { type: "button", className: "mst-crumbs__link", onClick: crumb.onClick, children: [
+        crumb.icon && /* @__PURE__ */ jsx5(Icon, { name: crumb.icon, size: 13 }),
+        crumb.label
+      ] }) : /* @__PURE__ */ jsxs4("span", { className: "mst-crumbs__now", children: [
+        crumb.icon && /* @__PURE__ */ jsx5(Icon, { name: crumb.icon, size: 13 }),
+        crumb.label
+      ] })
+    ] }, `${crumb.label}-${index}`)) }),
+    /* @__PURE__ */ jsxs4("button", { type: "button", className: "mst-searchchip", onClick: onOpenPalette, children: [
+      /* @__PURE__ */ jsx5(Icon, { name: "search", size: 13 }),
+      /* @__PURE__ */ jsx5("span", { children: t.search }),
+      /* @__PURE__ */ jsx5("kbd", { className: "mst-kbd", children: t.commandKey })
+    ] }),
+    theme.picker && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          "aria-label": t.density,
+          title: t.density,
+          "aria-pressed": theme.density === "compact",
+          className: "mst-iconbtn",
+          onClick: () => theme.setDensity(theme.density === "compact" ? "comfortable" : "compact"),
+          children: /* @__PURE__ */ jsx5(Icon, { name: "rows", size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          "aria-label": t.palette,
+          title: t.palette,
+          className: "mst-iconbtn",
+          onClick: (e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            setAnchor({ x: rect.right - 200, y: rect.bottom + 6 });
+          },
+          children: /* @__PURE__ */ jsx5(Icon, { name: "swatch", size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${t.colorScheme}: ${schemeLabel}`,
+          title: `${t.colorScheme}: ${schemeLabel}`,
+          className: "mst-iconbtn",
+          onClick: () => theme.setScheme(NEXT_SCHEME[theme.scheme]),
+          children: /* @__PURE__ */ jsx5(Icon, { name: SCHEME_ICON[theme.scheme], size: 14 })
+        }
+      )
+    ] }),
+    anchor && /* @__PURE__ */ jsx5(PopMenu, { anchor, items: themeItems, onClose: () => setAnchor(void 0) })
+  ] });
+}
+
+// src/components/Hub.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/components/ui.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function Button({
   variant = "secondary",
+  icon,
   className = "",
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      className: `inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed ${VARIANTS[variant]} ${className}`,
-      ...props
-    }
-  );
+  return /* @__PURE__ */ jsxs5("button", { type: "button", className: `mst-btn mst-btn--${variant} ${className}`.trim(), ...props, children: [
+    icon && /* @__PURE__ */ jsx6(Icon, { name: icon, size: 14 }),
+    children
+  ] });
 }
-function Badge({ children, tone = "slate" }) {
-  const tones = {
-    slate: "bg-slate-100 text-slate-700",
-    green: "bg-green-100 text-green-700",
-    red: "bg-red-100 text-red-700",
-    amber: "bg-amber-100 text-amber-700",
-    indigo: "bg-indigo-100 text-indigo-700"
-  };
-  return /* @__PURE__ */ jsx2("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${tones[tone]}`, children });
+function IconButton({
+  icon,
+  label,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": label, title: label, className: `mst-iconbtn ${className}`.trim(), ...props, children: /* @__PURE__ */ jsx6(Icon, { name: icon, size: 14 }) });
+}
+function Badge({ children, tone = "neutral", dot = false }) {
+  const toneClass = tone === "neutral" ? "" : ` mst-badge--${tone}`;
+  return /* @__PURE__ */ jsx6("span", { className: `mst-badge${toneClass}${dot ? " mst-badge--dot" : ""}`, children });
 }
 function Spinner({ label }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm text-slate-500", role: "status", children: [
-    /* @__PURE__ */ jsx2("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-indigo-600" }),
-    label ?? "Loading\u2026"
-  ] });
+  return /* @__PURE__ */ jsx6("div", { className: "mst-spinner", role: "status", children: label ?? "Loading\u2026" });
 }
 function EmptyState({ title, hint }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "rounded-lg border border-dashed border-slate-300 p-8 text-center", children: [
-    /* @__PURE__ */ jsx2("p", { className: "text-sm font-medium text-slate-700", children: title }),
-    hint && /* @__PURE__ */ jsx2("p", { className: "mt-1 text-sm text-slate-500", children: hint })
+  return /* @__PURE__ */ jsxs5("div", { className: "mst-empty", children: [
+    /* @__PURE__ */ jsx6("p", { className: "mst-empty__title", children: title }),
+    hint && /* @__PURE__ */ jsx6("p", { className: "mst-empty__hint", children: hint })
   ] });
 }
 function ErrorBanner({ error }) {
-  return /* @__PURE__ */ jsx2("div", { className: "rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700", role: "alert", children: error.message });
+  return /* @__PURE__ */ jsxs5("div", { className: "mst-error", role: "alert", children: [
+    /* @__PURE__ */ jsx6(Icon, { name: "alert", size: 15 }),
+    /* @__PURE__ */ jsx6("span", { children: error.message })
+  ] });
+}
+function Toast({ children }) {
+  return /* @__PURE__ */ jsx6("div", { className: "mst-toast", role: "status", children });
+}
+
+// src/components/Hub.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var CAPS = ["list", "create", "update", "delete"];
+function EntityCard({ entity, onOpen }) {
+  const t = useT();
+  const capLabel = { list: t.capRead, create: t.capCreate, update: t.capUpdate, delete: t.capDelete };
+  return /* @__PURE__ */ jsxs6("button", { type: "button", className: "mst-ecard", onClick: () => onOpen(entity.id), children: [
+    /* @__PURE__ */ jsx7("span", { className: "mst-ecard__tile", children: /* @__PURE__ */ jsx7(Icon, { name: entityIcon(entity), size: 16 }) }),
+    /* @__PURE__ */ jsxs6("span", { className: "mst-ecard__body", children: [
+      /* @__PURE__ */ jsx7("span", { className: "mst-ecard__name", children: entity.label.plural }),
+      /* @__PURE__ */ jsx7("span", { className: "mst-ecard__desc", children: entity.description ?? t.fieldCount(entity.fields.length) }),
+      /* @__PURE__ */ jsx7("span", { className: "mst-caps", children: CAPS.map((cap) => /* @__PURE__ */ jsx7("span", { className: "mst-cap", "data-on": String(entity.capabilities[cap]), children: capLabel[cap] }, cap)) }),
+      /* @__PURE__ */ jsxs6("span", { className: "mst-source", children: [
+        /* @__PURE__ */ jsx7(Icon, { name: "database", size: 11 }),
+        /* @__PURE__ */ jsxs6("span", { children: [
+          entity.datasource,
+          " \xB7 ",
+          entity.table
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Hub({
+  entities,
+  labels,
+  onOpen
+}) {
+  const t = useT();
+  const menu = useMemo3(() => buildMenu(entities, labels), [entities, labels]);
+  const sources = useMemo3(() => new Set(entities.map((e) => e.datasource)).size, [entities]);
+  if (entities.length === 0) {
+    return /* @__PURE__ */ jsx7(EmptyState, { title: t.noEntities, hint: t.noEntitiesHint });
+  }
+  return /* @__PURE__ */ jsxs6("section", { className: "mst-page", children: [
+    /* @__PURE__ */ jsx7("div", { className: "mst-pagehead", children: /* @__PURE__ */ jsxs6("div", { children: [
+      /* @__PURE__ */ jsx7("h1", { className: "mst-pagehead__title", children: t.entities }),
+      /* @__PURE__ */ jsx7("p", { className: "mst-pagehead__meta", children: t.hubMeta(entities.length, sources) })
+    ] }) }),
+    /* @__PURE__ */ jsxs6("div", { className: "mst-hub", children: [
+      menu.groups.map((group) => /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7("p", { className: "mst-grouplabel", children: group.label }),
+        /* @__PURE__ */ jsx7("div", { className: "mst-cards", children: group.entities.map((entity) => /* @__PURE__ */ jsx7(EntityCard, { entity, onOpen }, entity.id)) })
+      ] }, group.id)),
+      menu.ungrouped.length > 0 && /* @__PURE__ */ jsxs6("div", { children: [
+        menu.groups.length > 0 && /* @__PURE__ */ jsx7("p", { className: "mst-grouplabel", children: t.otherEntities }),
+        /* @__PURE__ */ jsx7("div", { className: "mst-cards", children: menu.ungrouped.map((entity) => /* @__PURE__ */ jsx7(EntityCard, { entity, onOpen }, entity.id)) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/CommandPalette.tsx
+import { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef2, useState as useState6 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function normalize2(text) {
+  return text.toLowerCase().normalize("NFD").replace(/\p{M}/gu, "");
+}
+function Highlight2({ label, query }) {
+  if (!query) return label;
+  const folded = normalize2(label);
+  const idx = folded.indexOf(normalize2(query));
+  if (idx === -1) return label;
+  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    label.slice(0, idx),
+    /* @__PURE__ */ jsx8("mark", { children: label.slice(idx, idx + query.length) }),
+    label.slice(idx + query.length)
+  ] });
+}
+function entityCommands(entities, groupOf, onSelect) {
+  return entities.map((entity) => ({
+    id: `entity:${entity.id}`,
+    label: entity.label.plural,
+    icon: entityIcon(entity),
+    hint: groupOf.get(entity.id),
+    keywords: `${entity.label.singular} ${entity.table} ${entity.id}`,
+    run: () => onSelect(entity.id)
+  }));
+}
+function CommandPalette({ sections, onClose }) {
+  const t = useT();
+  const root = useAdminRoot();
+  const inputRef = useRef2(null);
+  const listRef = useRef2(null);
+  const [query, setQuery] = useState6("");
+  const [cursor, setCursor] = useState6(0);
+  const visible = useMemo4(() => {
+    if (!query) return sections;
+    const q = normalize2(query);
+    return sections.map((section) => ({
+      ...section,
+      commands: section.commands.filter((c) => normalize2(`${c.label} ${c.keywords ?? ""}`).includes(q))
+    })).filter((section) => section.commands.length > 0);
+  }, [sections, query]);
+  const flat = useMemo4(() => visible.flatMap((section) => section.commands), [visible]);
+  const active = flat[Math.min(cursor, flat.length - 1)];
+  useEffect3(() => setCursor(0), [query]);
+  useEffect3(() => inputRef.current?.focus(), []);
+  useEffect3(() => {
+    listRef.current?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [cursor, query]);
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "n" && e.ctrlKey) {
+      e.preventDefault();
+      setCursor((c) => flat.length === 0 ? 0 : (Math.min(c, flat.length - 1) + 1) % flat.length);
+      return;
+    }
+    if (e.key === "ArrowUp" || e.key === "p" && e.ctrlKey) {
+      e.preventDefault();
+      setCursor((c) => flat.length === 0 ? 0 : (Math.min(c, flat.length - 1) + flat.length - 1) % flat.length);
+      return;
+    }
+    if (e.key === "Enter" && active) {
+      e.preventDefault();
+      onClose();
+      active.run();
+    }
+  };
+  return createPortal2(
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "mst-overlay",
+        role: "presentation",
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) onClose();
+        },
+        children: /* @__PURE__ */ jsxs7("div", { className: "mst-palette", role: "dialog", "aria-modal": "true", "aria-label": t.commandPalette, children: [
+          /* @__PURE__ */ jsxs7("div", { className: "mst-palette__input", children: [
+            /* @__PURE__ */ jsx8(Icon, { name: "search", size: 15 }),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: query,
+                placeholder: t.palettePlaceholder,
+                "aria-label": t.commandPalette,
+                onChange: (e) => setQuery(e.target.value),
+                onKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsx8("kbd", { className: "mst-kbd", children: "esc" })
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "mst-palette__list", ref: listRef, children: flat.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "mst-palette__empty", children: t.noMenuResults }) : visible.map((section) => /* @__PURE__ */ jsxs7("div", { children: [
+            /* @__PURE__ */ jsx8("p", { className: "mst-palette__section", children: section.label }),
+            section.commands.map((command) => /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                type: "button",
+                className: "mst-palette__row",
+                "data-active": String(command.id === active?.id),
+                onMouseEnter: () => setCursor(flat.findIndex((c) => c.id === command.id)),
+                onClick: () => {
+                  onClose();
+                  command.run();
+                },
+                children: [
+                  command.icon && /* @__PURE__ */ jsx8(Icon, { name: command.icon, size: 14 }),
+                  /* @__PURE__ */ jsx8("span", { className: "mst-palette__label", children: /* @__PURE__ */ jsx8(Highlight2, { label: command.label, query }) }),
+                  command.hint && /* @__PURE__ */ jsx8("span", { className: "mst-palette__hint", children: command.hint })
+                ]
+              },
+              command.id
+            ))
+          ] }, section.id)) })
+        ] })
+      }
+    ),
+    root ?? document.body
+  );
+}
+
+// src/components/EntityList.tsx
+import { useMemo as useMemo6, useState as useState9 } from "react";
+
+// src/columns.ts
+import { useCallback as useCallback3, useMemo as useMemo5, useState as useState7 } from "react";
+var STORAGE_PREFIX = "maestro-admin:columns";
+function read(key) {
+  try {
+    const raw = globalThis.localStorage?.getItem(key);
+    const parsed = raw ? JSON.parse(raw) : void 0;
+    return Array.isArray(parsed) ? parsed.filter((x) => typeof x === "string") : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function write(key, names) {
+  try {
+    if (names) globalThis.localStorage?.setItem(key, JSON.stringify(names));
+    else globalThis.localStorage?.removeItem(key);
+  } catch {
+  }
+}
+function useColumnPrefs(entity, max = 6) {
+  const key = `${STORAGE_PREFIX}:${entity.id}`;
+  const [selection, setSelection] = useState7(() => read(key));
+  const available = useMemo5(() => listFields(entity), [entity]);
+  const fallback = useMemo5(() => primaryListFields(entity, max), [entity, max]);
+  const columns = useMemo5(() => {
+    if (!selection) return fallback;
+    const chosen = available.filter((f) => selection.includes(f.name));
+    return chosen.length > 0 ? chosen : fallback;
+  }, [selection, available, fallback]);
+  const toggle = useCallback3(
+    (name) => {
+      setSelection((prev) => {
+        const current = prev ?? columns.map((f) => f.name);
+        const next = current.includes(name) ? current.filter((n) => n !== name) : [...current, name];
+        write(key, next);
+        return next;
+      });
+    },
+    [key, columns]
+  );
+  const reset = useCallback3(() => {
+    write(key, void 0);
+    setSelection(void 0);
+  }, [key]);
+  const visibleNames = useMemo5(() => new Set(columns.map((f) => f.name)), [columns]);
+  return {
+    columns,
+    available,
+    visible: (name) => visibleNames.has(name),
+    toggle,
+    reset,
+    customized: selection !== void 0
+  };
 }
 
 // src/components/RelationValue.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useState as useState8 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var displayCache = /* @__PURE__ */ new Map();
 function resolveDisplay(client, entityId, displayField, id) {
   const key = `${entityId}/${id}`;
@@ -579,8 +1319,8 @@ function RelationValue({ field, value }) {
   const client = useClient();
   const target = useEntity(field.relationEntity);
   const id = String(value);
-  const [display, setDisplay] = useState3(void 0);
-  useEffect3(() => {
+  const [display, setDisplay] = useState8(void 0);
+  useEffect4(() => {
     let cancelled = false;
     setDisplay(void 0);
     if (!target || target.displayField === target.primaryKey) return;
@@ -591,24 +1331,17 @@ function RelationValue({ field, value }) {
       cancelled = true;
     };
   }, [client, target, id]);
-  return /* @__PURE__ */ jsxs3(
-    "span",
-    {
-      title: id,
-      className: "inline-flex max-w-56 items-center gap-1 truncate rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-xs font-medium text-slate-700",
-      children: [
-        target && /* @__PURE__ */ jsxs3("span", { className: "text-slate-400", children: [
-          target.label.singular,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx3("span", { className: "truncate", children: display ?? shortId(id) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs8("span", { title: id, className: "mst-relation", children: [
+    target && /* @__PURE__ */ jsxs8("span", { className: "mst-subtle", children: [
+      target.label.singular,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx9("span", { className: "mst-relation__label", children: display ?? shortId(id) })
+  ] });
 }
 
 // src/components/ObjectValue.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var ISO_DATETIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
 var MAX_DEPTH = 4;
 function isPlainObject(value) {
@@ -616,49 +1349,40 @@ function isPlainObject(value) {
 }
 function Primitive({ value }) {
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "\u2014" });
+    return /* @__PURE__ */ jsx10("span", { className: "mst-subtle", children: "\u2014" });
   }
   if (typeof value === "boolean" || typeof value === "number") {
-    return /* @__PURE__ */ jsx4("code", { className: "text-xs font-medium text-indigo-700", children: String(value) });
+    return /* @__PURE__ */ jsx10("code", { className: "mst-mono", style: { color: "var(--maestro-brand)" }, children: String(value) });
   }
   const text = String(value);
   if (ISO_DATETIME.test(text)) {
     const d = new Date(text);
     if (!Number.isNaN(d.getTime())) {
-      return /* @__PURE__ */ jsx4("span", { className: "whitespace-nowrap text-slate-700", children: d.toLocaleString() });
+      return /* @__PURE__ */ jsx10("span", { className: "mst-nums", children: d.toLocaleString() });
     }
   }
-  return /* @__PURE__ */ jsx4("span", { className: "break-all text-slate-700", children: text });
+  return /* @__PURE__ */ jsx10("span", { style: { overflowWrap: "anywhere" }, children: text });
 }
 function ObjectValue({ value, depth = 0 }) {
   const t = useT();
   if (!isPlainObject(value) && !Array.isArray(value)) {
-    return /* @__PURE__ */ jsx4(Primitive, { value });
+    return /* @__PURE__ */ jsx10(Primitive, { value });
   }
   if (depth >= MAX_DEPTH) {
-    return /* @__PURE__ */ jsx4("code", { className: "block max-w-md overflow-x-auto rounded bg-slate-50 px-1.5 py-0.5 text-xs text-slate-700", children: JSON.stringify(value) });
+    return /* @__PURE__ */ jsx10("code", { className: "mst-code mst-code--block", children: JSON.stringify(value) });
   }
   const entries = Array.isArray(value) ? value.map((v, i) => [String(i), v]) : Object.entries(value);
   if (entries.length === 0) {
-    return /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: t.emptyObject });
+    return /* @__PURE__ */ jsx10("span", { className: "mst-subtle", children: t.emptyObject });
   }
-  return /* @__PURE__ */ jsx4(
-    "dl",
-    {
-      className: depth === 0 ? "w-full divide-y divide-slate-100 rounded-md border border-slate-200 bg-slate-50/50" : "w-full divide-y divide-slate-100 border-l-2 border-slate-200 pl-2",
-      children: entries.map(([key, entry]) => (
-        // flex-wrap + basis: deeply nested values drop to their own full-width line instead of squeezing.
-        /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-start gap-x-3 gap-y-1 px-3 py-1.5", children: [
-          /* @__PURE__ */ jsx4("dt", { className: "w-36 shrink-0 truncate pt-px text-xs font-medium text-slate-500", title: key, children: key }),
-          /* @__PURE__ */ jsx4("dd", { className: "min-w-0 flex-1 basis-56 text-sm", children: isPlainObject(entry) || Array.isArray(entry) ? /* @__PURE__ */ jsx4(ObjectValue, { value: entry, depth: depth + 1 }) : /* @__PURE__ */ jsx4(Primitive, { value: entry }) })
-        ] }, key)
-      ))
-    }
-  );
+  return /* @__PURE__ */ jsx10("dl", { className: depth === 0 ? "mst-objectvalue mst-objectvalue--root" : "mst-objectvalue mst-objectvalue--nested", children: entries.map(([key, entry]) => /* @__PURE__ */ jsxs9("div", { className: "mst-objectvalue__row", children: [
+    /* @__PURE__ */ jsx10("dt", { className: "mst-objectvalue__key", title: key, children: key }),
+    /* @__PURE__ */ jsx10("dd", { className: "mst-objectvalue__val", children: isPlainObject(entry) || Array.isArray(entry) ? /* @__PURE__ */ jsx10(ObjectValue, { value: entry, depth: depth + 1 }) : /* @__PURE__ */ jsx10(Primitive, { value: entry }) })
+  ] }, key)) });
 }
 
 // src/components/FieldValue.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function enumLabel(field, value) {
   const opt = field.enumOptions?.find((o) => o.value === value);
   return opt ? opt.label : String(value);
@@ -666,117 +1390,42 @@ function enumLabel(field, value) {
 function FieldValue({ field, value, compact = false }) {
   const t = useT();
   if (value === null || value === void 0 || value === "") {
-    return /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "\u2014" });
+    return /* @__PURE__ */ jsx11("span", { className: "mst-subtle", children: "\u2014" });
   }
   if (field.sensitive) {
-    return /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "\u2022\u2022\u2022\u2022\u2022\u2022" });
+    return /* @__PURE__ */ jsx11("span", { className: "mst-subtle", children: "\u2022\u2022\u2022\u2022\u2022\u2022" });
   }
   switch (field.type) {
     case "boolean":
-      return value ? /* @__PURE__ */ jsx5(Badge, { tone: "green", children: t.yes }) : /* @__PURE__ */ jsx5(Badge, { tone: "slate", children: t.no });
+      return value ? /* @__PURE__ */ jsx11(Badge, { tone: "ok", dot: true, children: t.yes }) : /* @__PURE__ */ jsx11(Badge, { dot: true, children: t.no });
     case "enum":
-      return /* @__PURE__ */ jsx5(Badge, { tone: "indigo", children: enumLabel(field, value) });
+      return /* @__PURE__ */ jsx11(Badge, { tone: "brand", children: enumLabel(field, value) });
     case "relation":
-      return field.relationEntity ? /* @__PURE__ */ jsx5(RelationValue, { field, value }) : /* @__PURE__ */ jsx5("span", { className: "text-slate-700", children: String(value) });
+      return field.relationEntity ? /* @__PURE__ */ jsx11(RelationValue, { field, value }) : /* @__PURE__ */ jsx11("span", { children: String(value) });
     case "date":
     case "datetime": {
       const d = new Date(String(value));
-      return /* @__PURE__ */ jsx5("span", { className: "whitespace-nowrap", children: Number.isNaN(d.getTime()) ? String(value) : d.toLocaleString() });
+      return /* @__PURE__ */ jsx11("span", { className: "mst-nums", children: Number.isNaN(d.getTime()) ? String(value) : d.toLocaleString() });
     }
+    case "integer":
+    case "float":
+    case "number":
+    case "decimal":
+    case "currency":
+      return /* @__PURE__ */ jsx11("span", { className: "mst-nums", children: String(value) });
     case "json":
       if (compact) {
-        return /* @__PURE__ */ jsx5("code", { className: "block max-w-xs truncate overflow-x-auto rounded bg-slate-50 px-1.5 py-0.5 text-xs text-slate-700", children: JSON.stringify(value) });
+        return /* @__PURE__ */ jsx11("code", { className: "mst-code", children: JSON.stringify(value) });
       }
       if (typeof value === "object") {
-        return /* @__PURE__ */ jsx5(ObjectValue, { value });
+        return /* @__PURE__ */ jsx11(ObjectValue, { value });
       }
-      return /* @__PURE__ */ jsx5("code", { className: "block max-w-md overflow-x-auto rounded bg-slate-50 px-1.5 py-0.5 text-xs text-slate-700", children: JSON.stringify(value) });
+      return /* @__PURE__ */ jsx11("code", { className: "mst-code mst-code--block", children: JSON.stringify(value) });
     default:
-      return /* @__PURE__ */ jsx5("span", { className: `text-slate-700 ${compact ? "block max-w-64 truncate" : ""}`, children: String(value) });
+      return /* @__PURE__ */ jsx11("span", { children: String(value) });
   }
 }
 
-// src/components/menu.tsx
-import { useEffect as useEffect4, useLayoutEffect, useRef as useRef2, useState as useState4 } from "react";
-import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function PopMenu({ anchor, items, onClose }) {
-  const ref = useRef2(null);
-  const [pos, setPos] = useState4(anchor);
-  useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    setPos({
-      x: Math.max(4, Math.min(anchor.x, window.innerWidth - rect.width - 8)),
-      y: Math.max(4, Math.min(anchor.y, window.innerHeight - rect.height - 8))
-    });
-  }, [anchor]);
-  useEffect4(() => {
-    const onDown = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) onClose();
-    };
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("mousedown", onDown);
-    document.addEventListener("keydown", onKey);
-    window.addEventListener("scroll", onClose, true);
-    window.addEventListener("resize", onClose);
-    return () => {
-      document.removeEventListener("mousedown", onDown);
-      document.removeEventListener("keydown", onKey);
-      window.removeEventListener("scroll", onClose, true);
-      window.removeEventListener("resize", onClose);
-    };
-  }, [onClose]);
-  return createPortal(
-    /* @__PURE__ */ jsx6(
-      "div",
-      {
-        ref,
-        role: "menu",
-        style: { position: "fixed", left: pos.x, top: pos.y, zIndex: 50 },
-        className: "min-w-44 rounded-md border border-slate-200 bg-white py-1 shadow-lg",
-        children: items.map((item) => /* @__PURE__ */ jsx6(
-          "button",
-          {
-            role: "menuitem",
-            onClick: () => {
-              onClose();
-              item.onSelect();
-            },
-            className: `block w-full px-3 py-1.5 text-left text-sm ${item.danger ? "text-red-600 hover:bg-red-50" : "text-slate-700 hover:bg-slate-100"}`,
-            children: item.label
-          },
-          item.id
-        ))
-      }
-    ),
-    document.body
-  );
-}
-function MenuButton({ items, label }) {
-  const [anchor, setAnchor] = useState4(void 0);
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(
-      "button",
-      {
-        type: "button",
-        "aria-label": label,
-        title: label,
-        onClick: (e) => {
-          const rect = e.currentTarget.getBoundingClientRect();
-          setAnchor({ x: rect.right - 176, y: rect.bottom + 4 });
-        },
-        className: "rounded-md px-2 py-1 text-slate-500 hover:bg-slate-100 hover:text-slate-900",
-        children: "\u22EE"
-      }
-    ),
-    anchor && /* @__PURE__ */ jsx6(PopMenu, { anchor, items, onClose: () => setAnchor(void 0) })
-  ] });
-}
-
 // src/clipboard.ts
 async function copyText(text) {
   if (navigator.clipboard?.writeText) {
@@ -797,8 +1446,9 @@ async function copyText(text) {
 }
 
 // src/components/EntityList.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var PAGE_SIZE = 20;
+var ACTIONS_COLUMN_WIDTH = 44;
 function filterFor(field, value) {
   if (value === null || value === void 0) return { field: field.name, operator: "isNull" };
   if (field.type === "boolean") return { field: field.name, operator: value ? "isTrue" : "isFalse" };
@@ -813,6 +1463,11 @@ function filterChipText(entity, filter) {
   const value = filter.value ?? "";
   return `${label} = ${value.length > 24 ? `${value.slice(0, 24)}\u2026` : value}`;
 }
+function pageWindow(page, totalPages) {
+  const size = Math.min(5, totalPages);
+  const start = Math.max(1, Math.min(page - 2, totalPages - size + 1));
+  return Array.from({ length: size }, (_, i) => start + i);
+}
 function EntityList({
   entity,
   onOpen,
@@ -826,14 +1481,16 @@ function EntityList({
   const t = useT();
   const entities = useEntities();
   const relatedLabel = (entityId) => entities.find((e) => e.id === entityId)?.label.singular ?? entityId;
-  const columns = useMemo2(() => primaryListFields(entity), [entity]);
-  const searchFields = useMemo2(() => entity.fields.filter((f) => f.searchable).map((f) => f.name), [entity]);
-  const [page, setPage] = useState5(1);
-  const [search, setSearch] = useState5("");
-  const [sort, setSort] = useState5(void 0);
-  const [filters, setFilters] = useState5(initialFilters ?? []);
-  const [cellMenu, setCellMenu] = useState5(void 0);
-  const [copied, setCopied] = useState5(false);
+  const columnPrefs = useColumnPrefs(entity);
+  const columns = columnPrefs.columns;
+  const searchFields = useMemo6(() => entity.fields.filter((f) => f.searchable).map((f) => f.name), [entity]);
+  const [page, setPage] = useState9(1);
+  const [search, setSearch] = useState9("");
+  const [sort, setSort] = useState9(void 0);
+  const [filters, setFilters] = useState9(initialFilters ?? []);
+  const [cellMenu, setCellMenu] = useState9(void 0);
+  const [columnMenu, setColumnMenu] = useState9(void 0);
+  const [copied, setCopied] = useState9(false);
   const query = {
     page,
     pageSize: PAGE_SIZE,
@@ -870,17 +1527,31 @@ function EntityList({
   };
   const rowMenuItems = (record) => {
     const id = String(record[entity.primaryKey]);
-    const items = [{ id: "view", label: `\u{1F441} ${t.view}`, onSelect: () => onOpen(id) }];
-    if (entity.capabilities.update) items.push({ id: "edit", label: `\u270F\uFE0F ${t.edit}`, onSelect: () => onEdit(id) });
+    const items = [{ id: "view", label: t.view, icon: "eye", onSelect: () => onOpen(id) }];
+    if (entity.capabilities.update) {
+      items.push({ id: "edit", label: t.edit, icon: "pencil", onSelect: () => onEdit(id) });
+    }
     if (entity.capabilities.clone && entity.capabilities.create) {
-      items.push({ id: "clone", label: `\u29C9 ${t.clone}`, onSelect: () => onClone(id) });
+      items.push({ id: "clone", label: t.clone, icon: "clone", onSelect: () => onClone(id) });
     }
     items.push(
-      { id: "copy-id", label: `\u2398 ${t.copyId}`, onSelect: () => void copy(id) },
-      { id: "copy-object", label: `{} ${t.copyObject}`, onSelect: () => void copy(JSON.stringify(record, null, 2)) }
+      { id: "copy-id", label: t.copyId, icon: "copy", separated: true, onSelect: () => void copy(id) },
+      {
+        id: "copy-object",
+        label: t.copyObject,
+        icon: "copy",
+        onSelect: () => void copy(JSON.stringify(record, null, 2))
+      }
     );
     if (entity.capabilities.delete) {
-      items.push({ id: "remove", label: `\u{1F5D1} ${t.remove}`, danger: true, onSelect: () => void onDelete(id) });
+      items.push({
+        id: "remove",
+        label: t.remove,
+        icon: "trash",
+        danger: true,
+        separated: true,
+        onSelect: () => void onDelete(id)
+      });
     }
     return items;
   };
@@ -890,130 +1561,195 @@ function EntityList({
     const value = record[field.name];
     const items = [];
     const filter = filterFor(field, value);
-    if (filter) items.push({ id: "filter", label: `\u25BC ${t.addToFilter}`, onSelect: () => addFilter(filter) });
-    items.push({ id: "view", label: `\u{1F441} ${t.view}`, onSelect: () => onOpen(id) });
-    if (entity.capabilities.update) items.push({ id: "edit", label: `\u270F\uFE0F ${t.edit}`, onSelect: () => onEdit(id) });
+    if (filter) items.push({ id: "filter", label: t.addToFilter, icon: "filter", onSelect: () => addFilter(filter) });
+    items.push({ id: "view", label: t.view, icon: "eye", onSelect: () => onOpen(id) });
+    if (entity.capabilities.update) items.push({ id: "edit", label: t.edit, icon: "pencil", onSelect: () => onEdit(id) });
     if (field.type === "relation" && field.relationEntity && value !== null && value !== void 0) {
       const targetId = field.relationEntity;
       items.push({
         id: "open-related",
-        label: `\u2197 ${t.openRelated(relatedLabel(targetId))}`,
+        label: t.openRelated(relatedLabel(targetId)),
+        icon: "arrowUpRight",
         onSelect: () => onNavigate(targetId, String(value))
       });
     }
     if (value !== null && value !== void 0) {
       items.push({
         id: "copy-value",
-        label: `\u2398 ${t.copyValue}`,
+        label: t.copyValue,
+        icon: "copy",
+        separated: true,
         onSelect: () => void copy(typeof value === "object" ? JSON.stringify(value) : String(value))
       });
     }
     return items;
   };
+  const columnMenuItems = [
+    ...columnPrefs.available.map((field) => ({
+      id: `col:${field.name}`,
+      label: field.label,
+      icon: columnPrefs.visible(field.name) ? "check" : void 0,
+      onSelect: () => columnPrefs.toggle(field.name)
+    })),
+    ...columnPrefs.customized ? [{ id: "reset", label: t.resetColumns, icon: "rows", separated: true, onSelect: columnPrefs.reset }] : []
+  ];
   const totalPages = data?.totalPages ?? (data ? Math.max(1, Math.ceil(data.total / PAGE_SIZE)) : 1);
-  return /* @__PURE__ */ jsxs6("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs6("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx7("h1", { className: "text-lg font-semibold text-slate-900", children: entity.label.plural }),
-        data && /* @__PURE__ */ jsx7("p", { className: "text-sm text-slate-500", children: t.records(data.total) })
+  const firstRow = data && data.total > 0 ? (page - 1) * PAGE_SIZE + 1 : 0;
+  const lastRow = data ? Math.min(page * PAGE_SIZE, data.total) : 0;
+  return /* @__PURE__ */ jsxs10("section", { className: "mst-page mst-page--fill", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "mst-pagehead", children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx12("h1", { className: "mst-pagehead__title", children: entity.label.plural }),
+        /* @__PURE__ */ jsxs10("p", { className: "mst-pagehead__meta", children: [
+          data && /* @__PURE__ */ jsx12("span", { className: "mst-nums", children: t.records(data.total) }),
+          /* @__PURE__ */ jsxs10("span", { className: "mst-source", children: [
+            /* @__PURE__ */ jsx12(Icon, { name: "database", size: 11 }),
+            /* @__PURE__ */ jsxs10("span", { children: [
+              entity.datasource,
+              " \xB7 ",
+              entity.table
+            ] })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        searchFields.length > 0 && /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsxs10("div", { className: "mst-pagehead__actions", children: [
+        searchFields.length > 0 && /* @__PURE__ */ jsx12(
           "input",
           {
             type: "search",
+            className: "mst-input mst-input--inline",
             placeholder: t.searchPlaceholder(entity.label.plural),
             value: search,
             onChange: (e) => {
               setSearch(e.target.value);
               setPage(1);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs10(
+          Button,
+          {
+            icon: "columns",
+            onClick: (e) => {
+              const rect = e.currentTarget.getBoundingClientRect();
+              setColumnMenu({ x: rect.right - 200, y: rect.bottom + 6 });
             },
-            className: "rounded-md border border-slate-300 px-3 py-1.5 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            children: [
+              t.columns,
+              " ",
+              /* @__PURE__ */ jsx12("span", { className: "mst-subtle mst-nums", children: t.columnsCount(columns.length, columnPrefs.available.length) })
+            ]
           }
         ),
-        entity.capabilities.create && /* @__PURE__ */ jsx7(Button, { variant: "primary", onClick: onCreate, children: t.newRecord })
+        entity.capabilities.create && /* @__PURE__ */ jsx12(Button, { variant: "primary", icon: "plus", onClick: onCreate, children: t.newRecord })
       ] })
     ] }),
-    filters.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsxs6("span", { className: "text-slate-500", children: [
-        t.filters,
-        ":"
-      ] }),
-      filters.map((f) => /* @__PURE__ */ jsxs6(
+    filters.length > 0 && /* @__PURE__ */ jsxs10("div", { className: "mst-chips", children: [
+      filters.map((f) => /* @__PURE__ */ jsxs10(
         "button",
         {
+          type: "button",
+          className: "mst-chip",
+          title: f.value,
           onClick: () => {
             setFilters((prev) => prev.filter((p) => p.field !== f.field));
             setPage(1);
           },
-          title: f.value,
-          className: "inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-medium text-indigo-700 hover:bg-indigo-100",
           children: [
             filterChipText(entity, f),
-            /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\xD7" })
+            /* @__PURE__ */ jsx12(Icon, { name: "close", size: 11 })
           ]
         },
         f.field
       )),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx12(
         "button",
         {
+          type: "button",
+          className: "mst-btn mst-btn--ghost",
           onClick: () => {
             setFilters([]);
             setPage(1);
           },
-          className: "text-xs text-slate-500 underline hover:text-slate-700",
           children: t.clearFilters
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx7(ErrorBanner, { error }),
-    loading && !data ? /* @__PURE__ */ jsx7(Spinner, { label: t.loading }) : data && data.records.length === 0 ? /* @__PURE__ */ jsx7(EmptyState, { title: t.noRecords, hint: search || filters.length ? t.tryDifferentSearch : void 0 }) : /* @__PURE__ */ jsx7("div", { className: "overflow-x-auto rounded-lg border border-slate-200", children: /* @__PURE__ */ jsxs6("table", { className: "min-w-full divide-y divide-slate-200 text-sm", children: [
-      /* @__PURE__ */ jsx7("thead", { className: "bg-slate-50", children: /* @__PURE__ */ jsxs6("tr", { children: [
-        columns.map((f) => /* @__PURE__ */ jsxs6(
-          "th",
-          {
-            onClick: () => f.sortable && toggleSort(f.name),
-            className: `px-3 py-2 text-left font-medium text-slate-600 ${f.sortable ? "cursor-pointer select-none hover:text-slate-900" : ""}`,
-            children: [
-              f.label,
-              sort?.field === f.name && (sort.direction === "asc" ? " \u25B2" : " \u25BC")
-            ]
-          },
-          f.name
-        )),
-        /* @__PURE__ */ jsx7("th", { className: "px-3 py-2 text-right font-medium text-slate-600", children: t.actions })
-      ] }) }),
-      /* @__PURE__ */ jsx7("tbody", { className: "divide-y divide-slate-100 bg-white", children: data?.records.map((record, i) => {
-        const id = String(record[entity.primaryKey]);
-        return /* @__PURE__ */ jsxs6("tr", { className: "hover:bg-slate-50", children: [
-          columns.map((f) => /* @__PURE__ */ jsx7(
-            "td",
+    error && /* @__PURE__ */ jsx12(ErrorBanner, { error }),
+    loading && !data ? /* @__PURE__ */ jsx12(Spinner, { label: t.loading }) : data && data.records.length === 0 ? /* @__PURE__ */ jsx12(EmptyState, { title: t.noRecords, hint: search || filters.length ? t.tryDifferentSearch : void 0 }) : /* @__PURE__ */ jsxs10("div", { className: "mst-card mst-tablewrap", children: [
+      /* @__PURE__ */ jsx12("div", { className: "mst-tablescroll", children: /* @__PURE__ */ jsxs10("table", { className: "mst-table", children: [
+        /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+          columns.map((f) => /* @__PURE__ */ jsx12(
+            "th",
             {
-              className: "cursor-pointer px-3 py-2 align-top",
-              onClick: (e) => setCellMenu({ anchor: { x: e.clientX, y: e.clientY }, field: f, record }),
-              onDoubleClick: () => onOpen(id),
-              children: /* @__PURE__ */ jsx7(FieldValue, { field: f, value: record[f.name], compact: true })
+              style: { width: f.list.width, textAlign: f.list.align },
+              "aria-sort": sort?.field === f.name ? sort.direction === "asc" ? "ascending" : "descending" : "none",
+              children: f.sortable ? /* @__PURE__ */ jsxs10("button", { type: "button", className: "mst-th__button", onClick: () => toggleSort(f.name), children: [
+                /* @__PURE__ */ jsx12("span", { className: "mst-th__label", children: f.label }),
+                /* @__PURE__ */ jsx12(
+                  Icon,
+                  {
+                    name: sort?.field === f.name ? sort.direction === "asc" ? "sortAsc" : "sortDesc" : "sort",
+                    size: 11
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx12("span", { className: "mst-th__label", children: f.label })
             },
             f.name
           )),
-          /* @__PURE__ */ jsx7("td", { className: "whitespace-nowrap px-3 py-2 text-right", children: /* @__PURE__ */ jsx7(MenuButton, { label: t.actions, items: rowMenuItems(record) }) })
-        ] }, id || i);
-      }) })
-    ] }) }),
-    cellMenu && /* @__PURE__ */ jsx7(PopMenu, { anchor: cellMenu.anchor, items: cellMenuItems(cellMenu), onClose: () => setCellMenu(void 0) }),
-    copied && /* @__PURE__ */ jsx7("div", { className: "fixed bottom-4 right-4 z-50 rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white shadow-lg", children: t.copied }),
-    data && totalPages > 1 && /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-2 text-sm", children: [
-      /* @__PURE__ */ jsx7(Button, { variant: "secondary", disabled: page <= 1, onClick: () => setPage((p) => p - 1), children: t.previous }),
-      /* @__PURE__ */ jsx7("span", { className: "text-slate-500", children: t.page(page, totalPages) }),
-      /* @__PURE__ */ jsx7(Button, { variant: "secondary", disabled: page >= totalPages, onClick: () => setPage((p) => p + 1), children: t.next })
-    ] })
+          /* @__PURE__ */ jsx12("th", { style: { width: ACTIONS_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx12("span", { className: "mst-sr-only", children: t.actions }) })
+        ] }) }),
+        /* @__PURE__ */ jsx12("tbody", { children: data?.records.map((record, i) => {
+          const id = String(record[entity.primaryKey]);
+          return /* @__PURE__ */ jsxs10("tr", { children: [
+            columns.map((f) => /* @__PURE__ */ jsx12(
+              "td",
+              {
+                className: "mst-table__cell",
+                style: { textAlign: f.list.align },
+                title: f.label,
+                onClick: (e) => setCellMenu({ anchor: { x: e.clientX, y: e.clientY }, field: f, record }),
+                onDoubleClick: () => onOpen(id),
+                children: /* @__PURE__ */ jsx12(FieldValue, { field: f, value: record[f.name], compact: true })
+              },
+              f.name
+            )),
+            /* @__PURE__ */ jsx12("td", { className: "mst-td--actions", children: /* @__PURE__ */ jsx12(MenuButton, { label: t.actions, items: rowMenuItems(record) }) })
+          ] }, id || i);
+        }) })
+      ] }) }),
+      data && /* @__PURE__ */ jsxs10("div", { className: "mst-pagination", children: [
+        /* @__PURE__ */ jsxs10("span", { className: "mst-nums", children: [
+          firstRow,
+          "\u2013",
+          lastRow
+        ] }),
+        /* @__PURE__ */ jsx12("span", { children: t.records(data.total) }),
+        totalPages > 1 && /* @__PURE__ */ jsxs10("span", { className: "mst-pagination__nums", children: [
+          /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": t.previous, disabled: page <= 1, onClick: () => setPage((p) => p - 1), children: /* @__PURE__ */ jsx12(Icon, { name: "chevronLeft", size: 13 }) }),
+          pageWindow(page, totalPages).map((p) => /* @__PURE__ */ jsx12("button", { type: "button", "aria-current": p === page, onClick: () => setPage(p), children: p }, p)),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              "aria-label": t.next,
+              disabled: page >= totalPages,
+              onClick: () => setPage((p) => p + 1),
+              children: /* @__PURE__ */ jsx12(Icon, { name: "chevronRight", size: 13 })
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    cellMenu && /* @__PURE__ */ jsx12(PopMenu, { anchor: cellMenu.anchor, items: cellMenuItems(cellMenu), onClose: () => setCellMenu(void 0) }),
+    columnMenu && /* @__PURE__ */ jsx12(PopMenu, { anchor: columnMenu, items: columnMenuItems, onClose: () => setColumnMenu(void 0) }),
+    copied && /* @__PURE__ */ jsx12(Toast, { children: t.copied })
   ] });
 }
 
 // src/components/EntityDetail.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function EntityDetail({
   entity,
   id,
@@ -1028,7 +1764,7 @@ function EntityDetail({
   const entities = useEntities();
   const { data, error, loading } = useEntityRecord(entity.id, id);
   const fields = detailFields(entity);
-  const [copied, setCopied] = useState6(false);
+  const [copied, setCopied] = useState10(false);
   const copy = async (text) => {
     await copyText(text);
     setCopied(true);
@@ -1041,71 +1777,72 @@ function EntityDetail({
   };
   const menuItems = [];
   if (entity.capabilities.clone && entity.capabilities.create) {
-    menuItems.push({ id: "clone", label: `\u29C9 ${t.clone}`, onSelect: onClone });
+    menuItems.push({ id: "clone", label: t.clone, icon: "clone", onSelect: onClone });
   }
-  menuItems.push({ id: "copy-id", label: `\u2398 ${t.copyId}`, onSelect: () => void copy(id) });
+  menuItems.push({ id: "copy-id", label: t.copyId, icon: "copy", onSelect: () => void copy(id) });
   if (data) {
     menuItems.push({
       id: "copy-object",
-      label: `{} ${t.copyObject}`,
+      label: t.copyObject,
+      icon: "copy",
       onSelect: () => void copy(JSON.stringify(data, null, 2))
     });
   }
   if (entity.capabilities.delete) {
-    menuItems.push({ id: "remove", label: `\u{1F5D1} ${t.remove}`, danger: true, onSelect: () => void onDelete() });
+    menuItems.push({
+      id: "remove",
+      label: t.remove,
+      icon: "trash",
+      danger: true,
+      separated: true,
+      onSelect: () => void onDelete()
+    });
   }
-  return /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs7("header", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsxs7("button", { onClick: onBack, className: "text-sm text-indigo-600 hover:underline", children: [
-          "\u2190 ",
+  return /* @__PURE__ */ jsxs11("section", { className: "mst-page", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "mst-pagehead", children: [
+      /* @__PURE__ */ jsxs11("div", { children: [
+        /* @__PURE__ */ jsxs11("button", { type: "button", className: "mst-backlink", onClick: onBack, children: [
+          /* @__PURE__ */ jsx13(Icon, { name: "arrowLeft", size: 12 }),
           entity.label.plural
         ] }),
-        /* @__PURE__ */ jsxs7("h1", { className: "text-lg font-semibold text-slate-900", children: [
+        /* @__PURE__ */ jsxs11("h1", { className: "mst-pagehead__title", children: [
           entity.label.singular,
           " ",
           data ? String(data[entity.displayField] ?? id) : ""
         ] })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
-        entity.capabilities.update && /* @__PURE__ */ jsx8(Button, { variant: "primary", onClick: onEdit, children: t.edit }),
-        /* @__PURE__ */ jsx8(MenuButton, { label: t.actions, items: menuItems })
+      /* @__PURE__ */ jsxs11("div", { className: "mst-pagehead__actions", children: [
+        entity.capabilities.update && /* @__PURE__ */ jsx13(Button, { variant: "primary", icon: "pencil", onClick: onEdit, children: t.edit }),
+        /* @__PURE__ */ jsx13(MenuButton, { label: t.actions, items: menuItems })
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx8(ErrorBanner, { error }),
-    loading && !data ? /* @__PURE__ */ jsx8(Spinner, {}) : data && /* @__PURE__ */ jsx8("dl", { className: "divide-y divide-slate-100 rounded-lg border border-slate-200 bg-white", children: fields.map((f) => {
+    error && /* @__PURE__ */ jsx13(ErrorBanner, { error }),
+    loading && !data ? /* @__PURE__ */ jsx13(Spinner, {}) : data && /* @__PURE__ */ jsx13("dl", { className: "mst-fields", children: fields.map((f) => {
       const value = data[f.name];
       const isRelation = f.type === "relation" && f.relationEntity && value !== null && value !== void 0;
       const target = isRelation ? entities.find((e) => e.id === f.relationEntity) : void 0;
-      return /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-3 gap-4 px-4 py-3", children: [
-        /* @__PURE__ */ jsx8("dt", { className: "text-sm font-medium text-slate-500", children: f.label }),
-        /* @__PURE__ */ jsxs7("dd", { className: "col-span-2 flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ jsx8(FieldValue, { field: f, value }),
-          isRelation && /* @__PURE__ */ jsxs7(
-            "button",
-            {
-              onClick: () => onNavigate(f.relationEntity, String(value)),
-              className: "text-xs text-indigo-600 hover:underline",
-              children: [
-                t.openRelated(target?.label.singular ?? f.relationEntity),
-                " \u2197"
-              ]
-            }
-          )
+      return /* @__PURE__ */ jsxs11("div", { className: "mst-fields__row", children: [
+        /* @__PURE__ */ jsx13("dt", { className: "mst-fields__key", children: f.label }),
+        /* @__PURE__ */ jsxs11("dd", { className: "mst-fields__value", children: [
+          /* @__PURE__ */ jsx13(FieldValue, { field: f, value }),
+          isRelation && /* @__PURE__ */ jsxs11("button", { type: "button", className: "mst-backlink", onClick: () => onNavigate(f.relationEntity, String(value)), children: [
+            t.openRelated(target?.label.singular ?? f.relationEntity),
+            /* @__PURE__ */ jsx13(Icon, { name: "arrowUpRight", size: 11 })
+          ] })
         ] })
       ] }, f.name);
     }) }),
-    copied && /* @__PURE__ */ jsx8("div", { className: "fixed bottom-4 right-4 z-50 rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white shadow-lg", children: t.copied })
+    copied && /* @__PURE__ */ jsx13(Toast, { children: t.copied })
   ] });
 }
 
 // src/components/EntityForm.tsx
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import { useEffect as useEffect6, useState as useState12 } from "react";
 
 // src/components/JsonInput.tsx
-import { useEffect as useEffect5, useRef as useRef3, useState as useState7 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var leafInputClass = "w-full rounded-md border border-slate-300 px-2.5 py-1 text-sm text-slate-800 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:bg-slate-100";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState11 } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var leafInputClass = "mst-input";
 var MAX_DEPTH2 = 3;
 function RawJsonArea({
   id,
@@ -1116,8 +1853,8 @@ function RawJsonArea({
   placeholder
 }) {
   const t = useT();
-  const [text, setText] = useState7(() => value === null || value === void 0 ? "" : JSON.stringify(value, null, 2));
-  const [invalid, setInvalid] = useState7(false);
+  const [text, setText] = useState11(() => value === null || value === void 0 ? "" : JSON.stringify(value, null, 2));
+  const [invalid, setInvalid] = useState11(false);
   const lastEmitted = useRef3(value);
   useEffect5(() => {
     if (value !== lastEmitted.current) {
@@ -1143,8 +1880,8 @@ function RawJsonArea({
       setInvalid(true);
     }
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs12("div", { className: "mst-field", children: [
+    /* @__PURE__ */ jsx14(
       "textarea",
       {
         id,
@@ -1154,10 +1891,10 @@ function RawJsonArea({
         disabled,
         onChange: (e) => onText(e.target.value),
         "aria-invalid": invalid || void 0,
-        className: `${leafInputClass} font-mono ${invalid ? "border-amber-400 focus:border-amber-500 focus:ring-amber-500" : ""}`
+        className: `mst-textarea mst-mono${invalid ? " mst-input--invalid" : ""}`
       }
     ),
-    invalid && /* @__PURE__ */ jsx9("p", { role: "alert", className: "text-xs text-amber-600", children: t.jsonInvalid })
+    invalid && /* @__PURE__ */ jsx14("p", { role: "alert", className: "mst-help mst-help--warn", children: t.jsonInvalid })
   ] });
 }
 function LeafEditor({
@@ -1168,7 +1905,7 @@ function LeafEditor({
   depth
 }) {
   if (typeof value === "boolean") {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx14(
       "input",
       {
         id,
@@ -1176,12 +1913,12 @@ function LeafEditor({
         checked: value,
         disabled,
         onChange: (e) => onChange(e.target.checked),
-        className: "mt-1 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
+        className: "mst-checkbox"
       }
     );
   }
   if (typeof value === "number") {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx14(
       "input",
       {
         id,
@@ -1195,7 +1932,7 @@ function LeafEditor({
     );
   }
   if (typeof value === "string") {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx14(
       "input",
       {
         id,
@@ -1208,7 +1945,7 @@ function LeafEditor({
     );
   }
   if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx14(
       "input",
       {
         id,
@@ -1222,12 +1959,12 @@ function LeafEditor({
     );
   }
   if (isPlainObject(value) && depth < MAX_DEPTH2) {
-    return /* @__PURE__ */ jsx9("div", { className: "rounded-md border border-slate-200", children: /* @__PURE__ */ jsx9(ObjectEditor, { idPrefix: id, value, onChange, disabled, depth: depth + 1 }) });
+    return /* @__PURE__ */ jsx14("div", { className: "mst-json__nest", children: /* @__PURE__ */ jsx14(ObjectEditor, { idPrefix: id, value, onChange, disabled, depth: depth + 1 }) });
   }
   if (Array.isArray(value) && depth < MAX_DEPTH2) {
-    return /* @__PURE__ */ jsx9("div", { className: "rounded-md border border-slate-200", children: /* @__PURE__ */ jsx9(ArrayEditor, { idPrefix: id, value, onChange, disabled, depth: depth + 1 }) });
+    return /* @__PURE__ */ jsx14("div", { className: "mst-json__nest", children: /* @__PURE__ */ jsx14(ArrayEditor, { idPrefix: id, value, onChange, disabled, depth: depth + 1 }) });
   }
-  return /* @__PURE__ */ jsx9(RawJsonArea, { id, value, onChange, disabled, rows: 3 });
+  return /* @__PURE__ */ jsx14(RawJsonArea, { id, value, onChange, disabled, rows: 3 });
 }
 function ArrayEditor({
   idPrefix,
@@ -1244,27 +1981,27 @@ function ArrayEditor({
     const template = last === void 0 || last === null ? null : JSON.parse(JSON.stringify(last));
     onChange([...value, template]);
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "divide-y divide-slate-100", children: [
+  return /* @__PURE__ */ jsxs12("div", { className: "mst-json__rows", children: [
     value.map((item, i) => {
       const id = `${idPrefix}-${i}`;
-      return /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-start gap-x-3 gap-y-1.5 px-3 py-2", children: [
-        /* @__PURE__ */ jsx9("label", { htmlFor: id, className: "w-8 shrink-0 pt-1.5 text-right text-xs font-medium text-slate-400", children: i }),
-        !disabled && /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsxs12("div", { className: "mst-json__row", children: [
+        /* @__PURE__ */ jsx14("label", { htmlFor: id, className: "mst-json__index", children: i }),
+        !disabled && /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
             title: t.removeItem,
             "aria-label": `${t.removeItem} ${i}`,
             onClick: () => removeAt(i),
-            className: "shrink-0 pt-1.5 text-xs text-slate-400 transition-colors hover:text-red-600",
+            className: "mst-json__remove",
             children: "\u2715"
           }
         ),
-        /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1 basis-64", children: /* @__PURE__ */ jsx9(LeafEditor, { id, value: item, onChange: (next) => setAt(i, next), disabled, depth }) })
+        /* @__PURE__ */ jsx14("div", { className: "mst-json__field", children: /* @__PURE__ */ jsx14(LeafEditor, { id, value: item, onChange: (next) => setAt(i, next), disabled, depth }) })
       ] }, i);
     }),
-    value.length === 0 && /* @__PURE__ */ jsx9("p", { className: "px-3 py-2 text-xs text-slate-400", children: t.emptyObject }),
-    !disabled && /* @__PURE__ */ jsx9("div", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsxs8("button", { type: "button", onClick: append, className: "text-xs font-medium text-indigo-600 hover:underline", children: [
+    value.length === 0 && /* @__PURE__ */ jsx14("p", { className: "mst-json__empty", children: t.emptyObject }),
+    !disabled && /* @__PURE__ */ jsx14("div", { className: "mst-json__addrow", children: /* @__PURE__ */ jsxs12("button", { type: "button", onClick: append, className: "mst-backlink", children: [
       "+ ",
       t.addItem
     ] }) })
@@ -1280,16 +2017,16 @@ function ObjectEditor({
   const t = useT();
   const entries = Object.entries(value);
   if (entries.length === 0) {
-    return /* @__PURE__ */ jsx9("p", { className: "px-3 py-2 text-xs text-slate-400", children: t.emptyObject });
+    return /* @__PURE__ */ jsx14("p", { className: "mst-json__empty", children: t.emptyObject });
   }
-  return /* @__PURE__ */ jsx9("div", { className: "divide-y divide-slate-100", children: entries.map(([key, entry]) => {
+  return /* @__PURE__ */ jsx14("div", { className: "mst-json__rows", children: entries.map(([key, entry]) => {
     const id = `${idPrefix}-${key}`;
     return (
       // flex-wrap + basis: when the label column leaves less than ~16rem for the control (deeply
       // nested groups), the control wraps to its own full-width line instead of squeezing.
-      /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-start gap-x-3 gap-y-1.5 px-3 py-2", children: [
-        /* @__PURE__ */ jsx9("label", { htmlFor: id, className: "w-36 shrink-0 truncate pt-1.5 text-xs font-medium text-slate-500", title: key, children: key }),
-        /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1 basis-64", children: /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsxs12("div", { className: "mst-json__row", children: [
+        /* @__PURE__ */ jsx14("label", { htmlFor: id, className: "mst-json__key", title: key, children: key }),
+        /* @__PURE__ */ jsx14("div", { className: "mst-json__field", children: /* @__PURE__ */ jsx14(
           LeafEditor,
           {
             id,
@@ -1310,8 +2047,8 @@ function JsonInput({
   disabled
 }) {
   const t = useT();
-  const [mode, setMode] = useState7(() => isPlainObject(value) ? "form" : "raw");
-  const [modeTouched, setModeTouched] = useState7(false);
+  const [mode, setMode] = useState11(() => isPlainObject(value) ? "form" : "raw");
+  const [modeTouched, setModeTouched] = useState11(false);
   const structured = isPlainObject(value) || Array.isArray(value);
   useEffect5(() => {
     if (!modeTouched && structured) setMode("form");
@@ -1321,10 +2058,10 @@ function JsonInput({
     setMode(next);
   };
   const showForm = mode === "form" && structured;
-  const toggleClass = (active) => `rounded px-2 py-0.5 text-xs font-medium transition-colors ${active ? "bg-white text-slate-800 shadow-sm ring-1 ring-slate-300" : "text-slate-500 hover:text-slate-700"}`;
-  return /* @__PURE__ */ jsxs8("div", { className: "rounded-md border border-slate-300 shadow-sm", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-end gap-1 rounded-t-md border-b border-slate-200 bg-slate-50 px-2 py-1", children: [
-      /* @__PURE__ */ jsx9(
+  const toggleClass = (active) => `mst-json__tab${active ? " mst-json__tab--active" : ""}`;
+  return /* @__PURE__ */ jsxs12("div", { className: "mst-json", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "mst-json__head", children: [
+      /* @__PURE__ */ jsx14(
         "button",
         {
           type: "button",
@@ -1334,9 +2071,9 @@ function JsonInput({
           children: t.jsonFormMode
         }
       ),
-      /* @__PURE__ */ jsx9("button", { type: "button", className: toggleClass(!showForm), onClick: () => pick("raw"), children: t.jsonRawMode })
+      /* @__PURE__ */ jsx14("button", { type: "button", className: toggleClass(!showForm), onClick: () => pick("raw"), children: t.jsonRawMode })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "p-1", children: showForm ? Array.isArray(value) ? /* @__PURE__ */ jsx9(ArrayEditor, { idPrefix: `field-${field.name}`, value, onChange, disabled }) : /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx14("div", { className: "mst-json__body", children: showForm ? Array.isArray(value) ? /* @__PURE__ */ jsx14(ArrayEditor, { idPrefix: `field-${field.name}`, value, onChange, disabled }) : /* @__PURE__ */ jsx14(
       ObjectEditor,
       {
         idPrefix: `field-${field.name}`,
@@ -1344,7 +2081,7 @@ function JsonInput({
         onChange,
         disabled
       }
-    ) : /* @__PURE__ */ jsx9(
+    ) : /* @__PURE__ */ jsx14(
       RawJsonArea,
       {
         id: `field-${field.name}`,
@@ -1358,8 +2095,8 @@ function JsonInput({
 }
 
 // src/components/FieldInput.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var inputClass = "w-full rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-800 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:bg-slate-100";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var inputClass = "mst-input";
 function FieldInput({
   field,
   value,
@@ -1369,7 +2106,7 @@ function FieldInput({
   const id = `field-${field.name}`;
   switch (field.type) {
     case "boolean":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx15(
         "input",
         {
           id,
@@ -1377,7 +2114,7 @@ function FieldInput({
           checked: Boolean(value),
           disabled,
           onChange: (e) => onChange(e.target.checked),
-          className: "h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
+          className: "mst-checkbox"
         }
       );
     case "integer":
@@ -1385,7 +2122,7 @@ function FieldInput({
     case "float":
     case "decimal":
     case "currency":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx15(
         "input",
         {
           id,
@@ -1399,22 +2136,22 @@ function FieldInput({
         }
       );
     case "enum":
-      return /* @__PURE__ */ jsxs9(
+      return /* @__PURE__ */ jsxs13(
         "select",
         {
           id,
           value: value === null || value === void 0 ? "" : String(value),
           disabled,
           onChange: (e) => onChange(e.target.value),
-          className: inputClass,
+          className: "mst-select",
           children: [
-            /* @__PURE__ */ jsx10("option", { value: "", children: "\u2014" }),
-            field.enumOptions?.map((o) => /* @__PURE__ */ jsx10("option", { value: String(o.value), children: o.label }, String(o.value)))
+            /* @__PURE__ */ jsx15("option", { value: "", children: "\u2014" }),
+            field.enumOptions?.map((o) => /* @__PURE__ */ jsx15("option", { value: String(o.value), children: o.label }, String(o.value)))
           ]
         }
       );
     case "date":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx15(
         "input",
         {
           id,
@@ -1426,9 +2163,9 @@ function FieldInput({
         }
       );
     case "json":
-      return /* @__PURE__ */ jsx10(JsonInput, { field, value, onChange, disabled });
+      return /* @__PURE__ */ jsx15(JsonInput, { field, value, onChange, disabled });
     case "text":
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx15(
         "textarea",
         {
           id,
@@ -1437,11 +2174,11 @@ function FieldInput({
           placeholder: field.form.placeholder,
           disabled,
           onChange: (e) => onChange(e.target.value),
-          className: inputClass
+          className: "mst-textarea"
         }
       );
     default:
-      return /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx15(
         "input",
         {
           id,
@@ -1457,7 +2194,7 @@ function FieldInput({
 }
 
 // src/components/EntityForm.tsx
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function EntityForm({
   entity,
   mode,
@@ -1471,9 +2208,9 @@ function EntityForm({
   const fields = formFields(entity, mode);
   const sourceId = mode === "edit" ? id : cloneFromId;
   const existing = useEntityRecord(entity.id, sourceId);
-  const [values, setValues] = useState8({});
-  const [saving, setSaving] = useState8(false);
-  const [error, setError] = useState8(void 0);
+  const [values, setValues] = useState12({});
+  const [saving, setSaving] = useState12(false);
+  const [error, setError] = useState12(void 0);
   useEffect6(() => {
     if (!existing.data || !sourceId) return;
     if (mode === "edit") {
@@ -1506,25 +2243,25 @@ function EntityForm({
     }
   };
   if (sourceId && existing.loading && !existing.data) {
-    return /* @__PURE__ */ jsx11(Spinner, {});
+    return /* @__PURE__ */ jsx16(Spinner, {});
   }
   const title = mode === "edit" ? t.editTitle(entity.label.singular) : cloneFromId ? t.cloneTitle(entity.label.singular) : t.newTitle(entity.label.singular);
-  return /* @__PURE__ */ jsxs10("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs10("header", { children: [
-      /* @__PURE__ */ jsxs10("button", { onClick: onCancel, className: "text-sm text-indigo-600 hover:underline", children: [
-        "\u2190 ",
+  return /* @__PURE__ */ jsxs14("section", { className: "mst-page", children: [
+    /* @__PURE__ */ jsx16("div", { className: "mst-pagehead", children: /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsxs14("button", { type: "button", className: "mst-backlink", onClick: onCancel, children: [
+        /* @__PURE__ */ jsx16(Icon, { name: "arrowLeft", size: 12 }),
         entity.label.plural
       ] }),
-      /* @__PURE__ */ jsx11("h1", { className: "text-lg font-semibold text-slate-900", children: title })
-    ] }),
-    error && /* @__PURE__ */ jsx11(ErrorBanner, { error }),
-    /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: "space-y-4 rounded-lg border border-slate-200 bg-white p-5", children: [
-      fields.map((f) => /* @__PURE__ */ jsxs10("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs10("label", { htmlFor: `field-${f.name}`, className: "block text-sm font-medium text-slate-700", children: [
+      /* @__PURE__ */ jsx16("h1", { className: "mst-pagehead__title", children: title })
+    ] }) }),
+    error && /* @__PURE__ */ jsx16(ErrorBanner, { error }),
+    /* @__PURE__ */ jsxs14("form", { onSubmit: submit, className: "mst-card mst-form", children: [
+      fields.map((f) => /* @__PURE__ */ jsxs14("div", { className: "mst-field", children: [
+        /* @__PURE__ */ jsxs14("label", { htmlFor: `field-${f.name}`, className: "mst-label", children: [
           f.label,
-          f.required && /* @__PURE__ */ jsx11("span", { className: "ml-0.5 text-red-500", children: "*" })
+          f.required && /* @__PURE__ */ jsx16("span", { className: "mst-label__req", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx16(
           FieldInput,
           {
             field: f,
@@ -1533,11 +2270,11 @@ function EntityForm({
             onChange: (next) => setValues((v) => ({ ...v, [f.name]: next }))
           }
         ),
-        f.form.helpText && /* @__PURE__ */ jsx11("p", { className: "text-xs text-slate-500", children: f.form.helpText })
+        f.form.helpText && /* @__PURE__ */ jsx16("p", { className: "mst-help", children: f.form.helpText })
       ] }, f.name)),
-      /* @__PURE__ */ jsxs10("div", { className: "flex justify-end gap-2 border-t border-slate-100 pt-4", children: [
-        /* @__PURE__ */ jsx11(Button, { type: "button", variant: "secondary", onClick: onCancel, disabled: saving, children: t.cancel }),
-        /* @__PURE__ */ jsx11(Button, { type: "submit", variant: "primary", disabled: saving, children: saving ? t.saving : mode === "create" ? t.create : t.save })
+      /* @__PURE__ */ jsxs14("div", { className: "mst-form__foot", children: [
+        /* @__PURE__ */ jsx16(Button, { type: "button", variant: "secondary", onClick: onCancel, disabled: saving, children: t.cancel }),
+        /* @__PURE__ */ jsx16(Button, { type: "submit", variant: "primary", disabled: saving, children: saving ? t.saving : mode === "create" ? t.create : t.save })
       ] })
     ] })
   ] });
@@ -1566,10 +2303,10 @@ function applyLabels(metadata, labels) {
 }
 
 // src/recents.ts
-import { useCallback as useCallback2, useState as useState9 } from "react";
-var STORAGE_KEY = "maestro-admin:recents";
+import { useCallback as useCallback4, useState as useState13 } from "react";
+var STORAGE_KEY2 = "maestro-admin:recents";
 var MAX_RECENTS = 8;
-function read(key) {
+function read2(key) {
   try {
     const raw = globalThis.localStorage?.getItem(key);
     const parsed = raw ? JSON.parse(raw) : [];
@@ -1578,20 +2315,20 @@ function read(key) {
     return [];
   }
 }
-function write(key, ids) {
+function write2(key, ids) {
   try {
     globalThis.localStorage?.setItem(key, JSON.stringify(ids));
   } catch {
   }
 }
 function useRecents(scope) {
-  const key = scope ? `${STORAGE_KEY}:${scope}` : STORAGE_KEY;
-  const [recents, setRecents] = useState9(() => read(key));
-  const push = useCallback2(
+  const key = scope ? `${STORAGE_KEY2}:${scope}` : STORAGE_KEY2;
+  const [recents, setRecents] = useState13(() => read2(key));
+  const push = useCallback4(
     (entityId) => {
       setRecents((prev) => {
         const next = [entityId, ...prev.filter((id) => id !== entityId)].slice(0, MAX_RECENTS);
-        write(key, next);
+        write2(key, next);
         return next;
       });
     },
@@ -1601,30 +2338,81 @@ function useRecents(scope) {
 }
 
 // src/components/MaestroAdmin.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function AdminShell({ title, labels }) {
   const { data, error, loading } = useMetadata();
   const t = useT();
-  const [view, setView] = useState10(void 0);
+  const [view, setView] = useState14({ kind: "hub" });
+  const [paletteOpen, setPaletteOpen] = useState14(false);
   const { recents, push: pushRecent } = useRecents();
-  const metadata = useMemo3(() => data ? applyLabels(data, labels) : void 0, [data, labels]);
-  const entities = metadata?.entities ?? [];
-  const activeId = view?.entityId ?? entities[0]?.id;
+  const metadata = useMemo7(() => data ? applyLabels(data, labels) : void 0, [data, labels]);
+  const entities = useMemo7(() => metadata?.entities ?? [], [metadata]);
+  const activeId = view.kind === "hub" ? void 0 : view.entityId;
   const activeEntity = entities.find((e) => e.id === activeId);
-  const effectiveView = view ?? (activeId ? { kind: "list", entityId: activeId } : void 0);
-  const openEntity = (entityId) => {
-    pushRecent(entityId);
-    setView({ kind: "list", entityId });
-  };
-  const navigateToRecord = (entityId, id) => {
-    pushRecent(entityId);
-    setView({ kind: "detail", entityId, id });
-  };
+  const groupOf = useMemo7(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const group of buildMenu(entities, labels).groups) {
+      for (const entity of group.entities) map.set(entity.id, group.label);
+    }
+    return map;
+  }, [entities, labels]);
+  const openEntity = useCallback5(
+    (entityId) => {
+      pushRecent(entityId);
+      setView({ kind: "list", entityId });
+    },
+    [pushRecent]
+  );
+  const navigateToRecord = useCallback5(
+    (entityId, id) => {
+      pushRecent(entityId);
+      setView({ kind: "detail", entityId, id });
+    },
+    [pushRecent]
+  );
+  useEffect7(() => {
+    const onKey = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        setPaletteOpen((open) => !open);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, []);
+  const crumbs = useMemo7(() => {
+    const home = { label: t.hub, icon: "hub", onClick: view.kind === "hub" ? void 0 : () => setView({ kind: "hub" }) };
+    if (view.kind === "hub" || !activeEntity) return [home];
+    const entityCrumb = {
+      label: activeEntity.label.plural,
+      icon: entityIcon(activeEntity),
+      onClick: view.kind === "list" ? void 0 : () => setView({ kind: "list", entityId: activeEntity.id })
+    };
+    if (view.kind === "list") return [home, entityCrumb];
+    const leaf = view.kind === "detail" ? { label: view.id } : view.kind === "edit" ? { label: t.editTitle(activeEntity.label.singular) } : { label: view.cloneFromId ? t.cloneTitle(activeEntity.label.singular) : t.newTitle(activeEntity.label.singular) };
+    return [home, entityCrumb, leaf];
+  }, [view, activeEntity, t]);
+  const paletteSections = useMemo7(() => {
+    const goTo = entityCommands(entities, groupOf, openEntity);
+    goTo.unshift({ id: "hub", label: t.hub, icon: "hub", run: () => setView({ kind: "hub" }) });
+    const screen = [];
+    if (activeEntity?.capabilities.create) {
+      screen.push({
+        id: "create",
+        label: t.newTitle(activeEntity.label.singular),
+        icon: "plus",
+        run: () => setView({ kind: "create", entityId: activeEntity.id })
+      });
+    }
+    const sections = [{ id: "goto", label: t.goTo, commands: goTo }];
+    if (screen.length > 0) sections.unshift({ id: "screen", label: t.onThisScreen, commands: screen });
+    return sections;
+  }, [entities, groupOf, openEntity, activeEntity, t]);
   if (loading && !data) {
-    return /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx12(Spinner, { label: t.loadingMetadata }) });
+    return /* @__PURE__ */ jsx17("div", { className: "mst-boot", children: /* @__PURE__ */ jsx17(Spinner, { label: t.loadingMetadata }) });
   }
-  return /* @__PURE__ */ jsx12(AdminEntitiesProvider, { value: entities, children: /* @__PURE__ */ jsxs11("div", { className: "flex h-screen overflow-hidden bg-white text-slate-800", children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs15(AdminEntitiesProvider, { value: entities, children: [
+    /* @__PURE__ */ jsx17(
       Sidebar,
       {
         entities,
@@ -1632,83 +2420,111 @@ function AdminShell({ title, labels }) {
         title,
         labels,
         recents,
-        onSelect: openEntity
+        onSelect: openEntity,
+        onHome: () => setView({ kind: "hub" }),
+        homeActive: view.kind === "hub"
       }
     ),
-    /* @__PURE__ */ jsxs11("main", { className: "flex-1 overflow-y-auto p-6", children: [
-      error && /* @__PURE__ */ jsx12(ErrorBanner, { error }),
-      activeEntity && effectiveView && effectiveView.kind === "list" && /* @__PURE__ */ jsx12(
-        EntityList,
-        {
-          entity: activeEntity,
-          onOpen: (id) => setView({ kind: "detail", entityId: activeEntity.id, id }),
-          onCreate: () => setView({ kind: "create", entityId: activeEntity.id }),
-          onEdit: (id) => setView({ kind: "edit", entityId: activeEntity.id, id }),
-          onClone: (id) => setView({ kind: "create", entityId: activeEntity.id, cloneFromId: id }),
-          onNavigate: navigateToRecord
-        }
-      ),
-      activeEntity && effectiveView?.kind === "detail" && /* @__PURE__ */ jsx12(
-        EntityDetail,
-        {
-          entity: activeEntity,
-          id: effectiveView.id,
-          onBack: () => setView({ kind: "list", entityId: activeEntity.id }),
-          onEdit: () => setView({ kind: "edit", entityId: activeEntity.id, id: effectiveView.id }),
-          onClone: () => setView({ kind: "create", entityId: activeEntity.id, cloneFromId: effectiveView.id }),
-          onDeleted: () => setView({ kind: "list", entityId: activeEntity.id }),
-          onNavigate: navigateToRecord
-        }
-      ),
-      activeEntity && (effectiveView?.kind === "create" || effectiveView?.kind === "edit") && /* @__PURE__ */ jsx12(
-        EntityForm,
-        {
-          entity: activeEntity,
-          mode: effectiveView.kind,
-          id: effectiveView.kind === "edit" ? effectiveView.id : void 0,
-          cloneFromId: effectiveView.kind === "create" ? effectiveView.cloneFromId : void 0,
-          onCancel: () => setView({ kind: "list", entityId: activeEntity.id }),
-          onSaved: () => setView({ kind: "list", entityId: activeEntity.id })
-        }
-      )
-    ] })
-  ] }) });
+    /* @__PURE__ */ jsxs15("div", { className: "mst-main", children: [
+      /* @__PURE__ */ jsx17(Header, { crumbs, onOpenPalette: () => setPaletteOpen(true) }),
+      /* @__PURE__ */ jsxs15("div", { className: "mst-content", children: [
+        error && /* @__PURE__ */ jsx17(ErrorBanner, { error }),
+        view.kind === "hub" && /* @__PURE__ */ jsx17(Hub, { entities, labels, onOpen: openEntity }),
+        activeEntity && view.kind === "list" && /* @__PURE__ */ jsx17(
+          EntityList,
+          {
+            entity: activeEntity,
+            onOpen: (id) => setView({ kind: "detail", entityId: activeEntity.id, id }),
+            onCreate: () => setView({ kind: "create", entityId: activeEntity.id }),
+            onEdit: (id) => setView({ kind: "edit", entityId: activeEntity.id, id }),
+            onClone: (id) => setView({ kind: "create", entityId: activeEntity.id, cloneFromId: id }),
+            onNavigate: navigateToRecord
+          }
+        ),
+        activeEntity && view.kind === "detail" && /* @__PURE__ */ jsx17(
+          EntityDetail,
+          {
+            entity: activeEntity,
+            id: view.id,
+            onBack: () => setView({ kind: "list", entityId: activeEntity.id }),
+            onEdit: () => setView({ kind: "edit", entityId: activeEntity.id, id: view.id }),
+            onClone: () => setView({ kind: "create", entityId: activeEntity.id, cloneFromId: view.id }),
+            onDeleted: () => setView({ kind: "list", entityId: activeEntity.id }),
+            onNavigate: navigateToRecord
+          }
+        ),
+        activeEntity && (view.kind === "create" || view.kind === "edit") && /* @__PURE__ */ jsx17(
+          EntityForm,
+          {
+            entity: activeEntity,
+            mode: view.kind,
+            id: view.kind === "edit" ? view.id : void 0,
+            cloneFromId: view.kind === "create" ? view.cloneFromId : void 0,
+            onCancel: () => setView({ kind: "list", entityId: activeEntity.id }),
+            onSaved: () => setView({ kind: "list", entityId: activeEntity.id })
+          }
+        )
+      ] })
+    ] }),
+    paletteOpen && /* @__PURE__ */ jsx17(CommandPalette, { sections: paletteSections, onClose: () => setPaletteOpen(false) })
+  ] });
 }
 function MaestroAdmin(props) {
-  const client = useMemo3(
+  const client = useMemo7(
     () => props.client ?? new MaestroClient({ apiUrl: props.apiUrl ?? "", headers: props.headers }),
     [props.client, props.apiUrl, props.headers]
   );
-  const strings = useMemo3(() => stringsFor(props.locale ?? "en"), [props.locale]);
-  return /* @__PURE__ */ jsx12(AdminClientProvider, { value: client, children: /* @__PURE__ */ jsx12(I18nProvider, { value: strings, children: /* @__PURE__ */ jsx12(AdminShell, { title: props.title ?? "Maestro Admin", labels: props.labels }) }) });
+  const strings = useMemo7(() => stringsFor(props.locale ?? "en"), [props.locale]);
+  const [root, setRoot] = useState14(null);
+  return /* @__PURE__ */ jsx17(AdminClientProvider, { value: client, children: /* @__PURE__ */ jsx17(I18nProvider, { value: strings, children: /* @__PURE__ */ jsx17(MaestroThemeProvider, { theme: props.theme, className: "mst-root", rootRef: setRoot, children: /* @__PURE__ */ jsx17(AdminRootProvider, { value: root, children: /* @__PURE__ */ jsx17(AdminShell, { title: props.title ?? "Maestro Admin", labels: props.labels }) }) }) }) });
 }
 export {
   AdminClientProvider,
+  Badge,
+  Button,
+  CommandPalette,
+  EmptyState,
   EntityDetail,
   EntityForm,
   EntityList,
+  ErrorBanner,
   FieldInput,
   FieldValue,
+  Header,
+  Hub,
   I18nProvider,
+  Icon,
+  IconButton,
   JsonInput,
+  MAESTRO_THEMES,
   MaestroAdmin,
   MaestroApiError,
   MaestroClient,
+  MaestroThemeProvider,
   ObjectValue,
   Sidebar,
+  Spinner,
+  Toast,
   applyLabels,
   buildMenu,
   detailFields,
+  entityCommands,
+  entityIcon,
   formFields,
   listFields,
   primaryListFields,
   stringsFor,
+  useAdminRoot,
   useAsync,
   useClient,
+  useColumnPrefs,
+  useEntities,
+  useEntity,
   useEntityList,
   useEntityRecord,
   useMetadata,
   useRecents,
-  useT
+  useT,
+  useTheme
 };
 //# sourceMappingURL=index.js.map