@wandelbots/mui 0.0.0 → 1.0.1

package/README.md

@@ -1,3 +1,133 @@
 # @wandelbots/mui
 
-Placeholder release to register the package name. Real releases start at 1.0.0, published automatically by semantic-release from https://github.com/wandelbotsgmbh/nova-design-system.
+The **MUI layer** of the Wandelbots Nova design system: a thin, **visual-only** React
+component library holding the Wandelbots company-CI **theme** and **small presentational
+components** (inputs, selects, buttons, layout primitives, input parsers/validators). Visual
+building blocks are defined **once** here and reused consistently across apps.
+
+**This is the only package that ships a MUI theme.** `@wandelbots/design-tokens` stays
+framework-agnostic (values only); the theme composes those values into MUI shape here.
+
+**Non-goals:** no domain logic, no data fetching, no API/WebSocket code, no robot/motion
+knowledge. Those live in `wandelbots-js-react-components` (separate repo).
+
+- **Peers:** React 19, MUI 7, emotion 11. Depends on `@wandelbots/design-tokens` (`workspace:*`).
+- **Dark mode only**
+- Built with **Vite library mode** (ESM + CJS), TypeScript strict, Biome, Vitest + Storybook.
+
+See [`AGENTS.md`](./AGENTS.md) for the working conventions, and the monorepo root
+[`README.md`](../../README.md#roadmap) for the design-system roadmap.
+
+## Theme
+
+**One function.** `createNovaMuiTheme(...overrides)` is the entire theme API — Nova palette,
+`paletteExt`, elevation ramp, typography and component overrides in a single `Theme`. Dark by
+default, since dark is the only mode in v1.
+
+```tsx
+import { ThemeProvider } from "@mui/material/styles"
+import { createNovaMuiTheme } from "@wandelbots/mui"
+
+// Build it once, at module scope — a new Theme object on every render would
+// defeat emotion's style caching.
+const theme = createNovaMuiTheme()
+
+function App() {
+  return <ThemeProvider theme={theme}>...</ThemeProvider>
+}
+```
+
+Nothing else is exported, deliberately: no pre-built theme constant (so importing the package
+never eagerly builds a theme you didn't ask for), and no `darkBaseOptions()` /
+`commonComponents()` building blocks (so the internal layering stays free to change). Customise
+by passing `ThemeOptions`, or compose with MUI's own `createTheme` — and light mode will land
+*inside* this factory rather than as a second export.
+
+Importing the package also activates the type augmentation, so `theme.palette.tertiary.main`,
+`theme.paletteExt.primary.hover`, and `theme.palette.backgroundPaperElevation[8]` are all typed.
+Package-specific theme extensions (jogging-panel colors, DataGrid styling slots) belong in the
+consuming package — add your own `declare module "@mui/material/styles"` there.
+
+### Overriding and extending
+
+The factory is variadic and uses MUI's canonical `createTheme(base, ...overrides)` for
+deep-merging. Pass any number of `ThemeOptions`; each layer merges on top of the previous one,
+and the last one wins.
+
+```tsx
+const theme = createNovaMuiTheme({
+  palette: { primary: { main: "#ff00ff" } },
+  components: {
+    MuiDialog: { styleOverrides: { paper: { borderRadius: 16 } } },
+  },
+})
+// theme.palette.primary.main    → "#ff00ff"
+// theme.paletteExt.primary.hover → preserved from base
+// theme.components.MuiButton.*   → preserved (deep-merge, not replace)
+```
+
+```tsx
+// Multi-layer: app-wide plus feature-specific
+const theme = createNovaMuiTheme(appOverrides, joggingPanelOverrides)
+
+// Or layer on afterwards with MUI's own createTheme
+import { createTheme } from "@mui/material/styles"
+
+const theme = createTheme(createNovaMuiTheme(), myOverrides)
+```
+
+> **How propagation works.** Nova's palette-dependent component overrides are MUI function-form
+> callbacks — they aren't *called* when the theme is built, only stored as function references.
+> MUI invokes them at component render time with the *final merged* theme from
+> `<ThemeProvider>`, so the order in which you build the theme doesn't matter: an override like
+> `createNovaMuiTheme({ palette: { text: { secondary: "#abcdef" } } })` still reaches `MuiTab`'s
+> `color`. The one exception is `MuiCssBaseline.styleOverrides`, deliberately a static object so
+> consumer global selectors deep-merge instead of replacing Nova's scrollbar rules.
+
+### Light mode
+
+Not supported yet — `createNovaMuiTheme({ palette: { mode: "light" } })` throws. When the upstream
+Figma sync ships light tokens, light mode will be added *inside* `createNovaMuiTheme` (via MUI 7's
+`colorSchemes`), so existing call sites won't change and no new export appears.
+
+### Migrating from `@wandelbots/design-tokens/mui`
+
+The theme moved out of the token package. The function keeps its name, so for most apps it's a
+one-line import change:
+
+```diff
+- import { createNovaMuiTheme } from "@wandelbots/design-tokens/mui"
++ import { createNovaMuiTheme } from "@wandelbots/mui"
+```
+
+**It is also a visual change**, though. `createNovaMuiTheme` now includes the NovaDeck-derived
+styling the old token-package version lacked — `background.default: #161825`, `body2` at 14/400,
+and `MuiAutocomplete` / `MuiSelect` root / `MuiTooltip` overrides. If your app was adding those
+locally to compensate, drop them.
+
+Two other things changed:
+
+- **`createVisualTheme` is gone** — it was the layer that added exactly that styling. Everything
+  it did is now in `createNovaMuiTheme`, so replace the call one-for-one.
+- **`darkTheme`, `darkBaseOptions()` and `commonComponents()` are gone.** Replace a `darkTheme`
+  import with a module-scope `const theme = createNovaMuiTheme()`. Anything built on the building
+  blocks should use `createNovaMuiTheme(...overrides)`, or `createTheme(createNovaMuiTheme(), ...)`
+  to layer on afterwards.
+
+Keep `@wandelbots/design-tokens` installed for raw token values and CSS variables — it just no
+longer carries a `/mui` entry.
+
+## Scripts
+
+Run from the monorepo root with `pnpm --filter @wandelbots/mui <script>`.
+
+| Script | Purpose |
+|---|---|
+| `pnpm build` | Vite library build + `.d.ts` emit → `dist/` |
+| `pnpm dev` | Storybook dev server on :6006 |
+| `pnpm typecheck` | `tsc --noEmit` over shippable source |
+| `pnpm test` / `pnpm test:unit` | Vitest unit tests |
+| `pnpm verify` | build + unit + Storybook interaction/smoke tests → `VERIFY: PASS` |
+| `pnpm screenshot <storyId>` | Playwright screenshot of a story → `.screenshots/` |
+
+Lint/format are repo-wide from the root: `pnpm lint`, `pnpm format` (Biome).

package/dist/components/AdornedSelect/AdornedSelect.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),y=require("@mui/material/FormControl"),m=require("@mui/material/InputLabel"),h=require("@mui/material/Select"),s=require("@mui/material/styles"),b=s.styled(h,{shouldForwardProp:e=>e!=="adornedSize"})(({theme:e,adornedSize:n="medium"})=>({"&.MuiInputBase-root":{background:e.palette.secondary.dark,borderRadius:`${e.shape.borderRadius}px`,".MuiSelect-select":{padding:n==="small"?"8px 16px":"16px 14px"},"&:hover .MuiOutlinedInput-notchedOutline":{border:`1px solid ${e.palette.action.hover}`},"&.Mui-focused .MuiOutlinedInput-notchedOutline":{border:`1px solid ${e.palette.primary.main}`},".MuiOutlinedInput-notchedOutline":{borderRadius:`${e.shape.borderRadius}px`,border:"1px solid transparent",legend:{width:0}}}})),S=s.styled(m)({transform:"translate(14px, 8px) scale(0.75)"}),g=({placeholder:e,disabled:n,value:t,label:r,labelId:p,adornedSize:o="medium",renderValue:l,...i})=>{const c=(t==null||t===""||Array.isArray(t)&&t.length===0)&&e,u=p??(r?`${String(r).replace(/\s+/g,"-")}-label`:void 0),x=s.useTheme();return d.jsxs(y,{fullWidth:!0,disabled:n,children:[r&&d.jsx(S,{id:u,shrink:!0,children:r}),d.jsx(b,{...i,adornedSize:o,disabled:n,labelId:u,value:t,displayEmpty:!0,sx:[r?{".MuiSelect-select":{paddingTop:o==="small"?"8px !important":"24px !important",paddingBottom:"8px !important"}}:{},...Array.isArray(i.sx)?i.sx:[i.sx]],renderValue:a=>c?d.jsx("span",{style:{color:x.palette.text.disabled,opacity:1,display:"block"},children:e}):l?l(a):a})]})};exports.AdornedSelect=g;

package/dist/components/AdornedSelect/AdornedSelect.d.ts

@@ -0,0 +1,19 @@
+import type { SelectProps } from "@mui/material/Select";
+export type AdornedSelectSize = "small" | "medium";
+export type AdornedSelectProps = Omit<SelectProps, "theme"> & {
+    /** Shown (in `text.disabled`) while no value is selected. */
+    placeholder?: string;
+    adornedSize?: AdornedSelectSize;
+    /** Convenience: renders an always-shrunk `InputLabel` above the value. */
+    label?: string;
+    /** Explicit label id (RobotPad-compat); defaults to one derived from `label`. */
+    labelId?: string;
+};
+/**
+ * Select in the Wandelbots visual style: filled-looking background
+ * (`secondary.dark`), 10px radius, transparent border with hover/focus
+ * accents, always-shrunk label, placeholder support. Accepts all MUI
+ * `SelectProps`.
+ */
+export declare const AdornedSelect: ({ placeholder, disabled, value, label, labelId: labelIdProp, adornedSize, renderValue: customRenderValue, ...props }: AdornedSelectProps) => import("react").JSX.Element;
+//# sourceMappingURL=AdornedSelect.d.ts.map

package/dist/components/AdornedSelect/AdornedSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdornedSelect.d.ts","sourceRoot":"","sources":["../../../src/components/AdornedSelect/AdornedSelect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAKvD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,CAAA;AA2DlD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG;IAC5D,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GAAI,sHAS3B,kBAAkB,gCAkEpB,CAAA"}

package/dist/components/AdornedSelect/AdornedSelect.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsxs as x, jsx as d } from "react/jsx-runtime";
+import y from "@mui/material/FormControl";
+import h from "@mui/material/InputLabel";
+import b from "@mui/material/Select";
+import { styled as a, useTheme as f } from "@mui/material/styles";
+const g = a(b, {
+  shouldForwardProp: (t) => t !== "adornedSize"
+})(
+  ({ theme: t, adornedSize: o = "medium" }) => ({
+    "&.MuiInputBase-root": {
+      background: t.palette.secondary.dark,
+      borderRadius: `${t.shape.borderRadius}px`,
+      // Default padding (no label); with a label the sx block below overrides
+      ".MuiSelect-select": {
+        padding: o === "small" ? "8px 16px" : "16px 14px"
+      },
+      "&:hover .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${t.palette.action.hover}`
+      },
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+        border: `1px solid ${t.palette.primary.main}`
+      },
+      ".MuiOutlinedInput-notchedOutline": {
+        borderRadius: `${t.shape.borderRadius}px`,
+        border: "1px solid transparent",
+        legend: {
+          width: 0
+        }
+      }
+    }
+  })
+), I = a(h)({
+  transform: "translate(14px, 8px) scale(0.75)"
+}), w = ({
+  placeholder: t,
+  disabled: o,
+  value: r,
+  label: e,
+  labelId: u,
+  adornedSize: n = "medium",
+  renderValue: p,
+  ...i
+}) => {
+  const c = (r == null || r === "" || Array.isArray(r) && r.length === 0) && t, s = u ?? (e ? `${String(e).replace(/\s+/g, "-")}-label` : void 0), m = f();
+  return /* @__PURE__ */ x(y, { fullWidth: !0, disabled: o, children: [
+    e && /* @__PURE__ */ d(I, { id: s, shrink: !0, children: e }),
+    /* @__PURE__ */ d(
+      g,
+      {
+        ...i,
+        adornedSize: n,
+        disabled: o,
+        labelId: s,
+        value: r,
+        displayEmpty: !0,
+        sx: [
+          // With a label, make room for it (needs !important to beat the
+          // styled() base padding, which carries higher specificity)
+          e ? {
+            ".MuiSelect-select": {
+              paddingTop: n === "small" ? "8px !important" : "24px !important",
+              paddingBottom: "8px !important"
+            }
+          } : {},
+          ...Array.isArray(i.sx) ? i.sx : [i.sx]
+        ],
+        renderValue: (l) => c ? /* @__PURE__ */ d(
+          "span",
+          {
+            style: {
+              color: m.palette.text.disabled,
+              opacity: 1,
+              display: "block"
+            },
+            children: t
+          }
+        ) : p ? p(l) : l
+      }
+    )
+  ] });
+};
+export {
+  w as AdornedSelect
+};

package/dist/components/AdornedSelect/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AdornedSelect";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AdornedSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AdornedSelect/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/components/AdornedTextField/AdornedAutocomplete.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),b=require("@mui/material/Autocomplete"),j=require("./AdornedTextField.cjs"),o=({label:t,placeholder:u,adornedSize:i="medium",error:r,helperText:c,slotProps:e,freeSolo:m,...A})=>d.jsx(b,{freeSolo:m??!0,...A,renderInput:({InputProps:n,InputLabelProps:x,...a})=>d.jsx(j.AdornedTextField,{...a,label:t,placeholder:u,adornedSize:i,error:r,helperText:c,slotProps:{...e,input:{...n,...e==null?void 0:e.input,endAdornment:n.endAdornment},inputLabel:{...x,...e==null?void 0:e.inputLabel}}})});exports.AdornedAutocomplete=o;

package/dist/components/AdornedTextField/AdornedAutocomplete.d.ts

@@ -0,0 +1,21 @@
+import type { AutocompleteProps } from "@mui/material/Autocomplete";
+import type { ReactNode } from "react";
+import type { AdornedTextFieldProps, AdornedTextFieldSize } from "./AdornedTextField";
+export type AdornedAutocompleteProps<T = string, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = true> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "slotProps"> & {
+    label?: string;
+    placeholder?: string;
+    adornedSize?: AdornedTextFieldSize;
+    error?: boolean;
+    helperText?: ReactNode;
+    /** Forwarded to the underlying `AdornedTextField` (not the Autocomplete popper/listbox). */
+    slotProps?: AdornedTextFieldProps["slotProps"];
+};
+/**
+ * `Autocomplete` styled like `AdornedTextField` (outlined look,
+ * `secondary.dark` background, 10px radius). Accepts all MUI
+ * `AutocompleteProps` (minus `renderInput`) — `T`, `multiple`,
+ * `disableClearable` and `freeSolo` are all open; `freeSolo` defaults to
+ * `true` to match this component's original free-text behavior.
+ */
+export declare const AdornedAutocomplete: <T = string, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = true>({ label, placeholder, adornedSize, error, helperText, slotProps, freeSolo, ...props }: AdornedAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => import("react").JSX.Element;
+//# sourceMappingURL=AdornedAutocomplete.d.ts.map

package/dist/components/AdornedTextField/AdornedAutocomplete.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdornedAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/AdornedTextField/AdornedAutocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,oBAAoB,CAAA;AAQ3B,MAAM,MAAM,wBAAwB,CAClC,CAAC,GAAG,MAAM,EACV,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAC5C,gBAAgB,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EACpD,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,IAAI,IACzC,IAAI,CACN,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAC1D,aAAa,GAAG,WAAW,CAC5B,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAA;CAC/C,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAC9B,CAAC,GAAG,MAAM,EACV,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAC5C,gBAAgB,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EACpD,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,IAAI,EAC3C,uFASC,wBAAwB,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,gCA8BnE,CAAA"}

package/dist/components/AdornedTextField/AdornedAutocomplete.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import a from "@mui/material/Autocomplete";
+import { AdornedTextField as b } from "./AdornedTextField.js";
+const S = ({
+  label: d,
+  placeholder: i,
+  adornedSize: t = "medium",
+  error: u,
+  helperText: r,
+  slotProps: e,
+  freeSolo: A,
+  ...f
+}) => /* @__PURE__ */ m(
+  a,
+  {
+    freeSolo: A ?? !0,
+    ...f,
+    renderInput: ({ InputProps: n, InputLabelProps: c, ...x }) => /* @__PURE__ */ m(
+      b,
+      {
+        ...x,
+        label: d,
+        placeholder: i,
+        adornedSize: t,
+        error: u,
+        helperText: r,
+        slotProps: {
+          ...e,
+          input: {
+            ...n,
+            ...e == null ? void 0 : e.input,
+            // Autocomplete's own popup/clear buttons live here — never let a
+            // caller-supplied slotProps.input silently replace them (MUI's
+            // TextField lets the new-style slotProps.input fully override the
+            // legacy InputProps it's built from when both are present).
+            endAdornment: n.endAdornment
+          },
+          inputLabel: { ...c, ...e == null ? void 0 : e.inputLabel }
+        }
+      }
+    )
+  }
+);
+export {
+  S as AdornedAutocomplete
+};

package/dist/components/AdornedTextField/AdornedTextField.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),x=require("@mui/material/styles"),g=require("@mui/material/TextField"),m={small:{gutter:"12px",fontSize:"14px",lineHeight:"20px",padding:"11px 12px",paddingWithLabel:"18px 12px 4px",labelOffsetY:"3px",endAdornmentOffset:"7px"},medium:{gutter:"16px",fontSize:"14px",lineHeight:"20px",padding:"16px 16px",paddingWithLabel:"24px 16px 8px",labelOffsetY:"9px",endAdornmentOffset:"8px"}},f=x.styled(g,{shouldForwardProp:t=>t!=="adornedSize"})(({theme:t,adornedSize:n="medium"})=>{const{gutter:e,fontSize:o,lineHeight:a,padding:p,paddingWithLabel:u,labelOffsetY:i,endAdornmentOffset:s}=m[n],r="var(--wb-start-adornment-width, 20px)",d="8px";return{"&.MuiTextField-root":{".MuiInputBase-root":{background:t.palette.secondary.dark,borderRadius:`${t.shape.borderRadius}px`},".MuiInputBase-input":{"&::placeholder":{opacity:"1",color:t.palette.text.disabled}},".MuiInputAdornment-root .MuiTypography-root":{fontSize:o},".MuiInputBase-root .MuiInputBase-input":{padding:p,fontSize:o,lineHeight:a},".MuiFormLabel-root + .MuiInputBase-root .MuiInputBase-input":{padding:u},".MuiFormLabel-root + .MuiInputBase-root .MuiInputAdornment-positionEnd":{marginTop:s},".MuiInputBase-root.MuiAutocomplete-inputRoot":{paddingTop:0,paddingBottom:0,paddingLeft:0,".MuiInputBase-input":{transform:"none"}},".MuiInputBase-root.MuiInputBase-adornedStart":{paddingLeft:e,".MuiInputAdornment-positionStart":{width:r,marginTop:0,marginRight:d,justifyContent:"center"},".MuiInputBase-input":{paddingLeft:0}},".MuiFormLabel-root":{transform:`translate(${e}, ${i}) scale(0.75)`},"&:has(.MuiInputBase-adornedStart) .MuiFormLabel-root":{transform:`translate(calc(${e} + ${r} + ${d}), ${i}) scale(0.75)`},":hover":{fieldset:{border:`1px solid ${t.palette.action.hover}`}},".Mui-focused":{fieldset:{border:`1px solid ${t.palette.primary.main}`,legend:{width:0}}},fieldset:{borderRadius:`${t.shape.borderRadius}px`,border:"1px solid transparent",legend:{width:0}}}}}),M=({adornedSize:t="medium",...n})=>{var e;return l.jsx(f,{adornedSize:t,...n,slotProps:{...n.slotProps,inputLabel:{...(e=n.slotProps)==null?void 0:e.inputLabel,shrink:!0}}})};exports.AdornedTextField=M;

package/dist/components/AdornedTextField/AdornedTextField.d.ts

@@ -0,0 +1,12 @@
+import type { TextFieldProps } from "@mui/material/TextField";
+export type AdornedTextFieldSize = "small" | "medium";
+export type AdornedTextFieldProps = TextFieldProps & {
+    adornedSize?: AdornedTextFieldSize;
+};
+/**
+ * TextField in the Wandelbots visual style: filled-looking background
+ * (`secondary.dark`), 10px radius, transparent border with hover/focus
+ * accents, always-shrunk label. Accepts all MUI `TextFieldProps`.
+ */
+export declare const AdornedTextField: ({ adornedSize, ...props }: AdornedTextFieldProps) => import("react").JSX.Element;
+//# sourceMappingURL=AdornedTextField.d.ts.map

package/dist/components/AdornedTextField/AdornedTextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdornedTextField.d.ts","sourceRoot":"","sources":["../../../src/components/AdornedTextField/AdornedTextField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAG7D,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,CAAA;AA+JrD,MAAM,MAAM,qBAAqB,GAAG,cAAc,GAAG;IACnD,WAAW,CAAC,EAAE,oBAAoB,CAAA;CACnC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,2BAG9B,qBAAqB,gCAcvB,CAAA"}

package/dist/components/AdornedTextField/AdornedTextField.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { styled as x } from "@mui/material/styles";
+import m from "@mui/material/TextField";
+const f = {
+  small: {
+    gutter: "12px",
+    fontSize: "14px",
+    lineHeight: "20px",
+    padding: "11px 12px",
+    paddingWithLabel: "18px 12px 4px",
+    labelOffsetY: "3px",
+    endAdornmentOffset: "7px"
+  },
+  medium: {
+    gutter: "16px",
+    fontSize: "14px",
+    lineHeight: "20px",
+    padding: "16px 16px",
+    paddingWithLabel: "24px 16px 8px",
+    labelOffsetY: "9px",
+    endAdornmentOffset: "8px"
+  }
+}, g = x(m, {
+  shouldForwardProp: (t) => t !== "adornedSize"
+})(({ theme: t, adornedSize: o = "medium" }) => {
+  const {
+    gutter: e,
+    fontSize: n,
+    lineHeight: d,
+    padding: p,
+    paddingWithLabel: u,
+    labelOffsetY: i,
+    endAdornmentOffset: s
+  } = f[o], r = "var(--wb-start-adornment-width, 20px)", a = "8px";
+  return {
+    "&.MuiTextField-root": {
+      ".MuiInputBase-root": {
+        background: t.palette.secondary.dark,
+        borderRadius: `${t.shape.borderRadius}px`
+      },
+      ".MuiInputBase-input": {
+        "&::placeholder": {
+          opacity: "1",
+          color: t.palette.text.disabled
+        }
+      },
+      // A text adornment (e.g. a unit like "mm/s") shares the value's row, so it
+      // shares its type scale — MUI would otherwise render it at body1.
+      ".MuiInputAdornment-root .MuiTypography-root": {
+        fontSize: n
+      },
+      // Input without label (default case). The type scale lives here rather
+      // than on `.MuiInputBase-input` so it outranks MUI's own `font: inherit`.
+      ".MuiInputBase-root .MuiInputBase-input": {
+        padding: p,
+        fontSize: n,
+        lineHeight: d
+      },
+      // Input with label - using a more specific selector to override
+      ".MuiFormLabel-root + .MuiInputBase-root .MuiInputBase-input": {
+        padding: u
+      },
+      // The label-present padding above is asymmetric (extra top padding
+      // reserves room for the label), which pushes the input text down — an end
+      // adornment centered on the whole field would sit visibly above it. Nudge
+      // it down by half that asymmetry so it lines up with the text.
+      ".MuiFormLabel-root + .MuiInputBase-root .MuiInputAdornment-positionEnd": {
+        marginTop: s
+      },
+      // MUI's Autocomplete pads its own input row by 9px, which would stack with
+      // the input padding above and push the field past the spec height and
+      // gutter. The right pad is left alone — that is where MUI reserves room
+      // for the clear/popup buttons.
+      ".MuiInputBase-root.MuiAutocomplete-inputRoot": {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        // The theme's MuiAutocomplete override (ported from NovaDeck) nudges the
+        // value down 6px to sit inside *its* geometry. This component owns its
+        // own vertical rhythm, so drop the nudge — otherwise the value lands 6px
+        // below the spec and, at small, touches the bottom edge.
+        ".MuiInputBase-input": {
+          transform: "none"
+        }
+      },
+      // A start adornment is its own full-height column: icon centered on the
+      // whole field with the label/value stack to the right of it. The label is
+      // an absolutely-positioned sibling of the input, so CSS can't measure the
+      // adornment in order to clear it — instead the adornment is pinned to a
+      // fixed-width slot and both the label and the input start after that same
+      // slot. Override --wb-start-adornment-width for wider adornments.
+      ".MuiInputBase-root.MuiInputBase-adornedStart": {
+        paddingLeft: e,
+        ".MuiInputAdornment-positionStart": {
+          width: r,
+          marginTop: 0,
+          marginRight: a,
+          justifyContent: "center"
+        },
+        ".MuiInputBase-input": {
+          paddingLeft: 0
+        }
+      },
+      // Selected by class rather than element so these outrank the theme's
+      // MuiAutocomplete override, which hardcodes its own label transform for
+      // the focused and has-clear-icon states.
+      ".MuiFormLabel-root": {
+        transform: `translate(${e}, ${i}) scale(0.75)`
+      },
+      "&:has(.MuiInputBase-adornedStart) .MuiFormLabel-root": {
+        transform: `translate(calc(${e} + ${r} + ${a}), ${i}) scale(0.75)`
+      },
+      ":hover": {
+        fieldset: {
+          border: `1px solid ${t.palette.action.hover}`
+        }
+      },
+      ".Mui-focused": {
+        fieldset: {
+          border: `1px solid ${t.palette.primary.main}`,
+          legend: {
+            width: 0
+          }
+        }
+      },
+      fieldset: {
+        borderRadius: `${t.shape.borderRadius}px`,
+        border: "1px solid transparent",
+        legend: {
+          width: 0
+        }
+      }
+    }
+  };
+}), h = ({
+  adornedSize: t = "medium",
+  ...o
+}) => {
+  var e;
+  return /* @__PURE__ */ l(
+    g,
+    {
+      adornedSize: t,
+      ...o,
+      slotProps: {
+        ...o.slotProps,
+        inputLabel: {
+          ...(e = o.slotProps) == null ? void 0 : e.inputLabel,
+          shrink: !0
+        }
+      }
+    }
+  );
+};
+export {
+  h as AdornedTextField
+};

package/dist/components/AdornedTextField/index.d.ts

@@ -0,0 +1,3 @@
+export { AdornedTextField, type AdornedTextFieldProps, type AdornedTextFieldSize, } from "./AdornedTextField";
+export { AdornedAutocomplete, type AdornedAutocompleteProps, } from "./AdornedAutocomplete";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AdornedTextField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AdornedTextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,uBAAuB,CAAA"}

package/dist/components/ElevationCard/ElevationCard.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("@mui/material/Box"),b={surface:5,raised:8};function p({elevation:d="surface",bordered:i=!0,children:o,sx:r,"data-testid":s,component:t,ref:n}){const u=b[d];return l.jsx(c,{ref:n,...t?{component:t}:{},"data-testid":s,sx:[{borderRadius:e=>`${e.shape.borderRadius}px`,backgroundColor:e=>{var a;return(a=e.palette.backgroundPaperElevation)==null?void 0:a[u]},...i&&{border:e=>`1px solid ${e.palette.divider}`}},...Array.isArray(r)?r:[r]],children:o})}exports.ElevationCard=p;

package/dist/components/ElevationCard/ElevationCard.d.ts

@@ -0,0 +1,39 @@
+import type { SxProps, Theme } from "@mui/material/styles";
+import type { ElementType, ReactNode, Ref } from "react";
+/**
+ * Semantic elevation levels for cards.
+ *
+ * These map to `theme.palette.backgroundPaperElevation` indices
+ * and correspond to specific Figma surface colors:
+ *
+ *  - **surface** (5) → #202233  – outer/panel cards (sidebar, content area)
+ *  - **raised**  (8) → #292b3f  – inner/content cards (robot cards, list items)
+ */
+export type ElevationLevel = "surface" | "raised";
+export interface ElevationCardProps {
+    /** Semantic elevation – determines the background shade. */
+    elevation?: ElevationLevel;
+    /** Show a subtle border (default: true). */
+    bordered?: boolean;
+    children?: ReactNode;
+    sx?: SxProps<Theme>;
+    /** Optional test ID for e2e selectors. */
+    "data-testid"?: string;
+    /** Root element/component, e.g. "li" for list semantics (default: "div"). */
+    component?: ElementType;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * A reusable card primitive
+ *
+ * Usage:
+ * ```tsx
+ * <ElevationCard elevation="surface">   // outer panel card
+ *   <ElevationCard elevation="raised">  // inner content card
+ *     …
+ *   </ElevationCard>
+ * </ElevationCard>
+ * ```
+ */
+export declare function ElevationCard({ elevation, bordered, children, sx, "data-testid": dataTestId, component, ref, }: ElevationCardProps): import("react").JSX.Element;
+//# sourceMappingURL=ElevationCard.d.ts.map

package/dist/components/ElevationCard/ElevationCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElevationCard.d.ts","sourceRoot":"","sources":["../../../src/components/ElevationCard/ElevationCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAExD;;;;;;;;GAQG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAA;AAOjD,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,WAAW,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CACvB;AAWD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAqB,EACrB,QAAe,EACf,QAAQ,EACR,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,SAAS,EACT,GAAG,GACJ,EAAE,kBAAkB,+BAuBpB"}

package/dist/components/ElevationCard/ElevationCard.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import l from "@mui/material/Box";
+const c = {
+  surface: 5,
+  raised: 8
+};
+function f({
+  elevation: d = "surface",
+  bordered: o = !0,
+  children: i,
+  sx: a,
+  "data-testid": s,
+  component: e,
+  ref: n
+}) {
+  const p = c[d];
+  return /* @__PURE__ */ u(
+    l,
+    {
+      ref: n,
+      ...e ? { component: e } : {},
+      "data-testid": s,
+      sx: [
+        {
+          borderRadius: (r) => `${r.shape.borderRadius}px`,
+          backgroundColor: (r) => {
+            var t;
+            return (t = r.palette.backgroundPaperElevation) == null ? void 0 : t[p];
+          },
+          ...o && {
+            border: (r) => `1px solid ${r.palette.divider}`
+          }
+        },
+        ...Array.isArray(a) ? a : [a]
+      ],
+      children: i
+    }
+  );
+}
+export {
+  f as ElevationCard
+};

package/dist/components/ElevationCard/index.d.ts

@@ -0,0 +1,2 @@
+export { ElevationCard, type ElevationCardProps, type ElevationLevel, } from "./ElevationCard";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ElevationCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ElevationCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,cAAc,GACpB,MAAM,iBAAiB,CAAA"}

package/dist/components/PrimaryButton/PrimaryButton.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("@mui/material/Button"),e=require("@mui/material/styles"),a=e.styled(o)(({theme:r})=>({backgroundColor:r.palette.primary.main,color:r.palette.primary.contrastText,borderRadius:`${r.shape.borderRadius}px`,"&:hover":{backgroundColor:r.palette.primary.dark}}));function n(r){return t.jsx(a,{variant:"contained",...r})}exports.PrimaryButton=n;

package/dist/components/PrimaryButton/PrimaryButton.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps } from "@mui/material/Button";
+export type PrimaryButtonProps = ButtonProps;
+/**
+ * Contained button in the Wandelbots primary (violet) style.
+ * Accepts all MUI `ButtonProps`; `variant` defaults to "contained".
+ */
+export declare function PrimaryButton(props: PrimaryButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/components/PrimaryButton/PrimaryButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../src/components/PrimaryButton/PrimaryButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAsBvD,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAA;AAE5C;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAEtD"}