@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/editors/tiptap/toolbar/AlertButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const AlertButton: import("svelte").Component<Props, {}, "">;
+type AlertButton = ReturnType<typeof AlertButton>;
+export default AlertButton;

package/dist/editors/tiptap/toolbar/AlignCenterButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconAlignCenter } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+</script>
+
+<ToolbarButton
+  icon={iconAlignCenter}
+  title="Align Center"
+  active={editor.isActive({ textAlign: 'center' })}
+  onclick={() => editor.chain().focus().setTextAlign('center').run()}
+/>

package/dist/editors/tiptap/toolbar/AlignCenterButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const AlignCenterButton: import("svelte").Component<Props, {}, "">;
+type AlignCenterButton = ReturnType<typeof AlignCenterButton>;
+export default AlignCenterButton;

package/dist/editors/tiptap/toolbar/AlignJustifyButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconAlignJustified } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+</script>
+
+<ToolbarButton
+  icon={iconAlignJustified}
+  title="Justify"
+  active={editor.isActive({ textAlign: 'justify' })}
+  onclick={() => editor.chain().focus().setTextAlign('justify').run()}
+/>

package/dist/editors/tiptap/toolbar/AlignJustifyButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const AlignJustifyButton: import("svelte").Component<Props, {}, "">;
+type AlignJustifyButton = ReturnType<typeof AlignJustifyButton>;
+export default AlignJustifyButton;

package/dist/editors/tiptap/toolbar/AlignLeftButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconAlignLeft } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+</script>
+
+<ToolbarButton
+  icon={iconAlignLeft}
+  title="Align Left"
+  active={editor.isActive({ textAlign: 'left' })}
+  onclick={() => editor.chain().focus().setTextAlign('left').run()}
+/>

package/dist/editors/tiptap/toolbar/AlignLeftButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const AlignLeftButton: import("svelte").Component<Props, {}, "">;
+type AlignLeftButton = ReturnType<typeof AlignLeftButton>;
+export default AlignLeftButton;

package/dist/editors/tiptap/toolbar/AlignRightButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconAlignRight } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+</script>
+
+<ToolbarButton
+  icon={iconAlignRight}
+  title="Align Right"
+  active={editor.isActive({ textAlign: 'right' })}
+  onclick={() => editor.chain().focus().setTextAlign('right').run()}
+/>

package/dist/editors/tiptap/toolbar/AlignRightButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const AlignRightButton: import("svelte").Component<Props, {}, "">;
+type AlignRightButton = ReturnType<typeof AlignRightButton>;
+export default AlignRightButton;

package/dist/editors/tiptap/toolbar/BoldButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconBold } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+</script>
+
+<ToolbarButton
+  icon={iconBold}
+  title="Bold"
+  active={editor.isActive('bold')}
+  onclick={() => editor.chain().focus().toggleBold().run()}
+/>

package/dist/editors/tiptap/toolbar/BoldButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const BoldButton: import("svelte").Component<Props, {}, "">;
+type BoldButton = ReturnType<typeof BoldButton>;
+export default BoldButton;

package/dist/editors/tiptap/toolbar/BulletListButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconList } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+</script>
+
+<ToolbarButton
+  icon={iconList}
+  title="Bullet List"
+  active={editor.isActive('bulletList')}
+  onclick={() => editor.chain().focus().toggleBulletList().run()}
+/>

package/dist/editors/tiptap/toolbar/BulletListButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const BulletListButton: import("svelte").Component<Props, {}, "">;
+type BulletListButton = ReturnType<typeof BulletListButton>;
+export default BulletListButton;

package/dist/editors/tiptap/toolbar/CodeBlockButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core';
+	import ToolbarButton from './ToolbarButton.svelte';
+	import { iconSourceCode } from '../../../icon/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	let { editor }: Props = $props();
+</script>
+
+<ToolbarButton
+	icon={iconSourceCode}
+	title="Code Block"
+	active={editor.isActive('codeBlock')}
+	onclick={() => editor.chain().focus().toggleCodeBlock().run()}
+/>

package/dist/editors/tiptap/toolbar/CodeBlockButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const CodeBlockButton: import("svelte").Component<Props, {}, "">;
+type CodeBlockButton = ReturnType<typeof CodeBlockButton>;
+export default CodeBlockButton;

package/dist/editors/tiptap/toolbar/CodeButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconCode } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+  }
+
+  let { editor }: Props = $props()
+</script>
+
+<ToolbarButton
+  icon={iconCode}
+  title="Code"
+  active={editor.isActive('code')}
+  onclick={() => editor.chain().focus().toggleCode().run()}
+/>

package/dist/editors/tiptap/toolbar/CodeButton.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+}
+declare const CodeButton: import("svelte").Component<Props, {}, "">;
+type CodeButton = ReturnType<typeof CodeButton>;
+export default CodeButton;

package/dist/editors/tiptap/toolbar/ColorButton.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconPalette } from '../../../icon/index.js'
+
+  export interface ColorSwatch {
+    /** CSS colour value applied to the text */
+    value: string
+    /** Accessible label / tooltip */
+    label: string
+  }
+
+  interface Props {
+    editor: Editor
+    /**
+     * Swatches shown under "Brand Colors". Defaults to the library's `--ui-*`
+     * tokens, so they follow whatever theme is applied.
+     */
+    brandColors?: ColorSwatch[]
+  }
+
+  /** Default brand swatches, resolved from the theme tokens at click time. */
+  export const defaultBrandColors: ColorSwatch[] = [
+    { value: 'var(--ui-primary)', label: 'Primary' },
+    { value: 'var(--ui-accent)', label: 'Accent' },
+    { value: 'var(--ui-accent-dark)', label: 'Accent Dark' },
+    { value: 'var(--ui-tertiary)', label: 'Tertiary' },
+    { value: 'var(--ui-tertiary-dark)', label: 'Tertiary Dark' }
+  ]
+
+  let { editor, brandColors = defaultBrandColors }: Props = $props()
+
+  /** Resolve `var(--x)` to a concrete colour so the stored HTML is portable. */
+  const resolveColor = (color: string) => {
+    const match = color.match(/^var\((--[^,)]+)/)
+    if (!match || typeof document === 'undefined') return color
+    const resolved = getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim()
+    if (!resolved) return color
+    // Tokens such as `--ui-primary` are themselves `rgb(var(--ui-primary-rgb))`
+    const nested = resolved.match(/^rgb\(var\((--[^)]+)\)\)$/)
+    if (nested) {
+      const triplet = getComputedStyle(document.documentElement).getPropertyValue(nested[1]).trim()
+      return triplet ? `rgb(${triplet})` : color
+    }
+    return resolved
+  }
+
+  let showColorPicker = $state(false)
+  let colorPickerElement: HTMLDivElement | undefined = $state()
+  let selectedColor = $state('#000000')
+
+  const toggleColorPicker = () => {
+    const currentColor = editor.getAttributes('textStyle')?.color
+    if (currentColor) {
+      selectedColor = currentColor
+    }
+    showColorPicker = !showColorPicker
+  }
+
+  const applyColor = (color: string) => {
+    const resolved = resolveColor(color)
+    editor.chain().focus().setColor(resolved).run()
+    selectedColor = resolved
+  }
+
+  const removeColor = () => {
+    editor.chain().focus().unsetColor().run()
+    showColorPicker = false
+  }
+</script>
+
+<div style="position: relative; display: inline-block;">
+  <ToolbarButton
+    icon={iconPalette}
+    title="Text Color"
+    active={showColorPicker}
+    onclick={toggleColorPicker}
+  />
+
+  {#if showColorPicker}
+    <div class="color-picker-dropdown" bind:this={colorPickerElement}>
+      <!-- Brand Colors Section -->
+      <div class="color-section-title">Brand Colors</div>
+      <div class="color-preset-grid">
+        {#each brandColors as swatch}
+          <button
+            class="color-preset"
+            style="background: {swatch.value}"
+            onclick={() => applyColor(swatch.value)}
+            title={swatch.label}
+            aria-label={swatch.label}
+          ></button>
+        {/each}
+      </div>
+
+      <!-- Common Colors Section -->
+      <div class="color-section-title">Common Colors</div>
+      <div class="color-preset-grid">
+        <button
+          class="color-preset"
+          style="background: #000000"
+          onclick={() => applyColor('#000000')}
+          title="Black"
+          aria-label="Black"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #495057"
+          onclick={() => applyColor('#495057')}
+          title="Gray"
+          aria-label="Gray"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #fa5252"
+          onclick={() => applyColor('#fa5252')}
+          title="Red"
+          aria-label="Red"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #ff922b"
+          onclick={() => applyColor('#ff922b')}
+          title="Orange"
+          aria-label="Orange"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #fcc419"
+          onclick={() => applyColor('#fcc419')}
+          title="Yellow"
+          aria-label="Yellow"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #51cf66"
+          onclick={() => applyColor('#51cf66')}
+          title="Green"
+          aria-label="Green"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #22b8cf"
+          onclick={() => applyColor('#22b8cf')}
+          title="Cyan"
+          aria-label="Cyan"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #228be6"
+          onclick={() => applyColor('#228be6')}
+          title="Blue"
+          aria-label="Blue"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #9775fa"
+          onclick={() => applyColor('#9775fa')}
+          title="Purple"
+          aria-label="Purple"
+        ></button>
+        <button
+          class="color-preset"
+          style="background: #f06595"
+          onclick={() => applyColor('#f06595')}
+          title="Pink"
+          aria-label="Pink"
+        ></button>
+      </div>
+      <div class="color-input-row">
+        <input
+          type="color"
+          bind:value={selectedColor}
+          oninput={(e) => applyColor((e.target as HTMLInputElement).value)}
+          class="color-input"
+          title="Custom Color"
+        />
+        <button onclick={removeColor} class="color-remove-button" title="Remove Color">
+          Clear
+        </button>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .color-picker-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+    background: var(--paper-body-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    min-width: 240px;
+  }
+
+  .color-section-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+
+  .color-section-title:first-child {
+    margin-top: 0;
+  }
+
+  :global(.dark) .color-picker-dropdown {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .color-preset-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
+  }
+
+  .color-preset {
+    width: 32px;
+    height: 32px;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    padding: 0;
+  }
+
+  .color-preset:hover {
+    border-color: var(--ui-primary);
+    transform: scale(1.1);
+  }
+
+  :global(.dark) .color-preset:hover {
+    border-color: var(--ui-accent);
+  }
+
+  .color-input-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding-top: 8px;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .color-input {
+    flex: 1;
+    height: 36px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 2px;
+    background: var(--paper-body-bg);
+  }
+
+  .color-input::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+
+  .color-input::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+  }
+
+  .color-remove-button {
+    padding: 6px 12px;
+    border: none;
+    background: var(--ui-tertiary);
+    color: var(--ui-primary);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 500;
+    transition: background 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .color-remove-button:hover {
+    background: var(--ui-tertiary-dark);
+  }
+
+  :global(.dark) .color-remove-button {
+    background: var(--ui-accent);
+    color: var(--ui-primary);
+  }
+
+  :global(.dark) .color-remove-button:hover {
+    background: var(--ui-accent-dark);
+  }
+</style>

package/dist/editors/tiptap/toolbar/ColorButton.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Editor } from '@tiptap/core';
+export interface ColorSwatch {
+    /** CSS colour value applied to the text */
+    value: string;
+    /** Accessible label / tooltip */
+    label: string;
+}
+interface Props {
+    editor: Editor;
+    /**
+     * Swatches shown under "Brand Colors". Defaults to the library's `--ui-*`
+     * tokens, so they follow whatever theme is applied.
+     */
+    brandColors?: ColorSwatch[];
+}
+declare const ColorButton: import("svelte").Component<Props, {
+    /** Default brand swatches, resolved from the theme tokens at click time. */ defaultBrandColors: ColorSwatch[];
+}, "">;
+type ColorButton = ReturnType<typeof ColorButton>;
+export default ColorButton;

package/dist/editors/tiptap/toolbar/DocumentButton.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconPaperclip } from '../../../icon/index.js'
+  import type { DocumentUploadResult } from '../TipTap.svelte'
+
+  interface Props {
+    editor: Editor
+    onDocumentUpload?: (file: File) => Promise<DocumentUploadResult | null>
+  }
+
+  let { editor, onDocumentUpload }: Props = $props()
+
+  let fileInputElement: HTMLInputElement | undefined = $state()
+
+  const handleFileSelect = async (event: Event) => {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+
+    if (!file || !onDocumentUpload) return
+
+    try {
+      const result = await onDocumentUpload(file)
+
+      if (result) {
+        editor
+          .chain()
+          .focus()
+          .insertContent({
+            type: 'text',
+            text: result.label,
+            marks: [{ type: 'link', attrs: { href: result.url } }]
+          })
+          .run()
+      }
+    } catch (error) {
+      console.error('Failed to upload document:', error)
+    }
+
+    // Reset the input
+    if (fileInputElement) {
+      fileInputElement.value = ''
+    }
+  }
+
+  const openFilePicker = () => {
+    fileInputElement?.click()
+  }
+</script>
+
+<input
+  type="file"
+  bind:this={fileInputElement}
+  onchange={handleFileSelect}
+  style="display: none;"
+/>
+
+<ToolbarButton icon={iconPaperclip} title="Attach Document" onclick={openFilePicker} />

package/dist/editors/tiptap/toolbar/DocumentButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from '@tiptap/core';
+import type { DocumentUploadResult } from '../TipTap.svelte';
+interface Props {
+    editor: Editor;
+    onDocumentUpload?: (file: File) => Promise<DocumentUploadResult | null>;
+}
+declare const DocumentButton: import("svelte").Component<Props, {}, "">;
+type DocumentButton = ReturnType<typeof DocumentButton>;
+export default DocumentButton;

package/dist/editors/tiptap/toolbar/HeadingButton.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Editor } from '@tiptap/core'
+  import ToolbarButton from './ToolbarButton.svelte'
+  import { iconH1, iconH2, iconH3, iconH4, iconH5, iconH6 } from '../../../icon/index.js'
+
+  interface Props {
+    editor: Editor
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+  }
+
+  let { editor, level = 1 }: Props = $props()
+
+  const iconMap = {
+    1: iconH1,
+    2: iconH2,
+    3: iconH3,
+    4: iconH4,
+    5: iconH5,
+    6: iconH6
+  }
+
+  const icon = $derived(iconMap[level])
+</script>
+
+<ToolbarButton
+  {icon}
+  title="Heading {level}"
+  active={editor.isActive('heading', { level })}
+  onclick={() => editor.chain().focus().toggleHeading({ level }).run()}
+/>

package/dist/editors/tiptap/toolbar/HeadingButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+declare const HeadingButton: import("svelte").Component<Props, {}, "">;
+type HeadingButton = ReturnType<typeof HeadingButton>;
+export default HeadingButton;