@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/markdown-editor/editor-toolbar/link-popover.svelte

@@ -1,366 +0,0 @@
-<script lang="ts" module>
-  export type LinkPopoverMode = 'insert' | 'edit';
-
-  export type LinkPopoverProps = {
-    /** Unique ID for accessibility */
-    id: string;
-    /** Current mode: insert new link or edit existing */
-    mode: LinkPopoverMode;
-    /** Initial URL value (for editing) */
-    initialUrl?: string;
-    /** Initial link text (for inserting with no selection) */
-    initialText?: string;
-    /** Whether we have selected text (hides text input) */
-    hasSelection?: boolean;
-    /** Additional CSS class */
-    class?: string;
-    /**
-     * Anchor element for Floating UI positioning.
-     * Pass an HTMLElement (toolbar button) or a VirtualElement (ProseMirror selection coords).
-     * When null/undefined the popover falls back to its previous fixed-center positioning.
-     */
-    anchorElement?: HTMLElement | import('@floating-ui/dom').VirtualElement | null;
-    /** Called when popover should close */
-    onclose?: () => void;
-    /** Called when link should be inserted */
-    oninsert?: (url: string, text?: string) => void;
-    /** Called when link should be removed */
-    onremove?: () => void;
-  };
-</script>
-
-<script lang="ts">
-  import { tick } from 'svelte';
-  import type { Placement, VirtualElement } from '@floating-ui/dom';
-  import { createAnchoredOverlay } from '../../../_internal/anchored-overlay.svelte.ts';
-  import { classNames } from '../../../utilities/class-names.ts';
-  import { createFocusTrap } from '../../focus-trap/index.ts';
-  import { createClickOutside } from '../../../utilities/attachments.ts';
-  import Button from '../../button/button.svelte';
-  import Input from '../../input/input.svelte';
-  import Link from 'lucide-svelte/icons/link';
-  import Unlink from 'lucide-svelte/icons/unlink';
-  import X from 'lucide-svelte/icons/x';
-
-  let {
-    id,
-    mode = 'insert',
-    initialUrl = '',
-    initialText = '',
-    hasSelection = false,
-    class: className,
-    anchorElement = null,
-    onclose,
-    oninsert,
-    onremove,
-  }: LinkPopoverProps = $props();
-
-  let popoverElement = $state<HTMLDivElement | null>(null);
-  const anchoredOverlay = createAnchoredOverlay({
-    open: () => Boolean(anchorElement),
-    anchor: () => anchorElement as HTMLElement | VirtualElement | null,
-    panel: () => popoverElement,
-    placement: () => 'bottom-start' as Placement,
-    offset: () => 8,
-    widthMode: () => 'content',
-  });
-
-  // Form state. The popover is mounted fresh on every open (the parent gates it
-  // behind `{#if linkPopoverOpen && mode === 'wysiwyg'}`), so initializing from
-  // the incoming props here captures the correct values for this open session.
-  // A prop-sync $effect would be redundant and would clobber the user's
-  // in-progress edits if `initialUrl` / `initialText` recomputed mid-open.
-  let url = $state(initialUrl);
-  let text = $state(initialText);
-  let initialFocusApplied = false;
-
-  $effect(() => {
-    if (initialFocusApplied) return;
-    if (!popoverElement) return;
-    if (anchorElement && !anchoredOverlay.positionReady) return;
-    tick().then(() => {
-      if (initialFocusApplied) return;
-      document.getElementById(`${id}-url`)?.focus();
-      initialFocusApplied = true;
-    });
-  });
-
-  // Allowed URL protocols (safe for links)
-  const ALLOWED_PROTOCOLS = [
-    'http:',
-    'https:',
-    'mailto:',
-    'tel:',
-    'ftp:',
-    'ftps:',
-    'sms:',
-  ] as const;
-
-  // Dangerous URL schemes that could be used for XSS
-  const DANGEROUS_SCHEMES = ['javascript:', 'data:', 'vbscript:'] as const;
-
-  // Validation
-  const urlError = $derived.by(() => {
-    if (!url.trim()) return undefined;
-
-    const trimmedUrl = url.trim().toLowerCase();
-
-    // Block dangerous schemes (XSS prevention)
-    for (const scheme of DANGEROUS_SCHEMES) {
-      if (trimmedUrl.startsWith(scheme)) {
-        return 'This URL scheme is not allowed';
-      }
-    }
-
-    // Allow relative URLs and anchors
-    if (trimmedUrl.startsWith('/') || trimmedUrl.startsWith('#')) {
-      return undefined;
-    }
-
-    // Allow safe protocol schemes
-    for (const protocol of ALLOWED_PROTOCOLS) {
-      if (trimmedUrl.startsWith(protocol)) {
-        return undefined;
-      }
-    }
-
-    // Try to validate as absolute URL
-    try {
-      new URL(url);
-      return undefined;
-    } catch {
-      // Try with https:// prefix for convenience
-      try {
-        new URL(`https://${url}`);
-        return undefined;
-      } catch {
-        return 'Please enter a valid URL';
-      }
-    }
-  });
-
-  const canSubmit = $derived(url.trim() && !urlError && (hasSelection || text.trim()));
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Escape' && !event.defaultPrevented) {
-      event.preventDefault();
-      onclose?.();
-    }
-    // Submit on Enter when form is valid
-    // Skip if composing (IME input) to avoid interfering with autocomplete
-    if (event.key === 'Enter' && canSubmit && !event.isComposing) {
-      event.preventDefault();
-      handleSubmit();
-    }
-  }
-
-  function handleSubmit() {
-    if (!canSubmit) return;
-
-    // Normalize URL - add https:// if missing and not already a valid protocol
-    let normalizedUrl = url.trim();
-    const lowerUrl = normalizedUrl.toLowerCase();
-
-    // Check if URL already has a protocol or is a relative/anchor URL
-    const hasProtocol =
-      lowerUrl.startsWith('/') ||
-      lowerUrl.startsWith('#') ||
-      ALLOWED_PROTOCOLS.some((protocol) => lowerUrl.startsWith(protocol));
-
-    if (!hasProtocol) {
-      normalizedUrl = `https://${normalizedUrl}`;
-    }
-
-    oninsert?.(normalizedUrl, hasSelection ? undefined : text.trim());
-  }
-
-  function handleRemove() {
-    onremove?.();
-  }
-</script>
-
-<div
-  bind:this={popoverElement}
-  {id}
-  role="dialog"
-  aria-modal="true"
-  aria-labelledby={`${id}-title`}
-  tabindex="-1"
-  class={classNames('link-popover', className)}
-  style={anchorElement ? anchoredOverlay.positionStyle : undefined}
-  data-position-ready={anchorElement ? anchoredOverlay.positionReady : undefined}
-  inert={anchorElement && !anchoredOverlay.positionReady ? true : undefined}
-  {@attach createFocusTrap({ active: () => !anchorElement || anchoredOverlay.positionReady })}
-  {@attach createClickOutside({ handler: () => onclose?.() })}
-  onkeydown={handleKeyDown}
->
-  <header class="link-popover-header">
-    <h2 id={`${id}-title`} class="link-popover-title">
-      <Link class="icon-sm" />
-      {mode === 'insert' ? 'Insert Link' : 'Edit Link'}
-    </h2>
-    <button type="button" class="link-popover-close" onclick={onclose} aria-label="Close">
-      <X class="icon-sm" />
-    </button>
-  </header>
-
-  <div class="link-popover-content">
-    <Input
-      id={`${id}-url`}
-      label="URL"
-      type="url"
-      placeholder="https://example.com"
-      bind:value={url}
-      error={urlError ?? ''}
-      required
-    />
-
-    {#if !hasSelection}
-      <Input
-        id={`${id}-text`}
-        label="Link text"
-        placeholder="Display text"
-        bind:value={text}
-        required
-      />
-    {/if}
-  </div>
-
-  <footer class="link-popover-footer">
-    <div class="link-popover-actions">
-      {#if mode === 'edit'}
-        <Button variant="ghost" size="sm" onclick={handleRemove}>
-          <Unlink class="icon-sm" />
-          Remove
-        </Button>
-      {/if}
-    </div>
-    <div class="link-popover-primary-actions">
-      <Button variant="secondary" size="sm" onclick={onclose}>Cancel</Button>
-      <Button variant="primary" size="sm" onclick={handleSubmit} disabled={!canSubmit}>
-        {mode === 'insert' ? 'Insert' : 'Update'}
-      </Button>
-    </div>
-  </footer>
-</div>
-
-<style>
-  .link-popover {
-    position: fixed;
-    /* Positioned by Floating UI when anchorElement is provided (inline style).
-     * Visibility is hidden until the first position compute completes so that
-     * focus is never visibly misplaced. */
-    visibility: hidden;
-    z-index: var(--cinder-z-dropdown);
-    display: flex;
-    flex-direction: column;
-    width: 320px;
-    max-width: calc(100vw - 2rem);
-    background: var(--cinder-surface);
-    border: 1px solid var(--cinder-border);
-    border-radius: var(--cinder-radius-lg);
-    box-shadow: var(--cinder-shadow-lg);
-    overflow: hidden;
-  }
-
-  .link-popover[data-position-ready='true'] {
-    visibility: visible;
-  }
-
-  /* When no anchor element is provided (standalone usage without Floating UI),
-   * center horizontally via auto inline margins and inset from the top — no
-   * hardcoded percentage offsets or transforms. */
-  .link-popover:not([data-position-ready]) {
-    inset-block-start: 20vh;
-    inset-inline: 0;
-    margin-inline: auto;
-    visibility: visible;
-  }
-
-  .link-popover-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--cinder-space-2);
-    padding: var(--cinder-space-3) var(--cinder-space-4);
-    border-bottom: 1px solid var(--cinder-border);
-    background: var(--cinder-surface-raised);
-  }
-
-  .link-popover-title {
-    display: flex;
-    align-items: center;
-    gap: var(--cinder-space-2);
-    margin: 0;
-    font-size: var(--cinder-text-sm);
-    font-weight: var(--cinder-font-semibold);
-    color: var(--cinder-text);
-  }
-
-  .link-popover-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--cinder-touch-target-min, 44px);
-    height: var(--cinder-touch-target-min, 44px);
-    flex-shrink: 0;
-    color: var(--cinder-text-muted);
-    background: transparent;
-    border: none;
-    border-radius: var(--cinder-radius-sm);
-    cursor: pointer;
-    transition:
-      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
-      color var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  @media (hover: hover) {
-    .link-popover-close:hover {
-      color: var(--cinder-text);
-      background: var(--cinder-surface-hover);
-    }
-  }
-
-  /* Close button sits in the popover corner; an outset ring would overhang the
-     popover edge, so paint an INSET ring (Strategy B-inset). */
-  .link-popover-close:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: inset 0 0 0 var(--cinder-ring-width)
-      var(--_cinder-link-popover-close-ring, var(--cinder-ring-color));
-  }
-
-  @media (forced-colors: active) {
-    .link-popover-close:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: calc(var(--cinder-ring-width) * -1);
-    }
-  }
-
-  .link-popover-content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cinder-space-4);
-    padding: var(--cinder-space-4);
-  }
-
-  .link-popover-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--cinder-space-2);
-    padding: var(--cinder-space-3) var(--cinder-space-4);
-    border-top: 1px solid var(--cinder-border);
-    background: var(--cinder-surface-raised);
-  }
-
-  .link-popover-actions {
-    display: flex;
-    gap: var(--cinder-space-2);
-  }
-
-  .link-popover-primary-actions {
-    display: flex;
-    gap: var(--cinder-space-2);
-    margin-inline-start: auto;
-  }
-</style>

package/src/components/markdown-editor/editor-toolbar/toolbar-button.svelte

@@ -1,125 +0,0 @@
-<script lang="ts" module>
-  import type { HTMLButtonAttributes } from 'svelte/elements';
-  import type { IconComponent } from './types.js';
-
-  export type ToolbarButtonProps = Omit<HTMLButtonAttributes, 'class'> & {
-    /** Icon component to display */
-    icon: IconComponent;
-    /** Accessible label (required) */
-    label: string;
-    /** Whether this is a toggle button */
-    toggle?: boolean;
-    /** Current pressed state (for toggle buttons) */
-    pressed?: boolean;
-    /** Keyboard shortcut to display in tooltip */
-    shortcut?: string;
-    /** Additional CSS classes */
-    class?: string;
-  };
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../../utilities/class-names.ts';
-  import Tooltip from '../../tooltip/tooltip.svelte';
-
-  let {
-    icon: Icon,
-    label,
-    toggle = false,
-    pressed = false,
-    shortcut,
-    disabled = false,
-    class: className,
-    onclick,
-    ...rest
-  }: ToolbarButtonProps = $props();
-
-  const tooltipLabel = $derived(shortcut ? `${label} (${shortcut})` : label);
-</script>
-
-<Tooltip text={tooltipLabel} placement="bottom">
-  <button
-    type="button"
-    class={classNames('toolbar-button', className)}
-    aria-label={label}
-    aria-pressed={toggle ? pressed : undefined}
-    data-active={toggle && pressed ? '' : undefined}
-    {disabled}
-    {onclick}
-    {...rest}
-  >
-    <Icon class="icon-sm" />
-  </button>
-</Tooltip>
-
-<style>
-  .toolbar-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.75rem;
-    height: 1.75rem;
-    padding: 0;
-    border: none;
-    border-radius: var(--cinder-radius-sm);
-    background: transparent;
-    color: var(--cinder-text-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
-      color var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  @media (hover: hover) {
-    .toolbar-button:hover:not(:disabled) {
-      background: var(--cinder-surface-hover);
-      color: var(--cinder-text);
-    }
-  }
-
-  .toolbar-button:active:not(:disabled) {
-    background: var(--cinder-surface-pressed);
-  }
-
-  .toolbar-button[data-active] {
-    background: var(--cinder-surface-pressed);
-    color: var(--cinder-accent-text);
-  }
-
-  @media (hover: hover) {
-    .toolbar-button[data-active]:hover:not(:disabled) {
-      background: var(--cinder-surface-pressed);
-      color: var(--cinder-accent-text);
-    }
-  }
-
-  .toolbar-button:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  @media (forced-colors: active) {
-    .toolbar-button:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: 3px;
-    }
-  }
-
-  .toolbar-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    color: var(--cinder-text-disabled);
-  }
-
-  .toolbar-tooltip {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cinder-space-2);
-  }
-
-  .toolbar-tooltip-keys {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cinder-space-1);
-  }
-</style>

package/src/components/markdown-editor/editor-toolbar/toolbar-dropdown.svelte

@@ -1,139 +0,0 @@
-<script lang="ts" module>
-  import type { IconComponent } from './types.js';
-
-  export type BlockType = 'paragraph' | 'heading1' | 'heading2' | 'heading3' | 'blockquote';
-
-  export type BlockTypeOption = {
-    type: BlockType;
-    label: string;
-    icon: IconComponent;
-  };
-
-  export type ToolbarDropdownProps = {
-    /** Unique ID for accessibility */
-    id: string;
-    /** Currently selected block type */
-    value: BlockType;
-    /** Available block type options */
-    options: BlockTypeOption[];
-    /** Whether the dropdown is disabled */
-    disabled?: boolean;
-    /** Callback when selection changes */
-    onchange?: (type: BlockType) => void;
-    /** Additional CSS classes */
-    class?: string;
-  };
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../../utilities/class-names.ts';
-  import Check from 'lucide-svelte/icons/check';
-  import Dropdown from '../../dropdown/dropdown.svelte';
-  import DropdownTrigger from '../../dropdown-trigger/dropdown-trigger.svelte';
-  import DropdownMenu from '../../dropdown-menu/dropdown-menu.svelte';
-  import DropdownItem from '../../dropdown-item/dropdown-item.svelte';
-
-  let {
-    id,
-    value,
-    options,
-    disabled = false,
-    onchange,
-    class: className,
-  }: ToolbarDropdownProps = $props();
-
-  const currentOption = $derived(options.find((opt) => opt.type === value) ?? options[0]);
-
-  function handleSelect(type: BlockType) {
-    onchange?.(type);
-  }
-</script>
-
-<Dropdown {id}>
-  <DropdownTrigger
-    class={classNames('toolbar-dropdown-trigger', className)}
-    {disabled}
-    aria-label={`Block type: ${currentOption?.label ?? 'Paragraph'}`}
-  >
-    {#if currentOption}
-      <currentOption.icon class="icon-sm" />
-    {/if}
-    <span class="toolbar-dropdown-label">{currentOption?.label ?? 'Paragraph'}</span>
-  </DropdownTrigger>
-  <DropdownMenu>
-    {#each options as option (option.type)}
-      {@const isActive = option.type === value}
-      <DropdownItem
-        onclick={() => handleSelect(option.type)}
-        data-active={isActive ? '' : undefined}
-        itemRole="menuitemradio"
-        checked={isActive}
-      >
-        <option.icon class="icon-sm" />
-        <span class="dropdown-item-label">{option.label}</span>
-        {#if isActive}
-          <Check class="icon-sm dropdown-item-check" />
-        {/if}
-      </DropdownItem>
-    {/each}
-  </DropdownMenu>
-</Dropdown>
-
-<style>
-  :global(.toolbar-dropdown-trigger) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cinder-space-1);
-    height: 1.75rem;
-    padding: 0 var(--cinder-space-1-5);
-    border: none;
-    border-radius: var(--cinder-radius-sm);
-    background: transparent;
-    color: var(--cinder-text);
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    cursor: pointer;
-    transition:
-      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
-      color var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  @media (hover: hover) {
-    :global(.toolbar-dropdown-trigger:hover:not(:disabled)) {
-      background: var(--cinder-surface-hover);
-      color: var(--cinder-text);
-    }
-  }
-
-  :global(.toolbar-dropdown-trigger:focus-visible) {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  @media (forced-colors: active) {
-    :global(.toolbar-dropdown-trigger:focus-visible) {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: 3px;
-    }
-  }
-
-  :global(.toolbar-dropdown-trigger:disabled) {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .toolbar-dropdown-label {
-    min-width: 4rem;
-    text-align: left;
-  }
-
-  .dropdown-item-label {
-    flex: 1;
-  }
-
-  :global(.dropdown-item-check) {
-    color: var(--cinder-accent-text);
-    flex-shrink: 0;
-    margin-inline-start: auto;
-  }
-</style>

package/src/components/markdown-editor/editor-toolbar/toolbar-separator.svelte

@@ -1,35 +0,0 @@
-<script lang="ts" module>
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  export type ToolbarSeparatorProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-    class?: string;
-  };
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../../utilities/class-names.ts';
-
-  let { class: className, ...rest }: ToolbarSeparatorProps = $props();
-</script>
-
-<div
-  class={classNames('toolbar-separator', className)}
-  role="separator"
-  aria-orientation="vertical"
-  aria-hidden="true"
-  {...rest}
-></div>
-
-<style>
-  .toolbar-separator {
-    width: 1px;
-    height: 1rem;
-    /* Use --cinder-border (not --cinder-border-muted) so the separator
-       clears the 3:1 contrast floor against the toolbar surface (which
-       uses --cinder-surface-raised). The muted variant looked invisible
-       in dark mode (~1.4:1 against surface-raised). */
-    background: var(--cinder-border);
-    margin-inline: var(--cinder-space-1);
-    flex-shrink: 0;
-  }
-</style>

package/src/components/markdown-editor/editor-toolbar/types.ts

@@ -1,15 +0,0 @@
-/**
- * Shared types for editor toolbar components.
- */
-
-/**
- * Type for icon components (Lucide icons, etc.).
- *
- * Note: lucide-svelte icons don't match Svelte 5's strict `Component` type
- * signature, so we use `any` here. This is consolidated in one place so it
- * can be updated when lucide-svelte updates their type definitions.
- *
- * @see https://github.com/lucide-icons/lucide/issues/1568 for tracking
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type IconComponent = any;

package/src/components/markdown-editor/index.ts

@@ -1,10 +0,0 @@
-import MarkdownEditor from './markdown-editor.svelte';
-
-export default MarkdownEditor;
-export type {
-  EditorHandle,
-  EditorMode,
-  MarkdownEditorProps,
-  ToolbarContext,
-} from './markdown-editor.types.ts';
-export { MarkdownEditor };