@nyuccl/smile 0.2.0-beta.0

package/dist/runtime/components/dev/console/ConsoleLogPanel.vue

@@ -0,0 +1,227 @@
+<script setup>
+import { computed } from "vue";
+const api = useAPI();
+const log = useLog();
+const height_pct = computed(() => `${api.store.dev.consoleBarHeight - 55}px`);
+function filter_log(msg) {
+  const search_match = msg.message.toLowerCase().includes(api.store.dev.searchParams.toLowerCase());
+  let type_match = true;
+  switch (api.store.dev.logFilter) {
+    case "All":
+      break;
+    case "Debug only":
+      type_match = msg.type === "debug";
+      break;
+    case "Warnings and Errors only":
+      type_match = msg.type === "warn" || msg.type === "error";
+      break;
+    case "Warnings only":
+      type_match = msg.type === "warn";
+      break;
+    case "Errors only":
+      type_match = msg.type === "error";
+      break;
+  }
+  return search_match && type_match;
+}
+function getBgClass(msg) {
+  switch (msg.type) {
+    case "log":
+      return "bg-background";
+    case "warn":
+      return "bg-yellow-100";
+    case "error":
+      return "bg-red-100";
+    case "debug":
+      return "bg-muted text-muted-foreground";
+    case "success":
+      return "bg-green-100";
+    default:
+      return "bg-background";
+  }
+}
+</script>
+
+<template>
+  <!-- Console log panel with controls and log display -->
+  <div class="h-full p-0 m-0 overflow-hidden">
+    <!-- Control bar with filters and search -->
+    <div class="bg-muted border-b border-t border-dev-lines px-3 py-2 font-mono">
+      <div class="flex items-center justify-end gap-4 text-xs">
+        <!-- Since last view toggle -->
+        <div class="flex items-center gap-2">
+          <Label class="text-xs font-semibold">Since last view:</Label>
+          <Switch
+            v-model="api.store.dev.lastViewLimit"
+            size="sm"
+          />
+        </div>
+
+        <!-- Search input -->
+        <div class="flex items-center gap-2">
+          <Label class="text-xs font-semibold">Search:</Label>
+          <Input
+            v-model="api.store.dev.searchParams"
+            placeholder="Search..."
+            class="h-6 w-24 text-xs"
+          />
+        </div>
+
+        <!-- Log type filter -->
+        <div class="flex items-center gap-2">
+          <Label class="text-xs font-semibold">Filter:</Label>
+          <Select v-model="api.store.dev.logFilter">
+            <SelectTrigger class="h-6 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="All">
+                All
+              </SelectItem>
+              <SelectItem value="Current page only">
+                Current page only
+              </SelectItem>
+              <SelectItem value="Debug only">
+                Debug only
+              </SelectItem>
+              <SelectItem value="Warnings and Errors only">
+                Warnings and Errors only
+              </SelectItem>
+              <SelectItem value="Warnings only">
+                Warnings only
+              </SelectItem>
+              <SelectItem value="Errors only">
+                Errors only
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <!-- Notification filter -->
+        <div class="flex items-center gap-2">
+          <Label class="text-xs font-semibold">Notifications:</Label>
+          <Select v-model="api.store.dev.notificationFilter">
+            <SelectTrigger class="h-6 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="All">
+                All
+              </SelectItem>
+              <SelectItem value="None">
+                None
+              </SelectItem>
+              <SelectItem value="Warnings and Errors">
+                Warnings and Errors
+              </SelectItem>
+              <SelectItem value="Warnings only">
+                Warnings only
+              </SelectItem>
+              <SelectItem value="Errors only">
+                Errors only
+              </SelectItem>
+              <SelectItem value="Success only">
+                Success only
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Log display area with scrollable content -->
+    <div
+      class="w-full overflow-hidden overflow-y-scroll flex flex-col-reverse box-border"
+      :style="{ height: height_pct }"
+    >
+      <div class="w-full min-w-0">
+        <!-- Log messages list - filtered by last view setting -->
+        <ul
+          v-if="api.store.dev.lastViewLimit"
+          class="w-full min-w-0"
+        >
+          <template v-for="(msg, idx) in log.page_history" :key="idx">
+            <li
+              v-if="filter_log(msg)"
+              :class="[
+                getBgClass(msg),
+                'text-xs font-mono p-2 pr-0 border-b border-border whitespace-pre-wrap break-words break-all min-w-0 w-full',
+              ]"
+            >
+              <div class="flex items-start gap-1 min-w-0">
+                <!-- Icon indicator based on message content -->
+                <div class="flex-shrink-0 mt-0.5">
+                  <i-fa6-solid-code-branch v-if="msg.message.includes('ROUTER GUARD')" />
+                  <i-fa6-solid-database v-else-if="msg.message.includes('SMILESTORE')" />
+                  <i-fa6-solid-gear v-else-if="msg.message.includes('DEV MODE')" />
+                  <i-fa6-solid-clock v-else-if="msg.message.includes('TIMELINE STEPPER')" />
+                  <i-fa6-regular-clock v-else-if="msg.message.includes('TRIAL STEPPER')" />
+                  <img
+                    v-else-if="msg.message.includes('FIRESTORE')"
+                    src="/src/assets/dev/firebase-bw.svg"
+                    width="15"
+                  >
+                  <i-fa6-solid-angle-right v-else />
+                </div>
+                <!-- Message content -->
+                <div class="min-w-0 flex-1">
+                  <div class="font-semibold break-words break-all">
+                    {{ msg.time }} {{ msg.message }}
+                  </div>
+                  <div class="break-words break-all text-xs opacity-75">
+                    {{ msg.trace }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          </template>
+        </ul>
+        <!-- Log messages list - full history -->
+        <ul
+          v-else
+          class="w-full min-w-0"
+        >
+          <template v-for="(msg, idx) in log.history" :key="idx">
+            <li
+              v-if="filter_log(msg)"
+              :class="[
+                getBgClass(msg),
+                'text-xs font-mono p-2 pr-0 border-b border-border whitespace-pre-wrap break-words break-all min-w-0 w-full',
+              ]"
+            >
+              <div class="flex items-start gap-1 min-w-0">
+                <!-- Icon indicator based on message content -->
+                <div class="flex-shrink-0 mt-0.5">
+                  <i-fa6-solid-code-branch v-if="msg.message.includes('ROUTER GUARD')" />
+                  <i-fa6-solid-database v-else-if="msg.message.includes('SMILESTORE')" />
+                  <i-fa6-solid-gear v-else-if="msg.message.includes('DEV MODE')" />
+                  <i-fa6-solid-clock v-else-if="msg.message.includes('TIMELINE STEPPER')" />
+                  <i-fa6-regular-clock v-else-if="msg.message.includes('TRIAL STEPPER')" />
+                  <img
+                    v-else-if="msg.message.includes('FIRESTORE')"
+                    src="/src/assets/dev/firebase-bw.svg"
+                    width="15"
+                  >
+                  <i-fa6-solid-angle-right v-else />
+                </div>
+                <!-- Message content -->
+                <div class="min-w-0 flex-1">
+                  <div class="font-semibold break-words break-all">
+                    {{ msg.time }} {{ msg.message }}
+                  </div>
+                  <div class="break-words break-all text-xs opacity-75">
+                    {{ msg.trace }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.overflow-y-scroll::-webkit-scrollbar{width:6px}.overflow-y-scroll::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}.overflow-y-scroll::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.overflow-y-scroll::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.bg-background{background-color:var(--background)}.bg-muted{background-color:var(--muted)}.text-muted-foreground{color:var(--muted-foreground)}.border-border{border-color:var(--border)}.bg-yellow-100{background-color:var(--log-yellow)}.bg-red-100{background-color:var(--log-red)}.bg-green-100{background-color:var(--log-green)}
+</style>

package/dist/runtime/components/dev/console/ConsoleLogPanel.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/console/DatabaseList.d.vue.ts

@@ -0,0 +1,26 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props for data and selection state
+ */
+export type Props = {
+    /**
+     * - The data path to display
+     */
+    data: string | null;
+    /**
+     * - Currently selected item
+     */
+    selected: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<{
+    data?: any;
+    selected?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    selected: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    data?: any;
+    selected?: any;
+}> & Readonly<{
+    onSelected?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/console/DatabaseList.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps(["data", "selected"]);
+const api = useAPI();
+const emit = defineEmits(["selected"]);
+function truncateText(text, maxLength = 20) {
+  if (!text) return text;
+  const textStr = String(text);
+  if (textStr.length <= maxLength) return textStr;
+  return textStr.substring(0, maxLength) + "...";
+}
+const header = computed(() => {
+  if (props.data === void 0 || props.data === null) {
+    return null;
+  } else {
+    const pieces = props.data.split(".");
+    return pieces[pieces.length - 1];
+  }
+});
+const data_field = computed(() => {
+  if (props.data !== void 0 && props.data !== null) {
+    const pieces = props.data.split(".");
+    let view_data = api.all_data;
+    for (let i = 0; i < pieces.length; i++) {
+      if (view_data[pieces[i]]) {
+        view_data = view_data[pieces[i]];
+      }
+    }
+    return view_data;
+  } else {
+    return null;
+  }
+});
+function option_selected(option) {
+  emit("selected", option);
+}
+</script>
+
+<template>
+  <!-- Database list container with header and scrollable content -->
+  <aside
+    class="w-full h-full flex flex-col database-list-container"
+    style="background-color: var(--background)"
+  >
+    <!-- Header section with navigation title -->
+    <div
+      v-if="header"
+      class="bg-muted text-dev-text px-3 py-2 text-xs font-medium border-b border-dev-lines"
+    >
+      <template v-if="header == '/'">
+        <i-fa6-solid-house class="mr-1" />
+      </template>
+      <template v-else>
+        <span class="font-mono">{{ header }}</span>
+      </template>
+    </div>
+
+    <!-- Scrollable list content -->
+    <div class="flex-1 overflow-y-auto overflow-x-hidden">
+      <ul class="space-y-0.5 p-1">
+        <!-- Empty state message -->
+        <li
+          v-if="
+            (data_field === null || data_field === undefined || Object.keys(data_field).length == 0) && header !== null
+          "
+        >
+          <div class="px-2 py-1.5 text-foreground text-xs font-mono">
+            Empty currently
+          </div>
+        </li>
+
+        <!-- Data items list -->
+        <li
+          v-for="(option, key) in data_field"
+          :key="key"
+        >
+          <!-- Non-object values (display only) -->
+          <div
+            v-if="option === null || (typeof option != 'object' && !Array.isArray(option))"
+            class="px-2 py-1.5 text-xs font-mono primitive-item"
+          >
+            <span class="font-mono font-semibold text-foreground item-key">{{ truncateText(key) }}</span>
+            <span class="text-foreground item-value">: {{ option === null ? 'null' : truncateText(String(option)) }}</span>
+          </div>
+
+          <!-- Object values (clickable navigation) -->
+          <button
+            v-else
+            :class="[
+              'w-full text-left px-2 py-1.5 text-xs font-mono rounded transition-colors duration-150 object-item',
+              'hover:bg-ring hover:text-blue-700',
+              'focus:outline-none focus:ring-1 focus:ring-blue-300 focus:bg-blue-50',
+              key === props.selected ? 'bg-blue-100 text-blue-800 border border-muted' : 'text-gray-700',
+            ]"
+            @click="option_selected(key)"
+          >
+            <div class="flex items-center justify-between">
+              <span class="font-semibold text-foreground item-key">{{ truncateText(key) }}</span>
+              <i-fa6-solid-angle-right class="text-gray-400 text-xs" />
+            </div>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.overflow-y-auto::-webkit-scrollbar{width:6px}.overflow-y-auto::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.overflow-y-auto::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.item-key{color:#0baac3;font-weight:400}.primitive-item .item-value{color:#dda814;font-weight:400}.object-item .item-key,.object-item .item-value{color:#0baac3;font-weight:400}.database-list-container .bg-blue-100{background-color:var(--accent)}.database-list-container .text-blue-800{color:var(--accent-foreground)}.database-list-container .border-blue-200{border-color:var(--accent)}
+</style>

package/dist/runtime/components/dev/console/DatabaseList.vue.d.ts

@@ -0,0 +1,26 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props for data and selection state
+ */
+export type Props = {
+    /**
+     * - The data path to display
+     */
+    data: string | null;
+    /**
+     * - Currently selected item
+     */
+    selected: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<{
+    data?: any;
+    selected?: any;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    selected: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    data?: any;
+    selected?: any;
+}> & Readonly<{
+    onSelected?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/console/SmileDevConsole.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/console/SmileDevConsole.vue

@@ -0,0 +1,117 @@
+<script setup>
+import ConsoleDatabaseBrowsePanel from "./ConsoleDatabaseBrowsePanel.vue";
+import ConsoleLogPanel from "./ConsoleLogPanel.vue";
+import ConsoleConfigPanel from "./ConsoleConfigPanel.vue";
+const api = useAPI();
+</script>
+
+<template>
+  <!-- Main console container with left sidebar and right content area -->
+  <div class="w-full h-full flex border-t border-border overflow-hidden">
+    <!-- Left sidebar - 36px wide with tab navigation -->
+    <div
+      class="w-9 h-full bg-muted border-dev-lines border-r flex flex-col items-center justify-between pt-1 pb-1 flex-shrink-0"
+    >
+      <!-- Top section with tab buttons -->
+      <div class="flex flex-col items-center">
+        <!-- Magnifying glass button - Browse tab -->
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <Button
+                variant="ghost"
+                size="icon"
+                class="w-8 h-8 mb-2 mt-1"
+                :class="{
+                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.consoleBarTab === 'browse',
+                  'hover:!bg-sidebar-border': api.store.dev.consoleBarTab !== 'browse',
+                }"
+                @click="api.store.dev.consoleBarTab = 'browse'"
+              >
+                <i-tdesign-data-base-filled />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              <p>Data Explorer</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        <!-- Book button - Log tab -->
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <Button
+                variant="ghost"
+                size="icon"
+                class="w-8 h-8 mb-2"
+                :class="{
+                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.consoleBarTab === 'log',
+                  'hover:!bg-sidebar-border': api.store.dev.consoleBarTab !== 'log',
+                }"
+                @click="api.store.dev.consoleBarTab = 'log'"
+              >
+                <i-mdi-console-line class="w-4 h-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              <p>Narrative Log</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        <!-- Config gear button - Config tab -->
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <Button
+                variant="ghost"
+                size="icon"
+                class="w-8 h-8 mb-1"
+                :class="{
+                  'bg-chart-4 hover:!bg-chart-4/80': api.store.dev.consoleBarTab === 'config',
+                  'hover:!bg-sidebar-border': api.store.dev.consoleBarTab !== 'config',
+                }"
+                @click="api.store.dev.consoleBarTab = 'config'"
+              >
+                <i-fa6-solid-gear class="w-4 h-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              <p>Configuration</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <!-- Hide button - anchored to bottom -->
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="w-8 h-8 hover:!bg-sidebar-border"
+              @click="api.store.dev.showConsoleBar = false"
+            >
+              <i-uil-down-arrow class="w-4 h-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p>Hide Console</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+
+    <!-- Right column - remaining width with panel content -->
+    <div class="flex-1 h-full flex flex-col min-w-0 overflow-hidden">
+      <!-- Panel content area -->
+      <div class="flex-1 overflow-hidden">
+        <ConsoleDatabaseBrowsePanel v-if="api.store.dev.consoleBarTab === 'browse'" />
+        <ConsoleLogPanel v-if="api.store.dev.consoleBarTab === 'log'" />
+        <ConsoleConfigPanel v-if="api.store.dev.consoleBarTab === 'config'" />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/dev/console/SmileDevConsole.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/dev/devicePresets.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @fileoverview Device presets for responsive testing and rotation logic
+ */
+/**
+ * Device presets for responsive testing and rotation logic
+ *
+ * Contains predefined device dimensions and names for various mobile,
+ * tablet, and desktop configurations used in developer mode.
+ *
+ * @constant {object} devicePresets Object containing device dimensions and names
+ * @property {object} iphone iPhone dimensions
+ * @property {object} 'iphone-plus' iPhone Plus dimensions
+ * @property {object} 'iphone-pro' iPhone Pro dimensions
+ * @property {object} 'iphone-pro-max' iPhone Pro Max dimensions
+ * @property {object} 'iphone-se' iPhone SE dimensions
+ * @property {object} 'ipad-11' iPad 11-inch dimensions
+ * @property {object} 'ipad-13' iPad 13-inch dimensions
+ * @property {object} desktop1 800x600 desktop resolution
+ * @property {object} desktop2 1024x768 desktop resolution
+ * @property {Object} desktop3 1280x1024 desktop resolution
+ * @property {Object} desktop4 1440x900 desktop resolution
+ * @property {Object} desktop5 1600x1200 desktop resolution
+ * @property {Object} desktop16 1920x1080 desktop resolution
+ */
+export const devicePresets: {
+    iphone: {
+        width: number;
+        height: number;
+        name: string;
+    };
+    'iphone-plus': {
+        width: number;
+        height: number;
+        name: string;
+    };
+    'iphone-pro': {
+        width: number;
+        height: number;
+        name: string;
+    };
+    'iphone-pro-max': {
+        width: number;
+        height: number;
+        name: string;
+    };
+    'iphone-se': {
+        width: number;
+        height: number;
+        name: string;
+    };
+    'ipad-11': {
+        width: number;
+        height: number;
+        name: string;
+    };
+    'ipad-13': {
+        width: number;
+        height: number;
+        name: string;
+    };
+    desktop1: {
+        width: number;
+        height: number;
+        name: string;
+    };
+    desktop2: {
+        width: number;
+        height: number;
+        name: string;
+    };
+    desktop3: {
+        width: number;
+        height: number;
+        name: string;
+    };
+    desktop4: {
+        width: number;
+        height: number;
+        name: string;
+    };
+    desktop5: {
+        width: number;
+        height: number;
+        name: string;
+    };
+    desktop16: {
+        width: number;
+        height: number;
+        name: string;
+    };
+};

package/dist/runtime/components/dev/devicePresets.js

@@ -0,0 +1,40 @@
+/**
+ * @fileoverview Device presets for responsive testing and rotation logic
+ */
+
+/**
+ * Device presets for responsive testing and rotation logic
+ *
+ * Contains predefined device dimensions and names for various mobile,
+ * tablet, and desktop configurations used in developer mode.
+ *
+ * @constant {object} devicePresets Object containing device dimensions and names
+ * @property {object} iphone iPhone dimensions
+ * @property {object} 'iphone-plus' iPhone Plus dimensions
+ * @property {object} 'iphone-pro' iPhone Pro dimensions
+ * @property {object} 'iphone-pro-max' iPhone Pro Max dimensions
+ * @property {object} 'iphone-se' iPhone SE dimensions
+ * @property {object} 'ipad-11' iPad 11-inch dimensions
+ * @property {object} 'ipad-13' iPad 13-inch dimensions
+ * @property {object} desktop1 800x600 desktop resolution
+ * @property {object} desktop2 1024x768 desktop resolution
+ * @property {Object} desktop3 1280x1024 desktop resolution
+ * @property {Object} desktop4 1440x900 desktop resolution
+ * @property {Object} desktop5 1600x1200 desktop resolution
+ * @property {Object} desktop16 1920x1080 desktop resolution
+ */
+export const devicePresets = {
+  'iphone': { width: 393, height: 852, name: 'iPhone' },
+  'iphone-plus': { width: 430, height: 932, name: 'iPhone Plus' },
+  'iphone-pro': { width: 402, height: 874, name: 'iPhone Pro' },
+  'iphone-pro-max': { width: 440, height: 956, name: 'iPhone Pro Max' },
+  'iphone-se': { width: 375, height: 667, name: 'iPhone SE' },
+  'ipad-11': { width: 1180, height: 820, name: 'iPad 11-inch' },
+  'ipad-13': { width: 1366, height: 1024, name: 'iPad 13-inch' },
+  'desktop1': { width: 800, height: 600, name: '800x600' },
+  'desktop2': { width: 1024, height: 768, name: '1024x768' },
+  'desktop3': { width: 1280, height: 1024, name: '1280x1024' },
+  'desktop4': { width: 1440, height: 900, name: '1440x900' },
+  'desktop5': { width: 1600, height: 1200, name: '1600x1200' },
+  'desktop16': { width: 1920, height: 1080, name: '1920x1080' },
+}

package/dist/runtime/components/dev/menu/DevConfigPanel.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;