@cloudvoyant/helical-svelte 0.19.0

package/dist/combobox/ComboboxTrigger.svelte

@@ -0,0 +1,14 @@
+<!-- libs/helical-svelte/src/combobox/ComboboxTrigger.svelte -->
+<!-- Closely based on: Shark UI combobox (@ark-ui/svelte/combobox), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { ComboboxTrigger, type ComboboxTriggerProps } from '@ark-ui/svelte/combobox';
+  import { comboboxTriggerBase, cn } from '@cloudvoyant/helical-ui';
+
+  let { class: className = '', children, ...rest }: ComboboxTriggerProps = $props();
+
+  const classes = $derived(cn(comboboxTriggerBase, className));
+</script>
+
+<ComboboxTrigger class={classes} {...rest}>
+  {@render children?.()}
+</ComboboxTrigger>

package/dist/combobox/ComboboxTrigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { ComboboxTrigger, type ComboboxTriggerProps } from '@ark-ui/svelte/combobox';
+declare const ComboboxTrigger: import("svelte").Component<ComboboxTriggerProps, {}, "">;
+type ComboboxTrigger = ReturnType<typeof ComboboxTrigger>;
+export default ComboboxTrigger;

package/dist/combobox/index.d.ts

@@ -0,0 +1,14 @@
+export { default as Combobox } from './Combobox.svelte';
+export { default as ComboboxControl } from './ComboboxControl.svelte';
+export { default as ComboboxInput } from './ComboboxInput.svelte';
+export { default as ComboboxTrigger } from './ComboboxTrigger.svelte';
+export { default as ComboboxClear } from './ComboboxClear.svelte';
+export { default as ComboboxContent } from './ComboboxContent.svelte';
+export { default as ComboboxItemGroup } from './ComboboxItemGroup.svelte';
+export { default as ComboboxItemGroupLabel } from './ComboboxItemGroupLabel.svelte';
+export { default as ComboboxItem } from './ComboboxItem.svelte';
+export { default as ComboboxItemText } from './ComboboxItemText.svelte';
+export { default as ComboboxItemIndicator } from './ComboboxItemIndicator.svelte';
+export { default as ComboboxList } from './ComboboxList.svelte';
+export { default as ComboboxEmpty } from './ComboboxEmpty.svelte';
+export { useCombobox } from './ComboboxContext.svelte';

package/dist/combobox/index.js

@@ -0,0 +1,15 @@
+// libs/helical-svelte/src/combobox/index.ts
+export { default as Combobox } from './Combobox.svelte';
+export { default as ComboboxControl } from './ComboboxControl.svelte';
+export { default as ComboboxInput } from './ComboboxInput.svelte';
+export { default as ComboboxTrigger } from './ComboboxTrigger.svelte';
+export { default as ComboboxClear } from './ComboboxClear.svelte';
+export { default as ComboboxContent } from './ComboboxContent.svelte';
+export { default as ComboboxItemGroup } from './ComboboxItemGroup.svelte';
+export { default as ComboboxItemGroupLabel } from './ComboboxItemGroupLabel.svelte';
+export { default as ComboboxItem } from './ComboboxItem.svelte';
+export { default as ComboboxItemText } from './ComboboxItemText.svelte';
+export { default as ComboboxItemIndicator } from './ComboboxItemIndicator.svelte';
+export { default as ComboboxList } from './ComboboxList.svelte';
+export { default as ComboboxEmpty } from './ComboboxEmpty.svelte';
+export { useCombobox } from './ComboboxContext.svelte';

package/dist/dialog/Dialog.svelte

@@ -0,0 +1,11 @@
+<!-- libs/helical-svelte/src/dialog/Dialog.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Root as DialogRoot, type DialogRootProps } from '@ark-ui/svelte/dialog';
+
+  let { children, open = $bindable(), ...rest }: DialogRootProps = $props();
+</script>
+
+<DialogRoot bind:open {...rest}>
+  {@render children?.()}
+</DialogRoot>

package/dist/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type DialogRootProps } from '@ark-ui/svelte/dialog';
+declare const Dialog: import("svelte").Component<DialogRootProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/dialog/DialogBackdrop.svelte

@@ -0,0 +1,17 @@
+<!-- libs/helical-svelte/src/dialog/DialogBackdrop.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Portal } from '@ark-ui/svelte/portal';
+  import { DialogBackdrop, type DialogBackdropProps } from '@ark-ui/svelte/dialog';
+  import { dialogBackdropBase, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = DialogBackdropProps & { class?: string };
+
+  let { class: className = '', ...rest }: Props = $props();
+
+  const classes = $derived(cn(dialogBackdropBase, className));
+</script>
+
+<Portal>
+  <DialogBackdrop class={classes} {...rest} />
+</Portal>

package/dist/dialog/DialogBackdrop.svelte.d.ts

@@ -0,0 +1,7 @@
+import { DialogBackdrop, type DialogBackdropProps } from '@ark-ui/svelte/dialog';
+type Props = DialogBackdropProps & {
+    class?: string;
+};
+declare const DialogBackdrop: import("svelte").Component<Props, {}, "">;
+type DialogBackdrop = ReturnType<typeof DialogBackdrop>;
+export default DialogBackdrop;

package/dist/dialog/DialogContent.svelte

@@ -0,0 +1,22 @@
+<!-- libs/helical-svelte/src/dialog/DialogContent.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Portal } from '@ark-ui/svelte/portal';
+  import { Positioner as DialogPositioner, DialogContent, type DialogContentProps } from '@ark-ui/svelte/dialog';
+  import { dialogPositionerBase, dialogContentBase, dialogFullscreenContentBase, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = DialogContentProps & { positionerClass?: string; class?: string; fullscreen?: boolean };
+
+  let { positionerClass = '', class: className = '', fullscreen = false, children, ...rest }: Props = $props();
+
+  const positionerClasses = $derived(cn(dialogPositionerBase, fullscreen && 'p-0', positionerClass));
+  const classes = $derived(cn(dialogContentBase, fullscreen && dialogFullscreenContentBase, className));
+</script>
+
+<Portal>
+  <DialogPositioner class={positionerClasses}>
+    <DialogContent class={classes} {...rest}>
+      {@render children?.()}
+    </DialogContent>
+  </DialogPositioner>
+</Portal>

package/dist/dialog/DialogContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import { DialogContent, type DialogContentProps } from '@ark-ui/svelte/dialog';
+type Props = DialogContentProps & {
+    positionerClass?: string;
+    class?: string;
+    fullscreen?: boolean;
+};
+declare const DialogContent: import("svelte").Component<Props, {}, "">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/dialog/DialogContext.svelte.d.ts

@@ -0,0 +1 @@
+export { useDialog, useDialogContext } from '@ark-ui/svelte/dialog';

package/dist/dialog/DialogContext.svelte.js

@@ -0,0 +1,3 @@
+// libs/helical-svelte/src/dialog/DialogContext.svelte.ts
+// Closely based on: @ark-ui/svelte/dialog useDialog / useDialogContext, mirrored from @cloudvoyant/helical-react
+export { useDialog, useDialogContext } from '@ark-ui/svelte/dialog';

package/dist/dialog/DialogDescription.svelte

@@ -0,0 +1,16 @@
+<!-- libs/helical-svelte/src/dialog/DialogDescription.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { DialogDescription, type DialogDescriptionProps } from '@ark-ui/svelte/dialog';
+  import { dialogDescriptionBase, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = DialogDescriptionProps & { class?: string };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(dialogDescriptionBase, className));
+</script>
+
+<DialogDescription class={classes} {...rest}>
+  {@render children?.()}
+</DialogDescription>

package/dist/dialog/DialogDescription.svelte.d.ts

@@ -0,0 +1,7 @@
+import { DialogDescription, type DialogDescriptionProps } from '@ark-ui/svelte/dialog';
+type Props = DialogDescriptionProps & {
+    class?: string;
+};
+declare const DialogDescription: import("svelte").Component<Props, {}, "">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/dialog/DialogDismiss.svelte

@@ -0,0 +1,16 @@
+<!-- libs/helical-svelte/src/dialog/DialogDismiss.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { DialogCloseTrigger, type DialogCloseTriggerProps } from '@ark-ui/svelte/dialog';
+  import { dialogCloseTriggerBase, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = DialogCloseTriggerProps & { class?: string };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(dialogCloseTriggerBase, className));
+</script>
+
+<DialogCloseTrigger aria-label="Close" class={classes} {...rest}>
+  {@render children?.()}
+</DialogCloseTrigger>

package/dist/dialog/DialogDismiss.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type DialogCloseTriggerProps } from '@ark-ui/svelte/dialog';
+type Props = DialogCloseTriggerProps & {
+    class?: string;
+};
+declare const DialogDismiss: import("svelte").Component<Props, {}, "">;
+type DialogDismiss = ReturnType<typeof DialogDismiss>;
+export default DialogDismiss;

package/dist/dialog/DialogFooter.svelte

@@ -0,0 +1,20 @@
+<!-- libs/helical-svelte/src/dialog/DialogFooter.svelte -->
+<!-- Closely based on: @cloudvoyant/helical-react DialogFooter -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { dialogFooterBase, dialogFooterStickyBase, cn } from '@cloudvoyant/helical-ui';
+
+  interface Props {
+    class?: string;
+    sticky?: boolean;
+    children?: Snippet;
+  }
+
+  let { class: className = '', sticky = false, children }: Props = $props();
+
+  const classes = $derived(cn(dialogFooterBase, sticky && dialogFooterStickyBase, className));
+</script>
+
+<div class={classes}>
+  {@render children?.()}
+</div>

package/dist/dialog/DialogFooter.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    sticky?: boolean;
+    children?: Snippet;
+}
+declare const DialogFooter: import("svelte").Component<Props, {}, "">;
+type DialogFooter = ReturnType<typeof DialogFooter>;
+export default DialogFooter;

package/dist/dialog/DialogHeader.svelte

@@ -0,0 +1,20 @@
+<!-- libs/helical-svelte/src/dialog/DialogHeader.svelte -->
+<!-- Closely based on: @cloudvoyant/helical-react DialogHeader -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { dialogHeaderBase, dialogHeaderStickyBase, cn } from '@cloudvoyant/helical-ui';
+
+  interface Props {
+    class?: string;
+    sticky?: boolean;
+    children?: Snippet;
+  }
+
+  let { class: className = '', sticky = false, children }: Props = $props();
+
+  const classes = $derived(cn(dialogHeaderBase, sticky && dialogHeaderStickyBase, className));
+</script>
+
+<div class={classes}>
+  {@render children?.()}
+</div>

package/dist/dialog/DialogHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    sticky?: boolean;
+    children?: Snippet;
+}
+declare const DialogHeader: import("svelte").Component<Props, {}, "">;
+type DialogHeader = ReturnType<typeof DialogHeader>;
+export default DialogHeader;

package/dist/dialog/DialogProvider.svelte

@@ -0,0 +1,11 @@
+<!-- libs/helical-svelte/src/dialog/DialogProvider.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { RootProvider as DialogRootProvider, type DialogRootProviderProps } from '@ark-ui/svelte/dialog';
+
+  let { value, children, ...rest }: DialogRootProviderProps = $props();
+</script>
+
+<DialogRootProvider {value} {...rest}>
+  {@render children?.()}
+</DialogRootProvider>

package/dist/dialog/DialogProvider.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type DialogRootProviderProps } from '@ark-ui/svelte/dialog';
+declare const DialogProvider: import("svelte").Component<DialogRootProviderProps, {}, "">;
+type DialogProvider = ReturnType<typeof DialogProvider>;
+export default DialogProvider;

package/dist/dialog/DialogRender.svelte

@@ -0,0 +1,9 @@
+<!-- libs/helical-svelte/src/dialog/DialogRender.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { DialogContext, type DialogContextProps } from '@ark-ui/svelte/dialog';
+
+  let { children }: DialogContextProps = $props();
+</script>
+
+<DialogContext {children} />

package/dist/dialog/DialogRender.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type DialogContextProps } from '@ark-ui/svelte/dialog';
+declare const DialogRender: import("svelte").Component<DialogContextProps, {}, "">;
+type DialogRender = ReturnType<typeof DialogRender>;
+export default DialogRender;

package/dist/dialog/DialogTitle.svelte

@@ -0,0 +1,16 @@
+<!-- libs/helical-svelte/src/dialog/DialogTitle.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Title as DialogTitle, type DialogTitleProps } from '@ark-ui/svelte/dialog';
+  import { dialogTitleBase, cn } from '@cloudvoyant/helical-ui';
+
+  type Props = DialogTitleProps & { class?: string };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+
+  const classes = $derived(cn(dialogTitleBase, className));
+</script>
+
+<DialogTitle class={classes} {...rest}>
+  {@render children?.()}
+</DialogTitle>

package/dist/dialog/DialogTitle.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Title as DialogTitle, type DialogTitleProps } from '@ark-ui/svelte/dialog';
+type Props = DialogTitleProps & {
+    class?: string;
+};
+declare const DialogTitle: import("svelte").Component<Props, {}, "">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/dialog/DialogTrigger.svelte

@@ -0,0 +1,13 @@
+<!-- libs/helical-svelte/src/dialog/DialogTrigger.svelte -->
+<!-- Closely based on: Ark UI dialog (@ark-ui/svelte/dialog), mirrored from @cloudvoyant/helical-react -->
+<script lang="ts">
+  import { Trigger as DialogTrigger, type DialogTriggerProps } from '@ark-ui/svelte/dialog';
+
+  type Props = DialogTriggerProps & { class?: string };
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<DialogTrigger class={className} {...rest}>
+  {@render children?.()}
+</DialogTrigger>

package/dist/dialog/DialogTrigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Trigger as DialogTrigger, type DialogTriggerProps } from '@ark-ui/svelte/dialog';
+type Props = DialogTriggerProps & {
+    class?: string;
+};
+declare const DialogTrigger: import("svelte").Component<Props, {}, "">;
+type DialogTrigger = ReturnType<typeof DialogTrigger>;
+export default DialogTrigger;

package/dist/dialog/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Dialog } from './Dialog.svelte';
+export { default as DialogProvider } from './DialogProvider.svelte';
+export { default as DialogTrigger } from './DialogTrigger.svelte';
+export { default as DialogBackdrop } from './DialogBackdrop.svelte';
+export { default as DialogContent } from './DialogContent.svelte';
+export { default as DialogTitle } from './DialogTitle.svelte';
+export { default as DialogDescription } from './DialogDescription.svelte';
+export { default as DialogHeader } from './DialogHeader.svelte';
+export { default as DialogFooter } from './DialogFooter.svelte';
+export { default as DialogDismiss } from './DialogDismiss.svelte';
+export { default as DialogContext } from './DialogRender.svelte';
+export { useDialog, useDialogContext } from './DialogContext.svelte';

package/dist/dialog/index.js

@@ -0,0 +1,13 @@
+// libs/helical-svelte/src/dialog/index.ts
+export { default as Dialog } from './Dialog.svelte';
+export { default as DialogProvider } from './DialogProvider.svelte';
+export { default as DialogTrigger } from './DialogTrigger.svelte';
+export { default as DialogBackdrop } from './DialogBackdrop.svelte';
+export { default as DialogContent } from './DialogContent.svelte';
+export { default as DialogTitle } from './DialogTitle.svelte';
+export { default as DialogDescription } from './DialogDescription.svelte';
+export { default as DialogHeader } from './DialogHeader.svelte';
+export { default as DialogFooter } from './DialogFooter.svelte';
+export { default as DialogDismiss } from './DialogDismiss.svelte';
+export { default as DialogContext } from './DialogRender.svelte';
+export { useDialog, useDialogContext } from './DialogContext.svelte';

package/dist/editor/BookmarkInput.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { Editor } from '@tiptap/core';
+  import type { LinkPreviewAttributes } from '@cloudvoyant/helical-ui';
+
+  type LinkPreviewFetcher = (url: string) => Promise<Omit<LinkPreviewAttributes, 'url' | 'type'>>;
+
+  interface Props {
+    editor: Editor;
+    position: number;
+    onClose: () => void;
+    /** Optional metadata fetcher; without it a bare bookmark is inserted. */
+    fetchLinkPreview?: LinkPreviewFetcher;
+  }
+
+  let { editor, position, onClose, fetchLinkPreview }: Props = $props();
+  let url = $state('');
+  let isLoading = $state(false);
+  let error = $state('');
+  let inputElement = $state<HTMLInputElement>();
+
+  onMount(() => inputElement?.focus());
+
+  async function submit() {
+    const trimmed = url.trim();
+    if (!trimmed) {
+      error = 'Please enter a URL';
+      return;
+    }
+
+    try {
+      const parsed = new URL(trimmed);
+      if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') throw new Error('Unsupported URL protocol');
+    } catch {
+      error = 'Please enter a valid URL';
+      return;
+    }
+
+    isLoading = true;
+    error = '';
+    try {
+      const metadata = fetchLinkPreview
+        ? await fetchLinkPreview(trimmed)
+        : {
+            title: trimmed,
+            description: '',
+            image: null,
+            favicon: null,
+            provider: '',
+          };
+      editor
+        .chain()
+        .focus()
+        .setTextSelection(position)
+        .insertLinkPreview({ url: trimmed, type: 'bookmark', ...metadata })
+        .run();
+      onClose();
+    } catch {
+      error = 'Could not load link details. Please try again.';
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<div
+  role="dialog"
+  aria-label="Insert bookmark"
+  tabindex="-1"
+  onkeydown={(event) => {
+    if (event.key === 'Escape') onClose();
+  }}
+  class="w-80 space-y-2 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-xl"
+>
+  <p class="text-sm font-semibold">Insert Bookmark</p>
+  <div class="space-y-1">
+    <input
+      bind:this={inputElement}
+      type="url"
+      bind:value={url}
+      oninput={() => (error = '')}
+      onkeydown={(event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          void submit();
+        }
+      }}
+      placeholder="https://example.com"
+      aria-invalid={Boolean(error)}
+      class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+    />
+    {#if error}
+      <div role="alert" class="text-xs leading-tight text-destructive">{error}</div>
+    {/if}
+  </div>
+  <div class="flex justify-end gap-2">
+    <button type="button" onclick={onClose} class="rounded-md px-3 py-1.5 text-sm hover:bg-muted">Cancel</button>
+    <button
+      type="button"
+      onclick={() => void submit()}
+      disabled={isLoading}
+      class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+    >
+      {isLoading ? 'Loading…' : 'Insert'}
+    </button>
+  </div>
+</div>

package/dist/editor/BookmarkInput.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Editor } from '@tiptap/core';
+import type { LinkPreviewAttributes } from '@cloudvoyant/helical-ui';
+type LinkPreviewFetcher = (url: string) => Promise<Omit<LinkPreviewAttributes, 'url' | 'type'>>;
+interface Props {
+    editor: Editor;
+    position: number;
+    onClose: () => void;
+    /** Optional metadata fetcher; without it a bare bookmark is inserted. */
+    fetchLinkPreview?: LinkPreviewFetcher;
+}
+declare const BookmarkInput: import("svelte").Component<Props, {}, "">;
+type BookmarkInput = ReturnType<typeof BookmarkInput>;
+export default BookmarkInput;