@lapis-notes/workspace 0.1.0 → 0.2.0

package/dist/plugin-management/PluginBrowserDirectory.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Component } from "svelte";
+import { type PluginDirectoryState as RegistryDirectoryState } from "./plugin-browser-model";
+import type { PluginCatalogEntry as RegistryCatalogEntry } from "@lapis-notes/api";
+import type { PluginRegistryController } from "./plugin-registry-controller.svelte";
+type $$ComponentProps = {
+    registry: PluginRegistryController;
+    compact?: boolean;
+    filtersOpen?: boolean;
+    ontogglefilters: (event: MouseEvent) => void;
+    onhome: () => void;
+    contentRef?: HTMLDivElement | null;
+    directoryState: RegistryDirectoryState;
+    installedIds: Set<string>;
+    updateIds: ReadonlySet<string>;
+    downloads: (id: string) => number;
+    onopen: (plugin: RegistryCatalogEntry) => void;
+    onchange: (state: RegistryDirectoryState) => void;
+};
+declare const PluginBrowserDirectory: Component<$$ComponentProps, {}, "contentRef">;
+type PluginBrowserDirectory = ReturnType<typeof PluginBrowserDirectory>;
+export default PluginBrowserDirectory;

package/dist/plugin-management/PluginBrowserLanding.svelte

@@ -0,0 +1,341 @@
+<script lang="ts">
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import PackageIcon from "@lucide/svelte/icons/package";
+
+  import { landingSections as registryLandingSections } from "./plugin-browser-model";
+  import type { PluginCatalogEntry as RegistryCatalogEntry } from "@lapis-notes/api";
+  import RegistryPluginCard from "./PluginBrowserCard.svelte";
+  import { registryFilterIcon } from "./community-presentation/registry-filter-icons";
+
+  let {
+    plugins,
+    updateIds,
+    onOpenUpdates,
+    onOpenDirectory,
+    onOpenPlugin,
+    onOpenCategory,
+  }: {
+    plugins: readonly RegistryCatalogEntry[];
+    updateIds: ReadonlySet<string>;
+    onOpenUpdates: () => void;
+    onOpenDirectory: () => void;
+    onOpenPlugin: (plugin: RegistryCatalogEntry) => void;
+    onOpenCategory: (category: string) => void;
+  } = $props();
+
+  const sections = $derived(registryLandingSections(plugins, updateIds));
+
+  function interceptNavigation(event: MouseEvent, action: () => void): void {
+    if (
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    )
+      return;
+    event.preventDefault();
+    action();
+  }
+</script>
+
+<div class="registry-landing">
+  <header class="registry-landing__hero">
+    <span class="registry-landing__eyebrow"
+      ><PackageIcon aria-hidden="true" /> Plugin registry</span
+    >
+    <h1>Make Lapis Notes yours.</h1>
+    <p>
+      Browse {plugins.length} plugins built for Lapis Notes by the community.
+    </p>
+  </header>
+
+  {#if sections.updates.length}
+    <section
+      class="registry-landing__section"
+      aria-labelledby="registry-landing-updates"
+    >
+      <a
+        class="registry-landing__section-link"
+        href="#/registry/plugins?updates"
+        onclick={(event) => interceptNavigation(event, onOpenUpdates)}
+      >
+        <h2 id="registry-landing-updates">Updates</h2>
+        <ChevronRightIcon aria-hidden="true" />
+      </a>
+      <div class="registry-landing__updates">
+        {#each sections.updates as plugin (plugin.id)}
+          <RegistryPluginCard
+            {plugin}
+            variant="compact"
+            onOpen={onOpenPlugin}
+          />
+        {/each}
+      </div>
+    </section>
+  {/if}
+
+  <section
+    class="registry-landing__section"
+    aria-labelledby="registry-landing-plugins"
+  >
+    <a
+      class="registry-landing__section-link"
+      href="#/registry/plugins"
+      onclick={(event) => interceptNavigation(event, onOpenDirectory)}
+    >
+      <h2 id="registry-landing-plugins">Plugins</h2>
+      <ChevronRightIcon aria-hidden="true" />
+    </a>
+    <div class="registry-landing__lanes">
+      <section>
+        <a
+          class="registry-landing__lane-link"
+          href="#/registry/plugins"
+          onclick={(event) => interceptNavigation(event, onOpenDirectory)}
+        >
+          Featured <ChevronRightIcon aria-hidden="true" />
+        </a>
+        <div class="registry-landing__list">
+          {#each sections.featured.slice(0, 5) as plugin (plugin.id)}
+            <RegistryPluginCard
+              {plugin}
+              variant="compact"
+              onOpen={onOpenPlugin}
+            />
+          {/each}
+        </div>
+      </section>
+      <section>
+        <a
+          class="registry-landing__lane-link"
+          href="#/registry/plugins"
+          onclick={(event) => interceptNavigation(event, onOpenDirectory)}
+        >
+          New <ChevronRightIcon aria-hidden="true" />
+        </a>
+        <div class="registry-landing__list">
+          {#each sections.newlyReleased as plugin (plugin.id)}
+            <RegistryPluginCard
+              {plugin}
+              variant="compact"
+              onOpen={onOpenPlugin}
+            />
+          {/each}
+        </div>
+      </section>
+      <section>
+        <a
+          class="registry-landing__lane-link"
+          href="#/registry/plugins"
+          onclick={(event) => interceptNavigation(event, onOpenDirectory)}
+        >
+          Recently updated <ChevronRightIcon aria-hidden="true" />
+        </a>
+        <div class="registry-landing__list">
+          {#each sections.recentlyUpdated as plugin (plugin.id)}
+            <RegistryPluginCard
+              {plugin}
+              variant="compact"
+              onOpen={onOpenPlugin}
+            />
+          {/each}
+        </div>
+      </section>
+    </div>
+  </section>
+
+  <section
+    class="registry-landing__section"
+    aria-labelledby="registry-landing-categories"
+  >
+    <a
+      class="registry-landing__section-link"
+      href="#/registry/plugins"
+      onclick={(event) => interceptNavigation(event, onOpenDirectory)}
+    >
+      <h2 id="registry-landing-categories">Categories</h2>
+      <ChevronRightIcon aria-hidden="true" />
+    </a>
+    <div class="registry-landing__categories">
+      {#each sections.categories as category (category.id)}
+        {@const CategoryIcon = registryFilterIcon(category.id)}
+        <a
+          href="#/registry/plugins"
+          aria-label={`${category.label}, ${category.count} plugin${category.count === 1 ? "" : "s"}`}
+          onclick={(event) =>
+            interceptNavigation(event, () => onOpenCategory(category.id))}
+        >
+          <CategoryIcon aria-hidden="true" />
+          <strong>{category.label}</strong>
+          <span>{category.count}</span>
+        </a>
+      {/each}
+    </div>
+  </section>
+</div>
+
+<style>
+  .registry-landing {
+    display: grid;
+    gap: clamp(2.5rem, 7cqi, 5rem);
+    min-width: 0;
+    width: min(100%, 76rem);
+    margin-inline: auto;
+    padding: clamp(2rem, 6cqi, 5rem) clamp(1rem, 4cqi, 3rem);
+  }
+
+  .registry-landing__hero {
+    display: grid;
+    justify-items: center;
+    gap: 0.85rem;
+    padding-block: clamp(2rem, 8cqi, 5rem);
+    text-align: center;
+  }
+
+  .registry-landing__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--primary);
+    font-size: var(--community-text-secondary);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .registry-landing__eyebrow :global(svg) {
+    width: 1rem;
+  }
+
+  h1,
+  h2,
+  p {
+    margin: 0;
+  }
+
+  h1 {
+    max-width: 15ch;
+    font-size: var(--community-text-page);
+    line-height: 0.96;
+    letter-spacing: -0.05em;
+  }
+
+  .registry-landing__hero p {
+    color: var(--muted-foreground);
+    font-size: var(--community-text-section);
+  }
+
+  .registry-landing__section {
+    display: grid;
+    gap: 1.25rem;
+  }
+
+  .registry-landing__section-link,
+  .registry-landing__lane-link {
+    display: inline-flex;
+    width: fit-content;
+    align-items: center;
+    gap: 0.25rem;
+    border: 0;
+    padding: 0;
+    color: inherit;
+    background: none;
+    font: inherit;
+    font-weight: 700;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .registry-landing__section-link :global(svg) {
+    width: 1.4rem;
+  }
+
+  .registry-landing__lane-link {
+    margin-bottom: 0.25rem;
+  }
+
+  .registry-landing__lane-link :global(svg) {
+    width: 1rem;
+  }
+
+  .registry-landing__section-link:hover,
+  .registry-landing__lane-link:hover {
+    color: var(--primary);
+  }
+
+  .registry-landing__lanes,
+  .registry-landing__updates {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: clamp(1.5rem, 4cqi, 3rem);
+  }
+
+  .registry-landing__list {
+    display: grid;
+    min-width: 0;
+  }
+
+  .registry-landing__categories {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0.75rem;
+  }
+
+  .registry-landing__categories a {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+    color: var(--foreground);
+    background: var(--card);
+    text-align: start;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .registry-landing__categories a:hover,
+  .registry-landing__categories a:focus-visible {
+    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
+    background: var(--accent);
+    outline: none;
+  }
+
+  .registry-landing__categories a > span {
+    color: var(--muted-foreground);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .registry-landing__categories a > strong {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .registry-landing__categories a :global(svg) {
+    width: 1.4rem;
+    height: 1.4rem;
+    color: var(--muted-foreground);
+  }
+
+  @container plugin-browser (max-width: 58rem) {
+    .registry-landing__lanes,
+    .registry-landing__updates {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .registry-landing__categories {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container plugin-browser (max-width: 38rem) {
+    .registry-landing__lanes,
+    .registry-landing__updates,
+    .registry-landing__categories {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+</style>

package/dist/plugin-management/PluginBrowserLanding.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { PluginCatalogEntry as RegistryCatalogEntry } from "@lapis-notes/api";
+type $$ComponentProps = {
+    plugins: readonly RegistryCatalogEntry[];
+    updateIds: ReadonlySet<string>;
+    onOpenUpdates: () => void;
+    onOpenDirectory: () => void;
+    onOpenPlugin: (plugin: RegistryCatalogEntry) => void;
+    onOpenCategory: (category: string) => void;
+};
+declare const PluginBrowserLanding: import("svelte").Component<$$ComponentProps, {}, "">;
+type PluginBrowserLanding = ReturnType<typeof PluginBrowserLanding>;
+export default PluginBrowserLanding;

package/dist/plugin-management/PluginRegistryBadge.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import Globe2 from "@lucide/svelte/icons/globe-2";
+  import Monitor from "@lucide/svelte/icons/monitor";
+  import ShieldCheck from "@lucide/svelte/icons/shield-check";
+  import Tag from "@lucide/svelte/icons/tag";
+  import UsersRound from "@lucide/svelte/icons/users-round";
+  import * as Badge from "@lapismd/design-core/shadcn/badge";
+
+  export type PluginRegistryBadgeTone =
+    | "neutral"
+    | "official"
+    | "community"
+    | "category"
+    | "web"
+    | "desktop"
+    | "danger";
+
+  let {
+    label,
+    tone = "neutral",
+  }: { label: string; tone?: PluginRegistryBadgeTone } = $props();
+</script>
+
+<Badge.Badge
+  class="lapis-plugin-registry-badge"
+  data-registry-badge-tone={tone}
+  variant={tone === "danger" ? "destructive" : "outline"}
+>
+  {#if tone === "official"}
+    <ShieldCheck aria-hidden="true" />
+  {:else if tone === "community"}
+    <UsersRound aria-hidden="true" />
+  {:else if tone === "category"}
+    <Tag aria-hidden="true" />
+  {:else if tone === "web"}
+    <Globe2 aria-hidden="true" />
+  {:else if tone === "desktop"}
+    <Monitor aria-hidden="true" />
+  {/if}
+  {label}
+</Badge.Badge>

package/dist/plugin-management/PluginRegistryBadge.svelte.d.ts

@@ -0,0 +1,8 @@
+export type PluginRegistryBadgeTone = "neutral" | "official" | "community" | "category" | "web" | "desktop" | "danger";
+type $$ComponentProps = {
+    label: string;
+    tone?: PluginRegistryBadgeTone;
+};
+declare const PluginRegistryBadge: import("svelte").Component<$$ComponentProps, {}, "">;
+type PluginRegistryBadge = ReturnType<typeof PluginRegistryBadge>;
+export default PluginRegistryBadge;

package/dist/plugin-management/PluginRegistryContentState.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import AlertTriangle from "@lucide/svelte/icons/alert-triangle";
+  import CircleCheck from "@lucide/svelte/icons/circle-check";
+  import PackageIcon from "@lucide/svelte/icons/package";
+  import SearchX from "@lucide/svelte/icons/search-x";
+  import Sparkles from "@lucide/svelte/icons/sparkles";
+  import * as Button from "@lapismd/design-core/shadcn/button";
+
+  let {
+    kind,
+    heading,
+    description,
+    actionLabel,
+    onaction,
+    sourceUrl,
+    diagnostic,
+    compact = false,
+    part,
+  }: {
+    kind: "empty" | "filtered" | "success" | "loading" | "error" | "warning";
+    heading: string;
+    description: string;
+    actionLabel?: string;
+    onaction?: () => void;
+    sourceUrl?: string;
+    diagnostic?: string;
+    compact?: boolean;
+    part?: string;
+  } = $props();
+</script>
+
+<div
+  class="lapis-plugin-registry-state"
+  data-ui-component="plugin-registry-content-state"
+  data-state-kind={kind}
+  data-compact={compact || undefined}
+  data-ui-part={part}
+  role={kind === "error" || kind === "warning" ? "status" : undefined}
+>
+  <div
+    class="lapis-plugin-registry-state__icon"
+    data-empty-icon={kind === "success"
+      ? "circle-check"
+      : kind === "filtered"
+        ? "search-x"
+        : kind === "error" || kind === "warning"
+          ? "alert-triangle"
+          : "package"}
+    aria-hidden="true"
+  >
+    {#if kind === "success"}
+      <CircleCheck />
+    {:else if kind === "filtered"}
+      <SearchX />
+    {:else if kind === "error" || kind === "warning"}
+      <AlertTriangle />
+    {:else}
+      <PackageIcon />
+      {#if kind !== "loading"}<Sparkles />{/if}
+    {/if}
+  </div>
+  <div class="lapis-plugin-registry-state__body">
+    <h2>{heading}</h2>
+    <p>{description}</p>
+    <div class="lapis-plugin-registry-state__actions">
+      {#if actionLabel && onaction}
+        <Button.Root size="sm" variant={kind === "error" ? "outline" : "default"} onclick={onaction}
+          >{actionLabel}</Button.Root
+        >
+      {/if}
+      {#if sourceUrl}<a href={sourceUrl}>View source</a>{/if}
+    </div>
+    {#if diagnostic}
+      <details>
+        <summary>Diagnostic</summary>
+        <code>{diagnostic}</code>
+      </details>
+    {/if}
+  </div>
+</div>

package/dist/plugin-management/PluginRegistryContentState.svelte.d.ts

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    kind: "empty" | "filtered" | "success" | "loading" | "error" | "warning";
+    heading: string;
+    description: string;
+    actionLabel?: string;
+    onaction?: () => void;
+    sourceUrl?: string;
+    diagnostic?: string;
+    compact?: boolean;
+    part?: string;
+};
+declare const PluginRegistryContentState: import("svelte").Component<$$ComponentProps, {}, "">;
+type PluginRegistryContentState = ReturnType<typeof PluginRegistryContentState>;
+export default PluginRegistryContentState;

package/dist/plugin-management/PluginRegistryImage.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import {
+    fetchVerifiedPluginImage,
+    type RegistryMediaV2,
+    resolveRegistryMedia,
+  } from "@lapis-notes/api";
+  let {
+    media,
+    variant = "preview",
+    presentation = "inline",
+  }: {
+    media: RegistryMediaV2;
+    presentation?: "inline" | "viewer";
+    variant?: "preview" | "full" | "light" | "dark";
+  } = $props();
+  let imageUrl = $state<string | null>(null);
+  let error = $state(false);
+  $effect(() => {
+    const reference = resolveRegistryMedia(media, variant);
+    const controller = new AbortController();
+    let ownedUrl: string | null = null;
+    imageUrl = null;
+    error = false;
+    void fetchVerifiedPluginImage(reference, fetch, controller.signal)
+      .then((blob) => {
+        if (controller.signal.aborted) return;
+        ownedUrl = URL.createObjectURL(blob);
+        imageUrl = ownedUrl;
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) error = true;
+      });
+    return () => {
+      controller.abort();
+      if (ownedUrl) URL.revokeObjectURL(ownedUrl);
+    };
+  });
+</script>
+
+{#if imageUrl}<img
+    class:viewer={presentation === "viewer"}
+    src={imageUrl}
+    alt={media.alt}
+    loading="lazy"
+  />
+{:else}<p role="status">
+    {error ? "Verified image unavailable" : "Loading image…"}
+  </p>{/if}
+
+<style>
+  img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius);
+  }
+  img.viewer {
+    width: auto;
+    max-height: calc(100dvh - 12rem);
+    margin-inline: auto;
+    object-fit: contain;
+  }
+</style>

package/dist/plugin-management/PluginRegistryImage.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type RegistryMediaV2 } from "@lapis-notes/api";
+type $$ComponentProps = {
+    media: RegistryMediaV2;
+    presentation?: "inline" | "viewer";
+    variant?: "preview" | "full" | "light" | "dark";
+};
+declare const PluginRegistryImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type PluginRegistryImage = ReturnType<typeof PluginRegistryImage>;
+export default PluginRegistryImage;