@olares/lares-mobile 0.15.5 → 0.15.7

package/src/motion.css

@@ -0,0 +1,166 @@
+/* Shared motion tokens — align with Sheet / HistoryPanel easing. */
+.lares-shell {
+  --lares-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
+  --lares-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --lares-duration-fast: 120ms;
+  --lares-duration-normal: 220ms;
+  --lares-duration-sheet: 280ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lares-shell {
+    --lares-duration-fast: 0ms;
+    --lares-duration-normal: 0ms;
+    --lares-duration-sheet: 0ms;
+  }
+}
+
+/* Mobile full-screen preview — push from the right. */
+.lares-preview-enter-active,
+.lares-preview-leave-active {
+  transition: transform var(--lares-duration-sheet) var(--lares-ease-out);
+}
+
+.lares-preview-enter-from,
+.lares-preview-leave-to {
+  transform: translateX(100%);
+}
+
+/* Desktop preview overlay — fade over the conversation. */
+.lares-desk-preview-enter-active,
+.lares-desk-preview-leave-active {
+  transition: opacity var(--lares-duration-normal) var(--lares-ease-out);
+}
+
+.lares-desk-preview-enter-from,
+.lares-desk-preview-leave-to {
+  opacity: 0;
+}
+
+/* Modal dialog — backdrop fade + surface scale. */
+.lares-dialog-enter-active,
+.lares-dialog-leave-active {
+  transition: opacity var(--lares-duration-normal) var(--lares-ease-out);
+}
+
+.lares-dialog-enter-active .lares-pc-dialog__surface,
+.lares-dialog-leave-active .lares-pc-dialog__surface {
+  transition: transform var(--lares-duration-normal) var(--lares-ease-out),
+    opacity var(--lares-duration-normal) var(--lares-ease-out);
+}
+
+.lares-dialog-enter-from,
+.lares-dialog-leave-to {
+  opacity: 0;
+}
+
+.lares-dialog-enter-from .lares-pc-dialog__surface,
+.lares-dialog-leave-to .lares-pc-dialog__surface {
+  opacity: 0;
+  transform: scale(0.96) translateY(8px);
+}
+
+/* Popover menu — subtle rise. */
+.lares-popover-enter-active,
+.lares-popover-leave-active {
+  transition: opacity var(--lares-duration-fast) var(--lares-ease-out),
+    transform var(--lares-duration-fast) var(--lares-ease-out);
+}
+
+.lares-popover-enter-from,
+.lares-popover-leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+}
+
+/* Mobile hero ↔ chat crossfade. */
+.lares-view-enter-active,
+.lares-view-leave-active {
+  transition: opacity var(--lares-duration-normal) var(--lares-ease-out),
+    transform var(--lares-duration-normal) var(--lares-ease-out);
+}
+
+.lares-view-enter-from {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+.lares-view-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+/* Composer panels (queue, questions, approval). */
+.lares-panel-enter-active,
+.lares-panel-leave-active {
+  transition: opacity var(--lares-duration-normal) var(--lares-ease-out),
+    transform var(--lares-duration-normal) var(--lares-ease-out);
+}
+
+.lares-panel-enter-from,
+.lares-panel-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+/* Preview tab strip — slide in from the header edge. */
+.lares-tabs-enter-active {
+  transition: opacity var(--lares-duration-normal) var(--lares-ease-out),
+    transform var(--lares-duration-normal) var(--lares-ease-out);
+}
+
+.lares-tabs-enter-from {
+  opacity: 0;
+  transform: translateX(12px);
+}
+
+.lares-tab-enter-active,
+.lares-tab-leave-active {
+  transition: opacity var(--lares-duration-fast) var(--lares-ease-out),
+    transform var(--lares-duration-fast) var(--lares-ease-out);
+}
+
+.lares-tab-enter-from,
+.lares-tab-leave-to {
+  opacity: 0;
+  transform: scale(0.92);
+}
+
+.lares-tab-leave-active {
+  position: absolute;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lares-preview-enter-active,
+  .lares-preview-leave-active,
+  .lares-desk-preview-enter-active,
+  .lares-desk-preview-leave-active,
+  .lares-dialog-enter-active,
+  .lares-dialog-leave-active,
+  .lares-dialog-enter-active .lares-pc-dialog__surface,
+  .lares-dialog-leave-active .lares-pc-dialog__surface,
+  .lares-popover-enter-active,
+  .lares-popover-leave-active,
+  .lares-view-enter-active,
+  .lares-view-leave-active,
+  .lares-panel-enter-active,
+  .lares-panel-leave-active,
+  .lares-tabs-enter-active,
+  .lares-tab-enter-active,
+  .lares-tab-leave-active {
+    transition: none;
+  }
+
+  .lares-preview-enter-from,
+  .lares-preview-leave-to,
+  .lares-view-enter-from,
+  .lares-view-leave-to,
+  .lares-panel-enter-from,
+  .lares-panel-leave-to,
+  .lares-dialog-enter-from .lares-pc-dialog__surface,
+  .lares-dialog-leave-to .lares-pc-dialog__surface,
+  .lares-popover-enter-from,
+  .lares-popover-leave-to {
+    transform: none;
+  }
+}

package/src/preview/Preview.vue

@@ -2,62 +2,50 @@
   <Teleport to="body">
     <div class="lares-preview" role="dialog" aria-modal="true" :aria-label="t('preview')">
       <header class="lares-preview__bar">
-        <button type="button" class="lares-preview__back" @click="$emit('close')">{{ t("chat") }}</button>
-        <strong class="lares-preview__name" :title="path">{{ name }}</strong>
+        <button
+          type="button"
+          class="lares-preview__icon-btn"
+          :aria-label="t('back')"
+          @click="$emit('close')"
+        >
+          <svg class="lares-preview__glyph" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M14.5 6 9 12l5.5 6" />
+          </svg>
+        </button>
+        <h1 class="lares-preview__name" :title="path">{{ name }}</h1>
         <a
           v-if="downloadHref"
-          class="lares-preview__link"
+          class="lares-preview__download"
           :href="downloadHref"
           download
-        >{{ t("download") }}</a>
+        >
+          {{ t("download") }}
+        </a>
+        <span v-else class="lares-preview__side-spacer" aria-hidden="true" />
       </header>
-      <div v-if="status === 'loading'" class="lares-preview__hint">{{ t("loading") }}</div>
-      <div v-else-if="status === 'error'" class="lares-preview__hint">
-        <p>{{ failText }}</p>
-        <button type="button" class="lares-preview__link" @click="$emit('retry')">{{ t("retry") }}</button>
-      </div>
-      <div v-else-if="data?.kind === 'image'" class="lares-preview__media">
-        <img :src="mediaSrc" :alt="name" />
-      </div>
-      <div v-else-if="data?.kind === 'video'" class="lares-preview__media">
-        <video :src="mediaSrc" controls playsinline />
-      </div>
-      <div v-else-if="data?.kind === 'audio'" class="lares-preview__media">
-        <audio :src="mediaSrc" controls />
-      </div>
-      <iframe
-        v-else-if="data?.kind === 'pdf'"
-        class="lares-preview__pdf"
-        :src="mediaSrc"
-        :title="name"
+      <LaresPreviewBody
+        :path="path"
+        :session-id="sessionId"
+        :status="status"
+        :data="data"
+        :error="error"
+        :media-src="mediaSrc"
+        :href-for="hrefFor"
+        :t="t"
+        @retry="$emit('retry')"
+        @open="$emit('open', $event)"
       />
-      <div
-        v-else-if="data?.kind === 'markdown'"
-        class="lares-preview__markdown"
-        v-html="markdownHtml"
-        @click="onMarkdownClick"
-      />
-      <pre v-else-if="data?.kind === 'text'" class="lares-preview__text">{{ data.text }}</pre>
-      <div v-else-if="data?.kind === 'model3d'" class="lares-preview__hint">
-        <p>{{ t("model3dHint") }}</p>
-      </div>
-      <div v-else class="lares-preview__hint">
-        <p>{{ t("unsupportedTitle") }}</p>
-        <p>{{ t("unsupported") }}</p>
-      </div>
-      <p v-if="data?.truncated" class="lares-preview__hint">{{ t("truncated") }}</p>
     </div>
   </Teleport>
 </template>
 
 <script>
-import { fileName, workspaceLinkClickPath } from "@olares/lares-core/files/preview-workspace";
-import { rewriteWorkspaceTargets } from "@olares/lares-core/files/markdown";
-import { messageFromCode } from "@olares/lares-core/i18n/t";
-import { renderMarkdown } from "../chat/markdown.js";
+import { fileName } from "@olares/lares-core/files/filename";
+import LaresPreviewBody from "./PreviewBody.vue";
 
 export default {
   name: "LaresPreview",
+  components: { LaresPreviewBody },
   props: {
     path: { type: String, required: true },
     sessionId: { type: String, default: "" },
@@ -74,25 +62,6 @@ export default {
     name() {
       return this.data?.name || fileName(this.path);
     },
-    failText() {
-      return messageFromCode(this.t, this.error, "failed");
-    },
-    markdownHtml() {
-      const text = this.data?.text ?? "";
-      const rewritten = this.hrefFor
-        ? rewriteWorkspaceTargets(text, this.data?.path ?? this.path, this.hrefFor)
-        : text;
-      return renderMarkdown(rewritten);
-    },
-  },
-  methods: {
-    onMarkdownClick(event) {
-      if (!this.sessionId) return;
-      const path = workspaceLinkClickPath(this.sessionId, event);
-      if (path === null) return;
-      event.preventDefault();
-      this.$emit("open", path);
-    },
   },
 };
 </script>
@@ -100,12 +69,12 @@ export default {
 <style scoped>
 .lares-preview {
   position: fixed;
-  inset: 0;
   z-index: 50;
   display: flex;
-  flex-direction: column;
   min-width: 0;
   min-height: 0;
+  flex-direction: column;
+  inset: 0;
   padding-top: env(safe-area-inset-top, 0px);
   padding-bottom: env(safe-area-inset-bottom, 0px);
   background: var(--q-background-1);
@@ -113,111 +82,83 @@ export default {
 }
 
 .lares-preview__bar {
+  position: relative;
   display: flex;
-  gap: 8px;
-  align-items: center;
   flex-shrink: 0;
-  height: 56px;
-  padding: 0 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 56px;
+  padding: 6px 8px;
 }
 
-.lares-preview__name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 16px;
-  font-weight: 500;
+.lares-preview__icon-btn,
+.lares-preview__side-spacer {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
 }
 
-.lares-preview__back,
-.lares-preview__link {
+.lares-preview__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 0;
-  background: none;
-  font: inherit;
-  color: var(--q-blue-default);
-  text-decoration: none;
-}
-
-.lares-preview__hint,
-.lares-preview__text,
-.lares-preview__markdown {
-  margin: 0;
-  padding: 12px 20px;
-  font-size: 14px;
-  color: var(--q-ink-2);
-}
-
-.lares-preview__text,
-.lares-preview__markdown {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
+  border-radius: 999px;
+  padding: 0;
+  background: transparent;
   color: var(--q-ink-1);
 }
 
-.lares-preview__text {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.lares-preview__markdown :deep(p),
-.lares-preview__markdown :deep(pre) {
-  margin: 0 0 10px;
-}
-
-.lares-preview__markdown :deep(ul),
-.lares-preview__markdown :deep(ol) {
-  margin: 4px 0 12px;
-  padding: 0 0 0 1.35em;
-}
-
-.lares-preview__markdown :deep(ul) {
-  list-style: disc outside;
-}
-
-.lares-preview__markdown :deep(ol) {
-  list-style: decimal outside;
+.lares-preview__icon-btn:active {
+  background: var(--q-btn-bg-pressed);
 }
 
-.lares-preview__markdown :deep(li + li) {
-  margin-top: 6px;
+.lares-preview__glyph {
+  width: 22px;
+  height: 22px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-.lares-preview__markdown :deep(img) {
-  max-width: 100%;
-  height: auto;
-}
-
-.lares-preview__media {
-  display: grid;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  place-items: center;
-  overflow: auto;
-  padding: 16px 20px;
+.lares-preview__name {
+  position: absolute;
+  left: 50%;
+  max-width: calc(100% - 152px);
+  margin: 0;
+  overflow: hidden;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateX(-50%);
+  pointer-events: none;
 }
 
-.lares-preview__media img,
-.lares-preview__media video {
-  max-width: 100%;
-  max-height: 100%;
-  min-width: 0;
-  min-height: 0;
+.lares-preview__download {
+  display: inline-flex;
+  min-width: 40px;
+  height: 32px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--q-separator);
   border-radius: 10px;
-  object-fit: contain;
-}
-
-.lares-preview__pdf {
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  border: 0;
+  padding: 0 12px;
+  background: var(--q-background-3);
+  color: var(--q-ink-1);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  text-decoration: none;
 }
 
-.lares-preview__media audio {
-  width: min(100%, 520px);
+.lares-preview__download:active {
+  background: var(--q-btn-bg-pressed);
 }
 </style>

package/src/preview/PreviewBody.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="lares-preview-body">
+    <div v-if="status === 'loading'" class="lares-preview-body__hint">{{ t("loading") }}</div>
+    <div v-else-if="status === 'error'" class="lares-preview-body__hint">
+      <p>{{ failText }}</p>
+      <button type="button" class="lares-preview-body__retry" @click="$emit('retry')">{{ t("retry") }}</button>
+    </div>
+    <div v-else-if="data?.kind === 'image'" class="lares-preview-body__media">
+      <img :src="mediaSrc" :alt="name" />
+    </div>
+    <div v-else-if="data?.kind === 'video'" class="lares-preview-body__media">
+      <video :src="mediaSrc" controls playsinline />
+    </div>
+    <div v-else-if="data?.kind === 'audio'" class="lares-preview-body__media">
+      <audio :src="mediaSrc" controls />
+    </div>
+    <iframe
+      v-else-if="data?.kind === 'pdf'"
+      class="lares-preview-body__pdf"
+      :src="mediaSrc"
+      :title="name"
+    />
+    <div
+      v-else-if="data?.kind === 'markdown'"
+      class="lares-preview-body__markdown"
+      v-html="markdownHtml"
+      @click="onMarkdownClick"
+    />
+    <pre v-else-if="data?.kind === 'text'" class="lares-preview-body__text">{{ data.text }}</pre>
+    <div v-else-if="data?.kind === 'model3d'" class="lares-preview-body__hint">
+      <p>{{ t("model3dHint") }}</p>
+    </div>
+    <div v-else class="lares-preview-body__hint">
+      <p>{{ t("unsupportedTitle") }}</p>
+      <p>{{ t("unsupported") }}</p>
+    </div>
+    <p v-if="data?.truncated" class="lares-preview-body__hint">{{ t("truncated") }}</p>
+  </div>
+</template>
+
+<script>
+import { fileName } from "@olares/lares-core/files/filename";
+import { workspaceLinkClickPath } from "@olares/lares-core/files/preview-workspace";
+import { rewriteWorkspaceTargets } from "@olares/lares-core/files/markdown";
+import { messageFromCode } from "@olares/lares-core/i18n/t";
+import { renderMarkdown } from "../chat/markdown.js";
+
+export default {
+  name: "LaresPreviewBody",
+  props: {
+    path: { type: String, required: true },
+    sessionId: { type: String, default: "" },
+    status: { type: String, default: "loading" },
+    data: { type: Object, default: null },
+    error: { type: String, default: "" },
+    mediaSrc: { type: String, default: "" },
+    hrefFor: { type: Function, default: null },
+    t: { type: Function, required: true },
+  },
+  emits: ["retry", "open"],
+  computed: {
+    name() {
+      return this.data?.name || fileName(this.path);
+    },
+    failText() {
+      return messageFromCode(this.t, this.error, "failed");
+    },
+    markdownHtml() {
+      const text = this.data?.text ?? "";
+      const rewritten = this.hrefFor
+        ? rewriteWorkspaceTargets(text, this.data?.path ?? this.path, this.hrefFor)
+        : text;
+      return renderMarkdown(rewritten);
+    },
+  },
+  methods: {
+    onMarkdownClick(event) {
+      if (!this.sessionId) return;
+      const path = workspaceLinkClickPath(this.sessionId, event);
+      if (path === null) return;
+      event.preventDefault();
+      this.$emit("open", path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-preview-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.lares-preview-body__hint,
+.lares-preview-body__text,
+.lares-preview-body__markdown {
+  margin: 0;
+  padding: 12px 20px;
+  color: var(--q-ink-2);
+  font-size: 16px;
+}
+
+.lares-preview-body__retry {
+  border: 0;
+  background: none;
+  color: var(--q-blue-default);
+  cursor: pointer;
+  font: inherit;
+}
+
+.lares-preview-body__text,
+.lares-preview-body__markdown {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  color: var(--q-ink-1);
+}
+
+.lares-preview-body__text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.lares-preview-body__markdown :deep(p),
+.lares-preview-body__markdown :deep(pre) {
+  margin: 0 0 10px;
+}
+
+.lares-preview-body__markdown :deep(ul),
+.lares-preview-body__markdown :deep(ol) {
+  margin: 4px 0 12px;
+  padding: 0 0 0 1.35em;
+}
+
+.lares-preview-body__markdown :deep(ul) {
+  list-style: disc outside;
+}
+
+.lares-preview-body__markdown :deep(ol) {
+  list-style: decimal outside;
+}
+
+.lares-preview-body__markdown :deep(li + li) {
+  margin-top: 6px;
+}
+
+.lares-preview-body__markdown :deep(img) {
+  max-width: 100%;
+  height: auto;
+}
+
+.lares-preview-body__media {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  place-items: center;
+  overflow: auto;
+  padding: 16px 20px;
+}
+
+.lares-preview-body__media img,
+.lares-preview-body__media video {
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 10px;
+  object-fit: contain;
+}
+
+.lares-preview-body__media audio {
+  width: min(100%, 520px);
+}
+
+.lares-preview-body__pdf {
+  min-height: 0;
+  flex: 1;
+  width: 100%;
+  border: 0;
+}
+</style>