@lapis-notes/workspace 0.1.0 → 0.2.1

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

@@ -0,0 +1,14 @@
+import type { RegistryMediaItem } from "./model-adapter";
+import "./RegistryMediaViewer.css";
+type MediaMode = "preview" | "full" | "light" | "dark";
+type $$ComponentProps = {
+    items: readonly RegistryMediaItem[];
+    pluginName: string;
+    open?: boolean;
+    selectedIndex?: number;
+    initialMode?: MediaMode;
+    opener?: HTMLElement | null;
+};
+declare const RegistryMediaViewer: import("svelte").Component<$$ComponentProps, {}, "open" | "selectedIndex">;
+type RegistryMediaViewer = ReturnType<typeof RegistryMediaViewer>;
+export default RegistryMediaViewer;

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

@@ -0,0 +1,216 @@
+<script lang="ts">
+  import {
+    type RegistryChangelogTag,
+    type RegistryRelease,
+  } from "./model-adapter";
+  import CommunityChip from "./CommunityChip.svelte";
+
+  import { renderRegistryMarkdown } from "./registry-markdown";
+  let {
+    latestVersion,
+    releases,
+  }: {
+    latestVersion: string;
+    releases: readonly RegistryRelease[];
+  } = $props();
+
+  const dateFormatter = new Intl.DateTimeFormat("en", {
+    dateStyle: "medium",
+    timeZone: "UTC",
+  });
+
+  const tagLabels: Record<RegistryChangelogTag, string> = {
+    feature: "Feature",
+    improvement: "Improvement",
+    fix: "Fix",
+    security: "Security",
+    breaking: "Breaking",
+    deprecation: "Deprecation",
+    removal: "Removal",
+  };
+
+  function versionLabel(version: string): string {
+    return version.startsWith("v") ? version : `v${version}`;
+  }
+
+  function releasedAt(release: RegistryRelease): string {
+    return dateFormatter.format(new Date(release.releasedAt));
+  }
+
+  function noteTitle(release: RegistryRelease): string {
+    return (
+      release.changelog?.title ?? `${versionLabel(release.version)} release`
+    );
+  }
+
+  function noteDescription(release: RegistryRelease): string | undefined {
+    return release.changelog?.description ?? release.releasePost;
+  }
+
+  function noteHtml(release: RegistryRelease): string | undefined {
+    const description = noteDescription(release);
+    return description === undefined
+      ? undefined
+      : renderRegistryMarkdown(description);
+  }
+</script>
+
+<div class="registry-plugin-changelog-list">
+  {#each releases as release (release.version)}
+    <article
+      class="registry-plugin-changelog"
+      aria-label={`${release.version} changelog`}
+    >
+      <header class="registry-plugin-changelog__header">
+        <div class="registry-plugin-changelog__chips">
+          <CommunityChip
+            class="registry-plugin-changelog__version"
+            variant="muted"
+            tone="success">{versionLabel(release.version)}</CommunityChip
+          >
+          {#if release.version === latestVersion}
+            <CommunityChip
+              class="registry-plugin-changelog__latest"
+              variant="outline"
+              tone="success">Latest</CommunityChip
+            >
+          {/if}
+        </div>
+        <time datetime={release.releasedAt}>{releasedAt(release)}</time>
+      </header>
+
+      <div class="registry-plugin-changelog__prose">
+        <h2 class="registry-plugin-changelog__title">{noteTitle(release)}</h2>
+        {#if release.changelog?.tags?.length}
+          <div
+            class="registry-plugin-changelog__tags"
+            aria-label="Changelog tags"
+          >
+            {#each release.changelog.tags as tag}
+              <CommunityChip variant="subtle" size="compact"
+                >{tagLabels[tag]}</CommunityChip
+              >
+            {/each}
+          </div>
+        {/if}
+        {#if noteHtml(release)}
+          {@html noteHtml(release)}
+        {:else}
+          <p>This release does not include verified changelog notes.</p>
+        {/if}
+      </div>
+    </article>
+  {:else}
+    <article class="registry-plugin-changelog" aria-label="No changelog">
+      <div class="registry-plugin-changelog__prose">
+        <h2 class="registry-plugin-changelog__title">
+          No structured changelog yet
+        </h2>
+        <p>This plugin does not include verified changelog notes.</p>
+      </div>
+    </article>
+  {/each}
+</div>
+
+<style>
+  .registry-plugin-changelog-list {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .registry-plugin-changelog {
+    display: grid;
+    min-width: 0;
+    gap: 1.4rem;
+    padding: clamp(1.4rem, 4vw, 2.4rem);
+    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+    border-radius: calc(var(--radius) * 1.8);
+    background: var(--background);
+    box-shadow: 0 1.25rem 3rem
+      color-mix(in srgb, var(--foreground) 7%, transparent);
+  }
+
+  .registry-plugin-changelog__header {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .registry-plugin-changelog__chips {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.7rem;
+  }
+
+  .registry-plugin-changelog__header time {
+    color: color-mix(in srgb, var(--muted-foreground) 84%, var(--foreground));
+    font-size: var(--community-text-section);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .registry-plugin-changelog__prose {
+    display: grid;
+    gap: 1rem;
+    color: color-mix(in srgb, var(--muted-foreground) 84%, var(--foreground));
+    font-size: var(--community-text-body);
+    line-height: 1.55;
+  }
+
+  .registry-plugin-changelog__prose :global(*) {
+    margin: 0;
+  }
+
+  .registry-plugin-changelog__title,
+  .registry-plugin-changelog__prose :global(h1) {
+    color: var(--foreground);
+    font-size: var(--community-text-page);
+    font-weight: 800;
+    line-height: 1.12;
+  }
+
+  .registry-plugin-changelog__prose :global(h2),
+  .registry-plugin-changelog__prose :global(h3) {
+    margin-top: 0.75rem;
+    color: var(--foreground);
+    font-size: var(--community-text-section);
+    font-weight: 760;
+    line-height: 1.2;
+  }
+
+  .registry-plugin-changelog__prose :global(ul),
+  .registry-plugin-changelog__prose :global(ol) {
+    display: grid;
+    gap: 0.45rem;
+    padding-inline-start: 1.65rem;
+  }
+
+  .registry-plugin-changelog__prose :global(li::marker) {
+    color: color-mix(in srgb, var(--muted-foreground) 76%, transparent);
+  }
+
+  .registry-plugin-changelog__prose :global(code) {
+    border-radius: calc(var(--radius) * 0.6);
+    background: color-mix(in srgb, var(--muted) 76%, transparent);
+    color: color-mix(in srgb, var(--foreground) 72%, var(--muted-foreground));
+    padding: 0.08em 0.28em;
+  }
+
+  .registry-plugin-changelog__tags {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  @media (max-width: 34rem) {
+    .registry-plugin-changelog__header {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+  }
+</style>

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

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

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

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import { Skeleton } from "@lapismd/design-core/shadcn/skeleton";
+  import * as Empty from "@lapismd/design-core/shadcn/empty";
+  import ImageOff from "@lucide/svelte/icons/image-off";
+  import type { Snippet } from "svelte";
+  import type { HTMLImgAttributes } from "svelte/elements";
+
+  import { fetchVerifiedPluginImage } from "@lapis-notes/api";
+  import type { RegistryImageReference } from "./model-adapter";
+
+  let {
+    reference,
+    alt,
+    fallback,
+    width,
+    height,
+    loading,
+    class: className,
+  }: {
+    reference: RegistryImageReference;
+    alt: string;
+    fallback?: Snippet;
+    width?: HTMLImgAttributes["width"];
+    height?: HTMLImgAttributes["height"];
+    loading?: HTMLImgAttributes["loading"];
+    class?: HTMLImgAttributes["class"];
+  } = $props();
+
+  const loader = (
+    reference: RegistryImageReference,
+    options: { signal: AbortSignal },
+  ) => fetchVerifiedPluginImage(reference, fetch, options.signal);
+  let resolvedUrl = $state("");
+  let failed = $state(false);
+  let decoded = $state(false);
+  let observedElement = $state<HTMLElement>();
+  let inView = $state(false);
+
+  $effect(() => {
+    if (loader === undefined || loading !== "lazy") {
+      inView = true;
+      return;
+    }
+    const element = observedElement;
+    if (element === undefined || typeof IntersectionObserver === "undefined") {
+      inView = true;
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) inView = true;
+      },
+      { rootMargin: "240px" },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  });
+
+  $effect(() => {
+    const current = reference;
+    if (loader === undefined) {
+      resolvedUrl = current.url;
+      failed = false;
+      return;
+    }
+    if (!inView) return;
+
+    const controller = new AbortController();
+    let active = true;
+    let objectUrl = "";
+    resolvedUrl = "";
+    failed = false;
+    decoded = false;
+    void loader(current, { signal: controller.signal })
+      .then((blob) => {
+        if (!active) return;
+        objectUrl = URL.createObjectURL(blob);
+        resolvedUrl = objectUrl;
+      })
+      .catch((cause: unknown) => {
+        if (
+          active &&
+          (!(cause instanceof DOMException) || cause.name !== "AbortError")
+        ) {
+          failed = true;
+        }
+      });
+
+    return () => {
+      active = false;
+      controller.abort();
+      if (objectUrl !== "") URL.revokeObjectURL(objectUrl);
+    };
+  });
+</script>
+
+<div
+  bind:this={observedElement}
+  class={["registry-verified-image", className].filter(Boolean).join(" ")}
+  data-image-state={failed ? "failed" : decoded ? "loaded" : "loading"}
+  style:aspect-ratio={width && height ? `${width} / ${height}` : undefined}
+  role={!decoded && alt ? "img" : undefined}
+  aria-label={!decoded && alt
+    ? `${alt}${failed ? " unavailable" : " loading"}`
+    : undefined}
+  aria-busy={!decoded && !failed ? "true" : undefined}
+>
+  {#if resolvedUrl && !failed}
+    <img
+      src={resolvedUrl}
+      {alt}
+      {width}
+      {height}
+      loading="eager"
+      class:decoded
+      onload={() => (decoded = true)}
+      onerror={() => {
+        failed = true;
+        decoded = false;
+      }}
+    />
+  {/if}
+  {#if failed}
+    {#if fallback}{@render fallback()}{:else}
+      <Empty.Root
+        class="registry-verified-image__empty"
+        aria-hidden={alt === "" ? "true" : undefined}
+      >
+        <Empty.Header>
+          <Empty.Media variant="icon"
+            ><ImageOff aria-hidden="true" /></Empty.Media
+          >
+          {#if alt}<Empty.Title>Image unavailable</Empty.Title>{/if}
+        </Empty.Header>
+      </Empty.Root>
+    {/if}
+  {:else if !decoded}
+    <Skeleton class="registry-verified-image__skeleton" aria-hidden="true" />
+  {/if}
+</div>
+
+<style>
+  .registry-verified-image {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 2rem;
+    overflow: hidden;
+    border-radius: inherit;
+  }
+  .registry-verified-image > img {
+    grid-area: 1 / 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    opacity: 0;
+  }
+  .registry-verified-image > img.decoded {
+    opacity: 1;
+  }
+  .registry-verified-image :global(.registry-verified-image__skeleton),
+  .registry-verified-image :global(.registry-verified-image__empty) {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+  .registry-verified-image :global(.registry-verified-image__empty) {
+    padding: 0.5rem;
+    background: var(--muted);
+    color: var(--muted-foreground);
+  }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+import type { HTMLImgAttributes } from "svelte/elements";
+import type { RegistryImageReference } from "./model-adapter";
+type $$ComponentProps = {
+    reference: RegistryImageReference;
+    alt: string;
+    fallback?: Snippet;
+    width?: HTMLImgAttributes["width"];
+    height?: HTMLImgAttributes["height"];
+    loading?: HTMLImgAttributes["loading"];
+    class?: HTMLImgAttributes["class"];
+};
+declare const RegistryVerifiedImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type RegistryVerifiedImage = ReturnType<typeof RegistryVerifiedImage>;
+export default RegistryVerifiedImage;

package/dist/plugin-management/community-presentation/avatar-model.d.ts

@@ -0,0 +1,14 @@
+type CommunityMemberModel = {
+    kind?: string;
+};
+export type CommunityMemberAvatarShape = "circle" | "rounded";
+export declare function communityMemberAvatarShape(member: Pick<CommunityMemberModel, "kind">): CommunityMemberAvatarShape;
+export declare const communityMemberAvatarFallbackTones: readonly ["blue", "emerald", "amber", "rose", "cyan", "violet", "orange"];
+export type CommunityMemberAvatarFallbackTone = (typeof communityMemberAvatarFallbackTones)[number];
+/**
+ * Select the same deterministic fallback tone as Buzz's shared UserAvatar.
+ * Keep the display name as the seed so renamed profiles receive the same
+ * presentation in both clients.
+ */
+export declare function communityMemberAvatarFallbackTone(displayName: string): CommunityMemberAvatarFallbackTone;
+export {};

package/dist/plugin-management/community-presentation/avatar-model.js

@@ -0,0 +1,21 @@
+export function communityMemberAvatarShape(member) {
+    return member.kind === "agent" ? "rounded" : "circle";
+}
+export const communityMemberAvatarFallbackTones = [
+    "blue",
+    "emerald",
+    "amber",
+    "rose",
+    "cyan",
+    "violet",
+    "orange",
+];
+/**
+ * Select the same deterministic fallback tone as Buzz's shared UserAvatar.
+ * Keep the display name as the seed so renamed profiles receive the same
+ * presentation in both clients.
+ */
+export function communityMemberAvatarFallbackTone(displayName) {
+    const hash = Array.from(displayName.trim().toLowerCase()).reduce((value, character) => (value * 31 + (character.codePointAt(0) ?? 0)) >>> 0, 0);
+    return communityMemberAvatarFallbackTones[hash % communityMemberAvatarFallbackTones.length];
+}

package/dist/plugin-management/community-presentation/community-member-avatar.css

@@ -0,0 +1,137 @@
+.community-member-avatar {
+  --community-member-avatar-size: 2.25rem;
+  --community-member-avatar-presence-size: 0.625rem;
+
+  position: relative;
+  display: block;
+  width: var(--community-member-avatar-size);
+  height: var(--community-member-avatar-size);
+  flex: none;
+}
+
+.community-member-avatar[data-size="inline"] {
+  --community-member-avatar-size: 1.25em;
+
+  display: inline-grid;
+  align-self: center;
+  vertical-align: middle;
+}
+
+.community-member-avatar[data-size="inline"] .community-member-avatar__image {
+  font-size: var(--community-text-avatar-initials);
+  line-height: 1;
+}
+
+.community-member-avatar[data-size="small"] {
+  --community-member-avatar-size: 2rem;
+  --community-member-avatar-presence-size: 0.55rem;
+}
+
+.community-member-avatar[data-size="xsmall"] {
+  --community-member-avatar-size: 1.5rem;
+  --community-member-avatar-presence-size: 0.45rem;
+}
+
+.community-member-avatar[data-size="xsmall"] .community-member-avatar__image {
+  font-size: var(--community-text-avatar-initials);
+  line-height: 1;
+}
+
+.community-member-avatar[data-size="large"] {
+  --community-member-avatar-size: 4rem;
+  --community-member-avatar-presence-size: 0.85rem;
+}
+
+.community-member-avatar[data-size="xlarge"] {
+  --community-member-avatar-size: 6rem;
+  --community-member-avatar-presence-size: 1rem;
+}
+
+.community-member-avatar[data-shape="rounded"] .community-member-avatar__image {
+  border-radius: 25%;
+}
+
+.community-member-avatar__image {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 50%;
+  font-size: var(--community-text-body);
+  font-weight: 700;
+}
+
+.community-member-avatar__image[data-fallback-tone="blue"] {
+  color: #ffffff;
+  background: #2563eb;
+}
+
+.community-member-avatar__image[data-fallback-tone="emerald"] {
+  color: #ffffff;
+  background: #047857;
+}
+
+.community-member-avatar__image[data-fallback-tone="amber"] {
+  color: #451a03;
+  background: #fbbf24;
+}
+
+.community-member-avatar__image[data-fallback-tone="rose"] {
+  color: #ffffff;
+  background: #e11d48;
+}
+
+.community-member-avatar__image[data-fallback-tone="cyan"] {
+  color: #083344;
+  background: #22d3ee;
+}
+
+.community-member-avatar__image[data-fallback-tone="violet"] {
+  color: #ffffff;
+  background: #7c3aed;
+}
+
+.community-member-avatar__image[data-fallback-tone="orange"] {
+  color: #ffffff;
+  background: #c2410c;
+}
+
+.community-member-avatar__image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  object-fit: cover;
+}
+
+.community-member-avatar__image [data-ui-part="emoji"] {
+  font-size: inherit;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.community-member-avatar__presence {
+  position: absolute;
+  right: -0.08rem;
+  bottom: -0.08rem;
+  width: var(--community-member-avatar-presence-size);
+  height: var(--community-member-avatar-presence-size);
+  border: 2px solid
+    var(--community-member-avatar-presence-ring, var(--background));
+  border-radius: 50%;
+  background: var(--muted-foreground);
+}
+
+.community-member-avatar__presence[data-presence="online"] {
+  background: var(--success, #08b94e);
+}
+
+.community-member-avatar__presence[data-presence="away"] {
+  background: var(--warning, #d99a00);
+}
+
+.community-member-avatar__presence[data-presence="unknown"] {
+  background: var(--background);
+  box-shadow: inset 0 0 0 1px var(--muted-foreground);
+}

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

@@ -0,0 +1,30 @@
+/* One Community scale. Public components and portalled recipes use the same tokens. */
+:root {
+  --community-text-body: 0.875rem;
+  --community-text-secondary: 0.75rem;
+  --community-text-avatar-initials: 0.625rem;
+  --community-text-section: 1rem;
+  --community-text-dialog: 1.125rem;
+  --community-text-page: 1.5rem;
+  --ui-dialog-frame-font-size: var(--community-text-body);
+  --ui-dialog-frame-title-size: var(--community-text-dialog);
+}
+:where(
+    .community-ui,
+    .community-application,
+    .community-application-root,
+    .agents,
+    .agent-profile,
+    .agent-activity
+  ) {
+  font-family: var(--font-sans, sans-serif);
+  font-size: var(--community-text-body);
+  line-height: 1.5;
+}
+:where(.community-ui) h1 {
+  font-size: var(--community-text-page);
+}
+:where(.community-ui) h2,
+:where(.community-ui) h3 {
+  font-size: var(--community-text-section);
+}

package/dist/plugin-management/community-presentation/model-adapter.d.ts

@@ -0,0 +1,54 @@
+import { resolveRegistryMedia, type PluginCatalogEntry, type PluginCatalogDetail, type PluginCatalogRelease, type RegistryMediaV2 } from "@lapis-notes/api";
+export type RegistryCatalogEntry = PluginCatalogEntry;
+export type RegistryImageReference = ReturnType<typeof resolveRegistryMedia>;
+export type RegistryMediaItem = Omit<RegistryMediaV2, "images"> & {
+    images: Record<"preview" | "full" | "light" | "dark", RegistryImageReference>;
+};
+export type RegistryGalleryItem = RegistryMediaItem & {
+    id: string;
+};
+export type RegistryRelease = PluginCatalogRelease & {
+    releaseSequence?: string;
+    bundle: PluginCatalogRelease["bundle"] & {
+        size: number;
+        pending: boolean;
+    };
+};
+export type RegistryChangelogTag = NonNullable<NonNullable<PluginCatalogRelease["changelog"]>["tags"]>[number];
+export type RegistryResolvedDetail = {
+    entry: PluginCatalogEntry;
+    detail: Omit<PluginCatalogDetail, "appearance" | "media" | "gallery" | "versions" | "status"> & {
+        status: NonNullable<PluginCatalogDetail["status"]>;
+        appearance?: {
+            icon: string;
+            accent: string;
+            logo?: RegistryImageReference & {
+                alt: string;
+            };
+        };
+        media?: {
+            banner?: RegistryMediaItem;
+            overview?: RegistryMediaItem;
+        };
+        gallery?: RegistryGalleryItem[];
+        versions: Record<string, RegistryRelease>;
+    };
+};
+export type RegistryInstallAction = {
+    state: "available" | "installed" | "installing" | "disabled" | "rejected";
+    label?: string;
+    reason?: string;
+    installedVersion?: string;
+};
+export type RegistryInstallRequest = {
+    pluginId: string;
+    version: string;
+    bundle: RegistryRelease["bundle"];
+};
+export declare function imageReference(media: RegistryMediaV2): RegistryImageReference & {
+    alt: string;
+};
+export declare function communityDetail(entry: PluginCatalogEntry, detail: PluginCatalogDetail): RegistryResolvedDetail;
+export declare function registryStatusLabel(status?: string): string;
+export declare function titleCaseRegistryValue(value: string): string;
+export declare function formatRegistryBytes(size: number): string;