@lapis-notes/workspace 0.1.0 → 0.2.0

package/dist/plugin-management/PluginRegistryMedia.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { PluginCatalogDetail, RegistryMediaV2 } from "@lapis-notes/api";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import PluginRegistryImage from "./PluginRegistryImage.svelte";
+  import PluginRegistryMediaViewer from "./PluginRegistryMediaViewer.svelte";
+
+  let {
+    detail,
+    placement = "overview",
+  }: {
+    detail: PluginCatalogDetail;
+    placement?: "gallery" | "overview" | "banner";
+  } = $props();
+  const items = $derived(
+    placement === "gallery"
+      ? (detail.gallery ?? [])
+      : [detail.media?.[placement]].filter((item): item is RegistryMediaV2 =>
+          Boolean(item),
+        ),
+  );
+  let track = $state<HTMLDivElement>();
+  let opened = $state(false);
+  let selectedIndex = $state(0);
+  let inlineIndex = $state(0);
+  let atStart = $state(true);
+  let atEnd = $state(false);
+  let opener = $state<HTMLElement | null>(null);
+
+  onMount(() => {
+    if (!track) return;
+    const observer = new ResizeObserver(updateTrackState);
+    observer.observe(track);
+    updateTrackState();
+    return () => observer.disconnect();
+  });
+
+  function updateTrackState() {
+    if (!track) return;
+    atStart = track.scrollLeft <= 1;
+    atEnd = track.scrollLeft >= track.scrollWidth - track.clientWidth - 1;
+    const origin = track.getBoundingClientRect().left;
+    const children = Array.from(track.children) as HTMLElement[];
+    inlineIndex = children.reduce(
+      (closest, child, index) =>
+        Math.abs(child.getBoundingClientRect().left - origin) <
+        Math.abs(children[closest]!.getBoundingClientRect().left - origin)
+          ? index
+          : closest,
+      0,
+    );
+  }
+
+  function moveTrack(offset: number) {
+    if (!track) return;
+    const next = Math.min(Math.max(inlineIndex + offset, 0), items.length - 1);
+    const target = track.children[next] as HTMLElement | undefined;
+    if (!target) return;
+    track.scrollTo({
+      left:
+        track.scrollLeft +
+        target.getBoundingClientRect().left -
+        track.getBoundingClientRect().left,
+      behavior: matchMedia("(prefers-reduced-motion: reduce)").matches
+        ? "auto"
+        : "smooth",
+    });
+  }
+</script>
+
+{#if items.length}
+  <section
+    class="registry-media"
+    data-media-placement={placement}
+    aria-label={placement === "gallery"
+      ? `${detail.name} screenshots`
+      : `${detail.name} ${placement} image`}
+  >
+    <div class="registry-media__frame">
+      <div
+        bind:this={track}
+        class="registry-media__track"
+        class:gallery={placement === "gallery"}
+        role="group"
+        aria-label={placement === "gallery"
+          ? `${detail.name} screenshot carousel`
+          : `${detail.name} ${placement}`}
+        onscroll={updateTrackState}
+      >
+        {#each items as item, index (item)}
+          <button
+            type="button"
+            class="registry-media__item"
+            data-state={placement !== "gallery" ||
+            (index >= inlineIndex && index < inlineIndex + 2)
+              ? "active"
+              : "preview"}
+            aria-label={`Open image: ${item.alt}`}
+            onclick={(event) => {
+              selectedIndex = index;
+              opener = event.currentTarget;
+              opened = true;
+            }}
+          >
+            <PluginRegistryImage
+              media={item}
+              variant={placement === "overview" ? "preview" : "dark"}
+            />
+          </button>
+        {/each}
+      </div>
+      {#if placement === "gallery" && items.length > 1}
+        <Button
+          class="registry-media__previous"
+          variant="secondary"
+          size="icon"
+          aria-label="Previous screenshots"
+          disabled={atStart}
+          onclick={() => moveTrack(-1)}><ChevronLeft /></Button
+        >
+        <Button
+          class="registry-media__next"
+          variant="secondary"
+          size="icon"
+          aria-label="Next screenshots"
+          disabled={atEnd}
+          onclick={() => moveTrack(1)}><ChevronRight /></Button
+        >
+      {/if}
+    </div>
+  </section>
+  <PluginRegistryMediaViewer
+    {items}
+    pluginName={detail.name}
+    {opener}
+    initialMode={placement === "gallery" || placement === "banner"
+      ? "dark"
+      : "full"}
+    bind:open={opened}
+    bind:selectedIndex
+  />
+{/if}
+
+<style>
+  .registry-media,
+  .registry-media__frame {
+    min-width: 0;
+  }
+  .registry-media__frame {
+    position: relative;
+  }
+  .registry-media__track {
+    min-width: 0;
+  }
+  .registry-media__track.gallery {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-snap-type: x mandatory;
+    overscroll-behavior-x: contain;
+  }
+  .registry-media__track::-webkit-scrollbar {
+    display: none;
+  }
+  .registry-media__item {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--radius);
+    padding: 0;
+    color: var(--foreground);
+    background: var(--muted);
+    cursor: zoom-in;
+  }
+  .gallery > .registry-media__item {
+    flex: 0 0 calc(44% - 0.25rem);
+    aspect-ratio: 3 / 2;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+  .gallery :global(img) {
+    height: 100%;
+    object-fit: cover;
+  }
+  .registry-media__item[data-state="preview"] {
+    opacity: 0.35;
+  }
+  .registry-media__item:hover,
+  .registry-media__item:focus-visible {
+    opacity: 1;
+  }
+  .registry-media__item:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: -2px;
+  }
+  .registry-media__frame :global(.registry-media__previous),
+  .registry-media__frame :global(.registry-media__next) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    --ui-button-radius: 999px;
+  }
+  .registry-media__frame :global(.registry-media__previous) {
+    left: 0.5rem;
+  }
+  .registry-media__frame :global(.registry-media__next) {
+    right: 0.5rem;
+  }
+  .registry-media__frame :global(button:disabled) {
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media (max-width: 45rem) {
+    .gallery > .registry-media__item {
+      flex-basis: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { PluginCatalogDetail } from "@lapis-notes/api";
+type $$ComponentProps = {
+    detail: PluginCatalogDetail;
+    placement?: "gallery" | "overview" | "banner";
+};
+declare const PluginRegistryMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+type PluginRegistryMedia = ReturnType<typeof PluginRegistryMedia>;
+export default PluginRegistryMedia;

package/dist/plugin-management/PluginRegistryMediaViewer.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import type { RegistryMediaV2 } from "@lapis-notes/api";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as Dialog from "@lapismd/design-core/shadcn/dialog";
+  import * as ToggleGroup from "@lapismd/design-core/shadcn/toggle-group";
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import X from "@lucide/svelte/icons/x";
+  import PluginRegistryImage from "./PluginRegistryImage.svelte";
+
+  type Mode = "full" | "light" | "dark";
+  let {
+    items,
+    pluginName,
+    open = $bindable(false),
+    selectedIndex = $bindable(0),
+    initialMode = "full",
+    opener = null,
+  }: {
+    items: readonly RegistryMediaV2[];
+    pluginName: string;
+    open?: boolean;
+    selectedIndex?: number;
+    initialMode?: Mode;
+    opener?: HTMLElement | null;
+  } = $props();
+  let mode = $state<Mode>("full");
+  let imageFrame = $state<HTMLDivElement>();
+  let wasOpen = false;
+  const lastIndex = $derived(Math.max(0, items.length - 1));
+  $effect(() => {
+    if (open && !wasOpen) mode = initialMode;
+    if (!open && wasOpen) {
+      const target = opener;
+      void tick().then(() => target?.isConnected && target.focus());
+    }
+    wasOpen = open;
+  });
+  function move(index: number) {
+    selectedIndex = Math.min(Math.max(index, 0), lastIndex);
+    imageFrame?.focus();
+  }
+  function onkeydown(event: KeyboardEvent) {
+    if (
+      (event.target as HTMLElement).closest(
+        '[data-ui-component="toggle-group"]',
+      )
+    )
+      return;
+    const next = {
+      ArrowLeft: selectedIndex - 1,
+      ArrowRight: selectedIndex + 1,
+      Home: 0,
+      End: lastIndex,
+    }[event.key];
+    if (next !== undefined) {
+      event.preventDefault();
+      move(next);
+    }
+  }
+</script>
+
+<Dialog.Root bind:open>
+  {#if open}
+    <Dialog.Content
+      class="registry-media-viewer"
+      showCloseButton={false}
+      {onkeydown}
+      style="--ui-dialog-width: min(72rem, calc(100vw - 2rem)); --ui-dialog-max-width: 72rem; width: min(72rem, calc(100vw - 2rem)); max-width: 72rem; max-height: calc(100dvh - 2rem);"
+    >
+      <Dialog.Title class="sr-only">{pluginName} media viewer</Dialog.Title>
+      <div class="registry-media-viewer__toolbar">
+        <ToggleGroup.Root
+          type="single"
+          variant="outline"
+          size="sm"
+          value={mode}
+          onValueChange={(value) => {
+            if (value) mode = value as Mode;
+          }}
+          aria-label="Image theme"
+        >
+          <ToggleGroup.Item value="light">Light</ToggleGroup.Item>
+          <ToggleGroup.Item value="dark">Dark</ToggleGroup.Item>
+          <ToggleGroup.Item value="full">Split</ToggleGroup.Item>
+        </ToggleGroup.Root>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Close media viewer"
+          onclick={() => (open = false)}><X /></Button
+        >
+      </div>
+      <div
+        class="registry-media-viewer__image"
+        bind:this={imageFrame}
+        role="listbox"
+        aria-label={`${pluginName} media`}
+        tabindex="0"
+      >
+        {#if items[selectedIndex]}
+          <div role="option" aria-selected="true">
+            <PluginRegistryImage
+              media={items[selectedIndex]!}
+              variant={mode}
+              presentation="viewer"
+            />
+          </div>
+        {/if}
+      </div>
+      <div class="registry-media-viewer__footer">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Previous image"
+          disabled={selectedIndex === 0}
+          onclick={() => move(selectedIndex - 1)}><ChevronLeft /></Button
+        >
+        <p aria-live="polite">
+          {selectedIndex + 1} of {items.length}: {items[selectedIndex]?.alt}
+        </p>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Next image"
+          disabled={selectedIndex === lastIndex}
+          onclick={() => move(selectedIndex + 1)}><ChevronRight /></Button
+        >
+      </div>
+    </Dialog.Content>
+  {/if}
+</Dialog.Root>
+
+<style>
+  .registry-media-viewer__toolbar,
+  .registry-media-viewer__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+  .registry-media-viewer__image {
+    min-width: 0;
+    min-height: 0;
+    display: grid;
+    place-items: center;
+  }
+  .registry-media-viewer__footer p {
+    margin: 0;
+    text-align: center;
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { RegistryMediaV2 } from "@lapis-notes/api";
+type Mode = "full" | "light" | "dark";
+type $$ComponentProps = {
+    items: readonly RegistryMediaV2[];
+    pluginName: string;
+    open?: boolean;
+    selectedIndex?: number;
+    initialMode?: Mode;
+    opener?: HTMLElement | null;
+};
+declare const PluginRegistryMediaViewer: import("svelte").Component<$$ComponentProps, {}, "open" | "selectedIndex">;
+type PluginRegistryMediaViewer = ReturnType<typeof PluginRegistryMediaViewer>;
+export default PluginRegistryMediaViewer;

package/dist/plugin-management/PluginRegistryRow.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import PackageIcon from "@lucide/svelte/icons/package";
+  import type { Snippet } from "svelte";
+  import PluginRegistryBadge, {
+    type PluginRegistryBadgeTone,
+  } from "./PluginRegistryBadge.svelte";
+  import PluginRegistryStatus from "./PluginRegistryStatus.svelte";
+
+  export interface RegistryRowBadge {
+    label: string;
+    tone?: PluginRegistryBadgeTone;
+  }
+
+  let {
+    id,
+    name,
+    description,
+    version,
+    metadata = [],
+    badges = [],
+    status,
+    selected = false,
+    onopen,
+    actions,
+  }: {
+    id: string;
+    name: string;
+    description: string;
+    version?: string;
+    metadata?: string[];
+    badges?: RegistryRowBadge[];
+    status?: {
+      label: string;
+      reason?: string;
+      tone?: "neutral" | "success" | "warning" | "danger";
+    };
+    selected?: boolean;
+    onopen?: () => void;
+    actions?: Snippet;
+  } = $props();
+</script>
+
+<article
+  class="lapis-plugin-registry-row"
+  data-ui-component="plugin-registry-row"
+  data-plugin-id={id}
+  data-selected={selected || undefined}
+  data-has-actions={actions ? "true" : undefined}
+>
+  <div class="lapis-plugin-registry-row__icon" aria-hidden="true">
+    <PackageIcon />
+  </div>
+  {#if onopen}
+    <button
+      type="button"
+      class="lapis-plugin-registry-row__main"
+      aria-label={`View details for ${name}`}
+      onclick={onopen}
+    >
+      <span class="lapis-plugin-registry-row__heading">
+        <span class="lapis-plugin-registry-row__identity">
+          <strong>{name}</strong>
+          {#each badges as item (item.label)}
+            <PluginRegistryBadge label={item.label} tone={item.tone} />
+          {/each}
+          {#if status}
+            <PluginRegistryStatus label={status.label} tone={status.tone} />
+          {/if}
+        </span>
+        {#if version}
+          <span class="lapis-plugin-registry-row__version">{version}</span>
+        {/if}
+      </span>
+      <span class="lapis-plugin-registry-row__description">{description}</span>
+      {#if metadata.length}
+        <span class="lapis-plugin-registry-row__metadata">
+          {#each metadata as item (item)}<span>{item}</span>{/each}
+        </span>
+      {/if}
+      {#if status?.reason}
+        <span
+          class="lapis-plugin-registry-row__status-reason"
+          data-status-tone={status.tone ?? "neutral"}>{status.reason}</span
+        >
+      {/if}
+    </button>
+  {:else}
+    <div class="lapis-plugin-registry-row__main">
+      <div class="lapis-plugin-registry-row__heading">
+        <span class="lapis-plugin-registry-row__identity">
+          <strong>{name}</strong>
+          {#each badges as item (item.label)}
+            <PluginRegistryBadge label={item.label} tone={item.tone} />
+          {/each}
+          {#if status}
+            <PluginRegistryStatus label={status.label} tone={status.tone} />
+          {/if}
+        </span>
+        {#if version}
+          <span class="lapis-plugin-registry-row__version">{version}</span>
+        {/if}
+      </div>
+      <p class="lapis-plugin-registry-row__description">{description}</p>
+      {#if metadata.length}
+        <div class="lapis-plugin-registry-row__metadata">
+          {#each metadata as item (item)}<span>{item}</span>{/each}
+        </div>
+      {/if}
+      {#if status?.reason}
+        <p
+          class="lapis-plugin-registry-row__status-reason"
+          data-status-tone={status.tone ?? "neutral"}>{status.reason}</p
+        >
+      {/if}
+    </div>
+  {/if}
+  {#if actions}
+    <div class="lapis-plugin-registry-row__actions">{@render actions()}</div>
+  {/if}
+</article>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+import { type PluginRegistryBadgeTone } from "./PluginRegistryBadge.svelte";
+export interface RegistryRowBadge {
+    label: string;
+    tone?: PluginRegistryBadgeTone;
+}
+type $$ComponentProps = {
+    id: string;
+    name: string;
+    description: string;
+    version?: string;
+    metadata?: string[];
+    badges?: RegistryRowBadge[];
+    status?: {
+        label: string;
+        reason?: string;
+        tone?: "neutral" | "success" | "warning" | "danger";
+    };
+    selected?: boolean;
+    onopen?: () => void;
+    actions?: Snippet;
+};
+declare const PluginRegistryRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type PluginRegistryRow = ReturnType<typeof PluginRegistryRow>;
+export default PluginRegistryRow;