@sphynxoid/stepwise 0.1.0 → 0.3.0

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.3.3 | 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-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme;@layer base{:where([data-stepwise],[data-stepwise] *),:where([data-stepwise],[data-stepwise] *):before,:where([data-stepwise],[data-stepwise] *):after{box-sizing:border-box;border:0 solid;margin:0;padding:0}:where([data-stepwise] button,button[data-stepwise]){font:inherit;letter-spacing:inherit;color:inherit;appearance:none;background-color:#0000;border-radius:0}:where([data-stepwise] h3,[data-stepwise] p){font-size:inherit;font-weight:inherit}:where([data-stepwise] kbd,[data-stepwise] code){font-family:var(--stepwise-font-mono,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace)}:where([data-stepwise]){color:var(--stepwise-foreground)}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.top-20{top:5rem}.bottom-6{bottom:1.5rem}.left-1\/2{left:50%}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-8{margin-top:2rem}.mt-16{margin-top:4rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.h-1\.5{height:.375rem}.h-3\.5{height:.875rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.w-1\.5{width:.375rem}.w-11{width:2.75rem}.w-72{width:18rem}.w-\[min\(92vw\,26rem\)\]{width:min(92vw,26rem)}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-\[calc\(100vw-1rem\)\]{max-width:calc(100vw - 1rem)}.max-w-md{max-width:28rem}.min-w-0{min-width:0}.min-w-\[3px\]{min-width:3px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-y-150{--tw-scale-y:150%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-mt-40{scroll-margin-top:10rem}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-\[2px\]{gap:2px}.gap-\[3px\]{gap:3px}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem * 2) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-10{column-gap:2.5rem}.gap-y-8{row-gap:2rem}.overflow-x-auto{overflow-x:auto}.rounded-\[2px\]{border-radius:2px}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dotted{--tw-border-style:dotted;border-style:dotted}.border-accent\/40{border-color:var(--stepwise-accent)}@supports (color:color-mix(in lab, red, red)){.border-accent\/40{border-color:color-mix(in oklab, var(--stepwise-accent) 40%, transparent)}}.border-destructive\/40{border-color:var(--stepwise-destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/40{border-color:color-mix(in oklab, var(--stepwise-destructive) 40%, transparent)}}.border-primary,.border-primary\/30{border-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/30{border-color:color-mix(in oklab, var(--stepwise-primary) 30%, transparent)}}.border-primary\/40{border-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/40{border-color:color-mix(in oklab, var(--stepwise-primary) 40%, transparent)}}.border-primary\/50{border-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/50{border-color:color-mix(in oklab, var(--stepwise-primary) 50%, transparent)}}.border-transparent{border-color:#0000}.border-white\/10{border-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--stepwise-foreground) 10%, transparent)}}.border-white\/15{border-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--stepwise-foreground) 15%, transparent)}}.border-white\/20{border-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab, var(--stepwise-foreground) 20%, transparent)}}.bg-accent\/70{background-color:var(--stepwise-accent)}@supports (color:color-mix(in lab, red, red)){.bg-accent\/70{background-color:color-mix(in oklab, var(--stepwise-accent) 70%, transparent)}}.bg-background\/40{background-color:var(--stepwise-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/40{background-color:color-mix(in oklab, var(--stepwise-background) 40%, transparent)}}.bg-background\/85{background-color:var(--stepwise-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/85{background-color:color-mix(in oklab, var(--stepwise-background) 85%, transparent)}}.bg-background\/95{background-color:var(--stepwise-background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/95{background-color:color-mix(in oklab, var(--stepwise-background) 95%, transparent)}}.bg-black\/40{background-color:var(--stepwise-shade)}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab, var(--stepwise-shade) 40%, transparent)}}.bg-black\/70{background-color:var(--stepwise-shade)}@supports (color:color-mix(in lab, red, red)){.bg-black\/70{background-color:color-mix(in oklab, var(--stepwise-shade) 70%, transparent)}}.bg-card{background-color:var(--stepwise-card)}.bg-destructive\/70{background-color:var(--stepwise-destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/70{background-color:color-mix(in oklab, var(--stepwise-destructive) 70%, transparent)}}.bg-foreground\/30{background-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-foreground\/30{background-color:color-mix(in oklab, var(--stepwise-foreground) 30%, transparent)}}.bg-popover{background-color:var(--stepwise-popover)}.bg-primary,.bg-primary\/5{background-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--stepwise-primary) 5%, transparent)}}.bg-primary\/10{background-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--stepwise-primary) 10%, transparent)}}.bg-primary\/90{background-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/90{background-color:color-mix(in oklab, var(--stepwise-primary) 90%, transparent)}}.bg-white\/5{background-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--stepwise-foreground) 5%, transparent)}}.bg-white\/10{background-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--stepwise-foreground) 10%, transparent)}}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1\.5{padding-inline:.375rem}.px-2{padding-inline:.5rem}.px-2\.5{padding-inline:.625rem}.px-3{padding-inline:.75rem}.px-3\.5{padding-inline:.875rem}.px-4{padding-inline:1rem}.py-0\.5{padding-block:.125rem}.py-1{padding-block:.25rem}.py-2{padding-block:.5rem}.pt-1\.5{padding-top:.375rem}.pt-3{padding-top:.75rem}.pt-10{padding-top:2.5rem}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-lg{font-size:1.125rem;line-height:var(--tw-leading,calc(1.75 / 1.125))}.text-sm{font-size:.875rem;line-height:var(--tw-leading,calc(1.25 / .875))}.text-xs{font-size:.75rem;line-height:var(--tw-leading,calc(1 / .75))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.leading-5{--tw-leading:calc(.25rem * 5);line-height:1.25rem}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:1.625;line-height:1.625}.font-bold{--tw-font-weight:700;font-weight:700}.tracking-widest{--tw-tracking:.1em;letter-spacing:.1em}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.text-accent{color:var(--stepwise-accent)}.text-destructive{color:var(--stepwise-destructive)}.text-foreground\/25{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/25{color:color-mix(in oklab, var(--stepwise-foreground) 25%, transparent)}}.text-foreground\/30{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/30{color:color-mix(in oklab, var(--stepwise-foreground) 30%, transparent)}}.text-foreground\/35{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/35{color:color-mix(in oklab, var(--stepwise-foreground) 35%, transparent)}}.text-foreground\/40{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/40{color:color-mix(in oklab, var(--stepwise-foreground) 40%, transparent)}}.text-foreground\/45{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/45{color:color-mix(in oklab, var(--stepwise-foreground) 45%, transparent)}}.text-foreground\/50{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/50{color:color-mix(in oklab, var(--stepwise-foreground) 50%, transparent)}}.text-foreground\/55{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/55{color:color-mix(in oklab, var(--stepwise-foreground) 55%, transparent)}}.text-foreground\/60{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/60{color:color-mix(in oklab, var(--stepwise-foreground) 60%, transparent)}}.text-foreground\/70{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--stepwise-foreground) 70%, transparent)}}.text-foreground\/80{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--stepwise-foreground) 80%, transparent)}}.text-foreground\/85{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/85{color:color-mix(in oklab, var(--stepwise-foreground) 85%, transparent)}}.text-foreground\/95{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/95{color:color-mix(in oklab, var(--stepwise-foreground) 95%, transparent)}}.text-primary{color:var(--stepwise-primary)}.text-primary-foreground{color:var(--stepwise-primary-foreground)}.text-primary\/70{color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.text-primary\/70{color:color-mix(in oklab, var(--stepwise-primary) 70%, transparent)}}.text-primary\/80{color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.text-primary\/80{color:color-mix(in oklab, var(--stepwise-primary) 80%, transparent)}}.text-primary\/90{color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.text-primary\/90{color:color-mix(in oklab, var(--stepwise-primary) 90%, transparent)}}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);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)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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-primary,.ring-primary\/80{--tw-ring-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/80{--tw-ring-color:color-mix(in oklab, var(--stepwise-primary) 80%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.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,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\:border-primary\/70:hover{border-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/70:hover{border-color:color-mix(in oklab, var(--stepwise-primary) 70%, transparent)}}.hover\:border-white\/15:hover{border-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/15:hover{border-color:color-mix(in oklab, var(--stepwise-foreground) 15%, transparent)}}.hover\:bg-primary:hover{background-color:var(--stepwise-primary)}.hover\:bg-white\/5:hover{background-color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab, var(--stepwise-foreground) 5%, transparent)}}.hover\:text-foreground:hover{color:var(--stepwise-foreground)}.hover\:text-primary:hover{color:var(--stepwise-primary)}}.focus-visible\:text-primary:focus-visible{color:var(--stepwise-primary)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + 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)}.focus-visible\:ring-primary\/60:focus-visible{--tw-ring-color:var(--stepwise-primary)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-primary\/60:focus-visible{--tw-ring-color:color-mix(in oklab, var(--stepwise-primary) 60%, transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--stepwise-ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--stepwise-ring) 50%, transparent)}}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}}@media (prefers-reduced-motion:reduce){.motion-reduce\:transition-none{transition-property:none}}@media (min-width:48rem){.md\:top-24{top:6rem}.md\:inline{display:inline}}@media (min-width:80rem){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.\[\&_a\]\:text-accent a{color:var(--stepwise-accent)}.\[\&_a\]\:underline a{text-decoration-line:underline}.\[\&_a\]\:underline-offset-4 a{text-underline-offset:4px}.\[\&_strong\]\:text-foreground\/80 strong{color:var(--stepwise-foreground)}@supports (color:color-mix(in lab, red, red)){.\[\&_strong\]\:text-foreground\/80 strong{color:color-mix(in oklab, var(--stepwise-foreground) 80%, transparent)}}}:where(:root){--stepwise-background:#f8fafd;--stepwise-foreground:#101828;--stepwise-card:#fff;--stepwise-popover:#fff;--stepwise-primary:#2563eb;--stepwise-primary-foreground:#fff;--stepwise-accent:#059669;--stepwise-destructive:#d92d20;--stepwise-ring:#2563eb;--stepwise-shade:#94a3b8}@media (prefers-color-scheme:dark){:where(:root){--stepwise-background:#0a0e1a;--stepwise-foreground:#e9eef8;--stepwise-card:#101626;--stepwise-popover:#131a2c;--stepwise-primary:#6aa2ff;--stepwise-primary-foreground:#071021;--stepwise-accent:#71e58f;--stepwise-destructive:#ff6b62;--stepwise-ring:#6aa2ff;--stepwise-shade:#000}}:where(.dark,[data-theme=dark]){--stepwise-background:#0a0e1a;--stepwise-foreground:#e9eef8;--stepwise-card:#101626;--stepwise-popover:#131a2c;--stepwise-primary:#6aa2ff;--stepwise-primary-foreground:#071021;--stepwise-accent:#71e58f;--stepwise-destructive:#ff6b62;--stepwise-ring:#6aa2ff;--stepwise-shade:#000}:where(.light,[data-theme=light]){--stepwise-background:#f8fafd;--stepwise-foreground:#101828;--stepwise-card:#fff;--stepwise-popover:#fff;--stepwise-primary:#2563eb;--stepwise-primary-foreground:#fff;--stepwise-accent:#059669;--stepwise-destructive:#d92d20;--stepwise-ring:#2563eb;--stepwise-shade:#94a3b8}@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-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}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{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-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}

package/dist/{types-CPf9ZD_Z.d.ts → types-CNMxISXe.d.ts}

@@ -1,12 +1,43 @@
 import { ReactNode } from 'react';
 
+type VerdictStatus = "pass" | "fail" | "pending";
+interface Verdict {
+    status: VerdictStatus;
+    /** What to tell the reader: why it failed, a hint, a "nice!". */
+    feedback?: ReactNode;
+}
+type EvaluatorResult = boolean | Verdict;
+/**
+ * Judge `ctx`. May be async (run the reader's code, ask a server); the
+ * `signal` aborts when the result is no longer wanted (the context changed,
+ * the component unmounted), so long checks can stop early.
+ */
+type Evaluator<Ctx> = (ctx: Ctx, signal: AbortSignal) => EvaluatorResult | Promise<EvaluatorResult>;
+/** Normalize a boolean or verdict into a verdict. */
+declare function toVerdict(result: EvaluatorResult): Verdict;
+declare const pass: (feedback?: ReactNode) => Verdict;
+declare const fail: (feedback?: ReactNode) => Verdict;
+declare const pending: (feedback?: ReactNode) => Verdict;
+
 type StepTone = "neutral" | "accent" | "good" | "bad" | "write" | "idle";
-interface StepwiseStep {
+/**
+ * One frame of a trace. `Data` carries the consumer's domain payload (array
+ * snapshots, highlighted slots, …) alongside the presentation fields, so a
+ * trace is a single typed array: `StepwiseStep<{ arr: number[] }>[]`.
+ */
+type StepwiseStep<Data extends object = Record<never, never>> = {
     tone: StepTone;
     label: string;
     code?: string[];
     note?: string;
-}
+    /**
+     * Stable identity of this step across re-runs ("pass 2, compare j=3").
+     * When a trace is recomputed — new input, new seed — `useTrace` keeps the
+     * playhead on the step with the same key instead of the same index. Keys
+     * should be unique within a trace.
+     */
+    key?: string;
+} & Data;
 interface TourStepInput {
     id?: string;
     title: string;
@@ -21,11 +52,14 @@ interface TourStepInput {
      */
     when?: () => boolean;
     /**
-     * Guard: while it returns false, `next()` is a no-op and the tour reports
-     * `blocked` — "do this before continuing". Only restricts `next`;
-     * goto/gotoId remain free (programmatic navigation).
+     * Guard: while it doesn't pass, `next()` is a no-op and the tour reports
+     * `blocked` — "do this before continuing". Return a boolean, or a
+     * `Verdict` to also say what's missing (surfaced as the tour's
+     * `feedback`). Only restricts `next`; goto/gotoId remain free
+     * (programmatic navigation). For async checks, run `useEvaluator` and
+     * return its `passed` here.
      */
-    gate?: () => boolean;
+    gate?: () => EvaluatorResult;
     /**
      * Edge override: advance to the step with this id instead of index+1.
      * Return null (or omit) for linear order. Enables branching and loops;
@@ -85,4 +119,4 @@ interface TourDriver {
     hide(): void;
 }
 
-export type { Chapter as C, PlayerEngine as P, StepTone as S, TourDriver as T, TourStepInput as a, ShortcutItem as b, PlayerEngineApi as c, PlayerEngineHandle as d, StepwiseStep as e, TourContext as f };
+export { type Chapter as C, type Evaluator as E, type PlayerEngine as P, type StepwiseStep as S, type TourDriver as T, type VerdictStatus as V, type StepTone as a, type Verdict as b, type TourStepInput as c, type ShortcutItem as d, type EvaluatorResult as e, type PlayerEngineApi as f, type PlayerEngineHandle as g, type TourContext as h, fail as i, pending as j, pass as p, toVerdict as t };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphynxoid/stepwise",
-  "version": "0.1.0",
-  "description": "A kit for interactive, narrated, step-driven visualizations — one primitive (useSteps) at every scale.",
+  "version": "0.3.0",
+  "description": "React hooks and components for interactive explainers: step-through algorithm players, guided product tours, scroll-driven lessons and glossary tooltips, all on one cursor.",
   "license": "MIT",
   "author": "The Sphynx <jmail.hamza@gmail.com>",
   "homepage": "https://github.com/TheSphynxoid/stepwise#readme",
@@ -12,18 +12,26 @@
   "bugs": "https://github.com/TheSphynxoid/stepwise/issues",
   "keywords": [
     "react",
-    "hooks",
-    "step",
-    "player",
-    "tour",
+    "react-hooks",
+    "explorable-explanations",
+    "interactive-explainer",
+    "algorithm-visualization",
+    "step-player",
+    "stepper",
+    "walkthrough",
     "guided-tour",
+    "product-tour",
+    "onboarding",
     "scrollytelling",
+    "scroll-driven",
     "chapters",
-    "visualization",
-    "interactive",
-    "narrated",
     "glossary",
-    "tailwind"
+    "tooltip",
+    "visualization",
+    "education",
+    "headless",
+    "tailwind",
+    "shadcn"
   ],
   "type": "module",
   "main": "./dist/index.js",
@@ -44,41 +52,55 @@
     "./adapters/scroll": {
       "types": "./dist/adapters/scroll.d.ts",
       "import": "./dist/adapters/scroll.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "sideEffects": [
-    "./dist/adapters/driver-js.js"
+    "./dist/adapters/driver-js.js",
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md"
   ],
-  "files": ["dist", "README.md"],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && npm run build:css",
+    "build:css": "tailwindcss -i src/styles.css -o dist/styles.css --minify",
     "test": "vitest run",
     "prepublishOnly": "npm run test && npm run build",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "release": "npm publish --access public",
+    "bump": "npm version"
   },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
     "driver.js": ">= 1.0.0",
-    "gsap": ">= 3.0.0"
+    "gsap": ">= 3.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
-    "driver.js": { "optional": true },
-    "gsap": { "optional": true }
+    "driver.js": {
+      "optional": true
+    },
+    "gsap": {
+      "optional": true
+    }
   },
   "dependencies": {
     "clsx": "^2.1.0",
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.3.3",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^19.0.0",
     "jsdom": "^26.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.3",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.0.0"