@lapis-notes/api 0.1.0

package/dist/components/menu/menu.css

@@ -0,0 +1,139 @@
+/* Menu family — context, dropdown, drawer, popover */
+
+[data-ui-component="menu"] {
+  --ui-menu-item-gap: 0;
+  --ui-menu-icon-size: 1.25rem;
+  --ui-menu-icon-size-sm: 0.875rem;
+  --ui-menu-icon-gap: 0.5rem;
+  --ui-menu-sub-width: 12rem;
+  --ui-menu-drawer-max-height: 85svh;
+  --ui-menu-drawer-pad-x: 0.5rem;
+  --ui-menu-drawer-pad-top: 0.75rem;
+  --ui-menu-drawer-pad-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
+  --ui-menu-item-min-height: 2.75rem;
+  --ui-menu-item-radius: var(--radius, 0.375rem);
+  --ui-menu-popover-min-width: 8rem;
+  --ui-menu-popover-max-width: 20rem;
+}
+
+[data-ui-component="menu"][data-ui-part="item-row"] {
+  display: flex;
+  align-items: center;
+}
+
+[data-ui-component="menu"][data-ui-part="item-icon"],
+[data-ui-component="menu"] .menu-item-icon {
+  width: var(--ui-menu-icon-size);
+  height: var(--ui-menu-icon-size);
+  margin-inline-end: var(--ui-menu-icon-gap);
+  flex-shrink: 0;
+}
+
+[data-ui-component="menu"][data-ui-part="item-icon"][data-ui-size="sm"],
+[data-ui-component="menu"] .menu-item-icon-sm {
+  width: var(--ui-menu-icon-size-sm);
+  height: var(--ui-menu-icon-size-sm);
+  margin-inline-end: var(--ui-menu-icon-gap);
+  flex-shrink: 0;
+}
+
+[data-ui-component="menu"][data-ui-part="sub-content"] {
+  width: var(--ui-menu-sub-width);
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-content"] {
+  max-height: var(--ui-menu-drawer-max-height);
+  gap: 0;
+  padding: 0;
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-body"] {
+  overflow-y: auto;
+  padding-inline: var(--ui-menu-drawer-pad-x);
+  padding-block-start: var(--ui-menu-drawer-pad-top);
+  padding-block-end: var(--ui-menu-drawer-pad-bottom);
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-section"] {
+  padding-block: 0.25rem;
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-separator"] {
+  margin-block: 0.25rem;
+  border-top: 1px solid var(--border);
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-heading"] {
+  color: var(--muted-foreground);
+  padding-inline: 0.75rem 0.75rem;
+  padding-inline-start: 2.75rem;
+  padding-block: 0.75rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-item"] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: var(--ui-menu-item-min-height);
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--ui-menu-item-radius);
+  text-align: left;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-item"]:hover {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-item"]:focus-visible {
+  box-shadow: 0 0 0 2px var(--ring);
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-item"]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-item-icon"],
+[data-ui-component="menu"] .menu-drawer-icon {
+  width: var(--ui-menu-icon-size);
+  height: var(--ui-menu-icon-size);
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+}
+
+[data-ui-component="menu"][data-ui-part="drawer-item-label"] {
+  min-width: 0;
+  flex: 1 1 0%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-ui-component="menu"][data-ui-part="popover-content"] {
+  z-index: 50;
+  min-width: var(--ui-menu-popover-min-width);
+  max-width: var(--ui-menu-popover-max-width);
+  padding: 0.25rem;
+  border: 1px solid var(--border);
+  border-radius: var(--ui-menu-item-radius);
+  background: var(--popover);
+  color: var(--popover-foreground);
+}
+
+[data-ui-component="menu"][data-ui-part="popover-content"]:focus {
+  outline: none;
+}
+
+[data-ui-component="menu"][data-ui-part="command-icon"],
+[data-ui-component="menu"] .menu-command-icon {
+  width: var(--ui-menu-icon-size);
+  height: var(--ui-menu-icon-size);
+  margin-inline-end: var(--ui-menu-icon-gap);
+  flex-shrink: 0;
+}

package/dist/components/menu/menu.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { type Menu as AppMenu } from "../../menu.svelte";
+  import ContextMenuContent from "./context-menu.svelte";
+  import DropdownMenuContent from "./dropdown-menu.svelte";
+  import PopoverMenu from "./popover-menu.svelte";
+  import * as Dropdown from "@lapismd/design-core/shadcn/dropdown-menu";
+  import * as ContextMenu from "@lapismd/design-core/shadcn/context-menu";
+  import type { WithChildren } from "bits-ui";
+  import "./menu.css";
+
+  let {
+    menu,
+    anchor = null,
+    type = "popover",
+    class: className,
+    children,
+  }: WithChildren<{
+    menu: AppMenu;
+    class?: string;
+    type?: "popover" | "dropdown-menu" | "context-menu";
+    anchor?: HTMLElement | null;
+  }> = $props();
+</script>
+
+{#if type === "popover"}
+  <PopoverMenu {menu} {anchor} class={className} />
+{:else if type === "dropdown-menu"}
+  <Dropdown.Root bind:open={() => menu.open, (value) => menu.setOpen(value)}>
+    {@render children?.()}
+    <DropdownMenuContent {menu} {anchor} class={className} />
+  </Dropdown.Root>
+{:else if type === "context-menu"}
+  <ContextMenu.Root bind:open={() => menu.open, (value) => menu.setOpen(value)}>
+    {@render children?.()}
+    <ContextMenuContent {menu} {anchor} class={className} />
+  </ContextMenu.Root>
+{/if}

package/dist/components/menu/menu.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Menu as AppMenu } from "../../menu.svelte";
+import type { WithChildren } from "bits-ui";
+import "./menu.css";
+declare const Menu: import("svelte").Component<WithChildren<{
+    menu: AppMenu;
+    class?: string;
+    type?: "popover" | "dropdown-menu" | "context-menu";
+    anchor?: HTMLElement | null;
+}>, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/menu/mobile-menu-query.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function createMobileMenuQuery(): {
+    readonly matches: boolean;
+};

package/dist/components/menu/mobile-menu-query.svelte.js

@@ -0,0 +1,21 @@
+import { onMount } from "svelte";
+export function createMobileMenuQuery() {
+    let matches = $state(globalThis.matchMedia?.("(max-width: 767px)").matches ?? false);
+    onMount(() => {
+        if (!globalThis.matchMedia) {
+            return;
+        }
+        const media = globalThis.matchMedia("(max-width: 767px)");
+        const update = () => {
+            matches = media.matches;
+        };
+        update();
+        media.addEventListener("change", update);
+        return () => media.removeEventListener("change", update);
+    });
+    return {
+        get matches() {
+            return matches;
+        },
+    };
+}

package/dist/components/menu/popover-menu.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import * as Popover from "@lapismd/design-core/shadcn/popover";
+  import * as Command from "@lapismd/design-core/shadcn/command";
+  import { cn } from "../../utils";
+  import Icon from "../icon/icon.svelte";
+  import DrawerMenu from "./drawer-menu.svelte";
+  import { createMobileMenuQuery } from "./mobile-menu-query.svelte";
+  import {
+    isMenuItem,
+    type Menu as AppMenu,
+    type MenuItem,
+  } from "../../menu.svelte";
+  import "./menu.css";
+
+  let {
+    menu,
+    anchor = null,
+    class: className,
+  }: {
+    menu: AppMenu;
+    class?: string;
+    anchor?: HTMLElement | null;
+  } = $props();
+
+  const mobileMenu = createMobileMenuQuery();
+  const hasItems = $derived(
+    Object.keys(menu.filter ? menu.filteredItems : menu.renderedItems).length >
+      0,
+  );
+</script>
+
+{#if hasItems}
+  {#if mobileMenu.matches}
+    <DrawerMenu {menu} />
+  {:else}
+    <Popover.Root bind:open={() => menu.open, (value) => menu.setOpen(value)}>
+      <Popover.Content
+        onInteractOutside={(evt) => {
+          if (evt.target !== anchor) {
+            menu.setOpen(false);
+          }
+        }}
+        trapFocus={false}
+        interactOutsideBehavior="defer-otherwise-close"
+        customAnchor={anchor}
+        data-ui-component="menu"
+        data-ui-part="popover-content"
+        class={cn(className)}
+      >
+        <Command.Root shouldFilter={false}>
+          <Command.List>
+            <Command.Group heading={menu.title}>
+              {@render CommandContent({ menu })}
+            </Command.Group>
+          </Command.List>
+        </Command.Root>
+      </Popover.Content>
+    </Popover.Root>
+  {/if}
+{/if}
+
+{#snippet CommandContent({ menu }: { menu: AppMenu })}
+  {#each Object.entries(menu?.filteredItems ?? {}) as [id, items]}
+    {#each items as item}
+      <Command.Group>
+        {#if item === "separator"}
+          <Command.Separator />
+        {:else if isMenuItem(item)}
+          {@render CommandItem({ item })}
+        {:else}
+          <Command.Group heading={item.title}>
+            {@render CommandContent({ menu: item })}
+          </Command.Group>
+        {/if}
+      </Command.Group>
+    {/each}
+  {/each}
+{/snippet}
+
+{#snippet CommandItem({ item }: { item: MenuItem })}
+  <Command.Item
+    onclick={(evt: MouseEvent) => item.click(evt)}
+    value={typeof item.title === "string" ? item.title : ""}
+  >
+    {#if item.icon}
+      <Icon class="menu-command-icon" name={item.icon} />
+    {/if}
+    {item.title}
+  </Command.Item>
+{/snippet}

package/dist/components/menu/popover-menu.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Menu as AppMenu } from "../../menu.svelte";
+import "./menu.css";
+type $$ComponentProps = {
+    menu: AppMenu;
+    class?: string;
+    anchor?: HTMLElement | null;
+};
+declare const PopoverMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopoverMenu = ReturnType<typeof PopoverMenu>;
+export default PopoverMenu;

package/dist/components/select/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./select.svelte";
+export { Root, Root as Select };

package/dist/components/select/index.js

@@ -0,0 +1,2 @@
+import Root from "./select.svelte";
+export { Root, Root as Select };

package/dist/components/select/select.svelte

@@ -0,0 +1,72 @@
+<script lang="ts" module>
+    import * as SelectPrimitive from "@lapismd/design-core/shadcn/select";
+    import { type SelectRootProps } from "bits-ui";
+    const SelectRoot: any = SelectPrimitive.Root;
+
+    export type SelectItem = {
+      value: string;
+      label: string;
+      disabled?: boolean;
+    };
+
+    type SharedSelectProps = {
+      items?: SelectItem[];
+      placeholder?: string;
+      ref?: HTMLElement | null;
+    } & Omit<SelectRootProps, "items" | "type" | "value" | "onValueChange">;
+
+    export type SingleSelectProps = SharedSelectProps & {
+      type?: "single";
+      value?: string;
+      onValueChange?: (value: string) => void;
+    };
+
+    export type MultipleSelectProps = SharedSelectProps & {
+      type: "multiple";
+      value?: string[];
+      onValueChange?: (value: string[]) => void;
+    };
+
+    export type SelectProps = SingleSelectProps | MultipleSelectProps;
+  </script>
+  
+  <script lang="ts">
+    let {
+      items = [],
+      type = "single",
+      value = $bindable(),
+      ref = $bindable(null),
+      placeholder = "Select...",
+      ...rest
+    }: SelectProps = $props();
+
+    const triggerContent = $derived.by(() => {
+      if (Array.isArray(value)) {
+        const selectedValues = value;
+        const selected = items
+          .filter((item) => selectedValues.includes(item.value))
+          .map((item) => item.label);
+        return selected.length ? selected.join(", ") : placeholder;
+      }
+      return items.find((item) => item.value === value)?.label ?? placeholder;
+    });
+  </script>
+  
+  <div bind:this={ref}>
+    <SelectRoot {...rest} {type} bind:value>
+      <SelectPrimitive.Trigger>
+        {triggerContent}
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Content>
+        <SelectPrimitive.Group>
+          {#each items as item (item.value)}
+            <SelectPrimitive.Item
+              value={item.value}
+              label={item.label}
+              disabled={item.disabled}
+            />
+          {/each}
+        </SelectPrimitive.Group>
+      </SelectPrimitive.Content>
+    </SelectRoot>
+  </div>  

package/dist/components/select/select.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type SelectRootProps } from "bits-ui";
+export type SelectItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+type SharedSelectProps = {
+    items?: SelectItem[];
+    placeholder?: string;
+    ref?: HTMLElement | null;
+} & Omit<SelectRootProps, "items" | "type" | "value" | "onValueChange">;
+export type SingleSelectProps = SharedSelectProps & {
+    type?: "single";
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+export type MultipleSelectProps = SharedSelectProps & {
+    type: "multiple";
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export type SelectProps = SingleSelectProps | MultipleSelectProps;
+declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/configuration-option-source-providers.d.ts

@@ -0,0 +1,17 @@
+import type { StringType, EnumType } from "./configuration.svelte";
+export declare function normalizeMetadataFieldOptionValues(values: readonly unknown[]): string[];
+export declare function filterOptionsByQuery(options: readonly {
+    value: string;
+    label?: string;
+}[], query: string, limit?: number): Array<{
+    value: string;
+    label: string;
+}>;
+export declare function resolveMetadataFieldValues(getValues: (field: string) => readonly unknown[], schema: StringType | EnumType, query?: string, limit?: number): Array<{
+    value: string;
+    label: string;
+}>;
+export declare function resolveMetadataFieldValuesAsync(getValues: (field: string) => Promise<readonly unknown[]>, schema: StringType | EnumType, query?: string, limit?: number): Promise<Array<{
+    value: string;
+    label: string;
+}>>;

package/dist/configuration-option-source-providers.js

@@ -0,0 +1,59 @@
+export function normalizeMetadataFieldOptionValues(values) {
+    const normalized = new Set();
+    for (const value of values) {
+        if (typeof value === "string") {
+            const trimmed = value.trim();
+            if (trimmed) {
+                normalized.add(trimmed);
+            }
+            continue;
+        }
+        if (Array.isArray(value)) {
+            for (const entry of value) {
+                if (typeof entry === "string") {
+                    const trimmed = entry.trim();
+                    if (trimmed) {
+                        normalized.add(trimmed);
+                    }
+                }
+            }
+            continue;
+        }
+        if (value != null) {
+            const trimmed = String(value).trim();
+            if (trimmed) {
+                normalized.add(trimmed);
+            }
+        }
+    }
+    return [...normalized].sort((a, b) => a.localeCompare(b));
+}
+export function filterOptionsByQuery(options, query, limit = 50) {
+    const normalizedQuery = query.trim().toLowerCase();
+    const filtered = normalizedQuery
+        ? options.filter((option) => {
+            const haystack = `${option.label ?? option.value} ${option.value}`.toLowerCase();
+            return haystack.includes(normalizedQuery);
+        })
+        : options;
+    return filtered.slice(0, limit).map((option) => ({
+        value: option.value,
+        label: option.label ?? option.value,
+    }));
+}
+export function resolveMetadataFieldValues(getValues, schema, query = "", limit = 50) {
+    const field = schema.optionsSourceParams?.field;
+    if (typeof field !== "string" || !field.trim()) {
+        return [];
+    }
+    const values = normalizeMetadataFieldOptionValues(getValues(field.trim()));
+    const options = values.map((value) => ({ value, label: value }));
+    return filterOptionsByQuery(options, query, limit);
+}
+export async function resolveMetadataFieldValuesAsync(getValues, schema, query = "", limit = 50) {
+    const field = schema.optionsSourceParams?.field;
+    if (typeof field !== "string" || !field.trim())
+        return [];
+    const values = normalizeMetadataFieldOptionValues(await getValues(field.trim()));
+    return filterOptionsByQuery(values.map((value) => ({ value, label: value })), query, limit);
+}

package/dist/configuration-option-source-registry.d.ts

@@ -0,0 +1,59 @@
+import type { App } from "./context.svelte";
+import type { EnumType, StringType } from "./configuration.svelte";
+import { EventDispatcher } from "./events";
+export type ConfigurationOption = {
+    value: string;
+    label?: string;
+    description?: string;
+    markdownDescription?: string;
+    detail?: string;
+    icon?: string;
+    disabled?: boolean;
+    source?: string;
+};
+export type ConfigurationOptionSourceContext = {
+    app: App;
+    sourceId: string;
+    schema: StringType | EnumType;
+    configId?: string;
+    categoryId?: string;
+    settingTitle?: string;
+    currentValue?: unknown;
+    query?: string;
+    limit?: number;
+    signal?: AbortSignal;
+};
+export type MaybePromise<T> = T | Promise<T>;
+export type ConfigurationOptionSourceProvider = {
+    label?: string;
+    description?: string;
+    pluginId?: string;
+    cache?: "none" | "session";
+    getOptions(context: ConfigurationOptionSourceContext): MaybePromise<readonly ConfigurationOption[]>;
+};
+export type ConfigurationOptionSourceChangeReason = "registered" | "unregistered" | "invalidated";
+export type ConfigurationOptionSourceChange = {
+    sourceId: string;
+    reason: ConfigurationOptionSourceChangeReason;
+};
+export type ConfigurationOptionSourceRegistration = {
+    readonly id: string;
+    invalidate(): void;
+    dispose(): void;
+};
+export declare function normalizeOptionSourceId(id: string): string;
+export declare function validateOptionSourceId(id: string): void;
+export declare function normalizeConfigurationOptions(options: readonly ConfigurationOption[], sourceId: string): ConfigurationOption[];
+export declare class ConfigurationOptionSourceRegistry extends EventDispatcher<{
+    changed: [change: ConfigurationOptionSourceChange];
+}> {
+    private readonly sources;
+    private readonly sessionCache;
+    private sessionCachePrefix;
+    private clearSessionCache;
+    private sessionCacheKey;
+    register(id: string, provider: ConfigurationOptionSourceProvider): ConfigurationOptionSourceRegistration;
+    has(id: string): boolean;
+    resolve(id: string, context: Omit<ConfigurationOptionSourceContext, "sourceId">): Promise<ConfigurationOption[]>;
+    getRegisteredSourceIds(): string[];
+}

package/dist/configuration-option-source-registry.js

@@ -0,0 +1,123 @@
+import { EventDispatcher } from "./events";
+import { logging } from "./logging";
+const SOURCE_ID_PATTERN = /^[a-zA-Z0-9][a-zA-Z0-9._:-]*$/;
+const logger = logging.getLogger("configuration-option-sources");
+export function normalizeOptionSourceId(id) {
+    return id.trim();
+}
+export function validateOptionSourceId(id) {
+    const normalized = normalizeOptionSourceId(id);
+    if (!normalized) {
+        throw new Error("Configuration option source id must not be empty.");
+    }
+    if (!SOURCE_ID_PATTERN.test(normalized)) {
+        throw new Error(`Invalid configuration option source id: ${id}. Expected pattern ${SOURCE_ID_PATTERN.source}.`);
+    }
+}
+export function normalizeConfigurationOptions(options, sourceId) {
+    const seen = new Set();
+    const normalized = [];
+    for (const option of options) {
+        const value = String(option.value ?? "").trim();
+        if (!value || seen.has(value)) {
+            continue;
+        }
+        seen.add(value);
+        normalized.push({
+            ...option,
+            value,
+            label: option.label?.trim() || value,
+            source: option.source ?? sourceId,
+        });
+    }
+    return normalized;
+}
+export class ConfigurationOptionSourceRegistry extends EventDispatcher {
+    sources = new Map();
+    sessionCache = new Map();
+    sessionCachePrefix(sourceId) {
+        return `${sourceId}:`;
+    }
+    clearSessionCache(sourceId) {
+        const prefix = this.sessionCachePrefix(sourceId);
+        for (const key of [...this.sessionCache.keys()]) {
+            if (key.startsWith(prefix)) {
+                this.sessionCache.delete(key);
+            }
+        }
+    }
+    sessionCacheKey(sourceId, context) {
+        const params = "optionsSourceParams" in context.schema
+            ? context.schema.optionsSourceParams
+            : undefined;
+        const query = context.query?.trim() ?? "";
+        const limit = context.limit ?? 50;
+        return `${sourceId}:${JSON.stringify(params ?? null)}:${query}:${limit}`;
+    }
+    register(id, provider) {
+        validateOptionSourceId(id);
+        const sourceId = normalizeOptionSourceId(id);
+        if (this.sources.has(sourceId)) {
+            throw new Error(`Configuration option source already registered: ${sourceId}`);
+        }
+        this.sources.set(sourceId, provider);
+        this.emit("changed", { sourceId, reason: "registered" });
+        let disposed = false;
+        return {
+            id: sourceId,
+            invalidate: () => {
+                if (!disposed && this.sources.get(sourceId) === provider) {
+                    this.clearSessionCache(sourceId);
+                    this.emit("changed", { sourceId, reason: "invalidated" });
+                }
+            },
+            dispose: () => {
+                if (disposed) {
+                    return;
+                }
+                disposed = true;
+                if (this.sources.get(sourceId) === provider) {
+                    this.clearSessionCache(sourceId);
+                    this.sources.delete(sourceId);
+                    this.emit("changed", { sourceId, reason: "unregistered" });
+                }
+            },
+        };
+    }
+    has(id) {
+        return this.sources.has(normalizeOptionSourceId(id));
+    }
+    async resolve(id, context) {
+        const sourceId = normalizeOptionSourceId(id);
+        const provider = this.sources.get(sourceId);
+        if (!provider) {
+            return [];
+        }
+        const useSessionCache = provider.cache === "session";
+        if (useSessionCache) {
+            const cached = this.sessionCache.get(this.sessionCacheKey(sourceId, context));
+            if (cached) {
+                return normalizeConfigurationOptions(cached, sourceId);
+            }
+        }
+        try {
+            const options = await provider.getOptions({
+                ...context,
+                sourceId,
+                limit: context.limit ?? 50,
+            });
+            const normalized = normalizeConfigurationOptions(options, sourceId);
+            if (useSessionCache) {
+                this.sessionCache.set(this.sessionCacheKey(sourceId, context), normalized);
+            }
+            return normalized;
+        }
+        catch (error) {
+            logger.warn(`Configuration option source ${sourceId} failed to resolve options.`, error);
+            return [];
+        }
+    }
+    getRegisteredSourceIds() {
+        return [...this.sources.keys()].sort();
+    }
+}