@lapis-notes/api 0.1.0

package/dist/components/icon/icon-list.svelte

@@ -0,0 +1,213 @@
+<script lang="ts">
+    import Check from "@lucide/svelte/icons/check";
+    import ChevronsUpDown from "@lucide/svelte/icons/chevrons-up-down";
+    import { onMount, tick } from "svelte";
+    import * as Command  from "@lapismd/design-core/shadcn/command";
+    import * as Popover  from "@lapismd/design-core/shadcn/popover";
+    import { Button, type ButtonProps } from "@lapismd/design-core/shadcn/button";
+    import { Command as CommandPrimitive } from "bits-ui";
+    import { fuzzySearch } from "@lapis-notes/ui";
+    import Icon from "./icon.svelte";
+    import { cn } from "../../utils.js";
+    import { getIconPacks } from "../../icons";
+    import type { IconifyJSON } from "@iconify/types";
+    import { createVirtualizer } from "../../hooks/createVirtualizer.svelte";
+    import "./icon-list.css";
+
+    // design-core command index does not re-export GroupHeading.
+    const GroupHeading = CommandPrimitive.GroupHeading;
+
+    type IconSearchEntry = {
+      icon: string;
+      name: string;
+      prefix: string;
+      aliasesText: string;
+    };
+
+   
+    let open = $state(false);
+    let {
+        onValueChange,
+        value = $bindable(""),
+        ref = $bindable(null),
+        disabled = false,
+        label = "Select an icon",
+        ...btnProps
+    }: ButtonProps & {
+        onValueChange?: (value: string) => void;
+        value?: string;
+        ref?: HTMLButtonElement | null,
+        label?: string;
+    } = $props()
+    let iconPacks: IconifyJSON[] = $state([]);
+    let query = $state("");
+
+    let iconEntries = $derived.by(() => {
+      const entries: IconSearchEntry[] = [];
+      for (const pack of iconPacks) {
+        const aliases = Object.keys(pack.aliases ?? {}).reduce((acc: Record<string, string[]>, alias) => {
+          const icon = pack.aliases![alias];
+          acc[icon.parent] ||= [];
+          acc[icon.parent].push(alias);
+          return acc;
+        }, {});
+
+        for (const name of Object.keys(pack.icons)) {
+          entries.push({
+            icon: `${pack.prefix}:${name}`,
+            name,
+            prefix: pack.prefix,
+            aliasesText: (aliases[name] ?? []).join(" "),
+          });
+        }
+      }
+      return entries;
+    });
+
+    let mergedIcons = $derived.by(() => {
+      const normalizedQuery = query.trim();
+      const rankedEntries = normalizedQuery
+        ? fuzzySearch(iconEntries, normalizedQuery, {
+            keys: ["name", "icon", "prefix", "aliasesText"],
+          }).map((result) => result.item)
+        : iconEntries;
+
+      const visibleIcons: Array<string | IconSearchEntry> = [];
+      let currentPrefix = "";
+
+      for (const entry of rankedEntries) {
+        if (entry.prefix !== currentPrefix) {
+          currentPrefix = entry.prefix;
+          visibleIcons.push(entry.prefix);
+        }
+        visibleIcons.push(entry);
+      }
+
+      return visibleIcons;
+    });
+
+    let virtualListEl: HTMLDivElement | null = $state(null)
+    let virtualizer = createVirtualizer({
+            get count() {
+              return mergedIcons.length;
+            },
+            getScrollElement: () => virtualListEl,
+            estimateSize: () => 32,
+            overscan: 5,
+    });
+
+   
+    // We want to refocus the trigger button when the user selects
+    // an item from the list so users can continue navigating the
+    // rest of the form with the keyboard.
+    function closeAndFocusTrigger() {
+      open = false;
+      tick().then(() => {
+        ref?.focus();
+      });
+    }
+
+  $effect(() => {
+    virtualizer.setOptions({ count: mergedIcons.length });
+  });
+
+  onMount(() => {
+        Promise.all(getIconPacks().map(it => {
+            if ("loader" in it) {
+                return it.loader();
+            }
+            return Promise.resolve(it.icons);
+        })).then(packs => {
+            iconPacks = packs;
+        })
+    })
+  </script>
+  <Popover.Root bind:open>
+    <Popover.Trigger bind:ref={ref}>
+      {#snippet child({ props })}
+        <Button
+          variant="outline"
+          class="icon-list-trigger"
+          data-ui-component="icon-list"
+          data-ui-part="trigger"
+          {...props}
+          {...btnProps}
+          {disabled}
+          role="combobox"
+          aria-expanded={open}
+        >
+          {#if value}
+            <Icon name={value} />
+          {:else}
+            <span>{label}</span>
+          {/if}
+          <ChevronsUpDown class="icon-list-trigger-chevron" />
+        </Button>
+      {/snippet}
+    </Popover.Trigger>
+    <Popover.Content
+      class="icon-list-content"
+      data-ui-component="icon-list"
+      data-ui-part="content"
+      style="width: 250px"
+    >
+      <Command.Root shouldFilter={false}>
+        <Command.Input placeholder="Search icon..." bind:value={query} />
+        <Command.List>
+            <div bind:this={virtualListEl} style="max-height: 300px; overflow: auto">
+              <div
+                data-ui-component="icon-list"
+                data-ui-part="virtual-root"
+                style="height: {virtualizer.getTotalSize()}px;"
+              >
+                <Command.Group
+                  class="icon-list-group"
+                  data-ui-component="icon-list"
+                  data-ui-part="group"
+                >
+                  {#each virtualizer.getVirtualItems() as row (row.index)}
+                    {@const item = mergedIcons[row.index]}
+                    {#if typeof item === "string"}
+                      <GroupHeading
+                        class="icon-list-heading"
+                        data-ui-component="icon-list"
+                        data-ui-part="heading"
+                        style="position: absolute; z-index: 10000; top: 0; left: 0; width: 100%; height: {row.size}px; transform: translateY({row.start}px);"
+                      >
+                        {item}
+                      </GroupHeading>
+                    {:else if item}
+                      <Command.Item
+                        style="position: absolute; top: 0; left: 0; width: 100%; height: {row.size}px; transform: translateY({row.start}px);"
+                        class="icon-list-item"
+                        data-ui-component="icon-list"
+                        data-ui-part="item"
+                        value={item.icon}
+                        onSelect={() => {
+                            value = item.icon;
+                            onValueChange?.(item.icon)
+                          
+                            closeAndFocusTrigger();
+                        }}
+                    >
+                        <Check
+                        class={cn(
+                            "icon-list-check",
+                            value !== item.icon && "is-unchecked"
+                        )}
+                        data-ui-component="icon-list"
+                        data-ui-part="check"
+                        data-ui-unchecked={value !== item.icon ? "" : undefined}
+                        />
+                        <Icon name={item.icon} class="icon-list-item-icon" />
+                        {item.name}
+                    </Command.Item> 
+                    {/if}
+                  {/each}
+                </Command.Group>
+              </div>
+            </div>
+        </Command.List>
+      </Command.Root>
+    </Popover.Content>
+</Popover.Root>

package/dist/components/icon/icon-list.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type ButtonProps } from "@lapismd/design-core/shadcn/button";
+import "./icon-list.css";
+type $$ComponentProps = ButtonProps & {
+    onValueChange?: (value: string) => void;
+    value?: string;
+    ref?: HTMLButtonElement | null;
+    label?: string;
+};
+declare const IconList: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+type IconList = ReturnType<typeof IconList>;
+export default IconList;

package/dist/components/icon/icon.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { getSvg } from "../../icons";
+  let {
+    name,
+    class: className,
+  }: {
+    name: string | string[];
+    class?: string;
+  } = $props();
+  let svgContent = $derived(getSvg(name, {class: className}));
+</script>
+
+{#await svgContent then svg}
+  {@html svg}
+{/await}

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    name: string | string[];
+    class?: string;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

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

@@ -0,0 +1,3 @@
+import Icon from "./icon.svelte";
+import IconList from "./icon-list.svelte";
+export { Icon, IconList as List, IconList };

package/dist/components/icon/index.js

@@ -0,0 +1,3 @@
+import Icon from "./icon.svelte";
+import IconList from "./icon-list.svelte";
+export { Icon, IconList as List, IconList };

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import * as ContextMenu from "@lapismd/design-core/shadcn/context-menu";
+  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();
+</script>
+
+{#if mobileMenu.matches}
+  <DrawerMenu {menu} />
+{:else}
+  <ContextMenu.Content class={cn(className)} customAnchor={anchor}>
+    {@render ContextMenuContent({ menu })}
+  </ContextMenu.Content>
+{/if}
+
+{#snippet ContextMenuContent({ menu }: { menu: AppMenu })}
+  {#each Object.entries(menu?.renderedItems ?? {}) as [id, items]}
+    {#each items as item}
+      <ContextMenu.Group>
+        {#if item === "separator"}
+          <ContextMenu.Separator />
+        {:else if isMenuItem(item)}
+          {@render ContextMenuItem({ item })}
+        {:else}
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger>
+              <div data-ui-component="menu" data-ui-part="item-row">
+                <Icon class="menu-item-icon" name="custom:blank" />
+                {item.title}
+              </div>
+            </ContextMenu.SubTrigger>
+            <ContextMenu.SubContent
+              data-ui-component="menu"
+              data-ui-part="sub-content"
+            >
+              {@render ContextMenuContent({ menu: item })}
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        {/if}
+      </ContextMenu.Group>
+    {/each}
+  {/each}
+{/snippet}
+
+{#snippet ContextMenuItem({ item }: { item: MenuItem })}
+  {#if item.checked !== null}
+    <ContextMenu.CheckboxItem
+      checked={item.checked}
+      disabled={item.disabled}
+      onclick={(evt: MouseEvent) => item.click(evt)}
+    >
+      <div data-ui-component="menu" data-ui-part="item-row">
+        {#if item.icon}
+          <Icon class="menu-item-icon" name={item.icon} />
+        {/if}
+        {item.title}
+      </div>
+    </ContextMenu.CheckboxItem>
+  {:else}
+    <ContextMenu.Item
+      disabled={item.disabled}
+      onclick={(evt: MouseEvent) => item.click(evt)}
+    >
+      <div data-ui-component="menu" data-ui-part="item-row">
+        <Icon class="menu-item-icon" name={item.icon || "custom:blank"} />
+        {item.title}
+      </div>
+    </ContextMenu.Item>
+  {/if}
+{/snippet}

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

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

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import * as Drawer from "@lapismd/design-core/shadcn/drawer";
+  import Icon from "../icon/icon.svelte";
+  import {
+    isMenuItem,
+    type Menu as AppMenu,
+    type MenuItem,
+  } from "../../menu.svelte";
+  import "./menu.css";
+
+  let {
+    menu,
+  }: {
+    menu: AppMenu;
+  } = $props();
+
+  const title = $derived(menu.title || "Menu");
+</script>
+
+<Drawer.Root bind:open={() => menu.open, (value) => menu.setOpen(value)}>
+  <Drawer.Content
+    data-ui-component="menu"
+    data-ui-part="drawer-content"
+    data-mobile-menu-drawer
+    aria-label={title}
+  >
+    <Drawer.Header class="sr-only">
+      <Drawer.Title>{title}</Drawer.Title>
+      <Drawer.Description>Choose a menu action.</Drawer.Description>
+    </Drawer.Header>
+    <div data-ui-component="menu" data-ui-part="drawer-body">
+      {@render DrawerMenuContent({ menu })}
+    </div>
+  </Drawer.Content>
+</Drawer.Root>
+
+{#snippet DrawerMenuContent({ menu }: { menu: AppMenu })}
+  {@const itemsBySection = menu.filter ? menu.filteredItems : menu.renderedItems}
+  {#each Object.entries(itemsBySection ?? {}) as [section, items]}
+    <div
+      data-ui-component="menu"
+      data-ui-part="drawer-section"
+      data-mobile-menu-section={section}
+    >
+      {#each items as item}
+        {#if item === "separator"}
+          <div
+            data-ui-component="menu"
+            data-ui-part="drawer-separator"
+            aria-hidden="true"
+          ></div>
+        {:else if isMenuItem(item)}
+          {@render DrawerMenuItem({ item })}
+        {:else}
+          <div data-ui-component="menu" data-ui-part="drawer-heading">
+            {item.title}
+          </div>
+          <div>
+            {@render DrawerMenuContent({ menu: item })}
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {/each}
+{/snippet}
+
+{#snippet DrawerMenuItem({ item }: { item: MenuItem })}
+  <button
+    type="button"
+    data-ui-component="menu"
+    data-ui-part="drawer-item"
+    disabled={item.disabled || item.isLabel}
+    onclick={(evt) => item.click(evt)}
+  >
+    <Icon
+      class="menu-drawer-icon"
+      name={item.icon || (item.checked ? "check" : "custom:blank")}
+    />
+    <span data-ui-component="menu" data-ui-part="drawer-item-label"
+      >{item.title}</span
+    >
+  </button>
+{/snippet}

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

@@ -0,0 +1,8 @@
+import { type Menu as AppMenu } from "../../menu.svelte";
+import "./menu.css";
+type $$ComponentProps = {
+    menu: AppMenu;
+};
+declare const DrawerMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type DrawerMenu = ReturnType<typeof DrawerMenu>;
+export default DrawerMenu;

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import * as DropdownMenu from "@lapismd/design-core/shadcn/dropdown-menu";
+  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();
+</script>
+
+{#if mobileMenu.matches}
+  <DrawerMenu {menu} />
+{:else}
+  <DropdownMenu.Content class={cn(className)} customAnchor={anchor}>
+    {@render DropdownMenuContent({ menu })}
+  </DropdownMenu.Content>
+{/if}
+
+{#snippet DropdownMenuContent({ menu }: { menu: AppMenu })}
+  {#each Object.entries(menu?.filteredItems ?? {}) as [id, items]}
+    <DropdownMenu.Group>
+      {#each items as item}
+        {#if item === "separator"}
+          <DropdownMenu.Separator />
+        {:else if isMenuItem(item)}
+          {@render DropdownItem({ item })}
+        {:else}
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger>
+              <div data-ui-component="menu" data-ui-part="item-row">
+                <Icon class="menu-item-icon-sm" name="custom:blank" />
+                {item.title}
+              </div>
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.SubContent
+              data-ui-component="menu"
+              data-ui-part="sub-content"
+            >
+              {@render DropdownMenuContent({ menu: item })}
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
+        {/if}
+      {/each}
+    </DropdownMenu.Group>
+  {/each}
+{/snippet}
+
+{#snippet DropdownItem({ item }: { item: MenuItem })}
+  {#if item.checked !== null}
+    <DropdownMenu.CheckboxItem
+      checked={item.checked}
+      disabled={item.disabled}
+      onclick={(evt) => item.click(evt)}
+    >
+      <div data-ui-component="menu" data-ui-part="item-row">
+        {#if item.icon}
+          <Icon class="menu-item-icon-sm" name={item.icon} />
+        {/if}
+        {item.title}
+      </div>
+    </DropdownMenu.CheckboxItem>
+  {:else}
+    <DropdownMenu.Item
+      disabled={item.disabled}
+      onclick={(evt) => item.click(evt)}
+    >
+      <div data-ui-component="menu" data-ui-part="item-row">
+        <Icon class="menu-item-icon-sm" name={item.icon || "custom:blank"} />
+        {item.title}
+      </div>
+    </DropdownMenu.Item>
+  {/if}
+{/snippet}

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

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

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

@@ -0,0 +1,6 @@
+import MenuComponent from "./menu.svelte";
+import ContextMenu from "./context-menu.svelte";
+import DropdownMenu from "./dropdown-menu.svelte";
+import PopoverMenu from "./popover-menu.svelte";
+export { MenuComponent, MenuComponent as Root, MenuComponent as Menu, ContextMenu, ContextMenu as Context, DropdownMenu, DropdownMenu as Dropdown, PopoverMenu, PopoverMenu as Popover, };
+export default MenuComponent;

package/dist/components/menu/index.js

@@ -0,0 +1,6 @@
+import MenuComponent from "./menu.svelte";
+import ContextMenu from "./context-menu.svelte";
+import DropdownMenu from "./dropdown-menu.svelte";
+import PopoverMenu from "./popover-menu.svelte";
+export { MenuComponent, MenuComponent as Root, MenuComponent as Menu, ContextMenu, ContextMenu as Context, DropdownMenu, DropdownMenu as Dropdown, PopoverMenu, PopoverMenu as Popover, };
+export default MenuComponent;