@lapis-notes/workspace 0.1.0 → 0.2.1

package/dist/plugin-management/community-presentation/RegistryMediaGallery.svelte

@@ -0,0 +1,282 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+
+  import type { RegistryGalleryItem } from "./model-adapter";
+  import RegistryMediaViewer from "./RegistryMediaViewer.svelte";
+  import RegistryVerifiedImage from "./RegistryVerifiedImage.svelte";
+
+  let {
+    items,
+    pluginName,
+  }: {
+    items: readonly RegistryGalleryItem[];
+    pluginName: string;
+  } = $props();
+
+  let track = $state<HTMLDivElement>();
+  let viewerOpen = $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(() => {
+    const observer = new ResizeObserver(updateTrackState);
+    if (!track) return;
+    observer.observe(track);
+    updateTrackState();
+    return () => observer.disconnect();
+  });
+
+  function show(index: number, target: HTMLElement): void {
+    selectedIndex = index;
+    opener = target;
+    viewerOpen = true;
+  }
+
+  function moveTrack(offset: -1 | 1): void {
+    if (!track) return;
+    const nextIndex = Math.min(
+      Math.max(inlineIndex + offset, 0),
+      items.length - 1,
+    );
+    const target = track.children[nextIndex] as HTMLElement | undefined;
+    target?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "start",
+    });
+  }
+
+  function updateTrackState(): void {
+    const currentTrack = track;
+    if (!currentTrack) return;
+    const maximum = Math.max(
+      0,
+      currentTrack.scrollWidth - currentTrack.clientWidth,
+    );
+    atStart = currentTrack.scrollLeft <= 1;
+    atEnd = currentTrack.scrollLeft >= maximum - 1;
+    const children = [...currentTrack.children] as HTMLElement[];
+    inlineIndex = children.reduce(
+      (closest, child, index) =>
+        Math.abs(child.offsetLeft - currentTrack.scrollLeft) <
+        Math.abs(children[closest]!.offsetLeft - currentTrack.scrollLeft)
+          ? index
+          : closest,
+      0,
+    );
+  }
+</script>
+
+{#if items.length > 0}
+  <section
+    class="registry-media-gallery"
+    aria-labelledby="registry-media-gallery-title"
+  >
+    <h2
+      id="registry-media-gallery-title"
+      class="registry-media-gallery__sr-only"
+    >
+      {pluginName} screenshots
+    </h2>
+    <div
+      class="registry-media-gallery__frame"
+      data-ui-part="registry-media-gallery-frame"
+    >
+      <div
+        bind:this={track}
+        class="registry-media-gallery__track"
+        class:short={items.length < 3}
+        aria-label={`${pluginName} screenshot carousel`}
+        onscroll={updateTrackState}
+      >
+        {#each items as item, index (item.id)}
+          <button
+            type="button"
+            class:active={index >= inlineIndex && index < inlineIndex + 2}
+            data-ui-part="registry-media-gallery-item"
+            data-state={index >= inlineIndex && index < inlineIndex + 2
+              ? "active"
+              : "preview"}
+            aria-label={`Open screenshot ${index + 1} of ${items.length}: ${item.alt}`}
+            onclick={(event) => show(index, event.currentTarget)}
+          >
+            <RegistryVerifiedImage
+              reference={item.images.dark}
+              width={item.images.dark.width}
+              height={item.images.dark.height}
+              alt=""
+              loading="lazy"
+            />
+          </button>
+        {/each}
+      </div>
+      {#if items.length > 1}
+        <button
+          class="registry-media-gallery__previous"
+          type="button"
+          aria-label="Previous screenshots"
+          disabled={atStart}
+          onclick={() => moveTrack(-1)}
+        >
+          <ChevronLeftIcon aria-hidden="true" />
+        </button>
+        <button
+          class="registry-media-gallery__next"
+          type="button"
+          aria-label="Next screenshots"
+          disabled={atEnd}
+          onclick={() => moveTrack(1)}
+        >
+          <ChevronRightIcon aria-hidden="true" />
+        </button>
+      {/if}
+    </div>
+  </section>
+
+  <RegistryMediaViewer
+    {items}
+    {pluginName}
+    {opener}
+    initialMode="dark"
+    bind:open={viewerOpen}
+    bind:selectedIndex
+  />
+{/if}
+
+<style>
+  .registry-media-gallery {
+    min-width: 0;
+  }
+  .registry-media-gallery__frame {
+    position: relative;
+  }
+  .registry-media-gallery__track {
+    display: flex;
+    gap: 0.5rem;
+    padding-inline-end: 12%;
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    overscroll-behavior-x: contain;
+  }
+  .registry-media-gallery__track.short {
+    padding-inline-end: 0;
+  }
+  .registry-media-gallery__track::-webkit-scrollbar {
+    display: none;
+  }
+  .registry-media-gallery__track > button {
+    position: relative;
+    flex: 0 0 calc(44% - 0.25rem);
+    overflow: hidden;
+    border: 0;
+    border-radius: 0.65rem;
+    padding: 0;
+    background: #09090b;
+    cursor: zoom-in;
+    opacity: 0.28;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    transition: opacity 200ms ease;
+  }
+  .registry-media-gallery__track.short > button {
+    flex-basis: calc(50% - 0.25rem);
+  }
+  .registry-media-gallery__track > button.active,
+  .registry-media-gallery__track > button:hover,
+  .registry-media-gallery__track > button:focus-visible {
+    opacity: 1;
+  }
+  .registry-media-gallery__track > button:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: -2px;
+  }
+  .registry-media-gallery__track :global(img) {
+    display: block;
+    width: 100%;
+    aspect-ratio: 3 / 2;
+    object-fit: cover;
+  }
+  .registry-media-gallery__frame > button {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    display: grid;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    transform: translateY(-50%);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    padding: 0;
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--background) 88%, transparent);
+    box-shadow: 0 0.2rem 1rem rgb(0 0 0 / 18%);
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+  }
+  .registry-media-gallery__frame > button:disabled {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .registry-media-gallery__frame > button :global(svg) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .registry-media-gallery__previous {
+    left: 0.6rem;
+  }
+  .registry-media-gallery__next {
+    right: 0.6rem;
+  }
+  .registry-media-gallery__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+  @media (max-width: 45rem) {
+    .registry-media-gallery__track {
+      padding-inline-end: 0;
+    }
+    .registry-media-gallery__track > button {
+      flex-basis: 100%;
+    }
+    .registry-media-gallery__frame > button {
+      display: none;
+    }
+  }
+  @container plugin-browser (max-width: 45rem) {
+    .registry-media-gallery__track {
+      padding-inline-end: 0;
+    }
+    .registry-media-gallery__track > button {
+      flex-basis: 100%;
+    }
+    .registry-media-gallery__frame > button {
+      display: none;
+    }
+  }
+  @media (hover: none), (pointer: coarse) {
+    .registry-media-gallery__frame > button {
+      display: none;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .registry-media-gallery__track {
+      scroll-behavior: auto;
+    }
+  }
+</style>

package/dist/plugin-management/community-presentation/RegistryMediaGallery.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { RegistryGalleryItem } from "./model-adapter";
+type $$ComponentProps = {
+    items: readonly RegistryGalleryItem[];
+    pluginName: string;
+};
+declare const RegistryMediaGallery: import("svelte").Component<$$ComponentProps, {}, "">;
+type RegistryMediaGallery = ReturnType<typeof RegistryMediaGallery>;
+export default RegistryMediaGallery;

package/dist/plugin-management/community-presentation/RegistryMediaViewer.css

@@ -0,0 +1,179 @@
+.community-registry-media-viewer[data-ui-component="dialog"][data-ui-part="dialog-content"] {
+  position: fixed;
+  inset: 0;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  color: white;
+  background: #000;
+  box-shadow: none;
+  overflow: hidden;
+  translate: none;
+  transform: none;
+}
+
+.community-registry-media-viewer__track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+}
+
+.community-registry-media-viewer__track::-webkit-scrollbar {
+  display: none;
+}
+
+.community-registry-media-viewer__slide {
+  display: grid;
+  min-width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: clamp(4.5rem, 8vw, 6rem) clamp(1rem, 6vw, 5rem) 3rem;
+  place-items: center;
+  box-sizing: border-box;
+  scroll-snap-align: start;
+}
+
+.community-registry-media-viewer__slide img {
+  display: block;
+  max-width: min(93vw, 75rem);
+  max-height: 86dvh;
+  object-fit: contain;
+}
+
+.community-registry-media-viewer__modes {
+  position: fixed;
+  z-index: 2;
+  top: 1rem;
+  left: 50%;
+  display: flex;
+  transform: translateX(-50%);
+  border: 1px solid rgb(255 255 255 / 18%);
+  border-radius: calc(var(--radius) * 0.8);
+  background: rgb(24 24 27 / 88%);
+  backdrop-filter: blur(12px);
+  --ui-button-group-radius: calc(var(--radius) * 0.8);
+}
+
+.community-registry-media-viewer__modes [role="radio"] {
+  min-height: 2rem;
+  border: 0;
+  padding: 0.25rem 0.75rem;
+  color: rgb(255 255 255 / 68%);
+  background: transparent;
+  font: inherit;
+  font-size: var(--community-text-secondary);
+  cursor: pointer;
+}
+
+.community-registry-media-viewer__modes [role="radio"][aria-checked="true"] {
+  color: white;
+  background: rgb(255 255 255 / 14%);
+}
+
+.community-registry-media-viewer__modes [role="radio"]:focus-visible,
+.community-registry-media-viewer__close:focus-visible,
+.community-registry-media-viewer__previous:focus-visible,
+.community-registry-media-viewer__next:focus-visible {
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+
+.community-registry-media-viewer__close,
+.community-registry-media-viewer__previous,
+.community-registry-media-viewer__next {
+  position: fixed;
+  z-index: 2;
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  place-items: center;
+  border: 1px solid rgb(255 255 255 / 18%);
+  border-radius: 999px;
+  padding: 0;
+  color: white;
+  background: rgb(24 24 27 / 78%);
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+}
+
+.community-registry-media-viewer__close:hover,
+.community-registry-media-viewer__previous:hover:not(:disabled),
+.community-registry-media-viewer__next:hover:not(:disabled) {
+  color: white;
+  background: rgb(39 39 42 / 86%);
+}
+
+.community-registry-media-viewer__close svg,
+.community-registry-media-viewer__previous svg,
+.community-registry-media-viewer__next svg {
+  width: 1.15rem;
+  height: 1.15rem;
+}
+
+.community-registry-media-viewer__previous:disabled,
+.community-registry-media-viewer__next:disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+
+.community-registry-media-viewer__close {
+  top: 1rem;
+  right: 1rem;
+}
+
+.community-registry-media-viewer__previous,
+.community-registry-media-viewer__next {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.community-registry-media-viewer__previous {
+  left: 1rem;
+}
+
+.community-registry-media-viewer__next {
+  right: 1rem;
+}
+
+.community-registry-media-viewer__status {
+  position: fixed;
+  z-index: 2;
+  bottom: 0.75rem;
+  left: 50%;
+  max-width: calc(100vw - 2rem);
+  transform: translateX(-50%);
+  color: rgb(255 255 255 / 68%);
+  font-size: var(--community-text-secondary);
+  text-align: center;
+}
+
+@media (max-width: 45rem) {
+  .community-registry-media-viewer__previous,
+  .community-registry-media-viewer__next {
+    display: none !important;
+  }
+
+  .community-registry-media-viewer__slide {
+    padding-inline: 0.5rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .community-registry-media-viewer__track {
+    scroll-behavior: auto;
+  }
+}

package/dist/plugin-management/community-presentation/RegistryMediaViewer.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+  import { tick } from "svelte";
+
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as ButtonGroup from "@lapismd/design-core/shadcn/button-group";
+  import * as Dialog from "@lapismd/design-core/shadcn/dialog";
+
+  import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import XIcon from "@lucide/svelte/icons/x";
+
+  import type { RegistryMediaItem } from "./model-adapter";
+  import RegistryVerifiedImage from "./RegistryVerifiedImage.svelte";
+  import "./RegistryMediaViewer.css";
+
+  type MediaMode = "preview" | "full" | "light" | "dark";
+  type SelectableMediaMode = Exclude<MediaMode, "preview">;
+
+  let {
+    items,
+    pluginName,
+    open = $bindable(false),
+    selectedIndex = $bindable(0),
+    initialMode = "full",
+    opener = null,
+  }: {
+    items: readonly RegistryMediaItem[];
+    pluginName: string;
+    open?: boolean;
+    selectedIndex?: number;
+    initialMode?: MediaMode;
+    opener?: HTMLElement | null;
+  } = $props();
+
+  let dialog = $state<HTMLElement | null>(null);
+  let track = $state<HTMLDivElement>();
+  let mode = $state<MediaMode>("full");
+  let wasOpen = false;
+  let scrollTarget: number | null = null;
+  const lastIndex = $derived(Math.max(0, items.length - 1));
+  const mediaModes = [
+    ["full", "Split"],
+    ["light", "Light"],
+    ["dark", "Dark"],
+  ] as const;
+
+  $effect(() => {
+    if (open && !wasOpen) {
+      selectedIndex = Math.min(Math.max(selectedIndex, 0), lastIndex);
+      mode = initialMode;
+      scrollTarget = selectedIndex;
+      void tick().then(() => {
+        scrollToSelected("auto");
+      });
+    } else if (!open && wasOpen) {
+      const returnTarget = opener;
+      requestAnimationFrame(() => returnTarget?.focus());
+    }
+    wasOpen = open;
+  });
+
+  function imageFor(item: RegistryMediaItem) {
+    return item.images[mode];
+  }
+
+  function setMode(nextMode: MediaMode): void {
+    mode = nextMode;
+  }
+
+  function moveTo(index: number): void {
+    selectedIndex = Math.min(Math.max(index, 0), lastIndex);
+    scrollToSelected("smooth");
+  }
+
+  function scrollToSelected(behavior: ScrollBehavior): void {
+    scrollTarget = selectedIndex;
+    track?.scrollTo({
+      left: selectedIndex * (track?.clientWidth ?? 0),
+      behavior,
+    });
+  }
+
+  function updateSelectedFromScroll(): void {
+    if (!track?.clientWidth) return;
+    if (scrollTarget !== null) {
+      if (Math.abs(track.scrollLeft - scrollTarget * track.clientWidth) > 1)
+        return;
+      scrollTarget = null;
+    }
+    selectedIndex = Math.min(
+      Math.max(Math.round(track.scrollLeft / track.clientWidth), 0),
+      lastIndex,
+    );
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    const modeButton = (event.target as HTMLElement).closest(
+      "button[data-media-mode]",
+    );
+    if (
+      modeButton &&
+      (event.key === "ArrowLeft" || event.key === "ArrowRight")
+    ) {
+      event.preventDefault();
+      const modes: SelectableMediaMode[] = ["full", "light", "dark"];
+      const offset = event.key === "ArrowLeft" ? -1 : 1;
+      const focusedMode = modeButton.getAttribute(
+        "data-media-mode",
+      ) as SelectableMediaMode;
+      const next =
+        (modes.indexOf(focusedMode) + offset + modes.length) % modes.length;
+      setMode(modes[next]!);
+      const buttons =
+        dialog?.querySelectorAll<HTMLButtonElement>("[data-media-mode]");
+      buttons?.[next]?.focus();
+      return;
+    }
+
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      moveTo(selectedIndex - 1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      moveTo(selectedIndex + 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      moveTo(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      moveTo(lastIndex);
+    }
+  }
+</script>
+
+<Dialog.Root bind:open>
+  {#if open}
+    <Dialog.Content
+      bind:ref={dialog}
+      class="community-registry-media-viewer"
+      showCloseButton={false}
+      data-media-mode={mode}
+      onkeydown={handleKeydown}
+    >
+      <Dialog.Title class="sr-only">
+        {pluginName} media viewer
+      </Dialog.Title>
+      <ButtonGroup.Root
+        role="radiogroup"
+        class="community-registry-media-viewer__modes"
+        aria-label="Image theme"
+      >
+        {#each mediaModes as [value, label]}
+          <Button
+            type="button"
+            variant={mode === value ? "secondary" : "ghost"}
+            size="sm"
+            role="radio"
+            aria-checked={mode === value}
+            data-media-mode={value}
+            onclick={() => setMode(value)}
+          >
+            {label}
+          </Button>
+        {/each}
+      </ButtonGroup.Root>
+      <Button
+        class="community-registry-media-viewer__close"
+        type="button"
+        variant="ghost"
+        size="icon"
+        aria-label="Close media viewer"
+        onclick={() => {
+          open = false;
+        }}
+      >
+        <XIcon aria-hidden="true" />
+      </Button>
+
+      <div
+        bind:this={track}
+        class="community-registry-media-viewer__track"
+        role="listbox"
+        aria-label={`${pluginName} media`}
+        tabindex="0"
+        onscroll={updateSelectedFromScroll}
+        onwheel={() => (scrollTarget = null)}
+        onpointerdown={() => (scrollTarget = null)}
+        onkeydown={(event) => {
+          event.stopPropagation();
+          handleKeydown(event);
+        }}
+      >
+        {#each items as item, index}
+          {@const image = imageFor(item)}
+          <div
+            class="community-registry-media-viewer__slide"
+            role="option"
+            aria-selected={index === selectedIndex}
+          >
+            <RegistryVerifiedImage
+              reference={image}
+              alt={item.alt}
+              width={image.width}
+              height={image.height}
+              loading={index === selectedIndex ? "eager" : "lazy"}
+            />
+          </div>
+        {/each}
+      </div>
+
+      {#if items.length > 1}
+        <Button
+          class="community-registry-media-viewer__previous"
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label="Previous image"
+          disabled={selectedIndex === 0}
+          onclick={() => moveTo(selectedIndex - 1)}
+        >
+          <ChevronLeftIcon aria-hidden="true" />
+        </Button>
+        <Button
+          class="community-registry-media-viewer__next"
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label="Next image"
+          disabled={selectedIndex === lastIndex}
+          onclick={() => moveTo(selectedIndex + 1)}
+        >
+          <ChevronRightIcon aria-hidden="true" />
+        </Button>
+      {/if}
+
+      <p class="community-registry-media-viewer__status" aria-live="polite">
+        {selectedIndex + 1} of {items.length}: {items[selectedIndex]?.alt}
+      </p>
+    </Dialog.Content>
+  {/if}
+</Dialog.Root>