@cubis/foundry 0.3.83 → 0.3.84

package/workflows/workflows/agent-environment-setup/platforms/codex/skills/vuejs/examples/01-basic-usage.md

@@ -1,170 +0,0 @@
-# Example 01: Search Filter with defineModel and Pinia Store
-
-## Scenario
-
-Build a Vue 3.5 search filter component using `<script setup>`, `defineModel()` for two-way binding, Pinia for shared filter state, and computed properties for derived values.
-
-## Prompt
-
-> Create a Vue 3.5 SearchFilter component using script setup with defineModel for the search text, defineProps for categories, a Pinia store for filter state, and computed properties for the filtered result count. Emit a search event when submitted.
-
-## Expected Output
-
-### `stores/filter.ts`
-
-```typescript
-import { defineStore } from 'pinia';
-import { ref, computed } from 'vue';
-
-export interface FilterItem {
-  id: string;
-  name: string;
-  category: string;
-}
-
-export const useFilterStore = defineStore('filter', () => {
-  const items = ref<FilterItem[]>([]);
-  const searchQuery = ref('');
-  const selectedCategory = ref('all');
-
-  const filteredItems = computed(() => {
-    let result = items.value;
-
-    if (selectedCategory.value !== 'all') {
-      result = result.filter((item) => item.category === selectedCategory.value);
-    }
-
-    if (searchQuery.value.trim()) {
-      const query = searchQuery.value.toLowerCase();
-      result = result.filter((item) =>
-        item.name.toLowerCase().includes(query)
-      );
-    }
-
-    return result;
-  });
-
-  const filteredCount = computed(() => filteredItems.value.length);
-  const totalCount = computed(() => items.value.length);
-
-  function setItems(newItems: FilterItem[]) {
-    items.value = newItems;
-  }
-
-  function reset() {
-    searchQuery.value = '';
-    selectedCategory.value = 'all';
-  }
-
-  return {
-    items,
-    searchQuery,
-    selectedCategory,
-    filteredItems,
-    filteredCount,
-    totalCount,
-    setItems,
-    reset,
-  };
-});
-```
-
-### `components/SearchFilter.vue`
-
-```vue
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useFilterStore } from '@/stores/filter';
-
-interface Props {
-  categories: string[];
-  placeholder?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'Search...',
-});
-
-const emit = defineEmits<{
-  search: [query: string];
-}>();
-
-const searchText = defineModel<string>('searchText', { default: '' });
-const store = useFilterStore();
-
-const resultSummary = computed(() => {
-  return `${store.filteredCount} of ${store.totalCount} results`;
-});
-
-function handleSubmit() {
-  store.searchQuery = searchText.value;
-  emit('search', searchText.value);
-}
-
-function handleCategoryChange(event: Event) {
-  const target = event.target as HTMLSelectElement;
-  store.selectedCategory = target.value;
-}
-</script>
-
-<template>
-  <form @submit.prevent="handleSubmit" class="flex flex-col gap-3">
-    <div class="flex gap-2">
-      <input
-        v-model="searchText"
-        type="search"
-        :placeholder="props.placeholder"
-        aria-label="Search"
-        class="flex-1 border rounded px-3 py-2"
-      />
-      <select
-        :value="store.selectedCategory"
-        @change="handleCategoryChange"
-        aria-label="Category filter"
-        class="border rounded px-3 py-2"
-      >
-        <option value="all">All Categories</option>
-        <option
-          v-for="category in categories"
-          :key="category"
-          :value="category"
-        >
-          {{ category }}
-        </option>
-      </select>
-      <button
-        type="submit"
-        class="px-4 py-2 bg-blue-600 text-white rounded"
-      >
-        Search
-      </button>
-    </div>
-
-    <p class="text-sm text-gray-500" aria-live="polite">
-      {{ resultSummary }}
-    </p>
-  </form>
-</template>
-
-<style scoped>
-input:focus,
-select:focus {
-  outline: 2px solid #2563eb;
-  outline-offset: 1px;
-}
-</style>
-```
-
-## Key Patterns Demonstrated
-
-1. **`defineModel()` for two-way binding** -- `defineModel<string>('searchText')` generates the prop and `update:searchText` emit automatically. The parent can use `v-model:searchText="value"` without boilerplate.
-
-2. **`defineProps` with TypeScript generics** -- `defineProps<Props>()` provides full type inference in the template. `withDefaults()` adds default values while preserving types.
-
-3. **Pinia setup store** -- `defineStore('filter', () => { ... })` uses the Composition API syntax. Refs become state, computed become getters, and plain functions become actions.
-
-4. **`computed()` for derived values** -- `filteredCount`, `totalCount`, and `resultSummary` recompute only when their dependencies change, avoiding unnecessary recalculations.
-
-5. **Typed emits** -- `defineEmits<{ search: [query: string] }>()` provides compile-time type checking for event payloads, catching errors when the parent binds the wrong handler signature.
-
-6. **Scoped styles** -- `<style scoped>` ensures CSS rules apply only to this component, preventing style leaks across the application.

package/workflows/workflows/agent-environment-setup/platforms/codex/skills/vuejs/examples/02-advanced-usage.md

@@ -1,216 +0,0 @@
-# Example 02: Nuxt 3 Product Page with SSR and Auth Middleware
-
-## Scenario
-
-Build a Nuxt 3 product detail page with SSR data fetching using `useFetch`, route middleware for authentication, `definePageMeta` for route configuration, and typed route parameters.
-
-## Prompt
-
-> Implement a Nuxt 3 product detail page at pages/products/[id].vue with useFetch for SSR, an auth middleware that redirects unauthenticated users, definePageMeta for configuration, and typed route params. Handle loading and error states.
-
-## Expected Output
-
-### `middleware/auth.ts`
-
-```typescript
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { loggedIn } = useUserSession();
-
-  if (!loggedIn.value) {
-    return navigateTo('/login', {
-      redirectCode: 302,
-      external: false,
-    });
-  }
-});
-```
-
-### `composables/useUserSession.ts`
-
-```typescript
-interface UserSession {
-  loggedIn: Ref<boolean>;
-  user: Ref<{ id: string; name: string; email: string } | null>;
-}
-
-export function useUserSession(): UserSession {
-  const user = useState<{ id: string; name: string; email: string } | null>(
-    'user',
-    () => null
-  );
-
-  const loggedIn = computed(() => user.value !== null);
-
-  return { loggedIn, user };
-}
-```
-
-### `pages/products/[id].vue`
-
-```vue
-<script setup lang="ts">
-interface Product {
-  id: string;
-  name: string;
-  description: string;
-  price: number;
-  imageUrl: string;
-  category: string;
-  inStock: boolean;
-}
-
-definePageMeta({
-  middleware: 'auth',
-  validate: async (route) => {
-    return /^\d+$/.test(route.params.id as string);
-  },
-});
-
-const route = useRoute();
-const productId = computed(() => route.params.id as string);
-
-const {
-  data: product,
-  status,
-  error,
-  refresh,
-} = await useFetch<Product>(`/api/products/${productId.value}`, {
-  key: `product-${productId.value}`,
-  watch: [productId],
-});
-
-useHead({
-  title: () => product.value?.name ?? 'Product',
-  meta: [
-    {
-      name: 'description',
-      content: () => product.value?.description ?? '',
-    },
-  ],
-});
-</script>
-
-<template>
-  <div class="max-w-4xl mx-auto py-12 px-4">
-    <div v-if="status === 'pending'" class="animate-pulse">
-      <div class="h-8 bg-gray-200 rounded w-1/2 mb-4" />
-      <div class="flex gap-8">
-        <div class="w-96 h-96 bg-gray-200 rounded" />
-        <div class="flex-1 space-y-3">
-          <div class="h-6 bg-gray-200 rounded w-1/3" />
-          <div class="h-4 bg-gray-200 rounded" />
-          <div class="h-4 bg-gray-200 rounded w-5/6" />
-        </div>
-      </div>
-    </div>
-
-    <NuxtErrorBoundary v-else-if="error">
-      <template #error="{ error: err }">
-        <div class="text-center py-12">
-          <h2 class="text-2xl font-bold text-red-600">
-            Failed to load product
-          </h2>
-          <p class="text-gray-500 mt-2">{{ err.message }}</p>
-          <button
-            @click="refresh()"
-            class="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
-          >
-            Retry
-          </button>
-        </div>
-      </template>
-    </NuxtErrorBoundary>
-
-    <template v-else-if="product">
-      <nav class="text-sm text-gray-500 mb-6" aria-label="Breadcrumb">
-        <NuxtLink to="/products" class="hover:underline">Products</NuxtLink>
-        <span class="mx-2">/</span>
-        <span>{{ product.name }}</span>
-      </nav>
-
-      <div class="flex flex-col md:flex-row gap-8">
-        <img
-          :src="product.imageUrl"
-          :alt="product.name"
-          class="w-full md:w-96 h-96 object-cover rounded-lg"
-        />
-
-        <div class="flex-1">
-          <h1 class="text-3xl font-bold">{{ product.name }}</h1>
-          <p class="text-gray-500 mt-1">{{ product.category }}</p>
-
-          <p class="text-2xl font-semibold mt-4">
-            {{ formatPrice(product.price) }}
-          </p>
-
-          <p class="mt-4 text-gray-700 leading-relaxed">
-            {{ product.description }}
-          </p>
-
-          <div class="mt-6">
-            <span
-              v-if="product.inStock"
-              class="text-green-600 font-medium"
-            >
-              In Stock
-            </span>
-            <span v-else class="text-red-600 font-medium">
-              Out of Stock
-            </span>
-          </div>
-
-          <button
-            :disabled="!product.inStock"
-            class="mt-6 w-full md:w-auto px-8 py-3 bg-blue-600 text-white rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            Add to Cart
-          </button>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-function formatPrice(cents: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(cents / 100);
-}
-</script>
-```
-
-### `server/api/products/[id].get.ts`
-
-```typescript
-export default defineEventHandler(async (event) => {
-  const id = getRouterParam(event, 'id');
-
-  // Replace with your database query
-  const product = await $fetch(`https://api.example.com/products/${id}`);
-
-  if (!product) {
-    throw createError({
-      statusCode: 404,
-      statusMessage: 'Product not found',
-    });
-  }
-
-  return product;
-});
-```
-
-## Key Patterns Demonstrated
-
-1. **`useFetch` with SSR** -- `await useFetch()` in `<script setup>` runs on the server during SSR and deduplicates on the client. The `key` option ensures proper caching and the `watch` option re-fetches when params change.
-
-2. **`definePageMeta` with middleware** -- The `middleware: 'auth'` assignment runs the auth check before the page loads. The `validate` function rejects non-numeric IDs at the routing level, returning a 404 before any data fetching.
-
-3. **`defineNuxtRouteMiddleware`** -- The auth middleware checks session state and calls `navigateTo('/login')` for unauthenticated users. It runs on both server and client navigation.
-
-4. **Typed route params** -- `useRoute()` provides access to `params.id`. The `computed(() => route.params.id)` ensures reactivity when navigating between product pages.
-
-5. **`NuxtErrorBoundary`** -- Wraps the error state to display a retry button. The scoped slot receives the error object for displaying specific messages.
-
-6. **Server API route** -- `server/api/products/[id].get.ts` handles the API endpoint with Nitro, providing `createError` for proper HTTP error responses.

package/workflows/workflows/agent-environment-setup/platforms/codex/skills/vuejs/references/pinia.md

@@ -1,267 +0,0 @@
-# Pinia State Management Reference
-
-## Overview
-
-Pinia is the official state management library for Vue 3. It provides a simple, type-safe API with Vue DevTools integration, SSR support, and hot module replacement. Pinia replaces Vuex and eliminates the concept of mutations -- state changes are made directly or through actions.
-
-## Defining Stores
-
-### Setup Syntax (Recommended)
-
-The setup syntax uses the Composition API inside `defineStore`. Refs become state, computed become getters, and functions become actions.
-
-```typescript
-// stores/counter.ts
-import { defineStore } from 'pinia';
-import { ref, computed } from 'vue';
-
-export const useCounterStore = defineStore('counter', () => {
-  // State
-  const count = ref(0);
-  const history = ref<number[]>([]);
-
-  // Getters
-  const doubleCount = computed(() => count.value * 2);
-  const lastThree = computed(() => history.value.slice(-3));
-
-  // Actions
-  function increment() {
-    count.value++;
-    history.value.push(count.value);
-  }
-
-  function reset() {
-    count.value = 0;
-    history.value = [];
-  }
-
-  async function incrementAsync() {
-    await new Promise(resolve => setTimeout(resolve, 100));
-    increment();
-  }
-
-  return { count, history, doubleCount, lastThree, increment, reset, incrementAsync };
-});
-```
-
-### Options Syntax
-
-```typescript
-// stores/counter.ts
-import { defineStore } from 'pinia';
-
-export const useCounterStore = defineStore('counter', {
-  state: () => ({
-    count: 0,
-    history: [] as number[],
-  }),
-  getters: {
-    doubleCount: (state) => state.count * 2,
-    lastThree: (state) => state.history.slice(-3),
-  },
-  actions: {
-    increment() {
-      this.count++;
-      this.history.push(this.count);
-    },
-    reset() {
-      this.count = 0;
-      this.history = [];
-    },
-  },
-});
-```
-
-### Which Syntax to Use
-
-- **Setup syntax**: More flexible, works naturally with composables, better TypeScript inference
-- **Options syntax**: Familiar to Vuex users, simpler for small stores
-
-## Using Stores in Components
-
-```vue
-<script setup lang="ts">
-import { useCounterStore } from '@/stores/counter';
-import { storeToRefs } from 'pinia';
-
-const counterStore = useCounterStore();
-
-// Destructure reactive state with storeToRefs (preserves reactivity)
-const { count, doubleCount } = storeToRefs(counterStore);
-
-// Actions can be destructured directly (they don't need reactivity)
-const { increment, reset } = counterStore;
-</script>
-
-<template>
-  <p>Count: {{ count }} (Double: {{ doubleCount }})</p>
-  <button @click="increment">+1</button>
-  <button @click="reset">Reset</button>
-</template>
-```
-
-**Important**: Use `storeToRefs()` to destructure state and getters. Direct destructuring (`const { count } = store`) loses reactivity.
-
-## Store Composition
-
-Stores can use other stores:
-
-```typescript
-// stores/cart.ts
-import { defineStore } from 'pinia';
-import { useProductStore } from './product';
-import { ref, computed } from 'vue';
-
-export const useCartStore = defineStore('cart', () => {
-  const items = ref<{ productId: string; quantity: number }[]>([]);
-  const productStore = useProductStore();
-
-  const total = computed(() => {
-    return items.value.reduce((sum, item) => {
-      const product = productStore.getById(item.productId);
-      return sum + (product?.price ?? 0) * item.quantity;
-    }, 0);
-  });
-
-  function addItem(productId: string) {
-    const existing = items.value.find(i => i.productId === productId);
-    if (existing) {
-      existing.quantity++;
-    } else {
-      items.value.push({ productId, quantity: 1 });
-    }
-  }
-
-  return { items, total, addItem };
-});
-```
-
-## Persisting State
-
-Use the `pinia-plugin-persistedstate` plugin:
-
-```typescript
-// main.ts
-import { createPinia } from 'pinia';
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-
-const pinia = createPinia();
-pinia.use(piniaPluginPersistedstate);
-```
-
-```typescript
-// stores/settings.ts
-export const useSettingsStore = defineStore('settings', () => {
-  const theme = ref<'light' | 'dark'>('light');
-  const locale = ref('en');
-
-  return { theme, locale };
-}, {
-  persist: true, // Stores in localStorage under key 'settings'
-});
-```
-
-## $patch for Batch Updates
-
-```typescript
-const store = useCounterStore();
-
-// Partial patch
-store.$patch({ count: 10 });
-
-// Function patch (for arrays and complex updates)
-store.$patch((state) => {
-  state.count = 10;
-  state.history.push(10);
-});
-```
-
-## $subscribe for Watching Changes
-
-```typescript
-const store = useCounterStore();
-
-store.$subscribe((mutation, state) => {
-  console.log('Store changed:', mutation.type, mutation.storeId);
-  localStorage.setItem('counter', JSON.stringify(state));
-});
-```
-
-## $reset for Resetting State
-
-```typescript
-// Only works with Options syntax stores
-const store = useCounterStore();
-store.$reset(); // Resets to initial state
-```
-
-For Setup syntax stores, implement a manual `reset()` action.
-
-## SSR Considerations
-
-### Nuxt Integration
-
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['@pinia/nuxt'],
-});
-```
-
-Pinia is automatically available in Nuxt components -- no need to call `createPinia()`.
-
-### Hydration
-
-Pinia handles SSR hydration automatically. State set on the server during SSR is serialized and hydrated on the client without duplicate API calls.
-
-```typescript
-// In a Nuxt page or component
-const store = useProductStore();
-
-// This runs on the server during SSR
-// The state is serialized to HTML and hydrated on the client
-const { data } = await useFetch('/api/products');
-store.setProducts(data.value);
-```
-
-## Testing Stores
-
-```typescript
-// stores/__tests__/counter.test.ts
-import { describe, it, expect, beforeEach } from 'vitest';
-import { setActivePinia, createPinia } from 'pinia';
-import { useCounterStore } from '../counter';
-
-describe('Counter Store', () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
-  it('initializes with count 0', () => {
-    const store = useCounterStore();
-    expect(store.count).toBe(0);
-  });
-
-  it('increments count', () => {
-    const store = useCounterStore();
-    store.increment();
-    expect(store.count).toBe(1);
-    expect(store.history).toEqual([1]);
-  });
-
-  it('computes doubleCount', () => {
-    const store = useCounterStore();
-    store.increment();
-    store.increment();
-    expect(store.doubleCount).toBe(4);
-  });
-});
-```
-
-## Common Pitfalls
-
-1. **Destructuring state without `storeToRefs()`** -- Loses reactivity; the value becomes a plain snapshot
-2. **Circular store dependencies** -- Store A using Store B which uses Store A. Restructure to avoid cycles.
-3. **Calling `$reset()` on setup stores** -- Only works with options syntax. For setup stores, create a manual `reset()` action.
-4. **Large monolithic stores** -- Split stores by domain (auth, cart, products) for better maintainability and code splitting
-5. **Mutating state outside of actions** -- While technically possible, it makes debugging harder. Prefer actions for traceability in DevTools.