CEK v2.0 — Vuetify 4, typed hooks & server module, RPC procedures, question auto-wrap, tsdown

.changeset/config.json

@@ -7,5 +7,16 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": [
+    "tce-counter",
+    "tce-counter-manifest",
+    "tce-counter-edit",
+    "tce-counter-display",
+    "tce-counter-server",
+    "tce-question",
+    "tce-question-manifest",
+    "tce-question-edit",
+    "tce-question-display",
+    "tce-question-server"
+  ]
 }

example/.devcontainer/devcontainer.json → .devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
-  "name": "Tailor - Content Element",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+  "name": "Tailor XT — Counter example",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:4-24-trixie",
   "features": {
     "ghcr.io/devcontainers-extra/features/pnpm:2": {},
     "ghcr.io/devcontainers/features/github-cli:1": {}
@@ -24,8 +24,8 @@
       "onAutoForward": "silent"
     }
   },
-  "postCreateCommand": "pnpm install --frozen-lockfile && pnpm build",
-  "postAttachCommand": "/bin/bash .devcontainer/setup.sh && pnpm dev",
+  "postCreateCommand": "pnpm install --frozen-lockfile && pnpm build && pnpm -C examples/counter run build",
+  "postAttachCommand": "/bin/bash .devcontainer/setup.sh && pnpm -C examples/counter run dev",
   "customizations": {
     "vscode": {
       "settings": {

.devcontainer/question/devcontainer.json

@@ -0,0 +1,62 @@
+{
+  "name": "Tailor XT — Question example",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:4-24-trixie",
+  "features": {
+    "ghcr.io/devcontainers-extra/features/pnpm:2": {},
+    "ghcr.io/devcontainers/features/github-cli:1": {}
+  },
+  "forwardPorts": [8080, 8010, 8020, 8030],
+  "portsAttributes": {
+    "8080": {
+      "label": "Content Element Kit preview",
+      "onAutoForward": "notify"
+    },
+    "8010": {
+      "label": "Edit runtime",
+      "onAutoForward": "silent"
+    },
+    "8020": {
+      "label": "Display runtime",
+      "onAutoForward": "silent"
+    },
+    "8030": {
+      "label": "Server runtime",
+      "onAutoForward": "silent"
+    }
+  },
+  "postCreateCommand": "pnpm install --frozen-lockfile && pnpm build && pnpm -C examples/question run build",
+  "postAttachCommand": "/bin/bash .devcontainer/setup.sh && pnpm -C examples/question run dev",
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "editor.formatOnSave": true,
+        "eslint.enable": true,
+        "prettier.requireConfig": true,
+        "files.exclude": {
+          "**/.pnpm": true,
+          "**/node_modules": true
+        },
+        "workbench.colorTheme": "One Dark Pro",
+        "oneDarkPro.editorFontLigatures": true,
+        "oneDarkPro.bold": true,
+        "oneDarkPro.italic": true,
+        "editor.fontSize": 20,
+        "editor.fontFamily": "'Dank Mono', 'Fira Code', monospace",
+        "editor.fontLigatures": true
+      },
+      "extensions": [
+        "akamud.vscode-theme-onedark",
+        "zhuangtongfa.Material-theme",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "mikestead.dotenv",
+        "sainoba.px-to-rem",
+        "stylelint.vscode-stylelint",
+        "zhuangtongfa.material-theme",
+        "EditorConfig.EditorConfig",
+        "Vue.volar",
+        "GitHub.copilot"
+      ]
+    }
+  }
+}

CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+### v2.0.0 2026-04-17
+
+#### Breaking Changes
+- Migrated to Vuetify 4 (MD3 typography classes, updated component API,
+  theme configuration). All content element packages using Vuetify components
+  need to be updated.
+- Question auto-wrap — `QuestionCard` and `QuestionContainer` are now applied
+  automatically by the runtime. Elements must remove manual wrapping.
+- Build toolchain migrated from tsup to tsdown.
+- `isolatedDeclarations` enabled — all exported symbols require explicit type
+  annotations.
+- `StorageApi.upload` now takes a native `File` instead of a `FormData`
+  payload. The `UploadFormData` and `UploadFormFieldname` type exports have
+  been removed.
+- `mocks` manifest type extracted to a standalone `ElementMocks` interface;
+  `DisplayContext` relocated to `element-interfaces`.
+- TypeScript 6, Vite 8.
+
+#### Features
+- Typed hook signatures (`ElementHook`, `BeforeDisplayHook`,
+  `OnUserInteractionHook`, `ProcedureHandler`).
+- `ServerModule` and `HookMap` types for typed server package default exports.
+- `AiConfig` type (replaces inline `OpenAISchema` casting pattern).
+- RPC procedures — custom server-side methods callable from Edit components
+  via the injected `$rpc` function.
+- `isEmpty` manifest function for required element validation.
+- `showFeedback` manifest field to control question feedback section visibility.
+- Question autosave support.
+- `mocks.referencesData` manifest field for custom mock linked element data.
+- CEK theme testing — ThemeDialog in edit and display runtimes.
+- `TailorAssetInput` global component (consolidated from separate upload
+  components).
+- `TailorElementPlaceholder` global component.
+- `TailorFileInput` global component for file uploads in the edit runtime.
+- New `question` example element alongside `counter`; examples relocated to
+  `examples/` and `counter` is now the default boot target.
+- Expanded E2E testing utilities (`@tailor-cms/cek-e2e`) with API helpers and
+  additional page object models.
+- Accessibility improvements.
+
+#### Other
+- `moduleResolution: "bundler"` across all tsconfigs.
+- Bumped all dependencies to the latest versions.
+
 ### v1.0.0 2024-02-07
 
 #### Changes

README.md

@@ -1,3 +1,47 @@
-# `xt` Tailor extensions kit
+# Content Element Kit
+
+Development framework for building [Tailor CMS](https://github.com/tailor-cms/author) content elements in isolation.
+
+Provides a 4-runtime architecture for authoring, displaying, and testing
+content elements:
+
+- **Edit** — Authoring runtime emulating the Tailor CMS environment
+- **Display** — End-user runtime emulating the delivery (LMS) environment
+- **Server** — Server runtime for hooks, procedures, and storage
+- **Preview** — Inspector UI combining all runtimes
+
+## Packages
+
+| Package | Description |
+|---|---|
+| `@tailor-cms/cek-common` | Shared types, API client, WebSocket utils |
+| `@tailor-cms/tce-edit-runtime` | Edit runtime |
+| `@tailor-cms/tce-display-runtime` | Display runtime |
+| `@tailor-cms/tce-server-runtime` | Server runtime |
+| `@tailor-cms/tce-preview-runtime` | Preview inspector UI |
+| `@tailor-cms/tce-boot` | Dev orchestrator |
+| `@tailor-cms/cek-e2e` | E2E testing utilities |
+| `@tailor-cms/eslint-config` | Shared ESLint config |
+
+## Documentation
+
+See the [documentation site](https://tailor-cms.github.io/xt/) for
+installation, usage, and API reference.
+
+## Quick start
+
+```bash
+pnpm install
+pnpm dev
+```
+
+`pnpm dev` opens an interactive picker for the bundled [examples/](examples/),
+then boots the selection across all four runtimes — accessible from the
+Preview inspector (default `localhost:8080`).
+
+To skip the picker, pass the example name directly:
+
+```bash
+pnpm dev counter
+```
 
-Provides base runtime for developing Tailor teaching elements.

docs/.vitepress/config.mts

@@ -19,7 +19,7 @@ export default defineConfig({
           { text: "Introduction", link: "/introduction" },
           { text: "Installation", link: "/installation" },
           { text: "Example", link: "/example" },
-          { text: "Environment variables", link: "/enviroment-variables" },
+          { text: "Environment variables", link: "/environment-variables" },
         ],
       },
       {

docs/ai.md

@@ -21,9 +21,9 @@ AI configuration is defined by the following:
 Here is an example configuration for a counter element:
 
 ```ts
-import { OpenAISchema } from '@tailor-cms/cek-common';
+import type { AiConfig } from '@tailor-cms/cek-common';
 
-export const ai = {
+export const ai: AiConfig = {
   Schema: {
     type: 'json_schema',
     name: 'ce_counter',
@@ -36,7 +36,7 @@ export const ai = {
       required: ['count', 'description'],
       additionalProperties: false,
     },
-  } as OpenAISchema,
+  },
   getPrompt: () => `
     Generate counter content element as an object with the following
     properties: { "description": "", "count": 0 }.

docs/display-package.md

@@ -2,7 +2,7 @@
 
 Display package is the subpackage located under `packages/display` exposing
 `Vue 3` component needed for the Content Element `end-user` rendering. The
-component recieves authored values as props. Here is an example of a Display
+component receives authored values as props. Here is an example of a Display
 component for the Simple Counter Content Element from the Edit package section:
 
 \
@@ -36,16 +36,15 @@ is a reserved property).
 
 In the example above, we use the `userState` prop to display the last time the
 user has seen the element. In order to achieve that, we need a way to report
-user activity from the `Display` component. The specification implements
-`interaction` event, which can be used to report user activity to the `end-user`
-system. Emitting `interaction` event will result in `onUserInteraction` server
-hook being called, where one can implement user state handling and other
-interaction-specific handling. For more details on this, visit section
-on [user-state hooks](./server-package#user-state-hooks).
+user activity from the `Display` component.
 
-\
-Here is a simple example of element submitting interaction event for backend to
-process:
+### Non-question elements
+
+Non-question Display components emit the `interaction` event to report user
+activity to the end-user system. Emitting `interaction` triggers the
+`onUserInteraction` server hook, where you can implement user state handling
+and other interaction-specific logic. For more details, visit the section
+on [user-state hooks](./server-package#user-state-hooks).
 
 \
 `Display.vue`
@@ -61,15 +60,68 @@ process:
 import { Element } from 'tce-manifest';
 
 const props = defineProps<{ element: Element; userState: any }>();
-const emit = defineEmits(['interaction']);
+const emit = defineEmits<{ interaction: [data: any] }>();
 
 const submit = () => emit('interaction', { myInteractionData: 'example' });
 </script>
 ```
 
-:::tip State persistance and user event handling
+### Question elements
+
+Question Display components emit `user-input` instead of `interaction`. The
+framework auto-wraps question Display components inside a `QuestionForm`
+which provides the standard question layout (prompt, hint, submit/retry
+controls, feedback). The element only provides the answer-specific UI.
+
+The `QuestionForm` captures `user-input` events from the inner component,
+validates the form on submit, and emits `interaction` to the runtime — which
+triggers the `onUserInteraction` server hook.
+
+\
+`Display.vue`
+```vue
+<template>
+  <div>
+    <VRadioGroup v-model="selectedAnswer">
+      <VRadio
+        v-for="(answer, i) in element.data.answers"
+        :key="i"
+        :label="answer"
+        :value="i"
+        :disabled="userState?.isSubmitted"
+      />
+    </VRadioGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { Element } from 'tce-manifest';
+
+const props = defineProps<{ element: Element; userState: any }>();
+const emit = defineEmits<{ 'user-input': [data: any] }>();
+
+const selectedAnswer = ref(props.userState?.response ?? null);
+
+watch(selectedAnswer, (val) => {
+  if (val !== null) emit('user-input', { response: val });
+});
+</script>
+```
+
+Note: The element does **not** include a submit button — the `QuestionForm`
+provides submit/retry controls and manages the submission lifecycle.
+
+### Event flow summary
+
+| Element Type | Component Emits | Container | Runtime Receives |
+|-------------|----------------|-----------|-----------------|
+| Non-question | `interaction` | — | `interaction` → `onUserInteraction` hook |
+| Question | `user-input` | QuestionForm → `interaction` | `interaction` → `onUserInteraction` hook |
+
+:::tip State persistence and user event handling
 It is up to the `end-user`/`target system` to define mechanisms for end-user
-state persistance or any other additional behaviour.
+state persistence or any other additional behaviour.
 :::
 
 ## Composite Elements