@lapis-notes/workspace 0.2.0 → 0.3.0

package/dist/desktop/DesktopVaultLauncherDialogs.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import Search from "@lucide/svelte/icons/search";
+  import type { VaultProfile } from "@lapis-notes/api";
+  import * as Button from "@lapismd/design-core/shadcn/button";
+  import * as CommandView from "@lapismd/design-core/shadcn/command-view";
+  import * as Dialog from "@lapismd/design-core/shadcn/dialog";
+  import * as Input from "@lapismd/design-core/shadcn/input";
+  import { desktopAppearanceOptions } from "./desktop-vault-launcher";
+  import type { DesktopVaultLauncherState } from "./desktop-vault-launcher.svelte";
+  let {
+    model,
+    onOpenRecent,
+  }: {
+    model: DesktopVaultLauncherState;
+    onOpenRecent(profile: VaultProfile): Promise<void>;
+  } = $props();
+  $effect(() => {
+    if (!model.recentVaultDialogOpen) model.recentVaultQuery = "";
+  });
+  $effect(() => {
+    if (!model.renameDialogOpen) {
+      model.renameTarget = null;
+      model.renameDialogName = "";
+    }
+  });
+</script>
+
+<Dialog.Root bind:open={model.settingsOpen}>
+  <Dialog.Content class="desktop-launcher__settings">
+    <Dialog.Header>
+      <Dialog.Title>Desktop Settings</Dialog.Title>
+      <Dialog.Description
+        >Choose how the vault chooser follows light and dark mode.</Dialog.Description
+      >
+    </Dialog.Header>
+    <div class="desktop-launcher__options">
+      {#each desktopAppearanceOptions as option (option.value)}
+        <Button.Root
+          variant={model.appearanceMode === option.value
+            ? "default"
+            : "outline"}
+          class={`desktop-launcher__option${model.appearanceMode === option.value ? "" : " desktop-launcher__outline"}`}
+          onclick={() => void model.updateAppearance(option.value)}
+        >
+          <span class="desktop-launcher__option-copy">
+            <span class="desktop-launcher__label">{option.label}</span>
+            <span class="desktop-launcher__hint">{option.description}</span>
+          </span>
+        </Button.Root>
+      {/each}
+    </div>
+  </Dialog.Content>
+</Dialog.Root>
+
+<Dialog.Root bind:open={model.recentVaultDialogOpen}>
+  <Dialog.Content class="desktop-launcher__command" showCloseButton={false}>
+    <Dialog.Header class="sr-only">
+      <Dialog.Title>Recent Projects</Dialog.Title>
+      <Dialog.Description>Search and open a recent vault</Dialog.Description>
+    </Dialog.Header>
+    <CommandView.Root shouldFilter={false} label="Search recent vaults">
+      <CommandView.Input
+        bind:value={model.recentVaultQuery}
+        placeholder="Search recent vaults..."
+        aria-label="Search recent vaults"
+        autocomplete="off"
+        spellcheck="false"
+      />
+      <CommandView.List aria-label="Recent projects">
+        <CommandView.Empty>No matching recent vaults</CommandView.Empty>
+        {#if model.filteredRecentVaults.length > 0}
+          <CommandView.Group>
+            {#each model.filteredRecentVaults as entry (entry.profile.id)}
+              <CommandView.Item
+                value={`${entry.name} ${entry.location}`}
+                onSelect={() =>
+                  void model.invoke(() => onOpenRecent(entry.profile))}
+              >
+                <CommandView.ItemIcon>
+                  <Search />
+                </CommandView.ItemIcon>
+                <CommandView.ItemLabel>{entry.name}</CommandView.ItemLabel>
+                <CommandView.ItemDescription>
+                  {entry.location}
+                </CommandView.ItemDescription>
+              </CommandView.Item>
+            {/each}
+          </CommandView.Group>
+        {/if}
+      </CommandView.List>
+    </CommandView.Root>
+  </Dialog.Content>
+</Dialog.Root>
+
+<Dialog.Root bind:open={model.renameDialogOpen}>
+  <Dialog.Content class="desktop-launcher__rename">
+    <Dialog.Header>
+      <Dialog.Title>Rename vault</Dialog.Title>
+      <Dialog.Description
+        >Update the stored vault name used in recent projects and app URLs.</Dialog.Description
+      >
+    </Dialog.Header>
+    <form
+      class="desktop-launcher__form"
+      onsubmit={(event) => {
+        event.preventDefault();
+        void model.submitRename();
+      }}
+    >
+      <label class="desktop-launcher__field">
+        <span>Name</span>
+        <Input.Root
+          bind:value={model.renameDialogName}
+          autocomplete="off"
+          autofocus
+        />
+      </label>
+      <Dialog.Footer>
+        <Button.Root
+          type="button"
+          variant="ghost"
+          onclick={() => (model.renameDialogOpen = false)}
+        >
+          Cancel
+        </Button.Root>
+        <Button.Root
+          type="submit"
+          disabled={!model.renameDialogName.trim() ||
+            model.activeActionId === model.renameTarget?.id}
+        >
+          Save
+        </Button.Root>
+      </Dialog.Footer>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>

package/dist/desktop/DesktopVaultLauncherDialogs.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { VaultProfile } from "@lapis-notes/api";
+import type { DesktopVaultLauncherState } from "./desktop-vault-launcher.svelte";
+type $$ComponentProps = {
+    model: DesktopVaultLauncherState;
+    onOpenRecent(profile: VaultProfile): Promise<void>;
+};
+declare const DesktopVaultLauncherDialogs: import("svelte").Component<$$ComponentProps, {}, "">;
+type DesktopVaultLauncherDialogs = ReturnType<typeof DesktopVaultLauncherDialogs>;
+export default DesktopVaultLauncherDialogs;

package/dist/desktop/DesktopWorkspaceStartup.css

@@ -0,0 +1,8 @@
+.desktop-workspace-startup__logo {
+  width: 5rem;
+  height: 5rem;
+  object-fit: contain;
+  filter: drop-shadow(
+    0 1rem 2rem color-mix(in srgb, var(--ui-workspace-accent) 18%, transparent)
+  );
+}

package/dist/desktop/DesktopWorkspaceStartup.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import {
+    WorkspaceStartup,
+    type WorkspaceStartupFailure,
+    type WorkspaceStartupTask,
+  } from "@lapismd/design-core/workspace/startup";
+  import lapisLogo from "./lapis-logo.svg";
+  import "./DesktopWorkspaceStartup.css";
+
+  let {
+    tasks = [],
+    failure = null,
+  }: {
+    tasks?: WorkspaceStartupTask[];
+    failure?: WorkspaceStartupFailure | null;
+  } = $props();
+</script>
+
+{#snippet lapisVisual()}
+  <img
+    class="desktop-workspace-startup__logo"
+    data-ui-component="desktop-workspace-startup"
+    data-ui-part="logo"
+    src={lapisLogo}
+    alt=""
+  />
+{/snippet}
+
+<WorkspaceStartup
+  title="Opening Lapis Notes"
+  loadingVisual={lapisVisual}
+  {tasks}
+  {failure}
+/>

package/dist/desktop/DesktopWorkspaceStartup.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type WorkspaceStartupFailure, type WorkspaceStartupTask } from "@lapismd/design-core/workspace/startup";
+import "./DesktopWorkspaceStartup.css";
+type $$ComponentProps = {
+    tasks?: WorkspaceStartupTask[];
+    failure?: WorkspaceStartupFailure | null;
+};
+declare const DesktopWorkspaceStartup: import("svelte").Component<$$ComponentProps, {}, "">;
+type DesktopWorkspaceStartup = ReturnType<typeof DesktopWorkspaceStartup>;
+export default DesktopWorkspaceStartup;

package/dist/desktop/desktop-vault-launcher-controls.css

@@ -0,0 +1,142 @@
+.desktop-launcher__action[data-ui-component="button"],
+.desktop-launcher__option[data-ui-component="button"] {
+  width: 100%;
+  height: auto;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: flex-start;
+  white-space: normal;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  text-align: start;
+}
+.desktop-launcher__action-copy,
+.desktop-launcher__option-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  text-align: start;
+}
+.desktop-launcher__hint {
+  font-size: 0.75rem;
+  font-weight: 400;
+  opacity: 0.8;
+}
+.desktop-launcher__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.desktop-launcher__large-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+.desktop-launcher__settings-trigger[data-ui-component="button"],
+.desktop-launcher__link[data-ui-component="button"] {
+  padding-inline: 0;
+}
+.desktop-launcher__close[data-ui-component="button"] {
+  border: 0;
+  border-radius: 50%;
+  box-shadow: none;
+  color: var(--secondary-foreground);
+  background: var(--secondary);
+}
+.desktop-launcher__close[data-ui-component="button"]:hover:not(:disabled) {
+  color: var(--ui-workspace-panel-action-hover-foreground);
+  background: var(--ui-workspace-panel-action-hover-background);
+}
+.desktop-launcher__recent-open {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: flex-start;
+  gap: 0.75rem;
+  border: 0;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.desktop-launcher__recent-open:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.desktop-launcher__recent-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  margin-block-start: 0.125rem;
+  color: var(--ui-workspace-muted-foreground);
+}
+.desktop-launcher__outline[data-ui-component="button"]:hover:not(:disabled),
+.desktop-launcher__recent-open:hover:not(:disabled) {
+  color: var(--ui-workspace-foreground);
+  background: var(--background-modifier-active-hover);
+}
+.desktop-launcher__recent-menu {
+  display: flex;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin-block: auto;
+  border: 0;
+  border-radius: 0.5rem;
+  color: var(--ui-workspace-muted-foreground);
+  background: transparent;
+}
+.desktop-launcher__recent-menu:hover {
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-panel-action-hover-background);
+}
+.desktop-launcher__recent-menu:focus-visible,
+.desktop-launcher__recent-open:focus-visible {
+  outline: 3px solid var(--ring);
+  outline-offset: 2px;
+}
+.desktop-launcher__settings[data-ui-component="dialog"][data-ui-part="dialog-content"],
+.desktop-launcher__rename[data-ui-component="dialog"][data-ui-part="dialog-content"] {
+  top: 50%;
+  left: 50%;
+  width: min(28rem, calc(100% - 2rem));
+  max-width: 28rem;
+  max-height: calc(100% - 2rem);
+  overflow: auto;
+  translate: -50% -50%;
+}
+.desktop-launcher__command[data-ui-component="dialog"][data-ui-part="dialog-content"] {
+  top: 20vh;
+  left: 50%;
+  width: min(34rem, calc(100% - 2rem));
+  max-width: 34rem;
+  max-height: calc(80vh - 1rem);
+  overflow: hidden;
+  translate: -50% 0;
+  gap: 0;
+  padding: 0;
+  --ui-command-view-list-max-height: min(20rem, calc(80vh - 6rem));
+}
+.desktop-launcher__options {
+  display: grid;
+  gap: 0.75rem;
+}
+.desktop-launcher__option[data-ui-component="button"] {
+  padding-block: 0.75rem;
+}
+.desktop-launcher__form {
+  display: grid;
+  gap: 1rem;
+}
+.desktop-launcher__field {
+  display: grid;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}

package/dist/desktop/desktop-vault-launcher.css

@@ -0,0 +1,181 @@
+.desktop-launcher {
+  display: flex;
+  height: 100%;
+  min-height: 100%;
+  overflow: auto;
+  padding: 2.5rem 1rem;
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-background);
+}
+.desktop-launcher__content {
+  display: grid;
+  width: 100%;
+  max-width: 64rem;
+  min-width: 0;
+  gap: 1.5rem;
+  margin: auto;
+}
+.desktop-launcher__header {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 1.25rem;
+}
+.desktop-launcher__brand {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 1rem;
+}
+.desktop-launcher__logo {
+  width: 3.5rem;
+  height: 3.5rem;
+  flex-shrink: 0;
+  border: 1px solid
+    color-mix(in srgb, var(--ui-workspace-border) 70%, transparent);
+  border-radius: 1rem;
+  background: var(--ui-workspace-panel-background);
+  object-fit: cover;
+  box-shadow: 0 1px 2px #0000000d;
+}
+.desktop-launcher__copy {
+  min-width: 0;
+}
+.desktop-launcher__eyebrow {
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+}
+.desktop-launcher__heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.2;
+}
+.desktop-launcher__description {
+  margin: 0.25rem 0 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.875rem;
+}
+.desktop-launcher__header-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.25rem;
+}
+.desktop-launcher__columns {
+  display: grid;
+  min-width: 0;
+  gap: 1.25rem;
+}
+.desktop-launcher__card[data-ui-component="card"] {
+  min-width: 0;
+  gap: 0;
+  --ui-card-border-color: color-mix(
+    in srgb,
+    var(--ui-workspace-border) 70%,
+    transparent
+  );
+  --ui-card-background: color-mix(
+    in srgb,
+    var(--ui-workspace-panel-background) 90%,
+    transparent
+  );
+  backdrop-filter: blur(8px);
+}
+.desktop-launcher__card-header {
+  padding-inline: 1.5rem;
+  padding-block-end: 0;
+}
+.desktop-launcher__card-title {
+  font-size: 1.25rem;
+}
+.desktop-launcher__action-list {
+  display: grid;
+  gap: 0.75rem;
+  padding: 0 1.5rem 1.5rem;
+}
+.desktop-launcher__recents-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.desktop-launcher__recent-list {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0 1rem 1rem;
+}
+.desktop-launcher__recent {
+  display: flex;
+  width: 100%;
+  align-items: stretch;
+  gap: 0.25rem;
+  border: 1px solid
+    color-mix(in srgb, var(--ui-workspace-border) 60%, transparent);
+  border-radius: 0.75rem;
+  padding: 0.25rem;
+}
+.desktop-launcher__recent-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.desktop-launcher__recent-name,
+.desktop-launcher__location {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.desktop-launcher__recent-name,
+.desktop-launcher__label {
+  font-weight: 500;
+}
+.desktop-launcher__location {
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.75rem;
+}
+.desktop-launcher__empty {
+  padding: 1.25rem 1rem;
+  border: 1px dashed
+    color-mix(in srgb, var(--ui-workspace-border) 70%, transparent);
+  border-radius: 0.75rem;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.875rem;
+}
+.desktop-launcher__error,
+.desktop-launcher__message {
+  border: 1px solid
+    color-mix(in srgb, var(--ui-workspace-border) 70%, transparent);
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  background: var(--ui-workspace-panel-background);
+}
+.desktop-launcher__error {
+  border-color: color-mix(in srgb, var(--destructive) 40%, transparent);
+  color: var(--destructive);
+  background: color-mix(in srgb, var(--destructive) 10%, transparent);
+}
+@media (min-width: 40rem) {
+  .desktop-launcher {
+    padding-inline: 1.5rem;
+  }
+  .desktop-launcher__header {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .desktop-launcher__heading {
+    font-size: 1.875rem;
+  }
+}
+@media (min-width: 64rem) {
+  .desktop-launcher__columns {
+    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
+  }
+}

package/dist/desktop/desktop-vault-launcher.d.ts

@@ -0,0 +1,30 @@
+import type { VaultProfile } from "@lapis-notes/api";
+export type LauncherStatus = "loading" | "landing" | "opening" | "error";
+export type DesktopLauncherAppearance = "system" | "light" | "dark";
+/** Storage and native actions belong to the consuming desktop host. */
+export interface DesktopVaultLauncherHost {
+    listProfiles(): Promise<VaultProfile[]>;
+    getAppearance(): Promise<DesktopLauncherAppearance>;
+    saveAppearance(mode: DesktopLauncherAppearance): Promise<void>;
+    copyId?(profile: VaultProfile): Promise<void>;
+    rename?(profile: VaultProfile, name: string): Promise<void>;
+    move?(profile: VaultProfile): Promise<boolean>;
+    reveal?(profile: VaultProfile): Promise<void>;
+    remove?(profile: VaultProfile): Promise<void>;
+    revealLabel?: string;
+}
+export declare function getVaultProfileRootPath(profile: VaultProfile): string | null;
+export declare function getVaultProfileLocation(profile: VaultProfile): string;
+export declare const desktopAppearanceOptions: readonly [{
+    readonly value: "system";
+    readonly label: "Match System";
+    readonly description: "Follow the current system appearance.";
+}, {
+    readonly value: "light";
+    readonly label: "Light";
+    readonly description: "Use the light workspace palette on the vault chooser.";
+}, {
+    readonly value: "dark";
+    readonly label: "Dark";
+    readonly description: "Use the dark workspace palette on the vault chooser.";
+}];

package/dist/desktop/desktop-vault-launcher.js

@@ -0,0 +1,26 @@
+export function getVaultProfileRootPath(profile) {
+    const handle = profile.handle;
+    if (typeof handle === "string")
+        return handle;
+    return typeof handle?.rootPath === "string" ? handle.rootPath : null;
+}
+export function getVaultProfileLocation(profile) {
+    return getVaultProfileRootPath(profile) ?? "Desktop vault";
+}
+export const desktopAppearanceOptions = [
+    {
+        value: "system",
+        label: "Match System",
+        description: "Follow the current system appearance.",
+    },
+    {
+        value: "light",
+        label: "Light",
+        description: "Use the light workspace palette on the vault chooser.",
+    },
+    {
+        value: "dark",
+        label: "Dark",
+        description: "Use the dark workspace palette on the vault chooser.",
+    },
+];

package/dist/desktop/desktop-vault-launcher.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { VaultProfile } from "@lapis-notes/api";
+import { type DesktopLauncherAppearance, type DesktopVaultLauncherHost } from "./desktop-vault-launcher";
+/** State from the Deno chooser, shared without depending on a native bridge. */
+export declare class DesktopVaultLauncherState {
+    readonly host: DesktopVaultLauncherHost;
+    recentVaults: VaultProfile[];
+    recentVaultQuery: string;
+    recentVaultDialogOpen: boolean;
+    settingsOpen: boolean;
+    appearanceMode: DesktopLauncherAppearance;
+    activeActionId: string | null;
+    renameDialogOpen: boolean;
+    renameDialogName: string;
+    renameTarget: VaultProfile | null;
+    actionError: string;
+    actionMessage: string;
+    constructor(host: DesktopVaultLauncherHost);
+    get inlineRecentVaults(): VaultProfile[];
+    get filteredRecentVaults(): {
+        profile: VaultProfile;
+        name: string;
+        location: string;
+        kind: import("@lapis-notes/api").VaultStorageKind;
+    }[];
+    applyAppearance(mode: DesktopLauncherAppearance): void;
+    refresh(): Promise<void>;
+    invoke(action: () => Promise<void>): Promise<void>;
+    runAction(profile: VaultProfile, action: () => Promise<void>, message?: string): Promise<void>;
+    openRenameDialog(profile: VaultProfile): void;
+    submitRename(): Promise<void>;
+    moveRecentVault(profile: VaultProfile): Promise<void>;
+    copyVaultId(profile: VaultProfile): Promise<void>;
+    revealRecentVault(profile: VaultProfile): Promise<void>;
+    removeRecentVault(profile: VaultProfile): Promise<void>;
+    updateAppearance(mode: DesktopLauncherAppearance): Promise<void>;
+}