@desktalk/miniapp-note 0.1.0-alpha.1

package/dist/frontend.js

@@ -0,0 +1,3795 @@
+(() => {
+  if (typeof document === 'undefined') return;
+  const styleId = "desktalk-style-desktalk-miniapp-note-emi3yz";
+  if (document.getElementById(styleId)) return;
+  const style = document.createElement('style');
+  style.id = styleId;
+  style.textContent = "/* src/styles/NoteApp.module.css */\n.NoteApp_root {\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  background: var(--dt-window-body);\n  color: var(--dt-text);\n  font-family: var(--font-sans);\n}\n.NoteApp_rootCompact {\n  flex-direction: column;\n}\n.NoteApp_rootCompact .NoteApp_listPanel {\n  width: 100%;\n  min-width: 0;\n  max-height: 180px;\n  flex-direction: row;\n  border-right: none;\n  border-bottom: 1px solid var(--dt-border);\n}\n.NoteApp_rootCompact .NoteApp_listHeader {\n  width: 140px;\n  min-width: 140px;\n  flex-direction: column;\n  padding: 10px;\n  gap: 8px;\n  border-bottom: none;\n  border-right: 1px solid var(--dt-border-subtle);\n}\n.NoteApp_rootCompact .NoteApp_searchInput {\n  width: 100%;\n}\n.NoteApp_rootCompact .NoteApp_newNoteBtn {\n  width: 100%;\n}\n.NoteApp_rootCompact .NoteApp_noteList {\n  flex: 1;\n  overflow-x: auto;\n  overflow-y: hidden;\n  display: flex;\n  padding: 8px;\n  gap: 8px;\n}\n.NoteApp_rootCompact .NoteApp_noteItem,\n.NoteApp_rootCompact .NoteApp_noteItemActive {\n  min-width: 160px;\n  max-width: 200px;\n  flex-shrink: 0;\n  border-bottom: none;\n  border-radius: 6px;\n  background: var(--dt-surface);\n}\n.NoteApp_rootCompact .NoteApp_noteItemActive {\n  border-left: none;\n  padding-left: 10px;\n  border: 1px solid var(--dt-accent);\n  background: color-mix(in oklab, var(--dt-accent) 8%, var(--dt-surface));\n}\n.NoteApp_rootCompact .NoteApp_emptyState {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n.NoteApp_listPanel {\n  display: flex;\n  width: 260px;\n  min-width: 200px;\n  flex-direction: column;\n  overflow: hidden;\n  border-right: 1px solid var(--dt-border);\n}\n.NoteApp_listHeader {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--dt-border);\n}\n.NoteApp_searchInput {\n  flex: 1;\n  padding: 6px 10px;\n  border: 1px solid var(--dt-border);\n  border-radius: 6px;\n  background: var(--dt-surface);\n  color: var(--dt-text);\n  font-family: inherit;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s;\n}\n.NoteApp_searchInput::placeholder {\n  color: var(--dt-text-muted);\n}\n.NoteApp_searchInput:focus {\n  border-color: var(--dt-accent);\n}\n.NoteApp_newNoteBtn {\n  display: flex;\n  width: 30px;\n  height: 30px;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--dt-border);\n  border-radius: 6px;\n  background: var(--dt-surface);\n  color: var(--dt-text);\n  cursor: pointer;\n  font-size: 18px;\n  line-height: 1;\n  transition:\n    background 0.15s,\n    border-color 0.15s,\n    color 0.15s;\n}\n.NoteApp_newNoteBtn:hover {\n  border-color: var(--dt-accent);\n  background: var(--dt-surface-hover);\n  color: var(--dt-accent);\n}\n.NoteApp_noteList {\n  flex: 1;\n  overflow-y: auto;\n}\n.NoteApp_noteItem {\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--dt-border);\n  cursor: pointer;\n  transition: background 0.1s;\n}\n.NoteApp_noteItem:hover {\n  background: var(--dt-surface-hover);\n}\n.NoteApp_noteItemActive {\n  padding-left: 11px;\n  border-left: 3px solid var(--dt-accent);\n  background: var(--dt-surface);\n}\n.NoteApp_noteTitle {\n  overflow: hidden;\n  margin-bottom: 4px;\n  font-size: 14px;\n  font-weight: 500;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.NoteApp_notePreview {\n  overflow: hidden;\n  margin-bottom: 4px;\n  color: var(--dt-text-muted);\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.NoteApp_noteDate {\n  color: var(--dt-text-muted);\n  opacity: 0.7;\n  font-size: 11px;\n}\n.NoteApp_emptyState {\n  padding: 24px 14px;\n  color: var(--dt-text-muted);\n  font-size: 13px;\n  text-align: center;\n}\n.NoteApp_editorPanel {\n  display: flex;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  overflow: hidden;\n}\n.NoteApp_editorHeader {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--dt-border);\n}\n.NoteApp_editorTitle {\n  font-size: 16px;\n  font-weight: 600;\n}\n.NoteApp_editorTags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n.NoteApp_editorTag {\n  padding: 2px 8px;\n  border: 1px solid var(--dt-border);\n  border-radius: 4px;\n  background: var(--dt-surface);\n  color: var(--dt-accent);\n  font-size: 11px;\n}\n.NoteApp_editorBody {\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n}\n.NoteApp_editorPlaceholder {\n  display: flex;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n  color: var(--dt-text-muted);\n  font-size: 14px;\n}\n.NoteApp_editorBody .milkdown {\n  height: 100%;\n  background: transparent;\n  color: var(--dt-text);\n}\n.NoteApp_editorBody .milkdown .editor {\n  min-height: 100%;\n  padding: 16px 20px;\n  outline: none;\n  font-family: var(--font-sans);\n  font-size: 14px;\n  line-height: 1.65;\n}\n.NoteApp_editorBody .milkdown .editor h1 {\n  margin: 0.8em 0 0.4em;\n  font-size: 1.6em;\n}\n.NoteApp_editorBody .milkdown .editor h2 {\n  margin: 0.7em 0 0.35em;\n  font-size: 1.35em;\n}\n.NoteApp_editorBody .milkdown .editor h3 {\n  margin: 0.6em 0 0.3em;\n  font-size: 1.15em;\n}\n.NoteApp_editorBody .milkdown .editor p {\n  margin: 0.5em 0;\n}\n.NoteApp_editorBody .milkdown .editor code {\n  padding: 2px 5px;\n  border-radius: 3px;\n  background: var(--dt-surface);\n  font-family: var(--font-mono);\n  font-size: 0.9em;\n}\n.NoteApp_editorBody .milkdown .editor pre {\n  overflow-x: auto;\n  margin: 0.8em 0;\n  padding: 12px 16px;\n  border: 1px solid var(--dt-border);\n  border-radius: 6px;\n  background: var(--dt-surface);\n}\n.NoteApp_editorBody .milkdown .editor pre code {\n  padding: 0;\n  border-radius: 0;\n  background: transparent;\n}\n.NoteApp_editorBody .milkdown .editor blockquote {\n  margin: 0.8em 0;\n  padding-left: 14px;\n  border-left: 3px solid var(--dt-accent);\n  color: var(--dt-text-muted);\n}\n.NoteApp_editorBody .milkdown .editor a {\n  color: var(--dt-accent);\n  text-decoration: none;\n}\n.NoteApp_editorBody .milkdown .editor a:hover {\n  text-decoration: underline;\n}\n.NoteApp_editorBody .milkdown .editor hr {\n  margin: 1.5em 0;\n  border: none;\n  border-top: 1px solid var(--dt-border);\n}\n.NoteApp_editorBody .milkdown .editor ul,\n.NoteApp_editorBody .milkdown .editor ol {\n  margin: 0.5em 0;\n  padding-left: 24px;\n}\n.NoteApp_editorBody .milkdown .editor li {\n  margin: 0.2em 0;\n}\n.NoteApp_editorBody .milkdown .editor img {\n  max-width: 100%;\n  border-radius: 6px;\n}\n.NoteApp_editorBody dt-markdown-editor {\n  display: block;\n  height: 100%;\n}\n.NoteApp_saveStatus {\n  color: var(--dt-text-muted);\n  opacity: 0.7;\n  font-size: 11px;\n}\n.NoteApp_saveStatusSaving {\n  color: var(--dt-warning);\n}\n/*# sourceMappingURL=frontend.css.map */\n";
+  document.head.appendChild(style);
+})();
+
+// desktalk-global:react
+var _mod = window.React;
+var Children = _mod.Children;
+var Component = _mod.Component;
+var Fragment = _mod.Fragment;
+var Profiler = _mod.Profiler;
+var PureComponent = _mod.PureComponent;
+var StrictMode = _mod.StrictMode;
+var Suspense = _mod.Suspense;
+var cloneElement = _mod.cloneElement;
+var createContext = _mod.createContext;
+var createElement = _mod.createElement;
+var createRef = _mod.createRef;
+var forwardRef = _mod.forwardRef;
+var isValidElement = _mod.isValidElement;
+var lazy = _mod.lazy;
+var memo = _mod.memo;
+var startTransition = _mod.startTransition;
+var useCallback = _mod.useCallback;
+var useContext = _mod.useContext;
+var useDebugValue = _mod.useDebugValue;
+var useDeferredValue = _mod.useDeferredValue;
+var useEffect = _mod.useEffect;
+var useId = _mod.useId;
+var useImperativeHandle = _mod.useImperativeHandle;
+var useInsertionEffect = _mod.useInsertionEffect;
+var useLayoutEffect = _mod.useLayoutEffect;
+var useMemo = _mod.useMemo;
+var useReducer = _mod.useReducer;
+var useRef = _mod.useRef;
+var useState = _mod.useState;
+var useSyncExternalStore = _mod.useSyncExternalStore;
+var useTransition = _mod.useTransition;
+var version = _mod.version;
+
+// desktalk-global:react-dom/client
+var _mod2 = window.ReactDOM;
+var createRoot = _mod2.createRoot;
+var hydrateRoot = _mod2.hydrateRoot;
+
+// src/frontend.tsx
+import { useCommand as useCommand2, MiniAppIdProvider, WindowIdProvider } from "@desktalk/sdk";
+
+// src/styles/NoteApp.module.css
+var NoteApp_default = {
+  root: "NoteApp_root",
+  rootCompact: "NoteApp_rootCompact",
+  listPanel: "NoteApp_listPanel",
+  listHeader: "NoteApp_listHeader",
+  searchInput: "NoteApp_searchInput",
+  newNoteBtn: "NoteApp_newNoteBtn",
+  noteList: "NoteApp_noteList",
+  noteItem: "NoteApp_noteItem",
+  noteItemActive: "NoteApp_noteItem NoteApp_noteItemActive",
+  emptyState: "NoteApp_emptyState",
+  noteTitle: "NoteApp_noteTitle",
+  notePreview: "NoteApp_notePreview",
+  noteDate: "NoteApp_noteDate",
+  editorPanel: "NoteApp_editorPanel",
+  editorHeader: "NoteApp_editorHeader",
+  editorTitle: "NoteApp_editorTitle",
+  editorTags: "NoteApp_editorTags",
+  editorTag: "NoteApp_editorTag",
+  editorBody: "NoteApp_editorBody",
+  editorPlaceholder: "NoteApp_editorPlaceholder",
+  saveStatus: "NoteApp_saveStatus",
+  saveStatusSaving: "NoteApp_saveStatus NoteApp_saveStatusSaving"
+};
+
+// desktalk-global:react/jsx-runtime
+var _mod3 = window.__desktalk_jsx_runtime;
+var jsx = _mod3.jsx;
+var jsxs = _mod3.jsxs;
+var jsxDEV = _mod3.jsxDEV;
+var Fragment2 = _mod3.Fragment;
+
+// src/components/NoteList.tsx
+function formatDate(iso) {
+  try {
+    const d = new Date(iso);
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - d.getTime();
+    const diffMins = Math.floor(diffMs / 6e4);
+    if (diffMins < 1) return "just now";
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  } catch {
+    return "";
+  }
+}
+function NoteList({
+  notes,
+  selectedId,
+  onSelect,
+  onCreate,
+  searchQuery,
+  onSearchChange
+}) {
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { className: NoteApp_default.listPanel, children: [
+    /* @__PURE__ */ jsxs("div", { className: NoteApp_default.listHeader, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: NoteApp_default.searchInput,
+          placeholder: "Search notes...",
+          value: searchQuery,
+          onChange: (e) => onSearchChange(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { className: NoteApp_default.newNoteBtn, onClick: onCreate, title: "New note", children: "+" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: NoteApp_default.noteList, children: notes.length === 0 ? /* @__PURE__ */ jsx("div", { className: NoteApp_default.emptyState, children: searchQuery ? "No notes match your search" : "No notes yet" }) : notes.map((note) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: note.id === selectedId ? NoteApp_default.noteItemActive : NoteApp_default.noteItem,
+        onClick: () => onSelect(note.id),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: NoteApp_default.noteTitle, children: note.title }),
+          /* @__PURE__ */ jsx("div", { className: NoteApp_default.notePreview, children: note.preview }),
+          /* @__PURE__ */ jsx("div", { className: NoteApp_default.noteDate, children: formatDate(note.updatedAt) })
+        ]
+      },
+      note.id
+    )) })
+  ] });
+}
+
+// ../ui/dist/index.js
+var J = `.dt-tooltip-popup {
+  position: fixed;
+  z-index: 2147483647;
+  padding: 6px 10px;
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  background: var(--dt-surface);
+  color: var(--dt-text-secondary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+}
+
+/* Tech corner accents */
+.dt-tooltip-popup::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid var(--dt-accent);
+  border-left: 1px solid var(--dt-accent);
+}
+
+.dt-tooltip-popup::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 4px;
+  height: 4px;
+  border-bottom: 1px solid var(--dt-accent);
+  border-right: 1px solid var(--dt-accent);
+}
+
+/* Arrow styling - tech/minimal */
+.dt-tooltip-popup[data-actual-placement='top'] {
+  transform: translateX(-50%);
+}
+
+.dt-tooltip-popup[data-actual-placement='top']::before {
+  top: auto;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-top-color: var(--dt-accent);
+  border-left: none;
+  border-right: none;
+}
+
+.dt-tooltip-popup[data-actual-placement='bottom'] {
+  transform: translateX(-50%);
+}
+
+.dt-tooltip-popup[data-actual-placement='bottom']::before {
+  bottom: auto;
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-bottom-color: var(--dt-accent);
+  border-left: none;
+  border-right: none;
+}
+
+.dt-tooltip-popup[data-actual-placement='left'] {
+  transform: translateY(-50%);
+}
+
+.dt-tooltip-popup[data-actual-placement='left']::before {
+  left: auto;
+  top: 50%;
+  right: -4px;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-left-color: var(--dt-accent);
+  border-top: none;
+  border-bottom: none;
+}
+
+.dt-tooltip-popup[data-actual-placement='right'] {
+  transform: translateY(-50%);
+}
+
+.dt-tooltip-popup[data-actual-placement='right']::before {
+  right: auto;
+  top: 50%;
+  left: -4px;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-right-color: var(--dt-accent);
+  border-top: none;
+  border-bottom: none;
+}
+`;
+var vt = "dt-tooltip-popup";
+var u = 8;
+var W = false;
+function ft() {
+  if (W) return;
+  let r = document.createElement("style");
+  r.setAttribute("data-dt-tooltip", ""), r.textContent = J, document.head.appendChild(r), W = true;
+}
+var x = class extends HTMLElement {
+  _popup = null;
+  _showTimeout = null;
+  _tooltipId = "";
+  _visible = false;
+  static get observedAttributes() {
+    return ["content", "placement", "delay", "disabled"];
+  }
+  get content() {
+    return this.getAttribute("content") ?? "";
+  }
+  set content(t) {
+    this.setAttribute("content", t);
+  }
+  get placement() {
+    let t = this.getAttribute("placement");
+    return t === "bottom" || t === "left" || t === "right" ? t : "top";
+  }
+  set placement(t) {
+    this.setAttribute("placement", t);
+  }
+  get delay() {
+    let t = Number(this.getAttribute("delay"));
+    return Number.isFinite(t) && t > 0 ? t : 0;
+  }
+  set delay(t) {
+    this.setAttribute("delay", String(t));
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" });
+    t.innerHTML = "<slot></slot>", this._tooltipId = `dt-tip-${Math.random().toString(36).slice(2, 9)}`;
+  }
+  connectedCallback() {
+    ft(), this.addEventListener("mouseenter", this._onEnter), this.addEventListener("mouseleave", this._onLeave), this.addEventListener("focusin", this._onEnter), this.addEventListener("focusout", this._onLeave);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("mouseenter", this._onEnter), this.removeEventListener("mouseleave", this._onLeave), this.removeEventListener("focusin", this._onEnter), this.removeEventListener("focusout", this._onLeave), this._hide();
+  }
+  attributeChangedCallback(t, e, n) {
+    t === "disabled" && this.disabled && this._hide(), t === "content" && this._popup && (this._popup.textContent = this.content);
+  }
+  _onEnter = () => {
+    if (this.disabled || !this.content) return;
+    this._showTimeout !== null && clearTimeout(this._showTimeout);
+    let t = () => {
+      this._createPopup(), this._position(), this._visible = true;
+    };
+    this.delay > 0 ? this._showTimeout = setTimeout(t, this.delay) : t();
+  };
+  _onLeave = () => {
+    this._hide();
+  };
+  _createPopup() {
+    if (this._popup) return;
+    let t = document.createElement("div");
+    t.className = vt, t.id = this._tooltipId, t.setAttribute("role", "tooltip"), t.textContent = this.content, document.body.appendChild(t), this._popup = t;
+    let e = this._getTrigger();
+    e && e.setAttribute("aria-describedby", this._tooltipId);
+  }
+  _hide() {
+    if (this._showTimeout !== null && (clearTimeout(this._showTimeout), this._showTimeout = null), this._popup) {
+      let t = this._getTrigger();
+      t && t.removeAttribute("aria-describedby"), this._popup.remove(), this._popup = null, this._visible = false;
+    }
+  }
+  _getTrigger() {
+    let e = this.shadowRoot?.querySelector("slot")?.assignedElements();
+    return e && e.length > 0 ? e[0] : null;
+  }
+  _position() {
+    let t = this._popup;
+    if (!t) return;
+    let e = this.getBoundingClientRect(), n = t.getBoundingClientRect(), i = window.innerWidth, s = window.innerHeight, o = this.placement;
+    o === "top" && e.top - n.height - u < 0 ? o = "bottom" : o === "bottom" && e.bottom + n.height + u > s ? o = "top" : o === "left" && e.left - n.width - u < 0 ? o = "right" : o === "right" && e.right + n.width + u > i && (o = "left"), t.setAttribute("data-actual-placement", o);
+    let a, d;
+    switch (o) {
+      case "top":
+        d = e.left + e.width / 2, a = e.top - n.height - u;
+        break;
+      case "bottom":
+        d = e.left + e.width / 2, a = e.bottom + u;
+        break;
+      case "left":
+        d = e.left - n.width - u, a = e.top + e.height / 2;
+        break;
+      case "right":
+        d = e.right + u, a = e.top + e.height / 2;
+        break;
+    }
+    t.style.left = `${d}px`, t.style.top = `${a}px`;
+  }
+};
+var G = `:host {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.dt-card-inner {
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  padding: 12px;
+  color: var(--dt-text);
+  font-family: var(--font-ui, 'Work Sans', system-ui, sans-serif);
+  position: relative;
+  height: 100%;
+}
+
+/* Corner accents for sci-fi feel */
+.dt-card-inner::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 8px;
+  height: 8px;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-card-inner::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 8px;
+  height: 8px;
+  border-bottom: 2px solid var(--dt-accent);
+  border-right: 2px solid var(--dt-accent);
+}
+
+:host([variant='outlined']) .dt-card-inner {
+  background: transparent;
+  border-style: dashed;
+}
+
+:host([variant='filled']) .dt-card-inner {
+  background: var(--dt-accent-subtle);
+  border-style: solid;
+}
+
+::slotted(h1),
+::slotted(h2),
+::slotted(h3),
+::slotted(h4),
+::slotted(h5),
+::slotted(h6) {
+  color: var(--dt-accent);
+  margin: 0 0 6px;
+  line-height: 1.2;
+  font-family: var(--font-display, 'Sora', system-ui, sans-serif);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-size: 0.85rem;
+}
+
+::slotted(p) {
+  color: var(--dt-text-secondary);
+  margin: 0 0 6px;
+  line-height: 1.4;
+  font-family: var(--font-ui, 'Work Sans', system-ui, sans-serif);
+  font-size: 0.8125rem;
+}
+
+::slotted(p:last-child) {
+  margin-bottom: 0;
+}
+`;
+var _t = "dt-card-inner";
+var w = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant"];
+  }
+  get variant() {
+    let t = this.getAttribute("variant");
+    return t === "outlined" || t === "filled" ? t : "default";
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = G, t.appendChild(e);
+    let n = document.createElement("div");
+    n.className = _t, n.innerHTML = "<slot></slot>", t.appendChild(n);
+  }
+};
+var j = `.dt-select-menu {
+  position: fixed;
+  z-index: 2147483646;
+  display: flex;
+  min-width: 200px;
+  max-width: min(300px, 72vw);
+  max-height: 240px;
+  flex-direction: column;
+  overflow-y: auto;
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  background: var(--dt-surface);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 100ms ease;
+}
+
+.dt-select-menu[data-open] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.dt-select-option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border: 0;
+  border-bottom: 1px solid var(--dt-border-subtle);
+  background: transparent;
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  user-select: none;
+}
+
+.dt-select-option:last-child {
+  border-bottom: none;
+}
+
+.dt-select-option:hover {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+.dt-select-option.dt-select-option--active {
+  background: var(--dt-accent-subtle);
+  color: var(--dt-accent);
+}
+
+.dt-select-option span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+`;
+var q = `:host {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  position: relative;
+}
+
+:host([disabled]) .dt-select-trigger {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.dt-select-trigger {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  background: var(--dt-surface);
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  user-select: none;
+  position: relative;
+}
+
+/* Corner accents */
+.dt-select-trigger::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid var(--dt-accent);
+  border-left: 1px solid var(--dt-accent);
+}
+
+.dt-select-trigger::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  height: 4px;
+  border-bottom: 1px solid var(--dt-accent);
+  border-right: 1px solid var(--dt-accent);
+}
+
+.dt-select-trigger:hover:not([disabled]) {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+.dt-select-trigger:hover:not([disabled])::before,
+.dt-select-trigger:hover:not([disabled])::after {
+  border-color: var(--dt-text-on-accent);
+}
+
+.dt-select-trigger[aria-expanded='true'] {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+.dt-select-trigger[aria-expanded='true']::before,
+.dt-select-trigger[aria-expanded='true']::after {
+  border-color: var(--dt-text-on-accent);
+}
+
+.dt-select-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dt-select-chevron {
+  color: currentColor;
+  font-size: 10px;
+  transition: transform 140ms ease;
+  opacity: 0.7;
+}
+
+.dt-select-trigger[aria-expanded='true'] .dt-select-chevron {
+  transform: rotate(180deg);
+}
+`;
+var xt = "dt-select-trigger";
+var K = "dt-select-label";
+var wt = "dt-select-chevron";
+var yt = "dt-select-menu";
+var kt = "dt-select-option";
+var Ct = "dt-select-option--active";
+var U = false;
+function Et() {
+  if (U) return;
+  let r = document.createElement("style");
+  r.setAttribute("data-dt-select", ""), r.textContent = j, document.head.appendChild(r), U = true;
+}
+var y = class extends HTMLElement {
+  _menu = null;
+  _trigger = null;
+  _options = [];
+  _open = false;
+  _menuId = "";
+  static get observedAttributes() {
+    return ["value", "placeholder", "disabled", "align"];
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(t) {
+    this.setAttribute("value", t);
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") ?? "Select\u2026";
+  }
+  set placeholder(t) {
+    this.setAttribute("placeholder", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get align() {
+    return this.getAttribute("align") === "right" ? "right" : "left";
+  }
+  set align(t) {
+    this.setAttribute("align", t);
+  }
+  get options() {
+    return this._options;
+  }
+  set options(t) {
+    this._options = t, this._updateLabel(), this._open && this._renderMenuItems();
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = q, t.appendChild(e);
+    let n = document.createElement("button");
+    n.type = "button", n.className = xt, n.setAttribute("aria-haspopup", "listbox"), n.setAttribute("aria-expanded", "false");
+    let i = document.createElement("span");
+    i.className = K, n.appendChild(i);
+    let s = document.createElement("span");
+    s.className = wt, s.setAttribute("aria-hidden", "true"), s.textContent = "\u25BE", n.appendChild(s), t.appendChild(n), this._trigger = n, this._menuId = `dt-sel-${Math.random().toString(36).slice(2, 9)}`;
+  }
+  connectedCallback() {
+    Et(), this._trigger.addEventListener("click", this._onTriggerClick), this._updateLabel();
+  }
+  disconnectedCallback() {
+    this._trigger.removeEventListener("click", this._onTriggerClick), this._close();
+  }
+  attributeChangedCallback(t) {
+    t === "value" && (this._updateLabel(), this._open && this._renderMenuItems()), t === "placeholder" && !this.value && this._updateLabel(), t === "disabled" && this.disabled && this._close();
+  }
+  _updateLabel() {
+    let t = this._trigger.querySelector(`.${K}`), e = this._options.find((n) => n.value === this.value);
+    t.textContent = e?.label ?? this.placeholder;
+  }
+  _onTriggerClick = () => {
+    this.disabled || (this._open ? this._close() : this._openMenu());
+  };
+  _openMenu() {
+    if (this._open) return;
+    let t = document.createElement("div");
+    t.className = yt, t.id = this._menuId, t.setAttribute("role", "listbox"), document.body.appendChild(t), this._menu = t, this._renderMenuItems(), this._position(), requestAnimationFrame(() => {
+      t.setAttribute("data-open", "");
+    }), this._open = true, this._trigger.setAttribute("aria-expanded", "true"), requestAnimationFrame(() => {
+      document.addEventListener("mousedown", this._onOutsideClick), document.addEventListener("keydown", this._onKeyDown);
+    });
+  }
+  _close() {
+    if (this._open) {
+      if (document.removeEventListener("mousedown", this._onOutsideClick), document.removeEventListener("keydown", this._onKeyDown), this._menu) {
+        this._menu.removeAttribute("data-open");
+        let t = this._menu;
+        setTimeout(() => t.remove(), 140), this._menu = null;
+      }
+      this._open = false, this._trigger.setAttribute("aria-expanded", "false");
+    }
+  }
+  _onOutsideClick = (t) => {
+    let e = t.target;
+    this._menu?.contains(e) || this.contains(e) || this._close();
+  };
+  _onKeyDown = (t) => {
+    t.key === "Escape" && (this._close(), this._trigger.focus());
+  };
+  _renderMenuItems() {
+    let t = this._menu;
+    if (t) {
+      t.innerHTML = "";
+      for (let e of this._options) {
+        let n = document.createElement("button");
+        n.type = "button", n.className = kt, n.setAttribute("role", "option"), n.setAttribute("aria-selected", String(e.value === this.value)), e.value === this.value && n.classList.add(Ct);
+        let i = document.createElement("span");
+        i.textContent = e.label, n.appendChild(i), n.addEventListener("click", () => {
+          this._selectValue(e.value);
+        }), t.appendChild(n);
+      }
+    }
+  }
+  _selectValue(t) {
+    let e = this.value;
+    this.value = t, this._updateLabel(), this._close(), t !== e && this.dispatchEvent(new CustomEvent("dt-change", { detail: { value: t }, bubbles: true, composed: true }));
+  }
+  _position() {
+    let t = this._menu;
+    if (!t) return;
+    let e = this.getBoundingClientRect(), n = 10, i = Math.max(e.width, 240), s = e.bottom + n, o = t.scrollHeight || 260, a = window.innerHeight;
+    if (s + o > a && e.top - o - n > 0 && (s = e.top - o - n), t.style.minWidth = `${i}px`, this.align === "right") {
+      let d = window.innerWidth;
+      t.style.right = `${d - e.right}px`, t.style.left = "auto";
+    } else t.style.left = `${e.left}px`, t.style.right = "auto";
+    t.style.top = `${s}px`;
+  }
+};
+var Y = `:host {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.dt-grid-inner {
+  display: grid;
+  gap: var(--grid-gap, 12px);
+  grid-template-columns: repeat(auto-fit, minmax(var(--min-width, 220px), 1fr));
+}
+
+:host([cols='1']) .dt-grid-inner {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+:host([cols='2']) .dt-grid-inner {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+:host([cols='3']) .dt-grid-inner {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+:host([cols='4']) .dt-grid-inner {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+:host([cols='5']) .dt-grid-inner {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+:host([cols='6']) .dt-grid-inner {
+  grid-template-columns: repeat(6, 1fr);
+}
+
+@media (max-width: 480px) {
+  :host([cols='2']) .dt-grid-inner,
+  :host([cols='3']) .dt-grid-inner,
+  :host([cols='4']) .dt-grid-inner,
+  :host([cols='5']) .dt-grid-inner,
+  :host([cols='6']) .dt-grid-inner {
+    grid-template-columns: 1fr;
+  }
+}
+
+:host([gap='0']) .dt-grid-inner {
+  --grid-gap: 0;
+}
+:host([gap='4']) .dt-grid-inner {
+  --grid-gap: 4px;
+}
+:host([gap='8']) .dt-grid-inner {
+  --grid-gap: 8px;
+}
+:host([gap='12']) .dt-grid-inner {
+  --grid-gap: 12px;
+}
+:host([gap='16']) .dt-grid-inner {
+  --grid-gap: 16px;
+}
+:host([gap='20']) .dt-grid-inner {
+  --grid-gap: 20px;
+}
+:host([gap='24']) .dt-grid-inner {
+  --grid-gap: 24px;
+}
+:host([gap='32']) .dt-grid-inner {
+  --grid-gap: 32px;
+}
+
+:host([min-width='150']) .dt-grid-inner {
+  --min-width: 150px;
+}
+:host([min-width='180']) .dt-grid-inner {
+  --min-width: 180px;
+}
+:host([min-width='200']) .dt-grid-inner {
+  --min-width: 200px;
+}
+:host([min-width='220']) .dt-grid-inner {
+  --min-width: 220px;
+}
+:host([min-width='260']) .dt-grid-inner {
+  --min-width: 260px;
+}
+:host([min-width='300']) .dt-grid-inner {
+  --min-width: 300px;
+}
+
+::slotted(*) {
+  min-width: 0;
+}
+`;
+var St = "dt-grid-inner";
+var k = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["cols", "gap", "min-width"];
+  }
+  get cols() {
+    let t = this.getAttribute("cols");
+    return t === "1" || t === "2" || t === "3" || t === "4" || t === "5" || t === "6" ? t : null;
+  }
+  set cols(t) {
+    t === null ? this.removeAttribute("cols") : this.setAttribute("cols", t);
+  }
+  get gap() {
+    let t = this.getAttribute("gap");
+    return t === "0" || t === "4" || t === "8" || t === "12" || t === "20" || t === "24" || t === "32" ? t : "16";
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get minWidth() {
+    let t = this.getAttribute("min-width");
+    return t === "150" || t === "180" || t === "200" || t === "260" || t === "300" ? t : "220";
+  }
+  set minWidth(t) {
+    this.setAttribute("min-width", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = Y, t.appendChild(e);
+    let n = document.createElement("div");
+    n.className = St, n.innerHTML = "<slot></slot>", t.appendChild(n);
+  }
+};
+var Z = `:host {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.dt-stack-inner {
+  display: flex;
+  flex-direction: var(--flex-direction, column);
+  gap: var(--stack-gap, 12px);
+  align-items: var(--align-items, stretch);
+}
+
+:host([direction='column']) .dt-stack-inner {
+  --flex-direction: column;
+}
+:host([direction='row']) .dt-stack-inner {
+  --flex-direction: row;
+}
+
+:host([gap='0']) .dt-stack-inner {
+  --stack-gap: 0;
+}
+:host([gap='4']) .dt-stack-inner {
+  --stack-gap: 4px;
+}
+:host([gap='8']) .dt-stack-inner {
+  --stack-gap: 8px;
+}
+:host([gap='12']) .dt-stack-inner {
+  --stack-gap: 12px;
+}
+:host([gap='16']) .dt-stack-inner {
+  --stack-gap: 16px;
+}
+:host([gap='20']) .dt-stack-inner {
+  --stack-gap: 20px;
+}
+:host([gap='24']) .dt-stack-inner {
+  --stack-gap: 24px;
+}
+:host([gap='32']) .dt-stack-inner {
+  --stack-gap: 32px;
+}
+
+:host([align='start']) .dt-stack-inner {
+  --align-items: flex-start;
+}
+:host([align='center']) .dt-stack-inner {
+  --align-items: center;
+}
+:host([align='end']) .dt-stack-inner {
+  --align-items: flex-end;
+}
+:host([align='stretch']) .dt-stack-inner {
+  --align-items: stretch;
+}
+
+@media (max-width: 480px) {
+  :host([direction='row']) .dt-stack-inner {
+    --flex-direction: column;
+  }
+}
+
+::slotted(*) {
+  min-width: 0;
+}
+`;
+var Dt = "dt-stack-inner";
+function $(r) {
+  return r === "row" || r === "horizontal" ? "row" : "column";
+}
+var C = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["direction", "gap", "align"];
+  }
+  get direction() {
+    return $(this.getAttribute("direction"));
+  }
+  set direction(t) {
+    this.setAttribute("direction", $(t));
+  }
+  get gap() {
+    let t = this.getAttribute("gap");
+    return t === "0" || t === "4" || t === "8" || t === "12" || t === "20" || t === "24" || t === "32" ? t : "16";
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get align() {
+    let t = this.getAttribute("align");
+    return t === "start" || t === "center" || t === "end" ? t : "stretch";
+  }
+  set align(t) {
+    this.setAttribute("align", t);
+  }
+  connectedCallback() {
+    this.#t();
+  }
+  attributeChangedCallback(t) {
+    t === "direction" && this.#t();
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = Z, t.appendChild(e);
+    let n = document.createElement("div");
+    n.className = Dt, n.innerHTML = "<slot></slot>", t.appendChild(n);
+  }
+  #t() {
+    let t = this.getAttribute("direction"), e = $(t);
+    t !== null && t !== e && this.setAttribute("direction", e);
+  }
+};
+var Q = `:host {
+  display: block;
+}
+
+.dt-stat-inner {
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  padding: 12px;
+  font-family: var(--font-ui, 'Work Sans', system-ui, sans-serif);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+}
+
+/* Corner accents */
+.dt-stat-inner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 6px;
+  border-top: 1px solid var(--dt-accent);
+  border-left: 1px solid var(--dt-accent);
+}
+
+.dt-stat-inner .label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--dt-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.dt-stat-inner .value {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--dt-accent);
+  line-height: 1.1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: var(--font-display, 'Sora', system-ui, sans-serif);
+}
+
+.dt-stat-inner .description {
+  font-size: 0.75rem;
+  color: var(--dt-text-secondary);
+  line-height: 1.3;
+}
+
+/* Size variants */
+:host([size='sm']) .dt-stat-inner .value {
+  font-size: 1.125rem;
+}
+
+:host([size='sm']) .dt-stat-inner {
+  padding: 8px;
+}
+
+:host([size='lg']) .dt-stat-inner .value {
+  font-size: 2rem;
+}
+
+:host([size='lg']) .dt-stat-inner {
+  padding: 16px;
+}
+
+/* Variant: outlined */
+:host([variant='outlined']) .dt-stat-inner {
+  background: transparent;
+  border-style: dashed;
+}
+
+/* Variant: filled */
+:host([variant='filled']) .dt-stat-inner {
+  background: var(--dt-accent-subtle);
+  border-style: solid;
+}
+
+/* Trend indicators */
+.dt-stat-inner .trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  margin-top: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dt-stat-inner .trend.positive {
+  color: var(--dt-success);
+}
+
+.dt-stat-inner .trend.negative {
+  color: var(--dt-danger);
+}
+
+.dt-stat-inner .trend.neutral {
+  color: var(--dt-text-muted);
+}
+`;
+var At = "dt-stat-inner";
+var E = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["label", "value", "description", "size", "variant", "trend", "trend-value"];
+  }
+  _container;
+  _labelEl;
+  _valueEl;
+  _descEl;
+  _trendEl;
+  get label() {
+    return this.getAttribute("label");
+  }
+  set label(t) {
+    t === null ? this.removeAttribute("label") : this.setAttribute("label", t);
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
+  set value(t) {
+    t === null ? this.removeAttribute("value") : this.setAttribute("value", t);
+  }
+  get description() {
+    return this.getAttribute("description");
+  }
+  set description(t) {
+    t === null ? this.removeAttribute("description") : this.setAttribute("description", t);
+  }
+  get size() {
+    let t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get variant() {
+    let t = this.getAttribute("variant");
+    return t === "outlined" || t === "filled" ? t : "default";
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get trend() {
+    let t = this.getAttribute("trend");
+    return t === "up" || t === "down" || t === "neutral" ? t : null;
+  }
+  set trend(t) {
+    t === null ? this.removeAttribute("trend") : this.setAttribute("trend", t);
+  }
+  get trendValue() {
+    return this.getAttribute("trend-value");
+  }
+  set trendValue(t) {
+    t === null ? this.removeAttribute("trend-value") : this.setAttribute("trend-value", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = Q, t.appendChild(e), this._container = document.createElement("div"), this._container.className = At, this._labelEl = document.createElement("div"), this._labelEl.className = "label", this._container.appendChild(this._labelEl), this._valueEl = document.createElement("div"), this._valueEl.className = "value", this._container.appendChild(this._valueEl), this._descEl = document.createElement("div"), this._descEl.className = "description", this._container.appendChild(this._descEl), this._trendEl = document.createElement("div"), this._trendEl.className = "trend", this._container.appendChild(this._trendEl), t.appendChild(this._container), this._render();
+  }
+  attributeChangedCallback(t, e, n) {
+    (t === "label" || t === "value" || t === "description" || t === "size" || t === "variant" || t === "trend" || t === "trend-value") && this._render();
+  }
+  _render() {
+    this._labelEl.textContent = this.label ?? "", this._labelEl.style.display = this.label ? "block" : "none", this._valueEl.textContent = this.value ?? "", this._valueEl.style.display = this.value ? "block" : "none", this._descEl.textContent = this.description ?? "", this._descEl.style.display = this.description ? "block" : "none";
+    let t = this.trend, e = this.trendValue;
+    if (t && e) {
+      this._trendEl.style.display = "inline-flex", this._trendEl.className = `trend ${t === "up" ? "positive" : t === "down" ? "negative" : "neutral"}`;
+      let n = "";
+      t === "up" ? n = "\u2191" : t === "down" ? n = "\u2193" : n = "\u2192", this._trendEl.textContent = `${n} ${e}`;
+    } else this._trendEl.style.display = "none";
+  }
+};
+var tt = `:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.dt-badge-inner {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border: 1px solid;
+  border-radius: 2px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  line-height: 1.2;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Variant: accent (default) */
+:host([variant='accent']) .dt-badge-inner,
+.dt-badge-inner {
+  background: var(--dt-accent-subtle);
+  border-color: var(--dt-accent);
+  color: var(--dt-accent);
+}
+
+/* Variant: success */
+:host([variant='success']) .dt-badge-inner {
+  background: var(--dt-success-subtle);
+  border-color: var(--dt-success);
+  color: var(--dt-success);
+}
+
+/* Variant: danger */
+:host([variant='danger']) .dt-badge-inner {
+  background: var(--dt-danger-subtle);
+  border-color: var(--dt-danger);
+  color: var(--dt-danger);
+}
+
+/* Variant: warning */
+:host([variant='warning']) .dt-badge-inner {
+  background: var(--dt-warning-subtle);
+  border-color: var(--dt-warning);
+  color: var(--dt-warning);
+}
+
+/* Variant: info */
+:host([variant='info']) .dt-badge-inner {
+  background: var(--dt-info-subtle);
+  border-color: var(--dt-info);
+  color: var(--dt-info);
+}
+
+/* Variant: default/neutral */
+:host([variant='default']) .dt-badge-inner,
+:host([variant='neutral']) .dt-badge-inner {
+  background: transparent;
+  border-color: var(--dt-border);
+  color: var(--dt-text-secondary);
+}
+
+/* Size variants */
+:host([size='sm']) .dt-badge-inner {
+  padding: 1px 4px;
+  font-size: 0.625rem;
+}
+
+:host([size='lg']) .dt-badge-inner {
+  padding: 3px 8px;
+  font-size: 0.75rem;
+}
+`;
+var Mt = "dt-badge-inner";
+var S = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "size", "text"];
+  }
+  _container;
+  _slot;
+  get variant() {
+    let t = this.getAttribute("variant");
+    return t === "success" || t === "danger" || t === "warning" || t === "info" || t === "default" || t === "neutral" ? t : "accent";
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get size() {
+    let t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get text() {
+    return this.getAttribute("text");
+  }
+  set text(t) {
+    t === null ? this.removeAttribute("text") : this.setAttribute("text", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = tt, t.appendChild(e), this._container = document.createElement("span"), this._container.className = Mt;
+    let n = this.text;
+    n !== null ? this._container.textContent = n : (this._slot = document.createElement("slot"), this._container.appendChild(this._slot)), t.appendChild(this._container);
+  }
+  attributeChangedCallback(t, e, n) {
+    t === "text" && this._render();
+  }
+  _render() {
+    let t = this.text;
+    t !== null && (this._container.textContent = t);
+  }
+};
+var et = `:host {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.dt-button-inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border: 1px solid var(--dt-accent);
+  border-radius: 2px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-family: var(--font-ui, 'Work Sans', system-ui, sans-serif);
+  line-height: 1.2;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  background: var(--dt-surface);
+  color: var(--dt-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  position: relative;
+}
+
+/* Corner accents */
+.dt-button-inner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 4px;
+  border-top: 1px solid var(--dt-accent);
+  border-left: 1px solid var(--dt-accent);
+}
+
+.dt-button-inner::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  height: 4px;
+  border-bottom: 1px solid var(--dt-accent);
+  border-right: 1px solid var(--dt-accent);
+}
+
+.dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+.dt-button-inner:hover:not(:disabled)::before,
+.dt-button-inner:hover:not(:disabled)::after {
+  border-color: var(--dt-text-on-accent);
+}
+
+.dt-button-inner:active:not(:disabled) {
+  background: var(--dt-accent-active);
+}
+
+.dt-button-inner:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  border-color: var(--dt-border);
+  color: var(--dt-text-muted);
+}
+
+.dt-button-inner:disabled::before,
+.dt-button-inner:disabled::after {
+  border-color: var(--dt-border);
+}
+
+/* Variant: primary - filled accent */
+:host([variant='primary']) .dt-button-inner {
+  background: var(--dt-accent);
+  color: var(--dt-text-on-accent);
+}
+
+:host([variant='primary']) .dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-accent-hover);
+}
+
+/* Variant: secondary - outlined */
+:host([variant='secondary']) .dt-button-inner {
+  background: transparent;
+  border-color: var(--dt-border);
+  color: var(--dt-text);
+}
+
+:host([variant='secondary']) .dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-surface-hover);
+  border-color: var(--dt-accent);
+  color: var(--dt-accent);
+}
+
+/* Variant: ghost - minimal */
+:host([variant='ghost']) .dt-button-inner {
+  background: transparent;
+  border-color: transparent;
+  color: var(--dt-text-secondary);
+}
+
+:host([variant='ghost']) .dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-surface);
+  border-color: var(--dt-border);
+  color: var(--dt-text);
+}
+
+:host([variant='ghost']) .dt-button-inner::before,
+:host([variant='ghost']) .dt-button-inner::after {
+  display: none;
+}
+
+/* Variant: danger */
+:host([variant='danger']) .dt-button-inner {
+  background: transparent;
+  border-color: var(--dt-danger);
+  color: var(--dt-danger);
+}
+
+:host([variant='danger']) .dt-button-inner:hover:not(:disabled) {
+  background: var(--dt-danger);
+  color: var(--dt-text-on-accent);
+}
+
+:host([variant='danger']) .dt-button-inner::before,
+:host([variant='danger']) .dt-button-inner::after {
+  border-color: var(--dt-danger);
+}
+
+:host([variant='danger']) .dt-button-inner:hover:not(:disabled)::before,
+:host([variant='danger']) .dt-button-inner:hover:not(:disabled)::after {
+  border-color: var(--dt-text-on-accent);
+}
+
+/* Size: sm */
+:host([size='sm']) .dt-button-inner {
+  padding: 4px 8px;
+  font-size: 0.75rem;
+}
+
+/* Size: lg */
+:host([size='lg']) .dt-button-inner {
+  padding: 8px 16px;
+  font-size: 0.875rem;
+}
+
+:host([fullwidth]) .dt-button-inner {
+  width: 100%;
+}
+
+::slotted([slot='icon']) {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+}
+`;
+var Tt = "dt-button-inner";
+var D = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["variant", "size", "disabled", "fullwidth", "type"];
+  }
+  _button;
+  _slot;
+  get variant() {
+    let t = this.getAttribute("variant");
+    return t === "secondary" || t === "ghost" || t === "danger" ? t : "primary";
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get size() {
+    let t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get fullwidth() {
+    return this.hasAttribute("fullwidth");
+  }
+  set fullwidth(t) {
+    t ? this.setAttribute("fullwidth", "") : this.removeAttribute("fullwidth");
+  }
+  get type() {
+    let t = this.getAttribute("type");
+    return t === "submit" || t === "reset" ? t : "button";
+  }
+  set type(t) {
+    this.setAttribute("type", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = et, t.appendChild(e), this._button = document.createElement("button"), this._button.className = Tt, this._button.type = this.type, this._button.disabled = this.disabled, this._slot = document.createElement("slot"), this._button.appendChild(this._slot), t.appendChild(this._button);
+  }
+  attributeChangedCallback(t, e, n) {
+    switch (t) {
+      case "disabled":
+        this._button.disabled = this.disabled;
+        break;
+      case "type":
+        this._button.type = this.type;
+        break;
+    }
+  }
+};
+var nt = `:host {
+  display: block;
+}
+
+.dt-divider-inner {
+  border: none;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+/* Horizontal (default) */
+:host([direction='horizontal']) .dt-divider-inner,
+.dt-divider-inner {
+  width: 100%;
+  height: 1px;
+  background: var(--dt-accent);
+  opacity: 0.5;
+}
+
+/* Vertical */
+:host([direction='vertical']) .dt-divider-inner {
+  width: 1px;
+  height: 100%;
+  min-height: 1em;
+  background: var(--dt-accent);
+  opacity: 0.5;
+}
+
+/* Style variants */
+:host([style-variant='subtle']) .dt-divider-inner {
+  background: var(--dt-border);
+  opacity: 1;
+}
+
+:host([style-variant='strong']) .dt-divider-inner {
+  background: var(--dt-accent);
+  opacity: 1;
+  height: 2px;
+}
+
+:host([direction='vertical'][style-variant='strong']) .dt-divider-inner {
+  width: 2px;
+  height: 100%;
+}
+
+/* Spacing */
+:host([spacing='sm']) .dt-divider-inner {
+  margin: 6px 0;
+}
+:host([spacing='md']) .dt-divider-inner {
+  margin: 12px 0;
+}
+:host([spacing='lg']) .dt-divider-inner {
+  margin: 18px 0;
+}
+
+:host([direction='vertical'][spacing='sm']) .dt-divider-inner {
+  margin: 0 6px;
+}
+:host([direction='vertical'][spacing='md']) .dt-divider-inner {
+  margin: 0 12px;
+}
+:host([direction='vertical'][spacing='lg']) .dt-divider-inner {
+  margin: 0 18px;
+}
+`;
+var zt = "dt-divider-inner";
+var A = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["direction", "style-variant", "spacing"];
+  }
+  get direction() {
+    return this.getAttribute("direction") === "vertical" ? "vertical" : "horizontal";
+  }
+  set direction(t) {
+    this.setAttribute("direction", t);
+  }
+  get styleVariant() {
+    let t = this.getAttribute("style-variant");
+    return t === "subtle" || t === "strong" ? t : "default";
+  }
+  set styleVariant(t) {
+    this.setAttribute("style-variant", t);
+  }
+  get spacing() {
+    let t = this.getAttribute("spacing");
+    return t === "sm" || t === "md" || t === "lg" ? t : null;
+  }
+  set spacing(t) {
+    t === null ? this.removeAttribute("spacing") : this.setAttribute("spacing", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = nt, t.appendChild(e);
+    let n = document.createElement("hr");
+    n.className = zt, t.appendChild(n);
+  }
+};
+var rt = `:host {
+  display: block;
+  min-height: 180px;
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+}
+
+.dt-table-view {
+  display: flex;
+  flex-direction: column;
+  min-height: inherit;
+  height: 100%;
+  overflow: hidden;
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+  position: relative;
+}
+
+.dt-table-view::before,
+.dt-table-view::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.dt-table-view::before {
+  top: -1px;
+  left: -1px;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-table-view::after {
+  right: -1px;
+  bottom: -1px;
+  border-right: 2px solid var(--dt-accent);
+  border-bottom: 2px solid var(--dt-accent);
+}
+
+.dt-table-scroll {
+  min-height: inherit;
+  height: 100%;
+  overflow: auto;
+}
+
+.dt-table-header,
+.dt-table-row {
+  display: grid;
+  grid-template-columns: var(--dt-table-columns, minmax(0, 1fr));
+  min-width: fit-content;
+}
+
+.dt-table-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: color-mix(in srgb, var(--dt-surface) 88%, var(--dt-accent) 12%);
+  border-bottom: 1px solid var(--dt-border);
+}
+
+.dt-table-header-cell,
+.dt-table-cell {
+  min-width: 0;
+  padding: 10px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+}
+
+.dt-table-header-cell {
+  color: var(--dt-accent);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.dt-table-header-cell--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.dt-table-header-cell--sortable:hover {
+  background: var(--dt-surface-hover);
+}
+
+.dt-table-header-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dt-table-sort-indicator {
+  color: var(--dt-text-secondary);
+  font-size: 0.7rem;
+}
+
+.dt-table-body {
+  position: relative;
+}
+
+.dt-table-canvas {
+  position: relative;
+}
+
+.dt-table-row {
+  position: absolute;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--dt-border-subtle);
+}
+
+.dt-table-row--clickable {
+  cursor: pointer;
+}
+
+.dt-table-row--clickable:hover {
+  background: var(--dt-surface-hover);
+}
+
+:host([striped]) .dt-table-row:nth-child(even) {
+  background: color-mix(in srgb, var(--dt-surface) 92%, var(--dt-accent) 8%);
+}
+
+:host([bordered]) .dt-table-header-cell,
+:host([bordered]) .dt-table-cell {
+  border-right: 1px solid var(--dt-border-subtle);
+}
+
+:host([bordered]) .dt-table-header-cell:last-child,
+:host([bordered]) .dt-table-cell:last-child {
+  border-right: 0;
+}
+
+.dt-table-cell[data-align='center'],
+.dt-table-header-cell[data-align='center'] {
+  text-align: center;
+}
+
+.dt-table-cell[data-align='right'],
+.dt-table-header-cell[data-align='right'] {
+  text-align: right;
+}
+
+.dt-table-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 140px;
+  padding: 20px;
+  color: var(--dt-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+}
+`;
+function Lt(r) {
+  return r == null || r === false ? null : r === true ? "" : String(r);
+}
+function Ht(r, t) {
+  let e = r.querySelectorAll("*");
+  for (let n of e) {
+    let i = n.getAttribute("data-field");
+    if (i) {
+      let s = t[i];
+      n.textContent = s == null ? "" : String(s);
+    }
+    for (let s of n.getAttributeNames()) {
+      if (s === "data-field" || !s.startsWith("data-field-")) continue;
+      let o = s.slice(11);
+      if (!o) continue;
+      let a = n.getAttribute(s);
+      if (!a) continue;
+      let d = Lt(t[a]);
+      d === null ? n.removeAttribute(o) : n.setAttribute(o, d);
+    }
+  }
+}
+function M(r, t) {
+  let e = r.content.cloneNode(true);
+  return Ht(e, t), e;
+}
+var m = class {
+  _count = 0;
+  _estimateSize = 56;
+  _overscan = 5;
+  _fixedSize = null;
+  _viewportHeight = 0;
+  _scrollTop = 0;
+  _sizes = /* @__PURE__ */ new Map();
+  constructor(t = {}) {
+    this._count = t.count ?? 0, this._estimateSize = t.estimateSize ?? 56, this._overscan = t.overscan ?? 5, this._fixedSize = t.fixedSize ?? null;
+  }
+  setCount(t) {
+    this._count = Math.max(0, t);
+    for (let e of this._sizes.keys()) e >= this._count && this._sizes.delete(e);
+  }
+  setViewportHeight(t) {
+    this._viewportHeight = Math.max(0, t);
+  }
+  setScrollTop(t) {
+    this._scrollTop = Math.max(0, t);
+  }
+  setEstimateSize(t) {
+    this._estimateSize = Math.max(1, t);
+  }
+  setFixedSize(t) {
+    this._fixedSize = t && t > 0 ? t : null;
+  }
+  resetMeasurements() {
+    this._sizes.clear();
+  }
+  measure(t, e) {
+    if (this._fixedSize !== null || t < 0 || t >= this._count) return 0;
+    let n = Math.max(1, Math.round(e)), i = this._sizes.get(t);
+    return i === n ? 0 : (this._sizes.set(t, n), this.getOffset(t + 1) <= this._scrollTop ? n - (i ?? this._estimateSize) : 0);
+  }
+  getOffset(t) {
+    if (t <= 0) return 0;
+    let e = Math.min(t, this._count);
+    if (this._fixedSize !== null) return e * this._fixedSize;
+    let n = 0;
+    for (let i = 0; i < e; i += 1) n += this._sizes.get(i) ?? this._estimateSize;
+    return n;
+  }
+  getTotalHeight() {
+    return this.getOffset(this._count);
+  }
+  getRange() {
+    if (this._count === 0) return { start: 0, end: 0, paddingTop: 0, paddingBottom: 0, totalHeight: 0 };
+    if (this._fixedSize !== null) {
+      let d = Math.max(1, Math.ceil(this._viewportHeight / this._fixedSize)), c = Math.max(0, Math.floor(this._scrollTop / this._fixedSize) - this._overscan), l = Math.min(this._count, c + d + this._overscan * 2), f = c * this._fixedSize, _ = this._count * this._fixedSize, h = Math.max(0, _ - f - (l - c) * this._fixedSize);
+      return { start: c, end: l, paddingTop: f, paddingBottom: h, totalHeight: _ };
+    }
+    let t = 0, e = 0;
+    for (; t < this._count; ) {
+      let d = this._sizes.get(t) ?? this._estimateSize;
+      if (e + d > this._scrollTop) break;
+      e += d, t += 1;
+    }
+    t = Math.max(0, t - this._overscan);
+    let n = this.getOffset(t), i = t, s = 0;
+    for (; i < this._count && s < this._viewportHeight; ) s += this._sizes.get(i) ?? this._estimateSize, i += 1;
+    i = Math.min(this._count, i + this._overscan);
+    let o = this.getTotalHeight(), a = Math.max(0, o - this.getOffset(i));
+    return { start: t, end: i, paddingTop: n, paddingBottom: a, totalHeight: o };
+  }
+};
+function Rt(r) {
+  return r && typeof r == "object" ? r : { value: r };
+}
+function Vt(r) {
+  return r === "center" || r === "right" ? r : "left";
+}
+var b = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["field", "header", "width", "min-width", "align"];
+  }
+  get field() {
+    return this.getAttribute("field") ?? "";
+  }
+  get header() {
+    return this.getAttribute("header") ?? this.field;
+  }
+  get width() {
+    return this.getAttribute("width") ?? "auto";
+  }
+  get minWidth() {
+    return this.getAttribute("min-width") ?? "0";
+  }
+  get align() {
+    return Vt(this.getAttribute("align"));
+  }
+  connectedCallback() {
+    this.hidden = true;
+  }
+  attributeChangedCallback() {
+    this.dispatchEvent(new CustomEvent("dt-column-change", { bubbles: true, composed: true }));
+  }
+};
+var T = class extends HTMLElement {
+  _rows = [];
+  _columns = [];
+  _virtualizer = new m({ estimateSize: 40, overscan: 5, fixedSize: 40 });
+  _root;
+  _scroll;
+  _header;
+  _body;
+  _canvas;
+  _emptyState;
+  _resizeObserver = null;
+  _mutationObserver = null;
+  _sortField = null;
+  _sortDirection = "asc";
+  static get observedAttributes() {
+    return ["row-height", "sortable", "striped", "bordered", "empty-text"];
+  }
+  get rows() {
+    return this._rows;
+  }
+  set rows(t) {
+    this._rows = Array.isArray(t) ? t : [], this._virtualizer.setCount(this._rows.length), this._render();
+  }
+  get rowHeight() {
+    let t = Number(this.getAttribute("row-height") ?? "40");
+    return Number.isFinite(t) && t > 0 ? t : 40;
+  }
+  set rowHeight(t) {
+    this.setAttribute("row-height", String(t));
+  }
+  get sortable() {
+    return this.hasAttribute("sortable");
+  }
+  get emptyText() {
+    return this.getAttribute("empty-text") ?? "No data";
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = rt, t.appendChild(e), this._root = document.createElement("div"), this._root.className = "dt-table-view", this._scroll = document.createElement("div"), this._scroll.className = "dt-table-scroll", this._scroll.addEventListener("scroll", this._onScroll, { passive: true }), this._header = document.createElement("div"), this._header.className = "dt-table-header", this._body = document.createElement("div"), this._body.className = "dt-table-body", this._canvas = document.createElement("div"), this._canvas.className = "dt-table-canvas", this._emptyState = document.createElement("div"), this._emptyState.className = "dt-table-empty", this._body.append(this._canvas, this._emptyState), this._scroll.append(this._header, this._body), this._root.appendChild(this._scroll), t.appendChild(this._root);
+  }
+  connectedCallback() {
+    this._virtualizer.setFixedSize(this.rowHeight), this._virtualizer.setEstimateSize(this.rowHeight), this._syncColumns(), this._resizeObserver = new ResizeObserver((t) => {
+      for (let e of t) if (e.target === this._scroll) {
+        let n = this._header.offsetHeight;
+        this._virtualizer.setViewportHeight(Math.max(0, e.contentRect.height - n)), this._render();
+      }
+    }), this._resizeObserver.observe(this._scroll), this._mutationObserver = new MutationObserver(() => {
+      this._syncColumns(), this._render();
+    }), this._mutationObserver.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ["field", "header", "width", "min-width", "align"] }), this._virtualizer.setCount(this._rows.length), this._virtualizer.setViewportHeight(Math.max(0, this._scroll.clientHeight - this._header.offsetHeight)), this._render();
+  }
+  disconnectedCallback() {
+    this._scroll.removeEventListener("scroll", this._onScroll), this._resizeObserver?.disconnect(), this._mutationObserver?.disconnect(), this._resizeObserver = null, this._mutationObserver = null;
+  }
+  attributeChangedCallback(t) {
+    t === "row-height" && (this._virtualizer.setFixedSize(this.rowHeight), this._virtualizer.setEstimateSize(this.rowHeight)), this._render();
+  }
+  _onScroll = () => {
+    this._virtualizer.setScrollTop(Math.max(0, this._scroll.scrollTop - this._header.offsetHeight)), this._renderBody();
+  };
+  _syncColumns() {
+    this._columns = Array.from(this.children).filter((t) => t instanceof b).map((t) => ({ field: t.field, header: t.header, width: t.width, minWidth: t.minWidth, align: t.align, template: Array.from(t.children).find((e) => e instanceof HTMLTemplateElement) ?? null })).filter((t) => t.field);
+  }
+  _render() {
+    if (!this.isConnected) return;
+    this._emptyState.textContent = this.emptyText;
+    let t = this._columns.length > 0 ? this._columns.map((e) => this._toGridColumn(e)).join(" ") : "minmax(0, 1fr)";
+    this._header.style.setProperty("--dt-table-columns", t), this._canvas.style.setProperty("--dt-table-columns", t), this._renderHeader(), this._renderBody();
+  }
+  _renderHeader() {
+    let t = document.createDocumentFragment();
+    for (let e of this._columns) {
+      let n = document.createElement("div");
+      n.className = "dt-table-header-cell", n.dataset.align = e.align, this.sortable && (n.classList.add("dt-table-header-cell--sortable"), n.tabIndex = 0, n.setAttribute("role", "button"), n.setAttribute("aria-label", `Sort by ${e.header}`), n.addEventListener("click", () => this._requestSort(e.field)), n.addEventListener("keydown", (s) => {
+        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._requestSort(e.field));
+      }));
+      let i = document.createElement("span");
+      if (i.className = "dt-table-header-label", i.textContent = e.header, this.sortable) {
+        let s = document.createElement("span");
+        s.className = "dt-table-sort-indicator", this._sortField === e.field ? s.textContent = this._sortDirection === "asc" ? "\u25B2" : "\u25BC" : s.textContent = "\u2195", i.appendChild(s);
+      }
+      n.appendChild(i), t.appendChild(n);
+    }
+    this._header.replaceChildren(t);
+  }
+  _renderBody() {
+    if (this._rows.length === 0 || this._columns.length === 0) {
+      this._emptyState.hidden = false, this._canvas.replaceChildren(), this._body.style.height = "140px", this._canvas.style.height = "0px";
+      return;
+    }
+    this._emptyState.hidden = true, this._virtualizer.setCount(this._rows.length), this._virtualizer.setScrollTop(Math.max(0, this._scroll.scrollTop - this._header.offsetHeight)), this._virtualizer.setViewportHeight(Math.max(0, this._scroll.clientHeight - this._header.offsetHeight));
+    let t = this._virtualizer.getRange();
+    this._body.style.height = `${Math.max(t.totalHeight, this._scroll.clientHeight - this._header.offsetHeight)}px`, this._canvas.style.height = `${t.totalHeight}px`;
+    let e = document.createDocumentFragment();
+    for (let n = t.start; n < t.end; n += 1) e.appendChild(this._renderRow(n));
+    this._canvas.replaceChildren(e);
+  }
+  _renderRow(t) {
+    let e = this._rows[t], n = document.createElement("div");
+    n.className = "dt-table-row dt-table-row--clickable", n.style.top = `${this._virtualizer.getOffset(t)}px`, n.style.height = `${this.rowHeight}px`, n.style.setProperty("--dt-table-columns", this._header.style.getPropertyValue("--dt-table-columns")), n.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("dt-row-click", { detail: { row: e, index: t }, bubbles: true, composed: true }));
+    });
+    let i = Rt(e);
+    for (let s of this._columns) {
+      let o = document.createElement("div");
+      if (o.className = "dt-table-cell", o.dataset.align = s.align, s.template) o.appendChild(M(s.template, i));
+      else {
+        let a = i[s.field];
+        o.textContent = a == null ? "" : String(a);
+      }
+      n.appendChild(o);
+    }
+    return n;
+  }
+  _requestSort(t) {
+    this._sortField === t ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortField = t, this._sortDirection = "asc"), this._renderHeader(), this.dispatchEvent(new CustomEvent("dt-sort", { detail: { field: t, direction: this._sortDirection }, bubbles: true, composed: true }));
+  }
+  _toGridColumn(t) {
+    let e = /^\d+$/.test(t.minWidth) ? `${t.minWidth}px` : t.minWidth;
+    if (t.width === "auto") return `minmax(${e}, 1fr)`;
+    let n = /^\d+$/.test(t.width) ? `${t.width}px` : t.width;
+    return `minmax(${e}, ${n})`;
+  }
+};
+var it = `:host {
+  display: block;
+  min-height: 120px;
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+}
+
+.dt-list-view {
+  position: relative;
+  display: block;
+  min-height: inherit;
+  height: 100%;
+  overflow: auto;
+  background: var(--dt-surface);
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+}
+
+.dt-list-view::before,
+.dt-list-view::after {
+  content: '';
+  position: sticky;
+  z-index: 2;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+}
+
+.dt-list-view::before {
+  top: 0;
+  left: 0;
+  display: block;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-list-view::after {
+  right: 0;
+  bottom: 0;
+  float: right;
+  border-right: 2px solid var(--dt-accent);
+  border-bottom: 2px solid var(--dt-accent);
+}
+
+.dt-list-spacer {
+  position: relative;
+  min-height: 100%;
+}
+
+.dt-list-items {
+  position: relative;
+}
+
+.dt-list-item {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px;
+  color: inherit;
+}
+
+.dt-list-item--interactive {
+  cursor: pointer;
+}
+
+.dt-list-item--interactive:hover {
+  background: var(--dt-surface-hover);
+}
+
+.dt-list-item--selected {
+  background: var(--dt-accent-subtle);
+}
+
+:host([dividers]) .dt-list-item {
+  border-bottom: 1px solid var(--dt-border-subtle);
+}
+
+:host([dividers]) .dt-list-item:last-child {
+  border-bottom: 0;
+}
+
+.dt-list-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  padding: 20px;
+  color: var(--dt-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.75rem;
+}
+`;
+var st = 56;
+function Pt(r) {
+  return r && typeof r == "object" ? r : { value: r };
+}
+var z = class extends HTMLElement {
+  _items = [];
+  _selectedIndices = /* @__PURE__ */ new Set();
+  _renderItem = null;
+  _virtualizer = new m({ estimateSize: st, overscan: 5 });
+  _viewport;
+  _spacer;
+  _itemsLayer;
+  _emptyState;
+  _resizeObserver = null;
+  _itemResizeObserver = null;
+  static get observedAttributes() {
+    return ["item-height", "dividers", "selectable", "empty-text"];
+  }
+  get items() {
+    return this._items;
+  }
+  set items(t) {
+    this._items = Array.isArray(t) ? t : [], this._selectedIndices = new Set([...this._selectedIndices].filter((e) => e < this._items.length)), this._virtualizer.setCount(this._items.length), this._syncSizingMode(true), this._render();
+  }
+  get selectedItems() {
+    return [...this._selectedIndices].sort((t, e) => t - e).map((t) => this._items[t]);
+  }
+  get renderItem() {
+    return this._renderItem;
+  }
+  set renderItem(t) {
+    this._renderItem = typeof t == "function" ? t : null, this._render();
+  }
+  get itemHeight() {
+    let t = this.getAttribute("item-height");
+    if (!t) return null;
+    let e = Number(t);
+    return Number.isFinite(e) && e > 0 ? e : null;
+  }
+  set itemHeight(t) {
+    if (t === null || t <= 0) {
+      this.removeAttribute("item-height");
+      return;
+    }
+    this.setAttribute("item-height", String(t));
+  }
+  get selectable() {
+    let t = this.getAttribute("selectable");
+    return t === "single" || t === "multi" ? t : "none";
+  }
+  set selectable(t) {
+    this.setAttribute("selectable", t);
+  }
+  get emptyText() {
+    return this.getAttribute("empty-text") ?? "No items";
+  }
+  set emptyText(t) {
+    this.setAttribute("empty-text", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = it, t.appendChild(e), this._viewport = document.createElement("div"), this._viewport.className = "dt-list-view", this._viewport.addEventListener("scroll", this._onScroll, { passive: true }), this._spacer = document.createElement("div"), this._spacer.className = "dt-list-spacer", this._itemsLayer = document.createElement("div"), this._itemsLayer.className = "dt-list-items", this._emptyState = document.createElement("div"), this._emptyState.className = "dt-list-empty", this._spacer.append(this._itemsLayer, this._emptyState), this._viewport.appendChild(this._spacer), t.appendChild(this._viewport);
+  }
+  connectedCallback() {
+    this._resizeObserver = new ResizeObserver((t) => {
+      for (let e of t) e.target === this._viewport && (this._virtualizer.setViewportHeight(e.contentRect.height), this._render());
+    }), this._resizeObserver.observe(this._viewport), this._itemResizeObserver = new ResizeObserver((t) => {
+      let e = 0;
+      for (let n of t) {
+        let i = n.target, s = Number(i.dataset.index);
+        Number.isFinite(s) && (e += this._virtualizer.measure(s, n.contentRect.height));
+      }
+      e !== 0 && (this._viewport.scrollTop += e), t.length > 0 && this._render();
+    }), this._virtualizer.setCount(this._items.length), this._virtualizer.setViewportHeight(this._viewport.clientHeight), this._syncSizingMode(false), this._render();
+  }
+  disconnectedCallback() {
+    this._viewport.removeEventListener("scroll", this._onScroll), this._resizeObserver?.disconnect(), this._itemResizeObserver?.disconnect(), this._resizeObserver = null, this._itemResizeObserver = null;
+  }
+  attributeChangedCallback(t) {
+    t === "item-height" && this._syncSizingMode(true), t === "selectable" && this.selectable === "none" && this._selectedIndices.size > 0 && (this._selectedIndices.clear(), this._emitSelectionChange()), this._render();
+  }
+  _onScroll = () => {
+    this._virtualizer.setScrollTop(this._viewport.scrollTop), this._render();
+  };
+  _syncSizingMode(t) {
+    let e = this.itemHeight;
+    this._virtualizer.setFixedSize(e), this._virtualizer.setEstimateSize(e ?? st), t && this._virtualizer.resetMeasurements();
+  }
+  _render() {
+    if (!this.isConnected) return;
+    if (this._emptyState.textContent = this.emptyText, this._emptyState.hidden = this._items.length > 0, this._items.length === 0) {
+      this._itemsLayer.replaceChildren(), this._spacer.style.height = "100%";
+      return;
+    }
+    this._virtualizer.setScrollTop(this._viewport.scrollTop), this._virtualizer.setViewportHeight(this._viewport.clientHeight), this._virtualizer.setCount(this._items.length);
+    let t = this._virtualizer.getRange();
+    this._spacer.style.height = `${Math.max(t.totalHeight, this._viewport.clientHeight)}px`, this._itemsLayer.style.transform = `translateY(${t.paddingTop}px)`;
+    let e = document.createDocumentFragment();
+    for (let n = t.start; n < t.end; n += 1) e.appendChild(this._renderVisibleItem(n));
+    this._itemsLayer.replaceChildren(e);
+  }
+  _renderVisibleItem(t) {
+    let e = this._items[t], n = document.createElement("div");
+    if (n.className = "dt-list-item", n.dataset.index = String(t), this.selectable !== "none" && (n.classList.add("dt-list-item--interactive"), n.setAttribute("role", "option"), n.setAttribute("aria-selected", String(this._selectedIndices.has(t))), n.tabIndex = 0), this._selectedIndices.has(t) && n.classList.add("dt-list-item--selected"), this.itemHeight !== null && (n.style.minHeight = `${this.itemHeight}px`), this._renderItem) this._renderItem(e, n, t);
+    else {
+      let i = this._getTemplate();
+      i ? n.appendChild(M(i, Pt(e))) : n.textContent = String(e ?? "");
+    }
+    return n.addEventListener("click", () => this._handleItemClick(t)), n.addEventListener("keydown", (i) => {
+      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this._handleItemClick(t));
+    }), this.itemHeight === null && this._itemResizeObserver?.observe(n), n;
+  }
+  _handleItemClick(t) {
+    let e = this._items[t], n = this.selectable;
+    n === "single" ? (this._selectedIndices = /* @__PURE__ */ new Set([t]), this._emitSelectionChange(), this._render()) : n === "multi" && (this._selectedIndices.has(t) ? this._selectedIndices.delete(t) : this._selectedIndices.add(t), this._emitSelectionChange(), this._render()), this.dispatchEvent(new CustomEvent("dt-item-click", { detail: { item: e, index: t }, bubbles: true, composed: true }));
+  }
+  _emitSelectionChange() {
+    this.dispatchEvent(new CustomEvent("dt-selection-change", { detail: { selected: this.selectedItems }, bubbles: true, composed: true }));
+  }
+  _getTemplate() {
+    for (let t of Array.from(this.children)) if (t instanceof HTMLTemplateElement) return t;
+    return null;
+  }
+};
+var ot = `:host {
+  display: block;
+  min-height: 220px;
+  color: var(--dt-text);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+}
+
+.dt-chart {
+  position: relative;
+  display: block;
+  min-height: inherit;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+  background:
+    radial-gradient(
+      circle at top left,
+      color-mix(in srgb, var(--dt-accent) 16%, transparent),
+      transparent 42%
+    ),
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--dt-surface) 90%, var(--dt-accent) 10%),
+      var(--dt-surface)
+    );
+}
+
+.dt-chart::before,
+.dt-chart::after {
+  content: '';
+  position: absolute;
+  z-index: 3;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+}
+
+.dt-chart::before {
+  top: -1px;
+  left: -1px;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-chart::after {
+  right: -1px;
+  bottom: -1px;
+  border-right: 2px solid var(--dt-accent);
+  border-bottom: 2px solid var(--dt-accent);
+}
+
+.dt-chart__canvas {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.dt-chart__status {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  color: var(--dt-text-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-align: center;
+  text-transform: uppercase;
+  background: color-mix(in srgb, var(--dt-surface) 72%, transparent);
+}
+
+.dt-chart__status[hidden] {
+  display: none;
+}
+`;
+var L = null;
+function at() {
+  return window.__DtChart ? Promise.resolve(window.__DtChart) : L || (L = new Promise((r, t) => {
+    let e = document.createElement("script");
+    e.src = "/api/ui/chart.umd.js", e.async = true, e.dataset.dtChart = "true", e.onload = () => {
+      if (window.__DtChart) {
+        r(window.__DtChart);
+        return;
+      }
+      t(new Error("Chart runtime loaded without a __DtChart export."));
+    }, e.onerror = () => t(new Error("Failed to load the Chart.js runtime bundle.")), document.head.appendChild(e);
+  }), L);
+}
+function v(r, t, e) {
+  return Math.min(e, Math.max(t, r));
+}
+function It(r) {
+  return r ? r.split(",").map((t) => t.trim()).filter(Boolean) : [];
+}
+function X(r) {
+  let t = r.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (t) {
+    let i = t[1], s = i.length === 3 ? i.split("").map((c) => `${c}${c}`).join("") : i, o = parseInt(s.slice(0, 2), 16) / 255, a = parseInt(s.slice(2, 4), 16) / 255, d = parseInt(s.slice(4, 6), 16) / 255;
+    return dt(o, a, d);
+  }
+  let e = r.trim().match(/^rgba?\((\d+(?:\.\d+)?)[,\s]+(\d+(?:\.\d+)?)[,\s]+(\d+(?:\.\d+)?)(?:[,/\s]+[\d.]+)?\)$/i);
+  if (e) return dt(Number(e[1]) / 255, Number(e[2]) / 255, Number(e[3]) / 255);
+  let n = r.trim().match(/^hsla?\(([-\d.]+)(?:deg)?[,\s]+([\d.]+)%[,\s]+([\d.]+)%(?:[,/\s]+[\d.]+)?\)$/i);
+  return n ? { h: (Number(n[1]) % 360 + 360) % 360, s: v(Number(n[2]), 0, 100), l: v(Number(n[3]), 0, 100) } : null;
+}
+function dt(r, t, e) {
+  let n = Math.max(r, t, e), i = Math.min(r, t, e), s = n - i, o = 0, a = (n + i) / 2, d = s === 0 ? 0 : s / (1 - Math.abs(2 * a - 1));
+  if (s !== 0) switch (n) {
+    case r:
+      o = 60 * ((t - e) / s % 6);
+      break;
+    case t:
+      o = 60 * ((e - r) / s + 2);
+      break;
+    default:
+      o = 60 * ((r - t) / s + 4);
+      break;
+  }
+  return { h: (o + 360) % 360, s: Math.round(d * 100), l: Math.round(a * 100) };
+}
+function g(r, t = 1) {
+  return `hsla(${Math.round(r.h)} ${Math.round(r.s)}% ${Math.round(r.l)}% / ${t})`;
+}
+function Nt(r) {
+  let t = X(r) ?? { h: 185, s: 88, l: 56 };
+  return [0, 32, 68, 118, 164, 212, 258, 304].map((n, i) => ({ h: (t.h + n) % 360, s: v(t.s - i * 2, 55, 90), l: v(t.l + (i % 2 === 0 ? 0 : 6) - i, 38, 66) }));
+}
+function H(r) {
+  return !!r && typeof r == "object" && !Array.isArray(r);
+}
+function lt(r, t) {
+  if (!H(r) || !H(t)) return t ?? r;
+  let e = { ...r };
+  for (let [n, i] of Object.entries(t)) {
+    let s = e[n];
+    e[n] = H(s) && H(i) ? lt(s, i) : i;
+  }
+  return e;
+}
+function Ft(r) {
+  return r === "top" || r === "bottom" || r === "left" || r === "right" ? r : "none";
+}
+function Ot(r) {
+  return r === "bar" || r === "line" || r === "area" || r === "pie" || r === "doughnut" || r === "radar" || r === "scatter" || r === "bubble" ? r : "bar";
+}
+function Bt(r) {
+  return r === "bar" || r === "line" || r === "area" || r === "scatter" || r === "bubble";
+}
+function $t(r) {
+  return r.map((t) => t.trim()).filter(Boolean);
+}
+var R = class extends HTMLElement {
+  _canvas;
+  _status;
+  _runtime = null;
+  _loadPromise = null;
+  _chart = null;
+  _renderedType = null;
+  _dataInput = null;
+  _optionsOverride = null;
+  _syncFrame = 0;
+  static get observedAttributes() {
+    return ["type", "legend", "stacked", "labels"];
+  }
+  get type() {
+    return Ot(this.getAttribute("type"));
+  }
+  set type(t) {
+    this.setAttribute("type", t);
+  }
+  get legend() {
+    return Ft(this.getAttribute("legend"));
+  }
+  set legend(t) {
+    this.setAttribute("legend", t);
+  }
+  get stacked() {
+    return this.hasAttribute("stacked");
+  }
+  set stacked(t) {
+    this.toggleAttribute("stacked", t);
+  }
+  get labels() {
+    return $t(It(this.getAttribute("labels")));
+  }
+  set labels(t) {
+    this.setAttribute("labels", t.join(","));
+  }
+  get data() {
+    return this._dataInput;
+  }
+  set data(t) {
+    this._dataInput = t ? structuredClone(t) : null, this._scheduleSync();
+  }
+  get options() {
+    return this._optionsOverride;
+  }
+  set options(t) {
+    this._optionsOverride = t ? structuredClone(t) : null, this._renderChart();
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = ot, t.appendChild(e);
+    let n = document.createElement("div");
+    n.className = "dt-chart", this._canvas = document.createElement("canvas"), this._canvas.className = "dt-chart__canvas", this._status = document.createElement("div"), this._status.className = "dt-chart__status", this._status.textContent = "Loading chart", n.append(this._canvas, this._status), t.appendChild(n);
+  }
+  connectedCallback() {
+    this._canvas.addEventListener("click", this._handleCanvasClick), this._ensureRuntime().then(() => this._renderChart()), this._scheduleSync();
+  }
+  disconnectedCallback() {
+    this._canvas.removeEventListener("click", this._handleCanvasClick), this._syncFrame !== 0 && (cancelAnimationFrame(this._syncFrame), this._syncFrame = 0), this._chart?.destroy(), this._chart = null, this._renderedType = null;
+  }
+  attributeChangedCallback() {
+    this._scheduleSync();
+  }
+  _handleCanvasClick = (t) => {
+    if (!this._chart) return;
+    let n = this._chart.getElementsAtEventForMode(t, "nearest", { intersect: true }, true)[0];
+    if (!n) return;
+    let i = Array.isArray(this._chart.data.labels) ? this._chart.data.labels[n.index] ?? null : null, s = this._chart.data.datasets[n.datasetIndex], o = Array.isArray(s?.data) ? s.data[n.index] : void 0;
+    this.dispatchEvent(new CustomEvent("dt-chart-click", { bubbles: true, composed: true, detail: { label: i, datasetIndex: n.datasetIndex, index: n.index, value: o } }));
+  };
+  _scheduleSync() {
+    this._syncFrame === 0 && (this._syncFrame = requestAnimationFrame(() => {
+      this._syncFrame = 0, this._syncFromCurrentSource();
+    }));
+  }
+  _syncFromCurrentSource() {
+    this._renderChart();
+  }
+  async _ensureRuntime() {
+    return this._runtime ? this._runtime : (this._loadPromise || (this._loadPromise = at().then((t) => (this._runtime = t, t))), this._loadPromise);
+  }
+  async _renderChart() {
+    let t = this._dataInput;
+    if (!t) {
+      this._setStatus("Waiting for data");
+      return;
+    }
+    let e = await this._ensureRuntime(), n = this._buildConfig(e, t), i = n.type;
+    !this._chart || this._renderedType !== i ? (this._chart?.destroy(), this._chart = new e.Chart(this._canvas, n), this._renderedType = i) : (this._chart.data = n.data, this._chart.options = n.options, this._chart.update()), this._setStatus(t.datasets.length > 0 ? null : "Waiting for data");
+  }
+  _buildConfig(t, e) {
+    let n = getComputedStyle(this), i = n.getPropertyValue("--dt-accent").trim() || "#42d4ff", s = n.getPropertyValue("--dt-text").trim() || "#d6ebff", o = n.getPropertyValue("--dt-text-muted").trim() || "#7b93a6", a = n.getPropertyValue("--dt-border").trim() || "rgba(123, 147, 166, 0.3)", d = n.getPropertyValue("--font-mono").trim() || "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace", c = Nt(i), l = this.type === "area" ? "line" : this.type, f = { labels: e.labels ?? this.labels, datasets: e.datasets.map((h, gt) => {
+      let F = c[gt % c.length], p = h.color ?? g(F, 1), O = { label: h.label ?? "", data: h.data, backgroundColor: l === "line" || l === "radar" || l === "scatter" ? g(F, l === "scatter" ? 0.95 : 0.24) : p, borderColor: p, pointBackgroundColor: p, pointBorderColor: p, pointHoverBackgroundColor: p, pointRadius: this.type === "line" || this.type === "area" ? 3 : 4, pointHoverRadius: this.type === "line" || this.type === "area" ? 5 : 6, borderWidth: 2, tension: l === "line" || this.type === "area" ? 0.32 : void 0, fill: this.type === "area" };
+      return l === "pie" || l === "doughnut" ? { ...O, backgroundColor: Array.isArray(h.data) ? h.data.map((bt, B) => g(c[B % c.length], 0.86)) : p, borderColor: Array.isArray(h.data) ? h.data.map((bt, B) => g(c[B % c.length], 1)) : p, borderWidth: 1 } : l === "scatter" || l === "bubble" ? { ...O, showLine: false, backgroundColor: g(F, 0.78) } : O;
+    }) }, _ = { responsive: true, maintainAspectRatio: false, animation: { duration: 320 }, interaction: { mode: "nearest", intersect: true }, plugins: { legend: { display: this.legend !== "none", position: this.legend === "none" ? "top" : this.legend, labels: { color: s, boxWidth: 12, boxHeight: 12, padding: 14, font: { family: d, size: 11 } } }, tooltip: { backgroundColor: "rgba(10, 18, 24, 0.92)", borderColor: Xt(a, i, 0.35), borderWidth: 1, titleColor: s, bodyColor: s, footerColor: o, titleFont: { family: d, size: 11 }, bodyFont: { family: d, size: 11 }, padding: 10 } }, scales: Bt(this.type) ? { x: { stacked: this.stacked, grid: { display: false, color: a }, border: { color: a }, ticks: { color: o, font: { family: d, size: 11 } } }, y: { stacked: this.stacked, beginAtZero: true, grid: { display: false, color: a }, border: { color: a }, ticks: { color: o, font: { family: d, size: 11 } } } } : l === "radar" ? { r: { angleLines: { color: a }, grid: { color: a }, pointLabels: { color: o, font: { family: d, size: 11 } }, ticks: { color: o, backdropColor: "transparent", font: { family: d, size: 10 } } } } : void 0 };
+    return { type: l, data: f, options: lt(_, this._optionsOverride ?? {}) };
+  }
+  _setStatus(t) {
+    if (!t) {
+      this._status.hidden = true;
+      return;
+    }
+    this._status.hidden = false, this._status.textContent = t;
+  }
+};
+function Xt(r, t, e) {
+  let n = X(r), i = X(t);
+  if (!n || !i) return r;
+  let s = v(e, 0, 1), o = ((i.h - n.h) % 360 + 540) % 360 - 180;
+  return g({ h: (n.h + o * s + 360) % 360, s: n.s + (i.s - n.s) * s, l: n.l + (i.l - n.l) * s });
+}
+var ct = `:host {
+  display: block;
+  color: var(--dt-text);
+  font-family: var(--font-sans, 'Inter', sans-serif);
+}
+
+.dt-markdown {
+  color: inherit;
+  line-height: 1.7;
+  word-break: break-word;
+}
+
+.dt-markdown > :first-child {
+  margin-top: 0;
+}
+
+.dt-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.dt-markdown :is(h1, h2, h3, h4, h5, h6) {
+  margin: 1.2em 0 0.55em;
+  color: var(--dt-text);
+  font-family: var(--font-sans, 'Inter', sans-serif);
+  line-height: 1.2;
+}
+
+.dt-markdown h1 {
+  color: var(--dt-accent);
+  font-size: 1.6rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dt-markdown h2 {
+  font-size: 1.3rem;
+}
+
+.dt-markdown h3 {
+  font-size: 1.1rem;
+}
+
+.dt-markdown p,
+.dt-markdown ul,
+.dt-markdown ol,
+.dt-markdown blockquote,
+.dt-markdown pre,
+.dt-markdown table {
+  margin: 0.8em 0;
+}
+
+.dt-markdown ul,
+.dt-markdown ol {
+  padding-left: 1.4rem;
+}
+
+.dt-markdown li + li {
+  margin-top: 0.28em;
+}
+
+.dt-markdown strong {
+  color: var(--dt-text);
+}
+
+.dt-markdown a,
+.dt-markdown .dt-md-link {
+  color: var(--dt-accent);
+  text-decoration: none;
+}
+
+.dt-markdown a:hover,
+.dt-markdown .dt-md-link:hover {
+  text-decoration: underline;
+}
+
+.dt-markdown code {
+  padding: 0.12rem 0.35rem;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--dt-surface) 88%, var(--dt-accent) 12%);
+  color: var(--dt-accent);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  font-size: 0.92em;
+}
+
+.dt-md-pre {
+  overflow-x: auto;
+  padding: 14px 16px;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+  background: var(--dt-surface);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-surface) 85%, var(--dt-accent) 15%);
+}
+
+.dt-md-pre code {
+  display: block;
+  padding: 0;
+  background: transparent;
+  color: var(--dt-text);
+}
+
+.dt-md-blockquote {
+  margin: 0.9em 0;
+  padding: 0.15rem 0 0.15rem 1rem;
+  border-left: 3px solid var(--dt-accent);
+  color: var(--dt-text-muted);
+}
+
+.dt-md-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--dt-border);
+  background: var(--dt-surface);
+}
+
+.dt-md-table th,
+.dt-md-table td {
+  padding: 0.6rem 0.8rem;
+  border: 1px solid var(--dt-border-subtle, var(--dt-border));
+  text-align: left;
+  vertical-align: top;
+}
+
+.dt-md-table th {
+  color: var(--dt-accent);
+  background: color-mix(in srgb, var(--dt-surface) 88%, var(--dt-accent) 12%);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dt-markdown hr {
+  border: 0;
+  border-top: 1px solid var(--dt-border);
+}
+
+.dt-md-image {
+  display: block;
+  max-width: 100%;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+}
+
+.dt-markdown__caret {
+  display: inline-block;
+  margin-left: 0.15rem;
+  color: var(--dt-accent);
+  animation: dt-markdown-caret 0.9s steps(1) infinite;
+}
+
+.dt-markdown__caret[hidden] {
+  display: none;
+}
+
+@keyframes dt-markdown-caret {
+  0%,
+  49% {
+    opacity: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+`;
+var V = null;
+function ht() {
+  return window.__DtMarked ? Promise.resolve(window.__DtMarked) : V || (V = new Promise((r, t) => {
+    let e = document.createElement("script");
+    e.src = "/api/ui/marked.js", e.async = true, e.dataset.dtMarked = "true", e.onload = () => {
+      if (window.__DtMarked) {
+        r(window.__DtMarked);
+        return;
+      }
+      t(new Error("Marked runtime loaded without a __DtMarked export."));
+    }, e.onerror = () => t(new Error("Failed to load the marked runtime bundle.")), document.head.appendChild(e);
+  }), V);
+}
+function ut(r) {
+  return r.replaceAll(`\r
+`, `
+`);
+}
+function Jt(r) {
+  let t = ut(r).split(`
+`);
+  for (; t.length > 0 && t[0].trim() === ""; ) t.shift();
+  for (; t.length > 0 && t[t.length - 1].trim() === ""; ) t.pop();
+  let e = t.filter((i) => i.trim() !== "").map((i) => i.match(/^\s*/)?.[0].length ?? 0), n = e.length > 0 ? Math.min(...e) : 0;
+  return n === 0 ? t.join(`
+`) : t.map((i) => i.slice(n)).join(`
+`);
+}
+function Wt(r) {
+  let t = ut(r);
+  if ((t.match(/(^|\n)(```|~~~)/g) ?? []).length % 2 === 0) return t;
+  let n = t.includes("~~~") && !t.includes("```") ? "~~~" : "```";
+  return `${t}
+${n}`;
+}
+var P = class extends HTMLElement {
+  _body;
+  _caret;
+  _contentOverride = null;
+  _runtime = null;
+  _loadPromise = null;
+  _observer = null;
+  _renderFrame = 0;
+  static get observedAttributes() {
+    return ["streaming", "unsafe-html"];
+  }
+  get content() {
+    return this._contentOverride ?? this._readInlineMarkdown();
+  }
+  set content(t) {
+    this._contentOverride = String(t ?? ""), this._scheduleRender();
+  }
+  get streaming() {
+    return this.hasAttribute("streaming");
+  }
+  set streaming(t) {
+    this.toggleAttribute("streaming", t);
+  }
+  get unsafeHtml() {
+    return this.hasAttribute("unsafe-html");
+  }
+  set unsafeHtml(t) {
+    this.toggleAttribute("unsafe-html", t);
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = ct, t.appendChild(e), this._body = document.createElement("div"), this._body.className = "dt-markdown", this._body.addEventListener("click", this._onLinkClick), this._caret = document.createElement("span"), this._caret.className = "dt-markdown__caret", this._caret.textContent = "\u258C", this._caret.hidden = true, t.append(this._body, this._caret);
+  }
+  connectedCallback() {
+    this._observer || (this._observer = new MutationObserver(() => {
+      this._contentOverride === null && this._scheduleRender();
+    }), this._observer.observe(this, { childList: true, characterData: true, subtree: true })), this._ensureRuntime(), this._scheduleRender();
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect(), this._observer = null, this._renderFrame !== 0 && (cancelAnimationFrame(this._renderFrame), this._renderFrame = 0);
+  }
+  attributeChangedCallback() {
+    this._scheduleRender();
+  }
+  _onLinkClick = (t) => {
+    let n = t.composedPath().find((i) => i instanceof HTMLAnchorElement);
+    n && (t.preventDefault(), this.dispatchEvent(new CustomEvent("dt-link-click", { bubbles: true, composed: true, detail: { href: n.getAttribute("href") ?? "#" } })));
+  };
+  _readInlineMarkdown() {
+    return Jt(this.textContent ?? "");
+  }
+  _scheduleRender() {
+    this._renderFrame === 0 && (this._renderFrame = requestAnimationFrame(() => {
+      this._renderFrame = 0, this._render();
+    }));
+  }
+  async _ensureRuntime() {
+    return this._runtime ? this._runtime : (this._loadPromise || (this._loadPromise = ht().then((t) => (this._runtime = t, t))), this._loadPromise);
+  }
+  async _render() {
+    let t = await this._ensureRuntime(), e = this.content;
+    this.streaming && (e = Wt(e)), this._body.innerHTML = t.render(e, { unsafeHtml: this.unsafeHtml }), this._caret.hidden = !this.streaming;
+  }
+};
+var pt = `:host {
+  display: block;
+  min-height: 240px;
+  color: var(--dt-text);
+  font-family: var(--font-sans, 'Inter', sans-serif);
+}
+
+.dt-markdown-editor {
+  position: relative;
+  height: 100%;
+  min-height: inherit;
+  overflow: hidden;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+}
+
+.dt-markdown-editor::before,
+.dt-markdown-editor::after {
+  content: '';
+  position: absolute;
+  z-index: 3;
+  width: 8px;
+  height: 8px;
+  pointer-events: none;
+}
+
+.dt-markdown-editor::before {
+  top: -1px;
+  left: -1px;
+  border-top: 2px solid var(--dt-accent);
+  border-left: 2px solid var(--dt-accent);
+}
+
+.dt-markdown-editor::after {
+  right: -1px;
+  bottom: -1px;
+  border-right: 2px solid var(--dt-accent);
+  border-bottom: 2px solid var(--dt-accent);
+}
+
+.dt-markdown-editor__surface {
+  height: 100%;
+  min-height: inherit;
+}
+
+.dt-markdown-editor__content {
+  height: 100%;
+  min-height: inherit;
+}
+
+.dt-markdown-editor__status {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: color-mix(in srgb, var(--dt-surface) 84%, transparent);
+  color: var(--dt-text-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dt-markdown-editor__status[hidden] {
+  display: none;
+}
+
+.milkdown {
+  --crepe-color-background: transparent;
+  --crepe-color-on-background: var(--dt-text);
+  --crepe-color-surface: var(--dt-surface);
+  --crepe-color-surface-low: color-mix(in srgb, var(--dt-surface) 94%, var(--dt-accent) 6%);
+  --crepe-color-on-surface: var(--dt-text);
+  --crepe-color-on-surface-variant: var(--dt-text-muted);
+  --crepe-color-outline: var(--dt-border);
+  --crepe-color-primary: var(--dt-accent);
+  --crepe-color-secondary: color-mix(in srgb, var(--dt-surface) 84%, var(--dt-accent) 16%);
+  --crepe-color-on-secondary: var(--dt-text);
+  --crepe-color-inverse: var(--dt-text);
+  --crepe-color-on-inverse: var(--dt-surface);
+  --crepe-color-inline-code: var(--dt-accent);
+  --crepe-color-error: var(--dt-danger, #ff6a6a);
+  --crepe-color-hover: var(--dt-surface-hover);
+  --crepe-color-selected: color-mix(in srgb, var(--dt-surface) 82%, var(--dt-accent) 18%);
+  --crepe-color-inline-area: color-mix(in srgb, var(--dt-surface) 90%, var(--dt-accent) 10%);
+  --crepe-font-title: var(--font-sans, 'Inter', sans-serif);
+  --crepe-font-default: var(--font-sans, 'Inter', sans-serif);
+  --crepe-font-code: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  --crepe-shadow-1: 0 0 0 1px color-mix(in srgb, var(--dt-surface) 82%, var(--dt-accent) 18%);
+  --crepe-shadow-2:
+    0 0 0 1px color-mix(in srgb, var(--dt-surface) 78%, var(--dt-accent) 22%),
+    0 8px 24px color-mix(in srgb, var(--dt-accent) 12%, transparent);
+
+  height: 100%;
+  background: transparent;
+  color: var(--dt-text);
+}
+
+.milkdown .editor {
+  min-height: 100%;
+  padding: 16px 18px 20px;
+  outline: none;
+  color: var(--dt-text);
+  font-family: var(--font-sans, 'Inter', sans-serif);
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.milkdown .editor > :first-child {
+  margin-top: 0;
+}
+
+.milkdown .editor h1,
+.milkdown .editor h2,
+.milkdown .editor h3,
+.milkdown .editor h4,
+.milkdown .editor h5,
+.milkdown .editor h6 {
+  margin: 0.95em 0 0.45em;
+  line-height: 1.2;
+}
+
+.milkdown .editor h1 {
+  color: var(--dt-accent);
+  font-size: 1.6rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.milkdown .editor h2 {
+  font-size: 1.28rem;
+}
+
+.milkdown .editor h3 {
+  font-size: 1.08rem;
+}
+
+.milkdown .editor p {
+  margin: 0.65em 0;
+}
+
+.milkdown .editor code {
+  padding: 2px 5px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--dt-surface) 88%, var(--dt-accent) 12%);
+  font-family: var(
+    --font-mono,
+    'SF Mono',
+    Monaco,
+    'Cascadia Code',
+    'Roboto Mono',
+    Consolas,
+    monospace
+  );
+  font-size: 0.9em;
+}
+
+.milkdown .editor pre {
+  overflow-x: auto;
+  margin: 0.9em 0;
+  padding: 12px 14px;
+  border: 1px solid var(--dt-border);
+  border-radius: 2px;
+  background: var(--dt-surface);
+}
+
+.milkdown .editor pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.milkdown .editor blockquote {
+  margin: 0.9em 0;
+  padding-left: 12px;
+  border-left: 3px solid var(--dt-accent);
+  color: var(--dt-text-muted);
+}
+
+.milkdown .editor a {
+  color: var(--dt-accent);
+  text-decoration: none;
+}
+
+.milkdown .editor a:hover {
+  text-decoration: underline;
+}
+
+.milkdown .editor hr {
+  border: 0;
+  border-top: 1px solid var(--dt-border);
+}
+
+.milkdown .editor ul,
+.milkdown .editor ol {
+  padding-left: 1.5rem;
+}
+
+.milkdown .editor img {
+  max-width: 100%;
+  border-radius: 2px;
+}
+
+.milkdown .editor table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.milkdown .editor th,
+.milkdown .editor td {
+  border: 1px solid var(--dt-border);
+}
+`;
+var I = null;
+function mt() {
+  return window.__DtMilkdown ? Promise.resolve(window.__DtMilkdown) : I || (I = new Promise((r, t) => {
+    let e = document.createElement("script");
+    e.src = "/api/ui/milkdown.umd.js", e.async = true, e.dataset.dtMilkdown = "true", e.onload = () => {
+      if (window.__DtMilkdown) {
+        r(window.__DtMilkdown);
+        return;
+      }
+      t(new Error("Milkdown runtime loaded without a __DtMilkdown export."));
+    }, e.onerror = () => t(new Error("Failed to load the Milkdown runtime bundle.")), document.head.appendChild(e);
+  }), I);
+}
+var N = class extends HTMLElement {
+  _runtimeStyle;
+  _surface;
+  _content;
+  _status;
+  _runtime = null;
+  _loadPromise = null;
+  _editor = null;
+  _pendingValue = "";
+  _changeTimer = null;
+  _setupToken = 0;
+  _suppressNextChange = false;
+  static get observedAttributes() {
+    return ["placeholder", "readonly"];
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") ?? "";
+  }
+  set placeholder(t) {
+    this.setAttribute("placeholder", t);
+  }
+  get readonly() {
+    return this.hasAttribute("readonly");
+  }
+  set readonly(t) {
+    this.toggleAttribute("readonly", t);
+  }
+  get value() {
+    return this._editor && (this._pendingValue = this._editor.getMarkdown()), this._pendingValue;
+  }
+  set value(t) {
+    let e = String(t ?? "");
+    this._pendingValue = e, this._editor && this._runtime && this._editor.getMarkdown() !== e && (this._suppressNextChange = true, this._editor.editor.action(this._runtime.replaceAll(e)));
+  }
+  constructor() {
+    super();
+    let t = this.attachShadow({ mode: "open" }), e = document.createElement("style");
+    e.textContent = pt, t.appendChild(e), this._runtimeStyle = document.createElement("style"), t.appendChild(this._runtimeStyle), this._surface = document.createElement("div"), this._surface.className = "dt-markdown-editor", this._content = document.createElement("div"), this._content.className = "dt-markdown-editor__surface";
+    let n = document.createElement("div");
+    n.className = "dt-markdown-editor__content", this._content.appendChild(n), this._status = document.createElement("div"), this._status.className = "dt-markdown-editor__status", this._status.textContent = "Loading editor", this._surface.append(this._content, this._status), t.appendChild(this._surface);
+  }
+  connectedCallback() {
+    this._initializeEditor();
+  }
+  disconnectedCallback() {
+    this._setupToken += 1, this._clearChangeTimer(), this._destroyEditor();
+  }
+  attributeChangedCallback(t) {
+    if (t === "readonly") {
+      this._editor?.setReadonly(this.readonly);
+      return;
+    }
+    t === "placeholder" && this.isConnected && this._initializeEditor(true);
+  }
+  async _ensureRuntime() {
+    return this._runtime ? this._runtime : (this._loadPromise || (this._loadPromise = mt().then((t) => (this._runtime = t, this._runtimeStyle.textContent = t.cssText, t))), this._loadPromise);
+  }
+  async _initializeEditor(t = false) {
+    let e = ++this._setupToken;
+    if (this._setStatus("Loading editor"), t) await this._destroyEditor();
+    else if (this._editor) {
+      this._setStatus(null);
+      return;
+    }
+    try {
+      let n = await this._ensureRuntime();
+      if (!this.isConnected || e !== this._setupToken) return;
+      this._content.replaceChildren();
+      let i = document.createElement("div");
+      i.className = "dt-markdown-editor__content", this._content.appendChild(i);
+      let s = new n.Crepe({ root: i, defaultValue: this._pendingValue, features: { [n.Crepe.Feature.CodeMirror]: false, [n.Crepe.Feature.ImageBlock]: false, [n.Crepe.Feature.Latex]: false }, featureConfigs: { [n.Crepe.Feature.Placeholder]: { text: this.placeholder, mode: "doc" } } });
+      if (s.on((o) => {
+        o.markdownUpdated((a, d) => {
+          if (this._pendingValue = d, this._suppressNextChange) {
+            this._suppressNextChange = false;
+            return;
+          }
+          this._queueChange(d);
+        }), o.focus(() => {
+          this.dispatchEvent(new CustomEvent("dt-focus", { bubbles: true, composed: true }));
+        }), o.blur(() => {
+          this.dispatchEvent(new CustomEvent("dt-blur", { bubbles: true, composed: true }));
+        });
+      }), await s.create(), !this.isConnected || e !== this._setupToken) {
+        await s.destroy();
+        return;
+      }
+      this._editor = s, this._editor.setReadonly(this.readonly), this._pendingValue = this._editor.getMarkdown(), this._setStatus(null);
+    } catch {
+      e === this._setupToken && this._setStatus("Failed to load editor");
+    }
+  }
+  async _destroyEditor() {
+    let t = this._editor;
+    if (this._editor = null, !!t) try {
+      await t.destroy();
+    } catch {
+    }
+  }
+  _queueChange(t) {
+    this._clearChangeTimer(), this._changeTimer = setTimeout(() => {
+      this._changeTimer = null, this.dispatchEvent(new CustomEvent("dt-change", { bubbles: true, composed: true, detail: { value: t } }));
+    }, 300);
+  }
+  _clearChangeTimer() {
+    this._changeTimer && (clearTimeout(this._changeTimer), this._changeTimer = null);
+  }
+  _setStatus(t) {
+    if (t) {
+      this._status.hidden = false, this._status.textContent = t;
+      return;
+    }
+    this._status.hidden = true;
+  }
+};
+customElements.get("dt-tooltip") || customElements.define("dt-tooltip", x);
+customElements.get("dt-card") || customElements.define("dt-card", w);
+customElements.get("dt-select") || customElements.define("dt-select", y);
+customElements.get("dt-grid") || customElements.define("dt-grid", k);
+customElements.get("dt-stack") || customElements.define("dt-stack", C);
+customElements.get("dt-stat") || customElements.define("dt-stat", E);
+customElements.get("dt-badge") || customElements.define("dt-badge", S);
+customElements.get("dt-button") || customElements.define("dt-button", D);
+customElements.get("dt-divider") || customElements.define("dt-divider", A);
+customElements.get("dt-list-view") || customElements.define("dt-list-view", z);
+customElements.get("dt-table-view") || customElements.define("dt-table-view", T);
+customElements.get("dt-column") || customElements.define("dt-column", b);
+customElements.get("dt-chart") || customElements.define("dt-chart", R);
+customElements.get("dt-markdown") || customElements.define("dt-markdown", P);
+customElements.get("dt-markdown-editor") || customElements.define("dt-markdown-editor", N);
+
+// src/components/NoteEditor.tsx
+function stripFrontMatter(raw) {
+  const match = raw.match(/^---\r?\n[\s\S]*?\r?\n---\r?\n?([\s\S]*)$/);
+  return match ? match[1] : raw;
+}
+var NoteEditor = forwardRef(function NoteEditor2({ note, loading, onSave }, ref) {
+  const editorRef = useRef(null);
+  const [saveStatus, setSaveStatus] = useState("idle");
+  const saveTimerRef = useRef(null);
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  useEffect(() => {
+    if (editorRef.current && note) {
+      const bodyContent = stripFrontMatter(note.content);
+      editorRef.current.value = bodyContent;
+    }
+  }, [note?.id]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const handleChange = (e) => {
+      const detail = e.detail;
+      if (!detail) return;
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      setSaveStatus("saving");
+      saveTimerRef.current = setTimeout(() => {
+        onSaveRef.current(detail.value);
+        setSaveStatus("saved");
+      }, 500);
+    };
+    editor.addEventListener("dt-change", handleChange);
+    return () => editor.removeEventListener("dt-change", handleChange);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    };
+  }, []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      getMarkdown() {
+        return editorRef.current?.value ?? null;
+      },
+      setMarkdown(markdown) {
+        if (editorRef.current) {
+          editorRef.current.value = markdown;
+        }
+      },
+      getCursorLine() {
+        return 1;
+      },
+      getSelectedText() {
+        return "";
+      }
+    }),
+    []
+  );
+  if (!note) {
+    return /* @__PURE__ */ jsx("div", { className: NoteApp_default.editorPanel, children: /* @__PURE__ */ jsx("div", { className: NoteApp_default.editorPlaceholder, children: loading ? "Loading..." : "Select a note or create a new one" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: NoteApp_default.editorPanel, children: [
+    /* @__PURE__ */ jsxs("div", { className: NoteApp_default.editorHeader, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: NoteApp_default.editorTitle, children: note.title }),
+        note.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: NoteApp_default.editorTags, children: note.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: NoteApp_default.editorTag, children: tag }, tag)) })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: saveStatus === "saving" ? NoteApp_default.saveStatusSaving : NoteApp_default.saveStatus, children: saveStatus === "saving" ? "Saving..." : saveStatus === "saved" ? "Saved" : "" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: NoteApp_default.editorBody, children: /* @__PURE__ */ jsx(
+      "dt-markdown-editor",
+      {
+        ref: editorRef,
+        placeholder: "Start writing...",
+        style: { height: "100%" }
+      }
+    ) })
+  ] });
+});
+
+// src/components/NoteActions.tsx
+import { ActionsProvider, Action, useCommand } from "@desktalk/sdk";
+
+// src/lib/frontmatter.ts
+var FM_REGEX = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/;
+function parseFrontMatter(raw) {
+  const match = raw.match(FM_REGEX);
+  if (!match) {
+    const heading = raw.match(/^#\s+(.+)$/m);
+    return { title: heading ? heading[1].trim() : "Untitled", tags: [], created: null, body: raw };
+  }
+  const yaml = match[1];
+  const body = match[2];
+  let title = "Untitled";
+  let tags = [];
+  let created = null;
+  let inTags = false;
+  for (const line of yaml.split("\n")) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith("title:")) {
+      title = trimmed.slice(6).trim().replace(/^["']|["']$/g, "");
+      inTags = false;
+    } else if (trimmed.startsWith("created:")) {
+      created = trimmed.slice(8).trim();
+      inTags = false;
+    } else if (trimmed.startsWith("tags:")) {
+      inTags = true;
+      const inline = trimmed.slice(5).trim();
+      if (inline.startsWith("[") && inline.endsWith("]")) {
+        tags = inline.slice(1, -1).split(",").map((t) => t.trim().replace(/^["']|["']$/g, "")).filter(Boolean);
+        inTags = false;
+      }
+    } else if (inTags && trimmed.startsWith("- ")) {
+      tags.push(
+        trimmed.slice(2).trim().replace(/^["']|["']$/g, "")
+      );
+    } else {
+      inTags = false;
+    }
+  }
+  return { title, tags, created, body };
+}
+function serializeFrontMatter(title, tags, created, body) {
+  const lines = ["---", `title: "${title.replace(/"/g, '\\"')}"`];
+  if (tags.length > 0) {
+    lines.push("tags:");
+    for (const tag of tags) lines.push(`  - ${tag}`);
+  }
+  lines.push(`created: ${created}`, "---", "", body);
+  return lines.join("\n");
+}
+
+// src/components/NoteActions.tsx
+function computeDiff(oldContent, newContent, oldText, newText, matchIndex) {
+  const linesBefore = oldContent.substring(0, matchIndex).split("\n");
+  const firstChangedLine = linesBefore.length;
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const contextStart = Math.max(0, firstChangedLine - 4);
+  const allOldLines = oldContent.split("\n");
+  const allNewLines = newContent.split("\n");
+  const lines = [];
+  lines.push(
+    `@@ -${firstChangedLine},${oldLines.length} +${firstChangedLine},${newLines.length} @@`
+  );
+  for (let i = contextStart; i < firstChangedLine - 1; i++) {
+    lines.push(` ${allOldLines[i]}`);
+  }
+  for (const l of oldLines) {
+    lines.push(`-${l}`);
+  }
+  for (const l of newLines) {
+    lines.push(`+${l}`);
+  }
+  const afterStart = firstChangedLine - 1 + oldLines.length;
+  const afterEnd = Math.min(allNewLines.length, afterStart + 3);
+  for (let i = afterStart; i < afterEnd; i++) {
+    if (allNewLines[i] !== void 0) {
+      lines.push(` ${allNewLines[i]}`);
+    }
+  }
+  return { diff: lines.join("\n"), firstChangedLine };
+}
+function NoteActions({
+  children,
+  selectedNoteId,
+  selectedNote,
+  notes,
+  editorRef,
+  onNoteCreated,
+  onNoteDeleted,
+  onSearch,
+  onNoteUpdated,
+  onSelectNote,
+  onRefresh: _onRefresh
+}) {
+  const createNote = useCommand("notes.create");
+  const deleteNote = useCommand("notes.delete");
+  const searchNotes = useCommand("notes.search");
+  const updateNote = useCommand(
+    "notes.update"
+  );
+  const handleCreate = useCallback(
+    async (params) => {
+      const note = await createNote({
+        title: params?.title || void 0,
+        content: params?.content || void 0,
+        tags: params?.tags || void 0,
+        path: params?.path || void 0
+      });
+      onNoteCreated(note);
+      return note;
+    },
+    [createNote, onNoteCreated]
+  );
+  const handleDelete = useCallback(async () => {
+    if (!selectedNoteId) return;
+    await deleteNote({ id: selectedNoteId });
+    onNoteDeleted(selectedNoteId);
+  }, [deleteNote, selectedNoteId, onNoteDeleted]);
+  const handleSearch = useCallback(
+    async (params) => {
+      const query = params?.query || "";
+      onSearch(query);
+      const results = await searchNotes({ query });
+      return results;
+    },
+    [searchNotes, onSearch]
+  );
+  const getRawContent = useCallback(() => {
+    if (!selectedNote) return null;
+    const handle = editorRef.current;
+    if (!handle) return null;
+    const body = handle.getMarkdown();
+    if (body === null) return null;
+    return serializeFrontMatter(
+      selectedNote.title,
+      selectedNote.tags,
+      selectedNote.createdAt,
+      body
+    );
+  }, [selectedNote, editorRef]);
+  const handleListNotes = useCallback(async () => {
+    const listed = notes.slice(0, 20).map((n) => ({
+      id: n.id,
+      title: n.title,
+      updatedAt: n.updatedAt,
+      selected: n.id === selectedNoteId
+    }));
+    return { notes: listed };
+  }, [notes, selectedNoteId]);
+  const handleSelectNote = useCallback(
+    async (params) => {
+      const id = params?.id;
+      if (!id) {
+        return { success: false, error: "id parameter is required" };
+      }
+      const found = notes.find((n) => n.id === id);
+      if (!found) {
+        return { success: false, error: `Note not found: ${id}` };
+      }
+      await onSelectNote(id);
+      return { success: true };
+    },
+    [notes, onSelectNote]
+  );
+  const handleGetEditingContext = useCallback(async () => {
+    if (!selectedNoteId || !selectedNote) {
+      return { error: "No note is currently open" };
+    }
+    const handle = editorRef.current;
+    if (!handle) {
+      return { error: "Editor is not ready" };
+    }
+    const content = getRawContent();
+    if (content === null) {
+      return { error: "Editor is not ready" };
+    }
+    return {
+      id: selectedNote.id,
+      title: selectedNote.title,
+      content,
+      cursorLine: handle.getCursorLine(),
+      selectedText: handle.getSelectedText()
+    };
+  }, [selectedNoteId, selectedNote, editorRef, getRawContent]);
+  const handleEditNote = useCallback(
+    async (params) => {
+      if (!selectedNoteId || !selectedNote) {
+        return { success: false, error: "No note is currently open" };
+      }
+      const handle = editorRef.current;
+      if (!handle) {
+        return { success: false, error: "Editor is not ready" };
+      }
+      const oldText = params?.old_text;
+      const newText = params?.new_text;
+      if (oldText === void 0 || newText === void 0) {
+        return { success: false, error: "Both old_text and new_text are required" };
+      }
+      const currentRaw = getRawContent();
+      if (currentRaw === null) {
+        return { success: false, error: "Editor is not ready" };
+      }
+      let newRaw;
+      let matchIndex;
+      if (oldText === "") {
+        newRaw = newText + currentRaw;
+        matchIndex = 0;
+      } else {
+        const firstIndex = currentRaw.indexOf(oldText);
+        if (firstIndex === -1) {
+          return { success: false, error: "Text not found in note" };
+        }
+        const secondIndex = currentRaw.indexOf(oldText, firstIndex + 1);
+        if (secondIndex !== -1) {
+          let count = 2;
+          let searchFrom = secondIndex + 1;
+          while (true) {
+            const idx = currentRaw.indexOf(oldText, searchFrom);
+            if (idx === -1) break;
+            count++;
+            searchFrom = idx + 1;
+          }
+          return {
+            success: false,
+            error: `Text appears ${count} times; provide more surrounding context to make it unique`
+          };
+        }
+        newRaw = currentRaw.substring(0, firstIndex) + newText + currentRaw.substring(firstIndex + oldText.length);
+        matchIndex = firstIndex;
+      }
+      const parsed = parseFrontMatter(newRaw);
+      handle.setMarkdown(parsed.body);
+      const tagsChanged = parsed.tags.length !== selectedNote.tags.length || parsed.tags.some((t, i) => t !== selectedNote.tags[i]);
+      const titleChanged = parsed.title !== selectedNote.title;
+      if (tagsChanged || titleChanged) {
+        const updated = await updateNote({
+          id: selectedNoteId,
+          tags: parsed.tags,
+          // Send the full content so backend can parse the new title
+          content: parsed.body
+        });
+        onNoteUpdated(updated);
+      }
+      const { diff, firstChangedLine } = computeDiff(
+        currentRaw,
+        newRaw,
+        oldText,
+        newText,
+        matchIndex
+      );
+      return { success: true, diff, firstChangedLine };
+    },
+    [selectedNoteId, selectedNote, editorRef, getRawContent, updateNote, onNoteUpdated]
+  );
+  return /* @__PURE__ */ jsxs(ActionsProvider, { children: [
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Create Note",
+        description: "Create a new note with optional title, content, and path",
+        params: {
+          title: { type: "string", description: "Note title", required: false },
+          content: { type: "string", description: "Note content in Markdown", required: false },
+          tags: { type: "string", description: "Comma-separated tags", required: false },
+          path: {
+            type: "string",
+            description: 'Relative path for the note (e.g. "work/meeting-notes"). Becomes the note ID. Auto-generated if omitted.',
+            required: false
+          }
+        },
+        handler: handleCreate
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Delete Note",
+        description: "Delete the currently selected note",
+        handler: handleDelete
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Search Notes",
+        description: "Search notes by keyword",
+        params: {
+          query: { type: "string", description: "Search query", required: true }
+        },
+        handler: handleSearch
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "List Notes",
+        description: "Return the 20 most recent notes with selection status",
+        handler: handleListNotes
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Select Note",
+        description: "Select a note by ID and open it in the editor",
+        params: {
+          id: {
+            type: "string",
+            description: "Note ID (relative path without .md)",
+            required: true
+          }
+        },
+        handler: handleSelectNote
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Get Editing Context",
+        description: "Return the current editor state for the selected note including content, cursor position, and selected text",
+        handler: handleGetEditingContext
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Action,
+      {
+        name: "Edit Note",
+        description: "Apply a text replacement to the current note content including front matter. Use old_text to find exact text and new_text to replace it. To edit tags or title, modify the YAML front matter directly.",
+        params: {
+          old_text: {
+            type: "string",
+            description: "Exact text to find in the note content (must appear exactly once). Searches the full content including YAML front matter. Use empty string to insert at beginning.",
+            required: true
+          },
+          new_text: {
+            type: "string",
+            description: "Replacement text",
+            required: true
+          }
+        },
+        handler: handleEditNote
+      }
+    ),
+    children
+  ] });
+}
+
+// src/frontend.tsx
+var COMPACT_WIDTH = 720;
+function NoteApp() {
+  const [notes, setNotes] = useState([]);
+  const [selectedId, setSelectedId] = useState(null);
+  const [currentNote, setCurrentNote] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [loadingNote, setLoadingNote] = useState(false);
+  const [compact, setCompact] = useState(false);
+  const editorRef = useRef(null);
+  const rootRef = useRef(null);
+  const listNotes = useCommand2("notes.list");
+  const getNote = useCommand2("notes.get");
+  const updateNote = useCommand2(
+    "notes.update"
+  );
+  const searchNotes = useCommand2("notes.search");
+  const createNote = useCommand2(
+    "notes.create"
+  );
+  const fetchNotes = useCallback(async () => {
+    try {
+      let result;
+      if (searchQuery) {
+        result = await searchNotes({ query: searchQuery });
+      } else {
+        result = await listNotes();
+      }
+      setNotes(result);
+    } catch (err) {
+      console.error("Failed to fetch notes:", err);
+    }
+  }, [listNotes, searchNotes, searchQuery]);
+  const refresh = useCallback(() => {
+    fetchNotes();
+  }, [fetchNotes]);
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  useEffect(() => {
+    if (!rootRef.current) return;
+    const updateLayout = (width) => {
+      setCompact(width <= COMPACT_WIDTH);
+    };
+    updateLayout(rootRef.current.clientWidth);
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      updateLayout(entry.contentRect.width);
+    });
+    observer.observe(rootRef.current);
+    return () => observer.disconnect();
+  }, []);
+  const selectNote = useCallback(
+    async (id) => {
+      setSelectedId(id);
+      setLoadingNote(true);
+      try {
+        const note = await getNote({ id });
+        setCurrentNote(note);
+      } catch (err) {
+        console.error("Failed to load note:", err);
+        setCurrentNote(null);
+      } finally {
+        setLoadingNote(false);
+      }
+    },
+    [getNote]
+  );
+  const searchTimerRef = useRef(null);
+  const handleSearchChange = useCallback((query) => {
+    setSearchQuery(query);
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout(() => {
+    }, 300);
+  }, []);
+  const handleEditorSave = useCallback(
+    async (markdown) => {
+      if (!selectedId || !currentNote) return;
+      try {
+        const updated = await updateNote({
+          id: selectedId,
+          content: markdown
+        });
+        setCurrentNote(updated);
+        fetchNotes();
+      } catch (err) {
+        console.error("Failed to save note:", err);
+      }
+    },
+    [selectedId, currentNote, updateNote, fetchNotes]
+  );
+  const handleNoteCreated = useCallback(
+    (note) => {
+      refresh();
+      setSelectedId(note.id);
+      setCurrentNote(note);
+    },
+    [refresh]
+  );
+  const handleNoteDeleted = useCallback(
+    (id) => {
+      if (selectedId === id) {
+        setSelectedId(null);
+        setCurrentNote(null);
+      }
+      refresh();
+    },
+    [selectedId, refresh]
+  );
+  const handleNoteUpdated = useCallback(
+    (note) => {
+      if (selectedId === note.id) {
+        setCurrentNote(note);
+      }
+      refresh();
+    },
+    [selectedId, refresh]
+  );
+  const handleSearch = useCallback((query) => {
+    setSearchQuery(query);
+  }, []);
+  const handleCreate = useCallback(async () => {
+    try {
+      const note = await createNote({});
+      handleNoteCreated(note);
+    } catch (err) {
+      console.error("Failed to create note:", err);
+    }
+  }, [createNote, handleNoteCreated]);
+  return /* @__PURE__ */ jsx(
+    NoteActions,
+    {
+      selectedNoteId: selectedId,
+      selectedNote: currentNote,
+      notes,
+      editorRef,
+      onNoteCreated: handleNoteCreated,
+      onNoteDeleted: handleNoteDeleted,
+      onSearch: handleSearch,
+      onNoteUpdated: handleNoteUpdated,
+      onSelectNote: selectNote,
+      onRefresh: refresh,
+      children: /* @__PURE__ */ jsxs("div", { ref: rootRef, className: `${NoteApp_default.root}${compact ? ` ${NoteApp_default.rootCompact}` : ""}`, children: [
+        /* @__PURE__ */ jsx(
+          NoteList,
+          {
+            notes,
+            selectedId,
+            onSelect: selectNote,
+            onCreate: handleCreate,
+            searchQuery,
+            onSearchChange: handleSearchChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NoteEditor,
+          {
+            ref: editorRef,
+            note: currentNote,
+            loading: loadingNote,
+            onSave: handleEditorSave
+          }
+        )
+      ] })
+    }
+  );
+}
+function activate(ctx) {
+  const root = createRoot(ctx.root);
+  root.render(
+    /* @__PURE__ */ jsx(WindowIdProvider, { windowId: ctx.windowId, children: /* @__PURE__ */ jsx(MiniAppIdProvider, { miniAppId: ctx.miniAppId, children: /* @__PURE__ */ jsx(NoteApp, {}) }) })
+  );
+  return {
+    deactivate() {
+      root.unmount();
+    }
+  };
+}
+export {
+  activate
+};
+//# sourceMappingURL=frontend.js.map