@auraindustry/aurajs 0.0.7 → 0.1.0

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

@@ -0,0 +1,209 @@
+function hasUiMethod(name) {
+  return Boolean(globalThis.aura?.ui) && typeof globalThis.aura.ui[name] === 'function';
+}
+
+function activeTheme() {
+  return hasUiMethod('getTheme') ? globalThis.aura.ui.getTheme() : null;
+}
+
+function cloneValue(value) {
+  if (Array.isArray(value)) {
+    return value.map((entry) => cloneValue(entry));
+  }
+  if (value && typeof value === 'object') {
+    const output = {};
+    for (const [key, entry] of Object.entries(value)) {
+      output[key] = cloneValue(entry);
+    }
+    return output;
+  }
+  return value;
+}
+
+function normalizeMenuOptions(options) {
+  return Array.isArray(options)
+    ? options
+      .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,
+        disabled: entry.disabled === true,
+      }))
+      .filter((entry) => entry.id.length > 0)
+    : [];
+}
+
+function renderInfoText(id, label = null, description = null) {
+  if (label) {
+    globalThis.aura.ui.text(`${id}-label`, {
+      text: label,
+      size: 12,
+      color: activeTheme()?.mutedTextColor || '#9db2cb',
+    });
+  }
+  if (description) {
+    globalThis.aura.ui.text(`${id}-description`, {
+      text: description,
+      size: 13,
+      color: activeTheme()?.mutedTextColor || '#9db2cb',
+    });
+  }
+}
+
+export function readViewState(nodeId) {
+  if (!hasUiMethod('getViewState')) return null;
+  return globalThis.aura.ui.getViewState(nodeId) || null;
+}
+
+export function readStringViewValue(nodeId, fallback = '') {
+  const state = readViewState(nodeId);
+  return typeof state?.value === 'string' ? state.value : fallback;
+}
+
+export function readViewEditingState(nodeId) {
+  const state = readViewState(nodeId);
+  return {
+    editing: state?.editing === true,
+    submitted: state?.submitted === true,
+    caretIndex: Number.isFinite(Number(state?.caretIndex)) ? Number(state.caretIndex) : null,
+  };
+}
+
+export function wasViewSubmitted(nodeId) {
+  const state = readViewState(nodeId);
+  return state?.submitted === true;
+}
+
+export function renderTextFieldRow({
+  id,
+  label = null,
+  description = null,
+  value = '',
+  placeholder = '',
+  maxLength = 32,
+  width = 'fill',
+} = {}) {
+  if (!hasUiMethod('beginColumn') || !hasUiMethod('input')) {
+    return {
+      ok: false,
+      reasonCode: 'ui_text_field_runtime_unavailable',
+      value,
+    };
+  }
+  const rootId = typeof id === 'string' ? id.trim() : '';
+  if (!rootId) {
+    return {
+      ok: false,
+      reasonCode: 'ui_text_field_invalid_id',
+      value,
+    };
+  }
+
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-group`,
+    gap: 6,
+    width: 'fill',
+  });
+  renderInfoText(rootId, label, description);
+  globalThis.aura.ui.input(`${rootId}-input`, {
+    value,
+    placeholder,
+    maxLength,
+    width,
+  });
+  globalThis.aura.ui.endColumn();
+
+  const state = readViewState(`${rootId}-input`);
+  return {
+    ok: true,
+    reasonCode: 'ui_text_field_rendered',
+    nodeId: `${rootId}-input`,
+    value: typeof state?.value === 'string' ? state.value : String(value || ''),
+    changed: state?.changed === true,
+    submitted: state?.submitted === true,
+    editing: state?.editing === true,
+    caretIndex: Number.isFinite(Number(state?.caretIndex)) ? Number(state.caretIndex) : null,
+  };
+}
+
+export function renderMenuList({
+  id,
+  label = null,
+  description = null,
+  value = null,
+  options = [],
+} = {}) {
+  if (!hasUiMethod('beginColumn') || !hasUiMethod('button')) {
+    return {
+      ok: false,
+      reasonCode: 'ui_menu_list_runtime_unavailable',
+      value,
+      actionId: null,
+    };
+  }
+  const rootId = typeof id === 'string' ? id.trim() : '';
+  const normalizedOptions = normalizeMenuOptions(options);
+  if (!rootId || normalizedOptions.length <= 0) {
+    return {
+      ok: false,
+      reasonCode: 'ui_menu_list_invalid_options',
+      value,
+      actionId: null,
+    };
+  }
+
+  const theme = activeTheme();
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-group`,
+    gap: 8,
+    width: 'fill',
+  });
+  renderInfoText(rootId, label, description);
+  for (const option of normalizedOptions) {
+    const selected = option.id === value;
+    globalThis.aura.ui.button(`${rootId}-${option.id}`, {
+      label: option.label,
+      width: 'fill',
+      disabled: option.disabled === true,
+      background: selected ? (theme?.buttonFocusColor || '#1e5b97') : (theme?.buttonColor || '#132132'),
+      borderColor: selected ? (theme?.buttonTextColor || '#ffffff') : (theme?.panelBorderColor || '#314e68'),
+    });
+    if (option.description) {
+      globalThis.aura.ui.text(`${rootId}-${option.id}-description`, {
+        text: option.description,
+        size: 12,
+        color: theme?.mutedTextColor || '#9db2cb',
+      });
+    }
+  }
+  globalThis.aura.ui.endColumn();
+
+  let nextValue = value;
+  let actionId = null;
+  const states = [];
+  for (const option of normalizedOptions) {
+    const state = readViewState(`${rootId}-${option.id}`);
+    if (state?.clicked === true || state?.activated === true) {
+      nextValue = option.id;
+      actionId = option.id;
+    }
+    states.push({
+      id: option.id,
+      label: option.label,
+      selected: option.id === nextValue,
+      clicked: state?.clicked === true,
+      focused: state?.focused === true,
+      disabled: state?.disabled === true,
+    });
+  }
+
+  return {
+    ok: true,
+    reasonCode: 'ui_menu_list_rendered',
+    value: nextValue,
+    changed: nextValue !== value,
+    actionId,
+    states: cloneValue(states),
+  };
+}

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

@@ -0,0 +1,237 @@
+import {
+  listUiContrastChoices,
+  listUiDensityChoices,
+  listUiFocusVisibilityChoices,
+  listUiTextScaleChoices,
+  listUiThemeChoices,
+} from './ui-theme.js';
+
+function hasUiMethod(name) {
+  return Boolean(globalThis.aura?.ui) && typeof globalThis.aura.ui[name] === 'function';
+}
+
+function activeTheme() {
+  return hasUiMethod('getTheme') ? globalThis.aura.ui.getTheme() : null;
+}
+
+function cloneSettingsValue(value) {
+  if (Array.isArray(value)) {
+    return value.map((entry) => cloneSettingsValue(entry));
+  }
+  if (value && typeof value === 'object') {
+    const output = {};
+    for (const [key, entry] of Object.entries(value)) {
+      output[key] = cloneSettingsValue(entry);
+    }
+    return output;
+  }
+  return value;
+}
+
+function normalizeOptions(options) {
+  return Array.isArray(options)
+    ? options
+      .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,
+        disabled: entry.disabled === true,
+      }))
+      .filter((entry) => entry.id.length > 0)
+    : [];
+}
+
+function renderInfoText(id, label = null, description = null) {
+  if (label) {
+    globalThis.aura.ui.text(`${id}-label`, {
+      text: label,
+      size: 12,
+      color: activeTheme()?.mutedTextColor || '#9db2cb',
+    });
+  }
+  if (description) {
+    globalThis.aura.ui.text(`${id}-description`, {
+      text: description,
+      size: 13,
+      color: activeTheme()?.mutedTextColor || '#9db2cb',
+    });
+  }
+}
+
+export function readViewState(nodeId) {
+  if (!hasUiMethod('getViewState')) return null;
+  return globalThis.aura.ui.getViewState(nodeId) || null;
+}
+
+export function wasViewClicked(nodeId) {
+  const state = readViewState(nodeId);
+  return state?.clicked === true || state?.activated === true;
+}
+
+export function readBooleanViewValue(nodeId, fallback = false) {
+  const state = readViewState(nodeId);
+  return typeof state?.value === 'boolean' ? state.value : fallback;
+}
+
+export function readNumberViewValue(nodeId, fallback = 0) {
+  const state = readViewState(nodeId);
+  return Number.isFinite(Number(state?.value)) ? Number(state.value) : fallback;
+}
+
+export function renderSegmentedControl({
+  id,
+  label = null,
+  description = null,
+  value = null,
+  options = [],
+} = {}) {
+  if (!hasUiMethod('beginColumn') || !hasUiMethod('beginRow') || !hasUiMethod('button')) {
+    return {
+      ok: false,
+      reasonCode: 'ui_segmented_runtime_unavailable',
+      value,
+    };
+  }
+
+  const normalizedOptions = normalizeOptions(options);
+  if (typeof id !== 'string' || id.trim().length <= 0 || normalizedOptions.length <= 0) {
+    return {
+      ok: false,
+      reasonCode: 'ui_segmented_invalid_options',
+      value,
+    };
+  }
+
+  const theme = activeTheme();
+  const rootId = id.trim();
+  globalThis.aura.ui.beginColumn({
+    id: `${rootId}-group`,
+    gap: 6,
+    width: 'fill',
+  });
+  renderInfoText(rootId, label, description);
+  globalThis.aura.ui.beginRow({
+    id: `${rootId}-row`,
+    gap: 8,
+    width: 'fill',
+  });
+  for (const option of normalizedOptions) {
+    const active = option.id === value;
+    globalThis.aura.ui.button(`${rootId}-${option.id}`, {
+      label: option.label,
+      width: 'fill',
+      disabled: option.disabled === true,
+      background: active ? (theme?.buttonFocusColor || '#1e5b97') : (theme?.buttonColor || '#132132'),
+      borderColor: active ? (theme?.buttonTextColor || '#ffffff') : (theme?.panelBorderColor || '#314e68'),
+    });
+  }
+  globalThis.aura.ui.endRow();
+  globalThis.aura.ui.endColumn();
+
+  let nextValue = value;
+  const states = [];
+  for (const option of normalizedOptions) {
+    const state = readViewState(`${rootId}-${option.id}`);
+    if (state?.clicked === true || state?.activated === true) {
+      nextValue = option.id;
+    }
+    states.push({
+      id: option.id,
+      label: option.label,
+      active: option.id === nextValue,
+      clicked: state?.clicked === true,
+      focused: state?.focused === true,
+      disabled: state?.disabled === true,
+    });
+  }
+
+  return {
+    ok: true,
+    reasonCode: 'ui_segmented_rendered',
+    value: nextValue,
+    changed: nextValue !== value,
+    options: states,
+  };
+}
+
+export function renderActionStrip({ id, actions = [] } = {}) {
+  if (!hasUiMethod('beginRow') || !hasUiMethod('button')) {
+    return {
+      ok: false,
+      reasonCode: 'ui_action_strip_runtime_unavailable',
+      actionId: null,
+    };
+  }
+  const normalizedActions = normalizeOptions(actions);
+  if (typeof id !== 'string' || id.trim().length <= 0 || normalizedActions.length <= 0) {
+    return {
+      ok: false,
+      reasonCode: 'ui_action_strip_invalid_actions',
+      actionId: null,
+    };
+  }
+
+  const rootId = id.trim();
+  globalThis.aura.ui.beginRow({
+    id: `${rootId}-actions`,
+    gap: 8,
+    width: 'fill',
+  });
+  for (const action of normalizedActions) {
+    globalThis.aura.ui.button(`${rootId}-${action.id}`, {
+      label: action.label,
+      width: 'fill',
+      disabled: action.disabled === true,
+    });
+  }
+  globalThis.aura.ui.endRow();
+
+  let actionId = null;
+  const states = [];
+  for (const action of normalizedActions) {
+    const state = readViewState(`${rootId}-${action.id}`);
+    if (state?.clicked === true || state?.activated === true) {
+      actionId = action.id;
+    }
+    states.push({
+      id: action.id,
+      clicked: state?.clicked === true,
+      focused: state?.focused === true,
+      disabled: state?.disabled === true,
+    });
+  }
+
+  return {
+    ok: true,
+    reasonCode: 'ui_action_strip_rendered',
+    actionId,
+    states: cloneSettingsValue(states),
+  };
+}
+
+export function listThemeSegmentOptions() {
+  return listUiThemeChoices();
+}
+
+export function listDensitySegmentOptions() {
+  return listUiDensityChoices();
+}
+
+export function listContrastSegmentOptions() {
+  return listUiContrastChoices();
+}
+
+export function listTextScaleSegmentOptions() {
+  return listUiTextScaleChoices();
+}
+
+export function listFocusVisibilitySegmentOptions() {
+  return listUiFocusVisibilityChoices();
+}
+
+export function formatPercentFromTenth(value) {
+  const numeric = Number(value);
+  const clamped = Number.isFinite(numeric) ? Math.max(0, Math.min(10, numeric)) : 0;
+  return `${Math.round(clamped * 10)}%`;
+}