@scenar/cli 0.5.0 → 0.6.0
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/example-bundle/assets/index-X3Nm5MDe.js +147 -0
- package/example-bundle/assets/style-CWnrc-9Z.css +1 -0
- package/example-bundle/index.html +2 -2
- package/example-bundle/pack-manifest.json +7 -7
- package/package.json +4 -4
- package/src/__tests__/pack-generate-embed-entry.test.ts +41 -4
- package/src/commands/pack.d.ts.map +1 -1
- package/src/commands/pack.js +3 -0
- package/src/commands/pack.js.map +1 -1
- package/src/commands/pack.ts +7 -0
- package/src/pack/generate-embed-entry.d.ts +16 -1
- package/src/pack/generate-embed-entry.d.ts.map +1 -1
- package/src/pack/generate-embed-entry.js +41 -7
- package/src/pack/generate-embed-entry.js.map +1 -1
- package/src/pack/generate-embed-entry.ts +50 -7
- package/src/pack/run-pack.d.ts +6 -0
- package/src/pack/run-pack.d.ts.map +1 -1
- package/src/pack/run-pack.js +3 -1
- package/src/pack/run-pack.js.map +1 -1
- package/src/pack/run-pack.ts +9 -1
- package/src/pack/viewport.d.ts +7 -1
- package/src/pack/viewport.d.ts.map +1 -1
- package/src/pack/viewport.js +7 -1
- package/src/pack/viewport.js.map +1 -1
- package/src/pack/viewport.ts +7 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/example-bundle/assets/index-BU7trbqC.js +0 -147
- package/example-bundle/assets/style-COSwl6WP.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@source "./**/*.js";@layer scenar{.scenar{--scenar-surface: #ffffff;--scenar-border: #e5e7eb;--scenar-foreground: #0f172a;--scenar-muted-foreground: #64748b;--scenar-card: #ffffff;--scenar-accent: #f1f5f9;--scenar-primary: #0f172a;--scenar-ring: #0f172a;--scenar-chrome: #202124;--scenar-chrome-raised: #35363a;--scenar-chrome-foreground: #bdc1c6;--scenar-cursor-stroke: #ffffff;--scenar-backdrop: linear-gradient(135deg, #e7ebf1 0%, #dde3ec 55%, #d3dae6 100%);--scenar-shadow-window: 0 24px 64px -16px rgb(15 23 42 / .35), 0 4px 16px -4px rgb(15 23 42 / .2);--scenar-radius-window: 10px}.scenar.dark{--scenar-surface: #0f172a;--scenar-border: #1e293b;--scenar-foreground: #f8fafc;--scenar-muted-foreground: #94a3b8;--scenar-card: #1e293b;--scenar-accent: #1e293b;--scenar-primary: #f8fafc;--scenar-ring: #f8fafc;--scenar-chrome: #202124;--scenar-chrome-raised: #35363a;--scenar-chrome-foreground: #bdc1c6;--scenar-cursor-stroke: #ffffff;--scenar-backdrop: linear-gradient(135deg, #16202f 0%, #101827 55%, #0b111d 100%);--scenar-shadow-window: 0 24px 64px -16px rgb(0 0 0 / .65), 0 4px 16px -4px rgb(0 0 0 / .4);--scenar-radius-window: 10px}}/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-neutral-900:oklch(20.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--drop-shadow-sm:0 1px 2px #00000026;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-foreground:var(--scenar-foreground);--color-border:var(--scenar-border)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-1{top:calc(var(--spacing) * 1)}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.-right-px{right:-1px}.right-0{right:calc(var(--spacing) * 0)}.-bottom-px{bottom:-1px}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-1{bottom:calc(var(--spacing) * 1)}.bottom-2{bottom:calc(var(--spacing) * 2)}.bottom-full{bottom:100%}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-0\.5{margin-right:calc(var(--spacing) * .5)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1{height:calc(var(--spacing) * 1)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-\[7px\]{height:7px}.h-\[14px\]{height:14px}.h-\[15px\]{height:15px}.h-full{height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-0\.5{width:calc(var(--spacing) * .5)}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-1\/3{width:33.3333%}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-\[3px\]{width:3px}.w-\[7px\]{width:7px}.w-\[14px\]{width:14px}.w-\[15px\]{width:15px}.w-\[42px\]{width:42px}.w-\[160px\]{width:160px}.w-full{width:100%}.w-px{width:1px}.max-w-4xl{max-width:var(--container-4xl)}.max-w-\[80\%\]{max-width:80%}.max-w-\[180px\]{max-width:180px}.max-w-\[200px\]{max-width:200px}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[2rem\]{min-width:2rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-2{--tw-translate-x:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-px{--tw-translate-x:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-2{--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-px{--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-\[5px\]{gap:5px}:where(.space-y-2\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-b-lg{border-bottom-right-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-\[\#1a1a1a\]{border-color:#1a1a1a}.border-\[\#1e1e1e\]{border-color:#1e1e1e}.border-\[\#2a2a2e\]{border-color:#2a2a2e}.border-\[\#2d2d2d\]{border-color:#2d2d2d}.border-\[\#3a3a3a\]{border-color:#3a3a3a}.border-\[\#3a3f47\]{border-color:#3a3f47}.border-\[\#3c4043\]{border-color:#3c4043}.border-\[\#007acc\]{border-color:#007acc}.border-\[\#ff6c37\]{border-color:#ff6c37}.border-\[var\(--scenar-border\)\],.border-border{border-color:var(--scenar-border)}.border-transparent{border-color:#0000}.bg-\[\#0b93f6\]{background-color:#0b93f6}.bg-\[\#1a1a1a\]{background-color:#1a1a1a}.bg-\[\#1a73e8\]{background-color:#1a73e8}.bg-\[\#1c1c1c\]{background-color:#1c1c1c}.bg-\[\#1e1e1e\]{background-color:#1e1e1e}.bg-\[\#2a2a2e\]{background-color:#2a2a2e}.bg-\[\#2c2c2c\]{background-color:#2c2c2c}.bg-\[\#2d2d2d\]{background-color:#2d2d2d}.bg-\[\#3b82f6\]{background-color:#3b82f6}.bg-\[\#3b82f6\]\/10{background-color:#3b82f61a}.bg-\[\#3b82f6\]\/15{background-color:#3b82f626}.bg-\[\#5f6368\]{background-color:#5f6368}.bg-\[\#007acc\]{background-color:#007acc}.bg-\[\#007acc\]\/10{background-color:#007acc1a}.bg-\[\#22c55e\]{background-color:#22c55e}.bg-\[\#22c55e\]\/15{background-color:#22c55e26}.bg-\[\#28c840\]{background-color:#28c840}.bg-\[\#94a3b8\]\/15{background-color:#94a3b826}.bg-\[\#181b1f\]{background-color:#181b1f}.bg-\[\#999\]{background-color:#999}.bg-\[\#3274d9\]{background-color:#3274d9}.bg-\[\#04395e\]{background-color:#04395e}.bg-\[\#6366f1\]{background-color:#6366f1}.bg-\[\#111217\]{background-color:#111217}.bg-\[\#202124\]{background-color:#202124}.bg-\[\#252526\]{background-color:#252526}.bg-\[\#323232\]{background-color:#323232}.bg-\[\#323233\]{background-color:#323233}.bg-\[\#333333\]{background-color:#333}.bg-\[\#404040\]{background-color:#404040}.bg-\[\#eab308\]\/15{background-color:#eab30826}.bg-\[\#ef4444\]\/15{background-color:#ef444426}.bg-\[\#febc2e\]{background-color:#febc2e}.bg-\[\#ff5f57\]{background-color:#ff5f57}.bg-\[var\(--scenar-accent\)\]{background-color:var(--scenar-accent)}.bg-\[var\(--scenar-card\)\]{background-color:var(--scenar-card)}.bg-\[var\(--scenar-chrome\)\]{background-color:var(--scenar-chrome)}.bg-\[var\(--scenar-chrome-raised\)\]{background-color:var(--scenar-chrome-raised)}.bg-\[var\(--scenar-surface\)\]{background-color:var(--scenar-surface)}.bg-black{background-color:var(--color-black)}.bg-black\/30{background-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.bg-black\/30{background-color:color-mix(in oklab,var(--color-black) 30%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab,red,red)){.bg-black\/60{background-color:color-mix(in oklab,var(--color-black) 60%,transparent)}}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab,red,red)){.bg-black\/70{background-color:color-mix(in oklab,var(--color-black) 70%,transparent)}}.bg-card{background-color:var(--scenar-card)}.bg-primary\/25{background-color:var(--scenar-primary)}@supports (color:color-mix(in lab,red,red)){.bg-primary\/25{background-color:color-mix(in oklab,var(--scenar-primary) 25%,transparent)}}.bg-white{background-color:var(--color-white)}.bg-white\/30{background-color:#ffffff4d}@supports (color:color-mix(in lab,red,red)){.bg-white\/30{background-color:color-mix(in oklab,var(--color-white) 30%,transparent)}}.bg-white\/80{background-color:#fffc}@supports (color:color-mix(in lab,red,red)){.bg-white\/80{background-color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white) 90%,transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[\#6366f1\]{--tw-gradient-from:#6366f1;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\[\#ff6600\]{--tw-gradient-from:#f60;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-black\/60{--tw-gradient-from:#0009}@supports (color:color-mix(in lab,red,red)){.from-black\/60{--tw-gradient-from:color-mix(in oklab, var(--color-black) 60%, transparent)}}.from-black\/60{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/25{--tw-gradient-via:#00000040}@supports (color:color-mix(in lab,red,red)){.via-black\/25{--tw-gradient-via:color-mix(in oklab, var(--color-black) 25%, transparent)}}.via-black\/25{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[\#8b5cf6\]{--tw-gradient-to:#8b5cf6;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-\[\#f5a623\]{--tw-gradient-to:#f5a623;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-\[2px\]{padding-block:2px}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-1\.5{padding-top:calc(var(--spacing) * 1.5)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-\[10px\]{padding-top:10px}.pt-\[14px\]{padding-top:14px}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-1\.5{padding-bottom:calc(var(--spacing) * 1.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-1{padding-left:calc(var(--spacing) * 1)}.pl-1\.5{padding-left:calc(var(--spacing) * 1.5)}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[8px\]{font-size:8px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.leading-\[1\.6\]{--tw-leading:1.6;line-height:1.6}.leading-\[18px\]{--tw-leading:18px;line-height:18px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-pre{white-space:pre}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#3b82f6\]{color:#3b82f6}.text-\[\#5f6368\]{color:#5f6368}.text-\[\#6e7681\]{color:#6e7681}.text-\[\#9aa0a6\]{color:#9aa0a6}.text-\[\#9d9d9d\]{color:#9d9d9d}.text-\[\#22c55e\]{color:#22c55e}.text-\[\#50fa7b\]{color:#50fa7b}.text-\[\#94a3b8\]{color:#94a3b8}.text-\[\#519aba\]{color:#519aba}.text-\[\#666\]{color:#666}.text-\[\#888\]{color:#888}.text-\[\#64748b\]{color:#64748b}.text-\[\#666666\]{color:#666}.text-\[\#858585\]{color:#858585}.text-\[\#a0a0a0\]{color:#a0a0a0}.text-\[\#bd93f9\]{color:#bd93f9}.text-\[\#bdc1c6\]{color:#bdc1c6}.text-\[\#c6c6c6\]{color:#c6c6c6}.text-\[\#cccccc\]{color:#ccc}.text-\[\#d4d4d4\]{color:#d4d4d4}.text-\[\#dcb67a\]{color:#dcb67a}.text-\[\#e8e8e8\]{color:#e8e8e8}.text-\[\#e8eaed\]{color:#e8eaed}.text-\[\#e6995b\]{color:#e6995b}.text-\[\#eab308\]{color:#eab308}.text-\[\#ef4444\]{color:#ef4444}.text-\[\#f8f8f2\]{color:#f8f8f2}.text-\[\#f8f8f2\]\/70{color:#f8f8f2b3}.text-\[\#ff5555\]{color:#f55}.text-\[\#ffffff\]{color:#fff}.text-\[var\(--scenar-chrome-foreground\)\]{color:var(--scenar-chrome-foreground)}.text-\[var\(--scenar-foreground\)\]{color:var(--scenar-foreground)}.text-\[var\(--scenar-muted-foreground\)\]{color:var(--scenar-muted-foreground)}.text-foreground{color:var(--scenar-foreground)}.text-muted-foreground{color:var(--scenar-muted-foreground)}.text-neutral-900{color:var(--color-neutral-900)}.text-primary{color:var(--scenar-primary)}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){.text-white\/70{color:color-mix(in oklab,var(--color-white) 70%,transparent)}}.text-white\/75{color:#ffffffbf}@supports (color:color-mix(in lab,red,red)){.text-white\/75{color:color-mix(in oklab,var(--color-white) 75%,transparent)}}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_6px_18px_rgba\(0\,0\,0\,0\.3\)\]{--tw-shadow:0 6px 18px var(--tw-shadow-color,#0000004d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-\[0_8px_24px_rgba\(0\,0\,0\,0\.35\)\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#00000059);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-black\/10{--tw-ring-color:#0000001a}@supports (color:color-mix(in lab,red,red)){.ring-black\/10{--tw-ring-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.drop-shadow-sm{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-sm));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[height\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:h-1\.5:hover{height:calc(var(--spacing) * 1.5)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:bg-accent:hover{background-color:var(--scenar-accent)}.hover\:text-white:hover{color:var(--color-white)}}}@layer scenar{.scenar{--scenar-surface:#fff;--scenar-border:#e5e7eb;--scenar-foreground:#0f172a;--scenar-muted-foreground:#64748b;--scenar-card:#fff;--scenar-accent:#f1f5f9;--scenar-primary:#0f172a;--scenar-ring:#0f172a;--scenar-chrome:#202124;--scenar-chrome-raised:#35363a;--scenar-chrome-foreground:#bdc1c6;--scenar-cursor-stroke:#fff;--scenar-backdrop:linear-gradient(135deg, #e7ebf1 0%, #dde3ec 55%, #d3dae6 100%);--scenar-shadow-window:0 24px 64px -16px #0f172a59, 0 4px 16px -4px #0f172a33;--scenar-radius-window:10px}.scenar.dark{--scenar-surface:#0f172a;--scenar-border:#1e293b;--scenar-foreground:#f8fafc;--scenar-muted-foreground:#94a3b8;--scenar-card:#1e293b;--scenar-accent:#1e293b;--scenar-primary:#f8fafc;--scenar-ring:#f8fafc;--scenar-chrome:#202124;--scenar-chrome-raised:#35363a;--scenar-chrome-foreground:#bdc1c6;--scenar-cursor-stroke:#fff;--scenar-backdrop:linear-gradient(135deg, #16202f 0%, #101827 55%, #0b111d 100%);--scenar-shadow-window:0 24px 64px -16px #000000a6, 0 4px 16px -4px #0006;--scenar-radius-window:10px}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
<style>
|
|
9
9
|
html, body { margin: 0; background: transparent; }
|
|
10
10
|
</style>
|
|
11
|
-
<script type="module" crossorigin src="./assets/index-
|
|
12
|
-
<link rel="stylesheet" crossorigin href="./assets/style-
|
|
11
|
+
<script type="module" crossorigin src="./assets/index-X3Nm5MDe.js"></script>
|
|
12
|
+
<link rel="stylesheet" crossorigin href="./assets/style-CWnrc-9Z.css">
|
|
13
13
|
</head>
|
|
14
14
|
<body>
|
|
15
15
|
<div id="root"></div>
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
"scenarioId": "welcome-tour",
|
|
4
4
|
"files": [
|
|
5
5
|
{
|
|
6
|
-
"path": "assets/index-
|
|
7
|
-
"sha256": "
|
|
8
|
-
"sizeBytes":
|
|
6
|
+
"path": "assets/index-X3Nm5MDe.js",
|
|
7
|
+
"sha256": "815a6df22464d21c241eb4900f2d534d257b06a12d77c56e8d85f9668ff0807a",
|
|
8
|
+
"sizeBytes": 376626,
|
|
9
9
|
"contentType": "text/javascript"
|
|
10
10
|
},
|
|
11
11
|
{
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"contentType": "image/png"
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
|
-
"path": "assets/style-
|
|
19
|
-
"sha256": "
|
|
20
|
-
"sizeBytes":
|
|
18
|
+
"path": "assets/style-CWnrc-9Z.css",
|
|
19
|
+
"sha256": "d5529aab0ba8f8b276e79934f36298f76db19c95d7f0f9f36fa62d9bdd441fc9",
|
|
20
|
+
"sizeBytes": 33634,
|
|
21
21
|
"contentType": "text/css"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
"path": "index.html",
|
|
31
|
-
"sha256": "
|
|
31
|
+
"sha256": "02c1ae5994b37ad026198f51cfb2ba323a696be77f01ac32da1703c13be6e86c",
|
|
32
32
|
"sizeBytes": 533,
|
|
33
33
|
"contentType": "text/html"
|
|
34
34
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scenar/cli",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Scenar CLI — validate scenarios, generate narration, and render videos.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@scenar/core": "0.
|
|
43
|
-
"@scenar/embed": "0.
|
|
44
|
-
"@scenar/sdk": "0.
|
|
42
|
+
"@scenar/core": "0.6.0",
|
|
43
|
+
"@scenar/embed": "0.6.0",
|
|
44
|
+
"@scenar/sdk": "0.6.0",
|
|
45
45
|
"commander": "^13.0.0",
|
|
46
46
|
"yaml": "^2.7.0"
|
|
47
47
|
},
|
|
@@ -22,6 +22,24 @@ describe("generateEmbedEntry", () => {
|
|
|
22
22
|
expect(src).toContain('getElementById("root")');
|
|
23
23
|
});
|
|
24
24
|
|
|
25
|
+
it("wraps step content in ScenarioStage only when stage is requested", () => {
|
|
26
|
+
const plain = generateEmbedEntry({ ...BASE, hasNarration: false, providersPath: null });
|
|
27
|
+
expect(plain).not.toContain("ScenarioStage");
|
|
28
|
+
|
|
29
|
+
const staged = generateEmbedEntry({
|
|
30
|
+
...BASE,
|
|
31
|
+
hasNarration: false,
|
|
32
|
+
providersPath: null,
|
|
33
|
+
stage: true,
|
|
34
|
+
});
|
|
35
|
+
expect(staged).toContain("ScenarioStage");
|
|
36
|
+
// The stage wraps the step's content inside the camera, not the player
|
|
37
|
+
// chrome: it lives in the render prop.
|
|
38
|
+
expect(staged).toContain(
|
|
39
|
+
"<ScenarioStage>{renderStep(data, stepIndex)}</ScenarioStage>",
|
|
40
|
+
);
|
|
41
|
+
});
|
|
42
|
+
|
|
25
43
|
it("imports the interaction primitives + React hooks the embed wiring needs", () => {
|
|
26
44
|
const src = generateEmbedEntry({ ...BASE, hasNarration: false, providersPath: null });
|
|
27
45
|
expect(src).toContain('import { useCallback, useRef, useState } from "react";');
|
|
@@ -42,13 +60,21 @@ describe("generateEmbedEntry", () => {
|
|
|
42
60
|
expect(src).toContain("useStepInteractions({");
|
|
43
61
|
expect(src).toContain("setCursorTarget: _setCursorTarget,");
|
|
44
62
|
expect(src).toContain("setViewportTransform: _setViewport,");
|
|
63
|
+
expect(src).toContain("cameraRef: _cameraRef,");
|
|
45
64
|
expect(src).toContain("steps: _steps,");
|
|
46
|
-
//
|
|
47
|
-
//
|
|
48
|
-
|
|
65
|
+
// The cursor lives INSIDE the camera layer with the camera's contentRef as
|
|
66
|
+
// its container, so it scales and pans with the content during viewport
|
|
67
|
+
// transitions — the documented contract on ViewportTransformLayer.
|
|
68
|
+
expect(src).toContain(
|
|
69
|
+
"<ViewportTransformLayer transform={_viewport} contentRef={_cameraRef}>",
|
|
70
|
+
);
|
|
49
71
|
expect(src).toContain(
|
|
50
|
-
"<Cursor target={_cursorTarget} containerRef={
|
|
72
|
+
"<Cursor target={_cursorTarget} containerRef={_cameraRef} showRipple={_showRipple} isDragging={_dragging} />",
|
|
51
73
|
);
|
|
74
|
+
const cursorIndex = src.indexOf("<Cursor ");
|
|
75
|
+
const layerCloseIndex = src.indexOf("</ViewportTransformLayer>");
|
|
76
|
+
expect(cursorIndex).toBeGreaterThan(-1);
|
|
77
|
+
expect(cursorIndex).toBeLessThan(layerCloseIndex);
|
|
52
78
|
});
|
|
53
79
|
|
|
54
80
|
it("feeds the narration manifest into the interaction scheduler when present", () => {
|
|
@@ -161,5 +187,16 @@ describe("generateEmbedHtml", () => {
|
|
|
161
187
|
const html = generateEmbedHtml("welcome-tour", "entry.tsx");
|
|
162
188
|
expect(html).toContain('<meta name="color-scheme" content="light dark" />');
|
|
163
189
|
expect(html).toContain("html, body { margin: 0; background: transparent; }");
|
|
190
|
+
expect(html).not.toContain("light-dark(");
|
|
191
|
+
});
|
|
192
|
+
|
|
193
|
+
it("pre-paints the scheme-matched backdrop when staged, before any script runs", () => {
|
|
194
|
+
// A staged embed trades the transparent canvas for the stage backdrop.
|
|
195
|
+
// The static pre-paint prevents a backdrop flash at script load and must
|
|
196
|
+
// key off the propagated color scheme, never a pinned one.
|
|
197
|
+
const html = generateEmbedHtml("welcome-tour", "entry.tsx", true);
|
|
198
|
+
expect(html).toContain("light-dark(");
|
|
199
|
+
expect(html).toContain('<meta name="color-scheme" content="light dark" />');
|
|
200
|
+
expect(html).not.toContain("colorScheme");
|
|
164
201
|
});
|
|
165
202
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pack.d.ts","sourceRoot":"","sources":["../../../src/commands/pack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"pack.d.ts","sourceRoot":"","sources":["../../../src/commands/pack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAkBpC,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAuD1D"}
|
package/src/commands/pack.js
CHANGED
|
@@ -24,6 +24,8 @@ export function registerPackCommand(program) {
|
|
|
24
24
|
.option("--out <path>", "output directory for the bundle")
|
|
25
25
|
.option("--width <number>", `canonical viewport width in px (default: ${DEFAULT_WIDTH})`, String(DEFAULT_WIDTH))
|
|
26
26
|
.option("--shell-height <number>", `shell height in px (default: ${DEFAULT_SHELL_HEIGHT})`, String(DEFAULT_SHELL_HEIGHT))
|
|
27
|
+
.option("--stage", "float the scenario on a backdrop with a window shadow (screen-recording framing); " +
|
|
28
|
+
"the embed paints its own background instead of staying transparent")
|
|
27
29
|
.option("--keep-temp", "keep the generated entry directory for debugging")
|
|
28
30
|
.action(async (dir, options) => {
|
|
29
31
|
try {
|
|
@@ -32,6 +34,7 @@ export function registerPackCommand(program) {
|
|
|
32
34
|
outDir: options.out,
|
|
33
35
|
width: Number(options.width) || DEFAULT_WIDTH,
|
|
34
36
|
shellHeight: Number(options.shellHeight) || DEFAULT_SHELL_HEIGHT,
|
|
37
|
+
stage: options.stage ?? false,
|
|
35
38
|
keepTemp: options.keepTemp,
|
|
36
39
|
onLog: (message) => process.stderr.write(`${message}\n`),
|
|
37
40
|
});
|
package/src/commands/pack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pack.js","sourceRoot":"","sources":["../../../src/commands/pack.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,yEAAyE;AACzE,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC;AAE7C,0CAA0C;AAC1C,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"pack.js","sourceRoot":"","sources":["../../../src/commands/pack.ts"],"names":[],"mappings":"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"}
|
package/src/commands/pack.ts
CHANGED
|
@@ -12,6 +12,7 @@ interface PackOptions {
|
|
|
12
12
|
out?: string;
|
|
13
13
|
width?: string;
|
|
14
14
|
shellHeight?: string;
|
|
15
|
+
stage?: boolean;
|
|
15
16
|
keepTemp?: boolean;
|
|
16
17
|
}
|
|
17
18
|
|
|
@@ -41,6 +42,11 @@ export function registerPackCommand(program: Command): void {
|
|
|
41
42
|
`shell height in px (default: ${DEFAULT_SHELL_HEIGHT})`,
|
|
42
43
|
String(DEFAULT_SHELL_HEIGHT),
|
|
43
44
|
)
|
|
45
|
+
.option(
|
|
46
|
+
"--stage",
|
|
47
|
+
"float the scenario on a backdrop with a window shadow (screen-recording framing); " +
|
|
48
|
+
"the embed paints its own background instead of staying transparent",
|
|
49
|
+
)
|
|
44
50
|
.option("--keep-temp", "keep the generated entry directory for debugging")
|
|
45
51
|
.action(async (dir: string, options: PackOptions) => {
|
|
46
52
|
try {
|
|
@@ -49,6 +55,7 @@ export function registerPackCommand(program: Command): void {
|
|
|
49
55
|
outDir: options.out,
|
|
50
56
|
width: Number(options.width) || DEFAULT_WIDTH,
|
|
51
57
|
shellHeight: Number(options.shellHeight) || DEFAULT_SHELL_HEIGHT,
|
|
58
|
+
stage: options.stage ?? false,
|
|
52
59
|
keepTemp: options.keepTemp,
|
|
53
60
|
onLog: (message) => process.stderr.write(`${message}\n`),
|
|
54
61
|
});
|
|
@@ -19,6 +19,12 @@ export interface EmbedEntryInput {
|
|
|
19
19
|
canonicalWidth: number;
|
|
20
20
|
/** Shell height in px, exposed as --scenar-shell-height. */
|
|
21
21
|
shellHeight: number;
|
|
22
|
+
/**
|
|
23
|
+
* Wrap each step's content in `<ScenarioStage>` (backdrop + window shadow),
|
|
24
|
+
* and paint the backdrop in the static HTML so it shows before the entry
|
|
25
|
+
* script runs. Opt-in: staged embeds give up the transparent canvas.
|
|
26
|
+
*/
|
|
27
|
+
stage?: boolean;
|
|
22
28
|
}
|
|
23
29
|
/**
|
|
24
30
|
* Produce the TypeScript source for the browser entry that mounts a scenario as
|
|
@@ -59,6 +65,15 @@ export declare function generateEmbedEntry(input: EmbedEntryInput): string;
|
|
|
59
65
|
* opaque white canvas — the historical "white band under the embed".) The
|
|
60
66
|
* margin reset guards against a host stylesheet-less load; the entry paints a
|
|
61
67
|
* theme surface only when the page is top-level (see generateEmbedEntry).
|
|
68
|
+
*
|
|
69
|
+
* Staged embeds (`--stage`) deliberately trade that transparency away: the
|
|
70
|
+
* scenario floats on a backdrop, so the page pre-paints the same backdrop in
|
|
71
|
+
* static CSS — before the entry script runs — and there is no flash when the
|
|
72
|
+
* React-rendered stage takes over. `light-dark()` keys the pre-paint to the
|
|
73
|
+
* propagated color scheme; the values mirror `--scenar-backdrop` in
|
|
74
|
+
* @scenar/react's theme/tokens.css (the token itself is not loadable before
|
|
75
|
+
* the script, so keep the two in sync when retuning the backdrop). Do NOT
|
|
76
|
+
* pin `colorScheme` here either — the `light dark` meta stays authoritative.
|
|
62
77
|
*/
|
|
63
|
-
export declare function generateEmbedHtml(scenarioId: string, entryFileName: string): string;
|
|
78
|
+
export declare function generateEmbedHtml(scenarioId: string, entryFileName: string, stage?: boolean): string;
|
|
64
79
|
//# sourceMappingURL=generate-embed-entry.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate-embed-entry.d.ts","sourceRoot":"","sources":["../../../src/pack/generate-embed-entry.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,gEAAgE;IAChE,UAAU,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,YAAY,EAAE,OAAO,CAAC;IACtB,+DAA+D;IAC/D,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,sEAAsE;IACtE,cAAc,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"generate-embed-entry.d.ts","sourceRoot":"","sources":["../../../src/pack/generate-embed-entry.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,gEAAgE;IAChE,UAAU,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,YAAY,EAAE,OAAO,CAAC;IACtB,+DAA+D;IAC/D,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,sEAAsE;IACtE,cAAc,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAkLjE;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,KAAK,UAAQ,GACZ,MAAM,CA+BR"}
|
|
@@ -43,6 +43,8 @@ export function generateEmbedEntry(input) {
|
|
|
43
43
|
"ViewportTransformLayer",
|
|
44
44
|
"VIEWPORT_TRANSFORM_IDENTITY",
|
|
45
45
|
];
|
|
46
|
+
if (input.stage)
|
|
47
|
+
reactImports.push("ScenarioStage");
|
|
46
48
|
if (input.hasNarration)
|
|
47
49
|
reactImports.push("useNarrationManifest");
|
|
48
50
|
lines.push(`import { ${reactImports.join(", ")} } from "@scenar/react";`);
|
|
@@ -109,11 +111,15 @@ export function generateEmbedEntry(input) {
|
|
|
109
111
|
lines.push(`}`);
|
|
110
112
|
// --- App tree ---
|
|
111
113
|
// The structure mirrors the in-app demo wiring exactly (see DemoViewport's
|
|
112
|
-
//
|
|
114
|
+
// and ViewportTransformLayer's contracts):
|
|
113
115
|
// DemoViewport(containerRef)
|
|
114
|
-
// └ ViewportTransformLayer(transform)
|
|
116
|
+
// └ ViewportTransformLayer(transform, contentRef=cameraRef)
|
|
115
117
|
// └ ScenarioPlayer(embed, onStepChange)
|
|
116
|
-
//
|
|
118
|
+
// └ Cursor(target, containerRef=cameraRef) ← child of the camera
|
|
119
|
+
// The cursor lives INSIDE the camera so it scales and pans with the content
|
|
120
|
+
// during viewport transitions — like a recorded pointer under a camera zoom.
|
|
121
|
+
// Both the cursor and the viewport-transition target math take the camera's
|
|
122
|
+
// contentRef so canonical coordinates stay correct at any camera state.
|
|
117
123
|
// `useStepInteractions` reads the current step's `interactions` and drives the
|
|
118
124
|
// cursor / ripple / drag / viewport state, synced to narration duration.
|
|
119
125
|
const manifestExpr = input.hasNarration ? "_manifest" : "undefined";
|
|
@@ -123,6 +129,7 @@ export function generateEmbedEntry(input) {
|
|
|
123
129
|
lines.push(` const _manifest = useNarrationManifest(${JSON.stringify(input.scenarioId)}, _resolveManifestUrl);`);
|
|
124
130
|
}
|
|
125
131
|
lines.push(` const _containerRef = useRef<HTMLDivElement>(null);`);
|
|
132
|
+
lines.push(` const _cameraRef = useRef<HTMLDivElement>(null);`);
|
|
126
133
|
lines.push(` const [_stepIndex, _setStepIndex] = useState(0);`);
|
|
127
134
|
lines.push(` const [_cursorTarget, _setCursorTarget] = useState<string | undefined>(undefined);`);
|
|
128
135
|
lines.push(` const [_showRipple, _setShowRipple] = useState(true);`);
|
|
@@ -140,6 +147,7 @@ export function generateEmbedEntry(input) {
|
|
|
140
147
|
lines.push(` stepIndex: _stepIndex,`);
|
|
141
148
|
lines.push(` narrationManifest: ${manifestExpr},`);
|
|
142
149
|
lines.push(` containerRef: _containerRef,`);
|
|
150
|
+
lines.push(` cameraRef: _cameraRef,`);
|
|
143
151
|
lines.push(` setCursorTarget: _setCursorTarget,`);
|
|
144
152
|
lines.push(` setShowRipple: _setShowRipple,`);
|
|
145
153
|
lines.push(` setDragging: _setDragging,`);
|
|
@@ -157,13 +165,19 @@ export function generateEmbedEntry(input) {
|
|
|
157
165
|
lines.push(` return (`);
|
|
158
166
|
lines.push(` <div className={_rootClass}>`);
|
|
159
167
|
lines.push(` ${open}`);
|
|
168
|
+
// Staged embeds wrap each step's content — not the player chrome — in the
|
|
169
|
+
// stage, inside the camera, so a zoom scales the whole recording, backdrop
|
|
170
|
+
// included, while controls keep overlaying the stable content box.
|
|
171
|
+
const stepRender = input.stage
|
|
172
|
+
? `{(data: any, stepIndex: number) => <ScenarioStage>{renderStep(data, stepIndex)}</ScenarioStage>}`
|
|
173
|
+
: `{(data: any, stepIndex: number) => renderStep(data, stepIndex)}`;
|
|
160
174
|
lines.push(` <DemoViewport containerRef={_containerRef} canonicalWidth={${input.canonicalWidth}} shellHeight={${input.shellHeight}}>`);
|
|
161
|
-
lines.push(` <ViewportTransformLayer transform={_viewport}>`);
|
|
175
|
+
lines.push(` <ViewportTransformLayer transform={_viewport} contentRef={_cameraRef}>`);
|
|
162
176
|
lines.push(` <ScenarioPlayer bundle={_bundle} embed onStepChange={_handleStepChange}>`);
|
|
163
|
-
lines.push(` {
|
|
177
|
+
lines.push(` ${stepRender}`);
|
|
164
178
|
lines.push(` </ScenarioPlayer>`);
|
|
179
|
+
lines.push(` <Cursor target={_cursorTarget} containerRef={_cameraRef} showRipple={_showRipple} isDragging={_dragging} />`);
|
|
165
180
|
lines.push(` </ViewportTransformLayer>`);
|
|
166
|
-
lines.push(` <Cursor target={_cursorTarget} containerRef={_containerRef} showRipple={_showRipple} isDragging={_dragging} />`);
|
|
167
181
|
lines.push(` </DemoViewport>`);
|
|
168
182
|
lines.push(` ${close}`);
|
|
169
183
|
lines.push(` </div>`);
|
|
@@ -192,8 +206,27 @@ export function generateEmbedEntry(input) {
|
|
|
192
206
|
* opaque white canvas — the historical "white band under the embed".) The
|
|
193
207
|
* margin reset guards against a host stylesheet-less load; the entry paints a
|
|
194
208
|
* theme surface only when the page is top-level (see generateEmbedEntry).
|
|
209
|
+
*
|
|
210
|
+
* Staged embeds (`--stage`) deliberately trade that transparency away: the
|
|
211
|
+
* scenario floats on a backdrop, so the page pre-paints the same backdrop in
|
|
212
|
+
* static CSS — before the entry script runs — and there is no flash when the
|
|
213
|
+
* React-rendered stage takes over. `light-dark()` keys the pre-paint to the
|
|
214
|
+
* propagated color scheme; the values mirror `--scenar-backdrop` in
|
|
215
|
+
* @scenar/react's theme/tokens.css (the token itself is not loadable before
|
|
216
|
+
* the script, so keep the two in sync when retuning the backdrop). Do NOT
|
|
217
|
+
* pin `colorScheme` here either — the `light dark` meta stays authoritative.
|
|
195
218
|
*/
|
|
196
|
-
export function generateEmbedHtml(scenarioId, entryFileName) {
|
|
219
|
+
export function generateEmbedHtml(scenarioId, entryFileName, stage = false) {
|
|
220
|
+
const bodyBackground = stage
|
|
221
|
+
? [
|
|
222
|
+
` body {`,
|
|
223
|
+
` background: light-dark(`,
|
|
224
|
+
` linear-gradient(135deg, #e7ebf1 0%, #dde3ec 55%, #d3dae6 100%),`,
|
|
225
|
+
` linear-gradient(135deg, #16202f 0%, #101827 55%, #0b111d 100%)`,
|
|
226
|
+
` );`,
|
|
227
|
+
` }`,
|
|
228
|
+
]
|
|
229
|
+
: [];
|
|
197
230
|
return [
|
|
198
231
|
`<!doctype html>`,
|
|
199
232
|
`<html lang="en">`,
|
|
@@ -204,6 +237,7 @@ export function generateEmbedHtml(scenarioId, entryFileName) {
|
|
|
204
237
|
` <title>${escapeHtml(scenarioId)}</title>`,
|
|
205
238
|
` <style>`,
|
|
206
239
|
` html, body { margin: 0; background: transparent; }`,
|
|
240
|
+
...bodyBackground,
|
|
207
241
|
` </style>`,
|
|
208
242
|
` </head>`,
|
|
209
243
|
` <body>`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generate-embed-entry.js","sourceRoot":"","sources":["../../../src/pack/generate-embed-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"generate-embed-entry.js","sourceRoot":"","sources":["../../../src/pack/generate-embed-entry.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,6 +21,12 @@ export interface EmbedEntryInput {
|
|
|
21
21
|
canonicalWidth: number;
|
|
22
22
|
/** Shell height in px, exposed as --scenar-shell-height. */
|
|
23
23
|
shellHeight: number;
|
|
24
|
+
/**
|
|
25
|
+
* Wrap each step's content in `<ScenarioStage>` (backdrop + window shadow),
|
|
26
|
+
* and paint the backdrop in the static HTML so it shows before the entry
|
|
27
|
+
* script runs. Opt-in: staged embeds give up the transparent canvas.
|
|
28
|
+
*/
|
|
29
|
+
stage?: boolean;
|
|
24
30
|
}
|
|
25
31
|
|
|
26
32
|
/**
|
|
@@ -69,6 +75,7 @@ export function generateEmbedEntry(input: EmbedEntryInput): string {
|
|
|
69
75
|
"ViewportTransformLayer",
|
|
70
76
|
"VIEWPORT_TRANSFORM_IDENTITY",
|
|
71
77
|
];
|
|
78
|
+
if (input.stage) reactImports.push("ScenarioStage");
|
|
72
79
|
if (input.hasNarration) reactImports.push("useNarrationManifest");
|
|
73
80
|
lines.push(`import { ${reactImports.join(", ")} } from "@scenar/react";`);
|
|
74
81
|
lines.push(`import "@scenar/react/theme.css";`);
|
|
@@ -142,11 +149,15 @@ export function generateEmbedEntry(input: EmbedEntryInput): string {
|
|
|
142
149
|
|
|
143
150
|
// --- App tree ---
|
|
144
151
|
// The structure mirrors the in-app demo wiring exactly (see DemoViewport's
|
|
145
|
-
//
|
|
152
|
+
// and ViewportTransformLayer's contracts):
|
|
146
153
|
// DemoViewport(containerRef)
|
|
147
|
-
// └ ViewportTransformLayer(transform)
|
|
154
|
+
// └ ViewportTransformLayer(transform, contentRef=cameraRef)
|
|
148
155
|
// └ ScenarioPlayer(embed, onStepChange)
|
|
149
|
-
//
|
|
156
|
+
// └ Cursor(target, containerRef=cameraRef) ← child of the camera
|
|
157
|
+
// The cursor lives INSIDE the camera so it scales and pans with the content
|
|
158
|
+
// during viewport transitions — like a recorded pointer under a camera zoom.
|
|
159
|
+
// Both the cursor and the viewport-transition target math take the camera's
|
|
160
|
+
// contentRef so canonical coordinates stay correct at any camera state.
|
|
150
161
|
// `useStepInteractions` reads the current step's `interactions` and drives the
|
|
151
162
|
// cursor / ripple / drag / viewport state, synced to narration duration.
|
|
152
163
|
const manifestExpr = input.hasNarration ? "_manifest" : "undefined";
|
|
@@ -156,6 +167,7 @@ export function generateEmbedEntry(input: EmbedEntryInput): string {
|
|
|
156
167
|
lines.push(` const _manifest = useNarrationManifest(${JSON.stringify(input.scenarioId)}, _resolveManifestUrl);`);
|
|
157
168
|
}
|
|
158
169
|
lines.push(` const _containerRef = useRef<HTMLDivElement>(null);`);
|
|
170
|
+
lines.push(` const _cameraRef = useRef<HTMLDivElement>(null);`);
|
|
159
171
|
lines.push(` const [_stepIndex, _setStepIndex] = useState(0);`);
|
|
160
172
|
lines.push(` const [_cursorTarget, _setCursorTarget] = useState<string | undefined>(undefined);`);
|
|
161
173
|
lines.push(` const [_showRipple, _setShowRipple] = useState(true);`);
|
|
@@ -173,6 +185,7 @@ export function generateEmbedEntry(input: EmbedEntryInput): string {
|
|
|
173
185
|
lines.push(` stepIndex: _stepIndex,`);
|
|
174
186
|
lines.push(` narrationManifest: ${manifestExpr},`);
|
|
175
187
|
lines.push(` containerRef: _containerRef,`);
|
|
188
|
+
lines.push(` cameraRef: _cameraRef,`);
|
|
176
189
|
lines.push(` setCursorTarget: _setCursorTarget,`);
|
|
177
190
|
lines.push(` setShowRipple: _setShowRipple,`);
|
|
178
191
|
lines.push(` setDragging: _setDragging,`);
|
|
@@ -190,13 +203,19 @@ export function generateEmbedEntry(input: EmbedEntryInput): string {
|
|
|
190
203
|
lines.push(` return (`);
|
|
191
204
|
lines.push(` <div className={_rootClass}>`);
|
|
192
205
|
lines.push(` ${open}`);
|
|
206
|
+
// Staged embeds wrap each step's content — not the player chrome — in the
|
|
207
|
+
// stage, inside the camera, so a zoom scales the whole recording, backdrop
|
|
208
|
+
// included, while controls keep overlaying the stable content box.
|
|
209
|
+
const stepRender = input.stage
|
|
210
|
+
? `{(data: any, stepIndex: number) => <ScenarioStage>{renderStep(data, stepIndex)}</ScenarioStage>}`
|
|
211
|
+
: `{(data: any, stepIndex: number) => renderStep(data, stepIndex)}`;
|
|
193
212
|
lines.push(` <DemoViewport containerRef={_containerRef} canonicalWidth={${input.canonicalWidth}} shellHeight={${input.shellHeight}}>`);
|
|
194
|
-
lines.push(` <ViewportTransformLayer transform={_viewport}>`);
|
|
213
|
+
lines.push(` <ViewportTransformLayer transform={_viewport} contentRef={_cameraRef}>`);
|
|
195
214
|
lines.push(` <ScenarioPlayer bundle={_bundle} embed onStepChange={_handleStepChange}>`);
|
|
196
|
-
lines.push(` {
|
|
215
|
+
lines.push(` ${stepRender}`);
|
|
197
216
|
lines.push(` </ScenarioPlayer>`);
|
|
217
|
+
lines.push(` <Cursor target={_cursorTarget} containerRef={_cameraRef} showRipple={_showRipple} isDragging={_dragging} />`);
|
|
198
218
|
lines.push(` </ViewportTransformLayer>`);
|
|
199
|
-
lines.push(` <Cursor target={_cursorTarget} containerRef={_containerRef} showRipple={_showRipple} isDragging={_dragging} />`);
|
|
200
219
|
lines.push(` </DemoViewport>`);
|
|
201
220
|
lines.push(` ${close}`);
|
|
202
221
|
lines.push(` </div>`);
|
|
@@ -228,8 +247,31 @@ export function generateEmbedEntry(input: EmbedEntryInput): string {
|
|
|
228
247
|
* opaque white canvas — the historical "white band under the embed".) The
|
|
229
248
|
* margin reset guards against a host stylesheet-less load; the entry paints a
|
|
230
249
|
* theme surface only when the page is top-level (see generateEmbedEntry).
|
|
250
|
+
*
|
|
251
|
+
* Staged embeds (`--stage`) deliberately trade that transparency away: the
|
|
252
|
+
* scenario floats on a backdrop, so the page pre-paints the same backdrop in
|
|
253
|
+
* static CSS — before the entry script runs — and there is no flash when the
|
|
254
|
+
* React-rendered stage takes over. `light-dark()` keys the pre-paint to the
|
|
255
|
+
* propagated color scheme; the values mirror `--scenar-backdrop` in
|
|
256
|
+
* @scenar/react's theme/tokens.css (the token itself is not loadable before
|
|
257
|
+
* the script, so keep the two in sync when retuning the backdrop). Do NOT
|
|
258
|
+
* pin `colorScheme` here either — the `light dark` meta stays authoritative.
|
|
231
259
|
*/
|
|
232
|
-
export function generateEmbedHtml(
|
|
260
|
+
export function generateEmbedHtml(
|
|
261
|
+
scenarioId: string,
|
|
262
|
+
entryFileName: string,
|
|
263
|
+
stage = false,
|
|
264
|
+
): string {
|
|
265
|
+
const bodyBackground = stage
|
|
266
|
+
? [
|
|
267
|
+
` body {`,
|
|
268
|
+
` background: light-dark(`,
|
|
269
|
+
` linear-gradient(135deg, #e7ebf1 0%, #dde3ec 55%, #d3dae6 100%),`,
|
|
270
|
+
` linear-gradient(135deg, #16202f 0%, #101827 55%, #0b111d 100%)`,
|
|
271
|
+
` );`,
|
|
272
|
+
` }`,
|
|
273
|
+
]
|
|
274
|
+
: [];
|
|
233
275
|
return [
|
|
234
276
|
`<!doctype html>`,
|
|
235
277
|
`<html lang="en">`,
|
|
@@ -240,6 +282,7 @@ export function generateEmbedHtml(scenarioId: string, entryFileName: string): st
|
|
|
240
282
|
` <title>${escapeHtml(scenarioId)}</title>`,
|
|
241
283
|
` <style>`,
|
|
242
284
|
` html, body { margin: 0; background: transparent; }`,
|
|
285
|
+
...bodyBackground,
|
|
243
286
|
` </style>`,
|
|
244
287
|
` </head>`,
|
|
245
288
|
` <body>`,
|
package/src/pack/run-pack.d.ts
CHANGED
|
@@ -9,6 +9,12 @@ export interface RunPackOptions {
|
|
|
9
9
|
readonly width?: number;
|
|
10
10
|
/** Shell/container height in px (default: {@link DEFAULT_VIEWPORT}.height). */
|
|
11
11
|
readonly shellHeight?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Float the scenario on a backdrop with a window shadow (screen-recording
|
|
14
|
+
* framing). Opt-in: a staged embed paints its own background, giving up
|
|
15
|
+
* the default transparent canvas that lets the host page show through.
|
|
16
|
+
*/
|
|
17
|
+
readonly stage?: boolean;
|
|
12
18
|
/** Keep the generated entry directory for debugging (default: false). */
|
|
13
19
|
readonly keepTemp?: boolean;
|
|
14
20
|
/** Progress sink for mid-operation messages. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"run-pack.d.ts","sourceRoot":"","sources":["../../../src/pack/run-pack.ts"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAM5B,kFAAkF;AAClF,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,+EAA+E;IAC/E,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,gDAAgD;IAChD,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wCAAwC;AACxC,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAsB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"run-pack.d.ts","sourceRoot":"","sources":["../../../src/pack/run-pack.ts"],"names":[],"mappings":"AAOA,OAAO,EAKL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAM5B,kFAAkF;AAClF,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yEAAyE;IACzE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,gFAAgF;IAChF,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,+EAA+E;IAC/E,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,gDAAgD;IAChD,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,wCAAwC;AACxC,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAsB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CA2F1E"}
|
package/src/pack/run-pack.js
CHANGED
|
@@ -43,6 +43,7 @@ export async function runPack(options) {
|
|
|
43
43
|
onLog(`Narration: ${hasNarration ? "yes (manifest found)" : "none"}`);
|
|
44
44
|
onLog(`Output: ${outDir}`);
|
|
45
45
|
// 1. Generate the browser entry + index.html into the temp dir.
|
|
46
|
+
const stage = options.stage ?? false;
|
|
46
47
|
const entrySource = generateEmbedEntry({
|
|
47
48
|
scenarioDir,
|
|
48
49
|
renderFilePath,
|
|
@@ -51,12 +52,13 @@ export async function runPack(options) {
|
|
|
51
52
|
providersPath,
|
|
52
53
|
canonicalWidth: width,
|
|
53
54
|
shellHeight,
|
|
55
|
+
stage,
|
|
54
56
|
});
|
|
55
57
|
await mkdir(tempDir, { recursive: true });
|
|
56
58
|
const entryFileName = "entry.tsx";
|
|
57
59
|
const entryHtmlPath = join(tempDir, "index.html");
|
|
58
60
|
await writeFile(join(tempDir, entryFileName), entrySource, "utf-8");
|
|
59
|
-
await writeFile(entryHtmlPath, generateEmbedHtml(scenarioId, entryFileName), "utf-8");
|
|
61
|
+
await writeFile(entryHtmlPath, generateEmbedHtml(scenarioId, entryFileName, stage), "utf-8");
|
|
60
62
|
// 2. Build the static bundle with Vite.
|
|
61
63
|
onLog("Bundling embed with Vite...");
|
|
62
64
|
await runViteBuild({ root: tempDir, outDir, entryHtmlPath });
|