Phase 3: Typed Vue components in scripts-v2/

Migrate all shared components to TypeScript SFCs with script setup
lang=ts. 72 files, 7144 lines, zero any types.

- components/base/ (42 files): Button, Input, Textarea, Checkbox,
  Radio, Switch, Badge, Card, Modal, Dialog, Dropdown, DatePicker,
  TimePicker, Money, FileUploader, Select, Icon, Loader, Multiselect,
  TabGroup, Wizard, CustomerSelect, ItemSelect, CustomInput, alerts,
  status badges (Invoice/Estimate/Paid/RecurringInvoice), List/ListItem
- components/table/ (3 files): DataTable, TablePagination
- components/form/ (4 files): FormGroup, FormGrid, SwitchSection
- components/layout/ (11 files): Page, PageHeader, Breadcrumb,
  FilterWrapper, EmptyPlaceholder, ContentPlaceholders, SettingCard
- components/editor/ (2 files): RichEditor with Tiptap
- components/charts/ (2 files): LineChart with Chart.js
- components/notifications/ (3 files): NotificationRoot, NotificationItem
- components/icons/ (2 files): MainLogo

All use defineProps<Props>(), defineEmits<Emits>(), typed refs,
and import domain types from types/domain.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

resources/scripts-v2/components/base/BaseModal.vue

@@ -0,0 +1,147 @@
+<template>
+  <Teleport to="body">
+    <TransitionRoot appear as="template" :show="show">
+      <Dialog
+        as="div"
+        static
+        class="fixed inset-0 z-20 overflow-y-auto"
+        :open="show"
+        @close="$emit('close')"
+      >
+        <div
+          class="
+            flex
+            items-end
+            justify-center
+            min-h-screen
+            px-4
+            text-center
+            sm:block sm:px-2
+          "
+        >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100"
+            leave-to="opacity-0"
+          >
+            <DialogOverlay
+              class="fixed inset-0 transition-opacity bg-gray-700/25"
+            />
+          </TransitionChild>
+
+          <!-- This element is to trick the browser into centering the modal contents. -->
+          <span
+            class="hidden sm:inline-block sm:align-middle sm:h-screen"
+            aria-hidden="true"
+            >&#8203;</span
+          >
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <div
+              :class="`inline-block
+              align-middle
+              bg-surface/80 backdrop-blur-2xl
+              rounded-xl border border-white/15
+              text-left
+              overflow-hidden
+              relative
+              shadow-xl
+              transition-all
+              my-4
+              ${modalSize}
+              sm:w-full
+              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+            >
+              <div
+                v-if="hasHeaderSlot"
+                class="
+                  flex
+                  items-center
+                  justify-between
+                  px-6
+                  py-4
+                  text-lg
+                  font-medium
+                  text-heading
+                  border-b border-line-default border-solid
+                "
+              >
+                <slot name="header" />
+              </div>
+
+              <slot />
+
+              <slot name="footer" />
+            </div>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useModalStore } from '@/scripts/stores/modal'
+import { computed, watchEffect, useSlots } from 'vue'
+import {
+  Dialog,
+  DialogOverlay,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
+
+interface Props {
+  show?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: false,
+})
+
+const slots = useSlots()
+
+interface Emits {
+  (e: 'close'): void
+  (e: 'open', value: boolean): void
+}
+
+const emit = defineEmits<Emits>()
+
+const modalStore = useModalStore()
+
+watchEffect(() => {
+  if (props.show) {
+    emit('open', props.show)
+  }
+})
+
+const modalSize = computed<string>(() => {
+  const size = modalStore.size
+  switch (size) {
+    case 'sm':
+      return 'sm:max-w-2xl w-full'
+    case 'md':
+      return 'sm:max-w-4xl w-full'
+    case 'lg':
+      return 'sm:max-w-6xl w-full'
+
+    default:
+      return 'sm:max-w-2xl w-full'
+  }
+})
+
+const hasHeaderSlot = computed<boolean>(() => {
+  return !!slots.header
+})
+</script>