@joewinke/jatui 0.1.10 → 0.1.19

package/src/lib/index.ts

@@ -1,17 +1,29 @@
+// Actions
+export { railNav, createRailNav, cycle } from './actions/railNav';
+export type { RailNavOptions, RailNavController } from './actions/railNav';
+
 // Components — Universal
 export { default as UserAvatar } from './components/UserAvatar.svelte';
 export { default as SidebarUserFooter } from './components/SidebarUserFooter.svelte';
 export { default as TaskTypeIcon } from './components/TaskTypeIcon.svelte';
 
 // Components — from JAT IDE
+export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
+export { showConfirm, confirmDialog, cancelDialog, getPending } from './stores/confirmDialog.svelte';
+export type { ConfirmOptions } from './stores/confirmDialog.svelte';
+export { default as InputDialog } from './components/InputDialog.svelte';
+export { showInput, submitInput, cancelInput, getPendingInput } from './stores/inputDialog.svelte';
+export type { InputOptions } from './stores/inputDialog.svelte';
 export { default as SearchDropdown } from './components/SearchDropdown.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
+export { default as ContextMenu } from './components/ContextMenu.svelte';
 export { default as ChipInput } from './components/ChipInput.svelte';
 export { default as ResizableDivider } from './components/ResizableDivider.svelte';
 export { default as DateRangePicker } from './components/DateRangePicker.svelte';
 export { default as SortDropdown } from './components/SortDropdown.svelte';
 export { default as InlineEdit } from './components/InlineEdit.svelte';
 export { default as FloatingActionBar } from './components/FloatingActionBar.svelte';
+export { default as HunkDiffView } from './components/HunkDiffView.svelte';
 
 // Components — from Flush
 export { default as Button } from './components/Button.svelte';
@@ -33,6 +45,7 @@ export { default as ColorSelector } from './components/ColorSelector.svelte';
 export { default as ConfirmModal } from './components/ConfirmModal.svelte';
 export { default as CountdownTimer } from './components/CountdownTimer.svelte';
 export { default as ImageUpload } from './components/ImageUpload.svelte';
+export { default as SmartImageEditor } from './components/SmartImageEditor.svelte';
 export { default as LazyImage } from './components/LazyImage.svelte';
 export { default as ResizablePanel } from './components/ResizablePanel.svelte';
 export { default as VoicePlayer } from './components/VoicePlayer.svelte';
@@ -41,15 +54,31 @@ export { default as SpeechForm } from './components/SpeechForm.svelte';
 // Components — from Headcount
 export { default as ThemeSelector } from './components/ThemeSelector.svelte';
 export { default as Sparkline } from './components/Sparkline.svelte';
+export { default as BurndownChart } from './components/BurndownChart.svelte';
 
 // Components — from JST
 export { default as AvatarUpload } from './components/AvatarUpload.svelte';
 export { default as PdfThumbnail } from './components/PdfThumbnail.svelte';
 export { default as FilePicker } from './components/FilePicker.svelte';
+export { default as FileDropzone } from './components/FileDropzone.svelte';
+export { default as FileThumbnail } from './components/FileThumbnail.svelte';
+export { default as EntityPreviewCard } from './components/EntityPreviewCard.svelte';
+
+// EntityPreviewCard types
+export type { EntityPreviewData, EntityPreviewStat, EntityPreviewBadge } from './types/entityPreview';
 
 // FilePicker types
 export type { FilePickerFile, FilePickerSelection } from './types/filePicker';
 
+// FileDropzone types
+export type { FileDropzoneFile } from './components/FileDropzone.svelte';
+
+// Components — Document Templates (JST)
+export { default as VariablePicker } from './components/VariablePicker.svelte';
+
+// Template variable types
+export type { TemplateVar, TemplateVarGroup } from './types/templateVars';
+
 // Components — Emoji
 export { default as EmojiPicker } from './components/EmojiPicker.svelte';
 
@@ -60,6 +89,9 @@ export type { EmojiEntry, EmojiGroup } from './data/emojis';
 // Components — from Meadow
 export { default as LinkShortener } from './components/LinkShortener.svelte';
 
+// Components — Media
+export { default as MediaWorkbench } from './components/MediaWorkbench.svelte';
+
 // Components — from Marduk
 export { default as SignaturePad } from './components/SignaturePad.svelte';
 export { default as MilestoneCard } from './components/MilestoneCard.svelte';
@@ -76,6 +108,7 @@ export type { ShortenedLink } from './components/LinkShortener.svelte';
 export type { SearchDropdownOption, SearchDropdownGroup } from './components/SearchDropdown.svelte';
 export type { ChipSuggestion, SuggestionGroup, ChipInfo } from './components/ChipInput.svelte';
 export type { SortOption } from './components/SortDropdown.svelte';
+export type { ContextMenuItem } from './components/ContextMenu.svelte';
 export type { DisplaySegment } from './components/InlineEdit.svelte';
 export type { ActionButton, ActionDropdown, DropdownItem } from './components/FloatingActionBar.svelte';
 
@@ -108,6 +141,14 @@ export {
 	LOCATION_ICONS
 } from './types/booking';
 
+// SmartImageEditor types
+export type {
+	ImageVariantSpec,
+	ImageProcessingSpec,
+	VariantResult,
+	VariantState,
+} from './types/smartImageEditor';
+
 // Utilities — date formatting
 export {
 	normalizeTimestamp,
@@ -131,7 +172,7 @@ export {
 	statusLabel,
 } from './utils/taskUtils';
 
-// Utilities — phone formatting
+// Utilities — phone formatting (legacy US-only)
 export {
 	stripPhoneNumber,
 	formatPhoneNumber,
@@ -140,6 +181,17 @@ export {
 	updatePhoneInput
 } from './utils/phoneFormat';
 
+// Utilities — international phone (E.164) — pairs with PhoneInput
+export {
+	toE164,
+	formatPhoneForDisplay,
+	isValidPhone,
+	listCountries,
+	DEFAULT_COUNTRY,
+	PRIORITY_COUNTRIES,
+	type CountryOption,
+} from './utils/phone';
+
 // Utilities — currency
 export { formatCurrency } from './utils/currency';
 
@@ -249,3 +301,55 @@ export {
 	countMentions,
 	setMentionUrlGenerator
 } from './utils/mentionParser';
+
+// Components — Comments (universal threaded comments)
+export { default as CommentThread } from './components/CommentThread.svelte';
+
+// Comment types
+export type {
+	Comment,
+	CommentEntityType,
+	CommentVisibility,
+	CommentCreateInput,
+	CommentCallbacks
+} from './types/comments';
+export { COMMENT_ENTITY_TYPES, COMMENT_VISIBILITIES } from './types/comments';
+
+// Components — PDF Viewer (server-side PDFium WASM rendering, no client pdf.js)
+export { default as PDFViewer } from './components/PDFViewer.svelte';
+
+// Components — Document annotation suite (from Steelbridge FileManager)
+export { default as MarkupEditor } from './components/MarkupEditor.svelte';
+export { default as MarkupOverlay } from './components/MarkupOverlay.svelte';
+export { default as ImageLightbox } from './components/ImageLightbox.svelte';
+export { default as AnnotationLayer } from './components/AnnotationLayer.svelte';
+export { default as AnnotationPanel } from './components/AnnotationPanel.svelte';
+
+// Markup drawing utilities
+export {
+	MARKUP_COLORS,
+	DEFAULT_STROKE_WIDTH,
+	renderShape,
+	renderAllShapes,
+	nextShapeId,
+} from './components/markup';
+
+// Markup + annotation types
+export type {
+	MarkupTool,
+	Point,
+	MarkupShape,
+	ArrowShape,
+	RectangleShape,
+	EllipseShape,
+	CloudShape,
+	FreehandShape,
+	TextShape,
+} from './components/markup';
+
+export type {
+	Annotation,
+	AnnotationProfile,
+	AnnotationThread,
+	AnnotationCallbacks,
+} from './types/annotation';

package/src/lib/stores/confirmDialog.svelte.ts

@@ -0,0 +1,48 @@
+/**
+ * Global promise-based confirm dialog.
+ * Usage: const ok = await showConfirm({ title: '...', body: '...' })
+ */
+
+export type ConfirmOptions = {
+	title: string;
+	body?: string;
+	confirmLabel?: string;
+	cancelLabel?: string;
+	danger?: boolean;
+	timeoutMs?: number; // auto-cancel after this ms; 0 = no timeout (default 8000)
+};
+
+type Pending = {
+	options: ConfirmOptions;
+	resolve: (result: boolean) => void;
+};
+
+let pending = $state<Pending | null>(null);
+
+export function getPending(): Pending | null {
+	return pending;
+}
+
+export function showConfirm(options: ConfirmOptions): Promise<boolean> {
+	// If a dialog is already open, cancel it first.
+	if (pending) {
+		pending.resolve(false);
+	}
+	return new Promise<boolean>((resolve) => {
+		pending = { options, resolve };
+	});
+}
+
+export function confirmDialog(): void {
+	if (!pending) return;
+	const p = pending;
+	pending = null;
+	p.resolve(true);
+}
+
+export function cancelDialog(): void {
+	if (!pending) return;
+	const p = pending;
+	pending = null;
+	p.resolve(false);
+}

package/src/lib/stores/inputDialog.svelte.ts

@@ -0,0 +1,51 @@
+/**
+ * Global promise-based input dialog.
+ * Usage: const value = await showInput({ title: '...', placeholder: '...' })
+ * Returns the typed string if confirmed, null if cancelled.
+ */
+
+export type InputOptions = {
+	title: string;
+	body?: string;
+	placeholder?: string;
+	confirmLabel?: string;
+	cancelLabel?: string;
+	timeoutMs?: number; // reserved; InputDialog never auto-cancels (user is typing)
+	validate?: (value: string) => string | null; // null = valid, string = error message
+	maxLength?: number;
+};
+
+type Pending = {
+	options: InputOptions;
+	resolve: (result: string | null) => void;
+};
+
+let pending = $state<Pending | null>(null);
+
+export function getPendingInput(): Pending | null {
+	return pending;
+}
+
+export function showInput(options: InputOptions): Promise<string | null> {
+	// If a dialog is already open, cancel it first.
+	if (pending) {
+		pending.resolve(null);
+	}
+	return new Promise<string | null>((resolve) => {
+		pending = { options, resolve };
+	});
+}
+
+export function submitInput(value: string): void {
+	if (!pending) return;
+	const p = pending;
+	pending = null;
+	p.resolve(value);
+}
+
+export function cancelInput(): void {
+	if (!pending) return;
+	const p = pending;
+	pending = null;
+	p.resolve(null);
+}

package/src/lib/styles/rail.css

@@ -0,0 +1,63 @@
+/**
+ * rail.css — keyboard rail-navigation primitives
+ *
+ * Provides focus-ring and value-change-pulse treatments for rail-nav
+ * components (vertical or horizontal keyboard-navigable lists where each
+ * rung carries a [data-rail-id] attribute).
+ *
+ * Usage: import once in your app's root layout or global stylesheet:
+ *   @import '@joewinke/jatui/src/lib/styles/rail.css';
+ *
+ * Token: var(--color-primary) — DaisyUI v5 primary (resolves to the
+ * consuming app's active theme primary hue).
+ *
+ * Naming contract (must match the companion railNav Svelte action):
+ *   - Active-rung focus treatment: [data-rail-id]:focus-visible selector
+ *     AND .rail-focus utility class (both route to the same ring + tint).
+ *   - Value-change one-shot pulse: .rail-cycled (added by the action,
+ *     removed after the animation fires).
+ *
+ * Design rules enforced:
+ *   - Ring + tint only — NO colored side-stripe (§6 Don't: border-l/r > 1px).
+ *   - No box-shadow at rest; shadow only during the pulse keyframe.
+ *   - Respects prefers-reduced-motion.
+ */
+
+/* ─── Active-rung focus ring ───────────────────────────────────────────────
+   Applied via :focus-visible on the rung element (attribute-based, works
+   without adding a class) AND via .rail-focus (explicit class, same visual).
+   The ring is primary-tinted at 65% opacity; border-radius matches DaisyUI's
+   field radius token (falls back to 0.25rem). No side-stripe. No shadow at
+   rest (Flat-by-Default rule). ─────────────────────────────────────────── */
+
+[data-rail-id]:focus-visible,
+[data-rail-id]:has(:focus-visible),
+.rail-focus {
+  outline: 2px solid color-mix(in oklch, var(--color-primary) 65%, transparent);
+  outline-offset: 2px;
+  border-radius: var(--radius-field, 0.25rem);
+}
+
+/* ─── Value-change pulse ────────────────────────────────────────────────────
+   One-shot animation applied by the railNav action when the rung's bound
+   value changes. Scales up 2.5% and blooms a brief primary-hued glow ring,
+   then returns to rest. Duration 260ms — fast enough to feel snappy,
+   long enough to register as intentional feedback.
+   Box-shadow (not outline) is used here so it can animate smoothly;
+   outline transitions are not interpolated by CSS. ─────────────────────── */
+
+@keyframes rail-cycled {
+  0%   { transform: scale(1);     box-shadow: 0 0 0 0   color-mix(in oklch, var(--color-primary)  0%, transparent); }
+  35%  { transform: scale(1.025); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 32%, transparent); }
+  100% { transform: scale(1);     box-shadow: 0 0 0 0   color-mix(in oklch, var(--color-primary)  0%, transparent); }
+}
+
+.rail-cycled {
+  animation: rail-cycled 0.26s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rail-cycled {
+    animation: none;
+  }
+}

package/src/lib/types/annotation.ts

@@ -0,0 +1,38 @@
+// Annotation types for document/image annotation suite
+// Used by AnnotationLayer, AnnotationPanel, ImageLightbox
+
+export interface Annotation {
+	id: string
+	user_id: string
+	x_percent: number
+	y_percent: number
+	content: string
+	parent_annotation_id: string | null
+	resolved: boolean
+	resolved_by: string | null
+	resolved_at: string | null
+	created_at: string
+	updated_at: string
+}
+
+export interface AnnotationProfile {
+	full_name: string | null
+	avatar_url: string | null
+}
+
+export interface AnnotationThread {
+	root: Annotation
+	replies: Annotation[]
+}
+
+/** Callbacks for AnnotationPanel async operations */
+export interface AnnotationCallbacks {
+	/** Post a reply to a root annotation. Must return the new annotation or throw. */
+	onAddReply: (parentId: string, content: string) => Promise<void>
+	/** Toggle resolved state. */
+	onResolve: (annotationId: string, resolved: boolean) => Promise<void>
+	/** Delete an annotation (and its replies). */
+	onDelete: (annotationId: string) => Promise<void>
+	/** Edit annotation content. */
+	onEdit: (annotationId: string, content: string) => Promise<void>
+}

package/src/lib/types/comments.ts

@@ -0,0 +1,97 @@
+// Threaded Comments Types
+// Generic types for the CommentThread UI component — no framework or backend
+// dependencies. Mirrors the JST `$lib/types/comments` projection so the
+// component is a drop-in for any app whose server speaks the same shape.
+//
+// Threading is ONE level deep on the data side: a comment is either
+// top-level (`parent_id === null`) or a single-level reply. The UI renders
+// this as two visual levels (a comment and its replies).
+
+/** Entity kinds a comment thread can hang off — mirrors the host DB CHECK. */
+export type CommentEntityType =
+	| 'project'
+	| 'invoice'
+	| 'contract'
+	| 'asset'
+	| 'task'
+	| 'form_submission'
+	| 'milestone'
+	| 'contract_term'
+
+export const COMMENT_ENTITY_TYPES: readonly CommentEntityType[] = [
+	'project',
+	'invoice',
+	'contract',
+	'asset',
+	'task',
+	'form_submission',
+	'milestone',
+	'contract_term'
+] as const
+
+/** Internal = staff-only. Client = also visible in the customer portal. */
+export type CommentVisibility = 'internal' | 'client'
+
+export const COMMENT_VISIBILITIES: readonly CommentVisibility[] = [
+	'internal',
+	'client'
+] as const
+
+export interface Comment {
+	id: string
+	team_id: string
+	entity_type: CommentEntityType
+	entity_id: string
+	author_id: string
+	/** Joined author display name (null if the profile is gone). */
+	author_name: string | null
+	/** Joined author avatar URL. */
+	author_avatar_url: string | null
+	body: string
+	/** null = top-level; otherwise the id of the top-level comment it replies to. */
+	parent_id: string | null
+	visibility: CommentVisibility
+	/** Set the first time the body is edited. */
+	edited_at: string | null
+	/** Set on soft-delete; body is replaced with "[deleted]". */
+	deleted_at: string | null
+	created_at: string
+	/** Number of replies (top-level rows only; always 0 for replies). */
+	reply_count: number
+	/**
+	 * Replies are loaded on demand; this is [] in the paginated top-level
+	 * listing and populated by the component when a thread is expanded.
+	 */
+	replies: Comment[]
+}
+
+export interface CommentCreateInput {
+	entityType: CommentEntityType
+	entityId: string
+	body: string
+	/** When set, this comment is a reply to the given TOP-LEVEL comment. */
+	parentId?: string | null
+	/** Defaults to "internal". Clamped to the parent's visibility for replies. */
+	visibility?: CommentVisibility
+}
+
+/**
+ * Transport-agnostic data layer for `<CommentThread>`. The consuming app
+ * wires these to a server load / form action / fetch endpoint. The
+ * component never imports server code or knows how data is fetched.
+ */
+export interface CommentCallbacks {
+	/** Persist a new comment (top-level or reply) and return the created row. */
+	submitComment: (input: CommentCreateInput) => Promise<Comment>
+	/** Edit an existing comment body; returns the updated row. */
+	editComment: (id: string, body: string) => Promise<Comment>
+	/** Soft-delete a comment. The row stays so replies remain anchored. */
+	deleteComment: (id: string) => Promise<void>
+	/** Fetch the replies for a top-level comment (oldest-first). */
+	loadReplies: (parentId: string) => Promise<Comment[]>
+	/**
+	 * Optional: fetch the next page of top-level comments. When omitted, the
+	 * "Load more" affordance is hidden.
+	 */
+	loadMore?: (offset: number) => Promise<{ comments: Comment[]; total: number }>
+}

package/src/lib/types/entityPreview.ts

@@ -0,0 +1,45 @@
+/**
+ * Entity preview card — the uniform shape an EntityPreviewCard renders and that
+ * a server-side resolver returns for any domain entity. One shape for every
+ * entity type so the card and hover-action stay generic and the same card backs
+ * hover-previews, @-mention unfurls, and link previews.
+ *
+ * Pure types — safe to import from both server (the resolver) and client (the
+ * card + action).
+ */
+
+/** A small labelled stat shown in the card's footer grid (e.g. "Submissions" → 42). */
+export interface EntityPreviewStat {
+  label: string
+  value: string | number
+}
+
+/** A coloured pill (status, type, …). `tone` maps to a DaisyUI semantic token. */
+export interface EntityPreviewBadge {
+  label: string
+  tone?: "neutral" | "primary" | "info" | "success" | "warning" | "error"
+}
+
+export interface EntityPreviewData {
+  /** Canonical entity type slug (e.g. "base", "vendor", "form", "task"). */
+  type: string
+  id: string
+  /** Human label for the type, shown as the card's kicker (e.g. "Knowledge base"). */
+  typeLabel: string
+  /** Main title. */
+  title: string
+  /** Optional one-line subtitle under the title (e.g. a vendor's company). */
+  subtitle?: string | null
+  /** Optional longer summary / description (clamped in the card). */
+  summary?: string | null
+  /** og:image / avatar / thumbnail URL, when the entity has one. */
+  imageUrl?: string | null
+  /** A short emoji/text glyph fallback when there's no image. */
+  icon?: string | null
+  /** Up to ~4 labelled stats. */
+  stats?: EntityPreviewStat[]
+  /** Up to ~3 status/type pills. */
+  badges?: EntityPreviewBadge[]
+  /** The admin detail route for the entity (the card links here). */
+  href?: string | null
+}

package/src/lib/types/filePicker.ts

@@ -5,6 +5,8 @@ export interface FilePickerFile {
   updated_at: string
   metadata: Record<string, any>
   scope: "personal" | "team"
+  /** Publicly accessible URL (no auth required). When present, used instead of the /api/files proxy URL. */
+  publicUrl?: string
 }
 
 export interface FilePickerSelection {

package/src/lib/types/smartImageEditor.ts

@@ -0,0 +1,39 @@
+export interface ImageVariantSpec {
+  name: string
+  width: number
+  height: number
+  fit?: "contain" | "cover" | "fill"
+  /** CSS hex color or "transparent". Transparent background when omitted. */
+  background?: string
+  /**
+   * Optional Gemini edit instruction run on the (background-removed) source
+   * before Sharp's deterministic resize. Used to intelligently re-frame the
+   * variant — e.g. crop a logo down to just the brand mark, or compose an OG
+   * card. Falls back to Sharp-only if the Gemini call fails.
+   */
+  aiPrompt?: string
+}
+
+export interface ImageProcessingSpec {
+  removeBackground?: boolean
+  aspectRatio?: string
+  variants: ImageVariantSpec[]
+}
+
+export interface VariantResult {
+  name: string
+  url: string
+  width: number
+  height: number
+  backgroundRemovalFailed?: boolean
+  /** True when this variant had an aiPrompt but the Gemini edit call failed
+   *  and we fell back to Sharp-only. The result is still uploaded; this is a
+   *  non-blocking signal that the smart re-frame didn't happen. */
+  aiEditFailed?: boolean
+}
+
+export type VariantState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "done"; result: VariantResult }
+  | { status: "error"; message: string }

package/src/lib/types/templateVars.ts

@@ -0,0 +1,36 @@
+/**
+ * Template variable types — shared shape between the JST server-side registry
+ * (`src/lib/server/template-vars.ts`, `getVarsForCategory`) and the
+ * VariablePicker component.
+ *
+ * jatui cannot import the host app's `$lib/server` module (server-only), so
+ * these types are mirrored here. They are kept structurally identical to the
+ * registry's output so `getVarsForCategory(category, availableVars)` can be
+ * passed straight into `<VariablePicker groups={...} />` with no mapping —
+ * same jst↔jatui structural-compatibility pattern used by CommentThread.
+ */
+
+/** A single insertable merge variable. */
+export interface TemplateVar {
+  /**
+   * Dotted variable path inserted into the template as `{{name}}`.
+   * e.g. `contact.name`, `org.logo_url`, `total`.
+   */
+  name: string
+  /** Human label shown in the picker, e.g. "Contact name". */
+  label: string
+  /** Optional one-line help text describing the value. */
+  description?: string
+  /** Optional sample value shown as a hint, e.g. "Acme Inc.". */
+  example?: string
+}
+
+/** Variable context group, e.g. all client/org/financial/custom vars. */
+export interface TemplateVarGroup {
+  /** Stable group id — matches VarGroupId in the host app's template-vars registry. */
+  id: string
+  /** Group heading shown in the picker, e.g. "Client". */
+  label: string
+  /** Variables in this group (never empty — empty groups are omitted). */
+  vars: TemplateVar[]
+}