@vizel/svelte 0.0.1-alpha.1

package/dist/components/VizelEmbedView.svelte

@@ -0,0 +1,162 @@
+<script lang="ts" module>
+import type { VizelEmbedData } from "@vizel/core";
+
+export interface VizelEmbedViewProps {
+  /** Embed data */
+  data: VizelEmbedData;
+  /** Additional class name */
+  class?: string;
+  /** Whether the embed is selected */
+  selected?: boolean;
+}
+</script>
+
+<script lang="ts">
+import VizelIcon from "./VizelIcon.svelte";
+
+let { data, class: className, selected = false }: VizelEmbedViewProps = $props();
+
+let containerRef: HTMLDivElement | null = $state(null);
+
+const baseClass = $derived(
+  `vizel-embed ${data.loading ? "is-loading" : ""} ${selected ? "ProseMirror-selectednode" : ""} ${className ?? ""}`
+);
+
+const isVideo = $derived(
+  ["youtube", "vimeo", "loom", "tiktok"].includes(data.provider ?? "")
+);
+
+const hasImage = $derived(Boolean(data.image));
+
+const hostname = $derived.by(() => {
+  try {
+    return new URL(data.url).hostname;
+  } catch {
+    return data.url;
+  }
+});
+
+// Handle oEmbed scripts
+function loadScripts() {
+  if (data.type === "oembed" && data.html && containerRef) {
+    const scripts = containerRef.querySelectorAll("script");
+    for (const script of scripts) {
+      const newScript = document.createElement("script");
+      if (script.src) {
+        newScript.src = script.src;
+      } else {
+        newScript.textContent = script.textContent;
+      }
+      script.parentNode?.replaceChild(newScript, script);
+    }
+
+    // Load Twitter widgets if present
+    if (data.provider === "twitter" && "twttr" in window) {
+      (window as { twttr?: { widgets?: { load?: () => void } } }).twttr?.widgets?.load?.();
+    }
+  }
+}
+
+// Load scripts on mount and when data changes
+$effect(() => {
+  loadScripts();
+});
+</script>
+
+{#if data.loading}
+  <!-- Loading state -->
+  <div
+    class={baseClass}
+    data-embed-type="loading"
+    data-embed-provider={data.provider}
+  >
+    <div class="vizel-embed-loading">
+      <div class="vizel-embed-loading-spinner"></div>
+      <span>Loading embed...</span>
+    </div>
+  </div>
+{:else if data.type === "oembed" && data.html}
+  <!-- oEmbed (rich embed) -->
+  <div
+    bind:this={containerRef}
+    class={baseClass}
+    data-embed-type="oembed"
+    data-embed-provider={data.provider}
+  >
+    <div
+      class={isVideo ? "vizel-embed-video" : "vizel-embed-oembed"}
+    >
+      {@html data.html}
+    </div>
+  </div>
+{:else if data.type === "ogp"}
+  <!-- OGP card -->
+  <div
+    class={baseClass}
+    data-embed-type="ogp"
+    data-embed-provider={data.provider}
+  >
+    <a
+      href={data.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="vizel-embed-card {hasImage ? 'vizel-embed-card-horizontal' : ''}"
+    >
+      {#if hasImage}
+        <img
+          src={data.image}
+          alt=""
+          class="vizel-embed-card-image"
+          loading="lazy"
+        />
+      {/if}
+      <div class="vizel-embed-card-content">
+        {#if data.siteName || data.favicon}
+          <div class="vizel-embed-card-site">
+            {#if data.favicon}
+              <img
+                src={data.favicon}
+                alt=""
+                class="vizel-embed-card-favicon"
+              />
+            {/if}
+            {#if data.siteName}
+              <span>{data.siteName}</span>
+            {/if}
+          </div>
+        {/if}
+        {#if data.title}
+          <div class="vizel-embed-card-title">{data.title}</div>
+        {/if}
+        {#if data.description}
+          <div class="vizel-embed-card-description">{data.description}</div>
+        {/if}
+        <div class="vizel-embed-card-url">{hostname}</div>
+      </div>
+    </a>
+  </div>
+{:else if data.type === "title" && data.title}
+  <!-- Title link -->
+  <div
+    class={baseClass}
+    data-embed-type="title"
+    data-embed-provider={data.provider}
+  >
+    <a href={data.url} target="_blank" rel="noopener noreferrer" class="vizel-embed-link">
+      <span class="vizel-embed-link-icon"><VizelIcon name="link" /></span>
+      <span class="vizel-embed-link-text">{data.title}</span>
+    </a>
+  </div>
+{:else}
+  <!-- Plain link (fallback) -->
+  <div
+    class={baseClass}
+    data-embed-type="link"
+    data-embed-provider={data.provider}
+  >
+    <a href={data.url} target="_blank" rel="noopener noreferrer" class="vizel-embed-link">
+      <span class="vizel-embed-link-icon"><VizelIcon name="link" /></span>
+      <span class="vizel-embed-link-text">{data.url}</span>
+    </a>
+  </div>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { VizelEmbedData } from "@vizel/core";
+export interface VizelEmbedViewProps {
+    /** Embed data */
+    data: VizelEmbedData;
+    /** Additional class name */
+    class?: string;
+    /** Whether the embed is selected */
+    selected?: boolean;
+}
+declare const VizelEmbedView: import("svelte").Component<VizelEmbedViewProps, {}, "">;
+type VizelEmbedView = ReturnType<typeof VizelEmbedView>;
+export default VizelEmbedView;
+//# sourceMappingURL=VizelEmbedView.svelte.d.ts.map

package/dist/components/VizelEmbedView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelEmbedView.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelEmbedView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,mBAAmB;IAClC,iBAAiB;IACjB,IAAI,EAAE,cAAc,CAAC;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0HD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/VizelIcon.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+import type { CustomIconMap, VizelIconName } from "@vizel/core";
+
+export interface VizelIconProps {
+  /**
+   * The semantic icon name from Vizel's icon system.
+   */
+  name: VizelIconName;
+  /**
+   * Custom icon mappings to override default Iconify icon IDs.
+   * If provided, will take precedence over context icons.
+   */
+  customIcons?: CustomIconMap;
+  /**
+   * Icon width in pixels or CSS value.
+   */
+  width?: string | number;
+  /**
+   * Icon height in pixels or CSS value.
+   */
+  height?: string | number;
+  /**
+   * Icon color.
+   */
+  color?: string;
+  /**
+   * Additional CSS class.
+   */
+  class?: string;
+}
+</script>
+
+<script lang="ts">
+import type { IconifyIconProps } from "@iconify/svelte";
+import Icon from "@iconify/svelte";
+import { vizelDefaultIconIds } from "@vizel/core";
+import { getVizelIconContext } from "./VizelIconContext";
+
+const { name, customIcons, width, height, color, class: className }: VizelIconProps = $props();
+const { customIcons: contextIcons } = getVizelIconContext();
+
+const iconId = $derived(customIcons?.[name] ?? contextIcons?.[name] ?? vizelDefaultIconIds[name]);
+
+// Build props object excluding undefined values to satisfy exactOptionalPropertyTypes
+const iconProps = $derived.by(() => {
+  const props: IconifyIconProps = { icon: iconId };
+  if (width !== undefined) props.width = width;
+  if (height !== undefined) props.height = height;
+  if (color !== undefined) props.color = color;
+  return props;
+});
+</script>
+
+<Icon {...iconProps} class={className} style="pointer-events: none;" />

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

@@ -0,0 +1,32 @@
+import type { CustomIconMap, VizelIconName } from "@vizel/core";
+export interface VizelIconProps {
+    /**
+     * The semantic icon name from Vizel's icon system.
+     */
+    name: VizelIconName;
+    /**
+     * Custom icon mappings to override default Iconify icon IDs.
+     * If provided, will take precedence over context icons.
+     */
+    customIcons?: CustomIconMap;
+    /**
+     * Icon width in pixels or CSS value.
+     */
+    width?: string | number;
+    /**
+     * Icon height in pixels or CSS value.
+     */
+    height?: string | number;
+    /**
+     * Icon color.
+     */
+    color?: string;
+    /**
+     * Additional CSS class.
+     */
+    class?: string;
+}
+declare const VizelIcon: import("svelte").Component<VizelIconProps, {}, "">;
+type VizelIcon = ReturnType<typeof VizelIcon>;
+export default VizelIcon;
+//# sourceMappingURL=VizelIcon.svelte.d.ts.map

package/dist/components/VizelIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelIcon.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelIcon.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,IAAI,EAAE,aAAa,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCD,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/VizelIconContext.d.ts

@@ -0,0 +1,27 @@
+import type { CustomIconMap, VizelIconContextValue } from "@vizel/core";
+/**
+ * Set custom icon mappings for child components.
+ * Call this in a parent component to customize icons for all descendants.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { setVizelIcons } from "@vizel/svelte";
+ *
+ *   // Use Phosphor icons
+ *   setVizelIcons({
+ *     heading1: "ph:text-h-one",
+ *     heading2: "ph:text-h-two",
+ *     bold: "ph:text-b-bold",
+ *     italic: "ph:text-italic",
+ *   });
+ * </script>
+ * ```
+ */
+export declare function setVizelIcons(customIcons?: CustomIconMap): void;
+/**
+ * Get custom icon mappings from parent context.
+ * Returns an empty object if no context is set.
+ */
+export declare function getVizelIconContext(): VizelIconContextValue;
+//# sourceMappingURL=VizelIconContext.d.ts.map

package/dist/components/VizelIconContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelIconContext.d.ts","sourceRoot":"","sources":["../../src/components/VizelIconContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAKxE;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,WAAW,CAAC,EAAE,aAAa,GAAG,IAAI,CAE/D;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,qBAAqB,CAE3D"}

package/dist/components/VizelIconContext.js

@@ -0,0 +1,31 @@
+import { getContext, setContext } from "svelte";
+const VIZEL_ICON_CONTEXT_KEY = Symbol("vizel-icon-context");
+/**
+ * Set custom icon mappings for child components.
+ * Call this in a parent component to customize icons for all descendants.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { setVizelIcons } from "@vizel/svelte";
+ *
+ *   // Use Phosphor icons
+ *   setVizelIcons({
+ *     heading1: "ph:text-h-one",
+ *     heading2: "ph:text-h-two",
+ *     bold: "ph:text-b-bold",
+ *     italic: "ph:text-italic",
+ *   });
+ * </script>
+ * ```
+ */
+export function setVizelIcons(customIcons) {
+    setContext(VIZEL_ICON_CONTEXT_KEY, { customIcons });
+}
+/**
+ * Get custom icon mappings from parent context.
+ * Returns an empty object if no context is set.
+ */
+export function getVizelIconContext() {
+    return getContext(VIZEL_ICON_CONTEXT_KEY) ?? {};
+}

package/dist/components/VizelIconProvider.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+import type { CustomIconMap } from "@vizel/core";
+import type { Snippet } from "svelte";
+
+/**
+ * Props for VizelIconProvider component.
+ */
+export interface VizelIconProviderProps {
+  /**
+   * Custom icon mappings to override default Lucide icons.
+   * Any icon not specified will fall back to the default Lucide icon.
+   *
+   * @example
+   * ```svelte
+   * <VizelIconProvider icons={{ bold: "mdi:format-bold", italic: "mdi:format-italic" }}>
+   *   <App />
+   * </VizelIconProvider>
+   *
+   * <VizelIconProvider icons={{ check: "heroicons:check", warning: "heroicons:exclamation-triangle" }}>
+   *   <App />
+   * </VizelIconProvider>
+   * ```
+   */
+  icons?: CustomIconMap;
+  /**
+   * Child content to render inside the provider.
+   */
+  children?: Snippet;
+}
+</script>
+
+<script lang="ts">
+  import { setVizelIcons } from "./VizelIconContext.ts";
+
+  const { icons, children }: VizelIconProviderProps = $props();
+
+  // Set icons in context for all descendants
+  setVizelIcons(icons);
+</script>
+
+{#if children}
+  {@render children()}
+{/if}

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

@@ -0,0 +1,31 @@
+import type { CustomIconMap } from "@vizel/core";
+import type { Snippet } from "svelte";
+/**
+ * Props for VizelIconProvider component.
+ */
+export interface VizelIconProviderProps {
+    /**
+     * Custom icon mappings to override default Lucide icons.
+     * Any icon not specified will fall back to the default Lucide icon.
+     *
+     * @example
+     * ```svelte
+     * <VizelIconProvider icons={{ bold: "mdi:format-bold", italic: "mdi:format-italic" }}>
+     *   <App />
+     * </VizelIconProvider>
+     *
+     * <VizelIconProvider icons={{ check: "heroicons:check", warning: "heroicons:exclamation-triangle" }}>
+     *   <App />
+     * </VizelIconProvider>
+     * ```
+     */
+    icons?: CustomIconMap;
+    /**
+     * Child content to render inside the provider.
+     */
+    children?: Snippet;
+}
+declare const VizelIconProvider: import("svelte").Component<VizelIconProviderProps, {}, "">;
+type VizelIconProvider = ReturnType<typeof VizelIconProvider>;
+export default VizelIconProvider;
+//# sourceMappingURL=VizelIconProvider.svelte.d.ts.map

package/dist/components/VizelIconProvider.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelIconProvider.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelIconProvider.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAsBD,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/VizelLinkEditor.svelte

@@ -0,0 +1,143 @@
+<script lang="ts" module>
+import type { Editor } from "@vizel/core";
+
+export interface VizelLinkEditorProps {
+  /** The editor instance */
+  editor: Editor;
+  /** Custom class name */
+  class?: string;
+  /** Close handler */
+  onclose?: () => void;
+  /** Enable embed option (requires Embed extension) */
+  enableEmbed?: boolean;
+}
+</script>
+
+<script lang="ts">
+import { detectVizelEmbedProvider } from "@vizel/core";
+import { untrack } from "svelte";
+import VizelIcon from "./VizelIcon.svelte";
+
+let {
+  editor,
+  class: className,
+  onclose,
+  enableEmbed = false,
+}: VizelLinkEditorProps = $props();
+
+let formElement: HTMLFormElement;
+let inputElement: HTMLInputElement;
+let currentHref = $derived(editor.getAttributes("link").href || "");
+let url = $state(untrack(() => editor.getAttributes("link").href || ""));
+let asEmbed = $state(false);
+
+// Check if embed extension is available
+const canEmbed = $derived.by(() => {
+  if (!enableEmbed) return false;
+  // Check if embed extension is loaded
+  const extensionManager = editor.extensionManager;
+  return extensionManager.extensions.some((ext) => ext.name === "embed");
+});
+
+// Check if URL is a known embed provider
+const isEmbedProvider = $derived.by(() => {
+  if (!url.trim()) return false;
+  return detectVizelEmbedProvider(url.trim()) !== null;
+});
+
+// Handle click outside to close
+function handleClickOutside(event: MouseEvent) {
+  if (formElement && !formElement.contains(event.target as Node)) {
+    onclose?.();
+  }
+}
+
+// Handle Escape key to close
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    onclose?.();
+  }
+}
+
+$effect(() => {
+  inputElement?.focus();
+
+  // Use setTimeout to avoid immediate trigger from the click that opened the editor
+  const timeoutId = setTimeout(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+  }, 0);
+  // Use capture phase so this handler runs before BubbleMenu's handler
+  document.addEventListener("keydown", handleKeyDown, true);
+
+  return () => {
+    clearTimeout(timeoutId);
+    document.removeEventListener("mousedown", handleClickOutside);
+    document.removeEventListener("keydown", handleKeyDown, true);
+  };
+});
+
+function handleSubmit(e: Event) {
+  e.preventDefault();
+  const trimmedUrl = url.trim();
+
+  if (!trimmedUrl) {
+    editor.chain().focus().unsetLink().run();
+    onclose?.();
+    return;
+  }
+
+  if (asEmbed && canEmbed) {
+    // Remove the link first, then insert embed
+    editor.chain().focus().unsetLink().setEmbed({ url: trimmedUrl }).run();
+  } else {
+    editor.chain().focus().setLink({ href: trimmedUrl }).run();
+  }
+  onclose?.();
+}
+
+function handleRemove() {
+  editor.chain().focus().unsetLink().run();
+  onclose?.();
+}
+</script>
+
+<form
+  bind:this={formElement}
+  class="vizel-link-editor {className ?? ''}"
+  onsubmit={handleSubmit}
+>
+  <div class="vizel-link-editor-row">
+    <input
+      bind:this={inputElement}
+      bind:value={url}
+      type="url"
+      placeholder="Enter URL..."
+      class="vizel-link-input"
+    />
+    <button type="submit" class="vizel-link-button" title="Apply">
+      <VizelIcon name="check" />
+    </button>
+    {#if currentHref}
+      <button
+        type="button"
+        class="vizel-link-button vizel-link-remove"
+        title="Remove link"
+        onclick={handleRemove}
+      >
+        <VizelIcon name="x" />
+      </button>
+    {/if}
+  </div>
+  {#if canEmbed && isEmbedProvider}
+    <div class="vizel-link-editor-embed-toggle">
+      <input
+        id="vizel-embed-toggle"
+        type="checkbox"
+        bind:checked={asEmbed}
+      />
+      <label for="vizel-embed-toggle">Embed as rich content</label>
+    </div>
+  {/if}
+</form>

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

@@ -0,0 +1,15 @@
+import type { Editor } from "@vizel/core";
+export interface VizelLinkEditorProps {
+    /** The editor instance */
+    editor: Editor;
+    /** Custom class name */
+    class?: string;
+    /** Close handler */
+    onclose?: () => void;
+    /** Enable embed option (requires Embed extension) */
+    enableEmbed?: boolean;
+}
+declare const VizelLinkEditor: import("svelte").Component<VizelLinkEditorProps, {}, "">;
+type VizelLinkEditor = ReturnType<typeof VizelLinkEditor>;
+export default VizelLinkEditor;
+//# sourceMappingURL=VizelLinkEditor.svelte.d.ts.map

package/dist/components/VizelLinkEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VizelLinkEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/VizelLinkEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,oBAAoB;IACnC,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAyHD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}