@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/craft-components.d.ts

@@ -0,0 +1,739 @@
+/**
+ * Parse @craft-* component directives from stx template
+ */
+export declare function processCraftComponents(content: string, config?: CraftComponentConfig): string;
+/**
+ * Register a custom Craft component
+ */
+export declare function registerCraftComponent(name: string, definition: CraftComponentDefinition): void;
+/**
+ * Get all registered Craft components
+ */
+export declare function getCraftComponents(): Record<string, CraftComponentDefinition>;
+/**
+ * Built-in Craft component definitions
+ */
+export declare const CRAFT_COMPONENTS: {
+  button: {
+  nativeType: 'craft-button';
+  fallbackTag: 'button';
+  fallbackClasses: 'craft-button';
+  nativeProps: readonly ['variant', 'size', 'disabled', 'loading']
+};
+  'text-input': {
+  nativeType: 'craft-text-input';
+  fallbackTag: 'input';
+  fallbackClasses: 'craft-text-input';
+  nativeProps: readonly ['placeholder', 'value', 'type', 'disabled', 'readonly']
+};
+  textarea: {
+  nativeType: 'craft-textarea';
+  fallbackTag: 'textarea';
+  fallbackClasses: 'craft-textarea';
+  nativeProps: readonly ['placeholder', 'value', 'rows', 'disabled', 'readonly']
+};
+  checkbox: { nativeType: 'craft-checkbox'; fallbackTag: 'input'; fallbackClasses: 'craft-checkbox'; nativeProps: readonly ['checked', 'disabled', 'label']; render: (props, children) => unknown };
+  radio: {
+  nativeType: 'craft-radio';
+  fallbackTag: 'input';
+  fallbackClasses: 'craft-radio';
+  nativeProps: readonly ['checked', 'disabled', 'name', 'value', 'label']
+};
+  select: {
+  nativeType: 'craft-select';
+  fallbackTag: 'select';
+  fallbackClasses: 'craft-select';
+  nativeProps: readonly ['value', 'disabled', 'options', 'placeholder']
+};
+  slider: { nativeType: 'craft-slider'; fallbackTag: 'input'; fallbackClasses: 'craft-slider'; nativeProps: readonly ['value', 'min', 'max', 'step', 'disabled']; render: (props, _children) => unknown };
+  label: {
+  nativeType: 'craft-label';
+  fallbackTag: 'span';
+  fallbackClasses: 'craft-label';
+  nativeProps: readonly ['text', 'for']
+};
+  badge: {
+  nativeType: 'craft-badge';
+  fallbackTag: 'span';
+  fallbackClasses: 'craft-badge';
+  nativeProps: readonly ['variant', 'size']
+};
+  avatar: { nativeType: 'craft-avatar'; fallbackTag: 'div'; fallbackClasses: 'craft-avatar'; nativeProps: readonly ['src', 'alt', 'size', 'fallback']; render: (props, _children) => unknown };
+  progress: { nativeType: 'craft-progress'; fallbackTag: 'div'; fallbackClasses: 'craft-progress'; nativeProps: readonly ['value', 'max', 'variant']; render: (props, _children) => unknown };
+  spinner: { nativeType: 'craft-spinner'; fallbackTag: 'div'; fallbackClasses: 'craft-spinner'; nativeProps: readonly ['size']; render: (props, _children) => unknown };
+  card: {
+  nativeType: 'craft-card';
+  fallbackTag: 'div';
+  fallbackClasses: 'craft-card';
+  nativeProps: readonly ['title', 'subtitle', 'variant']
+};
+  modal: { nativeType: 'craft-modal'; fallbackTag: 'dialog'; fallbackClasses: 'craft-modal'; nativeProps: readonly ['open', 'title', 'closable', 'size']; render: (props, children) => unknown };
+  tabs: {
+  nativeType: 'craft-tabs';
+  fallbackTag: 'div';
+  fallbackClasses: 'craft-tabs';
+  nativeProps: readonly ['activeTab', 'tabs']
+};
+  accordion: { nativeType: 'craft-accordion'; fallbackTag: 'details'; fallbackClasses: 'craft-accordion'; nativeProps: readonly ['open', 'title']; render: (props, children) => unknown };
+  divider: {
+  nativeType: 'craft-divider';
+  fallbackTag: 'hr';
+  fallbackClasses: 'craft-divider';
+  nativeProps: readonly ['orientation', 'variant']
+};
+  table: {
+  nativeType: 'craft-table';
+  fallbackTag: 'table';
+  fallbackClasses: 'craft-table';
+  nativeProps: readonly ['columns', 'rows', 'sortable', 'selectable']
+};
+  list: {
+  nativeType: 'craft-list';
+  fallbackTag: 'ul';
+  fallbackClasses: 'craft-list';
+  nativeProps: readonly ['items', 'selectable']
+};
+  tree: {
+  nativeType: 'craft-tree';
+  fallbackTag: 'div';
+  fallbackClasses: 'craft-tree';
+  nativeProps: readonly ['nodes', 'expandable', 'selectable']
+};
+  alert: { nativeType: 'craft-alert'; fallbackTag: 'div'; fallbackClasses: 'craft-alert'; nativeProps: readonly ['variant', 'title', 'dismissible']; render: (props, children) => unknown };
+  toast: {
+  nativeType: 'craft-toast';
+  fallbackTag: 'div';
+  fallbackClasses: 'craft-toast';
+  nativeProps: readonly ['variant', 'duration', 'position']
+};
+  tooltip: { nativeType: 'craft-tooltip'; fallbackTag: 'span'; fallbackClasses: 'craft-tooltip'; nativeProps: readonly ['content', 'position']; render: (props, children) => unknown };
+  menu: {
+  nativeType: 'craft-menu';
+  fallbackTag: 'nav';
+  fallbackClasses: 'craft-menu';
+  nativeProps: readonly ['items', 'orientation']
+};
+  breadcrumb: {
+  nativeType: 'craft-breadcrumb';
+  fallbackTag: 'nav';
+  fallbackClasses: 'craft-breadcrumb';
+  nativeProps: readonly ['items', 'separator']
+};
+  sidebar: {
+  nativeType: 'craft-sidebar';
+  fallbackTag: 'aside';
+  fallbackClasses: 'craft-sidebar craft-sidebar-tahoe';
+  nativeProps: readonly ['id', 'variant', 'material', 'backgroundEffect', 'allowsVibrancy', 'materialOpacity', 'materialDarkOpacity', 'minWidth', 'maxWidth', 'canCollapse', 'searchPlaceholder', 'selectedItem', 'sections', 'spaces', 'selectedSpace'];
+  render: unknown
+};
+  'sidebar-space': {
+  nativeType: 'craft-sidebar-space';
+  fallbackTag: 'section';
+  fallbackClasses: 'craft-sidebar-space';
+  nativeProps: readonly ['id', 'label', 'icon', 'tint'];
+  render: unknown
+};
+  'sidebar-section': {
+  nativeType: 'craft-sidebar-section';
+  fallbackTag: 'section';
+  fallbackClasses: 'craft-sidebar-section';
+  nativeProps: readonly ['id', 'title', 'header'];
+  render: unknown
+};
+  'sidebar-item': {
+  nativeType: 'craft-sidebar-item';
+  fallbackTag: 'button';
+  fallbackClasses: 'craft-sidebar-item';
+  nativeProps: readonly ['id', 'label', 'icon', 'badge', 'tintColor'];
+  render: unknown
+};
+  pagination: {
+  nativeType: 'craft-pagination';
+  fallbackTag: 'nav';
+  fallbackClasses: 'craft-pagination';
+  nativeProps: readonly ['total', 'page', 'pageSize']
+};
+  'code-editor': {
+  nativeType: 'craft-code-editor';
+  fallbackTag: 'textarea';
+  fallbackClasses: 'craft-code-editor';
+  nativeProps: readonly ['value', 'language', 'theme', 'readonly', 'lineNumbers']
+};
+  'file-browser': {
+  nativeType: 'craft-file-browser';
+  fallbackTag: 'div';
+  fallbackClasses: 'craft-file-browser';
+  nativeProps: readonly ['path', 'showHidden', 'selectable']
+};
+  'color-picker': { nativeType: 'craft-color-picker'; fallbackTag: 'input'; fallbackClasses: 'craft-color-picker'; nativeProps: readonly ['value', 'format']; render: (props, _children) => unknown };
+  'date-picker': { nativeType: 'craft-date-picker'; fallbackTag: 'input'; fallbackClasses: 'craft-date-picker'; nativeProps: readonly ['value', 'min', 'max', 'format']; render: (props, _children) => unknown };
+  'time-picker': { nativeType: 'craft-time-picker'; fallbackTag: 'input'; fallbackClasses: 'craft-time-picker'; nativeProps: readonly ['value', 'min', 'max', 'step']; render: (props, _children) => unknown }
+};
+/**
+ * CSS styles for Craft component fallbacks
+ */
+export declare const CRAFT_COMPONENT_STYLES: `
+<style id="craft-component-styles">
+/* Craft Component Base Styles */
+.craft-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: var(--craft-primary, #3b82f6);
+  color: white;
+}
+.craft-button:hover { opacity: 0.9; }
+.craft-button:disabled { opacity: 0.5; cursor: not-allowed; }
+.craft-button-secondary { background: var(--craft-secondary, #6b7280); }
+.craft-button-outline { background: transparent; border: 1px solid currentColor; color: var(--craft-primary, #3b82f6); }
+
+.craft-text-input, .craft-textarea, .craft-select {
+  padding: 8px 12px;
+  border: 1px solid var(--craft-border, #d1d5db);
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 14px;
+  background: var(--craft-bg, #fff);
+  color: var(--craft-text, #1f2937);
+  transition: border-color 0.2s ease;
+}
+.craft-text-input:focus, .craft-textarea:focus, .craft-select:focus {
+  outline: none;
+  border-color: var(--craft-primary, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.craft-checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.craft-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.craft-slider {
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.craft-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--craft-primary, #3b82f6);
+  color: white;
+}
+
+.craft-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--craft-secondary, #6b7280);
+  color: white;
+  font-weight: 600;
+  overflow: hidden;
+}
+.craft-avatar img { width: 100%; height: 100%; object-fit: cover; }
+
+.craft-progress {
+  width: 100%;
+  height: 8px;
+  background: var(--craft-border, #e5e7eb);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.craft-progress-bar {
+  height: 100%;
+  background: var(--craft-primary, #3b82f6);
+  transition: width 0.3s ease;
+}
+
+.craft-spinner {
+  border: 2px solid var(--craft-border, #e5e7eb);
+  border-top-color: var(--craft-primary, #3b82f6);
+  border-radius: 50%;
+  animation: craft-spin 0.8s linear infinite;
+}
+@keyframes craft-spin { to { transform: rotate(360deg); } }
+
+.craft-card {
+  background: var(--craft-bg, #fff);
+  border: 1px solid var(--craft-border, #e5e7eb);
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.craft-modal {
+  border: none;
+  border-radius: 12px;
+  padding: 0;
+  max-width: 90vw;
+  max-height: 90vh;
+  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
+}
+.craft-modal::backdrop { background: rgba(0,0,0,0.5); }
+.craft-modal-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--craft-border, #e5e7eb);
+}
+.craft-modal-header h2 { margin: 0; font-size: 18px; }
+.craft-modal-body { padding: 20px; }
+
+.craft-accordion {
+  border: 1px solid var(--craft-border, #e5e7eb);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.craft-accordion-header {
+  padding: 12px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  background: var(--craft-bg-secondary, #f9fafb);
+}
+.craft-accordion-content { padding: 16px; }
+
+.craft-divider {
+  border: none;
+  border-top: 1px solid var(--craft-border, #e5e7eb);
+  margin: 16px 0;
+}
+
+.craft-alert {
+  padding: 12px 16px;
+  border-radius: 6px;
+  border-left: 4px solid;
+}
+.craft-alert-info { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
+.craft-alert-success { background: #f0fdf4; border-color: #22c55e; color: #166534; }
+.craft-alert-warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
+.craft-alert-error { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
+.craft-alert-title { font-weight: 600; margin-bottom: 4px; }
+
+.craft-tooltip {
+  position: relative;
+  cursor: help;
+}
+.craft-tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 4px 8px;
+  background: #1f2937;
+  color: white;
+  font-size: 12px;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+.craft-tooltip:hover::after { opacity: 1; }
+
+.craft-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.craft-table th, .craft-table td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--craft-border, #e5e7eb);
+}
+.craft-table th { font-weight: 600; background: var(--craft-bg-secondary, #f9fafb); }
+
+.craft-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.craft-list li {
+  padding: 12px;
+  border-bottom: 1px solid var(--craft-border, #e5e7eb);
+}
+.craft-list li:last-child { border-bottom: none; }
+
+.craft-sidebar {
+  --craft-sidebar-width: 286px;
+  --craft-sidebar-bg: rgba(255, 255, 255, 0.68);
+  --craft-sidebar-border: rgba(255, 255, 255, 0.62);
+  --craft-sidebar-shadow: 0 24px 70px rgba(15, 23, 42, 0.22), 0 1px 0 rgba(255, 255, 255, 0.72) inset;
+  --craft-sidebar-text: rgba(24, 24, 27, 0.86);
+  --craft-sidebar-muted: rgba(63, 63, 70, 0.62);
+  --craft-sidebar-hover: rgba(255, 255, 255, 0.42);
+  --craft-sidebar-selected: rgba(10, 132, 255, 0.86);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: var(--craft-sidebar-width);
+  min-width: var(--craft-sidebar-width);
+  height: 100vh;
+  padding: 58px 10px 12px;
+  color: var(--craft-sidebar-text);
+  background:
+    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08)),
+    var(--craft-sidebar-bg);
+  border: 1px solid var(--craft-sidebar-border);
+  border-radius: 18px;
+  box-shadow: var(--craft-sidebar-shadow);
+  backdrop-filter: blur(34px) saturate(180%);
+  -webkit-backdrop-filter: blur(34px) saturate(180%);
+  overflow: hidden;
+  user-select: none;
+}
+.craft-sidebar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.68), transparent 32%),
+    linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.30) 42%, transparent 58%);
+  mix-blend-mode: screen;
+  opacity: 0.72;
+}
+.craft-sidebar[data-native-active="true"] { display: none; }
+.craft-sidebar-search {
+  position: relative;
+  z-index: 1;
+  margin: 0 0 12px;
+}
+.craft-sidebar-search input {
+  width: 100%;
+  min-height: 28px;
+  padding: 5px 10px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.34);
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.craft-sidebar-section {
+  position: relative;
+  z-index: 1;
+  margin: 0 0 14px;
+}
+.craft-sidebar-section-title {
+  padding: 0 8px 5px;
+  color: var(--craft-sidebar-muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+.craft-sidebar-item {
+  width: calc(100% - 4px);
+  min-height: 28px;
+  margin: 1px 2px;
+  padding: 5px 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: default;
+}
+.craft-sidebar-item:hover { background: var(--craft-sidebar-hover); }
+.craft-sidebar-item[data-selected="true"] {
+  color: white;
+  background: var(--craft-sidebar-selected);
+  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 18px rgba(10, 132, 255, 0.22);
+}
+.craft-sidebar-item-icon {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  opacity: 0.82;
+  overflow: hidden;
+  color: transparent;
+}
+.craft-sidebar-item-icon::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: 4px;
+  background: var(--craft-sidebar-icon-color, rgba(63, 63, 70, 0.62));
+  box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset;
+}
+.craft-sidebar-item-icon[data-icon*="circle"]::before {
+  inset: 4px;
+  border-radius: 999px;
+}
+.craft-sidebar-item[data-selected="true"] .craft-sidebar-item-icon::before {
+  background: rgba(255, 255, 255, 0.9);
+}
+.craft-sidebar-item-label {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.craft-sidebar-item-badge {
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--craft-sidebar-muted);
+  font-size: 10px;
+  font-weight: 700;
+  text-align: center;
+}
+.craft-sidebar-item[data-selected="true"] .craft-sidebar-item-badge {
+  color: white;
+  background: rgba(255, 255, 255, 0.24);
+}
+
+/* Spaces fallback. Stacked in document order behind a rail — legible without
+   a native host, and deliberately not a second swipe implementation. */
+.craft-sidebar-spaces {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.craft-sidebar-space-title {
+  padding: 10px 8px 4px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.craft-sidebar-space-switcher {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding-top: 6px;
+}
+.craft-sidebar-space-tab {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 26px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.4;
+  cursor: default;
+}
+.craft-sidebar-space-tab[data-selected="true"] {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.55);
+}
+
+.craft-code-editor {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  padding: 12px;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  border-radius: 6px;
+  resize: vertical;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  .craft-text-input, .craft-textarea, .craft-select, .craft-card {
+    background: #1f2937;
+    color: #f3f4f6;
+    border-color: #374151;
+  }
+  .craft-modal {
+    background: #1f2937;
+    color: #f3f4f6;
+  }
+  .craft-accordion-header { background: #374151; }
+  .craft-table th { background: #374151; }
+  .craft-sidebar {
+    --craft-sidebar-bg: rgba(24, 24, 27, 0.58);
+    --craft-sidebar-border: rgba(255, 255, 255, 0.12);
+    --craft-sidebar-shadow: 0 26px 74px rgba(0, 0, 0, 0.44), 0 1px 0 rgba(255, 255, 255, 0.11) inset;
+    --craft-sidebar-text: rgba(244, 244, 245, 0.92);
+    --craft-sidebar-muted: rgba(212, 212, 216, 0.58);
+    --craft-sidebar-hover: rgba(255, 255, 255, 0.10);
+  }
+  .craft-sidebar-search input {
+    border-color: rgba(255,255,255,0.08);
+    background: rgba(255,255,255,0.08);
+  }
+}
+</style>
+`;
+export declare const CRAFT_COMPONENT_RUNTIME: `
+<script id="craft-component-runtime">
+(function() {
+  if (window.__stxCraftComponentRuntime) return;
+  window.__stxCraftComponentRuntime = true;
+
+  function parseConfig(sidebar) {
+    var id = sidebar.getAttribute('data-craft-sidebar-id');
+    var script = id && document.querySelector('script[data-craft-sidebar-config="' + id + '"]');
+    if (!script) return null;
+    try {
+      return JSON.parse(script.textContent || '{}');
+    } catch (error) {
+      console.warn('[stx] Invalid Craft sidebar config', error);
+      return null;
+    }
+  }
+
+  function getNativeUI() {
+    if (!window.craft) return null;
+    var hasNativeHost = window.craft.isCraft?.() ||
+      !!(window.webkit?.messageHandlers?.craft || window.CraftBridge || window.craftIPC);
+    if (!hasNativeHost) return null;
+    return window.craft.nativeUI || window.craft.components;
+  }
+
+  function initializeSidebar(sidebar) {
+    if (sidebar.dataset.craftInitialized === 'true') return;
+    if (sidebar.dataset.native === 'false') return;
+
+    var nativeUI = getNativeUI();
+    if (!nativeUI || typeof nativeUI.createSidebar !== 'function') return;
+
+    var config = parseConfig(sidebar);
+    if (!config) return;
+
+    var hasSpaces = !!(config.spaces && config.spaces.length);
+    // Spaces need a host that can swipe between whole scenes. Falling back to
+    // createSidebar would flatten every space into one list, which is worse
+    // than the web rendering already on the page — so leave that in place.
+    if (hasSpaces && typeof nativeUI.createSpacesSidebar !== 'function') return;
+
+    try {
+      var nativeConfig = Object.assign({}, config);
+      delete nativeConfig.sections;
+      delete nativeConfig.spaces;
+
+      var nativeSidebar = hasSpaces
+        ? nativeUI.createSpacesSidebar(nativeConfig)
+        : nativeUI.createSidebar(nativeConfig);
+
+      if (nativeSidebar && hasSpaces && nativeSidebar.setSpaces) {
+        nativeSidebar.setSpaces(config.spaces);
+      }
+      if (nativeSidebar && hasSpaces && config.selectedSpace && nativeSidebar.setActiveSpace) {
+        nativeSidebar.setActiveSpace(config.selectedSpace);
+      }
+      if (nativeSidebar && hasSpaces && nativeSidebar.onSpaceChange) {
+        nativeSidebar.onSpaceChange(function(spaceId) {
+          sidebar.dispatchEvent(new CustomEvent('craft-sidebar:space', {
+            bubbles: true,
+            detail: { spaceId: spaceId, sidebarId: config.id }
+          }));
+        });
+      }
+      if (nativeSidebar && !hasSpaces && config.sections) {
+        config.sections.forEach(function(section) {
+          if (nativeSidebar.addSection) nativeSidebar.addSection(section);
+        });
+      }
+      if (nativeSidebar && config.selectedItem && nativeSidebar.setSelectedItem) {
+        nativeSidebar.setSelectedItem(config.selectedItem);
+      }
+      if (nativeSidebar && nativeSidebar.onSelect) {
+        nativeSidebar.onSelect(function(itemId) {
+          sidebar.dispatchEvent(new CustomEvent('craft-sidebar:select', {
+            bubbles: true,
+            detail: { itemId: itemId, sidebarId: config.id }
+          }));
+        });
+      }
+      sidebar.dataset.craftInitialized = 'true';
+      sidebar.dataset.nativeActive = 'true';
+      window.__stxCraftNativeSidebars = window.__stxCraftNativeSidebars || {};
+      window.__stxCraftNativeSidebars[config.id] = nativeSidebar;
+    } catch (error) {
+      sidebar.dataset.nativeError = error.message || 'unknown';
+      console.warn('[stx] Failed to create native Craft sidebar', error);
+    }
+  }
+
+  function initializeCraftComponents() {
+    document.querySelectorAll('[data-craft-native-sidebar]').forEach(initializeSidebar);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeCraftComponents);
+  } else {
+    initializeCraftComponents();
+  }
+  window.addEventListener('craft:ready', initializeCraftComponents);
+  document.addEventListener('craft:nativeui:ready', initializeCraftComponents);
+})();
+</script>
+`;
+declare const craftComponents: {
+  CRAFT_COMPONENTS: typeof CRAFT_COMPONENTS
+  CRAFT_COMPONENT_STYLES: string
+  CRAFT_COMPONENT_RUNTIME: string
+  processCraftComponents: typeof processCraftComponents
+  registerCraftComponent: typeof registerCraftComponent
+  getCraftComponents: typeof getCraftComponents
+};
+/* eslint-disable prefer-const, style/max-statements-per-line, no-super-linear-backtracking, regexp/no-unused-capturing-group */
+/**
+ * Craft Native Components for stx
+ *
+ * This module provides @craft-* directives that render native components
+ * when running in a Craft environment, with HTML fallbacks for web browsers.
+ *
+ * @example
+ * ```html
+ * <@craft-button variant="primary" @click="handleClick">
+ *   Click Me
+ * </@craft-button>
+ *
+ * <@craft-text-input placeholder="Enter name" :value="name" @change="updateName" />
+ *
+ * <@craft-modal title="Settings" :open="showSettings">
+ *   Modal content here
+ * </@craft-modal>
+ * ```
+ */
+export declare interface CraftComponentConfig {
+  preferNative?: boolean
+  classPrefix?: string
+  components?: Record<string, CraftComponentDefinition>
+}
+export declare interface CraftComponentDefinition {
+  nativeType: string
+  fallbackTag: string
+  fallbackClasses?: string
+  nativeProps?: string[]
+  render?: (props: Record<string, unknown>, children: string) => string
+}
+export default craftComponents;