@qwik.dev/devtools 0.3.0-beta.3 → 2.0.0-beta.45

package/dist/ui/packages/devtools/ui/src/devtools/rpc.qwik.mjs

@@ -1,91 +1,73 @@
-import { getQwikDevtoolsGlobal, QWIK_DEVTOOLS_GLOBAL, RouteType, setViteClientContext, createClientRpc, getViteClientRpc } from "@qwik.dev/devtools/kit";
+import { __toESM } from "../../../../../_virtual/_rolldown/runtime.qwik.mjs";
+import { require_browser } from "../../../../../node_modules/.pnpm/debug@4.4.3_supports-color@11.0.0/node_modules/debug/src/browser.qwik.mjs";
+import { tryCreateHotContext } from "../../../../../node_modules/.pnpm/vite-hot-client@2.2.0_vite@8.2.1_@types_node@25.6.0_esbuild@0.28.2_jiti@2.7.0_terser@5.46.0_tsx@4.21.0_yaml@2.9.0_/node_modules/vite-hot-client/dist/index.qwik.mjs";
 import { noSerialize } from "@qwik.dev/core";
-import debug from "../../../../../_virtual/browser.qwik.mjs";
-import { tryCreateHotContext } from "../../../../../node_modules/.pnpm/vite-hot-client@2.1.0_vite@7.3.5_@types_node@24.10.0_jiti@2.6.1_lightningcss@1.33.0_terser@5.46.0_tsx@4.21.0_yaml@2.8.3_/node_modules/vite-hot-client/dist/index.qwik.mjs";
-const log = debug("qwik:devtools:devtools");
+import { QWIK_DEVTOOLS_GLOBAL, RouteType, createClientRpc, getQwikDevtoolsGlobal, getViteClientRpc, setViteClientContext } from "@qwik.dev/devtools/kit";
+var log = (0, (/* @__PURE__ */ __toESM(require_browser(), 1)).default)("qwik:devtools:devtools");
 function getClientRpcFunctions() {
-  return {
-    healthCheck: () => true
-  };
+	return { healthCheck: () => true };
 }
 function toDevtoolsRoutes(routes) {
-  const children = routes?.children || [];
-  const directories = children.filter((child) => child.type === RouteType.DIRECTORY);
-  return [
-    {
-      relativePath: "",
-      name: "index",
-      type: RouteType.DIRECTORY,
-      path: "",
-      isSymbolicLink: false,
-      children: void 0
-    },
-    ...directories
-  ];
+	const directories = (routes?.children || []).filter((child) => child.type === RouteType.DIRECTORY);
+	return [{
+		relativePath: "",
+		name: "index",
+		type: RouteType.DIRECTORY,
+		path: "",
+		isSymbolicLink: false,
+		children: void 0
+	}, ...directories];
 }
 async function connectRpc() {
-  const hot = await tryCreateHotContext(void 0, [
-    "/",
-    "/"
-  ]);
-  if (!hot) {
-    throw new Error("Vite Hot Context not connected");
-  }
-  setViteClientContext(hot);
-  createClientRpc(getClientRpcFunctions());
-  return getViteClientRpc();
+	const hot = await tryCreateHotContext(void 0, ["/", "/"]);
+	if (!hot) throw new Error("Vite Hot Context not connected");
+	setViteClientContext(hot);
+	createClientRpc(getClientRpcFunctions());
+	return getViteClientRpc();
 }
-let rpcPromise;
+var rpcPromise;
 function getDevtoolsRpc() {
-  rpcPromise ?? (rpcPromise = connectRpc());
-  return rpcPromise;
+	rpcPromise ?? (rpcPromise = connectRpc());
+	return rpcPromise;
 }
-const viteDataProvider = {
-  async loadData(state) {
-    const rpc = await getDevtoolsRpc();
-    const primaryDataPromise = Promise.allSettled([
-      rpc.getAssetsFromPublicDir(),
-      rpc.getComponents(),
-      rpc.getRoutes(),
-      rpc.getQwikPackages()
-    ]);
-    state.isLoadingDependencies = true;
-    const dependenciesPromise = rpc.getAllDependencies().then((allDependencies) => {
-      state.allDependencies = allDependencies;
-    }).catch((error) => {
-      log("Failed to load all dependencies:", error);
-    }).finally(() => {
-      state.isLoadingDependencies = false;
-    });
-    const [assetsResult, componentsResult, routesResult, packagesResult] = await primaryDataPromise;
-    if (assetsResult.status === "fulfilled") {
-      state.assets = assetsResult.value;
-    } else {
-      log("Failed to load assets:", assetsResult.reason);
-    }
-    if (componentsResult.status === "fulfilled") {
-      state.components = componentsResult.value;
-    } else {
-      log("Failed to load components:", componentsResult.reason);
-    }
-    if (routesResult.status === "fulfilled") {
-      state.routes = noSerialize(toDevtoolsRoutes(routesResult.value));
-    } else {
-      log("Failed to load routes:", routesResult.reason);
-    }
-    if (packagesResult.status === "fulfilled") {
-      state.npmPackages = packagesResult.value;
-    } else {
-      log("Failed to load Qwik packages:", packagesResult.reason);
-    }
-    await dependenciesPromise;
-  }
-};
+/**
+* Default data provider that loads data via Vite HMR RPC. Used when the devtools UI runs as an
+* in-app overlay.
+*/
+var viteDataProvider = { async loadData(state) {
+	const rpc = await getDevtoolsRpc();
+	const primaryDataPromise = Promise.allSettled([
+		rpc.getAssetsFromPublicDir(),
+		rpc.getComponents(),
+		rpc.getRoutes(),
+		rpc.getQwikPackages()
+	]);
+	state.isLoadingDependencies = true;
+	const dependenciesPromise = rpc.getAllDependencies().then((allDependencies) => {
+		state.allDependencies = allDependencies;
+	}).catch((error) => {
+		log("Failed to load all dependencies:", error);
+	}).finally(() => {
+		state.isLoadingDependencies = false;
+	});
+	const [assetsResult, componentsResult, routesResult, packagesResult] = await primaryDataPromise;
+	if (assetsResult.status === "fulfilled") state.assets = assetsResult.value;
+	else log("Failed to load assets:", assetsResult.reason);
+	if (componentsResult.status === "fulfilled") state.components = componentsResult.value;
+	else log("Failed to load components:", componentsResult.reason);
+	if (routesResult.status === "fulfilled") state.routes = noSerialize(toDevtoolsRoutes(routesResult.value));
+	else log("Failed to load routes:", routesResult.reason);
+	if (packagesResult.status === "fulfilled") state.npmPackages = packagesResult.value;
+	else log("Failed to load Qwik packages:", packagesResult.reason);
+	await dependenciesPromise;
+} };
+/**
+* Load devtools data using the active data provider.
+*
+* When the Qwik DevTools root has a `dataProvider` (e.g. from the browser extension entry point),
+* that provider is used. Otherwise, falls back to the default Vite HMR RPC provider.
+*/
 async function loadDevtoolsData(state) {
-  const provider = getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.dataProvider] ?? viteDataProvider;
-  await provider.loadData(state);
+	await (getQwikDevtoolsGlobal(window)?.[QWIK_DEVTOOLS_GLOBAL.props.dataProvider] ?? viteDataProvider).loadData(state);
 }
-export {
-  getDevtoolsRpc,
-  loadDevtoolsData
-};
+export { getDevtoolsRpc, loadDevtoolsData };

package/dist/ui/packages/devtools/ui/src/devtools/sidebar-tabs.qwik.mjs

@@ -1,97 +1,84 @@
 import { devtoolsTabs } from "./tabs.qwik.mjs";
-const STORAGE_KEY = "qwik-devtools:visible-tabs";
-const tabsById = new Map(devtoolsTabs.map((tab) => [
-  tab.id,
-  tab
-]));
-const KNOWN_TAB_IDS = new Set(devtoolsTabs.map((tab) => tab.id));
+var STORAGE_KEY = "qwik-devtools:visible-tabs";
+/** Tab configs keyed by id, for resolving an ordered id list. */
+var tabsById = new Map(devtoolsTabs.map((tab) => [tab.id, tab]));
+var KNOWN_TAB_IDS = new Set(devtoolsTabs.map((tab) => tab.id));
 function isDevtoolsTabId(id) {
-  return KNOWN_TAB_IDS.has(id);
+	return KNOWN_TAB_IDS.has(id);
 }
+/** Default sidebar configuration: every tab visible, in registry order. */
 function getDefaultVisibleTabIds() {
-  return devtoolsTabs.map((tab) => tab.id);
+	return devtoolsTabs.map((tab) => tab.id);
 }
+/** Tabs not currently visible (reachable via the More panel), in registry order. */
 function getAvailableTabIds(visibleTabIds) {
-  const visible = new Set(visibleTabIds);
-  return devtoolsTabs.map((tab) => tab.id).filter((id) => !visible.has(id));
+	const visible = new Set(visibleTabIds);
+	return devtoolsTabs.map((tab) => tab.id).filter((id) => !visible.has(id));
 }
+/** Hidden tabs resolved to their configs (the More panel contents), in registry order. */
+function getAvailableTabs(visibleTabIds) {
+	return resolveTabs(getAvailableTabIds(visibleTabIds));
+}
+/** Moves `draggedId` to sit just before `targetId` in the list, returning a new list. */
 function reorderVisibleTabs(visibleTabIds, draggedId, targetId) {
-  if (draggedId === targetId) {
-    return visibleTabIds;
-  }
-  const without = visibleTabIds.filter((id) => id !== draggedId);
-  const targetIndex = without.indexOf(targetId);
-  if (targetIndex < 0) {
-    return visibleTabIds;
-  }
-  without.splice(targetIndex, 0, draggedId);
-  return without;
+	if (draggedId === targetId) return visibleTabIds;
+	const without = visibleTabIds.filter((id) => id !== draggedId);
+	const targetIndex = without.indexOf(targetId);
+	if (targetIndex < 0) return visibleTabIds;
+	without.splice(targetIndex, 0, draggedId);
+	return without;
 }
+/** Adds (appends) or removes a tab from the ordered visible list, returning a new list. */
 function setTabVisible(visibleTabIds, id, visible) {
-  if (visible) {
-    return visibleTabIds.includes(id) ? visibleTabIds : [
-      ...visibleTabIds,
-      id
-    ];
-  }
-  return visibleTabIds.filter((tabId) => tabId !== id);
+	if (visible) return visibleTabIds.includes(id) ? visibleTabIds : [...visibleTabIds, id];
+	return visibleTabIds.filter((tabId) => tabId !== id);
 }
+/** Drops ids no longer in the registry and de-dupes, preserving the stored order. */
 function normalizeVisibleTabIds(ids) {
-  const seen = /* @__PURE__ */ new Set();
-  const result = [];
-  for (const id of ids) {
-    if (isDevtoolsTabId(id) && !seen.has(id)) {
-      seen.add(id);
-      result.push(id);
-    }
-  }
-  return result;
+	const seen = /* @__PURE__ */ new Set();
+	const result = [];
+	for (const id of ids) if (isDevtoolsTabId(id) && !seen.has(id)) {
+		seen.add(id);
+		result.push(id);
+	}
+	return result;
 }
+/**
+* Reads the persisted visible-tabs list, or null when nothing valid is stored so the caller falls
+* back to the default. An empty list is honored (the user hid every tab). Tabs added to the
+* registry since the last save stay hidden (reachable via the More panel) until opted in.
+*/
 function loadVisibleTabIds() {
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) {
-      return null;
-    }
-    const parsed = JSON.parse(raw);
-    if (!Array.isArray(parsed)) {
-      return null;
-    }
-    return normalizeVisibleTabIds(parsed.filter((value) => typeof value === "string"));
-  } catch {
-    return null;
-  }
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (!raw) return null;
+		const parsed = JSON.parse(raw);
+		if (!Array.isArray(parsed)) return null;
+		return normalizeVisibleTabIds(parsed.filter((value) => typeof value === "string"));
+	} catch {
+		return null;
+	}
 }
+/** Persists the visible-tabs list. Storage failures (private mode, quota) are ignored. */
 function saveVisibleTabIds(visibleTabIds) {
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(visibleTabIds));
-  } catch {
-  }
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(visibleTabIds));
+	} catch {}
 }
+/** Resolves an ordered id list to its tab configs, dropping unknown ids. */
 function resolveTabs(ids) {
-  const tabs = [];
-  for (const id of ids) {
-    const tab = tabsById.get(id);
-    if (tab) {
-      tabs.push(tab);
-    }
-  }
-  return tabs;
-}
-function getAvailableTabs(visibleTabIds) {
-  return resolveTabs(getAvailableTabIds(visibleTabIds));
+	const tabs = [];
+	for (const id of ids) {
+		const tab = tabsById.get(id);
+		if (tab) tabs.push(tab);
+	}
+	return tabs;
 }
+/**
+* Resolves the ordered visible ids to their tab configs, dropping, in the extension, tabs that
+* require the Vite plugin.
+*/
 function getVisibleTabs(visibleTabIds, isExtension) {
-  return resolveTabs(visibleTabIds).filter((tab) => !(isExtension && tab.viteOnly));
+	return resolveTabs(visibleTabIds).filter((tab) => !(isExtension && tab.viteOnly));
 }
-export {
-  getAvailableTabIds,
-  getAvailableTabs,
-  getDefaultVisibleTabIds,
-  getVisibleTabs,
-  loadVisibleTabIds,
-  reorderVisibleTabs,
-  resolveTabs,
-  saveVisibleTabIds,
-  setTabVisible
-};
+export { getAvailableTabIds, getAvailableTabs, getDefaultVisibleTabIds, getVisibleTabs, loadVisibleTabIds, reorderVisibleTabs, resolveTabs, saveVisibleTabIds, setTabVisible };

package/dist/ui/packages/devtools/ui/src/devtools/state.qwik.mjs

@@ -1,30 +1,28 @@
 import { getDefaultVisibleTabIds } from "./sidebar-tabs.qwik.mjs";
 function createDevtoolsState(opts) {
-  return {
-    isOpen: false,
-    isPanelFullscreen: false,
-    activeTab: "overview",
-    npmPackages: [],
-    assets: [],
-    components: [],
-    routes: void 0,
-    allDependencies: [],
-    isLoadingDependencies: false,
-    panelBounds: {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    },
-    lastPanelBounds: null,
-    visibleTabIds: getDefaultVisibleTabIds(),
-    isCustomizeOpen: false,
-    isPaletteOpen: false,
-    componentReveal: null,
-    clearPerformanceRequested: false,
-    isExtension: opts?.isExtension ?? false
-  };
+	return {
+		isOpen: false,
+		isPanelFullscreen: false,
+		activeTab: "overview",
+		npmPackages: [],
+		assets: [],
+		components: [],
+		routes: void 0,
+		allDependencies: [],
+		isLoadingDependencies: false,
+		panelBounds: {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		},
+		lastPanelBounds: null,
+		visibleTabIds: getDefaultVisibleTabIds(),
+		isCustomizeOpen: false,
+		isPaletteOpen: false,
+		componentReveal: null,
+		clearPerformanceRequested: false,
+		isExtension: opts?.isExtension ?? false
+	};
 }
-export {
-  createDevtoolsState
-};
+export { createDevtoolsState };

package/dist/ui/packages/devtools/ui/src/devtools/tabs.qwik.mjs

@@ -1,82 +1,60 @@
+import { IconArrowDownTray, IconBoltOutline, IconChartBarOutline, IconClockOutline, IconCodeBracketSolid, IconCubeOutline, IconDiagram3, IconFolderTree, IconMegaphoneMini, IconPhotoOutline } from "../components/Icons/Icons.qwik.mjs";
 import { _jsxSorted } from "@qwik.dev/core";
-import { IconBoltOutline, IconCubeOutline, IconDiagram3, IconFolderTree, IconPhotoOutline, IconMegaphoneMini, IconCodeBracketSolid, IconClockOutline, IconArrowDownTray, IconChartBarOutline } from "../components/Icons/Icons.qwik.mjs";
-const devtoolsTabs = [
-  {
-    id: "overview",
-    title: "Overview",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconBoltOutline, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_0")
-  },
-  {
-    id: "packages",
-    title: "Packages",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconCubeOutline, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_1"),
-    viteOnly: true
-  },
-  {
-    id: "renderTree",
-    title: "Render Tree",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconDiagram3, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_2")
-  },
-  {
-    id: "routes",
-    title: "Routes",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconFolderTree, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_3"),
-    viteOnly: true
-  },
-  {
-    id: "assets",
-    title: "Assets",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconPhotoOutline, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_4"),
-    viteOnly: true
-  },
-  {
-    id: "inspect",
-    title: "Inspect",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconMegaphoneMini, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_5"),
-    viteOnly: true
-  },
-  {
-    id: "codeBreak",
-    title: "Code Break",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconCodeBracketSolid, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_6")
-  },
-  {
-    id: "performance",
-    title: "Performance",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconClockOutline, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_7")
-  },
-  {
-    id: "preloads",
-    title: "Preloads",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconArrowDownTray, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_8")
-  },
-  {
-    id: "buildAnalysis",
-    title: "Build Analysis",
-    renderIcon: () => /* @__PURE__ */ _jsxSorted(IconChartBarOutline, null, {
-      class: "h-6 w-6"
-    }, null, 3, "0V_9"),
-    viteOnly: true
-  }
+var devtoolsTabs = [
+	{
+		id: "overview",
+		title: "Overview",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconBoltOutline, null, { class: "h-6 w-6" }, null, 3, "NS_0")
+	},
+	{
+		id: "packages",
+		title: "Packages",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconCubeOutline, null, { class: "h-6 w-6" }, null, 3, "NS_1"),
+		viteOnly: true
+	},
+	{
+		id: "renderTree",
+		title: "Render Tree",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconDiagram3, null, { class: "h-6 w-6" }, null, 3, "NS_2")
+	},
+	{
+		id: "routes",
+		title: "Routes",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconFolderTree, null, { class: "h-6 w-6" }, null, 3, "NS_3"),
+		viteOnly: true
+	},
+	{
+		id: "assets",
+		title: "Assets",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconPhotoOutline, null, { class: "h-6 w-6" }, null, 3, "NS_4"),
+		viteOnly: true
+	},
+	{
+		id: "inspect",
+		title: "Inspect",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconMegaphoneMini, null, { class: "h-6 w-6" }, null, 3, "NS_5"),
+		viteOnly: true
+	},
+	{
+		id: "codeBreak",
+		title: "Code Break",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconCodeBracketSolid, null, { class: "h-6 w-6" }, null, 3, "NS_6")
+	},
+	{
+		id: "performance",
+		title: "Performance",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconClockOutline, null, { class: "h-6 w-6" }, null, 3, "NS_7")
+	},
+	{
+		id: "preloads",
+		title: "Preloads",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconArrowDownTray, null, { class: "h-6 w-6" }, null, 3, "NS_8")
+	},
+	{
+		id: "buildAnalysis",
+		title: "Build Analysis",
+		renderIcon: () => /*#__PURE__*/ _jsxSorted(IconChartBarOutline, null, { class: "h-6 w-6" }, null, 3, "NS_9"),
+		viteOnly: true
+	}
 ];
-export {
-  devtoolsTabs
-};
+export { devtoolsTabs };

package/dist/ui/packages/devtools/ui/src/features/Assets/Assets.qwik.mjs

@@ -1,50 +1,16 @@
-import { componentQrl, inlinedQrl, _jsxSorted, _wrapProp } from "@qwik.dev/core";
-const Assets = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((_rawProps) => {
-  return /* @__PURE__ */ _jsxSorted("div", null, {
-    class: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
-  }, _rawProps.state.assets?.map((asset) => {
-    const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
-    const fileExt = asset.path.split(".").pop()?.toUpperCase();
-    return /* @__PURE__ */ _jsxSorted("div", null, {
-      class: "border-glass-border bg-card-item-bg hover:bg-card-item-hover-bg overflow-hidden rounded-xl border transition-all duration-200"
-    }, [
-      isImage ? /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "bg-foreground/5 aspect-square overflow-hidden"
-      }, /* @__PURE__ */ _jsxSorted("img", {
-        alt: _wrapProp(asset, "path"),
-        src: _wrapProp(asset, "publicPath")
-      }, {
-        width: 176,
-        height: 176,
-        class: "h-full w-full object-cover"
-      }, null, 3, null), 1, "LV_0") : /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "bg-foreground/5 flex aspect-square items-center justify-center"
-      }, /* @__PURE__ */ _jsxSorted("span", null, {
-        class: "text-muted-foreground font-mono text-2xl"
-      }, fileExt, 1, null), 1, "LV_1"),
-      /* @__PURE__ */ _jsxSorted("div", null, {
-        class: "space-y-2 p-4"
-      }, [
-        /* @__PURE__ */ _jsxSorted("div", {
-          title: _wrapProp(asset, "path")
-        }, {
-          class: "truncate text-sm"
-        }, asset.path.split("/").pop(), 1, null),
-        /* @__PURE__ */ _jsxSorted("div", null, {
-          class: "text-muted-foreground flex items-center justify-between text-xs"
-        }, [
-          /* @__PURE__ */ _jsxSorted("span", null, null, [
-            (asset.size / 1024).toFixed(2),
-            " KB"
-          ], 1, null),
-          /* @__PURE__ */ _jsxSorted("span", null, {
-            class: "bg-foreground/5 rounded-full px-2 py-1"
-          }, fileExt, 1, null)
-        ], 1, null)
-      ], 1, null)
-    ], 1, asset.filePath);
-  }), 1, "LV_2");
+import { _jsxSorted, _wrapProp, componentQrl, inlinedQrl } from "@qwik.dev/core";
+var Assets = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl((_rawProps) => {
+	return /*#__PURE__*/ _jsxSorted("div", null, { class: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" }, _rawProps.state.assets?.map((asset) => {
+		const isImage = asset.path.match(/\.(jpg|jpeg|png|gif|svg|webp)$/i);
+		const fileExt = asset.path.split(".").pop()?.toUpperCase();
+		return /*#__PURE__*/ _jsxSorted("div", null, { class: "border-glass-border bg-card-item-bg hover:bg-card-item-hover-bg overflow-hidden rounded-xl border transition-all duration-200" }, [isImage ? /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 aspect-square overflow-hidden" }, /*#__PURE__*/ _jsxSorted("img", {
+			alt: _wrapProp(asset, "path"),
+			src: _wrapProp(asset, "publicPath")
+		}, {
+			width: 176,
+			height: 176,
+			class: "h-full w-full object-cover"
+		}, null, 3, null), 1, "El_0") : /*#__PURE__*/ _jsxSorted("div", null, { class: "bg-foreground/5 flex aspect-square items-center justify-center" }, /*#__PURE__*/ _jsxSorted("span", null, { class: "text-muted-foreground font-mono text-2xl" }, fileExt, 1, null), 1, "El_1"), /*#__PURE__*/ _jsxSorted("div", null, { class: "space-y-2 p-4" }, [/*#__PURE__*/ _jsxSorted("div", { title: _wrapProp(asset, "path") }, { class: "truncate text-sm" }, asset.path.split("/").pop(), 1, null), /*#__PURE__*/ _jsxSorted("div", null, { class: "text-muted-foreground flex items-center justify-between text-xs" }, [/*#__PURE__*/ _jsxSorted("span", null, null, [(asset.size / 1024).toFixed(2), " KB"], 1, null), /*#__PURE__*/ _jsxSorted("span", null, { class: "bg-foreground/5 rounded-full px-2 py-1" }, fileExt, 1, null)], 1, null)], 1, null)], 1, asset.filePath);
+	}), 1, "El_2");
 }, "Assets_component_3McbsijSMd8"));
-export {
-  Assets
-};
+export { Assets };