@widgetic/creator 0.3.60 → 0.3.62

package/dist/components/HoverTooltip.svelte

@@ -5,6 +5,12 @@
 	let className = '';
 	export { className as class };
 	export let style = '';
+	/**
+	 * Optional max width (px) for the bubble. When set, the tooltip wraps onto
+	 * multiple lines instead of one long single line — used for tooltips that
+	 * need a short explanation rather than a label.
+	 */
+	export let maxWidth: number | null = null;
 
 	let triggerEl: HTMLElement | null = null;
 	let open = false;
@@ -46,8 +52,8 @@
 {#if open && text}
 	<Portal target={portalTarget}>
 		<div
-			class="wc-hover-tooltip-bubble pointer-events-none fixed z-[99999] -translate-x-1/2 -translate-y-full rounded-md bg-[#1f2937] px-2.5 py-1 text-xs leading-snug text-[#f9fafb] whitespace-nowrap shadow-md"
-			style="top: {tipTop}px; left: {tipLeft}px;"
+			class="wc-hover-tooltip-bubble pointer-events-none fixed z-[99999] -translate-x-1/2 -translate-y-full rounded-md bg-[#1f2937] px-2.5 py-1 text-xs leading-snug text-[#f9fafb] shadow-md {maxWidth ? 'whitespace-normal text-center' : 'whitespace-nowrap'}"
+			style="top: {tipTop}px; left: {tipLeft}px;{maxWidth ? ` max-width: ${maxWidth}px;` : ''}"
 			role="tooltip"
 		>
 			{text}

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

@@ -20,6 +20,11 @@ declare const HoverTooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
     text?: string;
     class?: string;
     style?: string;
+    /**
+         * Optional max width (px) for the bubble. When set, the tooltip wraps onto
+         * multiple lines instead of one long single line — used for tooltips that
+         * need a short explanation rather than a label.
+         */ maxWidth?: number | null;
 }, {
     default: {};
 }>, {

package/dist/components/VersionDropdownRow.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	/**
+	 * VersionDropdownRow — the ONE row used by BOTH version dropdowns (chat
+	 * history panel and widget-shape preview menu), so the columns can never
+	 * drift apart again:
+	 *   vN (fixed) | commit (debug only) | date OR DRAFT badge (same slot) | action (fixed)
+	 * A Draft replaces the date with its DRAFT badge (no date, no line under
+	 * it); LIVE sits in the action slot with the exact width of PUBLISH, so
+	 * the right edge lines up across every row.
+	 */
+	import HoverTooltip from './HoverTooltip.svelte';
+
+	interface Props {
+		/** Version label shown in the first cell (e.g. "v2"). */
+		versionLabel: string;
+		/** Short commit sha (debug builds only; placeholder dash when missing). */
+		commitSha?: string | null;
+		/** Show the commit cell (debug mode). */
+		showCommit?: boolean;
+		/** Date label; the cell shows an em dash when missing. */
+		dateLabel?: string | null;
+		/** Row is the currently live version — LIVE badge in the action slot. */
+		isLive?: boolean;
+		/** Row is a draft — DRAFT badge replaces the date + Publish action. */
+		isDraft?: boolean;
+		/** Selected/highlighted row. */
+		selected?: boolean;
+		/** Publish/Set-live in flight. */
+		busy?: boolean;
+		/** Draft publish disabled (with tooltip reason when provided). */
+		publishDisabled?: boolean;
+		publishDisabledReason?: string | null;
+		/** Set-live disabled for this row. */
+		setLiveDisabled?: boolean;
+		onselect?: () => void;
+		onpublish?: () => void;
+		onsetlive?: () => void;
+	}
+
+	const { versionLabel, commitSha = null, showCommit = false, dateLabel = null, isLive = false, isDraft = false, selected = false, busy = false, publishDisabled = false, publishDisabledReason = null, setLiveDisabled = false, onselect, onpublish, onsetlive }: Props = $props();
+
+	// One fixed width per column — identical on every row and in both dropdowns.
+	// Explicit PIXEL widths that hug the content (vN, 7-char SHA, dd/mm/yyyy
+	// hh:mm) — no rem sizing, no floating side padding.
+	const COL_VERSION = 'w-[16px] justify-end';
+	const COL_COMMIT = 'w-[44px] justify-end';
+	const COL_DATE = 'w-[88px]';
+	const COL_ACTION = 'w-[60px]';
+</script>
+
+<div
+	class="version-dropdown-row flex items-center gap-2 rounded px-2 py-1.5 w-max text-[10px] cursor-pointer {selected ? 'bg-emerald-50 text-emerald-800' : 'text-gray-700 hover:bg-gray-50'}"
+	role="option"
+	aria-selected={selected}
+	tabindex="0"
+	onclick={() => onselect?.()}
+	onkeydown={(e) => {
+		if (e.target !== e.currentTarget) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onselect?.();
+		}
+	}}
+>
+	<span class="{COL_VERSION} flex shrink-0 justify-end font-semibold tabular-nums {isDraft ? 'text-amber-600' : 'text-emerald-700'}">{versionLabel}</span>
+	{#if showCommit}
+		<span class="{COL_COMMIT} flex shrink-0 font-mono text-slate-400" title={commitSha ?? ''}>{commitSha ? commitSha.slice(0, 7) : '—'}</span>
+	{/if}
+	{#if isDraft}
+		<!-- DRAFT lives in the date slot — same column, same width, no date line. -->
+		<span
+			class="{COL_DATE} flex shrink-0 items-center justify-center rounded bg-amber-50 py-0.5 font-semibold uppercase tracking-wide text-amber-600"
+			title="Not published — preview only"
+		>Draft</span>
+	{:else}
+		<span class="{COL_DATE} flex shrink-0 items-center justify-start whitespace-nowrap tabular-nums text-slate-400">{dateLabel || '—'}</span>
+	{/if}
+	{#if isLive}
+		<span class="{COL_ACTION} flex shrink-0 items-center justify-center rounded bg-emerald-100 py-0.5 font-semibold uppercase tracking-wide text-emerald-600">live</span>
+	{:else if isDraft}
+		<HoverTooltip
+			text={publishDisabledReason || 'Build this draft version and make it the Live version'}
+			maxWidth={160}
+			class="inline-flex shrink-0"
+		>
+			<button
+				type="button"
+				class="{COL_ACTION} flex shrink-0 items-center justify-center rounded border border-emerald-600 bg-emerald-600 py-0.5 font-semibold uppercase tracking-wide text-white hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors"
+				disabled={busy || publishDisabled}
+				onclick={(e) => { e.stopPropagation(); onpublish?.(); }}
+			>{busy ? '...' : 'Publish'}</button>
+		</HoverTooltip>
+	{:else}
+		<button
+			type="button"
+			class="{COL_ACTION} flex shrink-0 items-center justify-center rounded border border-emerald-300 py-0.5 font-semibold uppercase tracking-wide text-emerald-700 hover:bg-emerald-100 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer transition-colors"
+			disabled={busy || setLiveDisabled}
+			onclick={(e) => { e.stopPropagation(); onsetlive?.(); }}
+		>{busy ? '...' : 'Set live'}</button>
+	{/if}
+</div>

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

@@ -0,0 +1,29 @@
+interface Props {
+    /** Version label shown in the first cell (e.g. "v2"). */
+    versionLabel: string;
+    /** Short commit sha (debug builds only; placeholder dash when missing). */
+    commitSha?: string | null;
+    /** Show the commit cell (debug mode). */
+    showCommit?: boolean;
+    /** Date label; the cell shows an em dash when missing. */
+    dateLabel?: string | null;
+    /** Row is the currently live version — LIVE badge in the action slot. */
+    isLive?: boolean;
+    /** Row is a draft — DRAFT badge replaces the date + Publish action. */
+    isDraft?: boolean;
+    /** Selected/highlighted row. */
+    selected?: boolean;
+    /** Publish/Set-live in flight. */
+    busy?: boolean;
+    /** Draft publish disabled (with tooltip reason when provided). */
+    publishDisabled?: boolean;
+    publishDisabledReason?: string | null;
+    /** Set-live disabled for this row. */
+    setLiveDisabled?: boolean;
+    onselect?: () => void;
+    onpublish?: () => void;
+    onsetlive?: () => void;
+}
+declare const VersionDropdownRow: import("svelte").Component<Props, {}, "">;
+type VersionDropdownRow = ReturnType<typeof VersionDropdownRow>;
+export default VersionDropdownRow;