polymorph-ui-components 0.1.0 → 0.4.0

package/dist/Resizable/Resizable.svelte

@@ -0,0 +1,303 @@
+<script lang="ts">
+  import type { ResizableProperties, ResizeEdge } from './properties';
+
+  let {
+    width = $bindable(null),
+    height = $bindable(null),
+    minWidth = 0,
+    maxWidth = Number.POSITIVE_INFINITY,
+    minHeight = 0,
+    maxHeight = Number.POSITIVE_INFINITY,
+    handles = ['bottom-right'],
+    step = 16,
+    disabled = false,
+    handleLabel = 'Resize',
+    children,
+    onresize,
+    onresizestart,
+    onresizeend,
+    testId,
+    classes
+  }: ResizableProperties = $props();
+
+  const DIRS: Record<ResizeEdge, { x: -1 | 0 | 1; y: -1 | 0 | 1 }> = {
+    top: { x: 0, y: -1 },
+    right: { x: 1, y: 0 },
+    bottom: { x: 0, y: 1 },
+    left: { x: -1, y: 0 },
+    'top-left': { x: -1, y: -1 },
+    'top-right': { x: 1, y: -1 },
+    'bottom-left': { x: -1, y: 1 },
+    'bottom-right': { x: 1, y: 1 }
+  };
+
+  let container: HTMLElement | null = $state(null);
+  let active: {
+    edge: ResizeEdge;
+    pointerId: number;
+    startX: number;
+    startY: number;
+    startW: number;
+    startH: number;
+  } | null = $state(null);
+
+  let activeHandles = $derived(disabled ? [] : handles);
+
+  function clampWidth(value: number): number {
+    return Math.min(maxWidth, Math.max(minWidth, value));
+  }
+
+  function clampHeight(value: number): number {
+    return Math.min(maxHeight, Math.max(minHeight, value));
+  }
+
+  function measuredWidth(): number {
+    return typeof width === 'number' ? width : (container?.offsetWidth ?? 0);
+  }
+
+  function measuredHeight(): number {
+    return typeof height === 'number' ? height : (container?.offsetHeight ?? 0);
+  }
+
+  function axisOf(edge: ResizeEdge): 'x' | 'y' | 'both' {
+    const dir = DIRS[edge];
+    if (dir.x !== 0 && dir.y !== 0) {
+      return 'both';
+    }
+    return dir.x !== 0 ? 'x' : 'y';
+  }
+
+  function orientationOf(edge: ResizeEdge): 'horizontal' | 'vertical' | null {
+    const axis = axisOf(edge);
+    if (axis === 'x') {
+      return 'vertical';
+    }
+    if (axis === 'y') {
+      return 'horizontal';
+    }
+    return null;
+  }
+
+  function startResize(
+    event: PointerEvent & { currentTarget: HTMLElement },
+    edge: ResizeEdge
+  ): void {
+    if (disabled) {
+      return;
+    }
+    event.preventDefault();
+    const startW = clampWidth(measuredWidth());
+    const startH = clampHeight(measuredHeight());
+    width = startW;
+    height = startH;
+    active = {
+      edge,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      startW,
+      startH
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    onresizestart?.({ width: startW, height: startH });
+  }
+
+  function moveResize(event: PointerEvent): void {
+    if (active === null) {
+      return;
+    }
+    const dir = DIRS[active.edge];
+    if (dir.x !== 0) {
+      width = clampWidth(active.startW + dir.x * (event.clientX - active.startX));
+    }
+    if (dir.y !== 0) {
+      height = clampHeight(active.startH + dir.y * (event.clientY - active.startY));
+    }
+    onresize?.({ width: measuredWidth(), height: measuredHeight() });
+  }
+
+  function endResize(event: PointerEvent & { currentTarget: HTMLElement }): void {
+    if (active === null) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    active = null;
+    onresizeend?.({ width: measuredWidth(), height: measuredHeight() });
+  }
+
+  function keyResize(event: KeyboardEvent, edge: ResizeEdge): void {
+    if (disabled) {
+      return;
+    }
+    const dir = DIRS[edge];
+    let nextWidth = measuredWidth();
+    let nextHeight = measuredHeight();
+    let handled = false;
+
+    if (dir.x !== 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+      nextWidth = clampWidth(nextWidth + (event.key === 'ArrowRight' ? step : -step));
+      handled = true;
+    }
+    if (dir.y !== 0 && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+      nextHeight = clampHeight(nextHeight + (event.key === 'ArrowDown' ? step : -step));
+      handled = true;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      width = nextWidth;
+      height = nextHeight;
+      onresize?.({ width: nextWidth, height: nextHeight });
+    }
+  }
+
+  function valueNow(edge: ResizeEdge): number | null {
+    const axis = axisOf(edge);
+    if (axis === 'y') {
+      return typeof height === 'number' ? height : null;
+    }
+    return typeof width === 'number' ? width : null;
+  }
+
+  function valueMin(edge: ResizeEdge): number {
+    return axisOf(edge) === 'y' ? minHeight : minWidth;
+  }
+
+  function valueMax(edge: ResizeEdge): number | null {
+    const max = axisOf(edge) === 'y' ? maxHeight : maxWidth;
+    return Number.isFinite(max) ? max : null;
+  }
+</script>
+
+<div
+  class="resizable {classes ?? ''}"
+  class:resizing={active !== null}
+  data-pw={testId}
+  bind:this={container}
+  style:width={typeof width === 'number' ? `${width}px` : null}
+  style:height={typeof height === 'number' ? `${height}px` : null}
+>
+  {#if typeof children === 'function'}
+    {@render children()}
+  {/if}
+
+  {#each activeHandles as edge (edge)}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div
+      class="handle"
+      data-edge={edge}
+      role="separator"
+      tabindex="0"
+      aria-label={handleLabel}
+      aria-orientation={orientationOf(edge)}
+      aria-valuenow={valueNow(edge)}
+      aria-valuemin={valueMin(edge)}
+      aria-valuemax={valueMax(edge)}
+      onpointerdown={(event) => startResize(event, edge)}
+      onpointermove={moveResize}
+      onpointerup={endResize}
+      onkeydown={(event) => keyResize(event, edge)}
+    ></div>
+  {/each}
+</div>
+
+<style>
+  .resizable {
+    position: relative;
+    box-sizing: border-box;
+    max-width: var(--resizable-max-width, none);
+    max-height: var(--resizable-max-height, none);
+    transition: var(--resizable-transition, none);
+  }
+
+  .resizable.resizing {
+    user-select: none;
+    transition: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .resizable {
+      transition: none;
+    }
+  }
+
+  .handle {
+    position: absolute;
+    touch-action: none;
+    z-index: var(--resizable-handle-z-index, 2);
+    background: var(--resizable-handle-color, transparent);
+  }
+
+  .handle:focus-visible {
+    outline: var(--resizable-handle-focus-outline, 2px solid #3b5bdb);
+    outline-offset: var(--resizable-handle-focus-outline-offset, -2px);
+  }
+
+  .handle[data-edge='top'],
+  .handle[data-edge='bottom'] {
+    left: 0;
+    right: 0;
+    height: var(--resizable-edge-size, 8px);
+    cursor: ns-resize;
+  }
+
+  .handle[data-edge='left'],
+  .handle[data-edge='right'] {
+    top: 0;
+    bottom: 0;
+    width: var(--resizable-edge-size, 8px);
+    cursor: ew-resize;
+  }
+
+  .handle[data-edge='top'] {
+    top: 0;
+  }
+
+  .handle[data-edge='bottom'] {
+    bottom: 0;
+  }
+
+  .handle[data-edge='left'] {
+    left: 0;
+  }
+
+  .handle[data-edge='right'] {
+    right: 0;
+  }
+
+  .handle[data-edge='top-left'],
+  .handle[data-edge='top-right'],
+  .handle[data-edge='bottom-left'],
+  .handle[data-edge='bottom-right'] {
+    width: var(--resizable-corner-size, 14px);
+    height: var(--resizable-corner-size, 14px);
+    z-index: var(--resizable-corner-z-index, 3);
+  }
+
+  .handle[data-edge='top-left'] {
+    top: 0;
+    left: 0;
+    cursor: nwse-resize;
+  }
+
+  .handle[data-edge='top-right'] {
+    top: 0;
+    right: 0;
+    cursor: nesw-resize;
+  }
+
+  .handle[data-edge='bottom-left'] {
+    bottom: 0;
+    left: 0;
+    cursor: nesw-resize;
+  }
+
+  .handle[data-edge='bottom-right'] {
+    bottom: 0;
+    right: 0;
+    cursor: nwse-resize;
+  }
+</style>

package/dist/Resizable/Resizable.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ResizableProperties } from './properties';
+declare const Resizable: import("svelte").Component<ResizableProperties, {}, "width" | "height">;
+type Resizable = ReturnType<typeof Resizable>;
+export default Resizable;

package/dist/Resizable/properties.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type ResizeEdge = 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type ResizeSize = {
+    width: number;
+    height: number;
+};
+export type ResizableProperties = OptionalResizableProperties & ResizableEventProperties;
+export type OptionalResizableProperties = {
+    width?: number | null;
+    height?: number | null;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    handles?: ResizeEdge[];
+    step?: number;
+    disabled?: boolean;
+    handleLabel?: string;
+    children?: Snippet;
+    testId?: string;
+    classes?: string;
+};
+export type ResizableEventProperties = {
+    onresize?: (size: ResizeSize) => void;
+    onresizestart?: (size: ResizeSize) => void;
+    onresizeend?: (size: ResizeSize) => void;
+};

package/dist/Resizable/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/assets/add.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" xmlns="http://www.w3.org/2000/svg">
+  <line x1="12" y1="5" x2="12" y2="19" />
+  <line x1="5" y1="12" x2="19" y2="12" />
+</svg>

package/dist/assets/attach.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 7v9a4 4 0 0 1-8 0V6.5a2.5 2.5 0 0 1 5 0V15.5" />
+</svg>

package/dist/assets/chat.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+</svg>

package/dist/assets/file.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 3v5h5" />
+  <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z" />
+</svg>

package/dist/assets/mic.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <rect x="9" y="2" width="6" height="12" rx="3" />
+  <path d="M5 11a7 7 0 0 0 14 0" />
+  <line x1="12" y1="18" x2="12" y2="22" />
+</svg>

package/dist/assets/mute.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 9v6h4l5 5V4L8 9H4z" fill="currentColor" stroke="none" />
+  <line x1="16" y1="9" x2="21" y2="14" />
+  <line x1="21" y1="9" x2="16" y2="14" />
+</svg>

package/dist/assets/pause.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <rect x="6" y="5" width="4" height="14" rx="1" />
+  <rect x="14" y="5" width="4" height="14" rx="1" />
+</svg>

package/dist/assets/play.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 5v14l11-7z" />
+</svg>

package/dist/assets/retry.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="23 4 23 10 17 10" />
+  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+</svg>

package/dist/assets/send.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 19V5" />
+  <path d="M6 11l6-6 6 6" />
+</svg>

package/dist/assets/stop.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <rect x="7" y="7" width="10" height="10" rx="2" />
+</svg>

package/dist/assets/thumb-down.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3z" />
+  <path d="M17 2h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3" />
+</svg>

package/dist/assets/thumb-up.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3z" />
+  <path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+</svg>

package/dist/assets/volume.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 9v6h4l5 5V4L8 9H4z" fill="currentColor" stroke="none" />
+  <path d="M16 8.5a4 4 0 0 1 0 7" />
+  <path d="M18.5 6a7 7 0 0 1 0 12" />
+</svg>

package/dist/index.d.ts

@@ -52,6 +52,20 @@ export { default as Phone } from './Phone/Phone.svelte';
 export { default as Combobox } from './Combobox/Combobox.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as SplitInput } from './SplitInput/SplitInput.svelte';
+export { default as MediaPlayer } from './MediaPlayer/MediaPlayer.svelte';
+export { default as MediaUpload } from './MediaUpload/MediaUpload.svelte';
+export { default as Chat } from './Chat/Chat.svelte';
+export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
+export { default as ChatMessageList } from './ChatMessageList/ChatMessageList.svelte';
+export { default as ChatComposer } from './ChatComposer/ChatComposer.svelte';
+export { default as ChatHeader } from './ChatHeader/ChatHeader.svelte';
+export { default as ChatToolStatus } from './ChatToolStatus/ChatToolStatus.svelte';
+export { default as ChatSuggestions } from './ChatSuggestions/ChatSuggestions.svelte';
+export { default as Resizable } from './Resizable/Resizable.svelte';
+export { default as Draggable } from './Draggable/Draggable.svelte';
+export { default as ChatBubble } from './ChatBubble/ChatBubble.svelte';
+export { ChatController } from './Chat/controller.svelte';
+export { partyOf } from './Chat/roles';
 export type * from './Button/properties';
 export type * from './Modal/properties';
 export type * from './Input/properties';
@@ -100,4 +114,17 @@ export type * from './Loader/properties';
 export type * from './Combobox/properties';
 export type * from './ColorPicker/properties';
 export type * from './SplitInput/properties';
+export type * from './MediaPlayer/properties';
+export type * from './MediaUpload/properties';
+export type * from './Chat/types';
+export type * from './Chat/properties';
+export type * from './ChatMessage/properties';
+export type * from './ChatMessageList/properties';
+export type * from './ChatComposer/properties';
+export type * from './ChatHeader/properties';
+export type * from './ChatToolStatus/properties';
+export type * from './ChatSuggestions/properties';
+export type * from './Resizable/properties';
+export type * from './Draggable/properties';
+export type * from './ChatBubble/properties';
 export { validateInput } from './utils';

package/dist/index.js

@@ -52,4 +52,18 @@ export { default as Phone } from './Phone/Phone.svelte';
 export { default as Combobox } from './Combobox/Combobox.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as SplitInput } from './SplitInput/SplitInput.svelte';
+export { default as MediaPlayer } from './MediaPlayer/MediaPlayer.svelte';
+export { default as MediaUpload } from './MediaUpload/MediaUpload.svelte';
+export { default as Chat } from './Chat/Chat.svelte';
+export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
+export { default as ChatMessageList } from './ChatMessageList/ChatMessageList.svelte';
+export { default as ChatComposer } from './ChatComposer/ChatComposer.svelte';
+export { default as ChatHeader } from './ChatHeader/ChatHeader.svelte';
+export { default as ChatToolStatus } from './ChatToolStatus/ChatToolStatus.svelte';
+export { default as ChatSuggestions } from './ChatSuggestions/ChatSuggestions.svelte';
+export { default as Resizable } from './Resizable/Resizable.svelte';
+export { default as Draggable } from './Draggable/Draggable.svelte';
+export { default as ChatBubble } from './ChatBubble/ChatBubble.svelte';
+export { ChatController } from './Chat/controller.svelte';
+export { partyOf } from './Chat/roles';
 export { validateInput } from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polymorph-ui-components",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",