@nyuccl/smile 0.2.0-beta.0

package/dist/runtime/components/dev/ResponsiveDeviceContainer.vue

@@ -0,0 +1,215 @@
+<script setup>
+import { ref, computed } from "vue";
+import ResponsiveDeviceSelect from "./menu/ResponsiveDeviceSelect.vue";
+import { useElementSize } from "@vueuse/core";
+import { devicePresets } from "./devicePresets.js";
+const api = useAPI();
+const fullScreenDiv = ref(null);
+const { width: _fullScreenWidth, height: _fullScreenHeight } = useElementSize(fullScreenDiv);
+const {
+  state: experimentColorMode,
+  mode: experimentColorModeRaw,
+  toggle: toggleColorMode,
+  system
+} = useSmileColorMode("experiment");
+const { state: globalColorMode } = useSmileColorMode("global");
+if (!api.store.dev.deviceWidth || !api.store.dev.deviceHeight) {
+  const initialPreset = devicePresets[api.store.dev.selectedDevice] || devicePresets.desktop1;
+  api.store.dev.deviceWidth = initialPreset.width;
+  api.store.dev.deviceHeight = initialPreset.height;
+}
+const containerStyle = computed(() => ({
+  "--device-width": `${api.store.dev.deviceWidth}px`,
+  "--device-height": `${api.store.dev.deviceHeight}px`
+}));
+const checkForMatchingPreset = () => {
+  for (const [key, preset] of Object.entries(devicePresets)) {
+    const matchesNormal = api.store.dev.deviceWidth === preset.width && api.store.dev.deviceHeight === preset.height;
+    const matchesRotated = api.store.dev.deviceWidth === preset.height && api.store.dev.deviceHeight === preset.width;
+    if (matchesNormal || matchesRotated) {
+      api.store.dev.selectedDevice = key;
+      return;
+    }
+  }
+  api.store.dev.selectedDevice = "custom";
+};
+const isResizing = ref(false);
+const resizeDirection = ref("");
+const startX = ref(0);
+const startY = ref(0);
+const startWidth = ref(0);
+const startHeight = ref(0);
+const startResize = (direction, event) => {
+  isResizing.value = true;
+  resizeDirection.value = direction;
+  startX.value = event.clientX;
+  startY.value = event.clientY;
+  startWidth.value = api.store.dev.deviceWidth;
+  startHeight.value = api.store.dev.deviceHeight;
+  api.store.dev.selectedDevice = "custom";
+  document.addEventListener("mousemove", handleResize);
+  document.addEventListener("mouseup", stopResize);
+  event.preventDefault();
+};
+const handleResize = (event) => {
+  if (!isResizing.value) return;
+  const deltaX = event.clientX - startX.value;
+  const deltaY = event.clientY - startY.value;
+  api.store.dev.selectedDevice = "custom";
+  if (resizeDirection.value.includes("right")) {
+    api.store.dev.deviceWidth = Math.max(200, startWidth.value + deltaX);
+  }
+  if (resizeDirection.value.includes("left")) {
+    api.store.dev.deviceWidth = Math.max(200, startWidth.value - deltaX);
+  }
+  if (resizeDirection.value.includes("bottom")) {
+    api.store.dev.deviceHeight = Math.max(400, startHeight.value + deltaY);
+  }
+};
+const stopResize = () => {
+  isResizing.value = false;
+  resizeDirection.value = "";
+  document.removeEventListener("mousemove", handleResize);
+  document.removeEventListener("mouseup", stopResize);
+  checkForMatchingPreset();
+};
+const toggleRotation = () => {
+  const tempWidth = api.store.dev.deviceWidth;
+  api.store.dev.deviceWidth = api.store.dev.deviceHeight;
+  api.store.dev.deviceHeight = tempWidth;
+  api.store.dev.isRotated = !api.store.dev.isRotated;
+  checkForMatchingPreset();
+};
+const toggleFullscreen = () => {
+  api.store.dev.isFullscreen = !api.store.dev.isFullscreen;
+};
+const shouldUseResponsiveContainer = computed(() => {
+  const routeName = api.currentRouteName();
+  return routeName !== void 0 && routeName !== "recruit" && routeName !== "landing";
+});
+const colorMode = computed(() => {
+  return experimentColorMode.value;
+});
+</script>
+
+<template>
+  <!-- Fullscreen mode -->
+  <div
+    v-if="api.store.dev.isFullscreen || !shouldUseResponsiveContainer"
+    ref="fullScreenDiv"
+    class="fullscreen-container bg-background text-foreground"
+    :class="api.currentViewName() !== 'recruit' ? colorMode : globalColorMode"
+  >
+    <slot />
+  </div>
+
+  <!-- Normal device container mode with responsive controls -->
+  <div
+    v-else
+    class="device-container-wrapper"
+    :style="containerStyle"
+  >
+    <div class="device-content-wrapper">
+      <!-- Device information and control panel -->
+      <div class="device-info">
+        <div class="device-controls">
+          <ResponsiveDeviceSelect />
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  @click="toggleRotation"
+                >
+                  <i-carbon-rotate-counterclockwise-filled :class="{ 'text-blue-400': api.store.dev.isRotated }" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p>Rotate device</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <Separator orientation="vertical" />
+
+          <div class="device-dimensions">
+            {{ api.store.dev.deviceWidth }} x {{ api.store.dev.deviceHeight }}
+          </div>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  @click="toggleColorMode"
+                >
+                  <i-lucide-moon v-if="experimentColorModeRaw === 'light'" />
+                  <i-lucide-sun-moon v-else-if="experimentColorModeRaw === 'dark'" />
+                  <i-lucide-sun v-else />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p v-if="experimentColorModeRaw === 'light'">
+                  Switch to Dark Mode
+                </p>
+                <p v-else-if="experimentColorModeRaw === 'dark'">
+                  Switch to System ({{ system }})
+                </p>
+                <p v-else>
+                  Switch to Light Mode
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger as-child>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  @click="toggleFullscreen"
+                >
+                  <i-ic-outline-fullscreen />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                <p>Fullscreen Mode</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </div>
+
+      <!-- Device container with resize handles -->
+      <div
+        class="device-wrapper dev-color-mode"
+        :class="api.currentRouteName() !== 'recruit' ? colorMode : globalColorMode"
+      >
+        <div class="device-container bg-background text-foreground">
+          <slot />
+        </div>
+
+        <div
+          class="resize-handle resize-handle-left"
+          @mousedown="startResize('left', $event)"
+        />
+        <div
+          class="resize-handle resize-handle-right"
+          @mousedown="startResize('right', $event)"
+        />
+        <div
+          class="resize-handle resize-handle-bottom"
+          @mousedown="startResize('bottom', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.device-container-wrapper,.fullscreen-container{height:100%;position:relative;width:100%}.device-container-wrapper{background-image:linear-gradient(color-mix(in srgb,var(--border) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 70%,transparent) 1px,transparent 1px);background-position:-1px 0;background-size:20px 20px;container-type:inline-size;max-width:100%;min-height:100%;overflow-x:auto;overflow-y:auto}.device-content-wrapper{align-items:center;background-color:var(--test-background);display:flex;flex-direction:column;justify-content:flex-start;padding:20px}@container (min-width: 800px){.device-content-wrapper{align-items:center;padding:20px}.device-wrapper{justify-content:center;margin-left:15px}}@container (max-width: 799px){.device-content-wrapper{align-items:flex-start;margin-left:0}.device-wrapper{justify-content:flex-start}.device-info,.device-wrapper{margin-left:15px}}.device-info{background-color:var(--background);border:1px solid var(--border);border-radius:10px;font-family:monospace;font-size:14px;margin-bottom:10px;padding:5px;text-align:center}.device-controls{align-items:center;display:flex;flex-direction:row;gap:8px}.device-controls>*{align-items:center;display:flex;gap:16px}.device-dimensions{color:var(--muted-foreground);font-family:monospace;font-size:.8em}.device-controls :deep(.select-small){font-size:12px!important;height:28px!important;padding:4px 8px!important}.device-controls :deep(.select-small svg){height:12px!important;width:12px!important}.device-wrapper{align-items:center;background-color:var(--background);display:flex;justify-content:flex-start;position:relative}.device-container{border:2px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.15),0 3px 8px rgba(0,0,0,.1);display:inline-block;height:var(--device-height);overflow-x:auto;overflow-y:auto;width:var(--device-width)}.resize-handle{background:#8f8f8f;border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.2);position:absolute;transform-origin:center;transition:all .2s}.resize-handle:hover{background:#90b7e5;transform:scale(1.1)}.resize-handle:active{background:#90b7e5;transform:scale(1.05)}.resize-handle-left{cursor:ew-resize;height:40px;left:-15px;top:50%;transform:translateY(-50%);width:8px}.resize-handle-left:hover{transform:translateY(-50%) scale(1.1)}.resize-handle-left:active{transform:translateY(-50%) scale(1.05)}.resize-handle-right{cursor:ew-resize;height:40px;right:-15px;top:50%;transform:translateY(-50%);width:8px}.resize-handle-right:hover{transform:translateY(-50%) scale(1.1)}.resize-handle-right:active{transform:translateY(-50%) scale(1.05)}.resize-handle-bottom{bottom:-15px;cursor:ns-resize;height:8px;left:50%;transform:translateX(-50%);width:40px}.resize-handle-bottom:hover{transform:translateX(-50%) scale(1.1)}.resize-handle-bottom:active{transform:translateX(-50%) scale(1.05)}
+</style>

package/dist/runtime/components/dev/ResponsiveDeviceContainer.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
+};

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

@@ -0,0 +1,26 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props for configuration data and selection state
+ */
+export type Props = {
+    /**
+     * - The configuration 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/ConfigList.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps(["data", "selected"]);
+const api = useAPI();
+const emit = defineEmits(["selected"]);
+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_config;
+    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 truncateText(text, maxLength = 30) {
+  if (!text) return text;
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength) + "...";
+}
+function option_selected(option) {
+  emit("selected", option);
+}
+</script>
+
+<template>
+  <!-- Configuration list container with header and scrollable content -->
+  <aside class="w-full h-full flex flex-col config-list-container bg-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>
+
+        <!-- Configuration 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}.config-list-container .bg-blue-100{background-color:var(--accent)}.config-list-container .text-blue-800{color:var(--accent-foreground)}.config-list-container .border-blue-200{border-color:var(--accent)}
+</style>

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

@@ -0,0 +1,26 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+/**
+ * Component props for configuration data and selection state
+ */
+export type Props = {
+    /**
+     * - The configuration 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/ConsoleConfigPanel.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/ConsoleConfigPanel.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { reactive, computed, onMounted } from "vue";
+import ConfigList from "./ConfigList.vue";
+const api = useAPI();
+const browse_panels = reactive({ path: ["/", null, null] });
+onMounted(() => {
+  if (api.store.dev.configPath !== null) {
+    browse_panels.path = JSON.parse(api.store.dev.configPath);
+  }
+});
+function save_path() {
+  api.store.dev.configPath = JSON.stringify(browse_panels.path);
+}
+const n_active_panels = computed(() => {
+  let count = 0;
+  for (let i = 0; i < browse_panels.path.length; i++) {
+    if (browse_panels.path[i] !== null) {
+      count++;
+    }
+  }
+  return count;
+});
+function panel_path(cutoff) {
+  let path = "";
+  if (browse_panels.path[browse_panels.path.length - cutoff - 1] == null) {
+    return null;
+  } else {
+    for (let i = 0; i < browse_panels.path.length - cutoff; i++) {
+      path += String(browse_panels.path[i]);
+      if (i < browse_panels.path.length - cutoff - 1) {
+        path += ".";
+      }
+    }
+    return path;
+  }
+}
+function panel1_select(option) {
+  browse_panels.path.pop();
+  browse_panels.path.pop();
+  browse_panels.path.push(String(option));
+  if (browse_panels.path.length < 3) {
+    browse_panels.path.push(null);
+  }
+  save_path();
+}
+function panel2_select(option) {
+  browse_panels.path.pop();
+  browse_panels.path.push(String(option));
+  save_path();
+}
+function panel3_select(option) {
+  browse_panels.path.push(String(option));
+  save_path();
+}
+function panel_jump(index) {
+  for (let i = index + 1; i < browse_panels.path.length; i++) {
+    browse_panels.path[i] = null;
+  }
+  browse_panels.path = browse_panels.path.slice(0, 3);
+}
+function _resetDevState() {
+  localStorage.removeItem(api.config.devLocalStorageKey);
+  location.reload();
+}
+</script>
+
+<template>
+  <!-- Configuration panel with breadcrumb navigation and three-panel layout -->
+  <div class="h-full m-0 p-0 flex flex-col">
+    <!-- Breadcrumb navigation bar -->
+    <Breadcrumb class="bg-muted border-b border-t border-dev-lines px-3 py-2 font-mono">
+      <BreadcrumbList>
+        <template v-for="(option, index) in browse_panels.path" :key="index">
+          <template v-if="option !== null">
+            <BreadcrumbItem>
+              <BreadcrumbLink
+                as="button"
+                class="flex items-center text-xs"
+                @click="panel_jump(index)"
+              >
+                <template v-if="option == '/'">
+                  <i-fa6-solid-house />
+                </template>
+                <template v-else>
+                  {{ option }}
+                </template>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator v-if="index < n_active_panels - 1" />
+          </template>
+        </template>
+      </BreadcrumbList>
+    </Breadcrumb>
+
+    <!-- Main content area with sidebar and three-panel layout -->
+    <div class="flex flex-row flex-1 overflow-hidden">
+      <!-- Left sidebar with documentation link -->
+      <div class="flex flex-col w-1/6 min-w-[120px] border-r border-l border-dev-lines bg-muted p-2 gap-2">
+        <div class="text-xs text-left mb-2 font-mono">
+          Read more about configuration options
+          <a
+            href="https://smile.gureckislab.org/configuration.html"
+            class="text-blue-600 underline ml-1"
+          >in the docs</a>.
+        </div>
+      </div>
+      <!-- Three-panel configuration browser -->
+      <div class="flex-1 grid grid-cols-3 gap-0 bg-gray-50 overflow-hidden">
+        <!-- Left panel -->
+        <div class="border-r border-dev-lines h-full overflow-hidden">
+          <ConfigList
+            :data="panel_path(2)"
+            :selected="browse_panels.path[browse_panels.path.length - 2]"
+            @selected="panel1_select"
+          />
+        </div>
+        <!-- Middle panel -->
+        <div class="border-r border-dev-lines h-full overflow-hidden">
+          <ConfigList
+            :data="panel_path(1)"
+            :selected="browse_panels.path[browse_panels.path.length - 1]"
+            @selected="panel2_select"
+          />
+        </div>
+        <!-- Right panel -->
+        <div class="bg-gray-50 h-full overflow-hidden">
+          <ConfigList
+            :data="panel_path(0)"
+            @selected="panel3_select"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/dev/console/ConsoleConfigPanel.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/ConsoleDatabaseBrowsePanel.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/ConsoleDatabaseBrowsePanel.vue

@@ -0,0 +1,124 @@
+<script setup>
+import { reactive, computed, onMounted } from "vue";
+import DatabaseList from "./DatabaseList.vue";
+const api = useAPI();
+const browse_panels = reactive({ path: ["/", null, null] });
+onMounted(() => {
+  if (api.store.dev.dataPath !== null) {
+    browse_panels.path = JSON.parse(api.store.dev.dataPath);
+  }
+});
+function save_path() {
+  api.store.dev.dataPath = JSON.stringify(browse_panels.path);
+}
+const n_active_panels = computed(() => {
+  let count = 0;
+  for (let i = 0; i < browse_panels.path.length; i++) {
+    if (browse_panels.path[i] !== null) {
+      count++;
+    }
+  }
+  return count;
+});
+function panel_path(cutoff) {
+  let path = "";
+  if (browse_panels.path[browse_panels.path.length - cutoff - 1] == null) {
+    return null;
+  } else {
+    for (let i = 0; i < browse_panels.path.length - cutoff; i++) {
+      path += String(browse_panels.path[i]);
+      if (i < browse_panels.path.length - cutoff - 1) {
+        path += ".";
+      }
+    }
+    return path;
+  }
+}
+function panel1_select(option) {
+  browse_panels.path.pop();
+  browse_panels.path.pop();
+  browse_panels.path.push(String(option));
+  if (browse_panels.path.length < 3) {
+    browse_panels.path.push(null);
+  }
+  save_path();
+}
+function panel2_select(option) {
+  browse_panels.path.pop();
+  browse_panels.path.push(String(option));
+  save_path();
+}
+function panel3_select(option) {
+  browse_panels.path.push(String(option));
+  save_path();
+}
+function panel_jump(index) {
+  for (let i = index + 1; i < browse_panels.path.length; i++) {
+    browse_panels.path[i] = null;
+  }
+  browse_panels.path = browse_panels.path.slice(0, 3);
+}
+</script>
+
+<template>
+  <!-- Database browsing panel with breadcrumb navigation and three-panel layout -->
+  <div class="h-full p-0 m-0 flex flex-col">
+    <!-- Breadcrumb navigation bar -->
+    <Breadcrumb class="bg-muted border-b border-t border-dev-lines px-3 py-2 font-mono">
+      <BreadcrumbList>
+        <template
+          v-for="(option, index) in browse_panels.path"
+          :key="index"
+        >
+          <template v-if="option !== null">
+            <BreadcrumbItem>
+              <BreadcrumbLink
+                as="button"
+                class="flex items-center text-xs"
+                @click="panel_jump(index)"
+              >
+                <template v-if="option == '/'">
+                  <i-fa6-solid-house />
+                </template>
+                <template v-else>
+                  {{ option }}
+                </template>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator v-if="index < n_active_panels - 1" />
+          </template>
+        </template>
+      </BreadcrumbList>
+    </Breadcrumb>
+
+    <!-- Three-panel layout for hierarchical data navigation -->
+    <div class="flex flex-1 overflow-hidden">
+      <!-- Left panel - 25% width -->
+      <div class="w-1/4 h-full border-r border-dev-lines p-0 m-0">
+        <!-- two from end -->
+        <DatabaseList
+          :data="panel_path(2)"
+          :selected="browse_panels.path[browse_panels.path.length - 2]"
+          @selected="panel1_select"
+        />
+      </div>
+      <!-- Middle panel - 25% width -->
+      <div class="w-1/4 h-full border-r border-dev-lines p-0 m-0 bg-gray-50">
+        <!-- one from end -->
+        <DatabaseList
+          :data="panel_path(1)"
+          :selected="browse_panels.path[browse_panels.path.length - 1]"
+          @selected="panel2_select"
+        />
+      </div>
+      <!-- Right panel - 50% width -->
+      <div class="w-1/2 h-full p-0 m-0 bg-gray-50">
+        <!-- zero from end -->
+        <DatabaseList
+          :data="panel_path(0)"
+          @selected="panel3_select"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/dev/console/ConsoleDatabaseBrowsePanel.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/ConsoleLogPanel.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>;