@tour-kit/studio 0.1.0 → 0.2.0

package/dist/index.js

@@ -140,6 +140,12 @@ var checklistTask = z4.object({
   ]).optional(),
   manualComplete: z4.boolean().optional()
 });
+var checklistPosition = z4.enum([
+  "bottom-right",
+  "bottom-left",
+  "top-right",
+  "top-left"
+]);
 var checklistComponent = z4.object({
   kind: z4.literal("checklist"),
   id: z4.string(),
@@ -148,7 +154,15 @@ var checklistComponent = z4.object({
   icon: z4.string().optional(),
   tasks: z4.array(checklistTask).min(1),
   dismissible: z4.boolean().optional(),
-  hideOnComplete: z4.boolean().optional()
+  hideOnComplete: z4.boolean().optional(),
+  // Display surface (Studio-authoring; projected to the rendered ELEMENT, not the
+  // SDK `ChecklistConfig` — the CLI strips both before emitting the config const).
+  // "launcher" (the DEFAULT when unset) = a floating corner launcher button that
+  // pops a compact panel (`<ChecklistLauncher>`) — the real-world checklist UX;
+  // "inline" = the in-flow `<Checklist>` panel. `position` places the launcher
+  // corner (default "bottom-right"); ignored for inline.
+  display: z4.enum(["launcher", "inline"]).optional(),
+  position: checklistPosition.optional()
 });
 
 // ../recipe/src/components.ts
@@ -246,7 +260,9 @@ var scaffold = z7.object({
 // ../recipe/src/schedule.ts
 import { z as z8 } from "zod";
 var dayOfWeek = z8.number().int().min(0).max(6);
+var scheduleAppliesTo = z8.enum(["announcement", "survey"]);
 var scheduleDef = z8.object({
+  appliesTo: scheduleAppliesTo.optional(),
   enabled: z8.boolean().optional(),
   startAt: dateString.optional(),
   endAt: dateString.optional(),
@@ -487,19 +503,51 @@ var themeVariation = z10.object({
   theme: themeTokens
 });
 var recipeTheme = z10.object({
-  variations: z10.array(themeVariation).length(1)
+  variations: z10.array(themeVariation).length(1),
+  // Opt-in CLI-codegen flag (NOT projected to the SDK): when true, `tourkit add`
+  // ALSO emits a `THEME_TAILWIND` const — a `plugin(({addBase}) => addBase(…))`
+  // object the user merges into `tailwind.config` — beside the always-emitted
+  // dual-channel CSS. The CSS path is universal (works in any host); this is for
+  // Tailwind users who prefer managing the tokens in their config.
+  tailwind: z10.boolean().optional()
 });
-var TOKEN_BRIDGE = {
-  "--primary": "--tour-primary",
-  "--primary-foreground": "--tour-primary-fg",
-  "--popover": "--tour-card-bg",
-  "--popover-foreground": "--tour-card-fg",
-  "--muted-foreground": "--tour-muted-fg",
-  "--border": "--tour-card-border",
-  "--ring": "--tour-ring",
-  "--radius": "--tour-card-radius"
-};
-var SCOPED_SELECTORS = ["[data-tour-step]"];
+var THEME_TOKEN_ENTRIES = [
+  // Phase 32 — shadcn-vocab base (8)
+  ["--primary", "--tour-primary"],
+  ["--primary-foreground", "--tour-primary-fg"],
+  ["--popover", "--tour-card-bg"],
+  ["--popover-foreground", "--tour-card-fg"],
+  ["--muted-foreground", "--tour-muted-fg"],
+  ["--border", "--tour-card-border"],
+  ["--ring", "--tour-ring"],
+  ["--radius", "--tour-card-radius"],
+  // Phase 37 — buttons
+  ["--primary-hover", "--tour-primary-hover"],
+  ["--secondary", "--tour-secondary-bg"],
+  ["--secondary-foreground", "--tour-secondary-fg"],
+  ["--secondary-border", "--tour-secondary-border"],
+  ["--secondary-hover", "--tour-secondary-hover"],
+  // Phase 37 — card
+  ["--card-shadow", "--tour-card-shadow"],
+  ["--card-padding", "--tour-card-padding"],
+  ["--card-width", "--tour-card-width"],
+  // Phase 37 — backdrop / overlay
+  ["--overlay", "--tour-overlay-bg"],
+  ["--overlay-blur", "--tour-overlay-blur"],
+  // Phase 37 — typography
+  ["--font-family", "--tour-font-family"],
+  ["--font-size", "--tour-font-size"],
+  ["--line-height", "--tour-line-height"]
+];
+var TOKEN_BRIDGE = Object.fromEntries(THEME_TOKEN_ENTRIES);
+var SCOPED_SELECTORS = [
+  "[data-tour-step]",
+  "[data-survey-modal]",
+  "[data-survey-slideout]",
+  "[data-survey-banner]",
+  "[data-survey-popover]",
+  "[data-survey-inline]"
+];
 
 // ../recipe/src/recipe.ts
 var SUPPORTED_DEPS = {
@@ -635,12 +683,21 @@ var recipeSchemaV1 = z11.object({
       message: "free recipe must inject TourKitProvider"
     });
   for (const c of r.components)
-    if ((c.kind === "announcement" || c.kind === "survey") && c.schedule && !r.schedules?.[c.schedule])
-      ctx.addIssue({
-        code: "custom",
-        path: ["components"],
-        message: `unknown schedule "${c.schedule}"`
-      });
+    if ((c.kind === "announcement" || c.kind === "survey") && c.schedule) {
+      const sched = r.schedules?.[c.schedule];
+      if (!sched)
+        ctx.addIssue({
+          code: "custom",
+          path: ["components"],
+          message: `unknown schedule "${c.schedule}"`
+        });
+      else if (sched.appliesTo && sched.appliesTo !== c.kind)
+        ctx.addIssue({
+          code: "custom",
+          path: ["components"],
+          message: `schedule "${c.schedule}" applies to ${sched.appliesTo}, not this ${c.kind}`
+        });
+    }
   const selected = new Set(r.packages);
   r.components.forEach((c, i) => {
     const missing = requiredPackages(c).filter((p) => !selected.has(p));
@@ -659,6 +716,217 @@ var recipeSchemaV1 = z11.object({
     });
 });
 
+// ../recipe/src/shim.ts
+var EMBEDDED_DROP = /^(html|body|button)\b|utk-mock/;
+function whereWrap(selector) {
+  const sel = selector.trim();
+  if (sel === ":root") return ":where(:root)";
+  const pseudoEl = sel.indexOf("::");
+  if (pseudoEl !== -1) {
+    return `:where(${sel.slice(0, pseudoEl)})${sel.slice(pseudoEl)}`;
+  }
+  return `:where(${sel})`;
+}
+function embeddedShimCss(css) {
+  const out = [];
+  let i = 0;
+  const n = css.length;
+  while (i < n) {
+    while (i < n && /\s/.test(css.charAt(i))) i++;
+    if (i >= n) break;
+    if (css.startsWith("/*", i)) {
+      const end = css.indexOf("*/", i + 2);
+      i = end === -1 ? n : end + 2;
+      continue;
+    }
+    const braceStart = css.indexOf("{", i);
+    if (braceStart === -1) break;
+    const selector = css.slice(i, braceStart).trim();
+    let depth = 1;
+    let j = braceStart + 1;
+    while (j < n && depth > 0) {
+      if (css.charAt(j) === "{") depth++;
+      else if (css.charAt(j) === "}") depth--;
+      j++;
+    }
+    const body = css.slice(braceStart + 1, j - 1);
+    i = j;
+    if (selector.startsWith("@keyframes")) {
+      out.push(`${selector}{${body}}`);
+      continue;
+    }
+    if (selector.startsWith("@media")) {
+      out.push(`${selector}{${embeddedShimCss(body)}}`);
+      continue;
+    }
+    if (EMBEDDED_DROP.test(selector)) continue;
+    out.push(`${selector.split(",").map(whereWrap).join(",")}{${body}}`);
+  }
+  return out.join("\n");
+}
+var PREVIEW_SHIM_CSS = `
+:root{--background:#fff;--foreground:#0f172a;--popover:#fff;--popover-foreground:#0f172a;--card:#fff;--card-foreground:#0f172a;--primary:#2563eb;--primary-foreground:#fff;--secondary:#f1f5f9;--secondary-foreground:#0f172a;--muted:#f1f5f9;--muted-foreground:#64748b;--accent:#f1f5f9;--accent-foreground:#0f172a;--border:#e2e8f0;--ring:#2563eb;--destructive:#dc2626;--destructive-foreground:#fff;--radius:.5rem;--color-popover:var(--utk-popover, var(--popover));--color-border:var(--utk-border, var(--border))}
+/* Button reset \u2014 FIRST so the zero-specificity :where() utility classes below
+   (bg-primary, border, px-4, text-sm, \u2026) WIN at equal specificity in the embedded
+   shim, while a bare/un-utilitied button still loses its default chrome (native
+   border + background). Host-safe: :where() is zero-specificity, so a host's own
+   button rules always win on host UI. This is the "no default button border" reset. */
+:where(button){-webkit-appearance:none;appearance:none;background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
+/* overflow-x hidden: the faux-app surface never scrolls horizontally \u2014 mock
+   target boxes wrap and every SDK surface is fixed/portaled, so a horizontal
+   scrollbar in the canvas is only ever transient layout noise (e.g. a card
+   mid-position before floating-ui settles). Vertical scroll stays. */
+html,body{margin:0;overflow-x:hidden}
+body{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;background:#f8fafc;color:#0f172a;min-height:100vh}
+#utk-mock-app{padding:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
+.utk-mock-box{min-width:150px;min-height:52px;padding:12px 16px;border:1px dashed #cbd5e1;border-radius:10px;background:#fff;display:flex;flex-direction:column;gap:2px;justify-content:center;font-size:13px;color:#334155;box-shadow:0 1px 2px rgba(15,23,42,.05)}
+.utk-mock-box small{color:#94a3b8;font-size:11px}
+.utk-mock-note{color:#64748b;font-size:14px;padding:24px}
+.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}
+.items-center{align-items:center}.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:.25rem}.gap-2{gap:.5rem}.min-w-0{min-width:0}
+.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.z-50{z-index:50}
+.h-2{height:.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.w-80{width:20rem}.w-full{width:100%}
+.p-4{padding:1rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
+.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pt-2{padding-top:.5rem}
+.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mt-2{margin-top:.5rem}
+.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}
+.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.015em}
+.tabular-nums{font-variant-numeric:tabular-nums}.text-center{text-align:center}
+.bg-popover{background-color:var(--utk-popover, var(--popover))}.text-popover-foreground{color:var(--utk-popover-foreground, var(--popover-foreground))}
+.bg-primary{background-color:var(--utk-primary, var(--primary))}.text-primary-foreground{color:var(--utk-primary-foreground, var(--primary-foreground))}
+.bg-muted{background-color:var(--utk-muted, var(--muted))}.text-muted-foreground{color:var(--utk-muted-foreground, var(--muted-foreground))}
+.bg-transparent{background-color:transparent}.bg-accent{background-color:var(--utk-accent, var(--accent))}.text-foreground{color:var(--utk-foreground, var(--foreground))}
+.border{border:1px solid var(--utk-border, var(--border))}
+.rounded-lg{border-radius:var(--utk-radius, var(--radius))}.rounded-md{border-radius:calc(var(--utk-radius, var(--radius)) - .125rem)}.rounded-sm{border-radius:calc(var(--utk-radius, var(--radius)) - .25rem)}.rounded-full{border-radius:9999px}
+.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
+.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.12),0 4px 6px -4px rgba(0,0,0,.1)}
+.opacity-70{opacity:.7}.transition-colors{transition:color .15s,background-color .15s,border-color .15s}.transition-opacity{transition:opacity .15s}
+[class~='hover:bg-primary/90']:hover{background-color:#1d4ed8}
+[class~='hover:bg-accent']:hover{background-color:var(--utk-accent, var(--accent))}
+[class~='hover:text-accent-foreground']:hover{color:var(--utk-accent-foreground, var(--accent-foreground))}
+[class~='hover:text-foreground']:hover{color:var(--utk-foreground, var(--foreground))}
+[class~='hover:opacity-100']:hover{opacity:1}
+[class~='hover:underline']:hover{text-decoration:underline}
+[class~='disabled:opacity-50']:disabled{opacity:.5}
+[class~='disabled:pointer-events-none']:disabled{pointer-events:none}
+[class~='focus-visible:outline-none']:focus-visible,[class~='focus:outline-none']:focus{outline:none}
+[class~='focus-visible:ring-2']:focus-visible,[class~='focus:ring-2']:focus{box-shadow:0 0 0 2px var(--utk-ring, var(--ring))}
+[class~='focus-visible:ring-1']:focus-visible{box-shadow:0 0 0 1px var(--utk-ring, var(--ring))}
+/* tour-kit hints v1.0.6 beacon + tooltip + close button (Phase 22A). Enumerated
+   from the cva class lists in the hints dist (P/q/F). The default un-variant
+   hotspot is a pulsing dot; the tooltip portals into <body>. */
+.h-3{height:.75rem}.w-3{width:.75rem}.h-4{height:1rem}.w-4{width:1rem}
+.border-2{border-width:2px;border-style:solid}.border-background{border-color:var(--utk-background, var(--background))}
+.cursor-pointer{cursor:pointer}.p-3{padding:.75rem}.pr-4{padding-right:1rem}
+.right-2{right:.5rem}.top-2{top:.5rem}.mb-1{margin-bottom:.25rem}
+.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
+[class~='max-w-[280px]']{max-width:280px}[class~='z-[9999]']{z-index:9999}
+@keyframes tour-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.7)}50%{box-shadow:0 0 0 8px rgba(37,99,235,0)}}
+.animate-tour-pulse{animation:tour-pulse 1.5s ease-in-out infinite}
+/* tour-kit checklists v0.13.9 \u2014 the inline <Checklist showProgress> panel (Phase 22B).
+   We render the panel directly (not the floating ChecklistLauncher), so this covers
+   the card container, header, progress bar, task rows + checkbox states, and the
+   all-complete footer. Enumerated from the cva lists in the checklists dist
+   (fe/Oe/Ue/ze container+header+content+complete \xB7 Ve/Ee/Le/pe progress \xB7 Me/De/He/_e task). */
+.bg-card{background-color:var(--utk-card, var(--card))}.text-card-foreground{color:var(--utk-card-foreground, var(--card-foreground))}
+.text-primary{color:var(--utk-primary, var(--primary))}.border-primary{border-color:var(--utk-primary, var(--primary))}
+.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}
+.border-b{border-bottom:1px solid var(--utk-border, var(--border))}.border-t{border-top:1px solid var(--utk-border, var(--border))}
+.gap-3{gap:.75rem}.p-2{padding:.5rem}.w-5{width:1.25rem}.h-5{height:1.25rem}.h-full{height:100%}
+.flex-shrink-0{flex-shrink:0}.overflow-hidden{overflow:hidden}.opacity-0{opacity:0}.opacity-50{opacity:.5}
+.cursor-not-allowed{cursor:not-allowed}.line-through{text-decoration:line-through}
+.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.transition-all{transition:all .2s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}
+[class~='bg-muted/30']{background-color:#f5f8fb}
+[class~='hover:bg-muted/50']:hover{background-color:#e8eef6}
+[class~='border-muted-foreground/30']{border-color:rgba(100,116,139,.3)}
+[class~='hover:border-primary/50']:hover{border-color:rgba(37,99,235,.5)}
+[class~='group']:hover [class~='group-hover:opacity-100']{opacity:1}
+/* The FLOATING ChecklistLauncher button (closed state). The block above styles the
+   OPEN panel; the launcher's own size class (w-14 h-14) is launcher-specific and
+   otherwise unshimmed, so the closed button collapses to just its icon. bg-primary
+   / rounded-full / shadow-lg are already covered above. */
+.w-14{width:3.5rem}.h-14{height:3.5rem}
+/* The launcher's task-count BADGE \u2014 absolutely pinned to the button's top-right
+   corner (the negative offsets) so it never overlaps the centered icon. Without
+   these the badge fell back to its in-flow position on top of the glyph. */
+.-top-1{top:-.25rem}.-right-1{right:-.25rem}.font-bold{font-weight:700}
+.bg-destructive{background-color:var(--utk-destructive, var(--destructive))}.text-destructive-foreground{color:var(--utk-destructive-foreground, var(--destructive-foreground))}
+/* The unlicensed watermark portals to <body> at bottom-right with a MAX z-index +
+   pointer-events:none (preview-only \u2014 it clears with a Pro license). A bottom-right
+   ChecklistLauncher lands in the same corner; the watermark can't be out-z-indexed,
+   so in the PREVIEW we lift it clear of the launcher. The rule overrides the
+   watermark's inline bottom:16px \u2014 an important rule beats a non-important inline
+   declaration even at the zero specificity the embedded :where() wrap gives it. */
+[data-tourkit-watermark]{bottom:5rem!important}
+/* tour-kit announcements v4.1.6 \u2014 modal/slideout/banner/toast/spotlight variants
+   (Phase 22C). The SDK ships Tailwind + tailwindcss-animate utilities; the
+   sandboxed iframe has no Tailwind build, so this shims the static layout/intent
+   classes each variant emits. Enter/exit animations live behind motion-safe:
+   variants we deliberately do NOT shim, so no enter animation runs \u2014 reduced-motion
+   safe by construction. Enumerated from the cva lists in the announcements dist. */
+.bg-background{background-color:var(--utk-background, var(--background))}
+.bg-secondary{background-color:var(--utk-secondary, var(--secondary))}.text-secondary-foreground{color:var(--utk-secondary-foreground, var(--secondary-foreground))}
+.border-border{border-color:var(--utk-border, var(--border))}.border-0{border-width:0}
+.grid{display:grid}.flex-row{flex-direction:row}.items-end{align-items:flex-end}
+.gap-4{gap:1rem}.p-6{padding:1.5rem}.p-0{padding:0}.px-8{padding-left:2rem;padding-right:2rem}
+.py-3{padding-top:.75rem;padding-bottom:.75rem}
+.space-y-1>*+*{margin-top:.25rem}.space-y-4>*+*{margin-top:1rem}
+.h-1{height:.25rem}.h-9{height:2.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.w-full{width:100%}
+.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}
+[class~='w-3/4']{width:75%}
+.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}
+.top-4{top:1rem}.bottom-4{bottom:1rem}.left-4{left:1rem}.right-4{right:1rem}
+.z-40{z-index:40}.whitespace-nowrap{white-space:nowrap}.pointer-events-auto{pointer-events:auto}
+.opacity-90{opacity:.9}.underline-offset-4{text-underline-offset:4px}.text-lg{font-size:1.125rem;line-height:1.75rem}
+[class~='bg-black/80']{background-color:rgba(0,0,0,.8)}
+/* modal: the Radix Dialog content is fixed + centered (left/top 50% + translate). */
+[class~='left-[50%]'][class~='top-[50%]']{left:50%;top:50%;transform:translate(-50%,-50%)}
+[class~='max-w-[95vw]']{max-width:95vw}[class~='max-h-[95vh]']{max-height:95vh}
+/* banner/toast intents */
+.bg-blue-50{background-color:#eff6ff}.border-blue-200{border-color:#bfdbfe}.text-blue-900{color:#1e3a8a}
+.bg-green-50{background-color:#f0fdf4}.border-green-200{border-color:#bbf7d0}.text-green-900{color:#14532d}.bg-green-600{background-color:#16a34a}
+.bg-yellow-50{background-color:#fefce8}.border-yellow-200{border-color:#fef08a}.text-yellow-900{color:#713f12}.bg-yellow-600{background-color:#ca8a04}
+.bg-red-50{background-color:#fef2f2}.border-red-200{border-color:#fecaca}.text-red-900{color:#7f1d1d}.bg-red-600{background-color:#dc2626}
+/* tour-kit surveys v3.0.9 \u2014 modal/slideout/banner/popover/inline display modes +
+   the question controls (rating/text/select/boolean) and SurveyProgress
+   (Phase 30). Enumerated from the cva lists in the surveys src
+   (question/modal/slideout/banner variants). dark: variants and the Radix
+   data-[state] enter/exit animations are deliberately NOT shimmed (light theme;
+   reduced-motion safe by construction, like announcements). */
+.text-base{font-size:1rem;line-height:1.5rem}.text-xl{font-size:1.25rem;line-height:1.75rem}
+.px-6{padding-left:1.5rem;padding-right:1.5rem}
+[class~='py-1.5']{padding-top:.375rem;padding-bottom:.375rem}
+.h-12{height:3rem}.h-auto{height:auto}.w-2{width:.5rem}.w-8{width:2rem}.w-10{width:2.5rem}.w-12{width:3rem}
+.border-l{border-left:1px solid var(--utk-border, var(--border))}.border-r{border-right:1px solid var(--utk-border, var(--border))}
+.border-input{border-color:var(--utk-border, var(--border))}
+[class~='bg-primary/10']{background-color:rgba(37,99,235,.1)}
+.inset-y-0{top:0;bottom:0}
+.flex-wrap{flex-wrap:wrap}.shrink-0{flex-shrink:0}
+.resize-y{resize:vertical}
+.text-destructive{color:#dc2626}.text-right{text-align:right}
+.opacity-80{opacity:.8}.underline-offset-2{text-underline-offset:2px}
+.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}
+[class~='min-w-[280px]']{min-width:280px}
+[class~='placeholder:text-muted-foreground']::placeholder{color:var(--utk-muted-foreground, var(--muted-foreground))}
+.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
+@media (min-width:640px){[class~='sm:max-w-sm']{max-width:24rem}[class~='sm:max-w-md']{max-width:28rem}[class~='sm:max-w-lg']{max-width:32rem}[class~='sm:rounded-lg']{border-radius:var(--utk-radius, var(--radius))}}
+/* preview-only inactive-schedule chrome (authoring legibility \u2014 NOT the SDK). The
+   variant still renders inside it so the canvas is never blank; the badge states
+   the gating truth (role=status for the a11y tree). The badge is fixed + top-z so
+   it stays visible even when the variant portals out of flow (modal/toast/slideout
+   render into <body>); the wrapper dims its in-flow content (banner/spotlight). */
+.utk-ann-inactive{position:relative;margin:16px;padding:10px;border:1px dashed #cbd5e1;border-radius:10px;background:#fff;opacity:.85}
+.utk-ann-inactive-badge{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:100000;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:9999px;background:#fef08a;color:#713f12;font-size:12px;font-weight:600;box-shadow:0 2px 6px rgba(15,23,42,.18)}
+.utk-ann-inactive-badge::before{content:"";width:7px;height:7px;border-radius:9999px;background:#a16207}
+/* utk:focus selection highlight (Phase 22A) \u2014 flashes a synthesized target box. */
+@keyframes utk-target-flash{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5)}100%{box-shadow:0 0 0 6px rgba(37,99,235,0)}}
+.utk-target-flash{animation:utk-target-flash .8s ease-out 1;border-color:#2563eb}
+@media (prefers-reduced-motion:reduce){.animate-tour-pulse,.utk-target-flash{animation:none}}
+`;
+
 // src/commands/add.ts
 import { defineCommand } from "citty";
 import { consola as consola3 } from "consola";
@@ -872,8 +1140,14 @@ function imports(recipe) {
   if (kinds.has("hint"))
     value.push(`import { Hint, HintsProvider } from "@tour-kit/hints";`);
   if (kinds.has("checklist")) {
+    const cls = recipe.components.filter(
+      (c) => c.kind === "checklist"
+    );
+    const names = /* @__PURE__ */ new Set(["ChecklistProvider"]);
+    for (const c of cls)
+      names.add(c.display === "inline" ? "Checklist" : "ChecklistLauncher");
     value.push(
-      `import { Checklist, ChecklistProvider } from "@tour-kit/checklists";`
+      `import { ${[...names].sort().join(", ")} } from "@tour-kit/checklists";`
     );
     types.push(`import type { ChecklistConfig } from "@tour-kit/checklists";`);
   }
@@ -925,19 +1199,39 @@ function themeCssFor(tokens) {
     const target = TOKEN_BRIDGE[k];
     return target === void 0 ? [] : [[target, v]];
   }).sort(([a], [b]) => cmp(a, b));
+  const utk = entries.map(([k, v]) => [`--utk-${k.slice(2)}`, v]).sort(([a], [b]) => cmp(a, b));
   const all = [...entries].sort(([a], [b]) => cmp(a, b));
   return [
-    cssBlock(":root", bridged),
-    ...SCOPED_SELECTORS.map((sel) => cssBlock(sel, all))
+    cssBlock(":root", [...bridged, ...utk]),
+    cssBlock(SCOPED_SELECTORS.join(", "), all)
   ].filter((b) => b !== "").join("\n");
 }
+function themeTailwindFor(tokens) {
+  const entries = Object.entries(tokens);
+  const bridged = entries.flatMap(([k, v]) => {
+    const target = TOKEN_BRIDGE[k];
+    return target === void 0 ? [] : [[target, v]];
+  }).sort(([a], [b]) => cmp(a, b));
+  const all = [...entries].sort(([a], [b]) => cmp(a, b));
+  const out = {};
+  if (bridged.length > 0) out[":root"] = Object.fromEntries(bridged);
+  for (const sel of SCOPED_SELECTORS)
+    if (all.length > 0) out[sel] = Object.fromEntries(all);
+  return out;
+}
 function emitTheme(theme) {
-  const css = themeCssFor(theme.variations[0]?.theme ?? {});
-  return [
+  const tokens = theme.variations[0]?.theme ?? {};
+  const lines = [
     "// theme: recipe-global ThemeProvider variations + the portal-bridging <style> css",
     `export const THEME_VARIATIONS: ThemeVariation[] = ${serialize(theme.variations, 0)};`,
-    `export const THEME_CSS = ${str(css)};`
-  ].join("\n");
+    `export const THEME_CSS = ${str(themeCssFor(tokens))};`
+  ];
+  if (theme.tailwind)
+    lines.push(
+      "// Tailwind: merge into tailwind.config \u2014 `plugin(({ addBase }) => addBase(THEME_TAILWIND))`",
+      `export const THEME_TAILWIND = ${serialize(themeTailwindFor(tokens), 0)};`
+    );
+  return lines.join("\n");
 }
 var jsxAttr = (name, value) => ` ${name}={${serialize(value, 0)}}`;
 var STEP_FIELDS = [
@@ -976,7 +1270,19 @@ function emitHint(c) {
   return `      <Hint key={${serialize(c.id, 0)}} id={${serialize(c.id, 0)}}${attrs} />`;
 }
 function emitChecklistEl(c) {
-  return `      <Checklist key={${serialize(c.id, 0)}} checklistId={${serialize(c.id, 0)}} showProgress />`;
+  const id = serialize(c.id, 0);
+  if (c.display === "inline")
+    return `      <Checklist key={${id}} checklistId={${id}} showProgress />`;
+  const position = c.position ?? "bottom-right";
+  return [
+    `      <ChecklistLauncher key={${id}} checklistId={${id}} position=${str(position)}>`,
+    `        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">`,
+    `          <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />`,
+    `          <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />`,
+    `          <path d="m9 14 2 2 4-4" />`,
+    `        </svg>`,
+    `      </ChecklistLauncher>`
+  ].join("\n");
 }
 function emitAnnouncementEl(c) {
   const Comp = ANNOUNCEMENT_COMPONENT[c.variant];
@@ -1068,7 +1374,7 @@ ${body}
   );
 }`;
 }
-var STRIP = /* @__PURE__ */ new Set(["selectorMeta"]);
+var STRIP = /* @__PURE__ */ new Set(["selectorMeta", "appliesTo", "display", "position"]);
 function clean(value) {
   if (value instanceof RawCode) return value;
   if (Array.isArray(value)) return value.map(clean);
@@ -1232,12 +1538,17 @@ function SurveyBody({ surveyId }: { surveyId: string }) {
       )}
       <div className="flex justify-end gap-2">
         {state.currentStep > 0 && (
-          <button type="button" onClick={() => survey.prevQuestion()}>
+          <button
+            type="button"
+            className="inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-muted-foreground transition-colors"
+            onClick={() => survey.prevQuestion()}
+          >
             Back
           </button>
         )}
         <button
           type="button"
+          className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors"
           onClick={() => (isLast ? survey.complete() : advance())}
         >
           {isLast ? "Done" : "Next"}
@@ -1272,6 +1583,7 @@ export const ${hookName(h.ref)}: ${h.signature} = () => {
 ${stubs}
 `;
 }
+var BASE_SHIM_CSS = embeddedShimCss(PREVIEW_SHIM_CSS);
 function expand(recipe) {
   const body = recipe.components.map((c) => emitComponent(c, recipe)).join("\n\n");
   const helpers = recipe.components.some((c) => c.kind === "survey") ? `
@@ -1282,13 +1594,21 @@ ${SURVEY_HELPERS}` : "";
 ${emitTheme(recipe.theme)}` : "";
   const contents = `${header(recipe.id, recipe.version)}
 "use client";
+import "./${recipe.id}.css";
 ${imports(recipe)}
 
 ${body}${helpers}${themeConsts}
 
 ${emitMount(recipe)}
 `;
-  const files = [{ path: `tours/${recipe.id}.tsx`, contents }];
+  const files = [
+    { path: `tours/${recipe.id}.tsx`, contents },
+    {
+      path: `tours/${recipe.id}.css`,
+      contents: `${BASE_SHIM_CSS}
+`
+    }
+  ];
   if (recipe.scaffold.hooks.length > 0)
     files.push({
       path: `tours/${recipe.id}.hooks.ts`,
@@ -1735,7 +2055,7 @@ runMain(
   defineCommand6({
     meta: {
       name: "tourkit",
-      version: "0.1.0",
+      version: "0.2.0",
       description: "User Tour Kit Studio CLI"
     },
     subCommands: { add, pull, verify, harden, init }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tour-kit/studio",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "User Tour Kit Studio CLI — detect framework, install packages, scaffold tours, AST-patch providers, verify and harden selectors.",
   "type": "module",
   "bin": {