@lapis-notes/workspace 0.1.0 → 0.2.0

package/dist/plugin-management/PluginRegistryStatus.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import AlertTriangle from "@lucide/svelte/icons/alert-triangle";
+  import CheckCircle2 from "@lucide/svelte/icons/check-circle-2";
+  import ShieldAlert from "@lucide/svelte/icons/shield-alert";
+
+  let {
+    label,
+    reason,
+    tone = "neutral",
+  }: {
+    label: string;
+    reason?: string;
+    tone?: "neutral" | "success" | "warning" | "danger";
+  } = $props();
+</script>
+
+<div
+  class="lapis-plugin-registry-status"
+  data-ui-component="plugin-registry-status"
+  data-status-tone={tone}
+>
+  <span class="lapis-plugin-registry-status__label">
+    {#if tone === "success"}
+      <CheckCircle2 aria-hidden="true" />
+    {:else if tone === "danger"}
+      <ShieldAlert aria-hidden="true" />
+    {:else if tone === "warning"}
+      <AlertTriangle aria-hidden="true" />
+    {/if}
+    {label}
+  </span>
+  {#if reason}<span class="lapis-plugin-registry-status__reason">{reason}</span>{/if}
+</div>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label: string;
+    reason?: string;
+    tone?: "neutral" | "success" | "warning" | "danger";
+};
+declare const PluginRegistryStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type PluginRegistryStatus = ReturnType<typeof PluginRegistryStatus>;
+export default PluginRegistryStatus;

package/dist/plugin-management/PluginRegistryToolbar.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import SlidersHorizontal from "@lucide/svelte/icons/sliders-horizontal";
+  import { SearchFilterBar } from "@lapismd/design-core/filter";
+  import {
+    FilterCommandPicker,
+    type FilterCommandOption,
+  } from "@lapismd/design-core/forms";
+  import * as Button from "@lapismd/design-core/shadcn/button";
+
+  type ToolbarTab = "installed" | "browse" | "updates";
+
+  let {
+    tab,
+    search = $bindable(""),
+    platform = $bindable("all"),
+    channel = $bindable("all"),
+    category = $bindable("all"),
+    installedState = $bindable("all"),
+    compatibleOnly = $bindable(false),
+    enabledState = $bindable("all"),
+    provenance = $bindable("all"),
+    updateState = $bindable("all"),
+    sort = $bindable("name"),
+    categories = [],
+    filterCount,
+    resultCount,
+    onreset,
+  }: {
+    tab: ToolbarTab;
+    search?: string;
+    platform?: string;
+    channel?: string;
+    category?: string;
+    installedState?: string;
+    compatibleOnly?: boolean;
+    enabledState?: string;
+    provenance?: string;
+    updateState?: string;
+    sort?: string;
+    categories?: string[];
+    filterCount: number;
+    resultCount: number;
+    onreset: () => void;
+  } = $props();
+
+  let filtersExpanded = $state(false);
+
+  const platformOptions: FilterCommandOption[] = [
+    { value: "all", label: "All platforms", description: "Show every supported host." },
+    { value: "web", label: "Web", description: "Runs in browser-hosted Lapis apps." },
+    { value: "electron", label: "Electron", description: "Runs in Electron desktop hosts." },
+    { value: "desktop", label: "Desktop", description: "Runs in supported desktop hosts." },
+  ];
+  const channelOptions: FilterCommandOption[] = [
+    { value: "all", label: "All channels", description: "Official and community releases." },
+    { value: "official", label: "Official", description: "Curated and verified by the Lapis registry." },
+    { value: "community", label: "Community", description: "Published by community maintainers." },
+  ];
+  const installedOptions: FilterCommandOption[] = [
+    { value: "all", label: "Any install state" },
+    { value: "available", label: "Available", description: "Not currently included or installed." },
+    { value: "installed", label: "Installed", description: "Included in the profile or vault." },
+  ];
+  const enabledOptions: FilterCommandOption[] = [
+    { value: "all", label: "Any status" },
+    { value: "enabled", label: "Enabled" },
+    { value: "disabled", label: "Disabled" },
+    { value: "revoked", label: "Revoked" },
+    { value: "restart", label: "Restart required" },
+  ];
+  const provenanceOptions: FilterCommandOption[] = [
+    { value: "all", label: "Any provenance" },
+    { value: "official", label: "Official" },
+    { value: "community", label: "Community" },
+    { value: "manual", label: "Manual" },
+    { value: "development", label: "Development" },
+  ];
+  const updateOptions: FilterCommandOption[] = [
+    { value: "all", label: "Any update status" },
+    { value: "ready", label: "Ready" },
+    { value: "incompatible", label: "Incompatible" },
+    { value: "revoked", label: "Revoked" },
+  ];
+
+  const browseSortOptions: FilterCommandOption[] = [
+    { value: "name", label: "Name" },
+    { value: "recent", label: "Recently updated" },
+    {
+      value: "downloads",
+      label: "Most downloaded",
+      description: "Highest approximate download requests during the last 30 days.",
+    },
+  ];
+  const installedSortOptions: FilterCommandOption[] = [
+    { value: "name", label: "Name" },
+    { value: "recent", label: "Recently updated" },
+  ];
+  const updateSortOptions: FilterCommandOption[] = [
+    { value: "status", label: "Status first" },
+    { value: "name", label: "Name" },
+  ];
+  let categoryOptions = $derived<FilterCommandOption[]>([
+    { value: "all", label: "All categories" },
+    ...categories.map((item) => ({ value: item, label: item })),
+  ]);
+</script>
+
+<div
+  class="lapis-plugin-registry-toolbar"
+  data-ui-component="plugin-registry-toolbar"
+  data-toolbar-tab={tab}
+>
+  <SearchFilterBar
+    value={search}
+    placeholder={`Search ${tab === "browse" ? "plugins" : tab}`}
+    ariaLabel={`Search ${tab}`}
+    showFilterToggle
+    bind:filtersExpanded
+    showClearAll={filterCount > 0}
+    clearAllDisabled={filterCount === 0}
+    clearAllLabel="Reset search and filters"
+    expandFiltersLabel={`Show ${tab} filters`}
+    collapseFiltersLabel={`Hide ${tab} filters`}
+    onValueChange={(next) => (search = next)}
+    onClearSearch={() => {
+      search = "";
+    }}
+    onClearAll={onreset}
+  >
+    {#snippet filters()}
+      <div class="lapis-plugin-registry-toolbar__controls">
+        {#if tab === "browse"}
+          <FilterCommandPicker label="Platform" ariaLabel="Filter by platform" options={platformOptions} value={platform} onChange={(next) => { platform = next; }} />
+          <FilterCommandPicker label="Channel" ariaLabel="Filter by channel" options={channelOptions} value={channel} onChange={(next) => { channel = next; }} />
+          <FilterCommandPicker label="Category" ariaLabel="Filter by category" options={categoryOptions} value={category} onChange={(next) => { category = next; }} />
+          <FilterCommandPicker label="Installed" ariaLabel="Filter by installed state" options={installedOptions} value={installedState} onChange={(next) => { installedState = next; }} />
+          <Button.Root
+            size="sm"
+            variant={compatibleOnly ? "secondary" : "outline"}
+            aria-pressed={compatibleOnly}
+            onclick={() => (compatibleOnly = !compatibleOnly)}
+          ><SlidersHorizontal data-icon="inline-start" />Compatible only</Button.Root>
+          <FilterCommandPicker label="Sort" ariaLabel="Sort Browse plugins" options={browseSortOptions} value={sort} onChange={(next) => { sort = next; }} />
+        {:else if tab === "installed"}
+          <FilterCommandPicker label="Status" ariaLabel="Filter installed status" options={enabledOptions} value={enabledState} onChange={(next) => { enabledState = next; }} />
+          <FilterCommandPicker label="Provenance" ariaLabel="Filter installed provenance" options={provenanceOptions} value={provenance} onChange={(next) => { provenance = next; }} />
+          <FilterCommandPicker label="Sort" ariaLabel="Sort installed plugins" options={installedSortOptions} value={sort} onChange={(next) => { sort = next; }} />
+        {:else}
+          <FilterCommandPicker label="Status" ariaLabel="Filter update status" options={updateOptions} value={updateState} onChange={(next) => { updateState = next; }} />
+          <FilterCommandPicker label="Sort" ariaLabel="Sort updates" options={updateSortOptions} value={sort} onChange={(next) => { sort = next; }} />
+        {/if}
+      </div>
+    {/snippet}
+  </SearchFilterBar>
+  <div class="lapis-plugin-registry-toolbar__summary" aria-live="polite">
+    <span>{resultCount} {resultCount === 1 ? "result" : "results"}</span>
+    <span>{filterCount} {filterCount === 1 ? "active filter" : "active filters"}</span>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+type ToolbarTab = "installed" | "browse" | "updates";
+type $$ComponentProps = {
+    tab: ToolbarTab;
+    search?: string;
+    platform?: string;
+    channel?: string;
+    category?: string;
+    installedState?: string;
+    compatibleOnly?: boolean;
+    enabledState?: string;
+    provenance?: string;
+    updateState?: string;
+    sort?: string;
+    categories?: string[];
+    filterCount: number;
+    resultCount: number;
+    onreset: () => void;
+};
+declare const PluginRegistryToolbar: import("svelte").Component<$$ComponentProps, {}, "search" | "provenance" | "sort" | "channel" | "category" | "platform" | "compatibleOnly" | "installedState" | "enabledState" | "updateState">;
+type PluginRegistryToolbar = ReturnType<typeof PluginRegistryToolbar>;
+export default PluginRegistryToolbar;

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

@@ -0,0 +1,229 @@
+<script lang="ts">
+  import { Badge } from "@lapismd/design-core/shadcn/badge";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import type { CommunityChipProps } from "./props.js";
+
+  let {
+    children,
+    leading,
+    variant = "outline",
+    tone = "neutral",
+    size = "default",
+    shape = "pill",
+    href,
+    onclick,
+    buttonProps,
+    linkProps,
+    disabled = false,
+    pressed,
+    ariaLabel,
+    ariaHidden = false,
+    title,
+    class: className = "",
+  }: CommunityChipProps = $props();
+
+  const badgeVariant = $derived(
+    variant === "muted" || variant === "subtle"
+      ? "secondary"
+      : variant === "solid"
+        ? "default"
+        : "outline",
+  );
+  const action = $derived(href !== undefined || onclick !== undefined);
+  const classes = $derived(`community-chip ${className}`.trim());
+</script>
+
+{#snippet content()}
+  {#if leading}{@render leading()}{/if}
+  {@render children()}
+{/snippet}
+
+{#if href !== undefined}
+  <Badge
+    {...linkProps}
+    {href}
+    variant={badgeVariant}
+    class={classes}
+    data-ui-part="community-chip"
+    data-chip-variant={variant}
+    data-chip-tone={tone}
+    data-chip-size={size}
+    data-chip-shape={shape}
+    data-action={action ? "" : undefined}
+    aria-label={ariaLabel}
+    aria-hidden={ariaHidden ? "true" : undefined}
+    aria-disabled={disabled ? "true" : undefined}
+    tabindex={disabled ? -1 : undefined}
+    {title}
+    onclick={(event) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      linkProps?.onclick?.(event);
+      if (!event.defaultPrevented) onclick?.(event);
+    }}
+  >
+    {@render content()}
+  </Badge>
+{:else if onclick !== undefined}
+  <Button
+    {...buttonProps}
+    type="button"
+    variant={badgeVariant}
+    size={size === "inline" ? "xs" : "sm"}
+    class={classes}
+    data-ui-part="community-chip"
+    data-chip-variant={variant}
+    data-chip-tone={tone}
+    data-chip-size={size}
+    data-chip-shape={shape}
+    data-action=""
+    aria-label={ariaLabel}
+    aria-hidden={ariaHidden ? "true" : undefined}
+    aria-pressed={pressed}
+    {disabled}
+    {title}
+    onclick={(event) => {
+      buttonProps?.onclick?.(event);
+      if (!event.defaultPrevented) onclick(event);
+    }}
+  >
+    {@render content()}
+  </Button>
+{:else}
+  <Badge
+    variant={badgeVariant}
+    class={classes}
+    data-ui-part="community-chip"
+    data-chip-variant={variant}
+    data-chip-tone={tone}
+    data-chip-size={size}
+    data-chip-shape={shape}
+    aria-label={ariaLabel}
+    aria-hidden={ariaHidden ? "true" : undefined}
+    {title}
+  >
+    {@render content()}
+  </Badge>
+{/if}
+
+<style>
+  :global(.community-chip[data-ui-component="badge"]),
+  :global(.community-chip[data-ui-component="button"]) {
+    height: 1.45rem;
+    min-height: 1.45rem;
+    gap: 0.3rem;
+    border-radius: calc(var(--radius) * 2.6);
+    padding-inline: 0.55rem;
+    font-size: var(--community-text-secondary);
+    font-weight: 550;
+    line-height: 1;
+  }
+
+  :global(.community-chip[data-chip-size="compact"]) {
+    height: 1.25rem;
+    min-width: 1.25rem;
+    min-height: 1.25rem;
+    padding-inline: 0.4rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :global(.community-chip[data-chip-size="indicator"]) {
+    height: 1rem;
+    min-width: 1rem;
+    min-height: 1rem;
+    padding-inline: 0.2rem;
+    font-size: var(--community-text-secondary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :global(.community-chip[data-ui-component][data-chip-size="inline"]) {
+    width: fit-content;
+    max-width: 100%;
+    height: 1lh;
+    min-height: 0;
+    gap: 0.22em;
+    border: 0;
+    border-radius: calc(var(--radius) - 0.2rem);
+    padding: 0 0.25em;
+    box-decoration-break: clone;
+    font: inherit;
+    font-weight: 600;
+    line-height: inherit;
+    text-align: start;
+    vertical-align: baseline;
+    -webkit-box-decoration-break: clone;
+  }
+
+  :global(.community-chip[data-chip-shape="square"]) {
+    border-radius: 0.28rem;
+  }
+
+  :global(
+      .community-chip[data-chip-variant="muted"][data-chip-shape="square"]
+    ) {
+    border-color: transparent;
+    color: inherit;
+    background: color-mix(in srgb, currentcolor 7%, transparent);
+  }
+
+  :global(.community-chip[data-chip-variant="subtle"]) {
+    border: 0;
+  }
+
+  :global(
+      .community-chip[data-chip-variant="subtle"][data-chip-tone="neutral"]
+    ) {
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--foreground) 8%, transparent);
+  }
+
+  :global(.community-chip[data-chip-tone="accent"]) {
+    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--primary) 12%, var(--background));
+  }
+
+  :global(.community-chip[data-chip-tone="success"]) {
+    border-color: color-mix(in srgb, #16a34a 44%, var(--border));
+    color: color-mix(in srgb, #16a34a 65%, var(--foreground));
+    background: color-mix(in srgb, #16a34a 14%, var(--background));
+  }
+
+  :global(.community-chip[data-chip-tone="warning"]) {
+    border-color: color-mix(in srgb, #d97706 42%, var(--border));
+    color: color-mix(in srgb, #b45309 78%, var(--foreground));
+    background: color-mix(in srgb, #f59e0b 13%, var(--background));
+  }
+
+  :global(.community-chip[data-chip-tone="danger"]) {
+    border-color: color-mix(in srgb, var(--destructive) 42%, var(--border));
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--destructive) 10%, var(--background));
+  }
+
+  :global(
+      .community-chip[data-ui-component="badge"][data-action]:hover,
+      .community-chip[data-ui-component="button"][data-action]:hover
+    ) {
+    background-color: color-mix(
+      in srgb,
+      var(--foreground) 10%,
+      var(--background)
+    );
+    color: var(--accent-foreground);
+  }
+
+  :global(.community-chip[aria-disabled="true"]) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  :global(.community-chip > svg),
+  :global(.community-chip [data-icon]) {
+    width: 0.8rem;
+    height: 0.8rem;
+    flex: none;
+  }
+</style>

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

@@ -0,0 +1,4 @@
+import type { CommunityChipProps } from "./props.js";
+declare const CommunityChip: import("svelte").Component<CommunityChipProps, {}, "">;
+type CommunityChip = ReturnType<typeof CommunityChip>;
+export default CommunityChip;

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { communityMemberAvatarFallbackTone } from "./avatar-model";
+  import "./community-member-avatar.css";
+  let {
+    member,
+    size = "small",
+    decorative = false,
+  }: {
+    member: { name: string; initials: string; avatarUrl?: string };
+    size?: "small" | "xsmall";
+    decorative?: boolean;
+  } = $props();
+  const fallbackTone = $derived(communityMemberAvatarFallbackTone(member.name));
+  let failed = $state(false);
+  $effect(() => {
+    member.avatarUrl;
+    failed = false;
+  });
+</script>
+
+<span
+  class="community-member-avatar"
+  data-ui-component="community-member-avatar"
+  data-size={size}
+  data-shape="circle"
+  aria-hidden={decorative ? "true" : undefined}
+  aria-label={decorative ? undefined : `${member.name} avatar`}
+  role={decorative ? undefined : "img"}
+>
+  <span
+    class="community-member-avatar__image"
+    data-ui-part="image"
+    data-content={member.avatarUrl && !failed ? "image" : "initials"}
+    data-fallback-tone={member.avatarUrl && !failed ? undefined : fallbackTone}
+  >
+    {#if member.avatarUrl && !failed}<img
+        src={member.avatarUrl}
+        alt=""
+        onerror={() => (failed = true)}
+      />{:else}<span aria-hidden="true">{member.initials}</span>{/if}
+  </span>
+</span>

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

@@ -0,0 +1,13 @@
+import "./community-member-avatar.css";
+type $$ComponentProps = {
+    member: {
+        name: string;
+        initials: string;
+        avatarUrl?: string;
+    };
+    size?: "small" | "xsmall";
+    decorative?: boolean;
+};
+declare const CommunityMemberAvatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type CommunityMemberAvatar = ReturnType<typeof CommunityMemberAvatar>;
+export default CommunityMemberAvatar;