pendentive 0.1.1

package/dist/index.js

@@ -0,0 +1,3934 @@
+// src/core/dom.ts
+function isBrowser() {
+  return typeof document !== "undefined" && typeof window !== "undefined";
+}
+function assertDom(componentName) {
+  if (!isBrowser()) throw new Error(`[linteau] "${componentName}" requires a DOM environment (a browser, or Node/Bun with a DOM shim such as 'happy-dom' or 'linkedom'). No 'document' was found.`);
+}
+function el(tag, className) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  return node;
+}
+
+// src/core/controller.ts
+function createEmitter() {
+  const listeners = /* @__PURE__ */ new Map();
+  return {
+    on(event, listener) {
+      if (!listeners.has(event)) listeners.set(event, /* @__PURE__ */ new Set());
+      listeners.get(event).add(listener);
+      return () => listeners.get(event)?.delete(listener);
+    },
+    off(event, listener) {
+      listeners.get(event)?.delete(listener);
+    },
+    emit(event, payload) {
+      listeners.get(event)?.forEach((listener) => listener(payload));
+    },
+    clear() {
+      listeners.clear();
+    }
+  };
+}
+function attachController(element, api) {
+  return Object.assign(element, api);
+}
+
+// src/styles/tokens.ts
+var defaultTheme = {
+  background: "oklch(0.09 0 0)",
+  foreground: "oklch(0.94 0 0)",
+  card: "oklch(0.12 0 0)",
+  cardForeground: "oklch(0.94 0 0)",
+  primary: "oklch(0.92 0 0)",
+  primaryForeground: "oklch(0.1 0 0)",
+  secondary: "oklch(0.18 0 0)",
+  secondaryForeground: "oklch(0.9 0 0)",
+  muted: "oklch(0.16 0 0)",
+  mutedForeground: "oklch(0.6 0 0)",
+  accent: "oklch(0.2 0 0)",
+  accentForeground: "oklch(0.94 0 0)",
+  destructive: "oklch(0.58 0.22 27)",
+  destructiveForeground: "oklch(0.97 0 0)",
+  success: "oklch(0.62 0.16 145)",
+  successForeground: "oklch(0.97 0 0)",
+  warning: "oklch(0.75 0.15 85)",
+  warningForeground: "oklch(0.15 0 0)",
+  border: "oklch(0.22 0 0)",
+  input: "oklch(0.22 0 0)",
+  ring: "oklch(0.7 0 0)",
+  radius: "0.625rem",
+  radiusSm: "calc(0.625rem - 4px)",
+  radiusMd: "calc(0.625rem - 2px)",
+  radiusLg: "0.625rem",
+  radiusXl: "calc(0.625rem + 4px)"
+};
+function buildTokensCss(tokens) {
+  return `:root {
+  --linteau-background: ${tokens.background};
+  --linteau-foreground: ${tokens.foreground};
+  --linteau-card: ${tokens.card};
+  --linteau-card-foreground: ${tokens.cardForeground};
+  --linteau-primary: ${tokens.primary};
+  --linteau-primary-foreground: ${tokens.primaryForeground};
+  --linteau-secondary: ${tokens.secondary};
+  --linteau-secondary-foreground: ${tokens.secondaryForeground};
+  --linteau-muted: ${tokens.muted};
+  --linteau-muted-foreground: ${tokens.mutedForeground};
+  --linteau-accent: ${tokens.accent};
+  --linteau-accent-foreground: ${tokens.accentForeground};
+  --linteau-destructive: ${tokens.destructive};
+  --linteau-destructive-foreground: ${tokens.destructiveForeground};
+  --linteau-success: ${tokens.success};
+  --linteau-success-foreground: ${tokens.successForeground};
+  --linteau-warning: ${tokens.warning};
+  --linteau-warning-foreground: ${tokens.warningForeground};
+  --linteau-border: ${tokens.border};
+  --linteau-input: ${tokens.input};
+  --linteau-ring: ${tokens.ring};
+  --linteau-radius: ${tokens.radius};
+  --linteau-radius-sm: ${tokens.radiusSm};
+  --linteau-radius-md: ${tokens.radiusMd};
+  --linteau-radius-lg: ${tokens.radiusLg};
+  --linteau-radius-xl: ${tokens.radiusXl};
+}`;
+}
+
+// src/core/theme.ts
+var TOKENS_STYLE_ID = "linteau-tokens";
+var currentTheme = { ...defaultTheme };
+var emitter = createEmitter();
+function applyThemeToDom() {
+  if (!isBrowser()) return;
+  let style = document.getElementById(TOKENS_STYLE_ID);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = TOKENS_STYLE_ID;
+    document.head.appendChild(style);
+  }
+  style.textContent = buildTokensCss(currentTheme);
+}
+function getTheme() {
+  return currentTheme;
+}
+function setTheme(overrides) {
+  currentTheme = { ...currentTheme, ...overrides };
+  applyThemeToDom();
+  emitter.emit("change", currentTheme);
+}
+function resetTheme() {
+  currentTheme = { ...defaultTheme };
+  applyThemeToDom();
+  emitter.emit("change", currentTheme);
+}
+function onThemeChange(listener) {
+  return emitter.on("change", listener);
+}
+applyThemeToDom();
+
+// src/svg/Icon.ts
+var SVGNS = "http://www.w3.org/2000/svg";
+function baseAttrs(props) {
+  const size = String(props.size ?? 16);
+  return {
+    xmlns: SVGNS,
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: props.color ?? "currentColor",
+    "stroke-width": String(props.strokeWidth ?? 2),
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  };
+}
+function renderIconShape(shape, props) {
+  const svg = document.createElementNS(SVGNS, "svg");
+  const attrs = baseAttrs(props);
+  for (const key in attrs) svg.setAttribute(key, attrs[key]);
+  if (props.className) svg.setAttribute("class", props.className);
+  for (const [tag, childAttrs] of shape) {
+    const node = document.createElementNS(SVGNS, tag);
+    for (const key in childAttrs) node.setAttribute(key, childAttrs[key]);
+    svg.appendChild(node);
+  }
+  return svg;
+}
+function fromElement(source, props) {
+  const svg = source.cloneNode(true);
+  const size = String(props.size ?? 16);
+  svg.setAttribute("width", size);
+  svg.setAttribute("height", size);
+  if (props.color) svg.setAttribute("stroke", props.color);
+  if (props.strokeWidth != null) svg.setAttribute("stroke-width", String(props.strokeWidth));
+  if (props.className) svg.classList.add(...props.className.split(" ").filter(Boolean));
+  return svg;
+}
+function fromMarkup(markup, props) {
+  const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
+  return fromElement(doc.documentElement, props);
+}
+function Icon(input, size, props = {}) {
+  if (input === null || input === void 0) return null;
+  const resolved = { ...size !== void 0 ? { size } : {}, ...props };
+  if (typeof input === "function") return input(resolved);
+  if (typeof input === "string") return fromMarkup(input, resolved);
+  if (input instanceof SVGElement) return fromElement(input, resolved);
+  if (Array.isArray(input)) return renderIconShape(input, resolved);
+  return null;
+}
+
+// src/svg/create-icon.ts
+function createIcon(name, shape) {
+  return function renderIcon(props = {}) {
+    const svg = renderIconShape(shape, props);
+    svg.setAttribute("data-icon", name);
+    return svg;
+  };
+}
+
+// src/svg/icons/alertTriangle.ts
+var alertTriangle = createIcon("alert-triangle", [
+  ["path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z" }],
+  ["line", { x1: "12", y1: "9", x2: "12", y2: "13" }],
+  ["line", { x1: "12", y1: "17", x2: "12.01", y2: "17" }]
+]);
+
+// src/svg/icons/bell.ts
+var bell = createIcon("bell", [
+  ["path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" }],
+  ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0" }]
+]);
+
+// src/svg/icons/calendar.ts
+var calendar = createIcon("calendar", [
+  ["rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }],
+  ["line", { x1: "16", y1: "2", x2: "16", y2: "6" }],
+  ["line", { x1: "8", y1: "2", x2: "8", y2: "6" }],
+  ["line", { x1: "3", y1: "10", x2: "21", y2: "10" }]
+]);
+
+// src/svg/icons/check.ts
+var check = createIcon("check", [
+  ["polyline", { points: "20 6 9 17 4 12" }]
+]);
+
+// src/svg/icons/chevronDown.ts
+var chevronDown = createIcon("chevron-down", [
+  ["polyline", { points: "6 9 12 15 18 9" }]
+]);
+
+// src/svg/icons/chevronLeft.ts
+var chevronLeft = createIcon("chevron-left", [
+  ["polyline", { points: "15 18 9 12 15 6" }]
+]);
+
+// src/svg/icons/chevronRight.ts
+var chevronRight = createIcon("chevron-right", [
+  ["polyline", { points: "9 18 15 12 9 6" }]
+]);
+
+// src/svg/icons/chevronUp.ts
+var chevronUp = createIcon("chevron-up", [
+  ["polyline", { points: "18 15 12 9 6 15" }]
+]);
+
+// src/svg/icons/circle.ts
+var circle = createIcon("circle", [
+  ["circle", { cx: "12", cy: "12", r: "10" }]
+]);
+
+// src/svg/icons/copy.ts
+var copy = createIcon("copy", [
+  ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }],
+  ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" }]
+]);
+
+// src/svg/icons/download.ts
+var download = createIcon("download", [
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }],
+  ["polyline", { points: "7 10 12 15 17 10" }],
+  ["line", { x1: "12", y1: "15", x2: "12", y2: "3" }]
+]);
+
+// src/svg/icons/edit.ts
+var edit = createIcon("edit", [
+  ["path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }]
+]);
+
+// src/svg/icons/externalLink.ts
+var externalLink = createIcon("external-link", [
+  ["path", { d: "M15 3h6v6" }],
+  ["path", { d: "M10 14 21 3" }],
+  ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }]
+]);
+
+// src/svg/icons/eye.ts
+var eye = createIcon("eye", [
+  ["path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }],
+  ["circle", { cx: "12", cy: "12", r: "3" }]
+]);
+
+// src/svg/icons/eyeOff.ts
+var eyeOff = createIcon("eye-off", [
+  ["path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }],
+  ["path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }],
+  ["path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }],
+  ["line", { x1: "2", y1: "2", x2: "22", y2: "22" }]
+]);
+
+// src/svg/icons/filter.ts
+var filter = createIcon("filter", [
+  ["polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }]
+]);
+
+// src/svg/icons/heart.ts
+var heart = createIcon("heart", [
+  ["path", { d: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" }]
+]);
+
+// src/svg/icons/home.ts
+var home = createIcon("home", [
+  ["path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }],
+  ["polyline", { points: "9 22 9 12 15 12 15 22" }]
+]);
+
+// src/svg/icons/info.ts
+var info = createIcon("info", [
+  ["circle", { cx: "12", cy: "12", r: "10" }],
+  ["line", { x1: "12", y1: "16", x2: "12", y2: "12" }],
+  ["line", { x1: "12", y1: "8", x2: "12.01", y2: "8" }]
+]);
+
+// src/svg/icons/link.ts
+var link = createIcon("link", [
+  ["path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }],
+  ["path", { d: "M15 7h2a5 5 0 1 1 0 10h-2" }],
+  ["line", { x1: "8", y1: "12", x2: "16", y2: "12" }]
+]);
+
+// src/svg/icons/loader.ts
+var loader = createIcon("loader", [
+  ["line", { x1: "12", y1: "2", x2: "12", y2: "6" }],
+  ["line", { x1: "12", y1: "18", x2: "12", y2: "22" }],
+  ["line", { x1: "4.9", y1: "4.9", x2: "7.8", y2: "7.8" }],
+  ["line", { x1: "16.2", y1: "16.2", x2: "19.1", y2: "19.1" }],
+  ["line", { x1: "2", y1: "12", x2: "6", y2: "12" }],
+  ["line", { x1: "18", y1: "12", x2: "22", y2: "12" }],
+  ["line", { x1: "4.9", y1: "19.1", x2: "7.8", y2: "16.2" }],
+  ["line", { x1: "16.2", y1: "7.8", x2: "19.1", y2: "4.9" }]
+]);
+
+// src/svg/icons/lock.ts
+var lock = createIcon("lock", [
+  ["rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }],
+  ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4" }]
+]);
+
+// src/svg/icons/mail.ts
+var mail = createIcon("mail", [
+  ["rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }],
+  ["path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" }]
+]);
+
+// src/svg/icons/menu.ts
+var menu = createIcon("menu", [
+  ["line", { x1: "4", y1: "12", x2: "20", y2: "12" }],
+  ["line", { x1: "4", y1: "6", x2: "20", y2: "6" }],
+  ["line", { x1: "4", y1: "18", x2: "20", y2: "18" }]
+]);
+
+// src/svg/icons/minus.ts
+var minus = createIcon("minus", [
+  ["line", { x1: "5", y1: "12", x2: "19", y2: "12" }]
+]);
+
+// src/svg/icons/moon.ts
+var moon = createIcon("moon", [
+  ["path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }]
+]);
+
+// src/svg/icons/moreHorizontal.ts
+var moreHorizontal = createIcon("more-horizontal", [
+  ["circle", { cx: "5", cy: "12", r: "1" }],
+  ["circle", { cx: "12", cy: "12", r: "1" }],
+  ["circle", { cx: "19", cy: "12", r: "1" }]
+]);
+
+// src/svg/icons/phone.ts
+var phone = createIcon("phone", [
+  ["path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" }]
+]);
+
+// src/svg/icons/plus.ts
+var plus = createIcon("plus", [
+  ["line", { x1: "12", y1: "5", x2: "12", y2: "19" }],
+  ["line", { x1: "5", y1: "12", x2: "19", y2: "12" }]
+]);
+
+// src/svg/icons/refreshCw.ts
+var refreshCw = createIcon("refresh-cw", [
+  ["path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }],
+  ["path", { d: "M3 3v5h5" }],
+  ["path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" }],
+  ["path", { d: "M16 16h5v5" }]
+]);
+
+// src/svg/icons/search.ts
+var search = createIcon("search", [
+  ["circle", { cx: "11", cy: "11", r: "8" }],
+  ["line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }]
+]);
+
+// src/svg/icons/settings.ts
+var settings = createIcon("settings", [
+  ["path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }],
+  ["circle", { cx: "12", cy: "12", r: "3" }]
+]);
+
+// src/svg/icons/star.ts
+var star = createIcon("star", [
+  ["polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }]
+]);
+
+// src/svg/icons/sun.ts
+var sun = createIcon("sun", [
+  ["circle", { cx: "12", cy: "12", r: "4" }],
+  ["line", { x1: "12", y1: "2", x2: "12", y2: "4" }],
+  ["line", { x1: "12", y1: "20", x2: "12", y2: "22" }],
+  ["line", { x1: "4.93", y1: "4.93", x2: "6.34", y2: "6.34" }],
+  ["line", { x1: "17.66", y1: "17.66", x2: "19.07", y2: "19.07" }],
+  ["line", { x1: "2", y1: "12", x2: "4", y2: "12" }],
+  ["line", { x1: "20", y1: "12", x2: "22", y2: "12" }],
+  ["line", { x1: "6.34", y1: "17.66", x2: "4.93", y2: "19.07" }],
+  ["line", { x1: "19.07", y1: "4.93", x2: "17.66", y2: "6.34" }]
+]);
+
+// src/svg/icons/trash.ts
+var trash = createIcon("trash", [
+  ["path", { d: "M3 6h18" }],
+  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }],
+  ["path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }],
+  ["line", { x1: "10", y1: "11", x2: "10", y2: "17" }],
+  ["line", { x1: "14", y1: "11", x2: "14", y2: "17" }]
+]);
+
+// src/svg/icons/upload.ts
+var upload = createIcon("upload", [
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }],
+  ["polyline", { points: "17 8 12 3 7 8" }],
+  ["line", { x1: "12", y1: "3", x2: "12", y2: "15" }]
+]);
+
+// src/svg/icons/user.ts
+var user = createIcon("user", [
+  ["path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }],
+  ["circle", { cx: "12", cy: "7", r: "4" }]
+]);
+
+// src/svg/icons/x.ts
+var x = createIcon("x", [
+  ["line", { x1: "18", y1: "6", x2: "6", y2: "18" }],
+  ["line", { x1: "6", y1: "6", x2: "18", y2: "18" }]
+]);
+
+// src/svg/icons/index.ts
+var icons = {
+  alertTriangle,
+  bell,
+  calendar,
+  check,
+  chevronDown,
+  chevronLeft,
+  chevronRight,
+  chevronUp,
+  circle,
+  copy,
+  download,
+  edit,
+  externalLink,
+  eye,
+  eyeOff,
+  filter,
+  heart,
+  home,
+  info,
+  link,
+  loader,
+  lock,
+  mail,
+  menu,
+  minus,
+  moon,
+  moreHorizontal,
+  phone,
+  plus,
+  refreshCw,
+  search,
+  settings,
+  star,
+  sun,
+  trash,
+  upload,
+  user,
+  x
+};
+
+// src/core/classNames.ts
+var PREFIX = "linteau-";
+function px(part) {
+  return `${PREFIX}${part}`;
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/core/styleInjector.ts
+var STYLE_ID = "linteau-styles";
+var injectedKeys = /* @__PURE__ */ new Set();
+var baseCss = `
+.linteau-hidden { display: none !important }
+.linteau-icon { color: var(--linteau-muted-foreground); flex-shrink: 0 }
+`;
+function getStyleSheet() {
+  if (!isBrowser) return null;
+  let sheet = document.getElementById(STYLE_ID);
+  if (!sheet) {
+    sheet = document.createElement("style");
+    sheet.id = STYLE_ID;
+    document.head.appendChild(sheet);
+  }
+  return sheet;
+}
+function ensureComponentStyles(key, css) {
+  const sheet = getStyleSheet();
+  if (!sheet) return;
+  if (!injectedKeys.has("base")) {
+    sheet.appendChild(document.createTextNode(baseCss));
+    injectedKeys.add("base");
+  }
+  if (injectedKeys.has(key)) return;
+  sheet.appendChild(document.createTextNode(css));
+  injectedKeys.add(key);
+}
+
+// src/components/avatar/Avatar.ts
+var avatarCss = `
+.linteau-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--linteau-secondary); color: var(--linteau-secondary-foreground); font-size: 12px; font-weight: 600; overflow: hidden; flex-shrink: 0 }
+.linteau-avatar-circle { border-radius: 50% }
+.linteau-avatar-square { border-radius: var(--linteau-radius-sm) }
+.linteau-avatar img { width: 100%; height: 100%; object-fit: cover }
+`;
+function Avatar(options = {}) {
+  assertDom("Avatar");
+  ensureComponentStyles("avatar", avatarCss);
+  const size = options.size ?? 36;
+  const shape = options.shape ?? "circle";
+  const root = el("div", cx(px("avatar"), px(`avatar-${shape}`)));
+  root.style.width = `${size}px`;
+  root.style.height = `${size}px`;
+  function render(src) {
+    root.replaceChildren();
+    if (src) {
+      const img = document.createElement("img");
+      img.src = src;
+      img.alt = options.alt ?? "";
+      img.addEventListener("error", () => render(void 0), { once: true });
+      root.appendChild(img);
+    } else {
+      const fallback = document.createElement("span");
+      fallback.textContent = options.initials ?? "";
+      root.appendChild(fallback);
+    }
+  }
+  render(options.src);
+  const api = {
+    setSrc(src) {
+      render(src);
+    },
+    destroy() {
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/badge/Badge.ts
+var badgeCss = `
+.linteau-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.6;
+  border: 1px solid transparent;
+}
+.linteau-badge-default { background: var(--linteau-secondary); color: var(--linteau-secondary-foreground) }
+.linteau-badge-outline { background: transparent; border-color: var(--linteau-border); color: var(--linteau-foreground) }
+.linteau-badge-success { background: var(--linteau-success); color: var(--linteau-success-foreground) }
+.linteau-badge-warning { background: var(--linteau-warning); color: var(--linteau-warning-foreground) }
+.linteau-badge-destructive { background: var(--linteau-destructive); color: var(--linteau-destructive-foreground) }
+`;
+function Badge(text, options = {}) {
+  assertDom("Badge");
+  ensureComponentStyles("badge", badgeCss);
+  let variant = options.variant ?? "default";
+  const span = el("span", cx(px("badge"), px(`badge-${variant}`)));
+  const label = document.createElement("span");
+  label.textContent = text;
+  if (options.icon) span.appendChild(Icon(options.icon, 11, { className: px("icon") }));
+  span.appendChild(label);
+  const api = {
+    setLabel(newText) {
+      label.textContent = newText;
+    },
+    setVariant(newVariant) {
+      span.classList.remove(px(`badge-${variant}`));
+      variant = newVariant;
+      span.classList.add(px(`badge-${variant}`));
+    },
+    destroy() {
+      span.remove();
+    }
+  };
+  return attachController(span, api);
+}
+
+// src/components/button/Button.ts
+var buttonCss = `
+.linteau-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: var(--linteau-radius-sm);
+  border: 1px solid transparent;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, opacity 120ms ease;
+}
+.linteau-button-default { padding: 10px 14px }
+.linteau-button-sm { padding: 6px 10px; font-size: 12px }
+.linteau-button-full { width: 100% }
+.linteau-button:active { transform: scale(0.97) }
+.linteau-button:disabled { opacity: 0.5; cursor: not-allowed; transform: none }
+.linteau-button-default:not(.linteau-button-outline):not(.linteau-button-ghost):not(.linteau-button-destructive) {
+  background: var(--linteau-primary);
+  color: var(--linteau-primary-foreground);
+}
+.linteau-button-default:not(.linteau-button-outline):not(.linteau-button-ghost):not(.linteau-button-destructive):hover:not(:disabled) {
+  filter: brightness(0.92);
+}
+.linteau-button-outline { background: transparent; border-color: var(--linteau-border); color: var(--linteau-foreground) }
+.linteau-button-outline:hover:not(:disabled) { background: var(--linteau-accent) }
+.linteau-button-ghost { background: transparent; color: var(--linteau-muted-foreground) }
+.linteau-button-ghost:hover:not(:disabled) { background: var(--linteau-accent); color: var(--linteau-foreground) }
+.linteau-button-destructive { background: var(--linteau-destructive); color: var(--linteau-destructive-foreground) }
+.linteau-button-destructive:hover:not(:disabled) { filter: brightness(0.92) }
+`;
+function Button(text, options = {}) {
+  assertDom("Button");
+  ensureComponentStyles("button", buttonCss);
+  let { variant = "default", size = "default" } = options;
+  let { icon, iconPosition = "start", disabled = false } = options;
+  let onClickHandler = options.onClick;
+  const button = el("button", cx(px("button"), px(`button-${variant}`), px(`button-${size}`), options.fullWidth && px("button-full")));
+  button.type = "button";
+  button.disabled = disabled;
+  const label = document.createElement("span");
+  label.className = px("button-label");
+  label.textContent = text;
+  function render() {
+    button.replaceChildren();
+    const iconEl = icon ? Icon(icon, 14, { className: px("icon") }) : null;
+    const nodes = [];
+    if (iconEl && iconPosition === "start") nodes.push(iconEl);
+    nodes.push(label);
+    if (iconEl && iconPosition === "end") nodes.push(iconEl);
+    button.append(...nodes);
+  }
+  render();
+  const listener = (event) => {
+    if (!disabled) onClickHandler?.(event);
+  };
+  button.addEventListener("click", listener);
+  const api = {
+    setLabel(newText) {
+      label.textContent = newText;
+    },
+    setVariant(newVariant) {
+      button.classList.remove(px(`button-${variant}`));
+      variant = newVariant;
+      button.classList.add(px(`button-${variant}`));
+    },
+    setSize(newSize) {
+      button.classList.remove(px(`button-${size}`));
+      size = newSize;
+      button.classList.add(px(`button-${size}`));
+    },
+    setIcon(newIcon, position) {
+      icon = newIcon;
+      if (position) iconPosition = position;
+      render();
+    },
+    setDisabled(value) {
+      disabled = value;
+      button.disabled = value;
+    },
+    setOnClick(handler) {
+      onClickHandler = handler;
+    },
+    destroy() {
+      button.removeEventListener("click", listener);
+      button.remove();
+    }
+  };
+  return attachController(button, api);
+}
+
+// src/components/button/ButtonGroup.ts
+var buttonGroupCss = `
+.linteau-button-group { display: inline-flex; border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-sm); overflow: hidden }
+.linteau-button-group .linteau-button { border-radius: 0; border: none; border-right: 1px solid var(--linteau-border); background: transparent; color: var(--linteau-muted-foreground) }
+.linteau-button-group .linteau-button:last-child { border-right: none }
+.linteau-button-group .linteau-button:hover:not(:disabled) { background: var(--linteau-accent) }
+.linteau-button-group .linteau-button-group-item-active { background: var(--linteau-primary); color: var(--linteau-primary-foreground) }
+`;
+function ButtonGroup(options) {
+  assertDom("ButtonGroup");
+  ensureComponentStyles("button-group", buttonGroupCss);
+  let items = options.items;
+  let value = options.value;
+  const onChange = options.onChange;
+  const root = el("div", px("button-group"));
+  root.setAttribute("role", "group");
+  function render() {
+    root.replaceChildren();
+    for (const item of items) {
+      const isActive = item.value === value;
+      const button = Button(item.label, {
+        icon: item.icon,
+        variant: "ghost",
+        onClick: () => {
+          value = item.value;
+          render();
+          onChange?.(item.value);
+        }
+      });
+      button.classList.toggle(px("button-group-item-active"), isActive);
+      root.appendChild(button);
+    }
+  }
+  render();
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      render();
+    },
+    setItems(newItems) {
+      items = newItems;
+      render();
+    },
+    destroy() {
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/checkbox/Checkbox.ts
+var checkboxCss = `
+.linteau-checkbox-row { display: flex; align-items: center; gap: 8px }
+.linteau-checkbox {
+  width: 18px;
+  height: 18px;
+  border-radius: var(--linteau-radius-sm);
+  border: 1px solid var(--linteau-border);
+  background: var(--linteau-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--linteau-primary-foreground);
+}
+.linteau-checkbox:disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-checkbox.linteau-checked { background: var(--linteau-primary); border-color: var(--linteau-primary) }
+.linteau-checkbox svg { display: none }
+.linteau-checkbox.linteau-checked svg, .linteau-checkbox.linteau-indeterminate svg { display: block }
+`;
+function Checkbox(options) {
+  assertDom("Checkbox");
+  ensureComponentStyles("checkbox", checkboxCss);
+  let checked = options.checked ?? options.defaultChecked ?? false;
+  let indeterminate = options.indeterminate ?? false;
+  let disabled = options.disabled ?? false;
+  const onChange = options.onChange;
+  const root = el("div", px("checkbox-row"));
+  const box = el("button", px("checkbox"));
+  box.type = "button";
+  box.setAttribute("role", "checkbox");
+  box.disabled = disabled;
+  const checkIcon = Icon(icons.check, 12);
+  const dashIcon = Icon(icons.minus, 12);
+  box.append(checkIcon, dashIcon);
+  const labelText = document.createElement("span");
+  labelText.textContent = options.label;
+  function render() {
+    box.classList.toggle(px("checked"), checked);
+    box.classList.toggle(px("indeterminate"), indeterminate && !checked);
+    box.setAttribute("aria-checked", indeterminate ? "mixed" : String(checked));
+    checkIcon.style.display = checked ? "block" : "none";
+    dashIcon.style.display = !checked && indeterminate ? "block" : "none";
+  }
+  render();
+  const listener = () => {
+    if (disabled) return;
+    checked = !checked;
+    indeterminate = false;
+    render();
+    onChange?.(checked);
+  };
+  box.addEventListener("click", listener);
+  root.append(box, labelText);
+  const api = {
+    getValue() {
+      return checked;
+    },
+    setValue(value) {
+      checked = value;
+      indeterminate = false;
+      render();
+    },
+    setIndeterminate(value) {
+      indeterminate = value;
+      render();
+    },
+    setDisabled(value) {
+      disabled = value;
+      box.disabled = value;
+    },
+    destroy() {
+      box.removeEventListener("click", listener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/core/overlay.ts
+function onClickOutside(targets, callback) {
+  if (!isBrowser()) return () => {
+  };
+  const list = Array.isArray(targets) ? targets : [targets];
+  const listener = (event) => {
+    const node = event.target;
+    if (list.some((target) => target.contains(node))) return;
+    callback();
+  };
+  document.addEventListener("mousedown", listener, true);
+  return () => document.removeEventListener("mousedown", listener, true);
+}
+function onEscapeKey(callback) {
+  if (!isBrowser()) return () => {
+  };
+  const listener = (event) => {
+    if (event.key === "Escape") callback();
+  };
+  document.addEventListener("keydown", listener);
+  return () => document.removeEventListener("keydown", listener);
+}
+function lockBodyScroll() {
+  if (!isBrowser()) return () => {
+  };
+  const previous = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  return () => {
+    document.body.style.overflow = previous;
+  };
+}
+function positionFloating(anchor, floating, placement = "bottom", gap = 6) {
+  if (!isBrowser()) return;
+  const anchorRect = anchor.getBoundingClientRect();
+  const floatingRect = floating.getBoundingClientRect();
+  let top = 0;
+  let left = 0;
+  if (placement === "bottom") {
+    top = anchorRect.bottom + gap;
+    left = anchorRect.left;
+  } else if (placement === "top") {
+    top = anchorRect.top - floatingRect.height - gap;
+    left = anchorRect.left;
+  } else if (placement === "left") {
+    top = anchorRect.top;
+    left = anchorRect.left - floatingRect.width - gap;
+  } else {
+    top = anchorRect.top;
+    left = anchorRect.right + gap;
+  }
+  const maxLeft = window.innerWidth - floatingRect.width - 8;
+  const maxTop = window.innerHeight - floatingRect.height - 8;
+  floating.style.position = "fixed";
+  floating.style.top = `${Math.max(8, Math.min(top, maxTop))}px`;
+  floating.style.left = `${Math.max(8, Math.min(left, maxLeft))}px`;
+}
+
+// src/components/command/Command.ts
+var commandCss = `
+.linteau-command-overlay { position: fixed; inset: 0; background: color-mix(in oklch, black 60%, transparent); display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; z-index: 1500; backdrop-filter: blur(4px) }
+.linteau-command-panel { width: min(560px, 92vw); max-height: 60vh; display: flex; flex-direction: column; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden }
+.linteau-command-input-wrap { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--linteau-border) }
+.linteau-command-input { flex: 1; background: transparent; border: none; outline: none; color: var(--linteau-foreground); font-size: 14px; font-family: inherit }
+.linteau-command-list { overflow-y: auto; padding: 6px; flex: 1 }
+.linteau-command-group-heading { padding: 6px 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--linteau-muted-foreground) }
+.linteau-command-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--linteau-radius-sm); font-size: 13px; color: var(--linteau-foreground); cursor: pointer }
+.linteau-command-item-highlighted { background: var(--linteau-accent) }
+.linteau-command-item-disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-command-empty { padding: 24px; text-align: center; font-size: 12px; color: var(--linteau-muted-foreground) }
+`;
+function Command(options = {}) {
+  assertDom("Command");
+  ensureComponentStyles("command", commandCss);
+  let groups = options.groups ?? [];
+  const closeOnSelect = options.closeOnSelect ?? true;
+  const onSelect = options.onSelect;
+  let query = "";
+  let highlighted = 0;
+  let isOpen = false;
+  let unlockScroll = null;
+  let unbindEscape = null;
+  const overlay = el("div", cx(px("command-overlay"), px("hidden")));
+  const panel = el("div", px("command-panel"));
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-modal", "true");
+  const inputWrap = el("div", px("command-input-wrap"));
+  const searchIcon = Icon(icons.search, 14, { className: px("icon") });
+  if (searchIcon) inputWrap.appendChild(searchIcon);
+  const input = el("input", px("command-input"));
+  input.type = "text";
+  input.placeholder = options.placeholder ?? "Type a command or search...";
+  inputWrap.appendChild(input);
+  const list = el("div", px("command-list"));
+  panel.append(inputWrap, list);
+  overlay.appendChild(panel);
+  function filteredFlat() {
+    const normalized = query.trim().toLowerCase();
+    const all = groups.flatMap((group) => group.items);
+    if (!normalized) return all;
+    return all.filter((item) => item.label.toLowerCase().includes(normalized) || item.keywords?.some((k) => k.toLowerCase().includes(normalized)));
+  }
+  function renderList() {
+    list.replaceChildren();
+    const normalized = query.trim().toLowerCase();
+    const flat = filteredFlat();
+    if (flat.length === 0) {
+      const empty = el("div", px("command-empty"));
+      empty.textContent = options.emptyText ?? "No results found.";
+      list.appendChild(empty);
+      return;
+    }
+    let runningIndex = 0;
+    for (const group of groups) {
+      const matchingItems = group.items.filter((item) => !normalized || item.label.toLowerCase().includes(normalized) || item.keywords?.some((k) => k.toLowerCase().includes(normalized)));
+      if (matchingItems.length === 0) continue;
+      if (group.heading) {
+        const heading = el("div", px("command-group-heading"));
+        heading.textContent = group.heading;
+        list.appendChild(heading);
+      }
+      for (const item of matchingItems) {
+        const index = runningIndex++;
+        const itemEl = el("div", cx(px("command-item"), index === highlighted && px("command-item-highlighted"), item.disabled && px("command-item-disabled")));
+        if (item.icon) itemEl.appendChild(Icon(item.icon, 14, { className: px("icon") }));
+        const label = document.createElement("span");
+        label.textContent = item.label;
+        itemEl.appendChild(label);
+        itemEl.addEventListener("mousedown", (event) => {
+          event.preventDefault();
+          selectItem(item);
+        });
+        itemEl.addEventListener("mouseenter", () => {
+          highlighted = index;
+          renderList();
+        });
+        list.appendChild(itemEl);
+      }
+    }
+  }
+  function selectItem(item) {
+    if (item.disabled) return;
+    onSelect?.(item.value);
+    if (closeOnSelect) close();
+  }
+  function handleKeydown(event) {
+    const flat = filteredFlat();
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      highlighted = Math.min(highlighted + 1, flat.length - 1);
+      renderList();
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      highlighted = Math.max(highlighted - 1, 0);
+      renderList();
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      const item = flat[highlighted];
+      if (item) selectItem(item);
+    }
+  }
+  const inputListener = () => {
+    query = input.value;
+    highlighted = 0;
+    renderList();
+  };
+  input.addEventListener("input", inputListener);
+  input.addEventListener("keydown", handleKeydown);
+  const backdropListener = (event) => {
+    if (event.target === overlay) close();
+  };
+  overlay.addEventListener("mousedown", backdropListener);
+  function open() {
+    if (isOpen) return;
+    isOpen = true;
+    query = "";
+    highlighted = 0;
+    input.value = "";
+    overlay.classList.remove(px("hidden"));
+    renderList();
+    unlockScroll = lockBodyScroll();
+    unbindEscape = onEscapeKey(close);
+    input.focus();
+  }
+  function close() {
+    if (!isOpen) return;
+    isOpen = false;
+    overlay.classList.add(px("hidden"));
+    unlockScroll?.();
+    unlockScroll = null;
+    unbindEscape?.();
+    unbindEscape = null;
+  }
+  function toggle() {
+    if (isOpen) close();
+    else open();
+  }
+  const api = {
+    open,
+    close,
+    toggle,
+    isOpen() {
+      return isOpen;
+    },
+    setGroups(newGroups) {
+      groups = newGroups;
+      renderList();
+    },
+    destroy() {
+      input.removeEventListener("input", inputListener);
+      input.removeEventListener("keydown", handleKeydown);
+      overlay.removeEventListener("mousedown", backdropListener);
+      unlockScroll?.();
+      unbindEscape?.();
+      overlay.remove();
+    }
+  };
+  return attachController(overlay, api);
+}
+
+// src/components/data/List.ts
+var listCss = `
+.linteau-list { display: flex; flex-direction: column; gap: 2px; width: 100% }
+.linteau-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--linteau-radius-sm); cursor: pointer }
+.linteau-list-item:hover { background: var(--linteau-accent) }
+.linteau-list-item-selected { background: var(--linteau-accent) }
+.linteau-list-item-text { display: flex; flex-direction: column }
+.linteau-list-item-label { font-size: 13px; color: var(--linteau-foreground) }
+.linteau-list-item-description { font-size: 11px; color: var(--linteau-muted-foreground) }
+`;
+function List(options) {
+  assertDom("List");
+  ensureComponentStyles("list", listCss);
+  let items = options.items;
+  const selectable = options.selectable ?? true;
+  let value = options.value;
+  const onChange = options.onChange;
+  const cleanupListeners = [];
+  const root = el("div", px("list"));
+  function render() {
+    root.replaceChildren();
+    cleanupListeners.splice(0).forEach((fn) => fn());
+    for (const item of items) {
+      const row = el("div", cx(px("list-item"), selectable && item.value === value && px("list-item-selected")));
+      if (item.icon) row.appendChild(Icon(item.icon, 16, { className: px("icon") }));
+      const textWrap = el("div", px("list-item-text"));
+      const label = el("div", px("list-item-label"));
+      label.textContent = item.label;
+      textWrap.appendChild(label);
+      if (item.description) {
+        const description = el("div", px("list-item-description"));
+        description.textContent = item.description;
+        textWrap.appendChild(description);
+      }
+      row.appendChild(textWrap);
+      if (selectable) {
+        const listener = () => {
+          value = item.value;
+          render();
+          onChange?.(item.value);
+        };
+        row.addEventListener("click", listener);
+        cleanupListeners.push(() => row.removeEventListener("click", listener));
+      }
+      root.appendChild(row);
+    }
+  }
+  render();
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      render();
+    },
+    setItems(newItems) {
+      items = newItems;
+      render();
+    },
+    destroy() {
+      cleanupListeners.splice(0).forEach((fn) => fn());
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/data/Table.ts
+var tableCss = `
+.linteau-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg) }
+.linteau-table { width: 100%; border-collapse: collapse; font-size: 12px }
+.linteau-table th { text-align: left; padding: 10px 12px; background: var(--linteau-muted); color: var(--linteau-muted-foreground); font-weight: 600; border-bottom: 1px solid var(--linteau-border); cursor: default; white-space: nowrap }
+.linteau-table th.linteau-table-sortable { cursor: pointer; user-select: none }
+.linteau-table td { padding: 10px 12px; border-bottom: 1px solid var(--linteau-border); color: var(--linteau-foreground) }
+.linteau-table tr:last-child td { border-bottom: none }
+.linteau-table-sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle }
+`;
+function Table(options) {
+  assertDom("Table");
+  ensureComponentStyles("table", tableCss);
+  let rows = options.rows;
+  let sortKey = null;
+  let sortDirection = "asc";
+  const cleanupListeners = [];
+  const wrap = el("div", px("table-wrap"));
+  const table = el("table", px("table"));
+  const thead = document.createElement("thead");
+  const tbody = document.createElement("tbody");
+  function renderHead() {
+    thead.replaceChildren();
+    cleanupListeners.splice(0).forEach((fn) => fn());
+    const headRow = document.createElement("tr");
+    for (const column of options.columns) {
+      const th = document.createElement("th");
+      th.className = cx(px("table-sortable-cell"), column.sortable && px("table-sortable"));
+      th.textContent = column.header;
+      if (column.sortable) {
+        if (sortKey === column.key) {
+          const sortIcon = Icon(sortDirection === "asc" ? icons.chevronUp : icons.chevronDown, 12, { className: px("table-sort-icon") });
+          if (sortIcon) th.appendChild(sortIcon);
+        }
+        const listener = () => {
+          sortDirection = sortKey === column.key && sortDirection === "asc" ? "desc" : "asc";
+          sortKey = column.key;
+          renderHead();
+          options.onSortChange?.(column.key, sortDirection);
+        };
+        th.addEventListener("click", listener);
+        cleanupListeners.push(() => th.removeEventListener("click", listener));
+      }
+      headRow.appendChild(th);
+    }
+    thead.appendChild(headRow);
+  }
+  function renderBody() {
+    tbody.replaceChildren();
+    for (const row of rows) {
+      const tr = document.createElement("tr");
+      for (const column of options.columns) {
+        const td = document.createElement("td");
+        const content = column.render ? column.render(row) : String(row[column.key] ?? "");
+        if (content instanceof HTMLElement) td.appendChild(content);
+        else td.textContent = content;
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+  }
+  renderHead();
+  renderBody();
+  table.append(thead, tbody);
+  wrap.appendChild(table);
+  const api = {
+    setRows(newRows) {
+      rows = newRows;
+      renderBody();
+    },
+    destroy() {
+      cleanupListeners.splice(0).forEach((fn) => fn());
+      wrap.remove();
+    }
+  };
+  return attachController(wrap, api);
+}
+
+// src/components/data/Tree.ts
+var treeCss = `
+.linteau-tree { display: flex; flex-direction: column; gap: 2px }
+.linteau-tree-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--linteau-radius-sm); cursor: pointer; font-size: 12px }
+.linteau-tree-row:hover { background: var(--linteau-accent) }
+.linteau-tree-chevron { transition: transform 150ms ease }
+.linteau-tree-chevron.linteau-open { transform: rotate(90deg) }
+.linteau-tree-children { margin-left: 18px; display: flex; flex-direction: column; gap: 2px }
+.linteau-tree-children.linteau-collapsed { display: none }
+`;
+function Tree(options) {
+  assertDom("Tree");
+  ensureComponentStyles("tree", treeCss);
+  const expanded = new Set(options.defaultExpanded ?? []);
+  const cleanupListeners = [];
+  const allValues = [];
+  const root = el("div", px("tree"));
+  function collectValues(nodes) {
+    for (const node of nodes) {
+      if (node.children?.length) {
+        allValues.push(node.value);
+        collectValues(node.children);
+      }
+    }
+  }
+  collectValues(options.nodes);
+  function renderNode(node, container) {
+    const hasChildren = Boolean(node.children?.length);
+    const isOpen = expanded.has(node.value);
+    const row = el("div", px("tree-row"));
+    if (hasChildren) {
+      const chevron = Icon(icons.chevronRight, 12, { className: cx(px("tree-chevron"), isOpen && px("open")) });
+      if (chevron) row.appendChild(chevron);
+    }
+    if (node.icon) row.appendChild(Icon(node.icon, 14, { className: px("icon") }));
+    const label = document.createElement("span");
+    label.textContent = node.label;
+    row.appendChild(label);
+    const childrenContainer = hasChildren ? el("div", cx(px("tree-children"), !isOpen && px("collapsed"))) : null;
+    const listener = () => {
+      if (hasChildren) {
+        if (expanded.has(node.value)) expanded.delete(node.value);
+        else expanded.add(node.value);
+        render();
+      }
+      options.onSelect?.(node.value);
+    };
+    row.addEventListener("click", listener);
+    cleanupListeners.push(() => row.removeEventListener("click", listener));
+    container.appendChild(row);
+    if (childrenContainer) {
+      for (const child of node.children ?? []) renderNode(child, childrenContainer);
+      container.appendChild(childrenContainer);
+    }
+  }
+  function render() {
+    root.replaceChildren();
+    cleanupListeners.splice(0).forEach((fn) => fn());
+    for (const node of options.nodes) renderNode(node, root);
+  }
+  render();
+  const api = {
+    expandAll() {
+      allValues.forEach((value) => expanded.add(value));
+      render();
+    },
+    collapseAll() {
+      expanded.clear();
+      render();
+    },
+    destroy() {
+      cleanupListeners.splice(0).forEach((fn) => fn());
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/feedback/Alert.ts
+var alertCss = `
+.linteau-alert { display: flex; gap: 10px; padding: 12px; border-radius: var(--linteau-radius-lg); border: 1px solid var(--linteau-border); background: var(--linteau-muted) }
+.linteau-alert-success { border-color: var(--linteau-success) }
+.linteau-alert-warning { border-color: var(--linteau-warning) }
+.linteau-alert-destructive { border-color: var(--linteau-destructive) }
+.linteau-alert-body { flex: 1 }
+.linteau-alert-title { font-size: 13px; font-weight: 600; margin-bottom: 2px }
+.linteau-alert-description { font-size: 12px; color: var(--linteau-muted-foreground) }
+.linteau-alert-close { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; align-self: flex-start }
+`;
+var defaultIconByVariant = {
+  default: icons.info,
+  success: icons.check,
+  warning: icons.alertTriangle,
+  destructive: icons.alertTriangle
+};
+function Alert(description, options = {}) {
+  assertDom("Alert");
+  ensureComponentStyles("alert", alertCss);
+  const variant = options.variant ?? "default";
+  const root = el("div", cx(px("alert"), px(`alert-${variant}`)));
+  const iconEl = Icon(options.icon ?? defaultIconByVariant[variant], 18, { className: px("icon") });
+  if (iconEl) root.appendChild(iconEl);
+  const body = el("div", px("alert-body"));
+  if (options.title) {
+    const title = el("div", px("alert-title"));
+    title.textContent = options.title;
+    body.appendChild(title);
+  }
+  const descriptionEl = el("div", px("alert-description"));
+  descriptionEl.textContent = description;
+  body.appendChild(descriptionEl);
+  root.appendChild(body);
+  let closeListener = null;
+  if (options.dismissible) {
+    const closeButton = el("button", px("alert-close"));
+    closeButton.type = "button";
+    const closeIcon = Icon(icons.x, 14);
+    if (closeIcon) closeButton.appendChild(closeIcon);
+    closeListener = () => {
+      options.onDismiss?.();
+      root.remove();
+    };
+    closeButton.addEventListener("click", closeListener);
+    root.appendChild(closeButton);
+  }
+  const api = {
+    setDescription(description2) {
+      descriptionEl.textContent = description2;
+    },
+    destroy() {
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/feedback/ProgressBar.ts
+var progressBarCss = `
+.linteau-progress-overlay { position: fixed; inset: 0; background: color-mix(in oklch, black 55%, transparent); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px) }
+.linteau-progress-card { width: 280px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); padding: 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) }
+.linteau-progress-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--linteau-foreground) }
+.linteau-progress-track { width: 100%; height: 8px; border-radius: 999px; background: var(--linteau-secondary); overflow: hidden; position: relative }
+.linteau-progress-fill { height: 100%; width: 0%; background: var(--linteau-primary); border-radius: 999px; transition: width 180ms ease }
+.linteau-progress-fill.linteau-indeterminate { width: 40% !important; animation: linteau-progress-slide 1.1s ease-in-out infinite }
+@keyframes linteau-progress-slide { 0% { transform: translateX(-100%) } 100% { transform: translateX(250%) } }
+.linteau-progress-percent { margin-top: 8px; font-size: 12px; color: var(--linteau-muted-foreground); text-align: right; font-variant-numeric: tabular-nums }
+`;
+function ProgressBar(options = {}) {
+  assertDom("ProgressBar");
+  ensureComponentStyles("progress-bar", progressBarCss);
+  const { title = "", value = 0, indeterminate = false, visible = false } = options;
+  const root = el("div", cx(px("progress-overlay"), !visible && px("hidden")));
+  const card = el("div", px("progress-card"));
+  const titleEl = el("div", px("progress-title"));
+  titleEl.textContent = title;
+  const track = el("div", px("progress-track"));
+  const fill = el("div", cx(px("progress-fill"), indeterminate && px("indeterminate")));
+  track.appendChild(fill);
+  const percentLabel = el("div", px("progress-percent"));
+  percentLabel.textContent = indeterminate ? "Working..." : `${Math.round(value)}%`;
+  card.append(titleEl, track, percentLabel);
+  root.appendChild(card);
+  fill.style.width = `${Math.max(0, Math.min(100, value))}%`;
+  const api = {
+    setValue(percent, label) {
+      const clamped = Math.max(0, Math.min(100, percent));
+      fill.classList.remove(px("indeterminate"));
+      fill.style.width = `${clamped}%`;
+      percentLabel.textContent = label ?? `${Math.round(clamped)}%`;
+    },
+    setIndeterminate(value2) {
+      fill.classList.toggle(px("indeterminate"), value2);
+      if (value2) percentLabel.textContent = "Working...";
+    },
+    setTitle(newTitle) {
+      titleEl.textContent = newTitle;
+    },
+    show() {
+      root.classList.remove(px("hidden"));
+    },
+    hide() {
+      root.classList.add(px("hidden"));
+    },
+    destroy() {
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/feedback/Skeleton.ts
+var skeletonCss = `
+.linteau-skeleton { background: linear-gradient(90deg, var(--linteau-secondary) 25%, var(--linteau-accent) 37%, var(--linteau-secondary) 63%); background-size: 400% 100%; animation: linteau-skeleton-shine 1.4s ease infinite; border-radius: var(--linteau-radius-sm) }
+@keyframes linteau-skeleton-shine { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
+`;
+function Skeleton(options = {}) {
+  assertDom("Skeleton");
+  ensureComponentStyles("skeleton", skeletonCss);
+  const root = el("div", px("skeleton"));
+  root.style.width = typeof options.width === "number" ? `${options.width}px` : options.width ?? "100%";
+  root.style.height = typeof options.height === "number" ? `${options.height}px` : options.height ?? "1em";
+  if (options.radius) root.style.borderRadius = options.radius;
+  const api = {
+    destroy() {
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/feedback/Spinner.ts
+var spinnerCss = `
+.linteau-spinner { animation: linteau-spin 0.8s linear infinite; color: var(--linteau-muted-foreground) }
+@keyframes linteau-spin { to { transform: rotate(360deg) } }
+`;
+function Spinner(options = {}) {
+  assertDom("Spinner");
+  ensureComponentStyles("spinner", spinnerCss);
+  const size = options.size ?? 16;
+  const svg = Icon(icons.loader, size, { className: px("spinner"), color: options.color });
+  const api = {
+    setSize(newSize) {
+      svg.setAttribute("width", String(newSize));
+      svg.setAttribute("height", String(newSize));
+    },
+    destroy() {
+      svg.remove();
+    }
+  };
+  return attachController(svg, api);
+}
+
+// src/components/feedback/Toast.ts
+var toastCss = `
+.linteau-toast-viewport { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 1400; width: min(340px, 92vw) }
+.linteau-toast { display: flex; gap: 8px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-left: 3px solid var(--linteau-primary); border-radius: var(--linteau-radius-md); padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }
+.linteau-toast-success { border-left-color: var(--linteau-success) }
+.linteau-toast-warning { border-left-color: var(--linteau-warning) }
+.linteau-toast-destructive { border-left-color: var(--linteau-destructive) }
+.linteau-toast-body { flex: 1 }
+.linteau-toast-title { font-size: 12px; font-weight: 600 }
+.linteau-toast-description { font-size: 12px; color: var(--linteau-muted-foreground); margin-top: 2px }
+.linteau-toast-close { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; align-self: flex-start }
+`;
+var idCounter = 0;
+function createToastManager() {
+  assertDom("ToastManager");
+  ensureComponentStyles("toast", toastCss);
+  let viewport = null;
+  const timers = /* @__PURE__ */ new Map();
+  function ensureViewport() {
+    if (!viewport) {
+      viewport = el("div", px("toast-viewport"));
+      document.body.appendChild(viewport);
+    }
+    return viewport;
+  }
+  function dismiss(id) {
+    const timer = timers.get(id);
+    if (timer) clearTimeout(timer);
+    timers.delete(id);
+    document.getElementById(id)?.remove();
+  }
+  function show(options) {
+    const id = `linteau-toast-${++idCounter}`;
+    const variant = options.variant ?? "default";
+    const duration = options.duration ?? 4e3;
+    const toastEl = el("div", cx(px("toast"), px(`toast-${variant}`)));
+    toastEl.id = id;
+    const body = el("div", px("toast-body"));
+    if (options.title) {
+      const title = el("div", px("toast-title"));
+      title.textContent = options.title;
+      body.appendChild(title);
+    }
+    if (options.description) {
+      const description = el("div", px("toast-description"));
+      description.textContent = options.description;
+      body.appendChild(description);
+    }
+    const closeButton = el("button", px("toast-close"));
+    closeButton.type = "button";
+    const closeIcon = Icon(icons.x, 14);
+    if (closeIcon) closeButton.appendChild(closeIcon);
+    closeButton.addEventListener("click", () => dismiss(id));
+    toastEl.append(body, closeButton);
+    ensureViewport().appendChild(toastEl);
+    if (duration > 0) timers.set(id, setTimeout(() => dismiss(id), duration));
+    return id;
+  }
+  return {
+    show,
+    dismiss,
+    clear() {
+      timers.forEach((timer) => clearTimeout(timer));
+      timers.clear();
+      viewport?.replaceChildren();
+    },
+    destroy() {
+      timers.forEach((timer) => clearTimeout(timer));
+      timers.clear();
+      viewport?.remove();
+      viewport = null;
+    }
+  };
+}
+var toast = createToastManager();
+
+// src/components/field/shared.ts
+var fieldBaseCss = `
+.linteau-field { display: flex; flex-direction: column; gap: 6px; width: 100% }
+.linteau-field-row { display: flex; align-items: center; justify-content: space-between }
+.linteau-field-label { display: flex; align-items: center; gap: 6px; color: var(--linteau-foreground) }
+.linteau-field-value { color: var(--linteau-muted-foreground); font-variant-numeric: tabular-nums }
+.linteau-field-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px }
+`;
+
+// src/components/field/ColorField.ts
+var swatchCss = `
+.linteau-swatch { --linteau-swatch-color: #ffffff; width: 28px; height: 28px; border-radius: var(--linteau-radius-sm); background: var(--linteau-swatch-color); border: 1px solid var(--linteau-border); cursor: pointer; display: block; position: relative; overflow: hidden; transition: transform 120ms ease }
+.linteau-swatch:hover { transform: scale(1.06) }
+.linteau-swatch input[type='color'] { position: absolute; inset: 0; opacity: 0; cursor: pointer }
+`;
+function ColorField(options) {
+  assertDom("ColorField");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("swatch", swatchCss);
+  let value = options.value ?? options.defaultValue ?? "#ffffff";
+  const onChange = options.onChange;
+  const root = el("div", px("field-row"));
+  const labelWrap = el("div", px("field-label"));
+  if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+  const labelText = document.createElement("span");
+  labelText.textContent = options.label;
+  labelWrap.appendChild(labelText);
+  const swatch = el("label", px("swatch"));
+  swatch.style.setProperty("--linteau-swatch-color", value);
+  const input = el("input", void 0);
+  input.type = "color";
+  input.value = value;
+  input.disabled = options.disabled ?? false;
+  const listener = () => {
+    value = input.value;
+    swatch.style.setProperty("--linteau-swatch-color", value);
+    onChange?.(value);
+  };
+  input.addEventListener("input", listener);
+  swatch.appendChild(input);
+  root.append(labelWrap, swatch);
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      input.value = newValue;
+      swatch.style.setProperty("--linteau-swatch-color", newValue);
+    },
+    setDisabled(disabled) {
+      input.disabled = disabled;
+    },
+    destroy() {
+      input.removeEventListener("input", listener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/field/textInput.css.ts
+var textInputCss = `
+.linteau-text-input, .linteau-textarea {
+  width: 100%;
+  background: var(--linteau-secondary);
+  color: var(--linteau-foreground);
+  border: 1px solid var(--linteau-border);
+  border-radius: var(--linteau-radius-sm);
+  padding: 8px 10px;
+  font-size: 12px;
+  font-family: inherit;
+  transition: border-color 120ms ease;
+}
+.linteau-text-input:focus, .linteau-textarea:focus {
+  outline: none;
+  border-color: var(--linteau-ring);
+  box-shadow: 0 0 0 2px color-mix(in oklch, var(--linteau-ring) 20%, transparent);
+}
+.linteau-text-input:disabled, .linteau-textarea:disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-textarea { resize: vertical; min-height: 72px }
+`;
+
+// src/components/field/NumberField.ts
+function NumberField(options = {}) {
+  assertDom("NumberField");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("text-input", textInputCss);
+  const onChange = options.onChange;
+  const root = el("div", px("field"));
+  if (options.label) {
+    const header = el("div", px("field-header"));
+    const labelWrap = el("div", px("field-label"));
+    if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+    const labelText = document.createElement("span");
+    labelText.textContent = options.label;
+    labelWrap.appendChild(labelText);
+    header.appendChild(labelWrap);
+    root.appendChild(header);
+  }
+  const input = el("input", px("text-input"));
+  input.type = "number";
+  if (options.min !== void 0) input.min = String(options.min);
+  if (options.max !== void 0) input.max = String(options.max);
+  input.step = String(options.step ?? 1);
+  input.value = String(options.value ?? options.defaultValue ?? 0);
+  input.disabled = options.disabled ?? false;
+  function clamp(value) {
+    let result = value;
+    if (options.min !== void 0) result = Math.max(options.min, result);
+    if (options.max !== void 0) result = Math.min(options.max, result);
+    return result;
+  }
+  const listener = () => {
+    const parsed = Number(input.value);
+    if (!Number.isNaN(parsed)) onChange?.(parsed);
+  };
+  input.addEventListener("input", listener);
+  root.appendChild(input);
+  const api = {
+    getValue() {
+      return Number(input.value);
+    },
+    setValue(value) {
+      input.value = String(clamp(value));
+    },
+    setDisabled(disabled) {
+      input.disabled = disabled;
+    },
+    destroy() {
+      input.removeEventListener("input", listener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/field/TextArea.ts
+function TextArea(options = {}) {
+  assertDom("TextArea");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("text-input", textInputCss);
+  const onChange = options.onChange;
+  const root = el("div", px("field"));
+  if (options.label) {
+    const header = el("div", px("field-header"));
+    const labelWrap = el("div", px("field-label"));
+    if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+    const labelText = document.createElement("span");
+    labelText.textContent = options.label;
+    labelWrap.appendChild(labelText);
+    header.appendChild(labelWrap);
+    root.appendChild(header);
+  }
+  const textarea = el("textarea", px("textarea"));
+  textarea.placeholder = options.placeholder ?? "";
+  textarea.rows = options.rows ?? 3;
+  textarea.value = options.value ?? options.defaultValue ?? "";
+  textarea.disabled = options.disabled ?? false;
+  const listener = () => onChange?.(textarea.value);
+  textarea.addEventListener("input", listener);
+  root.appendChild(textarea);
+  const api = {
+    getValue() {
+      return textarea.value;
+    },
+    setValue(value) {
+      textarea.value = value;
+    },
+    setDisabled(disabled) {
+      textarea.disabled = disabled;
+    },
+    destroy() {
+      textarea.removeEventListener("input", listener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/field/TextField.ts
+function TextField(options = {}) {
+  assertDom("TextField");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("text-input", textInputCss);
+  const onChange = options.onChange;
+  const root = el("div", px("field"));
+  if (options.label) {
+    const header = el("div", px("field-header"));
+    const labelWrap = el("div", px("field-label"));
+    if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+    const labelText = document.createElement("span");
+    labelText.textContent = options.label;
+    labelWrap.appendChild(labelText);
+    header.appendChild(labelWrap);
+    root.appendChild(header);
+  }
+  const input = el("input", px("text-input"));
+  input.type = options.type ?? "text";
+  input.placeholder = options.placeholder ?? "";
+  input.value = options.value ?? options.defaultValue ?? "";
+  input.disabled = options.disabled ?? false;
+  const inputListener = () => onChange?.(input.value);
+  const keyListener = (event) => {
+    if (event.key === "Enter") options.onEnter?.(input.value);
+  };
+  input.addEventListener("input", inputListener);
+  input.addEventListener("keydown", keyListener);
+  root.appendChild(input);
+  const api = {
+    getValue() {
+      return input.value;
+    },
+    setValue(value) {
+      input.value = value;
+    },
+    setDisabled(disabled) {
+      input.disabled = disabled;
+    },
+    focus() {
+      input.focus();
+    },
+    destroy() {
+      input.removeEventListener("input", inputListener);
+      input.removeEventListener("keydown", keyListener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/core/content.ts
+function fillContent(target, content) {
+  target.replaceChildren();
+  if (content instanceof HTMLElement) target.appendChild(content);
+  else target.textContent = content;
+}
+
+// src/components/hovercard/HoverCard.ts
+var hoverCardCss = `
+.linteau-hover-card { position: fixed; z-index: 1200; width: 280px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-md); padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font-size: 12px; color: var(--linteau-foreground) }
+`;
+function HoverCard(options) {
+  assertDom("HoverCard");
+  ensureComponentStyles("hover-card", hoverCardCss);
+  const { anchor, placement = "bottom" } = options;
+  const openDelay = options.openDelay ?? 300;
+  const closeDelay = options.closeDelay ?? 150;
+  let openTimer = null;
+  let closeTimer = null;
+  let isVisible = false;
+  const card = el("div", cx(px("hover-card"), px("hidden")));
+  fillContent(card, options.content);
+  function clearTimers() {
+    if (openTimer) clearTimeout(openTimer);
+    if (closeTimer) clearTimeout(closeTimer);
+    openTimer = null;
+    closeTimer = null;
+  }
+  function showNow() {
+    clearTimers();
+    if (isVisible) return;
+    isVisible = true;
+    document.body.appendChild(card);
+    card.classList.remove(px("hidden"));
+    positionFloating(anchor, card, placement);
+  }
+  function hideNow() {
+    clearTimers();
+    if (!isVisible) return;
+    isVisible = false;
+    card.classList.add(px("hidden"));
+    card.remove();
+  }
+  function scheduleShow() {
+    if (closeTimer) clearTimeout(closeTimer);
+    closeTimer = null;
+    if (isVisible || openTimer) return;
+    openTimer = setTimeout(showNow, openDelay);
+  }
+  function scheduleHide() {
+    if (openTimer) clearTimeout(openTimer);
+    openTimer = null;
+    if (!isVisible || closeTimer) return;
+    closeTimer = setTimeout(hideNow, closeDelay);
+  }
+  anchor.addEventListener("mouseenter", scheduleShow);
+  anchor.addEventListener("mouseleave", scheduleHide);
+  anchor.addEventListener("focus", scheduleShow);
+  anchor.addEventListener("blur", scheduleHide);
+  card.addEventListener("mouseenter", () => {
+    if (closeTimer) clearTimeout(closeTimer);
+    closeTimer = null;
+  });
+  card.addEventListener("mouseleave", scheduleHide);
+  return {
+    setContent(content) {
+      fillContent(card, content);
+    },
+    open: showNow,
+    close: hideNow,
+    destroy() {
+      clearTimers();
+      anchor.removeEventListener("mouseenter", scheduleShow);
+      anchor.removeEventListener("mouseleave", scheduleHide);
+      anchor.removeEventListener("focus", scheduleShow);
+      anchor.removeEventListener("blur", scheduleHide);
+      card.remove();
+    }
+  };
+}
+
+// src/components/input/ChipInput.ts
+var chipInputCss = `
+.linteau-chip-field { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; background: var(--linteau-secondary); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-sm) }
+.linteau-chip-field:focus-within { border-color: var(--linteau-ring) }
+.linteau-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--linteau-accent); color: var(--linteau-accent-foreground); border-radius: 999px; padding: 3px 8px; font-size: 11px }
+.linteau-chip-remove { background: transparent; border: none; color: inherit; cursor: pointer; display: flex; padding: 0 }
+.linteau-chip-input { flex: 1; min-width: 80px; background: transparent; border: none; color: var(--linteau-foreground); font-size: 12px; font-family: inherit; outline: none }
+`;
+function ChipInput(options = {}) {
+  assertDom("ChipInput");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("chip-input", chipInputCss);
+  let chips = options.value ?? options.defaultValue ?? [];
+  const onChange = options.onChange;
+  const cleanupChipListeners = [];
+  const root = el("div", px("field"));
+  if (options.label) {
+    const header = el("div", px("field-header"));
+    const labelWrap = el("div", px("field-label"));
+    if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+    const labelText = document.createElement("span");
+    labelText.textContent = options.label;
+    labelWrap.appendChild(labelText);
+    header.appendChild(labelWrap);
+    root.appendChild(header);
+  }
+  const fieldWrap = el("div", px("chip-field"));
+  const input = el("input", px("chip-input"));
+  input.type = "text";
+  input.placeholder = options.placeholder ?? "";
+  fieldWrap.appendChild(input);
+  function renderChips() {
+    Array.from(fieldWrap.children).forEach((child) => {
+      if (child !== input) child.remove();
+    });
+    cleanupChipListeners.splice(0).forEach((fn) => fn());
+    chips.forEach((value, index) => {
+      const chip = el("span", px("chip"));
+      const label = document.createElement("span");
+      label.textContent = value;
+      const removeButton = el("button", px("chip-remove"));
+      removeButton.type = "button";
+      const removeIcon = Icon(icons.x, 10);
+      if (removeIcon) removeButton.appendChild(removeIcon);
+      const listener = () => {
+        chips = chips.filter((_, i) => i !== index);
+        renderChips();
+        onChange?.(chips);
+      };
+      removeButton.addEventListener("click", listener);
+      cleanupChipListeners.push(() => removeButton.removeEventListener("click", listener));
+      chip.append(label, removeButton);
+      fieldWrap.insertBefore(chip, input);
+    });
+  }
+  renderChips();
+  const keyListener = (event) => {
+    if (event.key === "Enter" && input.value.trim()) {
+      event.preventDefault();
+      chips = [...chips, input.value.trim()];
+      input.value = "";
+      renderChips();
+      onChange?.(chips);
+    } else if (event.key === "Backspace" && !input.value && chips.length > 0) {
+      chips = chips.slice(0, -1);
+      renderChips();
+      onChange?.(chips);
+    }
+  };
+  input.addEventListener("keydown", keyListener);
+  root.appendChild(fieldWrap);
+  const api = {
+    getValue() {
+      return chips;
+    },
+    setValue(newValue) {
+      chips = newValue;
+      renderChips();
+    },
+    destroy() {
+      input.removeEventListener("keydown", keyListener);
+      cleanupChipListeners.splice(0).forEach((fn) => fn());
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/select/Combobox.ts
+var comboboxCss = `
+.linteau-combobox { position: relative; display: flex; align-items: center }
+.linteau-combobox-input { padding-right: 28px }
+.linteau-combobox-chevron { position: absolute; right: 8px; pointer-events: none; color: var(--linteau-muted-foreground) }
+.linteau-combobox-list { position: fixed; z-index: 1200; min-width: 180px; max-height: 220px; overflow-y: auto; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-md); padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }
+.linteau-combobox-option { padding: 6px 8px; border-radius: var(--linteau-radius-sm); font-size: 12px; cursor: pointer; color: var(--linteau-foreground) }
+.linteau-combobox-option-highlighted, .linteau-combobox-option:hover { background: var(--linteau-accent) }
+`;
+function Combobox(options) {
+  assertDom("Combobox");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("text-input", textInputCss);
+  ensureComponentStyles("combobox", comboboxCss);
+  let items = options.options;
+  let value = options.value ?? options.defaultValue ?? "";
+  let query = items.find((item) => item.value === value)?.label ?? "";
+  let isOpen = false;
+  let highlighted = 0;
+  let unbindOutside = null;
+  const onChange = options.onChange;
+  const root = el("div", px("field"));
+  const header = el("div", px("field-header"));
+  const labelWrap = el("div", px("field-label"));
+  if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+  const labelText = document.createElement("span");
+  labelText.textContent = options.label;
+  labelWrap.appendChild(labelText);
+  header.appendChild(labelWrap);
+  const wrap = el("div", px("combobox"));
+  const input = el("input", cx(px("text-input"), px("combobox-input")));
+  input.type = "text";
+  input.placeholder = options.placeholder ?? "";
+  input.value = query;
+  input.disabled = options.disabled ?? false;
+  const chevron = Icon(icons.chevronDown, 12, { className: px("combobox-chevron") });
+  const list = el("div", cx(px("combobox-list"), px("hidden")));
+  function filtered() {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return items;
+    return items.filter((item) => item.label.toLowerCase().includes(normalized));
+  }
+  function renderList() {
+    list.replaceChildren();
+    filtered().forEach((item, index) => {
+      const optionEl = el("div", cx(px("combobox-option"), index === highlighted && px("combobox-option-highlighted")));
+      optionEl.textContent = item.label;
+      optionEl.addEventListener("mousedown", (event) => {
+        event.preventDefault();
+        select(item);
+      });
+      list.appendChild(optionEl);
+    });
+  }
+  function select(item) {
+    value = item.value;
+    query = item.label;
+    input.value = query;
+    close();
+    onChange?.(value);
+  }
+  function open() {
+    if (isOpen || input.disabled) return;
+    isOpen = true;
+    highlighted = 0;
+    document.body.appendChild(list);
+    list.classList.remove(px("hidden"));
+    renderList();
+    positionFloating(wrap, list, "bottom");
+    unbindOutside = onClickOutside([wrap, list], close);
+  }
+  function close() {
+    if (!isOpen) return;
+    isOpen = false;
+    list.classList.add(px("hidden"));
+    list.remove();
+    unbindOutside?.();
+    unbindOutside = null;
+  }
+  const inputListener = () => {
+    query = input.value;
+    highlighted = 0;
+    if (!isOpen) open();
+    else renderList();
+  };
+  const keyListener = (event) => {
+    const results = filtered();
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      highlighted = Math.min(highlighted + 1, results.length - 1);
+      renderList();
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      highlighted = Math.max(highlighted - 1, 0);
+      renderList();
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      const item = results[highlighted];
+      if (item) select(item);
+    } else if (event.key === "Escape") {
+      close();
+    }
+  };
+  const focusListener = () => open();
+  input.addEventListener("input", inputListener);
+  input.addEventListener("keydown", keyListener);
+  input.addEventListener("focus", focusListener);
+  wrap.append(input, chevron);
+  root.append(header, wrap);
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      query = items.find((item) => item.value === newValue)?.label ?? "";
+      input.value = query;
+    },
+    setOptions(newOptions) {
+      items = newOptions;
+      if (isOpen) renderList();
+    },
+    open,
+    close,
+    destroy() {
+      input.removeEventListener("input", inputListener);
+      input.removeEventListener("keydown", keyListener);
+      input.removeEventListener("focus", focusListener);
+      unbindOutside?.();
+      list.remove();
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/input/DatePicker.ts
+var calendarCss = `
+.linteau-calendar { position: fixed; z-index: 1200; width: 280px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }
+.linteau-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px }
+.linteau-calendar-nav { background: transparent; border: none; color: var(--linteau-foreground); cursor: pointer; display: flex; padding: 4px; border-radius: var(--linteau-radius-sm) }
+.linteau-calendar-nav:hover:not(:disabled) { background: var(--linteau-accent) }
+.linteau-calendar-nav:disabled { opacity: 0.35; cursor: not-allowed }
+.linteau-calendar-month { font-size: 12px; font-weight: 600 }
+.linteau-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px }
+.linteau-calendar-weekday { height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--linteau-muted-foreground); text-transform: uppercase }
+.linteau-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }
+.linteau-calendar-day { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 11px; border-radius: var(--linteau-radius-sm); background: transparent; border: none; color: var(--linteau-foreground); cursor: pointer; font-family: inherit }
+.linteau-calendar-day:hover:not(:disabled) { background: var(--linteau-accent) }
+.linteau-calendar-day:disabled { opacity: 0.35; cursor: not-allowed }
+.linteau-calendar-day:focus-visible { outline: 2px solid var(--linteau-ring); outline-offset: 1px }
+.linteau-calendar-day-outside { opacity: 0.35 }
+.linteau-calendar-day-selected { background: var(--linteau-primary); color: var(--linteau-primary-foreground) }
+.linteau-calendar-day-today:not(.linteau-calendar-day-selected) { box-shadow: inset 0 0 0 1px var(--linteau-ring) }
+.linteau-calendar-day-in-range { background: var(--linteau-accent); border-radius: 0 }
+.linteau-calendar-day-range-start { background: var(--linteau-primary); color: var(--linteau-primary-foreground); border-radius: var(--linteau-radius-sm) 0 0 var(--linteau-radius-sm) }
+.linteau-calendar-day-range-end { background: var(--linteau-primary); color: var(--linteau-primary-foreground); border-radius: 0 var(--linteau-radius-sm) var(--linteau-radius-sm) 0 }
+.linteau-calendar-footer { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linteau-border) }
+.linteau-calendar-footer-button { flex: 1; padding: 6px 8px; font-size: 11px; border-radius: var(--linteau-radius-sm); border: 1px solid var(--linteau-border); background: transparent; color: var(--linteau-foreground); cursor: pointer; font-family: inherit }
+.linteau-calendar-footer-button:hover { background: var(--linteau-accent) }
+.linteau-combobox-input-clearable { padding-right: 46px }
+.linteau-combobox-clear { position: absolute; right: 26px; color: var(--linteau-muted-foreground); background: transparent; border: none; cursor: pointer; display: flex; padding: 2px }
+.linteau-combobox-clear:hover { color: var(--linteau-foreground) }
+`;
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function addMonths(date, count) {
+  return new Date(date.getFullYear(), date.getMonth() + count, 1);
+}
+function addDays(date, count) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + count);
+}
+function isRange(value) {
+  return Boolean(value) && typeof value === "object" && "from" in value;
+}
+function buildWeekdayLabels(weekStartsOn) {
+  const base = new Date(2021, 0, 3);
+  const labels = [];
+  for (let i = 0; i < 7; i++) {
+    const day = new Date(base.getFullYear(), base.getMonth(), base.getDate() + i + weekStartsOn);
+    labels.push(day.toLocaleDateString(void 0, { weekday: "short" }).slice(0, 2));
+  }
+  return labels;
+}
+function getCalendarDays(viewDate, weekStartsOn) {
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+  const lastOfMonth = new Date(year, month + 1, 0);
+  const leadingOffset = (firstOfMonth.getDay() - weekStartsOn + 7) % 7;
+  const trailingOffset = (weekStartsOn + 6 - lastOfMonth.getDay() + 7) % 7;
+  const days = [];
+  for (let i = leadingOffset; i > 0; i--) days.push({ date: new Date(year, month, 1 - i), inCurrentMonth: false });
+  for (let day = 1; day <= lastOfMonth.getDate(); day++) days.push({ date: new Date(year, month, day), inCurrentMonth: true });
+  for (let i = 1; i <= trailingOffset; i++) days.push({ date: new Date(year, month + 1, i), inCurrentMonth: false });
+  return days;
+}
+function DatePicker(options = {}) {
+  assertDom("DatePicker");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("text-input", textInputCss);
+  ensureComponentStyles("combobox", comboboxCss);
+  ensureComponentStyles("calendar", calendarCss);
+  const mode = options.mode ?? "single";
+  const weekStartsOn = options.weekStartsOn ?? 0;
+  const min = options.min;
+  const max = options.max;
+  const format = options.format ?? ((date) => date.toLocaleDateString());
+  const onChange = options.onChange;
+  const showTodayButton = options.showTodayButton ?? true;
+  const showClearButton = options.showClearButton ?? true;
+  let value = options.value ?? options.defaultValue;
+  let rangeAnchor = null;
+  let viewDate = (isRange(value) ? value.from : value) ?? /* @__PURE__ */ new Date();
+  let focusedDate = viewDate;
+  let isOpen = false;
+  let unbindOutside = null;
+  let unbindEscape = null;
+  const dayButtonsByTime = /* @__PURE__ */ new Map();
+  function formatValue(v) {
+    if (!v) return "";
+    if (isRange(v)) return v.to ? `${format(v.from)} - ${format(v.to)}` : format(v.from);
+    return format(v);
+  }
+  function isDisabledDate(date) {
+    return Boolean(min && date < min || max && date > max);
+  }
+  const root = el("div", px("field"));
+  if (options.label) {
+    const header = el("div", px("field-header"));
+    const labelWrap = el("div", px("field-label"));
+    if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+    const labelText = document.createElement("span");
+    labelText.textContent = options.label;
+    labelWrap.appendChild(labelText);
+    header.appendChild(labelWrap);
+    root.appendChild(header);
+  }
+  const wrap = el("div", px("combobox"));
+  const input = el("input", cx(px("text-input"), px("combobox-input")));
+  input.type = "text";
+  input.readOnly = true;
+  input.value = formatValue(value);
+  input.placeholder = options.placeholder ?? (mode === "range" ? "Select a date range" : "Select a date");
+  input.disabled = options.disabled ?? false;
+  const clearButton = el("button", px("combobox-clear"));
+  clearButton.type = "button";
+  const clearIcon = Icon(icons.x, 12);
+  if (clearIcon) clearButton.appendChild(clearIcon);
+  const calendarIcon = Icon(icons.calendar, 14, { className: px("combobox-chevron") });
+  wrap.append(input, clearButton, calendarIcon);
+  root.appendChild(wrap);
+  function syncClearButton() {
+    const hasValue = Boolean(value);
+    clearButton.style.display = hasValue && showClearButton ? "flex" : "none";
+    input.classList.toggle(px("combobox-input-clearable"), hasValue && showClearButton);
+  }
+  syncClearButton();
+  const calendar2 = el("div", cx(px("calendar"), px("hidden")));
+  calendar2.setAttribute("role", "application");
+  function focusDayButton(date) {
+    dayButtonsByTime.get(new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime())?.focus();
+  }
+  function updateHoverPreview(hovered) {
+    if (mode !== "range" || !rangeAnchor) return;
+    for (const [time, button] of dayButtonsByTime) {
+      const date = new Date(time);
+      const inPreview = hovered ? date >= rangeAnchor && date <= hovered || date <= rangeAnchor && date >= hovered : false;
+      button.classList.toggle(px("calendar-day-in-range"), inPreview && !isSameDay(date, rangeAnchor));
+    }
+  }
+  function handleDayClick(date) {
+    if (isDisabledDate(date)) return;
+    if (mode === "range") {
+      if (!rangeAnchor) {
+        rangeAnchor = date;
+        value = { from: date };
+        input.value = formatValue(value);
+        renderCalendar();
+      } else {
+        const from = rangeAnchor <= date ? rangeAnchor : date;
+        const to = rangeAnchor <= date ? date : rangeAnchor;
+        value = { from, to };
+        rangeAnchor = null;
+        input.value = formatValue(value);
+        syncClearButton();
+        onChange?.(value);
+        close();
+      }
+    } else {
+      value = date;
+      input.value = formatValue(value);
+      syncClearButton();
+      onChange?.(value);
+      close();
+    }
+  }
+  function renderCalendar() {
+    calendar2.replaceChildren();
+    dayButtonsByTime.clear();
+    const header = el("div", px("calendar-header"));
+    const prevButton = el("button", px("calendar-nav"));
+    prevButton.type = "button";
+    prevButton.setAttribute("aria-label", "Previous month");
+    const prevIcon = Icon(icons.chevronLeft, 14);
+    if (prevIcon) prevButton.appendChild(prevIcon);
+    prevButton.disabled = Boolean(min && addMonths(viewDate, -1) < startOfMonth(min));
+    const nextButton = el("button", px("calendar-nav"));
+    nextButton.type = "button";
+    nextButton.setAttribute("aria-label", "Next month");
+    const nextIcon = Icon(icons.chevronRight, 14);
+    if (nextIcon) nextButton.appendChild(nextIcon);
+    nextButton.disabled = Boolean(max && addMonths(viewDate, 1) > startOfMonth(max));
+    const monthLabel = el("div", px("calendar-month"));
+    monthLabel.textContent = viewDate.toLocaleDateString(void 0, { month: "long", year: "numeric" });
+    prevButton.addEventListener("click", () => {
+      viewDate = addMonths(viewDate, -1);
+      renderCalendar();
+    });
+    nextButton.addEventListener("click", () => {
+      viewDate = addMonths(viewDate, 1);
+      renderCalendar();
+    });
+    header.append(prevButton, monthLabel, nextButton);
+    const weekdaysRow = el("div", px("calendar-weekdays"));
+    for (const label of buildWeekdayLabels(weekStartsOn)) {
+      const cell = el("div", px("calendar-weekday"));
+      cell.textContent = label;
+      weekdaysRow.appendChild(cell);
+    }
+    const grid = el("div", px("calendar-grid"));
+    const today = /* @__PURE__ */ new Date();
+    for (const { date, inCurrentMonth } of getCalendarDays(viewDate, weekStartsOn)) {
+      const dayButton = el("button", px("calendar-day"));
+      dayButton.type = "button";
+      dayButton.textContent = String(date.getDate());
+      dayButton.disabled = isDisabledDate(date);
+      dayButton.tabIndex = isSameDay(date, focusedDate) ? 0 : -1;
+      if (!inCurrentMonth) dayButton.classList.add(px("calendar-day-outside"));
+      if (isSameDay(date, today)) dayButton.classList.add(px("calendar-day-today"));
+      const currentValue = value;
+      if (currentValue && !isRange(currentValue) && isSameDay(date, currentValue)) {
+        dayButton.classList.add(px("calendar-day-selected"));
+        dayButton.setAttribute("aria-selected", "true");
+      }
+      if (currentValue && isRange(currentValue)) {
+        if (isSameDay(date, currentValue.from)) dayButton.classList.add(px("calendar-day-range-start"), px("calendar-day-selected"));
+        if (currentValue.to && isSameDay(date, currentValue.to)) dayButton.classList.add(px("calendar-day-range-end"), px("calendar-day-selected"));
+        if (currentValue.to && date > currentValue.from && date < currentValue.to) dayButton.classList.add(px("calendar-day-in-range"));
+      }
+      dayButton.addEventListener("click", () => {
+        focusedDate = date;
+        handleDayClick(date);
+      });
+      dayButton.addEventListener("mouseenter", () => updateHoverPreview(date));
+      dayButtonsByTime.set(new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime(), dayButton);
+      grid.appendChild(dayButton);
+    }
+    calendar2.append(header, weekdaysRow, grid);
+    if (showTodayButton || showClearButton) {
+      const footer = el("div", px("calendar-footer"));
+      if (showTodayButton) {
+        const todayButton = el("button", px("calendar-footer-button"));
+        todayButton.type = "button";
+        todayButton.textContent = "Today";
+        todayButton.addEventListener("click", () => {
+          viewDate = startOfMonth(/* @__PURE__ */ new Date());
+          focusedDate = /* @__PURE__ */ new Date();
+          renderCalendar();
+          focusDayButton(focusedDate);
+        });
+        footer.appendChild(todayButton);
+      }
+      if (showClearButton) {
+        const clearFooterButton = el("button", px("calendar-footer-button"));
+        clearFooterButton.type = "button";
+        clearFooterButton.textContent = "Clear";
+        clearFooterButton.addEventListener("click", () => {
+          value = void 0;
+          rangeAnchor = null;
+          input.value = "";
+          syncClearButton();
+          onChange?.(void 0);
+          renderCalendar();
+        });
+        footer.appendChild(clearFooterButton);
+      }
+      calendar2.appendChild(footer);
+    }
+  }
+  function handleKeydown(event) {
+    const deltas = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+    if (event.key in deltas) {
+      event.preventDefault();
+      focusedDate = addDays(focusedDate, deltas[event.key]);
+      if (focusedDate.getMonth() !== viewDate.getMonth() || focusedDate.getFullYear() !== viewDate.getFullYear()) viewDate = startOfMonth(focusedDate);
+      renderCalendar();
+      focusDayButton(focusedDate);
+    } else if (event.key === "PageUp") {
+      event.preventDefault();
+      viewDate = addMonths(viewDate, -1);
+      renderCalendar();
+    } else if (event.key === "PageDown") {
+      event.preventDefault();
+      viewDate = addMonths(viewDate, 1);
+      renderCalendar();
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleDayClick(focusedDate);
+    }
+  }
+  function open() {
+    if (isOpen || input.disabled) return;
+    isOpen = true;
+    viewDate = (isRange(value) ? value.from : value) ?? viewDate;
+    focusedDate = viewDate;
+    document.body.appendChild(calendar2);
+    calendar2.classList.remove(px("hidden"));
+    renderCalendar();
+    positionFloating(wrap, calendar2, "bottom");
+    calendar2.addEventListener("keydown", handleKeydown);
+    unbindOutside = onClickOutside([wrap, calendar2], close);
+    unbindEscape = onEscapeKey(close);
+  }
+  function close() {
+    if (!isOpen) return;
+    isOpen = false;
+    rangeAnchor = null;
+    calendar2.classList.add(px("hidden"));
+    calendar2.removeEventListener("keydown", handleKeydown);
+    calendar2.remove();
+    unbindOutside?.();
+    unbindOutside = null;
+    unbindEscape?.();
+    unbindEscape = null;
+  }
+  const toggleListener = () => isOpen ? close() : open();
+  input.addEventListener("click", toggleListener);
+  calendarIcon.addEventListener("click", toggleListener);
+  clearButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    value = void 0;
+    rangeAnchor = null;
+    input.value = "";
+    syncClearButton();
+    onChange?.(void 0);
+    if (isOpen) renderCalendar();
+  });
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      input.value = formatValue(newValue);
+      syncClearButton();
+    },
+    open,
+    close,
+    isOpen() {
+      return isOpen;
+    },
+    destroy() {
+      input.removeEventListener("click", toggleListener);
+      calendarIcon.removeEventListener("click", toggleListener);
+      unbindOutside?.();
+      unbindEscape?.();
+      calendar2.removeEventListener("keydown", handleKeydown);
+      calendar2.remove();
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/input/FileDropzone.ts
+var dropzoneCss = `
+.linteau-dropzone { border: 1px dashed var(--linteau-border); border-radius: var(--linteau-radius-lg); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer; color: var(--linteau-muted-foreground); transition: border-color 120ms ease, background 120ms ease }
+.linteau-dropzone:hover, .linteau-dropzone-active { border-color: var(--linteau-ring); background: var(--linteau-accent) }
+.linteau-dropzone-disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-dropzone-label { font-size: 12px }
+`;
+function FileDropzone(options) {
+  assertDom("FileDropzone");
+  ensureComponentStyles("dropzone", dropzoneCss);
+  const disabled = options.disabled ?? false;
+  const root = el("div", cx(px("dropzone"), disabled && px("dropzone-disabled")));
+  const icon = Icon(icons.upload, 22, { className: px("icon") });
+  if (icon) root.appendChild(icon);
+  const label = el("div", px("dropzone-label"));
+  label.textContent = options.label ?? "Drop files here or click to browse";
+  root.appendChild(label);
+  const input = document.createElement("input");
+  input.type = "file";
+  input.style.display = "none";
+  input.multiple = options.multiple ?? false;
+  if (options.accept) input.accept = options.accept;
+  input.disabled = disabled;
+  function emit(fileList) {
+    if (!fileList || fileList.length === 0) return;
+    options.onFiles(Array.from(fileList));
+  }
+  const clickListener = () => {
+    if (!disabled) input.click();
+  };
+  const changeListener = () => emit(input.files);
+  const dragOverListener = (event) => {
+    event.preventDefault();
+    if (!disabled) root.classList.add(px("dropzone-active"));
+  };
+  const dragLeaveListener = () => root.classList.remove(px("dropzone-active"));
+  const dropListener = (event) => {
+    event.preventDefault();
+    root.classList.remove(px("dropzone-active"));
+    if (!disabled) emit(event.dataTransfer?.files ?? null);
+  };
+  root.addEventListener("click", clickListener);
+  root.addEventListener("dragover", dragOverListener);
+  root.addEventListener("dragleave", dragLeaveListener);
+  root.addEventListener("drop", dropListener);
+  input.addEventListener("change", changeListener);
+  root.appendChild(input);
+  const api = {
+    reset() {
+      input.value = "";
+    },
+    destroy() {
+      root.removeEventListener("click", clickListener);
+      root.removeEventListener("dragover", dragOverListener);
+      root.removeEventListener("dragleave", dragLeaveListener);
+      root.removeEventListener("drop", dropListener);
+      input.removeEventListener("change", changeListener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/layout/Card.ts
+var cardCss = `
+.linteau-card { border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); background: var(--linteau-card); color: var(--linteau-card-foreground); overflow: hidden }
+.linteau-card-header { padding: 14px 16px; border-bottom: 1px solid var(--linteau-border); font-weight: 600 }
+.linteau-card-body { padding: 16px }
+.linteau-card-footer { padding: 12px 16px; border-top: 1px solid var(--linteau-border) }
+`;
+function Card(options = {}) {
+  assertDom("Card");
+  ensureComponentStyles("card", cardCss);
+  const root = el("div", px("card"));
+  const headerEl = el("div", px("card-header"));
+  const body = el("div", px("card-body"));
+  const footerEl = el("div", px("card-footer"));
+  function fill(target, content) {
+    target.replaceChildren();
+    if (content instanceof HTMLElement) target.appendChild(content);
+    else if (typeof content === "string") target.textContent = content;
+  }
+  function syncVisibility(target, content) {
+    target.style.display = content == null ? "none" : "";
+  }
+  fill(headerEl, options.header ?? null);
+  fill(footerEl, options.footer ?? null);
+  syncVisibility(headerEl, options.header ?? null);
+  syncVisibility(footerEl, options.footer ?? null);
+  root.append(headerEl, body, footerEl);
+  const api = {
+    body,
+    setHeader(content) {
+      fill(headerEl, content);
+      syncVisibility(headerEl, content);
+    },
+    setFooter(content) {
+      fill(footerEl, content);
+      syncVisibility(footerEl, content);
+    },
+    destroy() {
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/layout/Section.ts
+var sectionCss = `
+.linteau-section { border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); background: var(--linteau-muted); overflow: hidden; width: 100% }
+.linteau-section-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linteau-border); color: var(--linteau-muted-foreground); cursor: default }
+.linteau-section-header.linteau-section-collapsible { cursor: pointer }
+.linteau-section-header h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; flex: 1 }
+.linteau-section-actions { display: flex; align-items: center; gap: 6px }
+.linteau-section-body { padding: 12px; display: flex; flex-direction: column; gap: 12px }
+.linteau-section-body.linteau-collapsed { display: none }
+.linteau-section-chevron { transition: transform 150ms ease }
+.linteau-section-chevron.linteau-collapsed { transform: rotate(-90deg) }
+`;
+function Section(title, options = {}) {
+  assertDom("Section");
+  ensureComponentStyles("section", sectionCss);
+  const { icon, collapsible = false, defaultCollapsed = false, actions = [] } = options;
+  let collapsed = defaultCollapsed;
+  const root = el("div", px("section"));
+  const header = el("div", cx(px("section-header"), collapsible && px("section-collapsible")));
+  const titleEl = document.createElement("h3");
+  titleEl.textContent = title;
+  const body = el("div", cx(px("section-body"), collapsed && px("collapsed")));
+  const headerIcon = icon ? Icon(icon, 14, { className: px("icon") }) : null;
+  const chevron = collapsible ? Icon(icons.chevronDown, 14, { className: cx(px("icon"), px("section-chevron"), collapsed && px("collapsed")) }) : null;
+  const actionsWrap = el("div", px("section-actions"));
+  actionsWrap.append(...actions);
+  if (headerIcon) header.appendChild(headerIcon);
+  header.appendChild(titleEl);
+  if (actions.length) header.appendChild(actionsWrap);
+  if (chevron) header.appendChild(chevron);
+  root.append(header, body);
+  function applyCollapsed() {
+    body.classList.toggle(px("collapsed"), collapsed);
+    chevron?.classList.toggle(px("collapsed"), collapsed);
+  }
+  const clickListener = () => {
+    collapsed = !collapsed;
+    applyCollapsed();
+  };
+  if (collapsible) header.addEventListener("click", clickListener);
+  const api = {
+    header,
+    body,
+    setTitle(newTitle) {
+      titleEl.textContent = newTitle;
+    },
+    setCollapsed(value) {
+      collapsed = value;
+      applyCollapsed();
+    },
+    isCollapsed() {
+      return collapsed;
+    },
+    destroy() {
+      if (collapsible) header.removeEventListener("click", clickListener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/layout/Separator.ts
+var separatorCss = `
+.linteau-separator { background: var(--linteau-border); border: none; flex-shrink: 0 }
+.linteau-separator-horizontal { width: 100%; height: 1px }
+.linteau-separator-vertical { width: 1px; height: 100% }
+`;
+function Separator(options = {}) {
+  assertDom("Separator");
+  ensureComponentStyles("separator", separatorCss);
+  let orientation = options.orientation ?? "horizontal";
+  const hr = el("hr", cx(px("separator"), px(`separator-${orientation}`)));
+  hr.setAttribute("role", "separator");
+  const api = {
+    setOrientation(newOrientation) {
+      hr.classList.remove(px(`separator-${orientation}`));
+      orientation = newOrientation;
+      hr.classList.add(px(`separator-${orientation}`));
+    },
+    destroy() {
+      hr.remove();
+    }
+  };
+  return attachController(hr, api);
+}
+
+// src/components/misc/ModeCard.ts
+var modeCardCss = `
+.linteau-mode-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); color: var(--linteau-foreground); cursor: pointer; text-align: left; font-family: inherit; transition: border-color 120ms ease, transform 120ms ease }
+.linteau-mode-card:hover:not(.linteau-locked) { border-color: var(--linteau-ring); transform: translateY(-2px) }
+.linteau-mode-card.linteau-selected { border-color: var(--linteau-primary); box-shadow: 0 0 0 1px var(--linteau-primary) }
+.linteau-mode-card.linteau-locked { opacity: 0.45; cursor: not-allowed }
+.linteau-mode-card-icon { color: var(--linteau-foreground) }
+.linteau-mode-card-title { font-weight: 600; font-size: 13px }
+.linteau-mode-card-description { font-size: 11px; color: var(--linteau-muted-foreground) }
+`;
+function ModeCard(options) {
+  assertDom("ModeCard");
+  ensureComponentStyles("mode-card", modeCardCss);
+  let locked = options.locked ?? false;
+  let selected = options.selected ?? false;
+  const lockedMessage = options.lockedMessage ?? "Coming in the next update";
+  const root = el("button", px("mode-card"));
+  root.type = "button";
+  const iconWrap = el("div", px("mode-card-icon"));
+  const textWrap = el("div", px("mode-card-text"));
+  const titleEl = el("div", px("mode-card-title"));
+  titleEl.textContent = options.label;
+  const descEl = el("div", px("mode-card-description"));
+  textWrap.append(titleEl, descEl);
+  function render() {
+    iconWrap.replaceChildren();
+    const iconEl = Icon(locked ? icons.lock : options.icon, 20, { className: px("icon") });
+    if (iconEl) iconWrap.appendChild(iconEl);
+    descEl.textContent = locked ? lockedMessage : options.description;
+    root.classList.toggle(px("locked"), locked);
+    root.classList.toggle(px("selected"), selected);
+    root.disabled = locked;
+  }
+  render();
+  root.append(iconWrap, textWrap);
+  const listener = () => {
+    if (locked) return;
+    options.onSelect?.();
+  };
+  root.addEventListener("click", listener);
+  const api = {
+    isSelected() {
+      return selected;
+    },
+    setSelected(value) {
+      selected = value;
+      render();
+    },
+    setLocked(value) {
+      locked = value;
+      render();
+    },
+    destroy() {
+      root.removeEventListener("click", listener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/navigation/Accordion.ts
+var accordionCss = `
+.linteau-accordion { display: flex; flex-direction: column; gap: 8px; width: 100% }
+.linteau-accordion-item { border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); overflow: hidden }
+.linteau-accordion-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px; background: var(--linteau-muted); border: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--linteau-foreground); font-family: inherit }
+.linteau-accordion-chevron { margin-left: auto; transition: transform 150ms ease }
+.linteau-accordion-chevron.linteau-open { transform: rotate(180deg) }
+.linteau-accordion-content { padding: 12px }
+.linteau-accordion-content.linteau-collapsed { display: none }
+`;
+function Accordion(options) {
+  assertDom("Accordion");
+  ensureComponentStyles("accordion", accordionCss);
+  const multiple = options.multiple ?? false;
+  let openValues = new Set(options.defaultOpen ?? []);
+  const onChange = options.onChange;
+  const cleanupListeners = [];
+  const root = el("div", px("accordion"));
+  function setOpenState(value, shouldOpen) {
+    if (shouldOpen) {
+      if (!multiple) openValues.clear();
+      openValues.add(value);
+    } else {
+      openValues.delete(value);
+    }
+    render();
+    onChange?.(Array.from(openValues));
+  }
+  function render() {
+    root.replaceChildren();
+    cleanupListeners.splice(0).forEach((fn) => fn());
+    for (const item of options.items) {
+      const isOpen = openValues.has(item.value);
+      const itemEl = el("div", px("accordion-item"));
+      const header = el("button", px("accordion-header"));
+      header.type = "button";
+      if (item.icon) header.appendChild(Icon(item.icon, 14, { className: px("icon") }));
+      const label = document.createElement("span");
+      label.textContent = item.label;
+      const chevron = Icon(icons.chevronDown, 14, { className: cx(px("accordion-chevron"), isOpen && px("open")) });
+      header.append(label, chevron);
+      const content = el("div", cx(px("accordion-content"), !isOpen && px("collapsed")));
+      content.appendChild(item.content);
+      const listener = () => setOpenState(item.value, !isOpen);
+      header.addEventListener("click", listener);
+      cleanupListeners.push(() => header.removeEventListener("click", listener));
+      itemEl.append(header, content);
+      root.appendChild(itemEl);
+    }
+  }
+  render();
+  const api = {
+    getOpen() {
+      return Array.from(openValues);
+    },
+    open(value) {
+      setOpenState(value, true);
+    },
+    close(value) {
+      setOpenState(value, false);
+    },
+    toggle(value) {
+      setOpenState(value, !openValues.has(value));
+    },
+    destroy() {
+      cleanupListeners.splice(0).forEach((fn) => fn());
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/navigation/Breadcrumb.ts
+var breadcrumbCss = `
+.linteau-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--linteau-muted-foreground) }
+.linteau-breadcrumb-item { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; font: inherit; padding: 0 }
+.linteau-breadcrumb-item:hover { color: var(--linteau-foreground) }
+.linteau-breadcrumb-current { color: var(--linteau-foreground); font-weight: 500 }
+`;
+function Breadcrumb(options) {
+  assertDom("Breadcrumb");
+  ensureComponentStyles("breadcrumb", breadcrumbCss);
+  const nav = el("nav", px("breadcrumb"));
+  nav.setAttribute("aria-label", "breadcrumb");
+  const cleanupListeners = [];
+  function render(items) {
+    nav.replaceChildren();
+    cleanupListeners.splice(0).forEach((fn) => fn());
+    items.forEach((item, index) => {
+      const isLast = index === items.length - 1;
+      if (isLast) {
+        const current = el("span", px("breadcrumb-current"));
+        current.textContent = item.label;
+        nav.appendChild(current);
+      } else {
+        const button = el("button", px("breadcrumb-item"));
+        button.type = "button";
+        button.textContent = item.label;
+        const listener = () => item.onClick?.();
+        button.addEventListener("click", listener);
+        cleanupListeners.push(() => button.removeEventListener("click", listener));
+        nav.appendChild(button);
+        const separator = Icon(icons.chevronRight, 12, { className: px("icon") });
+        if (separator) nav.appendChild(separator);
+      }
+    });
+  }
+  render(options.items);
+  const api = {
+    setItems(items) {
+      render(items);
+    },
+    destroy() {
+      cleanupListeners.splice(0).forEach((fn) => fn());
+      nav.remove();
+    }
+  };
+  return attachController(nav, api);
+}
+
+// src/components/navigation/Pagination.ts
+var paginationCss = `
+.linteau-pagination { display: flex; align-items: center; gap: 4px }
+.linteau-pagination-item { min-width: 28px; height: 28px; padding: 0 6px; display: flex; align-items: center; justify-content: center; border-radius: var(--linteau-radius-sm); border: 1px solid transparent; background: transparent; color: var(--linteau-muted-foreground); font-size: 12px; cursor: pointer; font-family: inherit }
+.linteau-pagination-item:hover:not(:disabled) { background: var(--linteau-accent) }
+.linteau-pagination-item:disabled { opacity: 0.4; cursor: not-allowed }
+.linteau-pagination-item-active { background: var(--linteau-primary); color: var(--linteau-primary-foreground) }
+.linteau-pagination-ellipsis { color: var(--linteau-muted-foreground); padding: 0 4px }
+`;
+function buildRange(current, pageCount, siblingCount) {
+  const totalVisible = siblingCount * 2 + 5;
+  if (pageCount <= totalVisible) return Array.from({ length: pageCount }, (_, i) => i + 1);
+  const leftSibling = Math.max(current - siblingCount, 1);
+  const rightSibling = Math.min(current + siblingCount, pageCount);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < pageCount - 1;
+  const range = [1];
+  if (showLeftEllipsis) range.push("ellipsis");
+  for (let page = Math.max(leftSibling, 2); page <= Math.min(rightSibling, pageCount - 1); page++) range.push(page);
+  if (showRightEllipsis) range.push("ellipsis");
+  if (pageCount > 1) range.push(pageCount);
+  return range;
+}
+function Pagination(options) {
+  assertDom("Pagination");
+  ensureComponentStyles("pagination", paginationCss);
+  let page = options.page ?? options.defaultPage ?? 1;
+  let pageCount = options.pageCount;
+  const siblingCount = options.siblingCount ?? 1;
+  const onChange = options.onChange;
+  const cleanupListeners = [];
+  const root = el("div", px("pagination"));
+  root.setAttribute("role", "navigation");
+  function goTo(newPage) {
+    page = Math.max(1, Math.min(pageCount, newPage));
+    render();
+    onChange?.(page);
+  }
+  function render() {
+    root.replaceChildren();
+    cleanupListeners.splice(0).forEach((fn) => fn());
+    const prev = el("button", px("pagination-item"));
+    prev.type = "button";
+    const prevIcon = Icon(icons.chevronLeft, 14);
+    if (prevIcon) prev.appendChild(prevIcon);
+    prev.disabled = page <= 1;
+    const prevListener = () => goTo(page - 1);
+    prev.addEventListener("click", prevListener);
+    cleanupListeners.push(() => prev.removeEventListener("click", prevListener));
+    root.appendChild(prev);
+    for (const entry of buildRange(page, pageCount, siblingCount)) {
+      if (entry === "ellipsis") {
+        root.appendChild(el("span", px("pagination-ellipsis")));
+        continue;
+      }
+      const button = el("button", cx(px("pagination-item"), entry === page && px("pagination-item-active")));
+      button.type = "button";
+      button.textContent = String(entry);
+      const listener = () => goTo(entry);
+      button.addEventListener("click", listener);
+      cleanupListeners.push(() => button.removeEventListener("click", listener));
+      root.appendChild(button);
+    }
+    const next = el("button", px("pagination-item"));
+    next.type = "button";
+    const nextIcon = Icon(icons.chevronRight, 14);
+    if (nextIcon) next.appendChild(nextIcon);
+    next.disabled = page >= pageCount;
+    const nextListener = () => goTo(page + 1);
+    next.addEventListener("click", nextListener);
+    cleanupListeners.push(() => next.removeEventListener("click", nextListener));
+    root.appendChild(next);
+  }
+  render();
+  const api = {
+    getPage() {
+      return page;
+    },
+    setPage(newPage) {
+      page = Math.max(1, Math.min(pageCount, newPage));
+      render();
+    },
+    setPageCount(newPageCount) {
+      pageCount = newPageCount;
+      render();
+    },
+    destroy() {
+      cleanupListeners.splice(0).forEach((fn) => fn());
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/navigation/Tabs.ts
+var tabsCss = `
+.linteau-tabs { display: flex; flex-direction: column; gap: 12px; width: 100% }
+.linteau-tabs-list { display: flex; gap: 4px; border-bottom: 1px solid var(--linteau-border) }
+.linteau-tabs-trigger { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit }
+.linteau-tabs-trigger:hover { color: var(--linteau-foreground) }
+.linteau-tabs-trigger-active { color: var(--linteau-foreground); border-bottom-color: var(--linteau-primary) }
+.linteau-tabs-panel { width: 100% }
+`;
+function Tabs(options) {
+  assertDom("Tabs");
+  ensureComponentStyles("tabs", tabsCss);
+  let value = options.value ?? options.defaultValue ?? options.items[0]?.value ?? "";
+  const onChange = options.onChange;
+  const cleanupListeners = [];
+  const root = el("div", px("tabs"));
+  const list = el("div", px("tabs-list"));
+  list.setAttribute("role", "tablist");
+  const panel = el("div", px("tabs-panel"));
+  function renderPanel() {
+    const active = options.items.find((item) => item.value === value);
+    panel.replaceChildren();
+    if (active) panel.appendChild(active.content);
+  }
+  function renderTriggers() {
+    list.replaceChildren();
+    cleanupListeners.splice(0).forEach((fn) => fn());
+    for (const item of options.items) {
+      const trigger = el("button", cx(px("tabs-trigger"), item.value === value && px("tabs-trigger-active")));
+      trigger.type = "button";
+      trigger.setAttribute("role", "tab");
+      if (item.icon) trigger.appendChild(Icon(item.icon, 14, { className: px("icon") }));
+      const label = document.createElement("span");
+      label.textContent = item.label;
+      trigger.appendChild(label);
+      const listener = () => {
+        value = item.value;
+        renderTriggers();
+        renderPanel();
+        onChange?.(value);
+      };
+      trigger.addEventListener("click", listener);
+      cleanupListeners.push(() => trigger.removeEventListener("click", listener));
+      list.appendChild(trigger);
+    }
+  }
+  renderTriggers();
+  renderPanel();
+  root.append(list, panel);
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      renderTriggers();
+      renderPanel();
+    },
+    destroy() {
+      cleanupListeners.splice(0).forEach((fn) => fn());
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/overlay/Dialog.ts
+var dialogCss = `
+.linteau-dialog-overlay { position: fixed; inset: 0; background: color-mix(in oklch, black 60%, transparent); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px) }
+.linteau-dialog-panel { width: min(480px, 92vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); overflow: hidden }
+.linteau-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--linteau-border) }
+.linteau-dialog-title { font-size: 14px; font-weight: 600 }
+.linteau-dialog-close { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; padding: 4px; border-radius: var(--linteau-radius-sm) }
+.linteau-dialog-close:hover { background: var(--linteau-accent); color: var(--linteau-foreground) }
+.linteau-dialog-body { padding: 16px; overflow-y: auto }
+.linteau-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linteau-border) }
+`;
+function Dialog(options = {}) {
+  assertDom("Dialog");
+  ensureComponentStyles("dialog", dialogCss);
+  const closeOnBackdrop = options.closeOnBackdrop ?? true;
+  const closeOnEscape = options.closeOnEscape ?? true;
+  let isOpen = false;
+  let unlockScroll = null;
+  let unbindEscape = null;
+  const overlay = el("div", cx(px("dialog-overlay"), px("hidden")));
+  const panel = el("div", px("dialog-panel"));
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-modal", "true");
+  const header = el("div", px("dialog-header"));
+  const titleEl = el("div", px("dialog-title"));
+  titleEl.textContent = options.title ?? "";
+  const closeButton = el("button", px("dialog-close"));
+  closeButton.type = "button";
+  const closeIcon = Icon(icons.x, 16);
+  if (closeIcon) closeButton.appendChild(closeIcon);
+  header.append(titleEl, closeButton);
+  const body = el("div", px("dialog-body"));
+  if (options.content) fillContent(body, options.content);
+  const footer = el("div", px("dialog-footer"));
+  if (options.actions?.length) footer.append(...options.actions);
+  panel.append(header, body);
+  if (options.actions?.length) panel.appendChild(footer);
+  overlay.appendChild(panel);
+  function setOpen(value) {
+    isOpen = value;
+    overlay.classList.toggle(px("hidden"), !value);
+    if (value) {
+      unlockScroll = lockBodyScroll();
+      if (closeOnEscape) unbindEscape = onEscapeKey(close);
+    } else {
+      unlockScroll?.();
+      unlockScroll = null;
+      unbindEscape?.();
+      unbindEscape = null;
+    }
+    options.onOpenChange?.(value);
+  }
+  function close() {
+    if (isOpen) setOpen(false);
+  }
+  const backdropListener = (event) => {
+    if (closeOnBackdrop && event.target === overlay) close();
+  };
+  overlay.addEventListener("mousedown", backdropListener);
+  closeButton.addEventListener("click", close);
+  const api = {
+    body,
+    open() {
+      setOpen(true);
+    },
+    close,
+    isOpen() {
+      return isOpen;
+    },
+    setTitle(title) {
+      titleEl.textContent = title;
+    },
+    setContent(content) {
+      fillContent(body, content);
+    },
+    destroy() {
+      overlay.removeEventListener("mousedown", backdropListener);
+      closeButton.removeEventListener("click", close);
+      unlockScroll?.();
+      unbindEscape?.();
+      overlay.remove();
+    }
+  };
+  return attachController(overlay, api);
+}
+
+// src/components/overlay/AlertDialog.ts
+function AlertDialog(options) {
+  assertDom("AlertDialog");
+  let resolved = false;
+  const cancelButton = Button(options.cancelText ?? "Cancel", {
+    variant: "outline",
+    onClick: () => {
+      resolved = true;
+      options.onCancel?.();
+      dialog.close();
+    }
+  });
+  const confirmButton = Button(options.confirmText ?? "Continue", {
+    variant: options.destructive ? "destructive" : "default",
+    onClick: () => {
+      resolved = true;
+      options.onConfirm?.();
+      dialog.close();
+    }
+  });
+  const dialog = Dialog({
+    title: options.title,
+    ...options.description !== void 0 ? { content: options.description } : {},
+    actions: [cancelButton, confirmButton],
+    closeOnBackdrop: false,
+    closeOnEscape: true,
+    onOpenChange: (open) => {
+      if (!open && !resolved) options.onCancel?.();
+      resolved = false;
+    }
+  });
+  document.body.appendChild(dialog);
+  return {
+    open() {
+      dialog.open();
+    },
+    close() {
+      dialog.close();
+    },
+    isOpen() {
+      return dialog.isOpen();
+    },
+    destroy() {
+      dialog.destroy();
+    }
+  };
+}
+
+// src/components/overlay/DropdownMenu.ts
+function isSeparator(entry) {
+  return "separator" in entry;
+}
+function renderMenuEntries(container, entries, onSelect, onAfterSelect) {
+  container.replaceChildren();
+  for (const entry of entries) {
+    if (isSeparator(entry)) {
+      container.appendChild(el("div", px("menu-separator")));
+      continue;
+    }
+    const item = el("div", cx(px("menu-item"), entry.disabled && px("menu-item-disabled"), entry.destructive && px("menu-item-destructive")));
+    if (entry.icon) item.appendChild(Icon(entry.icon, 14, { className: px("icon") }));
+    const label = document.createElement("span");
+    label.textContent = entry.label;
+    item.appendChild(label);
+    item.addEventListener("click", () => {
+      if (entry.disabled) return;
+      onSelect(entry.value);
+      onAfterSelect();
+    });
+    container.appendChild(item);
+  }
+}
+var menuCss = `
+.linteau-menu { position: fixed; z-index: 1200; min-width: 160px; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-md); padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }
+.linteau-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--linteau-radius-sm); font-size: 12px; color: var(--linteau-foreground); cursor: pointer }
+.linteau-menu-item:hover:not(.linteau-menu-item-disabled) { background: var(--linteau-accent) }
+.linteau-menu-item-disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-menu-item-destructive { color: var(--linteau-destructive) }
+.linteau-menu-separator { height: 1px; background: var(--linteau-border); margin: 4px 0 }
+`;
+function DropdownMenu(options) {
+  assertDom("DropdownMenu");
+  ensureComponentStyles("menu", menuCss);
+  const { anchor, placement = "bottom" } = options;
+  let items = options.items;
+  let isOpen = false;
+  let unbindOutside = null;
+  let unbindEscape = null;
+  const menu2 = el("div", cx(px("menu"), px("hidden")));
+  renderMenuEntries(menu2, items, (value) => options.onSelect?.(value), close);
+  function open() {
+    if (isOpen) return;
+    isOpen = true;
+    document.body.appendChild(menu2);
+    menu2.classList.remove(px("hidden"));
+    positionFloating(anchor, menu2, placement);
+    unbindOutside = onClickOutside([anchor, menu2], close);
+    unbindEscape = onEscapeKey(close);
+  }
+  function close() {
+    if (!isOpen) return;
+    isOpen = false;
+    menu2.classList.add(px("hidden"));
+    menu2.remove();
+    unbindOutside?.();
+    unbindOutside = null;
+    unbindEscape?.();
+    unbindEscape = null;
+  }
+  function toggle() {
+    if (isOpen) close();
+    else open();
+  }
+  const anchorListener = () => toggle();
+  anchor.addEventListener("click", anchorListener);
+  const api = {
+    open,
+    close,
+    toggle,
+    isOpen() {
+      return isOpen;
+    },
+    setItems(newItems) {
+      items = newItems;
+      renderMenuEntries(menu2, items, (value) => options.onSelect?.(value), close);
+    },
+    destroy() {
+      anchor.removeEventListener("click", anchorListener);
+      unbindOutside?.();
+      unbindEscape?.();
+      menu2.remove();
+    }
+  };
+  return attachController(menu2, api);
+}
+
+// src/components/overlay/ContextMenu.ts
+function ContextMenu(options) {
+  assertDom("ContextMenu");
+  ensureComponentStyles("menu", menuCss);
+  const { target } = options;
+  let unbindOutside = null;
+  let unbindEscape = null;
+  const menu2 = el("div", px("menu"));
+  renderMenuEntries(menu2, options.items, (value) => options.onSelect?.(value), close);
+  menu2.style.display = "none";
+  function close() {
+    menu2.style.display = "none";
+    menu2.remove();
+    unbindOutside?.();
+    unbindOutside = null;
+    unbindEscape?.();
+    unbindEscape = null;
+  }
+  const contextListener = (event) => {
+    event.preventDefault();
+    document.body.appendChild(menu2);
+    menu2.style.display = "block";
+    menu2.style.position = "fixed";
+    menu2.style.top = `${event.clientY}px`;
+    menu2.style.left = `${event.clientX}px`;
+    unbindOutside = onClickOutside(menu2, close);
+    unbindEscape = onEscapeKey(close);
+  };
+  target.addEventListener("contextmenu", contextListener);
+  return {
+    destroy() {
+      target.removeEventListener("contextmenu", contextListener);
+      unbindOutside?.();
+      unbindEscape?.();
+      menu2.remove();
+    }
+  };
+}
+
+// src/components/overlay/Drawer.ts
+var drawerCss = `
+.linteau-drawer-overlay { position: fixed; inset: 0; background: color-mix(in oklch, black 55%, transparent); z-index: 1000 }
+.linteau-drawer-panel { position: fixed; background: var(--linteau-card); border: 1px solid var(--linteau-border); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); transition: transform 200ms ease }
+.linteau-drawer-right { top: 0; right: 0; bottom: 0; width: min(360px, 90vw); transform: translateX(0) }
+.linteau-drawer-left { top: 0; left: 0; bottom: 0; width: min(360px, 90vw); transform: translateX(0) }
+.linteau-drawer-top { top: 0; left: 0; right: 0; height: min(320px, 80vh); transform: translateY(0) }
+.linteau-drawer-bottom { bottom: 0; left: 0; right: 0; height: min(320px, 80vh); transform: translateY(0) }
+.linteau-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--linteau-border) }
+.linteau-drawer-title { font-size: 14px; font-weight: 600 }
+.linteau-drawer-close { background: transparent; border: none; color: var(--linteau-muted-foreground); cursor: pointer; display: flex; padding: 4px; border-radius: var(--linteau-radius-sm) }
+.linteau-drawer-body { padding: 16px; overflow-y: auto; flex: 1 }
+`;
+function Drawer(options = {}) {
+  assertDom("Drawer");
+  ensureComponentStyles("drawer", drawerCss);
+  const side = options.side ?? "right";
+  const closeOnBackdrop = options.closeOnBackdrop ?? true;
+  const closeOnEscape = options.closeOnEscape ?? true;
+  let isOpen = false;
+  let unlockScroll = null;
+  let unbindEscape = null;
+  const overlay = el("div", cx(px("drawer-overlay"), px("hidden")));
+  const panel = el("div", cx(px("drawer-panel"), px(`drawer-${side}`)));
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-modal", "true");
+  const header = el("div", px("drawer-header"));
+  const titleEl = el("div", px("drawer-title"));
+  titleEl.textContent = options.title ?? "";
+  const closeButton = el("button", px("drawer-close"));
+  closeButton.type = "button";
+  const closeIcon = Icon(icons.x, 16);
+  if (closeIcon) closeButton.appendChild(closeIcon);
+  header.append(titleEl, closeButton);
+  const body = el("div", px("drawer-body"));
+  if (options.content) fillContent(body, options.content);
+  panel.append(header, body);
+  overlay.appendChild(panel);
+  function setOpen(value) {
+    isOpen = value;
+    overlay.classList.toggle(px("hidden"), !value);
+    if (value) {
+      unlockScroll = lockBodyScroll();
+      if (closeOnEscape) unbindEscape = onEscapeKey(close);
+    } else {
+      unlockScroll?.();
+      unlockScroll = null;
+      unbindEscape?.();
+      unbindEscape = null;
+    }
+    options.onOpenChange?.(value);
+  }
+  function close() {
+    if (isOpen) setOpen(false);
+  }
+  const backdropListener = (event) => {
+    if (closeOnBackdrop && event.target === overlay) close();
+  };
+  overlay.addEventListener("mousedown", backdropListener);
+  closeButton.addEventListener("click", close);
+  const api = {
+    body,
+    open() {
+      setOpen(true);
+    },
+    close,
+    isOpen() {
+      return isOpen;
+    },
+    setTitle(title) {
+      titleEl.textContent = title;
+    },
+    setContent(content) {
+      fillContent(body, content);
+    },
+    destroy() {
+      overlay.removeEventListener("mousedown", backdropListener);
+      closeButton.removeEventListener("click", close);
+      unlockScroll?.();
+      unbindEscape?.();
+      overlay.remove();
+    }
+  };
+  return attachController(overlay, api);
+}
+
+// src/components/overlay/Popover.ts
+var popoverCss = `
+.linteau-popover { position: fixed; z-index: 1200; background: var(--linteau-card); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-md); padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) }
+`;
+function Popover(options) {
+  assertDom("Popover");
+  ensureComponentStyles("popover", popoverCss);
+  const { anchor, placement = "bottom", closeOnClickOutside = true } = options;
+  let isOpen = false;
+  let unbindOutside = null;
+  let unbindEscape = null;
+  const panel = el("div", cx(px("popover"), px("hidden")));
+  fillContent(panel, options.content);
+  function open() {
+    if (isOpen) return;
+    isOpen = true;
+    document.body.appendChild(panel);
+    panel.classList.remove(px("hidden"));
+    positionFloating(anchor, panel, placement);
+    if (closeOnClickOutside) unbindOutside = onClickOutside([anchor, panel], close);
+    unbindEscape = onEscapeKey(close);
+  }
+  function close() {
+    if (!isOpen) return;
+    isOpen = false;
+    panel.classList.add(px("hidden"));
+    panel.remove();
+    unbindOutside?.();
+    unbindOutside = null;
+    unbindEscape?.();
+    unbindEscape = null;
+  }
+  function toggle() {
+    if (isOpen) close();
+    else open();
+  }
+  const anchorListener = () => toggle();
+  anchor.addEventListener("click", anchorListener);
+  const api = {
+    open,
+    close,
+    toggle,
+    isOpen() {
+      return isOpen;
+    },
+    setContent(content) {
+      fillContent(panel, content);
+    },
+    destroy() {
+      anchor.removeEventListener("click", anchorListener);
+      unbindOutside?.();
+      unbindEscape?.();
+      panel.remove();
+    }
+  };
+  return attachController(panel, api);
+}
+
+// src/components/radio/RadioGroup.ts
+var radioCss = `
+.linteau-radio-group { display: flex; flex-direction: column; gap: 8px }
+.linteau-radio-row { display: flex; align-items: center; gap: 8px; cursor: pointer }
+.linteau-radio-row.linteau-disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-radio { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--linteau-border); background: var(--linteau-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
+.linteau-radio.linteau-checked { border-color: var(--linteau-primary) }
+.linteau-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--linteau-primary); opacity: 0; transition: opacity 100ms ease }
+.linteau-radio.linteau-checked .linteau-radio-dot { opacity: 1 }
+`;
+function RadioGroup(options) {
+  assertDom("RadioGroup");
+  ensureComponentStyles("radio", radioCss);
+  let value = options.value ?? options.defaultValue;
+  const groupDisabled = options.disabled ?? false;
+  const onChange = options.onChange;
+  const cleanupListeners = [];
+  const root = el("div", px("radio-group"));
+  root.setAttribute("role", "radiogroup");
+  function render() {
+    root.replaceChildren();
+    cleanupListeners.splice(0).forEach((fn) => fn());
+    for (const item of options.items) {
+      const itemDisabled = groupDisabled || (item.disabled ?? false);
+      const row = el("div", cx(px("radio-row"), itemDisabled && px("disabled")));
+      const dot = el("div", cx(px("radio"), item.value === value && px("checked")));
+      dot.appendChild(el("div", px("radio-dot")));
+      const label = document.createElement("span");
+      label.textContent = item.label;
+      row.append(dot, label);
+      const listener = () => {
+        if (itemDisabled) return;
+        value = item.value;
+        render();
+        onChange?.(item.value);
+      };
+      row.addEventListener("click", listener);
+      cleanupListeners.push(() => row.removeEventListener("click", listener));
+      root.appendChild(row);
+    }
+  }
+  render();
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      render();
+    },
+    destroy() {
+      cleanupListeners.splice(0).forEach((fn) => fn());
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/select/Select.ts
+var selectCss = `
+.linteau-select-wrap { position: relative }
+.linteau-select { appearance: none; background: var(--linteau-secondary); color: var(--linteau-foreground); border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-sm); padding: 6px 28px 6px 10px; font-size: 12px; font-family: inherit; cursor: pointer; transition: border-color 120ms ease }
+.linteau-select:disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-select:focus { outline: none; border-color: var(--linteau-ring); box-shadow: 0 0 0 2px color-mix(in oklch, var(--linteau-ring) 20%, transparent) }
+.linteau-select-chevron { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none }
+`;
+function Select(options) {
+  assertDom("Select");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("select", selectCss);
+  let items = options.options;
+  let value = options.value ?? options.defaultValue ?? items[0]?.value ?? "";
+  const onChange = options.onChange;
+  const root = el("div", px("field-row"));
+  const labelWrap = el("div", px("field-label"));
+  if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+  const labelText = document.createElement("span");
+  labelText.textContent = options.label;
+  labelWrap.appendChild(labelText);
+  const selectWrap = el("div", px("select-wrap"));
+  const select = el("select", px("select"));
+  select.disabled = options.disabled ?? false;
+  function renderOptions() {
+    select.replaceChildren();
+    if (options.placeholder) {
+      const placeholderOption = document.createElement("option");
+      placeholderOption.value = "";
+      placeholderOption.textContent = options.placeholder;
+      placeholderOption.disabled = true;
+      placeholderOption.selected = !value;
+      select.appendChild(placeholderOption);
+    }
+    for (const item of items) {
+      const optionEl = document.createElement("option");
+      optionEl.value = item.value;
+      optionEl.textContent = item.label;
+      optionEl.disabled = item.disabled ?? false;
+      optionEl.selected = item.value === value;
+      select.appendChild(optionEl);
+    }
+  }
+  renderOptions();
+  const chevron = Icon(icons.chevronDown, 12, { className: px("select-chevron") });
+  selectWrap.append(select, chevron);
+  const listener = () => {
+    value = select.value;
+    onChange?.(value);
+  };
+  select.addEventListener("change", listener);
+  root.append(labelWrap, selectWrap);
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = newValue;
+      select.value = newValue;
+    },
+    setOptions(newOptions) {
+      items = newOptions;
+      renderOptions();
+    },
+    setDisabled(disabled) {
+      select.disabled = disabled;
+    },
+    destroy() {
+      select.removeEventListener("change", listener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/slider/Slider.ts
+var sliderCss = `
+.linteau-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--linteau-primary) 0%, var(--linteau-primary) var(--linteau-fill, 0%), var(--linteau-secondary) var(--linteau-fill, 0%), var(--linteau-secondary) 100%); outline: none; transition: background 120ms ease }
+.linteau-slider:disabled { opacity: 0.5 }
+.linteau-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--linteau-primary); border: 2px solid var(--linteau-card); box-shadow: 0 0 0 1px var(--linteau-border); cursor: pointer; transition: transform 120ms ease }
+.linteau-slider::-webkit-slider-thumb:hover { transform: scale(1.15) }
+.linteau-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--linteau-primary); border: 2px solid var(--linteau-card); cursor: pointer }
+`;
+function Slider(options) {
+  assertDom("Slider");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("slider", sliderCss);
+  const { min, max, step } = options;
+  let value = options.value ?? options.defaultValue ?? min;
+  const format = options.format ?? ((v) => v.toString());
+  const onChange = options.onChange;
+  const root = el("div", px("field"));
+  const header = el("div", px("field-header"));
+  const labelWrap = el("div", px("field-label"));
+  if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+  const labelText = document.createElement("span");
+  labelText.textContent = options.label;
+  labelWrap.appendChild(labelText);
+  const valueEl = el("span", px("field-value"));
+  valueEl.textContent = format(value);
+  header.append(labelWrap, valueEl);
+  const input = el("input", px("slider"));
+  input.type = "range";
+  input.min = String(min);
+  input.max = String(max);
+  input.step = String(step);
+  input.value = String(value);
+  input.disabled = options.disabled ?? false;
+  function updateFill(v) {
+    const percent = (v - min) / (max - min) * 100;
+    input.style.setProperty("--linteau-fill", `${percent}%`);
+  }
+  updateFill(value);
+  const listener = () => {
+    value = Number(input.value);
+    valueEl.textContent = format(value);
+    updateFill(value);
+    onChange?.(value);
+  };
+  input.addEventListener("input", listener);
+  root.append(header, input);
+  const api = {
+    getValue() {
+      return value;
+    },
+    setValue(newValue) {
+      value = Math.max(min, Math.min(max, newValue));
+      input.value = String(value);
+      valueEl.textContent = format(value);
+      updateFill(value);
+    },
+    setDisabled(disabled) {
+      input.disabled = disabled;
+    },
+    destroy() {
+      input.removeEventListener("input", listener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/slider/RangeSlider.ts
+var rangeSliderCss = `
+.linteau-range-track { position: relative; height: 20px; display: flex; align-items: center }
+.linteau-range-track::before { content: ''; position: absolute; left: 0; right: 0; height: 6px; border-radius: 999px; background: var(--linteau-secondary) }
+.linteau-range-track::after { content: ''; position: absolute; height: 6px; border-radius: 999px; background: var(--linteau-primary); left: var(--linteau-range-low, 0%); right: calc(100% - var(--linteau-range-high, 100%)) }
+.linteau-range-input { position: absolute; left: 0; right: 0; width: 100%; height: 20px; background: transparent; pointer-events: none; margin: 0 }
+.linteau-range-input::-webkit-slider-thumb { pointer-events: auto }
+.linteau-range-input::-moz-range-thumb { pointer-events: auto }
+`;
+function RangeSlider(options) {
+  assertDom("RangeSlider");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("slider", sliderCss);
+  ensureComponentStyles("range-slider", rangeSliderCss);
+  const { min, max, step } = options;
+  let [low, high] = options.value ?? options.defaultValue ?? [min, max];
+  const format = options.format ?? ((v) => v.toString());
+  const onChange = options.onChange;
+  const root = el("div", px("field"));
+  const header = el("div", px("field-header"));
+  const labelWrap = el("div", px("field-label"));
+  if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+  const labelText = document.createElement("span");
+  labelText.textContent = options.label;
+  labelWrap.appendChild(labelText);
+  const valueEl = el("span", px("field-value"));
+  header.append(labelWrap, valueEl);
+  const track = el("div", px("range-track"));
+  const inputLow = el("input", cx(px("slider"), px("range-input")));
+  const inputHigh = el("input", cx(px("slider"), px("range-input")));
+  for (const input of [inputLow, inputHigh]) {
+    input.type = "range";
+    input.min = String(min);
+    input.max = String(max);
+    input.step = String(step);
+    input.disabled = options.disabled ?? false;
+  }
+  function syncDisplay() {
+    valueEl.textContent = `${format(low)} - ${format(high)}`;
+    inputLow.value = String(low);
+    inputHigh.value = String(high);
+    track.style.setProperty("--linteau-range-low", `${(low - min) / (max - min) * 100}%`);
+    track.style.setProperty("--linteau-range-high", `${(high - min) / (max - min) * 100}%`);
+  }
+  syncDisplay();
+  const lowListener = () => {
+    low = Math.min(Number(inputLow.value), high);
+    syncDisplay();
+    onChange?.([low, high]);
+  };
+  const highListener = () => {
+    high = Math.max(Number(inputHigh.value), low);
+    syncDisplay();
+    onChange?.([low, high]);
+  };
+  inputLow.addEventListener("input", lowListener);
+  inputHigh.addEventListener("input", highListener);
+  track.append(inputLow, inputHigh);
+  root.append(header, track);
+  const api = {
+    getValue() {
+      return [low, high];
+    },
+    setValue(value) {
+      ;
+      [low, high] = value;
+      syncDisplay();
+    },
+    setDisabled(disabled) {
+      inputLow.disabled = disabled;
+      inputHigh.disabled = disabled;
+    },
+    destroy() {
+      inputLow.removeEventListener("input", lowListener);
+      inputHigh.removeEventListener("input", highListener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/switch/Switch.ts
+var switchCss = `
+.linteau-switch-row { display: flex; align-items: center; justify-content: space-between }
+.linteau-switch { width: 38px; height: 22px; border-radius: 999px; background: var(--linteau-secondary); border: 1px solid var(--linteau-border); padding: 2px; cursor: pointer; display: flex; align-items: center; transition: background 150ms ease }
+.linteau-switch:disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-switch.linteau-checked { background: var(--linteau-primary) }
+.linteau-switch-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--linteau-card); transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0) }
+.linteau-switch.linteau-checked .linteau-switch-thumb { transform: translateX(16px); background: var(--linteau-primary-foreground) }
+`;
+function Switch(options) {
+  assertDom("Switch");
+  ensureComponentStyles("field-base", fieldBaseCss);
+  ensureComponentStyles("switch", switchCss);
+  let checked = options.checked ?? options.defaultChecked ?? false;
+  let disabled = options.disabled ?? false;
+  const onChange = options.onChange;
+  const root = el("div", px("switch-row"));
+  const labelWrap = el("div", px("field-label"));
+  if (options.icon) labelWrap.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+  const labelText = document.createElement("span");
+  labelText.textContent = options.label;
+  labelWrap.appendChild(labelText);
+  const track = el("button", px("switch"));
+  track.type = "button";
+  track.setAttribute("role", "switch");
+  track.disabled = disabled;
+  const thumb = el("span", px("switch-thumb"));
+  track.appendChild(thumb);
+  function applyState() {
+    track.classList.toggle(px("checked"), checked);
+    track.setAttribute("aria-checked", String(checked));
+  }
+  applyState();
+  const listener = () => {
+    if (disabled) return;
+    checked = !checked;
+    applyState();
+    onChange?.(checked);
+  };
+  track.addEventListener("click", listener);
+  root.append(labelWrap, track);
+  const api = {
+    getValue() {
+      return checked;
+    },
+    setValue(value) {
+      checked = value;
+      applyState();
+    },
+    setLabel(newLabel) {
+      labelText.textContent = newLabel;
+    },
+    setDisabled(value) {
+      disabled = value;
+      track.disabled = value;
+    },
+    destroy() {
+      track.removeEventListener("click", listener);
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/toggle/Toggle.ts
+var toggleCss = `
+.linteau-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: var(--linteau-radius-sm);
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--linteau-muted-foreground);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
+}
+.linteau-toggle-default { padding: 8px 12px }
+.linteau-toggle-sm { padding: 5px 8px; font-size: 12px }
+.linteau-toggle:hover:not(:disabled) { background: var(--linteau-accent); color: var(--linteau-foreground) }
+.linteau-toggle:disabled { opacity: 0.5; cursor: not-allowed }
+.linteau-toggle-outline { border-color: var(--linteau-border) }
+.linteau-toggle.linteau-pressed { background: var(--linteau-accent); color: var(--linteau-foreground) }
+`;
+function Toggle(text, options = {}) {
+  assertDom("Toggle");
+  ensureComponentStyles("toggle", toggleCss);
+  const variant = options.variant ?? "default";
+  const size = options.size ?? "default";
+  let pressed = options.pressed ?? options.defaultPressed ?? false;
+  let disabled = options.disabled ?? false;
+  const onPressedChange = options.onPressedChange;
+  const button = el("button", cx(px("toggle"), px(`toggle-${size}`), variant === "outline" && px("toggle-outline")));
+  button.type = "button";
+  button.setAttribute("aria-pressed", String(pressed));
+  button.disabled = disabled;
+  if (options.icon) button.appendChild(Icon(options.icon, 14, { className: px("icon") }));
+  const label = document.createElement("span");
+  label.textContent = text;
+  button.appendChild(label);
+  function applyState() {
+    button.classList.toggle(px("pressed"), pressed);
+    button.setAttribute("aria-pressed", String(pressed));
+  }
+  applyState();
+  const listener = () => {
+    if (disabled) return;
+    pressed = !pressed;
+    applyState();
+    onPressedChange?.(pressed);
+  };
+  button.addEventListener("click", listener);
+  const api = {
+    getPressed() {
+      return pressed;
+    },
+    setPressed(value) {
+      pressed = value;
+      applyState();
+    },
+    setDisabled(value) {
+      disabled = value;
+      button.disabled = value;
+    },
+    destroy() {
+      button.removeEventListener("click", listener);
+      button.remove();
+    }
+  };
+  return attachController(button, api);
+}
+
+// src/components/toggle/ToggleGroup.ts
+var toggleGroupCss = `
+.linteau-toggle-group { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linteau-border); border-radius: var(--linteau-radius-sm) }
+`;
+function ToggleGroup(options) {
+  assertDom("ToggleGroup");
+  ensureComponentStyles("toggle-group", toggleGroupCss);
+  const type = options.type ?? "single";
+  const variant = options.variant ?? "outline";
+  const size = options.size ?? "default";
+  const groupDisabled = options.disabled ?? false;
+  const onChange = options.onChange;
+  let selected = new Set(
+    Array.isArray(options.value ?? options.defaultValue) ? options.value ?? options.defaultValue : options.value !== void 0 || options.defaultValue !== void 0 ? [options.value ?? options.defaultValue] : []
+  );
+  const root = el("div", px("toggle-group"));
+  root.setAttribute("role", "group");
+  const toggles = /* @__PURE__ */ new Map();
+  function currentValue() {
+    if (type === "single") return Array.from(selected)[0] ?? "";
+    return Array.from(selected);
+  }
+  function toggleItem(value) {
+    if (type === "single") {
+      selected = selected.has(value) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([value]);
+    } else {
+      if (selected.has(value)) selected.delete(value);
+      else selected.add(value);
+    }
+    for (const [itemValue, toggle] of toggles) toggle.setPressed(selected.has(itemValue));
+    onChange?.(currentValue());
+  }
+  for (const item of options.items) {
+    const toggle = Toggle(item.label, {
+      variant,
+      size,
+      icon: item.icon,
+      pressed: selected.has(item.value),
+      disabled: groupDisabled || (item.disabled ?? false),
+      onPressedChange: () => toggleItem(item.value)
+    });
+    toggles.set(item.value, toggle);
+    root.appendChild(toggle);
+  }
+  const api = {
+    getValue() {
+      return currentValue();
+    },
+    setValue(value) {
+      selected = new Set(Array.isArray(value) ? value : [value]);
+      for (const [itemValue, toggle] of toggles) toggle.setPressed(selected.has(itemValue));
+    },
+    destroy() {
+      for (const toggle of toggles.values()) toggle.destroy();
+      root.remove();
+    }
+  };
+  return attachController(root, api);
+}
+
+// src/components/tooltip/Tooltip.ts
+var tooltipCss = `
+.linteau-tooltip { position: fixed; z-index: 1300; background: var(--linteau-foreground); color: var(--linteau-background); font-size: 11px; font-weight: 500; padding: 5px 8px; border-radius: var(--linteau-radius-sm); pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) }
+`;
+function Tooltip(anchor, content, options = {}) {
+  assertDom("Tooltip");
+  ensureComponentStyles("tooltip", tooltipCss);
+  const placement = options.placement ?? "top";
+  const delay = options.delay ?? 200;
+  let text = content;
+  let showTimer = null;
+  const tooltip = el("div", px("tooltip"));
+  tooltip.textContent = text;
+  tooltip.style.display = "none";
+  function show() {
+    showTimer = setTimeout(() => {
+      document.body.appendChild(tooltip);
+      tooltip.style.display = "block";
+      positionFloating(anchor, tooltip, placement);
+    }, delay);
+  }
+  function hide() {
+    if (showTimer) clearTimeout(showTimer);
+    tooltip.style.display = "none";
+    tooltip.remove();
+  }
+  anchor.addEventListener("mouseenter", show);
+  anchor.addEventListener("mouseleave", hide);
+  anchor.addEventListener("focus", show);
+  anchor.addEventListener("blur", hide);
+  return {
+    setContent(newContent) {
+      text = newContent;
+      tooltip.textContent = text;
+    },
+    destroy() {
+      hide();
+      anchor.removeEventListener("mouseenter", show);
+      anchor.removeEventListener("mouseleave", hide);
+      anchor.removeEventListener("focus", show);
+      anchor.removeEventListener("blur", hide);
+    }
+  };
+}
+export {
+  Accordion,
+  Alert,
+  AlertDialog,
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  Card,
+  Checkbox,
+  ChipInput,
+  ColorField,
+  Combobox,
+  Command,
+  ContextMenu,
+  DatePicker,
+  Dialog,
+  Drawer,
+  DropdownMenu,
+  FileDropzone,
+  HoverCard,
+  Icon,
+  List,
+  ModeCard,
+  NumberField,
+  Pagination,
+  Popover,
+  ProgressBar,
+  RadioGroup,
+  RangeSlider,
+  Section,
+  Select,
+  Separator,
+  Skeleton,
+  Slider,
+  Spinner,
+  Switch,
+  Table,
+  Tabs,
+  TextArea,
+  TextField,
+  Toggle,
+  ToggleGroup,
+  Tooltip,
+  Tree,
+  accordionCss,
+  alertCss,
+  avatarCss,
+  badgeCss,
+  breadcrumbCss,
+  buttonCss,
+  buttonGroupCss,
+  calendarCss,
+  cardCss,
+  checkboxCss,
+  chipInputCss,
+  comboboxCss,
+  commandCss,
+  createToastManager,
+  dialogCss,
+  drawerCss,
+  dropzoneCss,
+  getTheme,
+  hoverCardCss,
+  icons,
+  isBrowser,
+  listCss,
+  menuCss,
+  modeCardCss,
+  onThemeChange,
+  paginationCss,
+  popoverCss,
+  progressBarCss,
+  radioCss,
+  rangeSliderCss,
+  renderMenuEntries,
+  resetTheme,
+  sectionCss,
+  selectCss,
+  separatorCss,
+  setTheme,
+  skeletonCss,
+  sliderCss,
+  spinnerCss,
+  swatchCss,
+  switchCss,
+  tableCss,
+  tabsCss,
+  toast,
+  toastCss,
+  toggleCss,
+  toggleGroupCss,
+  tooltipCss,
+  treeCss
+};
+//# sourceMappingURL=index.js.map