feat(v1): add phase 1 architecture

Author: TotomInc

.cursor/hooks/state/continual-learning.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "lastRunAtMs": 0,
+  "turnsSinceLastRun": 2,
+  "lastTranscriptMtimeMs": null,
+  "lastProcessedGenerationId": "6fb3e935-f232-4e58-817a-1498ba6031d6",
+  "trialStartedAtMs": null
+}

src-v1/SelectRoot.spec.ts

@@ -0,0 +1,124 @@
+import type { SelectModelValue } from "./types/model";
+
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import { defineComponent, h, ref } from "vue";
+
+import SelectClear from "./primitives/SelectClear.vue";
+import SelectListbox from "./primitives/SelectListbox.vue";
+import SelectOption from "./primitives/SelectOption.vue";
+import SelectPopover from "./primitives/SelectPopover.vue";
+import SelectRoot from "./primitives/SelectRoot.vue";
+import SelectTrigger from "./primitives/SelectTrigger.vue";
+import SelectValue from "./primitives/SelectValue.vue";
+
+const options = [
+  { label: "JavaScript", value: "js" },
+  { label: "TypeScript", value: "ts" },
+] as const;
+
+function mountPrimitiveSelect(props: {
+  modelValue?: string | null;
+  clearable?: boolean;
+  multiple?: boolean;
+} = {}) {
+  const model = ref<SelectModelValue<string>>(props.modelValue ?? null);
+
+  const wrapper = mount(SelectRoot<string>, {
+    props: {
+      "modelValue": props.modelValue ?? null,
+      "clearable": props.clearable ?? false,
+      "multiple": props.multiple ?? false,
+      "onUpdate:modelValue": (value: SelectModelValue<string>) => {
+        model.value = value;
+        wrapper.setProps({ modelValue: value });
+      },
+    },
+    slots: {
+      default: () => [
+        h(SelectTrigger, null, {
+          default: () => [
+            h(SelectValue, { placeholder: "Pick a language" }),
+            h(SelectClear),
+          ],
+        }),
+        h(SelectPopover, null, {
+          default: () => h(SelectListbox, null, {
+            default: () => options.map((option) =>
+              h(SelectOption, {
+                value: option.value,
+                label: option.label,
+              }),
+            ),
+          }),
+        }),
+      ],
+    },
+  });
+
+  return { wrapper, model };
+}
+
+describe("v1 SelectRoot foundation", () => {
+  it("renders the root shell and provides context to child primitives", () => {
+    const { wrapper } = mountPrimitiveSelect();
+
+    expect(wrapper.find("[data-v1-select-root]").exists()).toBe(true);
+    expect(wrapper.find("[data-v1-select-trigger]").exists()).toBe(true);
+    expect(wrapper.find("[data-v1-select-value]").text()).toBe("Pick a language");
+  });
+
+  it("toggles menu open state from the trigger", async () => {
+    const { wrapper } = mountPrimitiveSelect();
+
+    const trigger = wrapper.get("[data-v1-select-trigger]");
+
+    expect(trigger.attributes("aria-expanded")).toBe("false");
+    expect(wrapper.find("[data-v1-select-popover]").exists()).toBe(false);
+
+    await trigger.trigger("click");
+
+    expect(trigger.attributes("aria-expanded")).toBe("true");
+    expect(wrapper.find("[data-v1-select-popover]").exists()).toBe(true);
+    expect(wrapper.findAll("[data-v1-select-option]")).toHaveLength(2);
+  });
+
+  it("updates v-model on single selection and closes the menu", async () => {
+    const { wrapper, model } = mountPrimitiveSelect();
+
+    await wrapper.get("[data-v1-select-trigger]").trigger("click");
+    await wrapper.get("[data-v1-select-option][data-value='ts']").trigger("click");
+
+    expect(model.value).toBe("ts");
+    expect(wrapper.get("[data-v1-select-value]").text()).toBe("ts");
+    expect(wrapper.find("[data-v1-select-popover]").exists()).toBe(false);
+  });
+
+  it("registers declarative options in the collection", async () => {
+    const { wrapper } = mountPrimitiveSelect();
+
+    await wrapper.get("[data-v1-select-trigger]").trigger("click");
+
+    expect(wrapper.find("[data-v1-select-no-options]").exists()).toBe(false);
+    expect(wrapper.findAll("[role='option']")).toHaveLength(2);
+  });
+
+  it("clears the model when clearable is enabled", async () => {
+    const { wrapper, model } = mountPrimitiveSelect({ modelValue: "js", clearable: true });
+
+    expect(wrapper.find("[data-v1-select-clear]").exists()).toBe(true);
+
+    await wrapper.get("[data-v1-select-clear]").trigger("click");
+
+    expect(model.value).toBeNull();
+    expect(wrapper.get("[data-v1-select-value]").text()).toBe("Pick a language");
+  });
+
+  it("throws when a primitive is used outside SelectRoot", () => {
+    const OrphanTrigger = defineComponent({
+      render: () => h(SelectTrigger),
+    });
+
+    expect(() => mount(OrphanTrigger)).toThrow("injectSelectContext must be used within SelectRoot");
+  });
+});

src-v1/assembled/Select.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts" generic="OptionValue extends string | number = string">
+import type { SelectModelValue } from "@v1/types/model";
+import type { SelectOption as SelectOptionData } from "@v1/types/option";
+
+import SelectClear from "@v1/primitives/SelectClear.vue";
+import SelectIndicator from "@v1/primitives/SelectIndicator.vue";
+import SelectInput from "@v1/primitives/SelectInput.vue";
+import SelectListbox from "@v1/primitives/SelectListbox.vue";
+import SelectNoOptions from "@v1/primitives/SelectNoOptions.vue";
+import SelectOptionItem from "@v1/primitives/SelectOption.vue";
+import SelectPopover from "@v1/primitives/SelectPopover.vue";
+import SelectRoot from "@v1/primitives/SelectRoot.vue";
+import SelectTrigger from "@v1/primitives/SelectTrigger.vue";
+import SelectValue from "@v1/primitives/SelectValue.vue";
+
+type AssembledSelectProps<OptionValue> = {
+  options: SelectOptionData<OptionValue>[];
+  placeholder?: string;
+  multiple?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+};
+
+withDefaults(defineProps<AssembledSelectProps<OptionValue>>(), {
+  multiple: false,
+  searchable: false,
+  clearable: false,
+  disabled: false,
+  loading: false,
+});
+
+const model = defineModel<SelectModelValue<OptionValue>>({ default: null });
+</script>
+
+<template>
+  <SelectRoot
+    v-model="model"
+    :multiple="multiple"
+    :searchable="searchable"
+    :clearable="clearable"
+    :disabled="disabled"
+    :loading="loading"
+    :options="options"
+    data-v1-assembled-select
+  >
+    <SelectTrigger>
+      <SelectValue :placeholder="placeholder" />
+      <SelectIndicator />
+      <SelectClear />
+    </SelectTrigger>
+
+    <SelectPopover>
+      <SelectInput />
+      <SelectListbox>
+        <SelectNoOptions />
+        <SelectOptionItem
+          v-for="option in options"
+          :key="String(option.value)"
+          :value="option.value"
+          :label="option.label"
+          :disabled="option.disabled"
+        />
+      </SelectListbox>
+    </SelectPopover>
+  </SelectRoot>
+</template>

src-v1/composables/useSelectCollection.ts

@@ -0,0 +1,28 @@
+import { computed, shallowRef } from "vue";
+
+export type RegisteredOption<Value> = {
+  id: string;
+  value: Value;
+  label: string;
+  disabled: boolean;
+};
+
+export function useSelectCollection<Value>() {
+  const registry = shallowRef(new Map<string, RegisteredOption<Value>>());
+
+  const register = (option: RegisteredOption<Value>) => {
+    registry.value.set(option.id, option);
+  };
+
+  const unregister = (id: string) => {
+    registry.value.delete(id);
+  };
+
+  const registeredOptions = computed(() => [...registry.value.values()]);
+
+  return {
+    register,
+    unregister,
+    registeredOptions,
+  };
+}

src-v1/composables/useSelectKeyboard.ts

@@ -0,0 +1,13 @@
+import type { SelectContext } from "../lib/context";
+
+type UseSelectKeyboardParams<OptionValue> = {
+  context: SelectContext<OptionValue>;
+};
+
+/**
+ * Keyboard navigation for the select collection.
+ * Full Arrow/Enter/Escape handling lands in a later phase.
+ */
+export function useSelectKeyboard<OptionValue>(_params: UseSelectKeyboardParams<OptionValue>) {
+  return {};
+}

src-v1/composables/useSelectState.ts

@@ -0,0 +1,109 @@
+import type { Ref } from "vue";
+import type { SelectContext } from "../lib/context";
+import type { SelectModelValue } from "../types/model";
+import type { useSelectCollection } from "./useSelectCollection";
+
+import { ref } from "vue";
+
+type UseSelectStateParams<OptionValue> = {
+  modelValue: Ref<SelectModelValue<OptionValue>>;
+  multiple: Ref<boolean>;
+  disabled: Ref<boolean>;
+  searchable: Ref<boolean>;
+  clearable: Ref<boolean>;
+  loading: Ref<boolean>;
+  collection: ReturnType<typeof useSelectCollection<OptionValue>>;
+};
+
+export function useSelectState<OptionValue>(params: UseSelectStateParams<OptionValue>) {
+  const isOpen = ref(false);
+  const searchValue = ref("");
+  const activeOptionId = ref<string | null>(null);
+
+  const open = () => {
+    if (params.disabled.value) {
+      return;
+    }
+
+    isOpen.value = true;
+  };
+
+  const close = () => {
+    isOpen.value = false;
+    searchValue.value = "";
+    activeOptionId.value = null;
+  };
+
+  const toggle = () => {
+    if (isOpen.value) {
+      close();
+      return;
+    }
+
+    open();
+  };
+
+  const select = (value: OptionValue) => {
+    if (params.disabled.value) {
+      return;
+    }
+
+    if (params.multiple.value) {
+      const current = Array.isArray(params.modelValue.value) ? params.modelValue.value : [];
+      const isAlreadySelected = current.includes(value);
+
+      params.modelValue.value = isAlreadySelected
+        ? current.filter((item) => item !== value)
+        : [...current, value];
+
+      return;
+    }
+
+    params.modelValue.value = value;
+    close();
+  };
+
+  const deselect = (value: OptionValue) => {
+    if (!params.multiple.value) {
+      return;
+    }
+
+    const current = Array.isArray(params.modelValue.value) ? params.modelValue.value : [];
+
+    params.modelValue.value = current.filter((item) => item !== value);
+  };
+
+  const clear = () => {
+    if (!params.clearable.value || params.disabled.value) {
+      return;
+    }
+
+    params.modelValue.value = params.multiple.value ? [] : null;
+  };
+
+  const context: SelectContext<OptionValue> = {
+    modelValue: params.modelValue,
+    isOpen,
+    searchValue,
+    multiple: params.multiple,
+    disabled: params.disabled,
+    searchable: params.searchable,
+    clearable: params.clearable,
+    loading: params.loading,
+    activeOptionId,
+    registeredOptions: params.collection.registeredOptions,
+    open,
+    close,
+    toggle,
+    select,
+    deselect,
+    clear,
+    registerOption: params.collection.register,
+    unregisterOption: params.collection.unregister,
+    setActiveOptionId: (id) => {
+      activeOptionId.value = id;
+    },
+  };
+
+  return { context };
+}

src-v1/index.spec.ts

@@ -0,0 +1,30 @@
+import type { SelectModelValue, SelectOptionData } from "./index";
+
+import { describe, expect, it } from "vitest";
+import {
+  Select,
+
+  SelectOption,
+
+  SelectRoot,
+} from "./index";
+
+describe("src-v1 internal exports", () => {
+  it("exports the assembled Select and primitive components", () => {
+    expect(Select).toBeTruthy();
+    expect(SelectRoot).toBeTruthy();
+    expect(SelectOption).toBeTruthy();
+  });
+
+  it("exports v1 option and model types", () => {
+    const option: SelectOptionData<string> = {
+      label: "TypeScript",
+      value: "ts",
+    };
+
+    const model: SelectModelValue<string> = option.value;
+
+    expect(option.label).toBe("TypeScript");
+    expect(model).toBe("ts");
+  });
+});