@olares/lares-mobile 0.15.4 → 0.15.6

package/src/desktop/DesktopTodos.vue

@@ -0,0 +1,52 @@
+<template>
+  <Transition name="lares-panel">
+    <div v-if="rows.length" class="desktop-todos">
+      <button type="button" class="desktop-todos__header" :aria-expanded="open" @click="open = !open">
+        <span>{{ t("todo.progress", { done, total: rows.length }) }}</span>
+        <span class="desktop-todos__chevron" :data-open="open ? 'true' : 'false'" aria-hidden="true">⌄</span>
+      </button>
+      <ul class="desktop-todos__list" :data-open="open ? 'true' : 'false'">
+        <li v-for="(row, index) in rows" :key="`${index}-${row.content}`" :data-status="row.status">
+          <span aria-hidden="true">{{ row.status === "completed" ? "✓" : row.status === "in_progress" ? "●" : "○" }}</span>
+          <span>{{ row.content }}</span>
+        </li>
+      </ul>
+    </div>
+  </Transition>
+</template>
+
+<script>
+export default {
+  name: "LaresDesktopTodos",
+  props: {
+    rows: { type: Array, default: () => [] },
+    t: { type: Function, required: true },
+  },
+  data() {
+    return { open: true };
+  },
+  computed: {
+    done() {
+      return this.rows.filter((row) => row.status === "completed").length;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.desktop-todos { box-sizing:border-box; width:calc(100% - 24px); margin:0 auto -3px; border:1px solid var(--q-separator); border-bottom:0; border-radius:12px 12px 0 0; padding:3px 0 6px; background:var(--q-background-3); color:var(--q-ink-2); font-size:13px; }
+.desktop-todos__header { display:flex; width:100%; height:32px; align-items:center; justify-content:space-between; border:0; padding:0 12px; background:transparent; color:inherit; font:inherit; font-weight:500; cursor:pointer; }
+.desktop-todos__chevron { display:inline-block; transition:transform var(--lares-duration-fast, 120ms) var(--lares-ease-out, ease); }
+.desktop-todos__chevron[data-open="false"] { transform:rotate(180deg); }
+.desktop-todos__list { max-height:0; overflow:hidden; margin:0; padding:0 12px; list-style:none; opacity:0; transition:max-height var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1)), opacity var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1)); }
+.desktop-todos__list[data-open="true"] { max-height:120px; overflow:auto; opacity:1; }
+@media (prefers-reduced-motion: reduce) {
+  .desktop-todos__chevron,
+  .desktop-todos__list { transition:none; }
+  .desktop-todos__list[data-open="false"] { opacity:1; }
+}
+.desktop-todos li { display:flex; min-height:25px; align-items:flex-start; gap:8px; }
+.desktop-todos li > span:first-child { color:var(--q-ink-3); }
+.desktop-todos li[data-status="in_progress"] > span:first-child { color:var(--q-blue-default); }
+.desktop-todos li[data-status="completed"] { color:var(--q-ink-3); text-decoration:line-through; }
+</style>

package/src/desktop/DirectoryBrowser.vue

@@ -0,0 +1,170 @@
+<template>
+  <LaresPcDialog
+    :open="state.open"
+    :title="t('desktop.chooseFolder')"
+    :close-label="t('desktop.close')"
+    :busy="state.creating || state.creatingFolder"
+    :width="620"
+    @close="$emit('close')"
+  >
+    <div class="directory-browser">
+      <nav v-if="state.listing" class="directory-browser__crumbs" :aria-label="t('desktop.folderPath')">
+        <button v-for="crumb in state.listing.crumbs" :key="crumb.path" type="button" @click="$emit('browse', crumb.path)">
+          {{ crumb.path === state.listing.home ? t("desktop.home") : crumb.name }}
+        </button>
+      </nav>
+      <div class="directory-browser__body">
+        <p v-if="state.loading" class="directory-browser__status">{{ t("desktop.loadingFolders") }}</p>
+        <p v-else-if="state.error" class="directory-browser__error">{{ state.error }}</p>
+        <template v-else-if="state.listing">
+          <div
+            v-for="entry in visibleEntries"
+            :key="entry.path"
+            class="directory-browser__row"
+            role="button"
+            tabindex="0"
+            @dblclick="$emit('browse', entry.path)"
+            @click="selected = entry.path"
+            @keydown.enter="$emit('browse', entry.path)"
+            :data-selected="selected === entry.path"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 7.5h6l1.6 2H20.5v9H3.5z" /></svg>
+            <span>{{ entry.name }}</span>
+            <button type="button" class="directory-browser__open" @click.stop="$emit('browse', entry.path)">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
+            </button>
+          </div>
+          <p v-if="visibleEntries.length === 0" class="directory-browser__status">{{ t("desktop.noFolders") }}</p>
+        </template>
+      </div>
+    </div>
+    <template #footer>
+      <div class="directory-browser__footer">
+        <p class="directory-browser__path">{{ selected || state.listing?.path || "" }}</p>
+        <div class="directory-browser__footer-row">
+          <div class="directory-browser__footer-left">
+            <button
+              type="button"
+              class="directory-browser__new-folder"
+              :disabled="!state.listing?.path || state.loading || state.creatingFolder"
+              @click="newFolderOpen = true"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+              <span>{{ t("desktop.newFolder") }}</span>
+            </button>
+            <label class="directory-browser__hidden">
+              <input
+                type="checkbox"
+                :checked="state.showHidden"
+                @change="$emit('toggle-hidden', $event.target.checked)"
+              />
+              <span>{{ t("desktop.showHiddenFiles") }}</span>
+            </label>
+          </div>
+          <div class="directory-browser__footer-right">
+            <button type="button" class="directory-browser__cancel" :disabled="state.creating" @click="$emit('close')">
+              {{ t("desktop.cancel") }}
+            </button>
+            <button
+              type="button"
+              class="directory-browser__choose"
+              :disabled="state.loading || state.creating || !(selected || state.listing?.path)"
+              @click="$emit('choose', selected || state.listing.path)"
+            >
+              {{ state.creating ? t("desktop.addingWorkspace") : t("desktop.addWorkspace") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </LaresPcDialog>
+  <LaresDirectoryNewFolder
+    :open="newFolderOpen"
+    :busy="state.creatingFolder"
+    :t="t"
+    @close="newFolderOpen = false"
+    @create="onCreateFolder"
+  />
+</template>
+
+<script>
+import LaresPcDialog from "./ui/PcDialog.vue";
+import LaresDirectoryNewFolder from "./DirectoryNewFolder.vue";
+
+export default {
+  name: "LaresDirectoryBrowser",
+  components: { LaresPcDialog, LaresDirectoryNewFolder },
+  props: {
+    state: { type: Object, required: true },
+    t: { type: Function, required: true },
+  },
+  emits: ["close", "browse", "choose", "create-folder", "toggle-hidden"],
+  data() {
+    return { selected: "", newFolderOpen: false };
+  },
+  computed: {
+    visibleEntries() {
+      const entries = this.state.listing?.entries ?? [];
+      return this.state.showHidden ? entries : entries.filter((entry) => !entry.hidden);
+    },
+  },
+  watch: {
+    "state.listing.path"() {
+      this.selected = this.state.selectPath || "";
+    },
+    "state.selectPath"(path) {
+      if (path) this.selected = path;
+    },
+    "state.creatingFolder"(busy, was) {
+      if (was && !busy && !this.state.error) this.newFolderOpen = false;
+    },
+    "state.open"(open) {
+      if (!open) {
+        this.newFolderOpen = false;
+        this.selected = "";
+      }
+    },
+  },
+  methods: {
+    onCreateFolder(name) {
+      this.$emit("create-folder", name);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.directory-browser { display:flex; height:min(440px, calc(100vh - 180px)); flex-direction:column; margin:-16px; }
+.directory-browser svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
+.directory-browser__crumbs { display:flex; gap:3px; min-height:38px; align-items:center; overflow:auto; padding:0 14px; border-bottom:1px solid var(--q-separator); }
+.directory-browser__crumbs button { flex-shrink:0; border:0; border-radius:5px; padding:4px 6px; background:transparent; color:var(--q-ink-3); font-size:14px; }
+.directory-browser__crumbs button:hover { background:var(--q-background-hover); color:var(--q-ink-1); }
+.directory-browser__body { flex:1; min-height:0; overflow:auto; padding:8px; }
+.directory-browser__row { display:flex; width:100%; align-items:center; gap:9px; border:0; border-radius:7px; padding:8px 10px; background:transparent; color:var(--q-ink-1); text-align:left; }
+.directory-browser__row:hover,
+.directory-browser__row[data-selected="true"] { background:var(--q-background-hover); }
+.directory-browser__row > span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.directory-browser__open { display:grid; width:26px; height:26px; place-items:center; border:0; background:transparent; color:var(--q-ink-3); }
+.directory-browser__status,
+.directory-browser__error { margin:20px; color:var(--q-ink-3); font-size:15px; text-align:center; }
+.directory-browser__error { color:var(--q-orange-default); }
+.directory-browser__footer { display:flex; width:100%; flex-direction:column; gap:10px; }
+.directory-browser__path { min-width:0; margin:0; overflow:hidden; color:var(--q-ink-3); font-size:13px; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
+.directory-browser__footer-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
+.directory-browser__footer-left { display:flex; min-width:0; flex:1; align-items:center; gap:12px; }
+.directory-browser__footer-right { display:flex; flex-shrink:0; align-items:center; gap:8px; }
+.directory-browser__new-folder { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--q-separator); border-radius:999px; padding:0 10px; height:32px; background:transparent; color:var(--q-ink-2); font:inherit; font-size:13px; white-space:nowrap; }
+.directory-browser__new-folder svg { width:14px; height:14px; }
+.directory-browser__hidden { display:inline-flex; align-items:center; gap:6px; color:var(--q-ink-3); font-size:13px; white-space:nowrap; cursor:pointer; }
+.directory-browser__hidden input { width:15px; height:15px; margin:0; }
+.directory-browser__cancel,
+.directory-browser__choose { min-width:76px; height:32px; border-radius:999px; padding:0 12px; }
+.directory-browser__cancel { border:1px solid var(--q-separator); background:transparent; color:var(--q-ink-2); }
+.directory-browser__choose { border:0; background:var(--q-blue-default); color:var(--q-ink-on-brand); }
+.directory-browser button,
+.directory-browser__cancel,
+.directory-browser__choose { cursor:pointer; font:inherit; }
+.directory-browser button:disabled,
+.directory-browser__cancel:disabled,
+.directory-browser__choose:disabled { opacity:.5; cursor:default; }
+</style>

package/src/desktop/DirectoryNewFolder.vue

@@ -0,0 +1,124 @@
+<template>
+  <LaresPcDialog
+    :open="open"
+    :title="t('desktop.newFolder')"
+    :close-label="t('desktop.close')"
+    :busy="busy"
+    :width="420"
+    @close="$emit('close')"
+  >
+    <div class="directory-new-folder">
+      <input
+        ref="input"
+        v-model="value"
+        class="directory-new-folder__input"
+        :placeholder="t('desktop.untitledFolder')"
+        :disabled="busy"
+        @keydown.enter.prevent="submit"
+      />
+    </div>
+    <template #footer>
+      <button type="button" class="directory-new-folder__cancel" :disabled="busy" @click="$emit('close')">
+        {{ t("desktop.cancel") }}
+      </button>
+      <button
+        type="button"
+        class="directory-new-folder__create"
+        :disabled="busy || !value.trim()"
+        @click="submit"
+      >
+        {{ t("desktop.createFolder") }}
+      </button>
+    </template>
+  </LaresPcDialog>
+</template>
+
+<script>
+import LaresPcDialog from "./ui/PcDialog.vue";
+
+export default {
+  name: "LaresDirectoryNewFolder",
+  components: { LaresPcDialog },
+  props: {
+    open: { type: Boolean, default: false },
+    busy: { type: Boolean, default: false },
+    t: { type: Function, required: true },
+  },
+  emits: ["close", "create"],
+  data() {
+    return { value: "" };
+  },
+  watch: {
+    open(value) {
+      if (!value) {
+        this.value = "";
+        return;
+      }
+      this.value = this.t("desktop.untitledFolder");
+      this.$nextTick(() => {
+        this.$refs.input?.focus();
+        this.$refs.input?.select();
+      });
+    },
+  },
+  methods: {
+    submit() {
+      const name = this.value.trim();
+      if (!name || this.busy) return;
+      this.$emit("create", name);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.directory-new-folder {
+  padding-inline: 12px;
+}
+
+.directory-new-folder__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 40px;
+  border: 1px solid var(--q-input-stroke, var(--q-separator));
+  border-radius: 999px;
+  padding: 0 14px;
+  background: transparent;
+  color: var(--q-ink-1);
+  font: inherit;
+  font-size: 15px;
+}
+
+.directory-new-folder__input:focus {
+  outline: none;
+  border-color: var(--q-blue-default);
+}
+
+.directory-new-folder__cancel,
+.directory-new-folder__create {
+  min-width: 76px;
+  height: 32px;
+  border-radius: 999px;
+  padding: 0 14px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.directory-new-folder__cancel {
+  border: 1px solid var(--q-separator);
+  background: transparent;
+  color: var(--q-ink-2);
+}
+
+.directory-new-folder__create {
+  border: 0;
+  background: var(--q-blue-default);
+  color: var(--q-ink-on-brand);
+}
+
+.directory-new-folder__cancel:disabled,
+.directory-new-folder__create:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+</style>

package/src/desktop/ui/PcDialog.vue

@@ -0,0 +1,85 @@
+<template>
+  <Teleport to="body">
+    <Transition name="lares-dialog">
+      <div v-if="open" class="lares-pc-dialog" role="dialog" aria-modal="true" :aria-labelledby="titleId">
+        <button class="lares-pc-dialog__backdrop" type="button" :aria-label="closeLabel" @click="close" />
+        <section class="lares-pc-dialog__surface" :style="{ width: surfaceWidth }">
+        <header class="lares-pc-dialog__header">
+          <div class="lares-pc-dialog__title">
+            <h2 :id="titleId">{{ title }}</h2>
+            <button type="button" class="lares-pc-dialog__close" :aria-label="closeLabel" @click="close">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 7 10 10M17 7 7 17" /></svg>
+            </button>
+          </div>
+          <p v-if="description">{{ description }}</p>
+        </header>
+        <div class="lares-pc-dialog__body">
+          <slot />
+        </div>
+        <footer v-if="$slots.footer" class="lares-pc-dialog__footer">
+          <slot name="footer" />
+        </footer>
+        </section>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script>
+let dialogId = 0;
+
+export default {
+  name: "LaresPcDialog",
+  props: {
+    open: { type: Boolean, default: false },
+    title: { type: String, required: true },
+    description: { type: String, default: "" },
+    closeLabel: { type: String, default: "Close" },
+    width: { type: [Number, String], default: 440 },
+    busy: { type: Boolean, default: false },
+  },
+  emits: ["close"],
+  data() {
+    dialogId += 1;
+    return { titleId: `lares-pc-dialog-${dialogId}` };
+  },
+  computed: {
+    surfaceWidth() {
+      return typeof this.width === "number" ? `${this.width}px` : this.width;
+    },
+  },
+  watch: {
+    open(value) {
+      if (value) window.addEventListener("keydown", this.onKey);
+      else window.removeEventListener("keydown", this.onKey);
+    },
+  },
+  beforeUnmount() {
+    window.removeEventListener("keydown", this.onKey);
+  },
+  methods: {
+    close() {
+      if (!this.busy) this.$emit("close");
+    },
+    onKey(event) {
+      if (event.key === "Escape") this.close();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-pc-dialog { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; color:var(--q-ink-1); }
+.lares-pc-dialog__backdrop { position:absolute; inset:0; border:0; background:rgb(0 0 0 / 46%); }
+.lares-pc-dialog__surface { position:relative; display:flex; max-width:calc(100vw - 48px); max-height:calc(100vh - 48px); flex-direction:column; overflow:hidden; border:1px solid var(--q-separator); border-radius:12px; background:var(--q-background-1); box-shadow:0 18px 60px rgb(0 0 0 / 32%); }
+/* 12px + the 30px close button + 12px keeps a title-only header at 54px. */
+.lares-pc-dialog__header { display:flex; flex-shrink:0; flex-direction:column; padding:12px 16px; border-bottom:1px solid var(--q-separator); }
+.lares-pc-dialog__title { display:flex; min-height:30px; align-items:center; justify-content:space-between; gap:16px; }
+.lares-pc-dialog__header h2 { margin:0; font-size:17px; font-weight:600; line-height:22px; }
+.lares-pc-dialog__header p { margin:2px 0 0; color:var(--q-ink-3); font-size:13px; line-height:18px; }
+.lares-pc-dialog__close { display:grid; width:30px; height:30px; flex-shrink:0; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--q-ink-2); cursor:pointer; }
+.lares-pc-dialog__close:hover { background:var(--q-background-hover); }
+.lares-pc-dialog__close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
+.lares-pc-dialog__body { min-height:0; overflow:auto; padding:16px; }
+.lares-pc-dialog__footer { display:flex; min-height:58px; flex-shrink:0; align-items:center; justify-content:flex-end; gap:8px; padding:0 16px; border-top:1px solid var(--q-separator); }
+</style>

package/src/desktop/ui/PcPopover.vue

@@ -0,0 +1,110 @@
+<template>
+  <span ref="anchor" class="lares-pc-popover">
+    <slot name="trigger" :open="modelValue" :toggle="toggle" :close="close" />
+    <Teleport to="body">
+      <Transition name="lares-popover">
+        <div v-if="modelValue" class="lares-pc-popover__layer" @mousedown.self="close">
+          <div
+            ref="panel"
+            class="lares-pc-popover__panel"
+            :style="panelStyle"
+            role="menu"
+            @mousedown.stop
+          >
+            <slot :close="close" />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </span>
+</template>
+
+<script>
+import { placePanel } from "./place.js";
+
+export default {
+  name: "LaresPcPopover",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    width: { type: [Number, String], default: 220 },
+    placement: { type: String, default: "bottom-end" },
+    minPanelHeight: { type: Number, default: 120 },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      panel: { top: "", bottom: "", left: "0px", width: "220px", maxHeight: "320px" },
+    };
+  },
+  computed: {
+    panelStyle() {
+      return this.panel;
+    },
+  },
+  watch: {
+    modelValue(open) {
+      if (open) {
+        window.addEventListener("resize", this.place);
+        window.addEventListener("scroll", this.place, true);
+        window.addEventListener("keydown", this.onKey);
+        this.$nextTick(this.place);
+      } else {
+        this.unlisten();
+      }
+    },
+  },
+  beforeUnmount() {
+    this.unlisten();
+  },
+  methods: {
+    toggle() {
+      this.$emit("update:modelValue", !this.modelValue);
+    },
+    close() {
+      this.$emit("update:modelValue", false);
+    },
+    unlisten() {
+      window.removeEventListener("resize", this.place);
+      window.removeEventListener("scroll", this.place, true);
+      window.removeEventListener("keydown", this.onKey);
+    },
+    onKey(event) {
+      if (event.key === "Escape") this.close();
+    },
+    place() {
+      const anchor = this.$refs.anchor;
+      if (!anchor) return;
+      const box = anchor.getBoundingClientRect();
+      const width = this.width === "anchor"
+        ? box.width
+        : typeof this.width === "number"
+          ? this.width
+          : Number.parseFloat(this.width) || box.width;
+      this.panel = placePanel({
+        box,
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        width,
+        placement: this.placement,
+        minHeight: this.minPanelHeight,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-pc-popover { display:inline-flex; min-width:0; }
+.lares-pc-popover__layer { position:fixed; z-index:9000; inset:0; }
+.lares-pc-popover__panel {
+  position:fixed;
+  box-sizing:border-box;
+  overflow-x:hidden;
+  overflow-y:auto;
+  border:1px solid var(--q-separator);
+  border-radius:8px;
+  padding:6px;
+  background:var(--q-background-1);
+  color:var(--q-ink-1);
+  box-shadow:0 8px 28px rgb(0 0 0 / 20%);
+}
+</style>

package/src/desktop/ui/PcTooltip.vue

@@ -0,0 +1,95 @@
+<template>
+  <span
+    ref="anchor"
+    class="lares-pc-tooltip"
+    @mouseenter="schedule"
+    @mouseleave="hide"
+    @focusin="schedule"
+    @focusout="hide"
+    @click="hide"
+  >
+    <slot />
+    <Teleport to="body">
+      <div v-if="shown" class="lares-pc-tooltip__chip" role="tooltip" :style="chip">{{ label }}</div>
+    </Teleport>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "LaresPcTooltip",
+  props: {
+    label: { type: String, default: "" },
+    placement: { type: String, default: "bottom" },
+    delay: { type: Number, default: 120 },
+  },
+  data() {
+    return {
+      open: false,
+      timer: 0,
+      chip: { top: "0px", left: "0px" },
+    };
+  },
+  computed: {
+    shown() {
+      return this.open && Boolean(this.label);
+    },
+  },
+  watch: {
+    label(value) {
+      if (this.open && value) this.$nextTick(this.place);
+    },
+  },
+  beforeUnmount() {
+    this.hide();
+  },
+  methods: {
+    schedule() {
+      if (!this.label) return;
+      window.clearTimeout(this.timer);
+      this.timer = window.setTimeout(() => {
+        this.open = true;
+        window.addEventListener("scroll", this.hide, true);
+        this.$nextTick(this.place);
+      }, this.delay);
+    },
+    hide() {
+      window.clearTimeout(this.timer);
+      this.timer = 0;
+      if (!this.open) return;
+      this.open = false;
+      window.removeEventListener("scroll", this.hide, true);
+    },
+    place() {
+      const anchor = this.$refs.anchor;
+      if (!anchor) return;
+      const box = anchor.getBoundingClientRect();
+      const gap = 4;
+      const above = this.placement === "top";
+      this.chip = {
+        top: above ? `${Math.max(6, box.top - gap)}px` : `${box.bottom + gap}px`,
+        left: `${Math.max(6, box.left)}px`,
+        transform: above ? "translateY(-100%)" : "none",
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-pc-tooltip { display:inline-flex; min-width:0; }
+.lares-pc-tooltip__chip {
+  position:fixed;
+  z-index:9500;
+  max-width:260px;
+  border-radius:6px;
+  padding:4px 8px;
+  background:var(--q-background-3);
+  color:var(--q-ink-1);
+  font-size:14px;
+  line-height:18px;
+  white-space:nowrap;
+  pointer-events:none;
+  box-shadow:0 4px 14px rgb(0 0 0 / 24%);
+}
+</style>

package/src/desktop/ui/place.js

@@ -0,0 +1,24 @@
+const GAP = 5;
+const EDGE = 8;
+
+/**
+ * Fixed-position style for a panel hanging off `box`. Composer menus sit at the
+ * bottom of the window and open upward; the side only flips when the requested
+ * one is too cramped to read.
+ */
+export function placePanel({ box, viewport, width, placement = "bottom-end", minHeight = 120 }) {
+  const below = viewport.height - box.bottom - GAP;
+  const above = box.top - GAP;
+  const preferTop = placement.startsWith("top");
+  const wanted = preferTop ? above : below;
+  const other = preferTop ? below : above;
+  const useTop = preferTop !== (wanted < minHeight && other > wanted);
+  const rawLeft = placement.endsWith("start") ? box.left : box.right - width;
+  return {
+    top: useTop ? "" : `${box.bottom + GAP}px`,
+    bottom: useTop ? `${viewport.height - box.top + GAP}px` : "",
+    left: `${Math.max(EDGE, Math.min(rawLeft, viewport.width - width - EDGE))}px`,
+    width: `${width}px`,
+    maxHeight: `${Math.max(minHeight, useTop ? above : below)}px`,
+  };
+}