@widgetic/creator 0.3.59 → 0.3.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CreatorApp.svelte +1952 -339
- package/dist/components/HoverTooltip.svelte +8 -2
- package/dist/components/HoverTooltip.svelte.d.ts +5 -0
- package/dist/components/VersionDropdownRow.svelte +101 -0
- package/dist/components/VersionDropdownRow.svelte.d.ts +29 -0
- package/dist/components/WidgetDetails.svelte +10 -34
- package/dist/components/WidgetDetails.svelte.d.ts +1 -0
- package/dist/components/WidgetShapeLivePreviews.svelte +704 -60
- package/dist/components/WidgetShapeLivePreviews.svelte.d.ts +91 -35
- package/dist/utils/versionPreviewError.d.ts +9 -0
- package/dist/utils/versionPreviewError.js +19 -0
- package/package.json +1 -1
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
let className = '';
|
|
6
6
|
export { className as class };
|
|
7
7
|
export let style = '';
|
|
8
|
+
/**
|
|
9
|
+
* Optional max width (px) for the bubble. When set, the tooltip wraps onto
|
|
10
|
+
* multiple lines instead of one long single line — used for tooltips that
|
|
11
|
+
* need a short explanation rather than a label.
|
|
12
|
+
*/
|
|
13
|
+
export let maxWidth: number | null = null;
|
|
8
14
|
|
|
9
15
|
let triggerEl: HTMLElement | null = null;
|
|
10
16
|
let open = false;
|
|
@@ -46,8 +52,8 @@
|
|
|
46
52
|
{#if open && text}
|
|
47
53
|
<Portal target={portalTarget}>
|
|
48
54
|
<div
|
|
49
|
-
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-
|
|
50
|
-
style="top: {tipTop}px; left: {tipLeft}px;"
|
|
55
|
+
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'}"
|
|
56
|
+
style="top: {tipTop}px; left: {tipLeft}px;{maxWidth ? ` max-width: ${maxWidth}px;` : ''}"
|
|
51
57
|
role="tooltip"
|
|
52
58
|
>
|
|
53
59
|
{text}
|
|
@@ -20,6 +20,11 @@ declare const HoverTooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pr
|
|
|
20
20
|
text?: string;
|
|
21
21
|
class?: string;
|
|
22
22
|
style?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Optional max width (px) for the bubble. When set, the tooltip wraps onto
|
|
25
|
+
* multiple lines instead of one long single line — used for tooltips that
|
|
26
|
+
* need a short explanation rather than a label.
|
|
27
|
+
*/ maxWidth?: number | null;
|
|
23
28
|
}, {
|
|
24
29
|
default: {};
|
|
25
30
|
}>, {
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* VersionDropdownRow — the ONE row used by BOTH version dropdowns (chat
|
|
4
|
+
* history panel and widget-shape preview menu), so the columns can never
|
|
5
|
+
* drift apart again:
|
|
6
|
+
* vN (fixed) | commit (debug only) | date OR DRAFT badge (same slot) | action (fixed)
|
|
7
|
+
* A Draft replaces the date with its DRAFT badge (no date, no line under
|
|
8
|
+
* it); LIVE sits in the action slot with the exact width of PUBLISH, so
|
|
9
|
+
* the right edge lines up across every row.
|
|
10
|
+
*/
|
|
11
|
+
import HoverTooltip from './HoverTooltip.svelte';
|
|
12
|
+
|
|
13
|
+
interface Props {
|
|
14
|
+
/** Version label shown in the first cell (e.g. "v2"). */
|
|
15
|
+
versionLabel: string;
|
|
16
|
+
/** Short commit sha (debug builds only; placeholder dash when missing). */
|
|
17
|
+
commitSha?: string | null;
|
|
18
|
+
/** Show the commit cell (debug mode). */
|
|
19
|
+
showCommit?: boolean;
|
|
20
|
+
/** Date label; the cell shows an em dash when missing. */
|
|
21
|
+
dateLabel?: string | null;
|
|
22
|
+
/** Row is the currently live version — LIVE badge in the action slot. */
|
|
23
|
+
isLive?: boolean;
|
|
24
|
+
/** Row is a draft — DRAFT badge replaces the date + Publish action. */
|
|
25
|
+
isDraft?: boolean;
|
|
26
|
+
/** Selected/highlighted row. */
|
|
27
|
+
selected?: boolean;
|
|
28
|
+
/** Publish/Set-live in flight. */
|
|
29
|
+
busy?: boolean;
|
|
30
|
+
/** Draft publish disabled (with tooltip reason when provided). */
|
|
31
|
+
publishDisabled?: boolean;
|
|
32
|
+
publishDisabledReason?: string | null;
|
|
33
|
+
/** Set-live disabled for this row. */
|
|
34
|
+
setLiveDisabled?: boolean;
|
|
35
|
+
onselect?: () => void;
|
|
36
|
+
onpublish?: () => void;
|
|
37
|
+
onsetlive?: () => void;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
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();
|
|
41
|
+
|
|
42
|
+
// One fixed width per column — identical on every row and in both dropdowns.
|
|
43
|
+
// Widths hug the content (vN, 7-char SHA, dd/mm/yyyy hh:mm) so the badges
|
|
44
|
+
// DRAFT/LIVE/PUBLISH sit right next to the date instead of floating.
|
|
45
|
+
const COL_VERSION = 'w-7 justify-end';
|
|
46
|
+
const COL_COMMIT = 'w-12 justify-end';
|
|
47
|
+
const COL_DATE = 'w-[6.5rem] justify-center';
|
|
48
|
+
const COL_ACTION = 'w-[4.75rem]';
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<div
|
|
52
|
+
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'}"
|
|
53
|
+
role="option"
|
|
54
|
+
aria-selected={selected}
|
|
55
|
+
tabindex="0"
|
|
56
|
+
onclick={() => onselect?.()}
|
|
57
|
+
onkeydown={(e) => {
|
|
58
|
+
if (e.target !== e.currentTarget) return;
|
|
59
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
60
|
+
e.preventDefault();
|
|
61
|
+
onselect?.();
|
|
62
|
+
}
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
<span class="{COL_VERSION} flex shrink-0 justify-end font-semibold tabular-nums {isDraft ? 'text-amber-600' : 'text-emerald-700'}">{versionLabel}</span>
|
|
66
|
+
{#if showCommit}
|
|
67
|
+
<span class="{COL_COMMIT} flex shrink-0 font-mono text-slate-400" title={commitSha ?? ''}>{commitSha ? commitSha.slice(0, 7) : '—'}</span>
|
|
68
|
+
{/if}
|
|
69
|
+
{#if isDraft}
|
|
70
|
+
<!-- DRAFT lives in the date slot — same column, same width, no date line. -->
|
|
71
|
+
<span
|
|
72
|
+
class="{COL_DATE} flex shrink-0 items-center rounded bg-amber-50 py-0.5 font-semibold uppercase tracking-wide text-amber-600"
|
|
73
|
+
title="Not published — preview only"
|
|
74
|
+
>Draft</span>
|
|
75
|
+
{:else}
|
|
76
|
+
<span class="{COL_DATE} flex shrink-0 items-center whitespace-nowrap tabular-nums text-slate-400">{dateLabel || '—'}</span>
|
|
77
|
+
{/if}
|
|
78
|
+
{#if isLive}
|
|
79
|
+
<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>
|
|
80
|
+
{:else if isDraft}
|
|
81
|
+
<HoverTooltip
|
|
82
|
+
text={publishDisabledReason || 'Build this draft version and make it the Live version'}
|
|
83
|
+
maxWidth={160}
|
|
84
|
+
class="inline-flex shrink-0"
|
|
85
|
+
>
|
|
86
|
+
<button
|
|
87
|
+
type="button"
|
|
88
|
+
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"
|
|
89
|
+
disabled={busy || publishDisabled}
|
|
90
|
+
onclick={(e) => { e.stopPropagation(); onpublish?.(); }}
|
|
91
|
+
>{busy ? '...' : 'Publish'}</button>
|
|
92
|
+
</HoverTooltip>
|
|
93
|
+
{:else}
|
|
94
|
+
<button
|
|
95
|
+
type="button"
|
|
96
|
+
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"
|
|
97
|
+
disabled={busy || setLiveDisabled}
|
|
98
|
+
onclick={(e) => { e.stopPropagation(); onsetlive?.(); }}
|
|
99
|
+
>{busy ? '...' : 'Set live'}</button>
|
|
100
|
+
{/if}
|
|
101
|
+
</div>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
/** Version label shown in the first cell (e.g. "v2"). */
|
|
3
|
+
versionLabel: string;
|
|
4
|
+
/** Short commit sha (debug builds only; placeholder dash when missing). */
|
|
5
|
+
commitSha?: string | null;
|
|
6
|
+
/** Show the commit cell (debug mode). */
|
|
7
|
+
showCommit?: boolean;
|
|
8
|
+
/** Date label; the cell shows an em dash when missing. */
|
|
9
|
+
dateLabel?: string | null;
|
|
10
|
+
/** Row is the currently live version — LIVE badge in the action slot. */
|
|
11
|
+
isLive?: boolean;
|
|
12
|
+
/** Row is a draft — DRAFT badge replaces the date + Publish action. */
|
|
13
|
+
isDraft?: boolean;
|
|
14
|
+
/** Selected/highlighted row. */
|
|
15
|
+
selected?: boolean;
|
|
16
|
+
/** Publish/Set-live in flight. */
|
|
17
|
+
busy?: boolean;
|
|
18
|
+
/** Draft publish disabled (with tooltip reason when provided). */
|
|
19
|
+
publishDisabled?: boolean;
|
|
20
|
+
publishDisabledReason?: string | null;
|
|
21
|
+
/** Set-live disabled for this row. */
|
|
22
|
+
setLiveDisabled?: boolean;
|
|
23
|
+
onselect?: () => void;
|
|
24
|
+
onpublish?: () => void;
|
|
25
|
+
onsetlive?: () => void;
|
|
26
|
+
}
|
|
27
|
+
declare const VersionDropdownRow: import("svelte").Component<Props, {}, "">;
|
|
28
|
+
type VersionDropdownRow = ReturnType<typeof VersionDropdownRow>;
|
|
29
|
+
export default VersionDropdownRow;
|
|
@@ -3496,9 +3496,15 @@
|
|
|
3496
3496
|
{/if}
|
|
3497
3497
|
|
|
3498
3498
|
<div
|
|
3499
|
-
class="widget-details-
|
|
3499
|
+
class="widget-details-header-actions relative z-[1] ml-auto flex items-center gap-2 shrink-0"
|
|
3500
3500
|
bind:this={widgetDetailsDebugButtonsEl}
|
|
3501
3501
|
>
|
|
3502
|
+
<div class="widget-details-header-meta flex items-center gap-2 shrink-0 min-w-0">
|
|
3503
|
+
<slot name="header-meta" />
|
|
3504
|
+
<div class="widget-info-version-history-slot relative z-20 shrink-0">
|
|
3505
|
+
<slot name="version-history" />
|
|
3506
|
+
</div>
|
|
3507
|
+
</div>
|
|
3502
3508
|
{#if SHOW_PANEL_PREVIEW_COLUMN}
|
|
3503
3509
|
<HoverTooltip text={previewColumnCollapsed ? 'Open live preview' : 'Close live preview'}>
|
|
3504
3510
|
<button
|
|
@@ -3533,7 +3539,7 @@
|
|
|
3533
3539
|
</div>
|
|
3534
3540
|
|
|
3535
3541
|
<!-- Widget Details Content: Two-column layout -->
|
|
3536
|
-
<div class="widget-details-content-wrapper relative m-
|
|
3542
|
+
<div class="widget-details-content-wrapper relative m-0 min-w-[460px] min-h-0 flex-1 overflow-hidden">
|
|
3537
3543
|
<div class="widget-details-two-col flex h-full min-h-0 min-w-[460px] gap-0 overflow-hidden">
|
|
3538
3544
|
|
|
3539
3545
|
<!-- ═══ LEFT COLUMN: Step Content (scrollable) ═══ -->
|
|
@@ -3541,43 +3547,13 @@
|
|
|
3541
3547
|
class="widget-details-left-col flex flex-col min-w-[460px] min-h-0 overflow-hidden relative"
|
|
3542
3548
|
style="width: {previewColumnCollapsed ? 100 : leftColPercent}%; flex: 0 0 {previewColumnCollapsed ? 100 : leftColPercent}%;"
|
|
3543
3549
|
>
|
|
3544
|
-
<div class="widget-details-left-border absolute inset-y-0 left-0 right-0 border border-gray-300 rounded-
|
|
3550
|
+
<div class="widget-details-left-border absolute inset-y-0 left-0 right-0 border border-gray-300 rounded-none pointer-events-none z-10"></div>
|
|
3545
3551
|
|
|
3546
3552
|
{#if selectedWidgetId}
|
|
3547
3553
|
<div class="widget-details-left-stack relative z-0 flex flex-col h-full min-h-0 min-w-[460px] overflow-hidden">
|
|
3548
|
-
<!-- Sticky Widget Info Bar (always visible above scrollable content) -->
|
|
3549
|
-
<div class="widget-info-sticky-bar relative flex items-center justify-between px-3 py-1.5 border-b border-gray-200 bg-gray-50 rounded-t-lg shrink-0 gap-2 min-w-0 z-20 overflow-visible">
|
|
3550
|
-
<div class="widget-info-name flex items-center min-w-0 gap-1 text-sm text-gray-700">
|
|
3551
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
3552
|
-
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
3553
|
-
<span
|
|
3554
|
-
class="widget-id-label text-[11px] font-mono text-gray-500 cursor-pointer hover:text-gray-700 truncate"
|
|
3555
|
-
title="Click to copy widget ID"
|
|
3556
|
-
onclick={() => { navigator.clipboard.writeText(selectedWidgetId); showToast('success', 'Widget ID copied', { duration: 2000 }); }}
|
|
3557
|
-
>Widget id: {selectedWidgetId}</span>
|
|
3558
|
-
</div>
|
|
3559
|
-
<div class="widget-info-meta flex items-center gap-2 shrink-0">
|
|
3560
|
-
{#if saveStatus === 'saving'}
|
|
3561
|
-
<span class="text-[10px] px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 animate-pulse">Saving...</span>
|
|
3562
|
-
{:else if saveStatus === 'saved'}
|
|
3563
|
-
<span class="text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-700">Saved</span>
|
|
3564
|
-
{:else if saveStatus === 'error'}
|
|
3565
|
-
<span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-700">Save Error</span>
|
|
3566
|
-
{/if}
|
|
3567
|
-
{#if debugMode}
|
|
3568
|
-
<span class="text-[10px] text-gray-500">
|
|
3569
|
-
Commit: <span class="font-mono font-medium text-gray-600" title={lastCommitId || ''}>{lastCommitId ? lastCommitId.substring(0, 8) : '—'}</span>
|
|
3570
|
-
</span>
|
|
3571
|
-
{/if}
|
|
3572
|
-
<div class="widget-info-version-history-slot relative z-20 shrink-0">
|
|
3573
|
-
<slot name="version-history" />
|
|
3574
|
-
</div>
|
|
3575
|
-
</div>
|
|
3576
|
-
</div>
|
|
3577
|
-
|
|
3578
3554
|
<!-- Scrollable step content -->
|
|
3579
3555
|
<div
|
|
3580
|
-
class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-
|
|
3556
|
+
class="widget-details-left-content flex flex-col flex-1 min-h-0 relative rounded-none overflow-hidden overflow-x-hidden"
|
|
3581
3557
|
bind:this={contentContainerEl}
|
|
3582
3558
|
>
|
|
3583
3559
|
<div class="actions-panel widget-details-actions-panel relative flex flex-col flex-1 min-h-0">
|