@escalated-dev/escalated 0.6.0 → 0.7.0

package/src/components/CategoryTree.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    categories: { type: Array, default: () => [] },
+    level: { type: Number, default: 0 },
+    parentId: { type: [Number, null], default: null },
+});
+
+defineEmits(['edit', 'delete']);
+
+const children = computed(() => {
+    return props.categories.filter((c) => {
+        if (props.parentId === null) return !c.parent_id;
+        return c.parent_id === props.parentId;
+    });
+});
+</script>
+
+<template>
+    <div>
+        <div v-for="category in children" :key="category.id">
+            <div
+                :class="[
+                    'flex items-center justify-between rounded-lg border border-white/[0.06] bg-neutral-900/60 px-4 py-3 mb-1.5',
+                ]"
+                :style="{ marginLeft: level * 24 + 'px' }"
+            >
+                <div class="flex items-center gap-3">
+                    <svg
+                        class="h-4 w-4 text-neutral-600"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+                        />
+                    </svg>
+                    <div>
+                        <span class="text-sm font-medium text-neutral-200">{{ category.name }}</span>
+                        <span v-if="category.articles_count !== undefined" class="ml-2 text-xs text-neutral-500">
+                            {{ category.articles_count }} articles
+                        </span>
+                    </div>
+                </div>
+                <div class="flex items-center gap-2">
+                    <span class="text-xs text-neutral-600">pos: {{ category.position }}</span>
+                    <button
+                        type="button"
+                        class="rounded p-1 text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300"
+                        @click="$emit('edit', category)"
+                    >
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                            />
+                        </svg>
+                    </button>
+                    <button
+                        type="button"
+                        class="rounded p-1 text-neutral-500 hover:bg-red-500/10 hover:text-red-400"
+                        @click="$emit('delete', category)"
+                    >
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                            />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <CategoryTree
+                :categories="categories"
+                :level="level + 1"
+                :parent-id="category.id"
+                @edit="$emit('edit', $event)"
+                @delete="$emit('delete', $event)"
+            />
+        </div>
+    </div>
+</template>

package/src/components/ChartWidget.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    title: { type: String, default: '' },
+    data: { type: Array, default: () => [] },
+    color: { type: String, default: 'cyan' },
+});
+
+const colorMap = {
+    cyan: 'bg-cyan-500',
+    violet: 'bg-violet-500',
+    emerald: 'bg-emerald-500',
+    amber: 'bg-amber-500',
+    red: 'bg-red-500',
+    blue: 'bg-blue-500',
+};
+
+const barColor = computed(() => colorMap[props.color] || colorMap.cyan);
+
+const maxValue = computed(() => {
+    if (!props.data.length) return 1;
+    return Math.max(...props.data.map((d) => d.value), 1);
+});
+</script>
+
+<template>
+    <div class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-5">
+        <h3 v-if="title" class="mb-4 text-sm font-semibold text-neutral-200">{{ title }}</h3>
+        <div v-if="data.length" class="space-y-2.5">
+            <div v-for="item in data" :key="item.label" class="flex items-center gap-3">
+                <span class="w-20 shrink-0 truncate text-xs text-neutral-500">{{ item.label }}</span>
+                <div class="flex-1">
+                    <div class="h-5 overflow-hidden rounded-full bg-white/[0.04]">
+                        <div
+                            :class="['h-full rounded-full transition-all', barColor]"
+                            :style="{ width: `${(item.value / maxValue) * 100}%`, opacity: 0.8 }"
+                        ></div>
+                    </div>
+                </div>
+                <span class="w-10 text-right text-xs font-medium text-neutral-300">{{ item.value }}</span>
+            </div>
+        </div>
+        <div v-else class="py-6 text-center text-sm text-neutral-500">No data available</div>
+    </div>
+</template>

package/src/components/CollisionWarning.stories.js

@@ -0,0 +1,30 @@
+import CollisionWarning from './CollisionWarning.vue';
+
+export default {
+    title: 'Components/CollisionWarning',
+    component: CollisionWarning,
+};
+
+export const SingleTyper = {
+    args: {
+        typers: [{ name: 'Alice Chen' }],
+    },
+};
+
+export const TwoTypers = {
+    args: {
+        typers: [{ name: 'Alice Chen' }, { name: 'Bob Smith' }],
+    },
+};
+
+export const ManyTypers = {
+    args: {
+        typers: [{ name: 'Alice Chen' }, { name: 'Bob Smith' }, { name: 'Carol Davis' }, { name: 'Dan Lee' }],
+    },
+};
+
+export const NoTypers = {
+    args: {
+        typers: [],
+    },
+};

package/src/components/CollisionWarning.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { inject, computed } from 'vue';
+
+defineProps({
+    typers: { type: Array, default: () => [] },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+function typersText(typers) {
+    const names = typers.map((t) => t.name);
+    if (names.length === 1) return `${names[0]} is typing a reply...`;
+    if (names.length === 2) return `${names[0]} and ${names[1]} are typing replies...`;
+    return `${names[0]} and ${names.length - 1} others are typing replies...`;
+}
+</script>
+
+<template>
+    <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0 -translate-y-2"
+        enter-to-class="opacity-100 translate-y-0"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="opacity-100 translate-y-0"
+        leave-to-class="opacity-0 -translate-y-2"
+    >
+        <div
+            v-if="typers.length > 0"
+            role="alert"
+            aria-live="assertive"
+            :class="[
+                'flex items-center gap-2 rounded-lg px-3 py-2 ring-1',
+                escDark ? 'bg-amber-500/10 ring-amber-500/20' : 'bg-amber-50 ring-amber-200',
+            ]"
+        >
+            <!-- Pulsing indicator -->
+            <span class="relative flex h-2.5 w-2.5">
+                <span
+                    class="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75"
+                ></span>
+                <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-amber-500"></span>
+            </span>
+
+            <!-- Avatars -->
+            <div class="flex -space-x-1.5">
+                <div
+                    v-for="typer in typers.slice(0, 3)"
+                    :key="typer.name"
+                    :class="[
+                        'flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-semibold ring-1',
+                        escDark
+                            ? 'bg-amber-500/30 text-amber-300 ring-amber-500/40'
+                            : 'bg-amber-100 text-amber-700 ring-amber-300',
+                    ]"
+                >
+                    {{ (typer.name || '?').charAt(0).toUpperCase() }}
+                </div>
+            </div>
+
+            <span :class="['text-xs font-medium', escDark ? 'text-amber-400' : 'text-amber-700']">
+                {{ typersText(typers) }}
+            </span>
+        </div>
+    </Transition>
+</template>

package/src/components/ConditionalFieldRules.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    availableFields: { type: Array, default: () => [] },
+    modelValue: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const rules = computed({
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
+});
+
+function addRule() {
+    const updated = [
+        ...rules.value,
+        {
+            field: '',
+            operator: 'equals',
+            value: '',
+            target_field: '',
+        },
+    ];
+    emit('update:modelValue', updated);
+}
+
+function removeRule(index) {
+    const updated = rules.value.filter((_, i) => i !== index);
+    emit('update:modelValue', updated);
+}
+
+function updateRule(index, key, value) {
+    const updated = rules.value.map((rule, i) => (i === index ? { ...rule, [key]: value } : rule));
+    emit('update:modelValue', updated);
+}
+
+function getFieldOptions(fieldName) {
+    const field = props.availableFields.find((f) => f.name === fieldName || f.slug === fieldName);
+    return field?.options || [];
+}
+
+const operatorOptions = [
+    { value: 'equals', label: 'equals' },
+    { value: 'not_equals', label: 'does not equal' },
+    { value: 'contains', label: 'contains' },
+    { value: 'is_empty', label: 'is empty' },
+    { value: 'is_not_empty', label: 'is not empty' },
+];
+</script>
+
+<template>
+    <div class="space-y-3">
+        <div
+            v-for="(rule, index) in rules"
+            :key="index"
+            class="flex flex-wrap items-center gap-2 rounded-lg border border-white/[0.06] bg-neutral-950 p-3"
+        >
+            <span class="text-xs font-medium text-neutral-500">When</span>
+            <select
+                :value="rule.field"
+                class="rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @change="updateRule(index, 'field', $event.target.value)"
+            >
+                <option value="">Select field...</option>
+                <option v-for="f in availableFields" :key="f.name || f.slug" :value="f.name || f.slug">
+                    {{ f.label || f.name }}
+                </option>
+            </select>
+
+            <select
+                :value="rule.operator"
+                class="rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @change="updateRule(index, 'operator', $event.target.value)"
+            >
+                <option v-for="op in operatorOptions" :key="op.value" :value="op.value">
+                    {{ op.label }}
+                </option>
+            </select>
+
+            <template v-if="rule.operator !== 'is_empty' && rule.operator !== 'is_not_empty'">
+                <select
+                    v-if="getFieldOptions(rule.field).length"
+                    :value="rule.value"
+                    class="rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @change="updateRule(index, 'value', $event.target.value)"
+                >
+                    <option value="">Select value...</option>
+                    <option v-for="opt in getFieldOptions(rule.field)" :key="opt" :value="opt">
+                        {{ opt }}
+                    </option>
+                </select>
+                <input
+                    v-else
+                    :value="rule.value"
+                    type="text"
+                    placeholder="Value"
+                    class="w-32 rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                    @input="updateRule(index, 'value', $event.target.value)"
+                />
+            </template>
+
+            <span class="text-xs font-medium text-neutral-500">show</span>
+            <select
+                :value="rule.target_field"
+                class="rounded-lg border border-white/10 bg-neutral-900 px-2 py-1.5 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @change="updateRule(index, 'target_field', $event.target.value)"
+            >
+                <option value="">Select target field...</option>
+                <option v-for="f in availableFields" :key="f.name || f.slug" :value="f.name || f.slug">
+                    {{ f.label || f.name }}
+                </option>
+            </select>
+
+            <button
+                type="button"
+                class="ml-auto rounded p-1 text-neutral-500 hover:bg-red-500/10 hover:text-red-400"
+                @click="removeRule(index)"
+            >
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+
+        <button
+            type="button"
+            class="rounded-lg border border-dashed border-white/10 px-4 py-2 text-sm text-neutral-500 hover:border-white/20 hover:text-neutral-300"
+            @click="addRule"
+        >
+            + Add Condition
+        </button>
+    </div>
+</template>

package/src/components/ContextPanel.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { inject, computed } from 'vue';
+
+defineProps({
+    visible: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['update:visible']);
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+function close() {
+    emit('update:visible', false);
+}
+</script>
+
+<template>
+    <transition
+        enter-active-class="transition-all duration-300 ease-out"
+        leave-active-class="transition-all duration-200 ease-in"
+        enter-from-class="translate-x-full opacity-0"
+        enter-to-class="translate-x-0 opacity-100"
+        leave-from-class="translate-x-0 opacity-100"
+        leave-to-class="translate-x-full opacity-0"
+    >
+        <div
+            v-if="visible"
+            :class="[
+                'fixed inset-y-0 right-0 z-40 w-80 overflow-y-auto border-l shadow-2xl backdrop-blur-sm lg:static lg:block lg:overflow-visible lg:shadow-none',
+                escDark ? 'border-white/[0.06] bg-neutral-900/95' : 'border-gray-200 bg-white',
+            ]"
+        >
+            <!-- Header -->
+            <div
+                :class="[
+                    'flex items-center justify-between border-b px-4 py-3',
+                    escDark ? 'border-white/[0.06]' : 'border-gray-200',
+                ]"
+            >
+                <h3 :class="['text-sm font-semibold', escDark ? 'text-neutral-200' : 'text-gray-900']">Context</h3>
+                <button
+                    type="button"
+                    :class="[
+                        'rounded p-1 lg:hidden',
+                        escDark
+                            ? 'text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300'
+                            : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                    ]"
+                    @click="close"
+                >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Sections -->
+            <div>
+                <slot />
+            </div>
+        </div>
+    </transition>
+</template>

package/src/components/ContextPanelSection.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, inject, computed } from 'vue';
+
+const props = defineProps({
+    title: { type: String, required: true },
+    icon: { type: String, default: '' },
+    defaultOpen: { type: Boolean, default: true },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const isOpen = ref(props.defaultOpen);
+</script>
+
+<template>
+    <div :class="['border-b last:border-b-0', escDark ? 'border-white/[0.06]' : 'border-gray-200']">
+        <button
+            type="button"
+            :aria-expanded="isOpen"
+            :class="[
+                'flex w-full items-center gap-2 px-4 py-3 text-left transition-colors',
+                escDark ? 'hover:bg-white/[0.02]' : 'hover:bg-gray-50',
+            ]"
+            @click="isOpen = !isOpen"
+        >
+            <svg
+                v-if="icon"
+                :class="['h-4 w-4 shrink-0', escDark ? 'text-neutral-500' : 'text-gray-400']"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" :d="icon" />
+            </svg>
+            <span
+                :class="[
+                    'flex-1 text-xs font-semibold uppercase tracking-wider',
+                    escDark ? 'text-neutral-400' : 'text-gray-500',
+                ]"
+            >
+                {{ title }}
+            </span>
+            <svg
+                :class="[
+                    'h-4 w-4 transition-transform',
+                    escDark ? 'text-neutral-600' : 'text-gray-400',
+                    isOpen ? 'rotate-180' : '',
+                ]"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                viewBox="0 0 24 24"
+            >
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+        </button>
+        <div v-show="isOpen" class="px-4 pb-4">
+            <slot />
+        </div>
+    </div>
+</template>

package/src/components/CustomFieldRenderer.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    fields: { type: Array, required: true },
+    modelValue: { type: Object, default: () => ({}) },
+    errors: { type: Object, default: () => ({}) },
+    conditions: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+function updateField(name, value) {
+    emit('update:modelValue', { ...props.modelValue, [name]: value });
+}
+
+function toggleMultiSelect(name, option) {
+    const current = props.modelValue[name] || [];
+    const idx = current.indexOf(option);
+    const updated = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, option];
+    updateField(name, updated);
+}
+
+const sortedFields = computed(() => [...props.fields].sort((a, b) => (a.position || 0) - (b.position || 0)));
+
+/**
+ * Evaluate whether a field should be visible based on conditions.
+ * Conditions can come from the `conditions` prop or from the field's own `conditions` property.
+ */
+function isFieldVisible(field) {
+    // Merge global conditions and field-level conditions
+    const allConditions = [
+        ...props.conditions.filter((c) => c.target_field === field.name || c.target_field === field.slug),
+        ...(field.conditions || []).filter((c) => c.target_field === field.name || c.target_field === field.slug),
+    ];
+
+    // If no conditions target this field, it's always visible
+    if (allConditions.length === 0) {
+        return true;
+    }
+
+    // All conditions must be met (AND logic)
+    return allConditions.every((condition) => {
+        const currentValue = props.modelValue[condition.field];
+
+        switch (condition.operator) {
+            case 'equals':
+                return String(currentValue || '') === String(condition.value || '');
+            case 'not_equals':
+                return String(currentValue || '') !== String(condition.value || '');
+            case 'contains':
+                return String(currentValue || '').includes(String(condition.value || ''));
+            case 'is_empty':
+                return (
+                    !currentValue || currentValue === '' || (Array.isArray(currentValue) && currentValue.length === 0)
+                );
+            case 'is_not_empty':
+                return (
+                    currentValue && currentValue !== '' && !(Array.isArray(currentValue) && currentValue.length === 0)
+                );
+            default:
+                return true;
+        }
+    });
+}
+</script>
+
+<template>
+    <div class="space-y-4">
+        <div v-for="field in sortedFields" v-show="isFieldVisible(field)" :key="field.id">
+            <label class="block text-sm font-medium text-neutral-300">
+                {{ field.label || field.name }}
+                <span v-if="field.required" class="text-rose-400">*</span>
+            </label>
+            <p v-if="field.description" class="mt-0.5 text-xs text-neutral-500">{{ field.description }}</p>
+
+            <!-- Text -->
+            <input
+                v-if="field.type === 'text'"
+                type="text"
+                :value="modelValue[field.name] || ''"
+                :placeholder="field.placeholder"
+                :required="field.required"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="updateField(field.name, $event.target.value)"
+            />
+
+            <!-- Textarea -->
+            <textarea
+                v-else-if="field.type === 'textarea'"
+                :value="modelValue[field.name] || ''"
+                :placeholder="field.placeholder"
+                :required="field.required"
+                rows="3"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="updateField(field.name, $event.target.value)"
+            ></textarea>
+
+            <!-- Number -->
+            <input
+                v-else-if="field.type === 'number'"
+                type="number"
+                :value="modelValue[field.name] || ''"
+                :placeholder="field.placeholder"
+                :required="field.required"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 placeholder-neutral-600 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="updateField(field.name, $event.target.value)"
+            />
+
+            <!-- Date -->
+            <input
+                v-else-if="field.type === 'date'"
+                type="date"
+                :value="modelValue[field.name] || ''"
+                :required="field.required"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @input="updateField(field.name, $event.target.value)"
+            />
+
+            <!-- Checkbox -->
+            <label v-else-if="field.type === 'checkbox'" class="mt-1 flex items-center gap-2">
+                <input
+                    type="checkbox"
+                    :checked="!!modelValue[field.name]"
+                    class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                    @change="updateField(field.name, $event.target.checked)"
+                />
+                <span class="text-sm text-neutral-300">{{ field.placeholder || 'Yes' }}</span>
+            </label>
+
+            <!-- Select -->
+            <select
+                v-else-if="field.type === 'select'"
+                :value="modelValue[field.name] || ''"
+                :required="field.required"
+                class="mt-1 w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-neutral-200 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"
+                @change="updateField(field.name, $event.target.value)"
+            >
+                <option value="" disabled class="text-neutral-500">{{ field.placeholder || 'Select...' }}</option>
+                <option v-for="opt in field.options" :key="opt" :value="opt">{{ opt }}</option>
+            </select>
+
+            <!-- Multi-select (checkboxes) -->
+            <div v-else-if="field.type === 'multi_select'" class="mt-1 space-y-1">
+                <label v-for="opt in field.options" :key="opt" class="flex items-center gap-2">
+                    <input
+                        type="checkbox"
+                        :checked="(modelValue[field.name] || []).includes(opt)"
+                        class="rounded border-white/20 bg-neutral-900 text-cyan-500 focus:ring-white/10"
+                        @change="toggleMultiSelect(field.name, opt)"
+                    />
+                    <span class="text-sm text-neutral-300">{{ opt }}</span>
+                </label>
+            </div>
+
+            <div v-if="errors[field.name]" class="mt-1 text-sm text-rose-400">{{ errors[field.name] }}</div>
+        </div>
+    </div>
+</template>