@stacksjs/desktop 0.2.3

package/dist/index.js

@@ -0,0 +1,3015 @@
+// @bun
+var __require = import.meta.require;
+
+// src/alerts.ts
+function hasNativeNotificationSupport() {
+  if (typeof Notification !== "undefined" && Notification.permission === "granted") {
+    return true;
+  }
+  return false;
+}
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+async function requestNotificationPermission() {
+  if (typeof Notification === "undefined") {
+    return false;
+  }
+  if (Notification.permission === "granted") {
+    return true;
+  }
+  if (Notification.permission === "denied") {
+    return false;
+  }
+  const permission = await Notification.requestPermission();
+  return permission === "granted";
+}
+var activeAlerts = new Map;
+function generateAlertId() {
+  return `alert-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function getAlertIcon(type) {
+  switch (type) {
+    case "info":
+      return "ℹ";
+    case "success":
+      return "✔";
+    case "warning":
+      return "⚠";
+    case "error":
+      return "✖";
+    default:
+      return "ℹ";
+  }
+}
+function getToastContainer(position = "top-right") {
+  if (!isBrowser()) {
+    throw new Error("Toast container requires browser environment");
+  }
+  try {
+    const existingContainer = document.querySelector(`.stx-toast-container[data-position="${position}"]`);
+    if (existingContainer) {
+      return existingContainer;
+    }
+  } catch {}
+  const container = document.createElement("div");
+  container.className = `stx-toast-container ${position}`;
+  container.dataset.position = position;
+  try {
+    if (document.body) {
+      document.body.appendChild(container);
+    }
+  } catch {}
+  return container;
+}
+function createToastHTML(state) {
+  const { options } = state;
+  const icon = getAlertIcon(options.type);
+  const typeClass = options.type || "info";
+  const hasClose = options.duration !== 0;
+  return `
+    <div class="stx-toast ${typeClass}" data-alert-id="${state.id}" role="alert" aria-live="polite">
+      <div class="stx-toast-icon">${icon}</div>
+      <div class="stx-toast-content">
+        ${options.title ? `<div class="stx-toast-title">${escapeHtml(options.title)}</div>` : ""}
+        <div class="stx-toast-message">${escapeHtml(options.message)}</div>
+      </div>
+      ${hasClose ? '<button class="stx-toast-close" aria-label="Close">&times;</button>' : ""}
+    </div>
+  `;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function dismissAlert(state) {
+  if (state.timeout) {
+    clearTimeout(state.timeout);
+  }
+  activeAlerts.delete(state.id);
+  if (state.element && isBrowser()) {
+    state.element.classList.add("dismissing");
+    setTimeout(() => {
+      state.element?.remove();
+    }, 200);
+  }
+}
+async function showAlert(options) {
+  const id = generateAlertId();
+  const hasNative = hasNativeNotificationSupport();
+  const duration = options.duration ?? 5000;
+  const state = {
+    id,
+    options
+  };
+  activeAlerts.set(id, state);
+  if (hasNative && options.type !== "error") {
+    try {
+      const notification = new Notification(options.title || "Notification", {
+        body: options.message,
+        icon: options.type === "success" ? "\u2713" : options.type === "warning" ? "\u26A0" : "\u2139",
+        tag: id
+      });
+      notification.onclick = () => {
+        if (options.onClick) {
+          options.onClick();
+        }
+        notification.close();
+      };
+      if (duration > 0) {
+        state.timeout = setTimeout(() => {
+          notification.close();
+          activeAlerts.delete(id);
+        }, duration);
+      }
+      return;
+    } catch {}
+  }
+  if (isBrowser()) {
+    try {
+      const container = getToastContainer(options.position);
+      const wrapper = document.createElement("div");
+      wrapper.innerHTML = createToastHTML(state);
+      const toast = wrapper.firstElementChild;
+      if (!toast) {
+        const typeLabel = (options.type || "info").toUpperCase();
+        console.log(`[stx-alert] ${typeLabel}: ${options.title || ""}`);
+        console.log(`[stx-alert] ${options.message}`);
+        return;
+      }
+      state.element = toast;
+      try {
+        container.appendChild(toast);
+      } catch {
+        const typeLabel = (options.type || "info").toUpperCase();
+        console.log(`[stx-alert] ${typeLabel}: ${options.title || ""}`);
+        console.log(`[stx-alert] ${options.message}`);
+        return;
+      }
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => {
+          try {
+            toast.classList.add("visible");
+          } catch {}
+        });
+      }
+      try {
+        toast.addEventListener("click", (e) => {
+          if (e.target.classList?.contains("stx-toast-close")) {
+            dismissAlert(state);
+            return;
+          }
+          if (options.onClick) {
+            options.onClick();
+          }
+        });
+      } catch {}
+      if (duration > 0) {
+        state.timeout = setTimeout(() => {
+          dismissAlert(state);
+        }, duration);
+      }
+    } catch {
+      const typeLabel = (options.type || "info").toUpperCase();
+      console.log(`[stx-alert] ${typeLabel}: ${options.title || ""}`);
+      console.log(`[stx-alert] ${options.message}`);
+    }
+  } else {
+    const typeLabel = (options.type || "info").toUpperCase();
+    console.log(`[stx-alert] ${typeLabel}: ${options.title || ""}`);
+    console.log(`[stx-alert] ${options.message}`);
+    if (duration > 0) {
+      state.timeout = setTimeout(() => {
+        activeAlerts.delete(id);
+      }, duration);
+    }
+  }
+}
+async function showToast(options) {
+  return showAlert({
+    ...options,
+    position: options.position || "top-right"
+  });
+}
+async function showInfoToast(message, duration = 3000) {
+  return showToast({ message, type: "info", duration });
+}
+async function showSuccessToast(message, duration = 3000) {
+  return showToast({ message, type: "success", duration });
+}
+async function showWarningToast(message, duration = 3000) {
+  return showToast({ message, type: "warning", duration });
+}
+async function showErrorToast(message, duration = 5000) {
+  return showToast({ message, type: "error", duration });
+}
+async function notify(title, message, type = "info") {
+  return showAlert({ title, message, type });
+}
+function dismissAlertById(id) {
+  const state = activeAlerts.get(id);
+  if (state) {
+    dismissAlert(state);
+  }
+}
+function dismissAllAlerts() {
+  for (const state of activeAlerts.values()) {
+    dismissAlert(state);
+  }
+}
+function getActiveAlertCount() {
+  return activeAlerts.size;
+}
+var TOAST_STYLES = `
+.stx-toast-container {
+  position: fixed;
+  z-index: 10001;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 400px;
+  pointer-events: none;
+}
+
+.stx-toast-container.top-left { top: 16px; left: 16px; }
+.stx-toast-container.top-center { top: 16px; left: 50%; transform: translateX(-50%); }
+.stx-toast-container.top-right { top: 16px; right: 16px; }
+.stx-toast-container.bottom-left { bottom: 16px; left: 16px; }
+.stx-toast-container.bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); }
+.stx-toast-container.bottom-right { bottom: 16px; right: 16px; }
+
+.stx-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.stx-toast.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.stx-toast.dismissing {
+  opacity: 0;
+  transform: translateX(100%);
+}
+
+@media (prefers-color-scheme: dark) {
+  .stx-toast {
+    background: #2d2d2d;
+    color: #fff;
+  }
+}
+
+.stx-toast-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+.stx-toast.info .stx-toast-icon { color: #3498db; }
+.stx-toast.success .stx-toast-icon { color: #27ae60; }
+.stx-toast.warning .stx-toast-icon { color: #f39c12; }
+.stx-toast.error .stx-toast-icon { color: #e74c3c; }
+
+.stx-toast-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.stx-toast-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.stx-toast-message {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+@media (prefers-color-scheme: dark) {
+  .stx-toast-message { color: #aaa; }
+}
+
+.stx-toast-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  opacity: 0.5;
+  padding: 0;
+  line-height: 1;
+  color: inherit;
+  transition: opacity 0.15s;
+}
+
+.stx-toast-close:hover {
+  opacity: 1;
+}
+
+/* Border accent for different types */
+.stx-toast.info { border-left: 4px solid #3498db; }
+.stx-toast.success { border-left: 4px solid #27ae60; }
+.stx-toast.warning { border-left: 4px solid #f39c12; }
+.stx-toast.error { border-left: 4px solid #e74c3c; }
+`;
+// src/components.ts
+function generateId(prefix = "stx") {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function escapeHtml2(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function buildClasses(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function buildStyles(styles) {
+  if (!styles)
+    return "";
+  return Object.entries(styles).map(([key, value]) => `${key.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${value}`).join("; ");
+}
+function createButton(props) {
+  const {
+    text,
+    variant = "primary",
+    size = "medium",
+    disabled = false,
+    loading = false,
+    icon,
+    iconPosition = "left",
+    id = generateId("btn"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-button", `stx-button--${variant}`, `stx-button--${size}`, disabled && "stx-button--disabled", loading && "stx-button--loading", className);
+  const styleStr = buildStyles(style);
+  const iconHtml = icon ? `<span class="stx-button-icon">${icon}</span>` : "";
+  const loadingHtml = loading ? '<span class="stx-button-spinner"></span>' : "";
+  const content = iconPosition === "left" ? `${iconHtml}${loadingHtml}<span class="stx-button-text">${escapeHtml2(text)}</span>` : `<span class="stx-button-text">${escapeHtml2(text)}</span>${iconHtml}${loadingHtml}`;
+  return `<button id="${id}" class="${classes}" ${disabled || loading ? "disabled" : ""} ${styleStr ? `style="${styleStr}"` : ""}>${content}</button>`;
+}
+function createTextInput(props) {
+  const {
+    value = "",
+    placeholder = "",
+    type = "text",
+    disabled = false,
+    readonly = false,
+    maxLength,
+    minLength,
+    pattern,
+    required = false,
+    autocomplete,
+    label,
+    error,
+    hint,
+    id = generateId("input"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-input", error && "stx-input--error", disabled && "stx-input--disabled", className);
+  const styleStr = buildStyles(style);
+  const attrs = [
+    `type="${type}"`,
+    `id="${id}"`,
+    `class="${classes}"`,
+    value && `value="${escapeHtml2(value)}"`,
+    placeholder && `placeholder="${escapeHtml2(placeholder)}"`,
+    disabled && "disabled",
+    readonly && "readonly",
+    required && "required",
+    maxLength && `maxlength="${maxLength}"`,
+    minLength && `minlength="${minLength}"`,
+    pattern && `pattern="${escapeHtml2(pattern)}"`,
+    autocomplete && `autocomplete="${autocomplete}"`,
+    styleStr && `style="${styleStr}"`
+  ].filter(Boolean).join(" ");
+  let html = "";
+  if (label) {
+    html += `<label class="stx-input-label" for="${id}">${escapeHtml2(label)}</label>`;
+  }
+  html += `<input ${attrs} />`;
+  if (error) {
+    html += `<div class="stx-input-error">${escapeHtml2(error)}</div>`;
+  } else if (hint) {
+    html += `<div class="stx-input-hint">${escapeHtml2(hint)}</div>`;
+  }
+  return `<div class="stx-input-wrapper">${html}</div>`;
+}
+function createCheckbox(props) {
+  const {
+    checked = false,
+    label,
+    disabled = false,
+    indeterminate = false,
+    id = generateId("checkbox"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-checkbox", disabled && "stx-checkbox--disabled", className);
+  const styleStr = buildStyles(style);
+  const inputAttrs = [
+    'type="checkbox"',
+    `id="${id}"`,
+    checked && "checked",
+    disabled && "disabled",
+    indeterminate && 'data-indeterminate="true"'
+  ].filter(Boolean).join(" ");
+  return `
+    <label class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>
+      <input ${inputAttrs} />
+      <span class="stx-checkbox-box"></span>
+      ${label ? `<span class="stx-checkbox-label">${escapeHtml2(label)}</span>` : ""}
+    </label>
+  `;
+}
+function createSlider(props) {
+  const {
+    value = 50,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    label,
+    showValue = true,
+    id = generateId("slider"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-slider", disabled && "stx-slider--disabled", className);
+  const styleStr = buildStyles(style);
+  const inputAttrs = [
+    'type="range"',
+    `id="${id}"`,
+    `value="${value}"`,
+    `min="${min}"`,
+    `max="${max}"`,
+    `step="${step}"`,
+    disabled && "disabled"
+  ].filter(Boolean).join(" ");
+  let html = "";
+  if (label) {
+    html += `<label class="stx-slider-label" for="${id}">${escapeHtml2(label)}</label>`;
+  }
+  html += `<div class="stx-slider-track"><input ${inputAttrs} /></div>`;
+  if (showValue) {
+    html += `<span class="stx-slider-value">${value}</span>`;
+  }
+  return `<div class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createProgressBar(props) {
+  const {
+    value,
+    max = 100,
+    variant = "default",
+    size = "medium",
+    showLabel = false,
+    indeterminate = false,
+    id = generateId("progress"),
+    className,
+    style
+  } = props;
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  const classes = buildClasses("stx-progress", `stx-progress--${variant}`, `stx-progress--${size}`, indeterminate && "stx-progress--indeterminate", className);
+  const styleStr = buildStyles(style);
+  return `
+    <div id="${id}" class="${classes}" role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}" ${styleStr ? `style="${styleStr}"` : ""}>
+      <div class="stx-progress-bar" style="width: ${indeterminate ? "100%" : `${percentage}%`}"></div>
+      ${showLabel ? `<span class="stx-progress-label">${Math.round(percentage)}%</span>` : ""}
+    </div>
+  `;
+}
+function createBadge(props) {
+  const {
+    text,
+    variant = "default",
+    size = "medium",
+    id = generateId("badge"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-badge", `stx-badge--${variant}`, `stx-badge--${size}`, className);
+  const styleStr = buildStyles(style);
+  return `<span id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${escapeHtml2(text)}</span>`;
+}
+function createAvatar(props) {
+  const {
+    src,
+    alt = "",
+    name,
+    size = "medium",
+    shape = "circle",
+    id = generateId("avatar"),
+    className,
+    style
+  } = props;
+  const sizeClass = typeof size === "number" ? "" : `stx-avatar--${size}`;
+  const sizeStyle = typeof size === "number" ? `width: ${size}px; height: ${size}px;` : "";
+  const classes = buildClasses("stx-avatar", sizeClass, `stx-avatar--${shape}`, className);
+  const combinedStyle = [sizeStyle, buildStyles(style)].filter(Boolean).join(" ");
+  const initials = name ? name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "";
+  if (src) {
+    return `<div id="${id}" class="${classes}" ${combinedStyle ? `style="${combinedStyle}"` : ""}>
+      <img src="${escapeHtml2(src)}" alt="${escapeHtml2(alt)}" class="stx-avatar-img" />
+    </div>`;
+  }
+  return `<div id="${id}" class="${classes}" ${combinedStyle ? `style="${combinedStyle}"` : ""}>
+    <span class="stx-avatar-initials">${initials}</span>
+  </div>`;
+}
+function createCard(props) {
+  const {
+    title,
+    subtitle,
+    content,
+    image,
+    footer,
+    variant = "default",
+    id = generateId("card"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-card", `stx-card--${variant}`, className);
+  const styleStr = buildStyles(style);
+  let html = "";
+  if (image) {
+    html += `<div class="stx-card-image"><img src="${escapeHtml2(image)}" alt="" /></div>`;
+  }
+  html += '<div class="stx-card-body">';
+  if (title) {
+    html += `<h3 class="stx-card-title">${escapeHtml2(title)}</h3>`;
+  }
+  if (subtitle) {
+    html += `<p class="stx-card-subtitle">${escapeHtml2(subtitle)}</p>`;
+  }
+  if (content) {
+    html += `<div class="stx-card-content">${escapeHtml2(content)}</div>`;
+  }
+  html += "</div>";
+  if (footer) {
+    html += `<div class="stx-card-footer">${escapeHtml2(footer)}</div>`;
+  }
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createTabs(props) {
+  const {
+    tabs,
+    activeTab,
+    variant = "default",
+    id = generateId("tabs"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-tabs", `stx-tabs--${variant}`, className);
+  const styleStr = buildStyles(style);
+  const tabsHtml = tabs.map((tab, index) => {
+    const isActive = activeTab ? tab.value === activeTab : index === 0;
+    const tabClasses = buildClasses("stx-tab", isActive && "stx-tab--active", tab.disabled && "stx-tab--disabled");
+    return `<button class="${tabClasses}" data-value="${escapeHtml2(tab.value)}" ${tab.disabled ? "disabled" : ""} role="tab" aria-selected="${isActive}">${escapeHtml2(tab.label)}</button>`;
+  }).join("");
+  return `<div id="${id}" class="${classes}" role="tablist" ${styleStr ? `style="${styleStr}"` : ""}>${tabsHtml}</div>`;
+}
+function createDropdown(props) {
+  const {
+    options,
+    value,
+    placeholder = "Select...",
+    disabled = false,
+    id = generateId("dropdown"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-dropdown", disabled && "stx-dropdown--disabled", className);
+  const styleStr = buildStyles(style);
+  const optionsHtml = options.map((opt) => {
+    const selected = opt.value === value ? "selected" : "";
+    const disabledAttr = opt.disabled ? "disabled" : "";
+    return `<option value="${escapeHtml2(opt.value)}" ${selected} ${disabledAttr}>${escapeHtml2(opt.label)}</option>`;
+  }).join("");
+  const placeholderOption = value ? "" : `<option value="" disabled selected>${escapeHtml2(placeholder)}</option>`;
+  return `<select id="${id}" class="${classes}" ${disabled ? "disabled" : ""} ${styleStr ? `style="${styleStr}"` : ""}>${placeholderOption}${optionsHtml}</select>`;
+}
+function createRating(props) {
+  const {
+    value = 0,
+    max = 5,
+    readonly = false,
+    size = "medium",
+    allowHalf = false,
+    id = generateId("rating"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-rating", `stx-rating--${size}`, readonly && "stx-rating--readonly", className);
+  const styleStr = buildStyles(style);
+  let starsHtml = "";
+  for (let i = 1;i <= max; i++) {
+    const filled = i <= value;
+    const halfFilled = allowHalf && i - 0.5 === value;
+    const starClass = filled ? "stx-star--filled" : halfFilled ? "stx-star--half" : "";
+    starsHtml += `<span class="stx-star ${starClass}" data-value="${i}">\u2605</span>`;
+  }
+  return `<div id="${id}" class="${classes}" role="slider" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="${max}" ${styleStr ? `style="${styleStr}"` : ""}>${starsHtml}</div>`;
+}
+function createRadioButton(props) {
+  const {
+    value,
+    name,
+    checked = false,
+    label,
+    disabled = false,
+    id = generateId("radio"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-radio", disabled && "stx-radio--disabled", className);
+  const styleStr = buildStyles(style);
+  const inputAttrs = [
+    'type="radio"',
+    `id="${id}"`,
+    `name="${escapeHtml2(name)}"`,
+    `value="${escapeHtml2(value)}"`,
+    checked && "checked",
+    disabled && "disabled"
+  ].filter(Boolean).join(" ");
+  return `
+    <label class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>
+      <input ${inputAttrs} />
+      <span class="stx-radio-circle"></span>
+      ${label ? `<span class="stx-radio-label">${escapeHtml2(label)}</span>` : ""}
+    </label>
+  `;
+}
+function createColorPicker(props) {
+  const {
+    value = "#3498db",
+    disabled = false,
+    label,
+    presetColors = ["#e74c3c", "#f39c12", "#27ae60", "#3498db", "#9b59b6", "#1abc9c", "#34495e", "#000000"],
+    id = generateId("color"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-color-picker", disabled && "stx-color-picker--disabled", className);
+  const styleStr = buildStyles(style);
+  let html = "";
+  if (label) {
+    html += `<label class="stx-color-picker-label" for="${id}">${escapeHtml2(label)}</label>`;
+  }
+  html += `<div class="stx-color-picker-input">
+    <input type="color" id="${id}" value="${escapeHtml2(value)}" ${disabled ? "disabled" : ""} />
+    <span class="stx-color-picker-value">${escapeHtml2(value)}</span>
+  </div>`;
+  if (presetColors.length > 0) {
+    html += '<div class="stx-color-picker-presets">';
+    for (const color of presetColors) {
+      html += `<button class="stx-color-preset" style="background: ${escapeHtml2(color)}" data-color="${escapeHtml2(color)}" ${disabled ? "disabled" : ""}></button>`;
+    }
+    html += "</div>";
+  }
+  return `<div class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createDatePicker(props) {
+  const {
+    value,
+    min,
+    max,
+    disabled = false,
+    label,
+    placeholder = "Select date",
+    showClear = true,
+    id = generateId("date"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-date-picker", disabled && "stx-date-picker--disabled", className);
+  const styleStr = buildStyles(style);
+  const dateValue = value instanceof Date ? value.toISOString().split("T")[0] : value || "";
+  const minValue = min instanceof Date ? min.toISOString().split("T")[0] : min;
+  const maxValue = max instanceof Date ? max.toISOString().split("T")[0] : max;
+  const inputAttrs = [
+    'type="date"',
+    `id="${id}"`,
+    dateValue && `value="${dateValue}"`,
+    minValue && `min="${minValue}"`,
+    maxValue && `max="${maxValue}"`,
+    disabled && "disabled",
+    `placeholder="${escapeHtml2(placeholder)}"`
+  ].filter(Boolean).join(" ");
+  let html = "";
+  if (label) {
+    html += `<label class="stx-date-picker-label" for="${id}">${escapeHtml2(label)}</label>`;
+  }
+  html += `<div class="stx-date-picker-input">
+    <input ${inputAttrs} />
+    ${showClear && dateValue ? '<button class="stx-date-picker-clear" type="button">&times;</button>' : ""}
+  </div>`;
+  return `<div class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createTimePicker(props) {
+  const {
+    value = "",
+    disabled = false,
+    label,
+    step = 60,
+    min,
+    max,
+    id = generateId("time"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-time-picker", disabled && "stx-time-picker--disabled", className);
+  const styleStr = buildStyles(style);
+  const inputAttrs = [
+    'type="time"',
+    `id="${id}"`,
+    value && `value="${escapeHtml2(value)}"`,
+    `step="${step}"`,
+    min && `min="${escapeHtml2(min)}"`,
+    max && `max="${escapeHtml2(max)}"`,
+    disabled && "disabled"
+  ].filter(Boolean).join(" ");
+  let html = "";
+  if (label) {
+    html += `<label class="stx-time-picker-label" for="${id}">${escapeHtml2(label)}</label>`;
+  }
+  html += `<input ${inputAttrs} class="stx-time-picker-input" />`;
+  return `<div class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createAutocomplete(props) {
+  const {
+    options,
+    value = "",
+    placeholder = "Search...",
+    disabled = false,
+    label,
+    loading = false,
+    id = generateId("autocomplete"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-autocomplete", disabled && "stx-autocomplete--disabled", className);
+  const styleStr = buildStyles(style);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const displayValue = selectedOption ? selectedOption.label : value;
+  let html = "";
+  if (label) {
+    html += `<label class="stx-autocomplete-label" for="${id}">${escapeHtml2(label)}</label>`;
+  }
+  html += `<div class="stx-autocomplete-input-wrapper">
+    <input type="text" id="${id}" value="${escapeHtml2(displayValue)}" placeholder="${escapeHtml2(placeholder)}" ${disabled ? "disabled" : ""} autocomplete="off" class="stx-autocomplete-input" />
+    ${loading ? '<span class="stx-autocomplete-spinner"></span>' : ""}
+  </div>`;
+  html += '<ul class="stx-autocomplete-list">';
+  for (const opt of options) {
+    html += `<li class="stx-autocomplete-item ${opt.value === value ? "stx-autocomplete-item--selected" : ""}" data-value="${escapeHtml2(opt.value)}">${escapeHtml2(opt.label)}</li>`;
+  }
+  html += "</ul>";
+  return `<div class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createLabel(props) {
+  const {
+    text,
+    htmlFor,
+    required = false,
+    size = "medium",
+    id = generateId("label"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-label", `stx-label--${size}`, className);
+  const styleStr = buildStyles(style);
+  return `<label id="${id}" class="${classes}" ${htmlFor ? `for="${escapeHtml2(htmlFor)}"` : ""} ${styleStr ? `style="${styleStr}"` : ""}>${escapeHtml2(text)}${required ? '<span class="stx-label-required">*</span>' : ""}</label>`;
+}
+function createImageView(props) {
+  const {
+    src,
+    alt = "",
+    width,
+    height,
+    objectFit = "cover",
+    fallback,
+    loading = "lazy",
+    id = generateId("image"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-image", className);
+  const imageStyles = { objectFit };
+  if (width)
+    imageStyles.width = typeof width === "number" ? `${width}px` : width;
+  if (height)
+    imageStyles.height = typeof height === "number" ? `${height}px` : height;
+  const combinedStyle = [buildStyles(imageStyles), buildStyles(style)].filter(Boolean).join("; ");
+  const fallbackAttr = fallback ? `onerror="this.src='${escapeHtml2(fallback)}'"` : "";
+  return `<img id="${id}" class="${classes}" src="${escapeHtml2(src)}" alt="${escapeHtml2(alt)}" loading="${loading}" ${combinedStyle ? `style="${combinedStyle}"` : ""} ${fallbackAttr} />`;
+}
+function createChip(props) {
+  const {
+    text,
+    variant = "default",
+    size = "medium",
+    removable = false,
+    icon,
+    id = generateId("chip"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-chip", `stx-chip--${variant}`, `stx-chip--${size}`, className);
+  const styleStr = buildStyles(style);
+  let html = "";
+  if (icon) {
+    html += `<span class="stx-chip-icon">${icon}</span>`;
+  }
+  html += `<span class="stx-chip-text">${escapeHtml2(text)}</span>`;
+  if (removable) {
+    html += '<button class="stx-chip-remove" type="button">&times;</button>';
+  }
+  return `<span id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</span>`;
+}
+function createTooltip(props) {
+  const {
+    text,
+    position = "top",
+    delay = 200,
+    children,
+    id = generateId("tooltip"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-tooltip-wrapper", className);
+  const styleStr = buildStyles(style);
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""} data-tooltip="${escapeHtml2(text)}" data-position="${position}" data-delay="${delay}">
+    ${children}
+    <span class="stx-tooltip stx-tooltip--${position}">${escapeHtml2(text)}</span>
+  </div>`;
+}
+function createScrollView(props) {
+  const {
+    direction = "vertical",
+    showScrollbar = true,
+    smooth = true,
+    height,
+    width,
+    children,
+    id = generateId("scroll"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-scroll-view", `stx-scroll-view--${direction}`, !showScrollbar && "stx-scroll-view--hide-scrollbar", smooth && "stx-scroll-view--smooth", className);
+  const scrollStyles = {};
+  if (height)
+    scrollStyles.height = typeof height === "number" ? `${height}px` : height;
+  if (width)
+    scrollStyles.width = typeof width === "number" ? `${width}px` : width;
+  const combinedStyle = [buildStyles(scrollStyles), buildStyles(style)].filter(Boolean).join("; ");
+  return `<div id="${id}" class="${classes}" ${combinedStyle ? `style="${combinedStyle}"` : ""}>${children}</div>`;
+}
+function createSplitView(props) {
+  const {
+    direction = "horizontal",
+    sizes = [50, 50],
+    resizable = true,
+    children,
+    id = generateId("split"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-split-view", `stx-split-view--${direction}`, resizable && "stx-split-view--resizable", className);
+  const styleStr = buildStyles(style);
+  const sizeUnit = direction === "horizontal" ? "width" : "height";
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>
+    <div class="stx-split-pane" style="${sizeUnit}: ${sizes[0]}%">${children[0]}</div>
+    ${resizable ? '<div class="stx-split-divider"></div>' : ""}
+    <div class="stx-split-pane" style="${sizeUnit}: ${sizes[1]}%">${children[1]}</div>
+  </div>`;
+}
+function createAccordion(props) {
+  const {
+    items,
+    multiple = false,
+    defaultOpen = [],
+    id = generateId("accordion"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-accordion", className);
+  const styleStr = buildStyles(style);
+  let html = "";
+  items.forEach((item, index) => {
+    const isOpen = defaultOpen.includes(index);
+    const itemClasses = buildClasses("stx-accordion-item", isOpen && "stx-accordion-item--open", item.disabled && "stx-accordion-item--disabled");
+    html += `<div class="${itemClasses}" data-index="${index}">
+      <button class="stx-accordion-header" ${item.disabled ? "disabled" : ""} aria-expanded="${isOpen}" data-multiple="${multiple}">
+        <span class="stx-accordion-title">${escapeHtml2(item.title)}</span>
+        <span class="stx-accordion-icon">\u25BC</span>
+      </button>
+      <div class="stx-accordion-content" ${isOpen ? "" : "hidden"}>
+        ${escapeHtml2(item.content)}
+      </div>
+    </div>`;
+  });
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createStepper(props) {
+  const {
+    steps,
+    currentStep,
+    orientation = "horizontal",
+    id = generateId("stepper"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-stepper", `stx-stepper--${orientation}`, className);
+  const styleStr = buildStyles(style);
+  let html = "";
+  steps.forEach((step, index) => {
+    const stepClasses = buildClasses("stx-step", index < currentStep && "stx-step--completed", index === currentStep && "stx-step--active");
+    html += `<div class="${stepClasses}" data-step="${index}">
+      <div class="stx-step-indicator">
+        ${index < currentStep ? "\u2713" : index + 1}
+      </div>
+      <div class="stx-step-content">
+        <div class="stx-step-label">${escapeHtml2(step.label)}</div>
+        ${step.description ? `<div class="stx-step-description">${escapeHtml2(step.description)}</div>` : ""}
+      </div>
+    </div>`;
+    if (index < steps.length - 1) {
+      html += '<div class="stx-step-connector"></div>';
+    }
+  });
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createModalComponent(props) {
+  const {
+    open = false,
+    title,
+    size = "medium",
+    closable = true,
+    children,
+    footer,
+    id = generateId("modal"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-modal-component", `stx-modal-component--${size}`, className);
+  const styleStr = buildStyles(style);
+  if (!open) {
+    return `<div id="${id}" class="${classes} stx-modal-component--hidden" ${styleStr ? `style="${styleStr}"` : ""}></div>`;
+  }
+  let html = '<div class="stx-modal-component-overlay">';
+  html += '<div class="stx-modal-component-dialog">';
+  if (title || closable) {
+    html += '<div class="stx-modal-component-header">';
+    if (title) {
+      html += `<h3 class="stx-modal-component-title">${escapeHtml2(title)}</h3>`;
+    }
+    if (closable) {
+      html += '<button class="stx-modal-component-close">&times;</button>';
+    }
+    html += "</div>";
+  }
+  html += `<div class="stx-modal-component-body">${children}</div>`;
+  if (footer) {
+    html += `<div class="stx-modal-component-footer">${footer}</div>`;
+  }
+  html += "</div></div>";
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createListView(props) {
+  const {
+    items,
+    selectable = false,
+    multiSelect = false,
+    emptyMessage = "No items",
+    id = generateId("list"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-list-view", selectable && "stx-list-view--selectable", multiSelect && "stx-list-view--multi", className);
+  const styleStr = buildStyles(style);
+  if (items.length === 0) {
+    return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>
+      <div class="stx-list-view-empty">${escapeHtml2(emptyMessage)}</div>
+    </div>`;
+  }
+  let html = '<ul class="stx-list-view-items">';
+  for (const item of items) {
+    const itemClasses = buildClasses("stx-list-view-item", item.selected && "stx-list-view-item--selected");
+    html += `<li class="${itemClasses}" data-id="${escapeHtml2(item.id)}" ${selectable ? 'tabindex="0"' : ""}>${item.content}</li>`;
+  }
+  html += "</ul>";
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createTable(props) {
+  const {
+    columns,
+    data,
+    striped = false,
+    bordered = false,
+    hoverable = true,
+    sortBy,
+    sortOrder,
+    id = generateId("table"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-table", striped && "stx-table--striped", bordered && "stx-table--bordered", hoverable && "stx-table--hoverable", className);
+  const styleStr = buildStyles(style);
+  let html = "<table>";
+  html += "<thead><tr>";
+  for (const col of columns) {
+    const isSorted = col.key === sortBy;
+    const sortClass = isSorted ? `stx-table-sorted stx-table-sorted--${sortOrder}` : "";
+    const sortable = col.sortable ? 'data-sortable="true"' : "";
+    const widthStyle = col.width ? `style="width: ${col.width}"` : "";
+    html += `<th class="${sortClass}" ${sortable} ${widthStyle} data-key="${escapeHtml2(col.key)}">${escapeHtml2(col.label)}${col.sortable ? '<span class="stx-table-sort-icon"></span>' : ""}</th>`;
+  }
+  html += "</tr></thead>";
+  html += "<tbody>";
+  for (const row of data) {
+    html += "<tr>";
+    for (const col of columns) {
+      const cellValue = row[col.key];
+      html += `<td>${cellValue != null ? escapeHtml2(String(cellValue)) : ""}</td>`;
+    }
+    html += "</tr>";
+  }
+  html += "</tbody></table>";
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function renderTreeNode(node, expandedKeys, selectedKeys, checkable) {
+  const isExpanded = expandedKeys.includes(node.key);
+  const isSelected = selectedKeys.includes(node.key);
+  const hasChildren = node.children && node.children.length > 0;
+  const nodeClasses = buildClasses("stx-tree-node", isSelected && "stx-tree-node--selected", node.disabled && "stx-tree-node--disabled");
+  let html = `<div class="${nodeClasses}" data-key="${escapeHtml2(node.key)}">`;
+  html += '<div class="stx-tree-node-content">';
+  if (hasChildren) {
+    html += `<span class="stx-tree-toggle ${isExpanded ? "stx-tree-toggle--expanded" : ""}">\u25B6</span>`;
+  } else {
+    html += '<span class="stx-tree-toggle-placeholder"></span>';
+  }
+  if (checkable) {
+    html += `<input type="checkbox" class="stx-tree-checkbox" ${isSelected ? "checked" : ""} ${node.disabled ? "disabled" : ""} />`;
+  }
+  if (node.icon) {
+    html += `<span class="stx-tree-icon">${node.icon}</span>`;
+  }
+  html += `<span class="stx-tree-label">${escapeHtml2(node.label)}</span>`;
+  html += "</div>";
+  if (hasChildren && isExpanded) {
+    html += '<div class="stx-tree-children">';
+    for (const child of node.children) {
+      html += renderTreeNode(child, expandedKeys, selectedKeys, checkable);
+    }
+    html += "</div>";
+  }
+  html += "</div>";
+  return html;
+}
+function createTreeView(props) {
+  const {
+    nodes,
+    expandedKeys = [],
+    selectedKeys = [],
+    checkable = false,
+    id = generateId("tree"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-tree-view", checkable && "stx-tree-view--checkable", className);
+  const styleStr = buildStyles(style);
+  let html = "";
+  for (const node of nodes) {
+    html += renderTreeNode(node, expandedKeys, selectedKeys, checkable);
+  }
+  return `<div id="${id}" class="${classes}" role="tree" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createDataGrid(props) {
+  const {
+    columns,
+    data,
+    pagination,
+    selectable = false,
+    id = generateId("datagrid"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-data-grid", selectable && "stx-data-grid--selectable", className);
+  const styleStr = buildStyles(style);
+  let html = '<div class="stx-data-grid-table-wrapper">';
+  html += '<table class="stx-data-grid-table">';
+  html += "<thead><tr>";
+  if (selectable) {
+    html += '<th class="stx-data-grid-select-all"><input type="checkbox" /></th>';
+  }
+  for (const col of columns) {
+    const widthStyle = col.width ? `style="width: ${col.width}"` : "";
+    html += `<th ${widthStyle}>
+      <div class="stx-data-grid-header-cell">
+        <span>${escapeHtml2(col.label)}</span>
+        ${col.sortable ? '<button class="stx-data-grid-sort">\u21C5</button>' : ""}
+        ${col.filterable ? '<button class="stx-data-grid-filter">\u22BB</button>' : ""}
+      </div>
+    </th>`;
+  }
+  html += "</tr></thead>";
+  html += "<tbody>";
+  for (const row of data) {
+    html += "<tr>";
+    if (selectable) {
+      html += '<td class="stx-data-grid-select"><input type="checkbox" /></td>';
+    }
+    for (const col of columns) {
+      const cellValue = row[col.key];
+      html += `<td>${cellValue != null ? escapeHtml2(String(cellValue)) : ""}</td>`;
+    }
+    html += "</tr>";
+  }
+  html += "</tbody></table></div>";
+  if (pagination) {
+    const totalPages = Math.ceil(pagination.total / pagination.pageSize);
+    html += `<div class="stx-data-grid-pagination">
+      <span class="stx-data-grid-page-info">Page ${pagination.page} of ${totalPages} (${pagination.total} items)</span>
+      <div class="stx-data-grid-page-buttons">
+        <button class="stx-data-grid-page-btn" ${pagination.page <= 1 ? "disabled" : ""}>\u25C0</button>
+        <button class="stx-data-grid-page-btn" ${pagination.page >= totalPages ? "disabled" : ""}>\u25B6</button>
+      </div>
+    </div>`;
+  }
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createChart(props) {
+  const {
+    type,
+    data,
+    options = {},
+    width = "100%",
+    height = 300,
+    id = generateId("chart"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-chart", `stx-chart--${type}`, className);
+  const chartStyles = {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height
+  };
+  const combinedStyle = [buildStyles(chartStyles), buildStyles(style)].filter(Boolean).join("; ");
+  const chartData = JSON.stringify({ type, data, options });
+  return `<div id="${id}" class="${classes}" style="${combinedStyle}" data-chart='${escapeHtml2(chartData)}'>
+    <div class="stx-chart-placeholder">
+      ${options.title ? `<div class="stx-chart-title">${escapeHtml2(options.title)}</div>` : ""}
+      <div class="stx-chart-type">${type.charAt(0).toUpperCase() + type.slice(1)} Chart</div>
+      <div class="stx-chart-info">${data.datasets.length} dataset(s), ${data.labels.length} labels</div>
+    </div>
+  </div>`;
+}
+function createCodeEditor(props) {
+  const {
+    value = "",
+    language = "plaintext",
+    theme = "dark",
+    lineNumbers = true,
+    readOnly = false,
+    height = 300,
+    tabSize = 2,
+    wordWrap = false,
+    id = generateId("code"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-code-editor", `stx-code-editor--${theme}`, lineNumbers && "stx-code-editor--line-numbers", readOnly && "stx-code-editor--readonly", wordWrap && "stx-code-editor--wrap", className);
+  const editorStyles = {
+    height: typeof height === "number" ? `${height}px` : height
+  };
+  const combinedStyle = [buildStyles(editorStyles), buildStyles(style)].filter(Boolean).join("; ");
+  const lines = value.split(`
+`);
+  let codeHtml = "";
+  if (lineNumbers) {
+    codeHtml += '<div class="stx-code-editor-gutter">';
+    for (let i = 1;i <= lines.length; i++) {
+      codeHtml += `<div class="stx-code-editor-line-number">${i}</div>`;
+    }
+    codeHtml += "</div>";
+  }
+  codeHtml += `<pre class="stx-code-editor-content"><code class="language-${escapeHtml2(language)}">${escapeHtml2(value)}</code></pre>`;
+  return `<div id="${id}" class="${classes}" style="${combinedStyle}" data-language="${escapeHtml2(language)}" data-tab-size="${tabSize}">${codeHtml}</div>`;
+}
+function createMediaPlayer(props) {
+  const {
+    src,
+    type = "video",
+    poster,
+    autoplay = false,
+    loop = false,
+    muted = false,
+    controls = true,
+    width,
+    height,
+    id = generateId("media"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-media-player", `stx-media-player--${type}`, className);
+  const mediaStyles = {};
+  if (width)
+    mediaStyles.width = typeof width === "number" ? `${width}px` : width;
+  if (height)
+    mediaStyles.height = typeof height === "number" ? `${height}px` : height;
+  const combinedStyle = [buildStyles(mediaStyles), buildStyles(style)].filter(Boolean).join("; ");
+  const mediaAttrs = [
+    `id="${id}-media"`,
+    `src="${escapeHtml2(src)}"`,
+    controls && "controls",
+    autoplay && "autoplay",
+    loop && "loop",
+    muted && "muted",
+    type === "video" && poster && `poster="${escapeHtml2(poster)}"`
+  ].filter(Boolean).join(" ");
+  const mediaElement = type === "video" ? `<video ${mediaAttrs}>Your browser does not support the video tag.</video>` : `<audio ${mediaAttrs}>Your browser does not support the audio tag.</audio>`;
+  return `<div id="${id}" class="${classes}" ${combinedStyle ? `style="${combinedStyle}"` : ""}>${mediaElement}</div>`;
+}
+function formatFileSize(bytes) {
+  if (bytes === undefined)
+    return "";
+  const units = ["B", "KB", "MB", "GB"];
+  let size = bytes;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  return `${size.toFixed(1)} ${units[unitIndex]}`;
+}
+function createFileExplorer(props) {
+  const {
+    files,
+    viewMode = "list",
+    showHidden = false,
+    selectable = true,
+    id = generateId("files"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-file-explorer", `stx-file-explorer--${viewMode}`, className);
+  const styleStr = buildStyles(style);
+  const filteredFiles = showHidden ? files : files.filter((f) => !f.name.startsWith("."));
+  let html = "";
+  if (viewMode === "list") {
+    html = '<table class="stx-file-explorer-list"><thead><tr><th>Name</th><th>Size</th><th>Modified</th></tr></thead><tbody>';
+    for (const file of filteredFiles) {
+      const icon = file.icon || (file.type === "folder" ? "\uD83D\uDCC1" : "\uD83D\uDCC4");
+      const size = file.type === "file" ? formatFileSize(file.size) : "";
+      const modified = file.modified ? file.modified.toLocaleDateString() : "";
+      html += `<tr class="stx-file-explorer-item ${selectable ? "stx-file-explorer-item--selectable" : ""}" data-path="${escapeHtml2(file.path)}" data-type="${file.type}">
+        <td><span class="stx-file-explorer-icon">${icon}</span>${escapeHtml2(file.name)}</td>
+        <td>${size}</td>
+        <td>${modified}</td>
+      </tr>`;
+    }
+    html += "</tbody></table>";
+  } else {
+    html = '<div class="stx-file-explorer-grid">';
+    for (const file of filteredFiles) {
+      const icon = file.icon || (file.type === "folder" ? "\uD83D\uDCC1" : "\uD83D\uDCC4");
+      html += `<div class="stx-file-explorer-item ${selectable ? "stx-file-explorer-item--selectable" : ""}" data-path="${escapeHtml2(file.path)}" data-type="${file.type}">
+        <div class="stx-file-explorer-icon">${icon}</div>
+        <div class="stx-file-explorer-name">${escapeHtml2(file.name)}</div>
+      </div>`;
+    }
+    html += "</div>";
+  }
+  return `<div id="${id}" class="${classes}" ${styleStr ? `style="${styleStr}"` : ""}>${html}</div>`;
+}
+function createWebView(props) {
+  const {
+    url,
+    width = "100%",
+    height = 400,
+    sandbox = true,
+    allowScripts = true,
+    id = generateId("webview"),
+    className,
+    style
+  } = props;
+  const classes = buildClasses("stx-webview", className);
+  const webviewStyles = {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height
+  };
+  const combinedStyle = [buildStyles(webviewStyles), buildStyles(style)].filter(Boolean).join("; ");
+  const sandboxAttrs = [];
+  if (sandbox) {
+    sandboxAttrs.push("allow-same-origin");
+    if (allowScripts) {
+      sandboxAttrs.push("allow-scripts");
+    }
+  }
+  const sandboxAttr = sandbox ? `sandbox="${sandboxAttrs.join(" ")}"` : "";
+  return `<iframe id="${id}" class="${classes}" src="${escapeHtml2(url)}" style="${combinedStyle}" ${sandboxAttr} loading="lazy" frameborder="0"></iframe>`;
+}
+var AVAILABLE_COMPONENTS = [
+  "Button",
+  "TextInput",
+  "Checkbox",
+  "RadioButton",
+  "Slider",
+  "ColorPicker",
+  "DatePicker",
+  "TimePicker",
+  "Autocomplete",
+  "Label",
+  "ImageView",
+  "ProgressBar",
+  "Avatar",
+  "Badge",
+  "Chip",
+  "Card",
+  "Tooltip",
+  "Toast",
+  "ScrollView",
+  "SplitView",
+  "Accordion",
+  "Stepper",
+  "Modal",
+  "Tabs",
+  "Dropdown",
+  "ListView",
+  "Table",
+  "TreeView",
+  "DataGrid",
+  "Chart",
+  "Rating",
+  "CodeEditor",
+  "MediaPlayer",
+  "FileExplorer",
+  "WebView"
+];
+var COMPONENT_STYLES = `
+/* Button */
+.stx-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.stx-button--primary { background: #3498db; color: #fff; }
+.stx-button--primary:hover { background: #2980b9; }
+.stx-button--secondary { background: #6c757d; color: #fff; }
+.stx-button--outline { background: transparent; border: 1px solid #3498db; color: #3498db; }
+.stx-button--ghost { background: transparent; color: #3498db; }
+.stx-button--destructive { background: #e74c3c; color: #fff; }
+.stx-button--small { padding: 4px 8px; font-size: 12px; }
+.stx-button--large { padding: 12px 24px; font-size: 16px; }
+.stx-button--disabled { opacity: 0.5; cursor: not-allowed; }
+.stx-button--loading { pointer-events: none; }
+.stx-button-spinner { width: 16px; height: 16px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin 0.6s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Input */
+.stx-input-wrapper { display: flex; flex-direction: column; gap: 4px; }
+.stx-input-label { font-size: 14px; font-weight: 500; color: #333; }
+.stx-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; transition: border-color 0.15s; }
+.stx-input:focus { outline: none; border-color: #3498db; }
+.stx-input--error { border-color: #e74c3c; }
+.stx-input-error { font-size: 12px; color: #e74c3c; }
+.stx-input-hint { font-size: 12px; color: #666; }
+
+/* Checkbox */
+.stx-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
+.stx-checkbox input { display: none; }
+.stx-checkbox-box { width: 18px; height: 18px; border: 2px solid #ddd; border-radius: 4px; transition: all 0.15s; }
+.stx-checkbox input:checked + .stx-checkbox-box { background: #3498db; border-color: #3498db; }
+.stx-checkbox--disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Progress */
+.stx-progress { height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; position: relative; }
+.stx-progress-bar { height: 100%; background: #3498db; transition: width 0.3s; }
+.stx-progress--success .stx-progress-bar { background: #27ae60; }
+.stx-progress--warning .stx-progress-bar { background: #f39c12; }
+.stx-progress--error .stx-progress-bar { background: #e74c3c; }
+.stx-progress--indeterminate .stx-progress-bar { animation: progress-indeterminate 1.5s infinite; }
+@keyframes progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
+
+/* Badge */
+.stx-badge { display: inline-flex; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
+.stx-badge--default { background: #e0e0e0; color: #333; }
+.stx-badge--primary { background: #3498db; color: #fff; }
+.stx-badge--success { background: #27ae60; color: #fff; }
+.stx-badge--warning { background: #f39c12; color: #fff; }
+.stx-badge--error { background: #e74c3c; color: #fff; }
+
+/* Avatar */
+.stx-avatar { display: inline-flex; align-items: center; justify-content: center; background: #3498db; color: #fff; overflow: hidden; }
+.stx-avatar--circle { border-radius: 50%; }
+.stx-avatar--square { border-radius: 0; }
+.stx-avatar--rounded { border-radius: 8px; }
+.stx-avatar--small { width: 32px; height: 32px; font-size: 12px; }
+.stx-avatar--medium { width: 40px; height: 40px; font-size: 14px; }
+.stx-avatar--large { width: 56px; height: 56px; font-size: 18px; }
+.stx-avatar-img { width: 100%; height: 100%; object-fit: cover; }
+
+/* Card */
+.stx-card { background: #fff; border-radius: 8px; overflow: hidden; }
+.stx-card--outlined { border: 1px solid #e0e0e0; }
+.stx-card--elevated { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+.stx-card-image img { width: 100%; display: block; }
+.stx-card-body { padding: 16px; }
+.stx-card-title { margin: 0 0 4px; font-size: 18px; }
+.stx-card-subtitle { margin: 0 0 8px; color: #666; font-size: 14px; }
+.stx-card-footer { padding: 12px 16px; border-top: 1px solid #e0e0e0; }
+
+/* Tabs */
+.stx-tabs { display: flex; gap: 4px; border-bottom: 1px solid #e0e0e0; }
+.stx-tab { padding: 8px 16px; border: none; background: none; cursor: pointer; color: #666; border-bottom: 2px solid transparent; transition: all 0.15s; }
+.stx-tab:hover { color: #333; }
+.stx-tab--active { color: #3498db; border-bottom-color: #3498db; }
+.stx-tab--disabled { opacity: 0.5; cursor: not-allowed; }
+.stx-tabs--pills { border-bottom: none; }
+.stx-tabs--pills .stx-tab { border-radius: 20px; border-bottom: none; }
+.stx-tabs--pills .stx-tab--active { background: #3498db; color: #fff; }
+
+/* Dropdown */
+.stx-dropdown { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: #fff; cursor: pointer; min-width: 150px; }
+.stx-dropdown:focus { outline: none; border-color: #3498db; }
+.stx-dropdown--disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Rating */
+.stx-rating { display: inline-flex; gap: 4px; }
+.stx-star { color: #ddd; cursor: pointer; transition: color 0.15s; }
+.stx-star--filled { color: #f1c40f; }
+.stx-star--half { background: linear-gradient(90deg, #f1c40f 50%, #ddd 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.stx-rating--readonly .stx-star { cursor: default; }
+.stx-rating--small .stx-star { font-size: 16px; }
+.stx-rating--medium .stx-star { font-size: 24px; }
+.stx-rating--large .stx-star { font-size: 32px; }
+
+/* Slider */
+.stx-slider { display: flex; align-items: center; gap: 12px; }
+.stx-slider-track { flex: 1; }
+.stx-slider input[type="range"] { width: 100%; }
+.stx-slider-value { min-width: 40px; text-align: right; font-size: 14px; }
+
+/* Radio Button */
+.stx-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
+.stx-radio input { display: none; }
+.stx-radio-circle { width: 18px; height: 18px; border: 2px solid #ddd; border-radius: 50%; position: relative; transition: all 0.15s; }
+.stx-radio input:checked + .stx-radio-circle { border-color: #3498db; }
+.stx-radio input:checked + .stx-radio-circle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; background: #3498db; border-radius: 50%; }
+.stx-radio--disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Color Picker */
+.stx-color-picker { display: flex; flex-direction: column; gap: 8px; }
+.stx-color-picker-input { display: flex; align-items: center; gap: 8px; }
+.stx-color-picker-input input[type="color"] { width: 40px; height: 40px; border: none; cursor: pointer; }
+.stx-color-picker-value { font-family: monospace; }
+.stx-color-picker-presets { display: flex; gap: 4px; flex-wrap: wrap; }
+.stx-color-preset { width: 24px; height: 24px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; }
+.stx-color-preset:hover { border-color: #333; }
+
+/* Date/Time Picker */
+.stx-date-picker, .stx-time-picker { display: flex; flex-direction: column; gap: 4px; }
+.stx-date-picker-input, .stx-time-picker-input { display: flex; align-items: center; gap: 4px; }
+.stx-date-picker-input input, .stx-time-picker-input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
+.stx-date-picker-clear { background: none; border: none; cursor: pointer; font-size: 16px; }
+
+/* Autocomplete */
+.stx-autocomplete { position: relative; }
+.stx-autocomplete-input-wrapper { position: relative; }
+.stx-autocomplete-input { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }
+.stx-autocomplete-spinner { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid #ddd; border-top-color: #3498db; border-radius: 50%; animation: spin 0.6s linear infinite; }
+.stx-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; max-height: 200px; overflow-y: auto; display: none; z-index: 10; }
+.stx-autocomplete:focus-within .stx-autocomplete-list { display: block; }
+.stx-autocomplete-item { padding: 8px 12px; cursor: pointer; }
+.stx-autocomplete-item:hover { background: #f5f5f5; }
+.stx-autocomplete-item--selected { background: #e8f4fc; }
+
+/* Label */
+.stx-label { display: inline-block; font-weight: 500; }
+.stx-label--small { font-size: 12px; }
+.stx-label--medium { font-size: 14px; }
+.stx-label--large { font-size: 16px; }
+.stx-label-required { color: #e74c3c; margin-left: 2px; }
+
+/* Image */
+.stx-image { display: block; max-width: 100%; }
+
+/* Chip */
+.stx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 16px; font-size: 13px; }
+.stx-chip--default { background: #e0e0e0; color: #333; }
+.stx-chip--primary { background: #e8f4fc; color: #3498db; }
+.stx-chip--success { background: #e8f8f0; color: #27ae60; }
+.stx-chip--warning { background: #fef5e7; color: #f39c12; }
+.stx-chip--error { background: #fdebeb; color: #e74c3c; }
+.stx-chip--small { padding: 2px 8px; font-size: 11px; }
+.stx-chip--large { padding: 6px 16px; font-size: 15px; }
+.stx-chip-remove { background: none; border: none; cursor: pointer; opacity: 0.6; padding: 0 2px; }
+.stx-chip-remove:hover { opacity: 1; }
+
+/* Tooltip */
+.stx-tooltip-wrapper { position: relative; display: inline-block; }
+.stx-tooltip { position: absolute; background: #333; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; z-index: 1000; }
+.stx-tooltip-wrapper:hover .stx-tooltip { opacity: 1; visibility: visible; }
+.stx-tooltip--top { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px; }
+.stx-tooltip--bottom { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; }
+.stx-tooltip--left { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 8px; }
+.stx-tooltip--right { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; }
+
+/* Scroll View */
+.stx-scroll-view { overflow: auto; }
+.stx-scroll-view--vertical { overflow-x: hidden; overflow-y: auto; }
+.stx-scroll-view--horizontal { overflow-x: auto; overflow-y: hidden; }
+.stx-scroll-view--hide-scrollbar::-webkit-scrollbar { display: none; }
+.stx-scroll-view--hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+.stx-scroll-view--smooth { scroll-behavior: smooth; }
+
+/* Split View */
+.stx-split-view { display: flex; }
+.stx-split-view--horizontal { flex-direction: row; }
+.stx-split-view--vertical { flex-direction: column; }
+.stx-split-pane { overflow: auto; }
+.stx-split-divider { background: #e0e0e0; flex-shrink: 0; }
+.stx-split-view--horizontal .stx-split-divider { width: 4px; cursor: col-resize; }
+.stx-split-view--vertical .stx-split-divider { height: 4px; cursor: row-resize; }
+.stx-split-divider:hover { background: #3498db; }
+
+/* Accordion */
+.stx-accordion { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
+.stx-accordion-item { border-bottom: 1px solid #e0e0e0; }
+.stx-accordion-item:last-child { border-bottom: none; }
+.stx-accordion-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: none; border: none; cursor: pointer; font-size: 14px; }
+.stx-accordion-header:hover { background: #f5f5f5; }
+.stx-accordion-icon { transition: transform 0.2s; }
+.stx-accordion-item--open .stx-accordion-icon { transform: rotate(180deg); }
+.stx-accordion-content { padding: 0 16px 16px; }
+.stx-accordion-item--disabled { opacity: 0.5; }
+.stx-accordion-item--disabled .stx-accordion-header { cursor: not-allowed; }
+
+/* Stepper */
+.stx-stepper { display: flex; }
+.stx-stepper--horizontal { flex-direction: row; align-items: flex-start; }
+.stx-stepper--vertical { flex-direction: column; }
+.stx-step { display: flex; align-items: center; }
+.stx-stepper--vertical .stx-step { flex-direction: row; }
+.stx-step-indicator { width: 32px; height: 32px; border-radius: 50%; background: #e0e0e0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; flex-shrink: 0; }
+.stx-step--completed .stx-step-indicator { background: #27ae60; color: #fff; }
+.stx-step--active .stx-step-indicator { background: #3498db; color: #fff; }
+.stx-step-content { margin-left: 12px; }
+.stx-step-label { font-size: 14px; font-weight: 500; }
+.stx-step-description { font-size: 12px; color: #666; }
+.stx-step-connector { flex: 1; height: 2px; background: #e0e0e0; margin: 0 8px; min-width: 20px; }
+.stx-stepper--vertical .stx-step-connector { width: 2px; height: 20px; margin: 8px 0 8px 15px; }
+
+/* Modal Component */
+.stx-modal-component--hidden { display: none; }
+.stx-modal-component-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; }
+.stx-modal-component-dialog { background: #fff; border-radius: 12px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
+.stx-modal-component--small .stx-modal-component-dialog { width: 300px; }
+.stx-modal-component--medium .stx-modal-component-dialog { width: 500px; }
+.stx-modal-component--large .stx-modal-component-dialog { width: 800px; }
+.stx-modal-component--fullscreen .stx-modal-component-dialog { width: 100%; height: 100%; border-radius: 0; }
+.stx-modal-component-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #e0e0e0; }
+.stx-modal-component-title { margin: 0; font-size: 18px; }
+.stx-modal-component-close { background: none; border: none; font-size: 24px; cursor: pointer; opacity: 0.6; }
+.stx-modal-component-close:hover { opacity: 1; }
+.stx-modal-component-body { padding: 16px; overflow-y: auto; flex: 1; }
+.stx-modal-component-footer { padding: 16px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; gap: 8px; }
+
+/* List View */
+.stx-list-view { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
+.stx-list-view-items { list-style: none; margin: 0; padding: 0; }
+.stx-list-view-item { padding: 12px 16px; border-bottom: 1px solid #e0e0e0; }
+.stx-list-view-item:last-child { border-bottom: none; }
+.stx-list-view--selectable .stx-list-view-item { cursor: pointer; }
+.stx-list-view--selectable .stx-list-view-item:hover { background: #f5f5f5; }
+.stx-list-view-item--selected { background: #e8f4fc; }
+.stx-list-view-empty { padding: 24px; text-align: center; color: #666; }
+
+/* Table */
+.stx-table { overflow-x: auto; }
+.stx-table table { width: 100%; border-collapse: collapse; }
+.stx-table th, .stx-table td { padding: 12px; text-align: left; }
+.stx-table th { font-weight: 600; background: #f5f5f5; }
+.stx-table--bordered th, .stx-table--bordered td { border: 1px solid #e0e0e0; }
+.stx-table--striped tbody tr:nth-child(even) { background: #f9f9f9; }
+.stx-table--hoverable tbody tr:hover { background: #f5f5f5; }
+.stx-table th[data-sortable] { cursor: pointer; }
+.stx-table-sort-icon::after { content: '\u21C5'; margin-left: 4px; opacity: 0.3; }
+.stx-table-sorted .stx-table-sort-icon::after { opacity: 1; }
+.stx-table-sorted--asc .stx-table-sort-icon::after { content: '\u2191'; }
+.stx-table-sorted--desc .stx-table-sort-icon::after { content: '\u2193'; }
+
+/* Tree View */
+.stx-tree-view { font-size: 14px; }
+.stx-tree-node { padding-left: 20px; }
+.stx-tree-node-content { display: flex; align-items: center; gap: 4px; padding: 4px; cursor: pointer; border-radius: 4px; }
+.stx-tree-node-content:hover { background: #f5f5f5; }
+.stx-tree-node--selected > .stx-tree-node-content { background: #e8f4fc; }
+.stx-tree-node--disabled { opacity: 0.5; }
+.stx-tree-toggle { width: 16px; cursor: pointer; transition: transform 0.2s; }
+.stx-tree-toggle--expanded { transform: rotate(90deg); }
+.stx-tree-toggle-placeholder { width: 16px; }
+.stx-tree-children { padding-left: 8px; }
+
+/* Data Grid */
+.stx-data-grid { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
+.stx-data-grid-table-wrapper { overflow-x: auto; }
+.stx-data-grid-table { width: 100%; border-collapse: collapse; }
+.stx-data-grid-table th, .stx-data-grid-table td { padding: 12px; text-align: left; border-bottom: 1px solid #e0e0e0; }
+.stx-data-grid-table th { background: #f5f5f5; }
+.stx-data-grid-header-cell { display: flex; align-items: center; gap: 8px; }
+.stx-data-grid-sort, .stx-data-grid-filter { background: none; border: none; cursor: pointer; opacity: 0.5; }
+.stx-data-grid-sort:hover, .stx-data-grid-filter:hover { opacity: 1; }
+.stx-data-grid-pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid #e0e0e0; }
+.stx-data-grid-page-buttons { display: flex; gap: 4px; }
+.stx-data-grid-page-btn { padding: 4px 8px; border: 1px solid #e0e0e0; background: #fff; cursor: pointer; border-radius: 4px; }
+.stx-data-grid-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Chart */
+.stx-chart { background: #f9f9f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
+.stx-chart-placeholder { text-align: center; padding: 20px; }
+.stx-chart-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
+.stx-chart-type { font-size: 14px; color: #666; }
+.stx-chart-info { font-size: 12px; color: #999; margin-top: 4px; }
+
+/* Code Editor */
+.stx-code-editor { display: flex; font-family: 'Monaco', 'Menlo', monospace; font-size: 13px; line-height: 1.5; overflow: hidden; border-radius: 8px; }
+.stx-code-editor--dark { background: #1e1e1e; color: #d4d4d4; }
+.stx-code-editor--light { background: #fff; color: #333; border: 1px solid #e0e0e0; }
+.stx-code-editor-gutter { padding: 12px 8px; background: rgba(0,0,0,0.1); text-align: right; user-select: none; }
+.stx-code-editor-line-number { color: #858585; }
+.stx-code-editor-content { flex: 1; padding: 12px; overflow: auto; }
+.stx-code-editor-content pre { margin: 0; }
+.stx-code-editor--wrap .stx-code-editor-content { white-space: pre-wrap; word-wrap: break-word; }
+
+/* Media Player */
+.stx-media-player video, .stx-media-player audio { width: 100%; display: block; }
+.stx-media-player--video { background: #000; }
+
+/* File Explorer */
+.stx-file-explorer { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
+.stx-file-explorer-list { width: 100%; border-collapse: collapse; }
+.stx-file-explorer-list th { text-align: left; padding: 8px 12px; background: #f5f5f5; font-weight: 500; }
+.stx-file-explorer-list td { padding: 8px 12px; border-top: 1px solid #e0e0e0; }
+.stx-file-explorer-item--selectable { cursor: pointer; }
+.stx-file-explorer-item--selectable:hover { background: #f5f5f5; }
+.stx-file-explorer-icon { margin-right: 8px; }
+.stx-file-explorer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px; padding: 16px; }
+.stx-file-explorer--grid .stx-file-explorer-item { text-align: center; padding: 12px; border-radius: 8px; }
+.stx-file-explorer--grid .stx-file-explorer-icon { font-size: 32px; display: block; margin-bottom: 8px; }
+.stx-file-explorer--grid .stx-file-explorer-name { font-size: 12px; word-break: break-all; }
+
+/* WebView */
+.stx-webview { border: none; display: block; }
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .stx-input-label { color: #eee; }
+  .stx-input { background: #333; border-color: #555; color: #fff; }
+  .stx-card { background: #2d2d2d; color: #fff; }
+  .stx-card-subtitle { color: #aaa; }
+  .stx-progress { background: #444; }
+  .stx-dropdown { background: #333; border-color: #555; color: #fff; }
+  .stx-accordion { border-color: #444; }
+  .stx-accordion-item { border-color: #444; }
+  .stx-accordion-header:hover { background: #333; }
+  .stx-list-view { border-color: #444; }
+  .stx-list-view-item { border-color: #444; }
+  .stx-list-view--selectable .stx-list-view-item:hover { background: #333; }
+  .stx-table th { background: #333; }
+  .stx-table--bordered th, .stx-table--bordered td { border-color: #444; }
+  .stx-tree-node-content:hover { background: #333; }
+  .stx-data-grid { border-color: #444; }
+  .stx-data-grid-table th, .stx-data-grid-table td { border-color: #444; }
+  .stx-data-grid-table th { background: #333; }
+  .stx-modal-component-dialog { background: #2d2d2d; color: #fff; }
+  .stx-modal-component-header, .stx-modal-component-footer { border-color: #444; }
+  .stx-file-explorer { border-color: #444; }
+  .stx-file-explorer-list th { background: #333; }
+  .stx-file-explorer-list td { border-color: #444; }
+  .stx-autocomplete-list { background: #333; border-color: #444; }
+  .stx-autocomplete-item:hover { background: #444; }
+  .stx-chip--default { background: #444; color: #eee; }
+  .stx-chip--primary { background: #1a3a52; }
+  .stx-chip--success { background: #1a3a2a; }
+  .stx-chip--warning { background: #3a2a1a; }
+  .stx-chip--error { background: #3a1a1a; }
+}
+`;
+// src/modals.ts
+function hasNativeDialogSupport() {
+  return false;
+}
+function isBrowser2() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+var activeModals = [];
+function generateModalId() {
+  return `modal-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function getModalIcon(type) {
+  switch (type) {
+    case "info":
+      return "&#x2139;";
+    case "warning":
+      return "&#x26A0;";
+    case "error":
+      return "&#x2716;";
+    case "success":
+      return "&#x2714;";
+    case "question":
+      return "&#x2753;";
+    default:
+      return "&#x2139;";
+  }
+}
+function getDefaultButtons(type) {
+  if (type === "question") {
+    return [
+      { label: "No", style: "default" },
+      { label: "Yes", style: "primary" }
+    ];
+  }
+  return [{ label: "OK", style: "primary" }];
+}
+function createModalHTML(state) {
+  const { options } = state;
+  const icon = getModalIcon(options.type);
+  const buttons = options.buttons || getDefaultButtons(options.type);
+  const typeClass = options.type || "info";
+  let buttonsHtml = "";
+  buttons.forEach((btn, index) => {
+    const styleClass = btn.style === "destructive" ? "destructive" : btn.style === "primary" ? "primary" : "default";
+    const autoFocus = index === (options.defaultButton ?? buttons.length - 1) ? "autofocus" : "";
+    buttonsHtml += `<button class="stx-modal-btn ${styleClass}" data-index="${index}" ${autoFocus}>${btn.label}</button>`;
+  });
+  return `
+    <div class="stx-modal-overlay" data-modal-id="${state.id}">
+      <div class="stx-modal ${typeClass}" role="dialog" aria-modal="true" aria-labelledby="${state.id}-title">
+        <div class="stx-modal-icon">${icon}</div>
+        <div class="stx-modal-content">
+          ${options.title ? `<h2 id="${state.id}-title" class="stx-modal-title">${escapeHtml3(options.title)}</h2>` : ""}
+          <p class="stx-modal-message">${escapeHtml3(options.message)}</p>
+        </div>
+        <div class="stx-modal-buttons">${buttonsHtml}</div>
+      </div>
+    </div>
+  `;
+}
+function escapeHtml3(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function closeModal(state, buttonIndex, cancelled = false) {
+  const index = activeModals.indexOf(state);
+  if (index > -1) {
+    activeModals.splice(index, 1);
+  }
+  if (state.element && isBrowser2()) {
+    state.element.remove();
+  }
+  const buttons = state.options.buttons || getDefaultButtons(state.options.type);
+  const button = buttons[buttonIndex];
+  if (button?.action) {
+    button.action();
+  }
+  state.resolve({ buttonIndex, cancelled });
+}
+async function showModal(options) {
+  const hasNative = hasNativeDialogSupport();
+  const id = generateModalId();
+  return new Promise((resolve) => {
+    const state = {
+      id,
+      options,
+      resolve
+    };
+    activeModals.push(state);
+    if (hasNative) {
+      console.log(`[stx-modal] Showing native modal: ${options.title || "Modal"}`);
+      setTimeout(() => {
+        closeModal(state, options.defaultButton ?? 0, false);
+      }, 0);
+    } else if (isBrowser2()) {
+      try {
+        const container = document.createElement("div");
+        container.innerHTML = createModalHTML(state);
+        const overlay = container.firstElementChild;
+        if (!overlay) {
+          console.log(`[stx-modal] ${options.type?.toUpperCase() || "INFO"}: ${options.title || "Modal"}`);
+          console.log(`[stx-modal] ${options.message}`);
+          setTimeout(() => {
+            closeModal(state, options.defaultButton ?? 0, false);
+          }, 0);
+          return;
+        }
+        state.element = overlay;
+        try {
+          document.body.appendChild(overlay);
+        } catch {
+          console.log(`[stx-modal] ${options.type?.toUpperCase() || "INFO"}: ${options.title || "Modal"}`);
+          console.log(`[stx-modal] ${options.message}`);
+          setTimeout(() => {
+            closeModal(state, options.defaultButton ?? 0, false);
+          }, 0);
+          return;
+        }
+        try {
+          overlay.querySelectorAll(".stx-modal-btn").forEach((btn) => {
+            btn.addEventListener("click", () => {
+              const index = Number.parseInt(btn.dataset.index || "0", 10);
+              closeModal(state, index, false);
+            });
+          });
+        } catch {}
+        try {
+          overlay.addEventListener("click", (e) => {
+            if (e.target === overlay) {
+              const cancelIndex = options.cancelButton ?? 0;
+              closeModal(state, cancelIndex, true);
+            }
+          });
+        } catch {}
+        try {
+          const handleKeydown = (e) => {
+            if (e.key === "Escape") {
+              const cancelIndex = options.cancelButton ?? 0;
+              closeModal(state, cancelIndex, true);
+              document.removeEventListener("keydown", handleKeydown);
+            } else if (e.key === "Enter") {
+              const defaultIndex = options.defaultButton ?? (options.buttons || getDefaultButtons(options.type)).length - 1;
+              closeModal(state, defaultIndex, false);
+              document.removeEventListener("keydown", handleKeydown);
+            }
+          };
+          document.addEventListener("keydown", handleKeydown);
+        } catch {}
+        try {
+          const firstButton = overlay.querySelector(".stx-modal-btn[autofocus]");
+          if (firstButton) {
+            firstButton.focus();
+          }
+        } catch {}
+      } catch {
+        console.log(`[stx-modal] ${options.type?.toUpperCase() || "INFO"}: ${options.title || "Modal"}`);
+        console.log(`[stx-modal] ${options.message}`);
+        setTimeout(() => {
+          closeModal(state, options.defaultButton ?? 0, false);
+        }, 0);
+      }
+    } else {
+      console.log(`[stx-modal] ${options.type?.toUpperCase() || "INFO"}: ${options.title || "Modal"}`);
+      console.log(`[stx-modal] ${options.message}`);
+      const buttons = options.buttons || getDefaultButtons(options.type);
+      console.log(`[stx-modal] Buttons: ${buttons.map((b) => b.label).join(", ")}`);
+      setTimeout(() => {
+        closeModal(state, options.defaultButton ?? 0, false);
+      }, 0);
+    }
+  });
+}
+async function showInfoModal(title, message) {
+  return showModal({ title, message, type: "info" });
+}
+async function showWarningModal(title, message) {
+  return showModal({ title, message, type: "warning" });
+}
+async function showErrorModal(title, message) {
+  return showModal({ title, message, type: "error" });
+}
+async function showSuccessModal(title, message) {
+  return showModal({ title, message, type: "success" });
+}
+async function showQuestionModal(title, message) {
+  return showModal({
+    title,
+    message,
+    type: "question",
+    buttons: [
+      { label: "No", style: "default" },
+      { label: "Yes", style: "primary" }
+    ],
+    defaultButton: 1,
+    cancelButton: 0
+  });
+}
+async function confirm2(message, title = "Confirm") {
+  const result = await showQuestionModal(title, message);
+  return result.buttonIndex === 1;
+}
+async function alert2(message, title = "Alert") {
+  await showInfoModal(title, message);
+}
+async function prompt2(message, defaultValue = "", title = "Input") {
+  if (isBrowser2() && typeof window.prompt === "function") {
+    return window.prompt(message, defaultValue);
+  }
+  console.log(`[stx-modal] PROMPT: ${title}`);
+  console.log(`[stx-modal] ${message}`);
+  console.log(`[stx-modal] Default: ${defaultValue}`);
+  return defaultValue;
+}
+function getActiveModalCount() {
+  return activeModals.length;
+}
+function closeAllModals() {
+  while (activeModals.length > 0) {
+    const state = activeModals[activeModals.length - 1];
+    closeModal(state, 0, true);
+  }
+}
+var MODAL_STYLES = `
+.stx-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: stx-modal-fade-in 0.15s ease-out;
+}
+
+@keyframes stx-modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.stx-modal {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  animation: stx-modal-slide-up 0.2s ease-out;
+}
+
+@keyframes stx-modal-slide-up {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@media (prefers-color-scheme: dark) {
+  .stx-modal {
+    background: #2d2d2d;
+    color: #fff;
+  }
+}
+
+.stx-modal-icon {
+  font-size: 48px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.stx-modal.info .stx-modal-icon { color: #3498db; }
+.stx-modal.warning .stx-modal-icon { color: #f39c12; }
+.stx-modal.error .stx-modal-icon { color: #e74c3c; }
+.stx-modal.success .stx-modal-icon { color: #27ae60; }
+.stx-modal.question .stx-modal-icon { color: #9b59b6; }
+
+.stx-modal-content {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.stx-modal-title {
+  margin: 0 0 8px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.stx-modal-message {
+  margin: 0;
+  color: #666;
+  line-height: 1.5;
+}
+
+@media (prefers-color-scheme: dark) {
+  .stx-modal-message { color: #aaa; }
+}
+
+.stx-modal-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.stx-modal-btn {
+  padding: 10px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: background 0.15s, transform 0.1s;
+}
+
+.stx-modal-btn:hover {
+  transform: translateY(-1px);
+}
+
+.stx-modal-btn:active {
+  transform: translateY(0);
+}
+
+.stx-modal-btn.default {
+  background: #e0e0e0;
+  color: #333;
+}
+
+.stx-modal-btn.default:hover {
+  background: #d0d0d0;
+}
+
+.stx-modal-btn.primary {
+  background: #3498db;
+  color: #fff;
+}
+
+.stx-modal-btn.primary:hover {
+  background: #2980b9;
+}
+
+.stx-modal-btn.destructive {
+  background: #e74c3c;
+  color: #fff;
+}
+
+.stx-modal-btn.destructive:hover {
+  background: #c0392b;
+}
+
+@media (prefers-color-scheme: dark) {
+  .stx-modal-btn.default {
+    background: #444;
+    color: #fff;
+  }
+  .stx-modal-btn.default:hover {
+    background: #555;
+  }
+}
+`;
+// src/system-tray.ts
+import process from "process";
+function getPlatform() {
+  if (process.platform) {
+    return process.platform;
+  }
+  return "unknown";
+}
+function isInCraftWindow() {
+  if (typeof window !== "undefined" && window.craft?.tray) {
+    return true;
+  }
+  return false;
+}
+function convertMenuItem(item, index) {
+  if (item.type === "separator") {
+    return {
+      id: `sep-${index}`,
+      label: "",
+      type: "separator"
+    };
+  }
+  const menuItem = {
+    id: `item-${index}-${item.label.replace(/\s+/g, "-").toLowerCase()}`,
+    label: item.label,
+    type: item.type || "normal",
+    enabled: item.enabled !== false
+  };
+  if (item.accelerator) {
+    menuItem.shortcut = item.accelerator;
+  }
+  if (item.type === "checkbox") {
+    menuItem.checked = item.checked || false;
+  }
+  if (item.type === "submenu" && item.submenu) {
+    menuItem.submenu = item.submenu.map((subItem, subIndex) => convertMenuItem(subItem, subIndex));
+  }
+  return menuItem;
+}
+function convertMenuItems(items) {
+  return items.map((item, index) => convertMenuItem(item, index));
+}
+function renderMenuItem(item, level = 0) {
+  if (item.type === "separator") {
+    return '<hr class="stx-tray-separator" />';
+  }
+  const indent = "  ".repeat(level);
+  const disabled = item.enabled === false ? "disabled" : "";
+  const checked = item.checked ? "\u2713 " : "";
+  const accelerator = item.accelerator ? `<span class="accelerator">${item.accelerator}</span>` : "";
+  let html = `${indent}<div class="stx-tray-item ${disabled}" data-action="${item.label}">`;
+  html += `<span class="label">${checked}${item.label}</span>${accelerator}`;
+  if (item.type === "submenu" && item.submenu) {
+    html += '<span class="arrow">\u25B8</span>';
+    html += '<div class="stx-tray-submenu">';
+    for (const subItem of item.submenu) {
+      html += renderMenuItem(subItem, level + 1);
+    }
+    html += "</div>";
+  }
+  html += "</div>";
+  return html;
+}
+function renderTrayMenu(menu) {
+  let html = '<div class="stx-tray-menu">';
+  for (const item of menu) {
+    html += renderMenuItem(item);
+  }
+  html += "</div>";
+  return html;
+}
+var activeTrayInstances = new Map;
+function generateTrayId() {
+  return `tray-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+var craftTrayListenerSetup = false;
+function setupCraftTrayListener() {
+  if (craftTrayListenerSetup || typeof window === "undefined")
+    return;
+  window.addEventListener("craft:tray:menu", (event) => {
+    const { action } = event.detail;
+    for (const instance of activeTrayInstances.values()) {
+      const handler = instance.handlers.get(action);
+      if (handler) {
+        handler();
+        break;
+      }
+    }
+  });
+  craftTrayListenerSetup = true;
+}
+async function createSystemTray(options = {}) {
+  const id = generateTrayId();
+  const platform = getPlatform();
+  const inCraft = isInCraftWindow();
+  const state = {
+    icon: options.icon || "",
+    tooltip: options.tooltip || "stx Application",
+    menu: options.menu || [],
+    visible: true
+  };
+  const handlers = new Map;
+  for (const item of options.menu || []) {
+    if (item.type !== "separator" && item.onClick) {
+      handlers.set(item.label, item.onClick);
+    }
+    if (item.type === "submenu" && item.submenu) {
+      for (const subItem of item.submenu) {
+        if (subItem.type !== "separator" && subItem.onClick) {
+          handlers.set(subItem.label, subItem.onClick);
+        }
+      }
+    }
+  }
+  activeTrayInstances.set(id, { state, handlers });
+  if (inCraft) {
+    setupCraftTrayListener();
+    const craftWindow = window;
+    try {
+      if (state.tooltip) {
+        await craftWindow.craft.tray.setTitle({ title: state.tooltip });
+        await craftWindow.craft.tray.setTooltip({ tooltip: state.tooltip });
+      }
+      if (state.icon) {
+        await craftWindow.craft.tray.setIcon({ icon: state.icon });
+      }
+      const craftMenu = convertMenuItems(state.menu);
+      await craftWindow.craft.tray.setMenu({ items: craftMenu });
+      console.log(`[stx-tray] Native tray created for ${platform}`);
+    } catch (error) {
+      console.warn("[stx-tray] Failed to create native tray:", error);
+    }
+  } else {
+    console.log(`[stx-tray] Created simulated tray (not in Craft window)`);
+    console.log(`[stx-tray] ID: ${id}`);
+    console.log(`[stx-tray] Tooltip: ${state.tooltip}`);
+    console.log(`[stx-tray] Menu items: ${state.menu.length}`);
+  }
+  const instance = {
+    id,
+    setIcon: (icon) => {
+      state.icon = icon;
+      if (inCraft) {
+        const craftWindow = window;
+        craftWindow.craft.tray.setIcon({ icon }).catch((e) => {
+          console.warn("[stx-tray] Failed to set icon:", e);
+        });
+      }
+      console.log(`[stx-tray:${id}] Icon updated`);
+    },
+    setTooltip: (tooltip) => {
+      state.tooltip = tooltip;
+      if (inCraft) {
+        const craftWindow = window;
+        craftWindow.craft.tray.setTooltip({ tooltip }).catch((e) => {
+          console.warn("[stx-tray] Failed to set tooltip:", e);
+        });
+      }
+      console.log(`[stx-tray:${id}] Tooltip: ${tooltip}`);
+    },
+    setMenu: (menu) => {
+      state.menu = menu;
+      handlers.clear();
+      for (const item of menu) {
+        if (item.type !== "separator" && item.onClick) {
+          handlers.set(item.label, item.onClick);
+        }
+        if (item.type === "submenu" && item.submenu) {
+          for (const subItem of item.submenu) {
+            if (subItem.type !== "separator" && subItem.onClick) {
+              handlers.set(subItem.label, subItem.onClick);
+            }
+          }
+        }
+      }
+      if (inCraft) {
+        const craftWindow = window;
+        const craftMenu = convertMenuItems(menu);
+        craftWindow.craft.tray.setMenu({ items: craftMenu }).catch((e) => {
+          console.warn("[stx-tray] Failed to set menu:", e);
+        });
+      }
+      console.log(`[stx-tray:${id}] Menu updated (${menu.length} items)`);
+    },
+    destroy: () => {
+      state.visible = false;
+      activeTrayInstances.delete(id);
+      if (inCraft) {
+        const craftWindow = window;
+        craftWindow.craft.tray.destroy?.().catch((e) => {
+          console.warn("[stx-tray] Failed to destroy tray:", e);
+        });
+      }
+      console.log(`[stx-tray:${id}] Destroyed`);
+    }
+  };
+  return instance;
+}
+var createMenubar = createSystemTray;
+function getActiveTrayInstances() {
+  return Array.from(activeTrayInstances.keys());
+}
+function getTrayInstance(id) {
+  const instance = activeTrayInstances.get(id);
+  if (!instance)
+    return null;
+  const inCraft = isInCraftWindow();
+  return {
+    id,
+    setIcon: (icon) => {
+      instance.state.icon = icon;
+      if (inCraft) {
+        const craftWindow = window;
+        craftWindow.craft.tray.setIcon({ icon }).catch(() => {});
+      }
+    },
+    setTooltip: (tooltip) => {
+      instance.state.tooltip = tooltip;
+      if (inCraft) {
+        const craftWindow = window;
+        craftWindow.craft.tray.setTooltip({ tooltip }).catch(() => {});
+      }
+    },
+    setMenu: (menu) => {
+      instance.state.menu = menu;
+      if (inCraft) {
+        const craftWindow = window;
+        const craftMenu = convertMenuItems(menu);
+        craftWindow.craft.tray.setMenu({ items: craftMenu }).catch(() => {});
+      }
+    },
+    destroy: () => {
+      activeTrayInstances.delete(id);
+      if (inCraft) {
+        const craftWindow = window;
+        craftWindow.craft.tray.destroy?.().catch(() => {});
+      }
+    }
+  };
+}
+function triggerTrayAction(trayId, actionLabel) {
+  const instance = activeTrayInstances.get(trayId);
+  if (!instance)
+    return false;
+  const handler = instance.handlers.get(actionLabel);
+  if (handler) {
+    handler();
+    return true;
+  }
+  return false;
+}
+function getSimulatedTrayHTML(trayId) {
+  const instance = activeTrayInstances.get(trayId);
+  if (!instance)
+    return null;
+  return renderTrayMenu(instance.state.menu);
+}
+function getTrayBridgeScript() {
+  return `
+// STX Desktop Tray Bridge
+// Provides convenient wrappers around window.craft.tray APIs
+window.stxTray = {
+  setTitle: (title) => window.craft?.tray?.setTitle({ title }),
+  setTooltip: (tooltip) => window.craft?.tray?.setTooltip({ tooltip }),
+  setIcon: (icon) => window.craft?.tray?.setIcon({ icon }),
+  setMenu: (items) => window.craft?.tray?.setMenu({ items }),
+  destroy: () => window.craft?.tray?.destroy(),
+
+  // Check if tray is available
+  isAvailable: () => typeof window.craft?.tray !== 'undefined',
+};
+`;
+}
+var TRAY_MENU_STYLES = `
+.stx-tray-menu {
+  background: #2d2d2d;
+  border-radius: 8px;
+  padding: 4px 0;
+  min-width: 200px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  color: #fff;
+}
+
+.stx-tray-item {
+  padding: 6px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  position: relative;
+}
+
+.stx-tray-item:hover {
+  background: #3d3d3d;
+}
+
+.stx-tray-item.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.stx-tray-item .label {
+  flex: 1;
+}
+
+.stx-tray-item .accelerator {
+  margin-left: 20px;
+  opacity: 0.6;
+  font-size: 12px;
+}
+
+.stx-tray-item .arrow {
+  margin-left: 8px;
+  font-size: 10px;
+}
+
+.stx-tray-separator {
+  margin: 4px 0;
+  border: none;
+  border-top: 1px solid #444;
+}
+
+.stx-tray-submenu {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  background: #2d2d2d;
+  border-radius: 8px;
+  padding: 4px 0;
+  min-width: 150px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  display: none;
+}
+
+.stx-tray-item:hover > .stx-tray-submenu {
+  display: block;
+}
+`;
+// src/dialogs.ts
+function isInCraftWindow2() {
+  if (typeof window !== "undefined" && window.craft?.dialog) {
+    return true;
+  }
+  return false;
+}
+async function showOpenDialog(options = {}) {
+  if (isInCraftWindow2()) {
+    const craftWindow = window;
+    try {
+      return await craftWindow.craft.dialog.showOpenDialog(options);
+    } catch (error) {
+      console.warn("[stx-dialog] Failed to show native open dialog:", error);
+    }
+  }
+  return new Promise((resolve) => {
+    if (typeof document === "undefined") {
+      resolve({ canceled: true, filePaths: [] });
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = options.multiSelections ?? false;
+    if (options.filters?.length) {
+      const extensions = options.filters.flatMap((f) => f.extensions.map((e) => `.${e}`));
+      input.accept = extensions.join(",");
+    }
+    if (options.canChooseDirectories && !options.canChooseFiles) {
+      input.webkitdirectory = true;
+    }
+    input.onchange = () => {
+      const files = Array.from(input.files || []);
+      if (files.length === 0) {
+        resolve({ canceled: true, filePaths: [] });
+      } else {
+        const filePaths = files.map((f) => f.name);
+        resolve({ canceled: false, filePaths });
+      }
+    };
+    input.oncancel = () => {
+      resolve({ canceled: true, filePaths: [] });
+    };
+    input.click();
+  });
+}
+async function showSaveDialog(options = {}) {
+  if (isInCraftWindow2()) {
+    const craftWindow = window;
+    try {
+      return await craftWindow.craft.dialog.showSaveDialog(options);
+    } catch (error) {
+      console.warn("[stx-dialog] Failed to show native save dialog:", error);
+    }
+  }
+  if (typeof window !== "undefined" && "showSaveFilePicker" in window) {
+    try {
+      const fileTypes = options.filters?.map((f) => ({
+        description: f.name,
+        accept: {
+          "*/*": f.extensions.map((e) => `.${e}`)
+        }
+      }));
+      const handle = await window.showSaveFilePicker({
+        suggestedName: options.defaultPath,
+        types: fileTypes
+      });
+      return { canceled: false, filePath: handle.name };
+    } catch (error) {
+      return { canceled: true };
+    }
+  }
+  console.warn("[stx-dialog] Save dialog not available, using prompt fallback");
+  const filename = prompt("Enter filename:", options.defaultPath || "file.txt");
+  if (filename) {
+    return { canceled: false, filePath: filename };
+  }
+  return { canceled: true };
+}
+async function showMessageBox(options) {
+  if (isInCraftWindow2()) {
+    const craftWindow = window;
+    try {
+      return await craftWindow.craft.dialog.showMessageBox(options);
+    } catch (error) {
+      console.warn("[stx-dialog] Failed to show native message box:", error);
+    }
+  }
+  const buttons = options.buttons || ["OK"];
+  if (buttons.length === 1) {
+    alert(options.message);
+    return { response: 0 };
+  }
+  if (buttons.length === 2 && options.type === "question") {
+    const confirmed2 = confirm(options.message);
+    return { response: confirmed2 ? 1 : 0 };
+  }
+  console.warn("[stx-dialog] Complex message box not fully supported in browser, using confirm");
+  const confirmed = confirm(`${options.message}
+
+${buttons.join(" / ")}`);
+  return { response: confirmed ? buttons.length - 1 : 0 };
+}
+async function showColorPicker(options = {}) {
+  if (isInCraftWindow2()) {
+    const craftWindow = window;
+    try {
+      return await craftWindow.craft.dialog.showColorPicker(options);
+    } catch (error) {
+      console.warn("[stx-dialog] Failed to show native color picker:", error);
+    }
+  }
+  return new Promise((resolve) => {
+    if (typeof document === "undefined") {
+      resolve({ canceled: true });
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "color";
+    input.value = options.color || "#000000";
+    input.onchange = () => {
+      resolve({ canceled: false, color: input.value });
+    };
+    input.oncancel = () => {
+      resolve({ canceled: true });
+    };
+    input.click();
+  });
+}
+async function showAlertDialog(message, title) {
+  await showMessageBox({
+    type: "info",
+    title: title || "Alert",
+    message,
+    buttons: ["OK"]
+  });
+}
+async function showConfirmDialog(message, title) {
+  const result = await showMessageBox({
+    type: "question",
+    title: title || "Confirm",
+    message,
+    buttons: ["Cancel", "OK"],
+    defaultButton: 1,
+    cancelButton: 0
+  });
+  return result.response === 1;
+}
+async function showErrorDialog(message, title) {
+  await showMessageBox({
+    type: "error",
+    title: title || "Error",
+    message,
+    buttons: ["OK"]
+  });
+}
+async function showWarningDialog(message, title) {
+  await showMessageBox({
+    type: "warning",
+    title: title || "Warning",
+    message,
+    buttons: ["OK"]
+  });
+}
+function getDialogBridgeScript() {
+  return `
+// STX Desktop Dialog Bridge
+// Provides convenient wrappers around window.craft.dialog APIs
+window.stxDialog = {
+  // File dialogs
+  showOpenDialog: (options) => window.craft?.dialog?.showOpenDialog(options),
+  showSaveDialog: (options) => window.craft?.dialog?.showSaveDialog(options),
+
+  // Message dialogs
+  showMessageBox: (options) => window.craft?.dialog?.showMessageBox(options),
+
+  // Color picker
+  showColorPicker: (options) => window.craft?.dialog?.showColorPicker(options),
+
+  // Font picker
+  showFontPicker: (options) => window.craft?.dialog?.showFontPicker(options),
+
+  // Convenience functions
+  alert: async (message, title) => {
+    return window.craft?.dialog?.showMessageBox({
+      type: 'info',
+      title: title || 'Alert',
+      message,
+      buttons: ['OK'],
+    });
+  },
+
+  confirm: async (message, title) => {
+    const result = await window.craft?.dialog?.showMessageBox({
+      type: 'question',
+      title: title || 'Confirm',
+      message,
+      buttons: ['Cancel', 'OK'],
+    });
+    return result?.response === 1;
+  },
+
+  error: async (message, title) => {
+    return window.craft?.dialog?.showMessageBox({
+      type: 'error',
+      title: title || 'Error',
+      message,
+      buttons: ['OK'],
+    });
+  },
+
+  // Check if dialog is available
+  isAvailable: () => typeof window.craft?.dialog !== 'undefined',
+};
+`;
+}
+// src/window.ts
+import { existsSync } from "fs";
+import { join } from "path";
+import process2 from "process";
+var currentConfig = {};
+function setDesktopConfig(config) {
+  currentConfig = { ...currentConfig, ...config };
+}
+function getDesktopConfig() {
+  return { ...currentConfig };
+}
+function resetDesktopConfig() {
+  currentConfig = {};
+}
+var DEFAULT_SEARCH_PATHS = [
+  join(process2.env.HOME || "", ".bun/bin/craft"),
+  join(process2.env.HOME || "", "Code/Tools/craft/packages/zig/zig-out/bin/craft"),
+  join(process2.env.HOME || "", "Code/craft/packages/zig/zig-out/bin/craft"),
+  join(process2.cwd(), "../../craft/packages/zig/zig-out/bin/craft"),
+  join(process2.cwd(), "../../craft/packages/zig/zig-out/bin/craft-minimal"),
+  join(process2.cwd(), "../../../craft/packages/zig/zig-out/bin/craft"),
+  join(process2.cwd(), "../../../craft/packages/zig/zig-out/bin/craft-minimal"),
+  join(process2.cwd(), "../craft/packages/zig/zig-out/bin/craft"),
+  join(process2.cwd(), "../craft/packages/zig/zig-out/bin/craft-minimal"),
+  join(process2.cwd(), "node_modules/.bin/craft")
+];
+function getCraftBinaryPath() {
+  const envPath = process2.env.CRAFT_BINARY_PATH;
+  if (envPath && existsSync(envPath)) {
+    return envPath;
+  }
+  if (currentConfig.craftBinaryPath && existsSync(currentConfig.craftBinaryPath)) {
+    return currentConfig.craftBinaryPath;
+  }
+  const additionalPaths = currentConfig.additionalSearchPaths || [];
+  for (const searchPath of additionalPaths) {
+    if (existsSync(searchPath)) {
+      return searchPath;
+    }
+  }
+  for (const searchPath of DEFAULT_SEARCH_PATHS) {
+    if (existsSync(searchPath)) {
+      return searchPath;
+    }
+  }
+  return;
+}
+var activeWindows = new Map;
+function getActiveWindowIds() {
+  return Array.from(activeWindows.keys());
+}
+function getWindow(id) {
+  const windowData = activeWindows.get(id);
+  if (!windowData)
+    return null;
+  return createWindowInstance(id, windowData.app);
+}
+function closeAllWindows() {
+  for (const [id, windowData] of activeWindows) {
+    try {
+      windowData.app?.close?.();
+    } catch (e) {
+      console.warn(`Failed to close window ${id}:`, e);
+    }
+  }
+  activeWindows.clear();
+}
+function createWindowInstance(id, app) {
+  return {
+    id,
+    show: () => {
+      console.log(`[stx/desktop] Window ${id} shown`);
+    },
+    hide: () => {
+      console.log(`[stx/desktop] To hide window, use window.craft.window.hide() from inside the webview`);
+    },
+    close: () => {
+      const windowData = activeWindows.get(id);
+      if (windowData?.app) {
+        windowData.app.close();
+        activeWindows.delete(id);
+        console.log(`[stx/desktop] Window ${id} closed`);
+      }
+    },
+    focus: () => {
+      console.log(`[stx/desktop] To focus window, use window.craft.window.focus() from inside the webview`);
+    },
+    minimize: () => {
+      console.log(`[stx/desktop] To minimize window, use window.craft.window.minimize() from inside the webview`);
+    },
+    maximize: () => {
+      console.log(`[stx/desktop] To maximize window, use window.craft.window.maximize() from inside the webview`);
+    },
+    restore: () => {
+      console.log(`[stx/desktop] To restore window, use window.craft.window.show() from inside the webview`);
+    },
+    setTitle: (title) => {
+      console.log(`[stx/desktop] To set title, use window.craft.window.setTitle({ title: "${title}" }) from inside the webview`);
+    },
+    loadURL: (url) => {
+      console.log(`[stx/desktop] To navigate, use window.location.href = "${url}" from inside the webview`);
+    },
+    reload: () => {
+      console.log(`[stx/desktop] To reload, use window.craft.window.reload() from inside the webview`);
+    }
+  };
+}
+async function createWindow(url, options = {}) {
+  const {
+    title = "stx Desktop",
+    width = 1200,
+    height = 800,
+    darkMode = false,
+    hotReload = false,
+    resizable = true,
+    frameless = false,
+    alwaysOnTop = false
+  } = options;
+  try {
+    const { createApp } = await import("ts-craft");
+    const craftPath = getCraftBinaryPath();
+    const app = createApp({
+      url,
+      craftPath,
+      window: {
+        title,
+        width,
+        height,
+        darkMode,
+        hotReload,
+        resizable,
+        frameless,
+        alwaysOnTop
+      }
+    });
+    const id = `craft-window-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    activeWindows.set(id, { app, url, options });
+    await app.show();
+    return createWindowInstance(id, app);
+  } catch (error) {
+    console.error("Failed to create native window:", error);
+    console.warn("Falling back to browser...");
+    return null;
+  }
+}
+async function openDevWindow(port, options = {}) {
+  const url = `http://localhost:${port}/`;
+  try {
+    const { createApp } = await import("ts-craft");
+    console.log("\u26A1 Opening native window...");
+    const craftPath = getCraftBinaryPath();
+    const useSystemTray = !options.nativeSidebar;
+    const app = createApp({
+      url,
+      craftPath,
+      window: {
+        title: options.title || "stx Development",
+        width: options.width || 1400,
+        height: options.height || 900,
+        resizable: true,
+        systemTray: useSystemTray,
+        darkMode: options.darkMode ?? true,
+        hotReload: options.hotReload ?? true,
+        devTools: true,
+        nativeSidebar: options.nativeSidebar ?? false,
+        sidebarWidth: options.sidebarWidth ?? 260,
+        sidebarConfig: options.sidebarConfig
+      }
+    });
+    const id = `dev-window-${port}`;
+    activeWindows.set(id, { app, url, options });
+    await app.show();
+    console.log(`\u2713 Native window opened at ${url}`);
+    console.log(`\uD83D\uDCCC Look for the "stx Development" icon in your menubar`);
+    return true;
+  } catch (error) {
+    console.warn("\u26A0  Could not open native window:", error.message);
+    if (process2.env.NODE_ENV === "test" || process2.env.BUN_TEST) {
+      console.log("(Skipping browser fallback in test environment)");
+      return false;
+    }
+    console.log("\uD83D\uDCF1 Opening in browser instead...");
+    try {
+      const { spawn } = await import("child_process");
+      const platform = process2.platform;
+      let command;
+      let args;
+      if (platform === "darwin") {
+        command = "open";
+        args = [url];
+      } else if (platform === "win32") {
+        command = "cmd";
+        args = ["/c", "start", url];
+      } else {
+        command = "xdg-open";
+        args = [url];
+      }
+      spawn(command, args, { detached: true, stdio: "ignore" }).unref();
+      console.log(`\u2713 Browser opened at ${url}`);
+      return true;
+    } catch (browserError) {
+      console.error("Could not open browser:", browserError);
+      console.log(`Please open manually: ${url}`);
+      return false;
+    }
+  }
+}
+async function createWindowWithHTML(html, options = {}) {
+  const {
+    title = "stx Desktop",
+    width = 1200,
+    height = 800,
+    darkMode = false,
+    hotReload = false,
+    resizable = true,
+    frameless = false,
+    alwaysOnTop = false
+  } = options;
+  try {
+    const { createApp } = await import("ts-craft");
+    const craftPath = getCraftBinaryPath();
+    const app = createApp({
+      html,
+      craftPath,
+      window: {
+        title,
+        width,
+        height,
+        darkMode,
+        hotReload,
+        resizable,
+        frameless,
+        alwaysOnTop
+      }
+    });
+    const id = `craft-window-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    activeWindows.set(id, { app, url: "html-content", options });
+    await app.show();
+    return createWindowInstance(id, app);
+  } catch (error) {
+    console.error("Failed to create window with HTML:", error);
+    return null;
+  }
+}
+function isWebviewAvailable() {
+  try {
+    __require.resolve("ts-craft");
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getWindowBridgeScript() {
+  return `
+// STX Desktop Window Bridge
+// Provides convenient wrappers around window.craft APIs
+window.stxWindow = {
+  // Window control
+  hide: () => window.craft?.window?.hide(),
+  show: () => window.craft?.window?.show(),
+  toggle: () => window.craft?.window?.toggle(),
+  close: () => window.craft?.window?.close(),
+  minimize: () => window.craft?.window?.minimize(),
+  maximize: () => window.craft?.window?.maximize(),
+  focus: () => window.craft?.window?.focus(),
+  center: () => window.craft?.window?.center(),
+  reload: () => window.craft?.window?.reload(),
+  toggleFullscreen: () => window.craft?.window?.toggleFullscreen(),
+
+  // Window properties
+  setTitle: (title) => window.craft?.window?.setTitle({ title }),
+  setSize: (width, height) => window.craft?.window?.setSize({ width, height }),
+  setPosition: (x, y) => window.craft?.window?.setPosition({ x, y }),
+  setAlwaysOnTop: (alwaysOnTop) => window.craft?.window?.setAlwaysOnTop({ alwaysOnTop }),
+  setResizable: (resizable) => window.craft?.window?.setResizable({ resizable }),
+  setOpacity: (opacity) => window.craft?.window?.setOpacity({ opacity }),
+
+  // macOS-specific
+  setVibrancy: (vibrancy) => window.craft?.window?.setVibrancy({ vibrancy }),
+
+  // App control
+  quit: () => window.craft?.app?.quit(),
+  isDarkMode: () => window.craft?.app?.isDarkMode(),
+  getLocale: () => window.craft?.app?.getLocale(),
+
+  // Notifications
+  notify: (options) => window.craft?.app?.notify(options),
+
+  // Check if running in Craft
+  isCraftAvailable: () => typeof window.craft !== 'undefined',
+};
+
+// Expose as global for backwards compatibility
+window.desktop = window.stxWindow;
+`;
+}
+export {
+  triggerTrayAction,
+  showWarningToast,
+  showWarningModal,
+  showWarningDialog,
+  showToast,
+  showSuccessToast,
+  showSuccessModal,
+  showSaveDialog,
+  showQuestionModal,
+  showOpenDialog,
+  showModal,
+  showMessageBox,
+  showInfoToast,
+  showInfoModal,
+  showErrorToast,
+  showErrorModal,
+  showErrorDialog,
+  showConfirmDialog,
+  showColorPicker,
+  showAlertDialog,
+  showAlert,
+  setDesktopConfig,
+  resetDesktopConfig,
+  requestNotificationPermission,
+  prompt2 as prompt,
+  openDevWindow,
+  notify,
+  isWebviewAvailable,
+  getWindowBridgeScript,
+  getWindow,
+  getTrayInstance,
+  getTrayBridgeScript,
+  getSimulatedTrayHTML,
+  getDialogBridgeScript,
+  getDesktopConfig,
+  getActiveWindowIds,
+  getActiveTrayInstances,
+  getActiveModalCount,
+  getActiveAlertCount,
+  dismissAllAlerts,
+  dismissAlertById,
+  createWindowWithHTML,
+  createWindow,
+  createWebView,
+  createTreeView,
+  createTooltip,
+  createTimePicker,
+  createTextInput,
+  createTabs,
+  createTable,
+  createSystemTray,
+  createStepper,
+  createSplitView,
+  createSlider,
+  createScrollView,
+  createRating,
+  createRadioButton,
+  createProgressBar,
+  createModalComponent,
+  createMenubar,
+  createMediaPlayer,
+  createListView,
+  createLabel,
+  createImageView,
+  createFileExplorer,
+  createDropdown,
+  createDatePicker,
+  createDataGrid,
+  createColorPicker,
+  createCodeEditor,
+  createChip,
+  createCheckbox,
+  createChart,
+  createCard,
+  createButton,
+  createBadge,
+  createAvatar,
+  createAutocomplete,
+  createAccordion,
+  confirm2 as confirm,
+  closeAllWindows,
+  closeAllModals,
+  alert2 as alert,
+  TRAY_MENU_STYLES,
+  TOAST_STYLES,
+  MODAL_STYLES,
+  COMPONENT_STYLES,
+  AVAILABLE_COMPONENTS
+};
+
+//# debugId=574CB389B0B4B44F64756E2164756E21