@auraindustry/aurajs 0.1.1 → 0.1.5

package/templates/create/shared/src/runtime/ui-forms.js

@@ -34,6 +34,89 @@ function normalizeMenuOptions(options) {
     : [];
 }
 
+function normalizeCollectionItems(items) {
+  return Array.isArray(items)
+    ? items
+      .filter((entry) => entry && typeof entry === 'object' && !Array.isArray(entry))
+      .map((entry) => ({
+        id: typeof entry.id === 'string' ? entry.id.trim() : '',
+        label: typeof entry.label === 'string' && entry.label.trim().length > 0 ? entry.label : String(entry.id || ''),
+        description: typeof entry.description === 'string' ? entry.description : null,
+        detail: typeof entry.detail === 'string' ? entry.detail : null,
+        badge: typeof entry.badge === 'string' && entry.badge.trim().length > 0 ? entry.badge.trim() : null,
+        quantity: Number.isFinite(Number(entry.quantity)) ? Math.max(0, Number(entry.quantity)) : 0,
+        disabled: entry.disabled === true,
+      }))
+      .filter((entry) => entry.id.length > 0)
+    : [];
+}
+
+function normalizeDialogueChoices(choices) {
+  return normalizeMenuOptions(choices);
+}
+
+function normalizeJournalEntries(entries) {
+  return Array.isArray(entries)
+    ? entries
+      .filter((entry) => entry && typeof entry === 'object' && !Array.isArray(entry))
+      .map((entry, index) => {
+        const id = typeof entry.id === 'string' && entry.id.trim().length > 0
+          ? entry.id.trim()
+          : `entry-${index + 1}`;
+        const label = typeof entry.label === 'string' && entry.label.trim().length > 0
+          ? entry.label.trim()
+          : (typeof entry.title === 'string' && entry.title.trim().length > 0
+            ? entry.title.trim()
+            : id);
+        return {
+          id,
+          label,
+          description: typeof entry.description === 'string'
+            ? entry.description
+            : (typeof entry.summary === 'string' ? entry.summary : null),
+          detail: typeof entry.detail === 'string'
+            ? entry.detail
+            : (typeof entry.body === 'string' ? entry.body : null),
+          badge: typeof entry.badge === 'string' && entry.badge.trim().length > 0
+            ? entry.badge.trim()
+            : (typeof entry.status === 'string' && entry.status.trim().length > 0
+              ? entry.status.trim()
+              : null),
+          meta: typeof entry.meta === 'string' && entry.meta.trim().length > 0
+            ? entry.meta.trim()
+            : (typeof entry.updatedAt === 'string' && entry.updatedAt.trim().length > 0
+              ? entry.updatedAt.trim()
+              : null),
+          disabled: entry.disabled === true,
+        };
+      })
+      .filter((entry) => entry.id.length > 0)
+    : [];
+}
+
+function buttonStateFromView(rootId, optionId) {
+  return readViewState(`${rootId}-${optionId}`) || null;
+}
+
+function selectionState(option, state, selected) {
+  return {
+    id: option.id,
+    label: option.label,
+    selected,
+    clicked: state?.clicked === true,
+    focused: state?.focused === true,
+    disabled: state?.disabled === true || option.disabled === true,
+  };
+}
+
+function collectionSummary(item) {
+  if (!item) return null;
+  if (item.badge && item.quantity > 1) return `${item.badge} · x${item.quantity}`;
+  if (item.badge) return item.badge;
+  if (item.quantity > 1) return `x${item.quantity}`;
+  return null;
+}
+
 function renderInfoText(id, label = null, description = null) {
   if (label) {
     globalThis.aura.ui.text(`${id}-label`, {
@@ -207,3 +290,472 @@ export function renderMenuList({
     states: cloneValue(states),
   };
 }
+
+export function renderTabBar({
+  id,
+  label = null,
+  description = null,
+  value = null,
+  tabs = [],
+} = {}) {
+  if (!hasUiMethod('beginColumn') || !hasUiMethod('beginRow') || !hasUiMethod('button')) {
+    return {
+      ok: false,
+      reasonCode: 'ui_tab_bar_runtime_unavailable',
+      value,
+      actionId: null,
+    };
+  }
+  const rootId = typeof id === 'string' ? id.trim() : '';
+  const normalizedTabs = normalizeMenuOptions(tabs);
+  if (!rootId || normalizedTabs.length <= 0) {
+    return {
+      ok: false,
+      reasonCode: 'ui_tab_bar_invalid_options',
+      value,
+      actionId: null,
+    };
+  }
+
+  const theme = activeTheme();
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-group`,
+    gap: 8,
+    width: 'fill',
+  });
+  renderInfoText(rootId, label, description);
+  globalThis.aura.ui.beginRow({
+    id: `${rootId}-tabs`,
+    gap: 8,
+    width: 'fill',
+  });
+  for (const tab of normalizedTabs) {
+    const selected = tab.id === value;
+    globalThis.aura.ui.button(`${rootId}-${tab.id}`, {
+      label: tab.label,
+      disabled: tab.disabled === true,
+      width: 'hug',
+      background: selected ? (theme?.buttonFocusColor || '#1e5b97') : (theme?.buttonColor || '#132132'),
+      borderColor: selected ? (theme?.buttonTextColor || '#ffffff') : (theme?.panelBorderColor || '#314e68'),
+    });
+  }
+  globalThis.aura.ui.endRow();
+  globalThis.aura.ui.endColumn();
+
+  let nextValue = value;
+  let actionId = null;
+  const states = [];
+  for (const tab of normalizedTabs) {
+    const state = buttonStateFromView(rootId, tab.id);
+    if (state?.clicked === true || state?.activated === true) {
+      nextValue = tab.id;
+      actionId = tab.id;
+    }
+    states.push(selectionState(tab, state, tab.id === nextValue));
+  }
+
+  return {
+    ok: true,
+    reasonCode: 'ui_tab_bar_rendered',
+    value: nextValue,
+    changed: nextValue !== value,
+    actionId,
+    states: cloneValue(states),
+  };
+}
+
+export function renderCollectionList({
+  id,
+  label = null,
+  description = null,
+  value = null,
+  items = [],
+  emptyText = 'Nothing here yet.',
+} = {}) {
+  if (!hasUiMethod('beginColumn') || !hasUiMethod('button')) {
+    return {
+      ok: false,
+      reasonCode: 'ui_collection_list_runtime_unavailable',
+      value,
+      actionId: null,
+      states: [],
+    };
+  }
+  const rootId = typeof id === 'string' ? id.trim() : '';
+  if (!rootId) {
+    return {
+      ok: false,
+      reasonCode: 'ui_collection_list_invalid_id',
+      value,
+      actionId: null,
+      states: [],
+    };
+  }
+
+  const normalizedItems = normalizeCollectionItems(items);
+  const theme = activeTheme();
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-group`,
+    gap: 8,
+    width: 'fill',
+  });
+  renderInfoText(rootId, label, description);
+
+  if (normalizedItems.length <= 0) {
+    globalThis.aura.ui.text(`${rootId}-empty`, {
+      text: emptyText,
+      size: 13,
+      color: theme?.mutedTextColor || '#9db2cb',
+    });
+    globalThis.aura.ui.endColumn();
+    return {
+      ok: true,
+      reasonCode: 'ui_collection_list_empty',
+      value,
+      changed: false,
+      actionId: null,
+      states: [],
+      selectedItem: null,
+    };
+  }
+
+  for (const item of normalizedItems) {
+    const selected = item.id === value;
+    const summary = collectionSummary(item);
+    const buttonLabel = summary ? `${item.label} (${summary})` : item.label;
+    globalThis.aura.ui.button(`${rootId}-${item.id}`, {
+      label: buttonLabel,
+      width: 'fill',
+      disabled: item.disabled === true,
+      background: selected ? (theme?.buttonFocusColor || '#1e5b97') : (theme?.buttonColor || '#132132'),
+      borderColor: selected ? (theme?.buttonTextColor || '#ffffff') : (theme?.panelBorderColor || '#314e68'),
+    });
+    if (item.description) {
+      globalThis.aura.ui.text(`${rootId}-${item.id}-description`, {
+        text: item.description,
+        size: 12,
+        color: theme?.mutedTextColor || '#9db2cb',
+      });
+    }
+    if (item.detail) {
+      globalThis.aura.ui.text(`${rootId}-${item.id}-detail`, {
+        text: item.detail,
+        size: 12,
+        color: theme?.mutedTextColor || '#9db2cb',
+      });
+    }
+  }
+  globalThis.aura.ui.endColumn();
+
+  let nextValue = value;
+  let actionId = null;
+  const states = [];
+  for (const item of normalizedItems) {
+    const state = buttonStateFromView(rootId, item.id);
+    if (state?.clicked === true || state?.activated === true) {
+      nextValue = item.id;
+      actionId = item.id;
+    }
+    states.push({
+      ...selectionState(item, state, item.id === nextValue),
+      badge: item.badge,
+      quantity: item.quantity,
+    });
+  }
+
+  const selectedItem = normalizedItems.find((entry) => entry.id === nextValue) || null;
+  return {
+    ok: true,
+    reasonCode: 'ui_collection_list_rendered',
+    value: nextValue,
+    changed: nextValue !== value,
+    actionId,
+    states: cloneValue(states),
+    selectedItem: cloneValue(selectedItem),
+  };
+}
+
+export function renderDialoguePanel({
+  id,
+  label = null,
+  speaker = null,
+  title = null,
+  text = '',
+  note = null,
+  value = null,
+  choices = [],
+  emptyText = 'No response options available.',
+} = {}) {
+  if (!hasUiMethod('beginColumn') || !hasUiMethod('button') || !hasUiMethod('text')) {
+    return {
+      ok: false,
+      reasonCode: 'ui_dialogue_panel_runtime_unavailable',
+      value,
+      actionId: null,
+      states: [],
+      selectedChoice: null,
+    };
+  }
+  const rootId = typeof id === 'string' ? id.trim() : '';
+  if (!rootId) {
+    return {
+      ok: false,
+      reasonCode: 'ui_dialogue_panel_invalid_id',
+      value,
+      actionId: null,
+      states: [],
+      selectedChoice: null,
+    };
+  }
+
+  const normalizedChoices = normalizeDialogueChoices(choices);
+  const theme = activeTheme();
+
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-group`,
+    gap: 8,
+    width: 'fill',
+  });
+  if (label) {
+    globalThis.aura.ui.text(`${rootId}-label`, {
+      text: label,
+      size: 11,
+      color: theme?.mutedTextColor || '#9db2cb',
+    });
+  }
+  if (speaker) {
+    globalThis.aura.ui.text(`${rootId}-speaker`, {
+      text: speaker,
+      size: 13,
+      color: '#84c3ef',
+    });
+  }
+  if (title) {
+    globalThis.aura.ui.text(`${rootId}-title`, {
+      text: title,
+      size: 20,
+      color: '#eef7ff',
+    });
+  }
+  globalThis.aura.ui.text(`${rootId}-text`, {
+    text,
+    size: 13,
+    color: '#d5e1ee',
+  });
+  if (note) {
+    globalThis.aura.ui.text(`${rootId}-note`, {
+      text: note,
+      size: 12,
+      color: theme?.mutedTextColor || '#9db2cb',
+    });
+  }
+
+  if (normalizedChoices.length <= 0) {
+    globalThis.aura.ui.text(`${rootId}-empty`, {
+      text: emptyText,
+      size: 12,
+      color: theme?.mutedTextColor || '#9db2cb',
+    });
+    globalThis.aura.ui.endColumn();
+    return {
+      ok: true,
+      reasonCode: 'ui_dialogue_panel_empty_choices',
+      value,
+      changed: false,
+      actionId: null,
+      states: [],
+      selectedChoice: null,
+    };
+  }
+
+  for (const choice of normalizedChoices) {
+    const selected = choice.id === value;
+    globalThis.aura.ui.button(`${rootId}-${choice.id}`, {
+      label: choice.label,
+      width: 'fill',
+      disabled: choice.disabled === true,
+      background: selected ? (theme?.buttonFocusColor || '#1e5b97') : (theme?.buttonColor || '#132132'),
+      borderColor: selected ? (theme?.buttonTextColor || '#ffffff') : (theme?.panelBorderColor || '#314e68'),
+    });
+    if (choice.description) {
+      globalThis.aura.ui.text(`${rootId}-${choice.id}-description`, {
+        text: choice.description,
+        size: 12,
+        color: theme?.mutedTextColor || '#9db2cb',
+      });
+    }
+  }
+  globalThis.aura.ui.endColumn();
+
+  let nextValue = value;
+  let actionId = null;
+  const states = [];
+  for (const choice of normalizedChoices) {
+    const state = buttonStateFromView(rootId, choice.id);
+    if (state?.clicked === true || state?.activated === true) {
+      nextValue = choice.id;
+      actionId = choice.id;
+    }
+    states.push(selectionState(choice, state, choice.id === nextValue));
+  }
+
+  const selectedChoice = normalizedChoices.find((entry) => entry.id === nextValue) || null;
+  return {
+    ok: true,
+    reasonCode: 'ui_dialogue_panel_rendered',
+    value: nextValue,
+    changed: nextValue !== value,
+    actionId,
+    states: cloneValue(states),
+    selectedChoice: cloneValue(selectedChoice),
+  };
+}
+
+export function renderJournalPane({
+  id,
+  label = null,
+  description = null,
+  value = null,
+  entries = [],
+  emptyText = 'No journal entries yet.',
+  detailEmptyText = 'Select an entry to inspect the current route record.',
+} = {}) {
+  if (!hasUiMethod('beginColumn') || !hasUiMethod('beginRow') || !hasUiMethod('button') || !hasUiMethod('text')) {
+    return {
+      ok: false,
+      reasonCode: 'ui_journal_pane_runtime_unavailable',
+      value,
+      actionId: null,
+      states: [],
+      selectedEntry: null,
+    };
+  }
+  const rootId = typeof id === 'string' ? id.trim() : '';
+  if (!rootId) {
+    return {
+      ok: false,
+      reasonCode: 'ui_journal_pane_invalid_id',
+      value,
+      actionId: null,
+      states: [],
+      selectedEntry: null,
+    };
+  }
+
+  const normalizedEntries = normalizeJournalEntries(entries);
+  const theme = activeTheme();
+
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-group`,
+    gap: 8,
+    width: 'fill',
+  });
+  renderInfoText(rootId, label, description);
+  globalThis.aura.ui.beginRow({
+    id: `${rootId}-layout`,
+    gap: 12,
+    width: 'fill',
+  });
+
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-list`,
+    width: 220,
+    gap: 8,
+  });
+  if (normalizedEntries.length <= 0) {
+    globalThis.aura.ui.text(`${rootId}-empty`, {
+      text: emptyText,
+      size: 13,
+      color: theme?.mutedTextColor || '#9db2cb',
+    });
+  } else {
+    for (const entry of normalizedEntries) {
+      const selected = entry.id === value;
+      const summary = entry.badge ? `${entry.label} (${entry.badge})` : entry.label;
+      globalThis.aura.ui.button(`${rootId}-${entry.id}`, {
+        label: summary,
+        width: 'fill',
+        disabled: entry.disabled === true,
+        background: selected ? (theme?.buttonFocusColor || '#1e5b97') : (theme?.buttonColor || '#132132'),
+        borderColor: selected ? (theme?.buttonTextColor || '#ffffff') : (theme?.panelBorderColor || '#314e68'),
+      });
+      if (entry.description) {
+        globalThis.aura.ui.text(`${rootId}-${entry.id}-description`, {
+          text: entry.description,
+          size: 12,
+          color: theme?.mutedTextColor || '#9db2cb',
+        });
+      }
+    }
+  }
+  globalThis.aura.ui.endColumn();
+
+  const fallbackEntry = normalizedEntries[0] || null;
+  const activeEntry = normalizedEntries.find((entry) => entry.id === value) || fallbackEntry;
+
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-detail`,
+    width: 'fill',
+    gap: 8,
+  });
+  globalThis.aura.ui.text(`${rootId}-detail-label`, {
+    text: 'ENTRY',
+    size: 11,
+    color: '#84c3ef',
+  });
+  globalThis.aura.ui.text(`${rootId}-detail-title`, {
+    text: activeEntry?.label || 'No entry selected',
+    size: 18,
+    color: '#eef7ff',
+  });
+  globalThis.aura.ui.text(`${rootId}-detail-badge`, {
+    text: activeEntry?.badge || 'Journal',
+    size: 12,
+    color: '#f0cf79',
+  });
+  globalThis.aura.ui.text(`${rootId}-detail-copy`, {
+    text: activeEntry?.detail || activeEntry?.description || detailEmptyText,
+    size: 13,
+    color: '#d5e1ee',
+  });
+  if (activeEntry?.meta) {
+    globalThis.aura.ui.text(`${rootId}-detail-meta`, {
+      text: activeEntry.meta,
+      size: 12,
+      color: theme?.mutedTextColor || '#9db2cb',
+    });
+  }
+  globalThis.aura.ui.endColumn();
+
+  globalThis.aura.ui.endRow();
+  globalThis.aura.ui.endColumn();
+
+  let nextValue = value;
+  let actionId = null;
+  const states = [];
+  for (const entry of normalizedEntries) {
+    const state = buttonStateFromView(rootId, entry.id);
+    if (state?.clicked === true || state?.activated === true) {
+      nextValue = entry.id;
+      actionId = entry.id;
+    }
+    states.push({
+      ...selectionState(entry, state, entry.id === nextValue),
+      badge: entry.badge,
+      meta: entry.meta,
+    });
+  }
+
+  const selectedEntry = normalizedEntries.find((entry) => entry.id === nextValue)
+    || normalizedEntries[0]
+    || null;
+  return {
+    ok: true,
+    reasonCode: normalizedEntries.length > 0 ? 'ui_journal_pane_rendered' : 'ui_journal_pane_empty',
+    value: selectedEntry?.id || value || null,
+    changed: Boolean(selectedEntry?.id && selectedEntry.id !== value),
+    actionId,
+    states: cloneValue(states),
+    selectedEntry: cloneValue(selectedEntry),
+  };
+}