@olares/lares-mobile 0.15.4 → 0.15.6

package/src/desktop/workspace-view.js

@@ -0,0 +1,121 @@
+import {
+  FLAT_SESSION_ORDER_KEY,
+  nextSessionOrderAccount,
+} from "@olares/lares-core/larepass/workspace";
+
+const STORAGE_KEY = "lares.larepass.workspace.view.v1";
+
+const initialView = () => ({
+  groupBy: "workspace",
+  orderBy: "updated",
+  groupExpansion: {},
+  sessionOrderByAccount: {},
+  sessionUpdatedAtByAccount: {},
+});
+
+export function loadWorkspaceView(storage = globalThis.localStorage) {
+  if (!storage) return initialView();
+  try {
+    const saved = JSON.parse(storage.getItem(STORAGE_KEY) || "{}");
+    return {
+      groupBy: saved.groupBy === "flat" ? "flat" : "workspace",
+      orderBy: saved.orderBy === "manual" ? "manual" : "updated",
+      groupExpansion: saved.groupExpansion && typeof saved.groupExpansion === "object"
+        ? saved.groupExpansion
+        : {},
+      sessionOrderByAccount: saved.sessionOrderByAccount && typeof saved.sessionOrderByAccount === "object"
+        ? saved.sessionOrderByAccount
+        : {},
+      sessionUpdatedAtByAccount: saved.sessionUpdatedAtByAccount && typeof saved.sessionUpdatedAtByAccount === "object"
+        ? saved.sessionUpdatedAtByAccount
+        : {},
+    };
+  } catch {
+    return initialView();
+  }
+}
+
+export function saveWorkspaceView(view, storage = globalThis.localStorage) {
+  if (!storage) return;
+  try {
+    storage.setItem(STORAGE_KEY, JSON.stringify(view));
+  } catch {
+    // Browser storage can be unavailable in private or embedded contexts.
+  }
+}
+
+function accountSessionIds(sessions, workspaces) {
+  const known = new Set(sessions.map((row) => row.sessionId));
+  const accounted = new Set();
+  const accounts = workspaces.map((workspace) => {
+    const ids = (workspace.sessionIds ?? []).filter((id) => known.has(id));
+    ids.forEach((id) => accounted.add(id));
+    return [workspace.workspaceId, ids];
+  });
+  accounts.push(["", sessions.map((row) => row.sessionId).filter((id) => !accounted.has(id))]);
+  accounts.push([FLAT_SESSION_ORDER_KEY, sessions.map((row) => row.sessionId)]);
+  return accounts;
+}
+
+function promote(order, sessionId) {
+  return [sessionId, ...order.filter((id) => id !== sessionId)];
+}
+
+export function syncWorkspaceViewOrders(view, {
+  sessions = [],
+  workspaces = [],
+  currentSessionId = "",
+  sortByRecency = false,
+} = {}) {
+  const nextOrder = {};
+  const nextUpdatedAt = {};
+  for (const [key, sessionIds] of accountSessionIds(sessions, workspaces)) {
+    const next = nextSessionOrderAccount({
+      sessionIds,
+      previousOrder: view.sessionOrderByAccount[key],
+      previousUpdatedAt: view.sessionUpdatedAtByAccount[key],
+      sessions,
+      orderBy: view.orderBy,
+      sortByRecency: view.orderBy === "updated"
+        && (sortByRecency || view.sessionOrderByAccount[key] === undefined),
+    });
+    nextOrder[key] = next.order;
+    nextUpdatedAt[key] = next.updatedAt;
+  }
+
+  const current = sessions.find((row) => row.sessionId === currentSessionId);
+  if (current?.blank) {
+    const account = workspaces.find((workspace) => (
+      workspace.sessionIds?.includes(currentSessionId)
+    ))?.workspaceId ?? "";
+    nextOrder[account] = promote(nextOrder[account] ?? [], currentSessionId);
+    nextOrder[FLAT_SESSION_ORDER_KEY] = promote(
+      nextOrder[FLAT_SESSION_ORDER_KEY] ?? [],
+      currentSessionId,
+    );
+  }
+
+  return {
+    ...view,
+    sessionOrderByAccount: nextOrder,
+    sessionUpdatedAtByAccount: nextUpdatedAt,
+  };
+}
+
+/**
+ * Reordering is expressed as "insert before X", while a pointer lands on an edge
+ * of a row. Translate the hovered row plus edge into that anchor; "" is the end
+ * of the list, which every insert-before call reads as an append.
+ */
+export function dropAnchor(ids, hint) {
+  const at = ids.indexOf(hint?.key);
+  if (at === -1) return "";
+  return hint.edge === "after" ? ids[at + 1] ?? "" : hint.key;
+}
+
+export function insertSessionBefore(order, sessionId, beforeSessionId) {
+  const next = order.filter((id) => id !== sessionId);
+  const index = beforeSessionId ? next.indexOf(beforeSessionId) : -1;
+  next.splice(index === -1 ? next.length : index, 0, sessionId);
+  return next;
+}

package/src/host.js

@@ -1,5 +1,7 @@
 import { hostTarget, hostUrl, MODELS_PATH, probeHost } from "@olares/lares-core/larepass/host";
 import { callRpc, consumeMux, ensureSession, loadTranscript, MUX_PATH, sendPrompt } from "@olares/lares-core/larepass/chat";
+import { commandsUrl, normalizeCommands } from "@olares/lares-core/larepass/commands";
+import { normalizeReferenceCandidates, referencesUrl } from "@olares/lares-core/larepass/references";
 import { muxWsUrl } from "@olares/lares-core/larepass/mux";
 import { RESPOND_PATH } from "@olares/lares-core/larepass/rpc";
 import { createHostSettings } from "@olares/lares-core/larepass/settings";
@@ -133,8 +135,8 @@ export function createHostClient(ports = {}) {
     history(sessionId) {
       return loadTranscript(rpc, sessionId);
     },
-    prompt(sessionId, text) {
-      return sendPrompt(rpc, sessionId, text);
+    prompt(sessionId, content, mode) {
+      return sendPrompt(rpc, sessionId, content, mode);
     },
     async respond(message) {
       const res = await request(RESPOND_PATH, { method: "POST", body: message });
@@ -142,6 +144,22 @@ export function createHostClient(ports = {}) {
       if (body && typeof body === "object" && typeof body.accepted === "boolean") return body;
       return { accepted: Boolean(res?.ok), reason: res?.ok ? undefined : "bad-response" };
     },
+    async commands(sessionId) {
+      const res = await request(commandsUrl(sessionId));
+      const http = Number(res?.status) || 0;
+      if (http < 200 || http >= 300) {
+        throw new Error(res?.body?.error?.code || `commands ${http || "failed"}`);
+      }
+      return normalizeCommands(res?.body);
+    },
+    async references(sessionId, query, quoted = false) {
+      const res = await request(referencesUrl(sessionId, query));
+      const http = Number(res?.status) || 0;
+      if (http < 200 || http >= 300) {
+        throw new Error(res?.body?.error?.code || `references ${http || "failed"}`);
+      }
+      return normalizeReferenceCandidates(res?.body, quoted);
+    },
     async preview(sessionId, path) {
       const res = await request(previewMetaUrl(sessionId, path));
       const http = Number(res?.status) || 0;

package/src/index.d.ts

@@ -71,10 +71,12 @@ export const LaresApp: DefineComponent<{
   proxyPrefix?: string;
   env?: HostEnv;
   request?: (url: string, init?: HostRequestInit) => Promise<HostResponse>;
+  socketProtocol?: HostPorts["socketProtocol"];
 }>;
 
 export const LaresAgentSettings: DefineComponent<{
   locale?: string;
+  device?: ChatDevice;
   baseUrl?: string;
   proxyPrefix?: string;
   env?: HostEnv;

package/src/mobile/MobileDirectoryNewFolder.vue

@@ -0,0 +1,121 @@
+<template>
+  <LaresSheet :open="open" :title="t('desktop.newFolder')" @close="$emit('close')">
+    <div class="mobile-directory-new">
+      <input
+        ref="input"
+        v-model="value"
+        class="mobile-directory-new__input"
+        :placeholder="t('desktop.untitledFolder')"
+        :disabled="busy"
+        @keydown.enter.prevent="submit"
+      />
+      <div class="mobile-directory-new__actions">
+        <button type="button" class="mobile-directory-new__cancel" :disabled="busy" @click="$emit('close')">
+          {{ t("desktop.cancel") }}
+        </button>
+        <button
+          type="button"
+          class="mobile-directory-new__create"
+          :disabled="busy || !value.trim()"
+          @click="submit"
+        >
+          {{ t("desktop.createFolder") }}
+        </button>
+      </div>
+    </div>
+  </LaresSheet>
+</template>
+
+<script>
+import LaresSheet from "../settings/Sheet.vue";
+
+export default {
+  name: "LaresMobileDirectoryNewFolder",
+  components: { LaresSheet },
+  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>
+.mobile-directory-new {
+  padding: 0 20px;
+}
+
+.mobile-directory-new__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 44px;
+  border: 1px solid var(--q-input-stroke, var(--q-separator));
+  border-radius: 999px;
+  padding: 0 16px;
+  background: transparent;
+  color: var(--q-ink-1);
+  font: inherit;
+  font-size: 16px;
+}
+
+.mobile-directory-new__input:focus {
+  outline: none;
+  border-color: var(--q-blue-default);
+}
+
+.mobile-directory-new__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.mobile-directory-new__cancel,
+.mobile-directory-new__create {
+  min-height: 40px;
+  border-radius: 10px;
+  padding: 0 16px;
+  font: inherit;
+}
+
+.mobile-directory-new__cancel {
+  border: 1px solid var(--q-separator);
+  background: transparent;
+  color: var(--q-ink-2);
+}
+
+.mobile-directory-new__create {
+  border: 0;
+  background: var(--q-blue-default);
+  color: var(--q-ink-on-brand);
+}
+
+.mobile-directory-new__cancel:disabled,
+.mobile-directory-new__create:disabled {
+  opacity: 0.5;
+}
+</style>

package/src/mobile/MobileDirectorySheet.vue

@@ -0,0 +1,162 @@
+<template>
+  <LaresSheet :open="open" :title="t('desktop.chooseFolder')" @close="$emit('close')">
+    <div class="mobile-directory">
+      <nav v-if="state.listing" class="mobile-directory__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="mobile-directory__body">
+        <p v-if="state.loading" class="mobile-directory__status">{{ t("desktop.loadingFolders") }}</p>
+        <p v-else-if="state.error" class="mobile-directory__error">{{ state.error }}</p>
+        <template v-else-if="state.listing">
+          <button
+            v-for="entry in visibleEntries"
+            :key="entry.path"
+            type="button"
+            class="mobile-directory__row"
+            :data-selected="selected === entry.path"
+            @click="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>
+            <span
+              class="mobile-directory__open"
+              role="button"
+              tabindex="0"
+              :aria-label="entry.name"
+              @click.stop="$emit('browse', entry.path)"
+              @keydown.enter.stop="$emit('browse', entry.path)"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
+            </span>
+          </button>
+          <p v-if="visibleEntries.length === 0" class="mobile-directory__status">{{ t("desktop.noFolders") }}</p>
+        </template>
+      </div>
+      <footer class="mobile-directory__footer">
+        <p class="mobile-directory__path">{{ selected || state.listing?.path || "" }}</p>
+        <div class="mobile-directory__tools">
+          <button
+            type="button"
+            class="mobile-directory__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="mobile-directory__hidden">
+            <input
+              type="checkbox"
+              :checked="state.showHidden"
+              @change="$emit('toggle-hidden', $event.target.checked)"
+            />
+            <span>{{ t("desktop.showHiddenFiles") }}</span>
+          </label>
+        </div>
+        <div class="mobile-directory__actions">
+          <button type="button" class="mobile-directory__cancel" :disabled="state.creating" @click="$emit('close')">
+            {{ t("desktop.cancel") }}
+          </button>
+          <button
+            type="button"
+            class="mobile-directory__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>
+      </footer>
+    </div>
+    <LaresMobileDirectoryNewFolder
+      :open="newFolderOpen"
+      :busy="state.creatingFolder"
+      :t="t"
+      @close="newFolderOpen = false"
+      @create="onCreateFolder"
+    />
+  </LaresSheet>
+</template>
+
+<script>
+import LaresSheet from "../settings/Sheet.vue";
+import LaresMobileDirectoryNewFolder from "./MobileDirectoryNewFolder.vue";
+
+export default {
+  name: "LaresMobileDirectorySheet",
+  components: { LaresSheet, LaresMobileDirectoryNewFolder },
+  props: {
+    open: { type: Boolean, default: false },
+    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;
+    },
+    open(value) {
+      if (!value) {
+        this.newFolderOpen = false;
+        this.selected = "";
+      }
+    },
+  },
+  methods: {
+    onCreateFolder(name) {
+      this.$emit("create-folder", name);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.mobile-directory { display:flex; min-height:min(420px, 55vh); flex-direction:column; margin:-4px 0 0; }
+.mobile-directory svg { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
+.mobile-directory__crumbs { display:flex; gap:4px; overflow:auto; padding:0 20px 8px; }
+.mobile-directory__crumbs button { flex-shrink:0; border:0; border-radius:8px; padding:6px 8px; background:transparent; color:var(--q-ink-3); font-size:14px; }
+.mobile-directory__body { flex:1; min-height:0; overflow:auto; padding:0 12px; }
+.mobile-directory__row { display:flex; width:100%; align-items:center; gap:10px; border:0; border-radius:12px; padding:12px 10px; background:transparent; color:var(--q-ink-1); text-align:left; }
+.mobile-directory__row[data-selected="true"],
+.mobile-directory__row:active { background:var(--q-background-hover); }
+.mobile-directory__row > span:first-of-type { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.mobile-directory__open { display:grid; width:32px; height:32px; place-items:center; color:var(--q-ink-3); }
+.mobile-directory__status,
+.mobile-directory__error { margin:16px 8px; color:var(--q-ink-3); font-size:15px; text-align:center; }
+.mobile-directory__error { color:var(--q-orange-default); }
+.mobile-directory__footer { display:flex; flex-direction:column; gap:10px; padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--q-separator); }
+.mobile-directory__path { width:100%; margin:0; overflow:hidden; color:var(--q-ink-3); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
+.mobile-directory__tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
+.mobile-directory__new-folder { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--q-separator); border-radius:999px; padding:0 12px; min-height:36px; background:transparent; color:var(--q-ink-2); font:inherit; font-size:14px; }
+.mobile-directory__new-folder svg { width:16px; height:16px; }
+.mobile-directory__hidden { display:inline-flex; align-items:center; gap:8px; color:var(--q-ink-3); font-size:14px; }
+.mobile-directory__hidden input { width:16px; height:16px; margin:0; }
+.mobile-directory__actions { display:flex; justify-content:flex-end; gap:8px; }
+.mobile-directory__cancel,
+.mobile-directory__choose { min-height:40px; border-radius:10px; padding:0 14px; font:inherit; }
+.mobile-directory__cancel { border:1px solid var(--q-separator); background:transparent; color:var(--q-ink-2); }
+.mobile-directory__choose { border:0; background:var(--q-blue-default); color:var(--q-ink-on-brand); }
+.mobile-directory button:disabled { opacity:.5; }
+</style>

package/src/mobile/MobileNewSession.vue

@@ -0,0 +1,217 @@
+<template>
+  <section class="mobile-new-session" :aria-label="t('desktop.newSession')">
+    <div class="mobile-new-session__brand">
+      <div class="mobile-new-session__logo" :style="logoStyle" aria-hidden="true" />
+      <h2 class="mobile-new-session__title">{{ t("shell.title") }}</h2>
+    </div>
+
+    <div class="mobile-new-session__prompt">
+      <div class="mobile-new-session__selectors">
+        <button
+          type="button"
+          class="mobile-new-session__chip mobile-new-session__chip--workspace"
+          :disabled="workspaceBusy"
+          :aria-label="t('desktop.workspaces')"
+          @click="$emit('workspace')"
+        >
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3.5 7.5h6l1.6 2H20.5v9H3.5z" />
+          </svg>
+          <span>{{ workspaceLabel }}</span>
+          <svg class="mobile-new-session__chevron" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M7 10l5 5 5-5" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="mobile-new-session__chip mobile-new-session__chip--model"
+          :disabled="modelBusy"
+          :aria-label="modelAria"
+          @click="$emit('model')"
+        >
+          <span>{{ modelLabel || t("model.select") }}</span>
+          <svg class="mobile-new-session__chevron" viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M7 10l5 5 5-5" />
+          </svg>
+        </button>
+      </div>
+      <div class="mobile-new-session__composer">
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { MARK_DATA_URI } from "@olares/lares-core/icons/mark";
+
+export default {
+  name: "LaresMobileNewSession",
+  props: {
+    t: { type: Function, required: true },
+    workspaceLabel: { type: String, default: "" },
+    workspaceBusy: { type: Boolean, default: false },
+    modelLabel: { type: String, default: "" },
+    modelBusy: { type: Boolean, default: false },
+  },
+  emits: ["workspace", "model"],
+  computed: {
+    logoStyle() {
+      return { backgroundImage: MARK_DATA_URI };
+    },
+    modelAria() {
+      return this.modelLabel
+        ? this.t("model.switchAria", { label: this.modelLabel })
+        : this.t("model.select");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.mobile-new-session {
+  display: flex;
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 20px calc(12px + env(safe-area-inset-bottom, 0px));
+}
+
+.mobile-new-session__brand {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 32px;
+}
+
+.mobile-new-session__logo {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  box-shadow: inset 0 1.8px 0 rgb(255 255 255 / 50%);
+  animation: mobile-brand-in var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1));
+}
+
+@keyframes mobile-brand-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mobile-new-session__logo {
+    animation: none;
+  }
+}
+
+.mobile-new-session__title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 34px;
+  letter-spacing: -0.02em;
+}
+
+.mobile-new-session__prompt {
+  display: flex;
+  width: min(100%, 420px);
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mobile-new-session__selectors {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.mobile-new-session__chip {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  border-radius: 999px;
+  padding: 6px 10px;
+  background: transparent;
+  color: var(--q-ink-2);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  transition: background var(--lares-duration-fast, 120ms) var(--lares-ease-out, ease),
+    color var(--lares-duration-fast, 120ms) var(--lares-ease-out, ease);
+}
+
+.mobile-new-session__chip--workspace {
+  flex: 0 1 auto;
+  max-width: 46%;
+}
+
+.mobile-new-session__chip--model {
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  max-width: 54%;
+}
+
+.mobile-new-session__chip span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-new-session__chip svg:not(.mobile-new-session__chevron) {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linejoin: round;
+}
+
+.mobile-new-session__chevron {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.mobile-new-session__chip:active:not(:disabled) {
+  background: var(--q-btn-bg-pressed);
+}
+
+.mobile-new-session__composer {
+  width: 100%;
+}
+
+@media (max-height: 640px) {
+  .mobile-new-session__brand {
+    margin-bottom: 24px;
+  }
+
+  .mobile-new-session__logo {
+    width: 48px;
+    height: 48px;
+  }
+
+  .mobile-new-session__title {
+    font-size: 24px;
+    line-height: 30px;
+  }
+}
+</style>