@brftech/filex-core 0.2.0 → 0.4.0

package/src/FileExplorer.vue

@@ -45,6 +45,7 @@ import GridView from './components/GridView.vue';
 import ContextMenu, { type ContextAction } from './components/ContextMenu.vue';
 import UploadProgress from './components/UploadProgress.vue';
 import PendingOpsTray from './components/PendingOpsTray.vue';
+import InspectorPanel from './components/InspectorPanel.vue'; /* koru:k1 */
 /* cila:c wiring */
 import CommandPalette from './components/CommandPalette.vue';
 import ShortcutsHelp from './components/ShortcutsHelp.vue';
@@ -410,6 +411,55 @@ const convertTarget = ref<FileNode | null>(null);
 const showPerm = ref(false);
 const permTarget = ref<FileNode | null>(null);
 
+/* === koru:k1 — inspector (details) panel ===
+ * Open/closed preference persists under `filex.inspector`; the panel itself
+ * mounts with v-if so the closed state leaves zero DOM behind. */
+const INSPECTOR_LS_KEY = 'filex.inspector';
+const showInspector = ref<boolean>(
+  (() => {
+    try {
+      return localStorage.getItem(INSPECTOR_LS_KEY) === '1';
+    } catch {
+      return false;
+    }
+  })(),
+);
+function persistInspector(v: boolean) {
+  try {
+    localStorage.setItem(INSPECTOR_LS_KEY, v ? '1' : '0');
+  } catch {
+    /* quota / private mode */
+  }
+}
+function toggleInspector() {
+  showInspector.value = !showInspector.value;
+  persistInspector(showInspector.value);
+}
+function openInspector() {
+  if (!showInspector.value) {
+    showInspector.value = true;
+    persistInspector(true);
+  }
+}
+function closeInspector() {
+  if (showInspector.value) {
+    showInspector.value = false;
+    persistInspector(false);
+  }
+}
+// Folder summary label for the no-selection state.
+const inspectorDirLabel = computed(() => {
+  if (trashMode.value) return t('node.trash');
+  const p = (currentPath.value ?? '').replace(/^\/+|\/+$/g, '');
+  if (!p) return adapter.value || t('breadcrumb.root');
+  return p.split('/').pop() || p;
+});
+function onInspectorManage(n: FileNode) {
+  permTarget.value = n;
+  showPerm.value = true;
+}
+/* === /koru:k1 === */
+
 // RBAC helpers. '' means ACL is not enforced on this storage → full access
 // (the pre-RBAC default). Otherwise 'editor'/'owner' may write; only 'owner'
 // manages permissions. Enforcement is server-side; this just shapes the menu.
@@ -443,6 +493,40 @@ const ctxRef = ref<InstanceType<typeof ContextMenu> | null>(null);
 const rootEl = ref<HTMLElement | null>(null);
 const toolbarRef = ref<InstanceType<typeof Toolbar> | null>(null);
 
+/* bag:b4 — narrow/embed mini mode.
+ * isNarrow: container width < 560px (ResizeObserver on the .fe root, so it
+ * tracks the EMBED container, not the viewport) → root gets `fe--narrow`,
+ * the toolbar collapses and the upload FAB appears.
+ * isCoarse: touch-first device → context menus render as a bottom sheet. */
+const isNarrow = ref(false);
+const isCoarse = ref(false);
+let narrowRO: ResizeObserver | undefined;
+let coarseMq: MediaQueryList | undefined;
+function syncCoarsePointer(e?: MediaQueryListEvent | MediaQueryList) {
+  isCoarse.value = !!(e && 'matches' in e && e.matches);
+}
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined' && rootEl.value) {
+    narrowRO = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect?.width ?? rootEl.value?.clientWidth ?? 0;
+      isNarrow.value = w > 0 && w < 560;
+    });
+    narrowRO.observe(rootEl.value);
+  }
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    coarseMq = window.matchMedia('(pointer: coarse)');
+    syncCoarsePointer(coarseMq);
+    coarseMq.addEventListener?.('change', syncCoarsePointer);
+  }
+});
+onBeforeUnmount(() => {
+  narrowRO?.disconnect();
+  narrowRO = undefined;
+  coarseMq?.removeEventListener?.('change', syncCoarsePointer);
+  coarseMq = undefined;
+});
+/* /bag:b4 */
+
 // Toast (tiny, no lib). Evolved into a snackbar: plain messages keep the old
 // 2.5s auto-hide; messages carrying an action ("Geri Al") stay 8s and can be
 // dismissed by click or Esc.
@@ -991,6 +1075,9 @@ useKeyboardShortcuts(rootEl, {
     showPreview.value = false;
     ctxRef.value?.hide();
     dismissToast();
+    /* koru:k1 — Esc closes the narrow-mode inspector overlay only; the wide
+       side panel is a persistent surface toggled by `i` / the toolbar. */
+    if (isNarrow.value) closeInspector();
   },
   onFocusSearch: () => toolbarRef.value?.focusSearch(),
   onCut: () => cut(),
@@ -1005,6 +1092,7 @@ useKeyboardShortcuts(rootEl, {
     showShortcutsHelp.value = true;
   },
   /* /cila:c wiring */
+  onToggleInspector: () => toggleInspector() /* koru:k1 */,
   hasSelection: () => !selection.isEmpty.value,
 });
 
@@ -1303,6 +1391,7 @@ function selectionActionList(sel: FileNode[]): ContextAction[] {
     { key: 'download', label: t('ctx.download'), icon: '⬇', hidden: !single, disabled: !isFile },
     { key: 'convert', label: t('ctx.convert'), icon: '🔄', hidden: !single || !effectiveConvertUrl.value || !w, disabled: !isFile },
     { key: 'access', label: accessLabel, icon: '🔗', hidden: !single || !w },
+    { key: 'details', label: t('ctx.details'), icon: 'ℹ', hidden: !any } /* koru:k1 */,
     { key: 'copy-id', label: copyIdLabel, icon: '🆔', hidden: !singleHasId, disabled: !singleHasId },
     { divider: true, key: 'sep1', label: '', hidden: !w },
     { key: 'rename', label: t('ctx.rename'), icon: '✎', hidden: !single || !w, disabled: !single },
@@ -1379,6 +1468,9 @@ async function dispatchItemAction(key: string, targets: FileNode[]) {
         showPerm.value = true;
       }
       break;
+    case 'details' /* koru:k1 */:
+      openInspector();
+      break;
     case 'copy-id':
       if (targets[0] && typeof targets[0].id === 'number') {
         const id = targets[0].id;
@@ -1964,6 +2056,7 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       'fe--theme-dark': config.theme === 'dark',
       'fe--is-dragover': dragOver,
       'fe--density-compact': density === 'compact' /* cila:a density */,
+      'fe--narrow': isNarrow /* bag:b4 */,
     }"
     tabindex="-1"
     @dragenter="onDragEnter"
@@ -1985,6 +2078,10 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       :at-virtual-root="atVirtualRoot"
       :can-write="canWriteHere"
       :locale="locale"
+      :narrow="isNarrow /* bag:b4 */"
+      :theme="config.theme || 'auto' /* bag:b4 */"
+      :inspector-open="showInspector /* koru:k1 */"
+      @toggle-inspector="toggleInspector /* koru:k1 */"
       @update:view-mode="viewMode = $event"
       @update:search-query="searchQuery = $event"
       @update:density="density = $event"
@@ -2026,6 +2123,10 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       </span>
     </div>
 
+    <!-- koru:k1 — fe__main lays the listing body and the inspector panel out
+         as flex siblings (row). Without the inspector open it is visually
+         identical to the previous direct-child fe__body. -->
+    <div class="fe__main">
     <div class="fe__body" @click.self="selection.clear()">
       <!-- Initial load: skeleton ghosts (view-mode aware) instead of an
            empty/"no files" flash. Only when there's nothing yet — navigation
@@ -2210,6 +2311,26 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       />
     </div>
 
+    <!-- koru:k1 — inspector (details) panel; v-if keeps the closed state
+         free of any DOM. Narrow mode renders it as a full-size overlay. -->
+    <InspectorPanel
+      v-if="showInspector"
+      :api="api"
+      :nodes="selection.nodes.value"
+      :dir-label="inspectorDirLabel"
+      :dir-count="files.length"
+      :dir-perm="dirPerm"
+      :locale="locale"
+      :narrow="isNarrow"
+      :thumb-src="thumbs.src"
+      @close="closeInspector"
+      @manage-permissions="onInspectorManage"
+      @toast="flashToast"
+      @changed="() => load()"
+    />
+    </div>
+    <!-- /koru:k1 fe__main -->
+
     <div v-if="dragOver" class="fe__dragover">
       <div class="fe__dragover-card">
         <span class="fe-icon">⬆</span>
@@ -2230,10 +2351,35 @@ function buildAuthHeaders(extra: Record<string, string> = {}) {
       @dismiss="(id) => pendingOps.dismiss(id)"
     />
 
+    <!-- bag:b4 — narrow-mode upload FAB (hidden in trash / read-only /
+         virtual root; PendingOpsTray+UploadProgress shift up via CSS). -->
+    <button
+      v-if="isNarrow && emptyCanUpload"
+      type="button"
+      class="fe-fab"
+      :title="t('toolbar.upload')"
+      :aria-label="t('toolbar.upload')"
+      @click="triggerUpload"
+    >
+      <svg
+        class="fe-ficon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.2"
+        stroke-linecap="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path d="M12 5v14M5 12h14" />
+      </svg>
+    </button>
+
     <ContextMenu
       ref="ctxRef"
       :locale="locale"
       :theme="config.theme || 'auto'"
+      :sheet="isCoarse /* bag:b4 */"
       :actions="contextActions"
       @select="onContextAction"
     />

package/src/components/ContextMenu.vue

@@ -31,13 +31,22 @@ const props = defineProps<{
    * explorer tree.
    */
   theme?: ThemeMode;
+  /**
+   * bag:b4 — bottom-sheet presentation for coarse-pointer (touch)
+   * contexts. When true the menu renders as a full-width sheet sliding
+   * up from the bottom edge (grab handle, ≥44px touch targets; closed
+   * by overlay tap, dragging the handle down, or Esc). The position
+   * passed to show() is ignored. When absent/false the classic anchored
+   * menu renders — desktop right-click behavior is untouched.
+   */
+  sheet?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'select', action: ContextAction, target: FileNode[]): void;
 }>();
 
-void useLocale(() => props.locale); // eager-instantiate t/lookup so future templates can reuse
+const { t } = useLocale(() => props.locale); // bag:b4 — sheet aria labels need t()
 
 const open = ref(false);
 const x = ref(0);
@@ -54,6 +63,12 @@ async function show(ev: { clientX: number; clientY: number }, nodes: FileNode[])
   // bottom/right edge doesn't push the menu off-screen (it opens down-right
   // from the cursor by default).
   await nextTick();
+  if (props.sheet) {
+    // bag:b4 — sheet mode: no anchoring; focus the panel so Esc closes it
+    // without requiring a prior click inside.
+    sheetEl.value?.focus();
+    return;
+  }
   clampToViewport();
 }
 
@@ -74,7 +89,48 @@ function clampToViewport() {
 
 function hide() {
   open.value = false;
+  /* bag:b4 — reset any in-flight sheet drag so reopening starts clean. */
+  sheetDragging.value = false;
+  sheetDragY.value = 0;
+}
+
+/* bag:b4 — sheet drag-to-dismiss. Bound to the grab handle only, so the
+ * scrollable item list keeps its native touch scrolling. Dragging past the
+ * threshold closes; anything less snaps back. */
+const sheetEl = ref<HTMLElement | null>(null);
+const sheetDragging = ref(false);
+const sheetDragY = ref(0);
+let sheetDragStart = 0;
+
+function onSheetDragStart(e: TouchEvent) {
+  const t0 = e.touches[0];
+  if (!t0) return;
+  sheetDragging.value = true;
+  sheetDragStart = t0.clientY;
+  sheetDragY.value = 0;
+}
+function onSheetDragMove(e: TouchEvent) {
+  if (!sheetDragging.value) return;
+  const t0 = e.touches[0];
+  if (!t0) return;
+  sheetDragY.value = Math.max(0, t0.clientY - sheetDragStart);
 }
+function onSheetDragEnd() {
+  if (!sheetDragging.value) return;
+  const shouldClose = sheetDragY.value > 72;
+  sheetDragging.value = false;
+  if (shouldClose) {
+    hide();
+  } else {
+    sheetDragY.value = 0;
+  }
+}
+const sheetStyle = computed(() =>
+  sheetDragY.value > 0
+    ? { transform: `translateY(${sheetDragY.value}px)`, transition: 'none' }
+    : undefined,
+);
+/* /bag:b4 */
 
 function pick(a: ContextAction) {
   if (a.disabled) return;
@@ -113,17 +169,59 @@ defineExpose({ show, hide });
 
 <template>
   <Teleport to="body">
-    <transition name="fe-ctx">
+    <transition :name="sheet ? 'fe-sheet' : 'fe-ctx'">
       <div
         v-if="open"
         class="fe-ctx-backdrop"
-        :class="themeClass"
+        :class="[themeClass, { 'fe-ctx-backdrop--sheet': sheet }]"
         :data-prefers-dark="prefersDark ? '1' : '0'"
         @click="hide"
         @contextmenu.prevent="hide"
         @keydown="onKey"
       >
+        <!-- bag:b4 — bottom-sheet variant (coarse pointer / touch) -->
+        <div
+          v-if="sheet"
+          ref="sheetEl"
+          class="fe-sheet"
+          role="menu"
+          :aria-label="t('sheet.menu')"
+          tabindex="-1"
+          :style="sheetStyle"
+          @click.stop
+        >
+          <div
+            class="fe-sheet__handle"
+            role="button"
+            tabindex="0"
+            :aria-label="t('sheet.close')"
+            @click="hide"
+            @keydown.enter.prevent="hide"
+            @touchstart.passive="onSheetDragStart"
+            @touchmove.passive="onSheetDragMove"
+            @touchend="onSheetDragEnd"
+            @touchcancel="onSheetDragEnd"
+          />
+          <div class="fe-sheet__items">
+            <template v-for="(a, i) in visibleActions" :key="a.key || i">
+              <div v-if="a.divider" class="fe-ctx__sep" />
+              <button
+                v-else
+                type="button"
+                class="fe-ctx__item fe-sheet__item"
+                :class="{ 'is-danger': a.danger, 'is-disabled': a.disabled }"
+                :disabled="a.disabled"
+                role="menuitem"
+                @click="pick(a)"
+              >
+                <span v-if="a.icon" class="fe-ctx__icon" aria-hidden="true">{{ a.icon }}</span>
+                <span class="fe-ctx__label">{{ a.label }}</span>
+              </button>
+            </template>
+          </div>
+        </div>
         <div
+          v-else
           ref="menuEl"
           class="fe-ctx"
           role="menu"