@cat-factory/app 0.315.3 → 0.315.4

package/app/components/tasks/TaskImportModal.vue

@@ -19,6 +19,7 @@ import ContextIssuePicker from '~/components/tasks/ContextIssuePicker.vue'
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -120,7 +121,7 @@ async function doSpawnEpic() {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="title">
+  <AppModal size="form" v-model:open="open" :title="title">
     <template #title>
       <IntegrationBackTitle :title="title" @back="back" />
     </template>
@@ -215,5 +216,5 @@ async function doSpawnEpic() {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/tasks/TaskSourceConnectModal.vue

@@ -12,6 +12,7 @@
 // available (Jira connected / the GitHub App installed) — there is nothing to offer
 // before that.
 import IntegrationBackTitle from '~/components/layout/IntegrationBackTitle.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
@@ -116,7 +117,7 @@ async function toggleEnabled(enabled: boolean) {
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="descriptor?.label ?? t('tasks.connect.title')">
+  <AppModal size="form" v-model:open="open" :title="descriptor?.label ?? t('tasks.connect.title')">
     <template #title>
       <IntegrationBackTitle :title="descriptor?.label ?? t('tasks.connect.title')" @back="back" />
     </template>
@@ -212,5 +213,5 @@ async function toggleEnabled(enabled: boolean) {
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/theme/ThemeImportModal.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { useThemeStore } from '~/stores/theme'
 import { decodeThemeLink, type ThemeLinkDecodeResult } from '~/utils/theme/link'
+import AppModal from '~/components/common/AppModal.vue'
 
 // Import a theme built in the Nuxt UI theme editor (https://ui.nuxt.com/theme): the user pastes
 // the editor's share link (or the raw document JSON), names it, and the theme is stored in this
@@ -60,7 +61,8 @@ async function submit() {
 </script>
 
 <template>
-  <UModal
+  <AppModal
+    size="prompt"
     v-model:open="open"
     :title="t('appearance.import.title')"
     :description="t('appearance.import.description')"
@@ -111,5 +113,5 @@ async function submit() {
         </div>
       </UForm>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/tutorial/TutorialCatalogue.vue

@@ -14,6 +14,7 @@ import { buildCatalogueRows, summarizeProgress } from './TutorialCatalogue.logic
 import type { TutorialCatalogueRow } from './TutorialCatalogue.logic'
 import { TUTORIAL_ACTION_KEYS, TUTORIAL_STATUS_KEYS } from '~/utils/tutorial'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const tutorial = useTutorialStore()
@@ -51,11 +52,11 @@ const statusColor = (row: TutorialCatalogueRow) =>
 </script>
 
 <template>
-  <UModal
+  <AppModal
+    size="form"
     v-model:open="open"
     :title="t('tutorial.catalogue.title')"
     :description="t('tutorial.catalogue.intro')"
-    :ui="{ content: 'max-w-2xl' }"
   >
     <template #body>
       <div class="space-y-4" data-testid="tutorial-catalogue">
@@ -162,5 +163,5 @@ const statusColor = (row: TutorialCatalogueRow) =>
         </UButton>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/components/tutorial/TutorialPrompt.vue

@@ -15,6 +15,7 @@
 // prompt never auto-opens again), while closing without answering defers to next launch.
 import { TUTORIAL_ACTION_KEYS } from '~/utils/tutorial'
 import EmptyState from '~/components/common/EmptyState.vue'
+import AppModal from '~/components/common/AppModal.vue'
 
 const { t } = useI18n()
 const tutorial = useTutorialStore()
@@ -34,7 +35,7 @@ const undecided = computed(() => tutorial.decision === null)
 </script>
 
 <template>
-  <UModal v-model:open="open" :title="t('tutorial.prompt.title')" :ui="{ content: 'max-w-lg' }">
+  <AppModal size="prompt" v-model:open="open" :title="t('tutorial.prompt.title')">
     <template #body>
       <!-- NOTE for spec authors: this marks the modal's BODY, so it is the "prompt is
            showing" signal, not a container for everything in the prompt. The footer's
@@ -125,5 +126,5 @@ const undecided = computed(() => tutorial.decision === null)
         </div>
       </div>
     </template>
-  </UModal>
+  </AppModal>
 </template>

package/app/utils/overlaySize.ts

@@ -0,0 +1,22 @@
+/**
+ * The named overlay widths (#2251). A dialog names the KIND of content it holds, not a width:
+ *
+ * - `prompt` (448px): a confirmation, a decision, a short read, or a dialog with one or two fields.
+ * - `form` (576px): a form, a list or a hub to work through.
+ * - `wide` (672px): cards that each carry a paragraph and an action beside it, a row of tabs over
+ *   a form, or three pickers side by side (the AI provider onboarding, the vendor credentials, the
+ *   setup checklist, describe new work).
+ *
+ * A workbench surface (the sandbox, the agent prompt editor, the libraries
+ * and settings panels) is wider than `wide` on purpose and keeps its literal width until #2359
+ * decides its shell; it says so with a `workbench-width-ok:` comment that
+ * `scripts/check-frontend-geometry.mjs` reads. A `Record` over the union, so a new size fails to
+ * compile until it is mapped.
+ */
+export type OverlaySize = 'prompt' | 'form' | 'wide'
+
+export const OVERLAY_WIDTH_CLASS: Record<OverlaySize, string> = {
+  prompt: 'max-w-md',
+  form: 'max-w-xl',
+  wide: 'max-w-2xl',
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.315.3",
+  "version": "0.315.4",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",