@idosgames/mcp 0.1.42 → 0.1.44

package/registry/modules/store.json

@@ -33,15 +33,15 @@
       "name": "iDos Games",
       "url": "https://idosgames.com"
     },
-    "version": "0.1.3"
+    "version": "0.1.4"
   },
   "dependencies": {
-    "@idosgames/core": "0.24.2",
-    "@idosgames/module-sdk": "0.13.1",
-    "@idosgames/react": "0.6.2",
+    "@idosgames/core": "0.25.0",
+    "@idosgames/module-sdk": "0.13.2",
+    "@idosgames/react": "0.6.3",
     "react": "19.2.7"
   },
-  "contentHash": "71ea8d0118abd95a4e9426617b2acfd06ce081bdd30ed8864b36cb4a8fe145e6",
+  "contentHash": "3f358dda5a60bb20acdc56cfe00c8dff472d4a333a3d23d9196abd4663ab366d",
   "files": [
     {
       "path": "i18n.ts",
@@ -65,11 +65,11 @@
     },
     {
       "path": "StoreScreen.tsx",
-      "content": "import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  CreditsError,\n  OFFER_NOT_IN_ROTATION,\n  type CreditsConfirmationView,\n  type GetStorefrontResponse,\n  type StorefrontOfferView,\n  type StorefrontSectionView,\n  type StorefrontSlotView,\n} from \"@idosgames/core\";\nimport { useIDosGamesClient, useUserState } from \"@idosgames/react\";\nimport { CreditsPrice } from \"./PlatformCurrencyIcon\";\nimport {\n  Button,\n  Center,\n  EmptyState,\n  Icon,\n  Popup,\n  ResourceList,\n  SectionTitle,\n  SoldOutStamp,\n  Spinner,\n  Tabs,\n  Timer,\n  TONES,\n  canAfford,\n  countdown,\n  errorText,\n  grantLines,\n  grantedBy,\n  inkFrame,\n  inked,\n  outlined,\n  panel,\n  useCatalog,\n  useCelebrate,\n  useGameLayout,\n  useNow,\n  usePopupClose,\n  useSound,\n  useStagger,\n  useToast,\n  useUiKit,\n  v,\n  type ButtonTone,\n  type ResourceLine,\n  tokenGlyph,\n} from \"@idosgames/react/ui\";\nimport type { FeatureScreenProps } from \"@idosgames/module-sdk\";\nimport {\n  creditsPriceOf,\n  earliestRefresh,\n  isFree,\n  resourcePrice,\n  slotsOf,\n  sortedSections,\n  sortedStores,\n} from \"./model\";\nimport { t } from \"./i18n\";\n\n/** The ribbon colour of each section in turn, as the sheet's shop (\"Daily Shop\", \"AD Shop\", \"Gem Pack\"…). */\nconst SECTION_TONES: ButtonTone[] = [\n  \"red\",\n  \"green\",\n  \"purple\",\n  \"gold\",\n  \"blue\",\n  \"orange\",\n];\n\n// The shop, drawn from the storefront RESOLVED for this player (client.store.getStorefront — never\n// from the raw config): rotation, limits, badges and timers are computed by the server. Layout of the\n// Unity shop window (Alikhan/Shop): several stores as tabs, the first section of a store is a\n// carousel, the rest are grids; a tap opens the confirmation popup; a purchase shows what was granted\n// and the rewards fly to their counters.\n\ninterface Picked {\n  storeID: string;\n  section: StorefrontSectionView;\n  slot: StorefrontSlotView;\n  offer: StorefrontOfferView;\n}\n\nexport function StoreScreen({ args }: FeatureScreenProps): ReactNode {\n  const client = useIDosGamesClient();\n  const [front, setFront] = useState<GetStorefrontResponse | null>(\n    client.store.cachedStorefront,\n  );\n  const [loading, setLoading] = useState(front === null);\n  const [failed, setFailed] = useState<string | null>(null);\n  const [storeID, setStoreID] = useState<string | null>(\n    typeof args?.storeID === \"string\" ? args.storeID : null,\n  );\n  const [picked, setPicked] = useState<Picked | null>(null);\n  // Server clock offset: timers count from the SERVER time, not the device clock.\n  const [skewMs, setSkewMs] = useState(0);\n  const now = useNow() + skewMs;\n\n  const load = useCallback(async () => {\n    const res = await client.store.getStorefront();\n    setLoading(false);\n    if (!res.ok) {\n      // A title without a Store section answers \"not found\" — that is an empty shop, not a failure.\n      setFailed(\n        /not found|not configured/i.test(res.error ?? \"\")\n          ? t(\"emptyShop\")\n          : errorText(res.error),\n      );\n      return;\n    }\n    setFailed(null);\n    setFront(res.data);\n    setSkewMs(new Date(res.data.ServerTimeUtc).getTime() - Date.now());\n  }, [client]);\n\n  useEffect(() => {\n    void load();\n  }, [load]);\n\n  // One reload when the nearest card refreshes, instead of polling.\n  useEffect(() => {\n    const next = client.store.nextRefreshAtUtc();\n    if (!next) return;\n    const ms = new Date(next).getTime() - (Date.now() + skewMs);\n    if (ms <= 0 || ms > 24 * 3600_000) return;\n    const id = setTimeout(() => void load(), ms + 500);\n    return () => clearTimeout(id);\n  }, [front, client, load, skewMs]);\n\n  if (loading)\n    return (\n      <Center>\n        <Spinner />\n      </Center>\n    );\n  if (failed)\n    return (\n      <EmptyState\n        glyph=\"shop\"\n        text={failed}\n        action={<Button onClick={() => void load()}>{t(\"retry\")}</Button>}\n      />\n    );\n\n  const stores = sortedStores(front);\n  const store = stores.find((s) => s.StoreID === storeID) ?? stores[0];\n  const sections = sortedSections(store);\n  if (!store || sections.length === 0)\n    return <EmptyState glyph=\"shop\" text={t(\"emptyShop\")} />;\n  const [first, ...rest] = sections;\n\n  return (\n    <div style={{ display: \"grid\", gap: 18 }}>\n      <Tabs\n        tabs={stores.map((s) => ({\n          id: s.StoreID,\n          label: s.Identity?.DisplayName ?? s.StoreID,\n        }))}\n        value={store.StoreID}\n        onChange={setStoreID}\n      />\n      {first ? (\n        <div key={`${store.StoreID}:${first.SectionID}`}>\n          <SectionTitle\n            tone={SECTION_TONES[0]}\n            right={\n              <Timer\n                at={earliestRefresh(first)}\n                now={now}\n                label={t(\"refreshesIn\")}\n              />\n            }\n          >\n            {first.Identity?.DisplayName ?? first.SectionID}\n          </SectionTitle>\n          <div\n            className=\"idos-scroll\"\n            style={{\n              display: \"flex\",\n              gap: 12,\n              overflowX: \"auto\",\n              padding: \"4px 4px 12px\",\n              scrollSnapType: \"x mandatory\",\n            }}\n          >\n            {slotsOf(first).map((slot, i) => (\n              <OfferCard\n                key={slot.SlotID}\n                slot={slot}\n                now={now}\n                wide\n                index={i}\n                onPick={(offer) =>\n                  setPicked({\n                    storeID: store.StoreID,\n                    section: first,\n                    slot,\n                    offer,\n                  })\n                }\n              />\n            ))}\n          </div>\n        </div>\n      ) : null}\n      {rest.map((section, i) => (\n        <div key={`${store.StoreID}:${section.SectionID}`}>\n          <SectionTitle\n            tone={SECTION_TONES[(i + 1) % SECTION_TONES.length]}\n            right={\n              <Timer\n                at={earliestRefresh(section)}\n                now={now}\n                label={t(\"refreshesIn\")}\n              />\n            }\n          >\n            {section.Identity?.DisplayName ?? section.SectionID}\n          </SectionTitle>\n          <OfferGrid>\n            {slotsOf(section).map((slot, i) => (\n              <OfferCard\n                key={slot.SlotID}\n                slot={slot}\n                now={now}\n                index={i}\n                onPick={(offer) =>\n                  setPicked({ storeID: store.StoreID, section, slot, offer })\n                }\n              />\n            ))}\n          </OfferGrid>\n        </div>\n      ))}\n      {picked ? (\n        <ConfirmPurchase\n          picked={picked}\n          onReload={load}\n          onClose={() => setPicked(null)}\n        />\n      ) : null}\n    </div>\n  );\n}\n\nfunction OfferGrid({ children }: { children: ReactNode }): ReactNode {\n  const layout = useGameLayout();\n  return (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: `repeat(auto-fill, minmax(${layout === \"phone\" ? 150 : 180}px, 1fr))`,\n        gap: layout === \"phone\" ? 12 : 16,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction OfferCard({\n  slot,\n  now,\n  wide = false,\n  index,\n  onPick,\n}: {\n  slot: StorefrontSlotView;\n  now: number;\n  wide?: boolean;\n  index: number;\n  onPick: (offer: StorefrontOfferView) => void;\n}): ReactNode {\n  const catalog = useCatalog();\n  const layout = useGameLayout();\n  const stagger = useStagger();\n  const state = useUserState();\n  const offer = slot.Offer;\n  const width = wide ? (layout === \"phone\" ? 170 : 200) : undefined;\n\n  // An EMPTY slot is still drawn — the shelf must not jump when a window closes.\n  if (!offer)\n    return (\n      <div\n        style={{\n          ...panel,\n          width,\n          minHeight: 200,\n          display: \"grid\",\n          placeItems: \"center\",\n          opacity: 0.55,\n          scrollSnapAlign: \"start\",\n          flex: \"none\",\n          ...stagger(index),\n        }}\n      >\n        <Icon glyph=\"lock\" size={40} />\n      </div>\n    );\n\n  const rewards = grantLines(offer.Rewards);\n  const main = rewards[0];\n  const price = resourcePrice(offer);\n  const creditsPrice = creditsPriceOf(offer);\n  const soldOut = offer.State?.SoldOut === true;\n  const readyIn = countdown(offer.State?.AvailableAtUtc ?? null, now);\n  const free = isFree(offer);\n  const disabled = soldOut || readyIn !== null;\n  const affordable = canAfford(price, state?.InventoryV2?.VirtualCurrencies);\n  const name = catalog.localize(offer.Identity?.DisplayName ?? offer.OfferID);\n  const remaining = offer.State?.RemainingToday ?? offer.State?.RemainingTotal;\n\n  // The sheet's shop card: a light-blue plate in the ink frame (green when free), the name on top,\n  // the prize big in the middle, the price at the bottom; a sold-out card is dimmed under the stamp.\n  const [top, deep] = TONES[free ? \"green\" : \"blue\"];\n  return (\n    <div\n      className={free && !disabled ? \"idos-shine\" : undefined}\n      style={{\n        position: \"relative\",\n        width,\n        flex: wide ? \"none\" : undefined,\n        scrollSnapAlign: \"start\",\n        padding: \"10px 10px 12px\",\n        display: \"grid\",\n        gap: 8,\n        justifyItems: \"center\",\n        borderRadius: 12,\n        border: inkFrame,\n        background: `linear-gradient(180deg, color-mix(in srgb, ${top} 55%, #fff) 0%, ${top} 38%, ${deep} 100%)`,\n        boxShadow: `inset 0 -4px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 ${v.shadow}`,\n        ...stagger(index),\n      }}\n    >\n      <div\n        style={{\n          ...inked,\n          fontSize: 16,\n          textAlign: \"center\",\n          minHeight: 36,\n          display: \"grid\",\n          placeItems: \"center\",\n        }}\n      >\n        {name}\n      </div>\n      <div\n        className={free && !disabled ? \"idos-bounce\" : undefined}\n        style={{\n          width: 84,\n          height: 84,\n          display: \"grid\",\n          placeItems: \"center\",\n          borderRadius: 20,\n          background:\n            \"radial-gradient(circle, rgba(255,255,255,.18), transparent 70%)\",\n        }}\n      >\n        <Icon\n          glyph={\n            main\n              ? main.kind === \"token\"\n                ? tokenGlyph(main)\n                : catalog.iconOf(main)\n              : \"gift\"\n          }\n          size={62}\n        />\n      </div>\n      <div style={{ minHeight: 22 }}>\n        <ResourceList lines={rewards} />\n      </div>\n      {remaining != null ? (\n        <div\n          style={{\n            ...outlined,\n            fontSize: 11,\n            color: v.textDim,\n            fontWeight: 700,\n          }}\n        >\n          {t(\"left\")}: {remaining}\n        </div>\n      ) : null}\n      <Button\n        tone=\"gold\"\n        disabled={disabled}\n        attract={free && !disabled}\n        onClick={() => onPick(offer)}\n        style={{ width: \"100%\", visibility: soldOut ? \"hidden\" : undefined }}\n      >\n        {soldOut ? (\n          t(\"soldOut\")\n        ) : readyIn ? (\n          `${t(\"readyIn\")} ${readyIn}`\n        ) : free ? (\n          t(\"free\")\n        ) : creditsPrice != null ? (\n          <CreditsPrice\n            amount={creditsPrice}\n            label={t(\"currencyName\")}\n            size={20}\n          />\n        ) : (\n          <ResourceList lines={price} size={20} dimIf={() => !affordable} />\n        )}\n      </Button>\n      {soldOut ? (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            borderRadius: 9,\n            background: `color-mix(in srgb, ${v.bgBottom} 55%, transparent)`,\n            display: \"grid\",\n            placeItems: \"center\",\n          }}\n        >\n          <SoldOutStamp />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction ConfirmPurchase({\n  picked,\n  onReload,\n  onClose,\n}: {\n  picked: Picked;\n  onReload: () => Promise<void>;\n  onClose: () => void;\n}): ReactNode {\n  const catalog = useCatalog();\n  const rewards = grantLines(picked.offer.Rewards);\n  const name = catalog.localize(\n    picked.offer.Identity?.DisplayName ?? picked.offer.OfferID,\n  );\n  return (\n    <Popup title={t(\"confirmTitle\")} onClose={onClose}>\n      <div style={{ display: \"grid\", justifyItems: \"center\", gap: 10 }}>\n        <div style={{ ...outlined, fontSize: 17, textAlign: \"center\" }}>\n          {name}\n        </div>\n        <div\n          style={{\n            display: \"flex\",\n            gap: 14,\n            flexWrap: \"wrap\",\n            justifyContent: \"center\",\n          }}\n        >\n          {rewards.map((line) => (\n            <div\n              key={`${line.kind}:${line.id}`}\n              style={{ display: \"grid\", justifyItems: \"center\", gap: 4 }}\n            >\n              <Icon\n                glyph={\n                  line.kind === \"token\"\n                    ? tokenGlyph(line)\n                    : catalog.iconOf(line)\n                }\n                size={54}\n              />\n              <span style={{ ...outlined, fontSize: 17 }}>×{line.amount}</span>\n            </div>\n          ))}\n        </div>\n      </div>\n      <BuyButton picked={picked} onReload={onReload} />\n    </Popup>\n  );\n}\n\nfunction BuyButton({\n  picked,\n  onReload,\n}: {\n  picked: Picked;\n  onReload: () => Promise<void>;\n}): ReactNode {\n  const client = useIDosGamesClient();\n  const close = usePopupClose();\n  const celebrate = useCelebrate();\n  const toast = useToast();\n  const play = useSound();\n  const kit = useUiKit();\n  const ref = useRef<HTMLDivElement>(null);\n  const [busy, setBusy] = useState(false);\n  const option = picked.offer.PriceOptions?.[0];\n  const price: ResourceLine[] = resourcePrice(picked.offer);\n  const creditsPrice = creditsPriceOf(picked.offer);\n  const free = isFree(picked.offer);\n  // Credits: the request waiting for the player on idosgames.com. Leaving the popup stops the wait.\n  const [confirm, setConfirm] = useState<CreditsConfirmationView | null>(null);\n  const abort = useRef<AbortController | null>(null);\n  useEffect(() => () => abort.current?.abort(), []);\n\n  const creditsError = (error: string | undefined): string => {\n    if (error === CreditsError.LoginRequired) return t(\"creditsLogin\");\n    if (error === CreditsError.NotEnough) return t(\"creditsNotEnough\");\n    if (error === CreditsError.ConfirmationDeclined)\n      return t(\"creditsDeclined\");\n    if (error === CreditsError.ConfirmationExpired) return t(\"creditsExpired\");\n    return errorText(error);\n  };\n\n  const buy = async () => {\n    setBusy(true);\n    const slot = {\n      storeID: picked.storeID,\n      sectionID: picked.section.SectionID,\n      slotID: picked.slot.SlotID,\n    };\n    abort.current = new AbortController();\n    const res =\n      creditsPrice != null\n        ? await client.store.purchaseWithCredits(picked.offer.OfferID, 1, {\n            selectedOptionID: option?.OptionID,\n            slot,\n            onConfirmation: setConfirm,\n            signal: abort.current.signal,\n          })\n        : await client.store.purchase(picked.offer.OfferID, 1, {\n            selectedOptionID: option?.OptionID,\n            slot,\n          });\n    setBusy(false);\n    setConfirm(null);\n    if (!res.ok) {\n      if (res.error === OFFER_NOT_IN_ROTATION) {\n        close();\n        await onReload(); // the shelf reshuffled — redraw silently\n        return;\n      }\n      if (res.error === \"CREDITS_CONFIRMATION_CANCELLED\") return;\n      if (res.error === CreditsError.NotEnough) {\n        const balance = await client.store.getCreditsBalance();\n        const url = balance.ok ? balance.data.TopUpUrl : null;\n        if (url) window.open(url, \"_blank\", \"noopener\");\n      }\n      toast(\n        creditsPrice != null ? creditsError(res.error) : errorText(res.error),\n        \"error\",\n      );\n      return;\n    }\n    play(\"purchase\");\n    kit.fx.burst(ref.current);\n    close();\n    const granted = grantedBy(res.data);\n    celebrate(granted.length > 0 ? granted : grantLines(picked.offer.Rewards));\n    await onReload();\n  };\n\n  if (confirm) {\n    // A link, not window.open after an await: the browser blocks popups that are not a direct tap.\n    return (\n      <div ref={ref} style={{ display: \"grid\", gap: 10, textAlign: \"center\" }}>\n        <span style={{ ...outlined, fontSize: 14 }}>\n          {t(\"creditsConfirmHint\")}\n        </span>\n        <a\n          href={confirm.Url}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          style={{ textDecoration: \"none\" }}\n        >\n          <Button tone=\"gold\" size=\"lg\" style={{ width: \"100%\" }}>\n            {t(\"creditsConfirmOpen\")}\n          </Button>\n        </a>\n        <span style={{ ...outlined, fontSize: 13, opacity: 0.8 }}>\n          {t(\"creditsWaiting\")}\n        </span>\n      </div>\n    );\n  }\n\n  return (\n    <div ref={ref}>\n      <Button\n        tone={free ? \"green\" : \"gold\"}\n        busy={busy}\n        attract\n        onClick={() => void buy()}\n        style={{ width: \"100%\" }}\n        size=\"lg\"\n      >\n        {free ? (\n          t(\"confirmFree\")\n        ) : creditsPrice != null ? (\n          <>\n            {t(\"confirmBuy\")}{\" \"}\n            <CreditsPrice\n              amount={creditsPrice}\n              label={t(\"currencyName\")}\n              size={20}\n            />\n          </>\n        ) : (\n          <>\n            {t(\"confirmBuy\")} <ResourceList lines={price} size={20} />\n          </>\n        )}\n      </Button>\n    </div>\n  );\n}\n"
+      "content": "import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport {\n  CreditsError,\n  OFFER_NOT_IN_ROTATION,\n  type CreditsConfirmationView,\n  type GetStorefrontResponse,\n  type StorefrontOfferView,\n  type StorefrontSectionView,\n  type StorefrontSlotView,\n} from \"@idosgames/core\";\nimport { useIDosGamesClient, useUserState } from \"@idosgames/react\";\nimport { CreditsPrice } from \"./PlatformCurrencyIcon\";\nimport {\n  Button,\n  Center,\n  EmptyState,\n  Icon,\n  Popup,\n  ResourceList,\n  SectionTitle,\n  SoldOutStamp,\n  Spinner,\n  Tabs,\n  Timer,\n  TONES,\n  canAfford,\n  countdown,\n  errorText,\n  grantLines,\n  grantedBy,\n  inkFrame,\n  inked,\n  outlined,\n  panel,\n  useCatalog,\n  useCelebrate,\n  useGameLayout,\n  useNow,\n  usePopupClose,\n  useSound,\n  useStagger,\n  useToast,\n  useUiKit,\n  v,\n  type ButtonTone,\n  type ResourceLine,\n  tokenGlyph,\n} from \"@idosgames/react/ui\";\nimport type { FeatureScreenProps } from \"@idosgames/module-sdk\";\nimport {\n  creditsPriceOf,\n  earliestRefresh,\n  isFree,\n  resourcePrice,\n  slotsOf,\n  sortedSections,\n  sortedStores,\n} from \"./model\";\nimport { t } from \"./i18n\";\n\n/** The ribbon colour of each section in turn, as the sheet's shop (\"Daily Shop\", \"AD Shop\", \"Gem Pack\"…). */\nconst SECTION_TONES: ButtonTone[] = [\n  \"red\",\n  \"green\",\n  \"purple\",\n  \"gold\",\n  \"blue\",\n  \"orange\",\n];\n\n// The shop, drawn from the storefront RESOLVED for this player (client.store.getStorefront — never\n// from the raw config): rotation, limits, badges and timers are computed by the server. Layout of the\n// Unity shop window (Alikhan/Shop): several stores as tabs, the first section of a store is a\n// carousel, the rest are grids; a tap opens the confirmation popup; a purchase shows what was granted\n// and the rewards fly to their counters.\n//\n// ⚠ An offer priced in Aspis (Credits) has NO game popup (owner, 04.11.2026: \"no double confirmation\"): the tap\n// starts the purchase at once and the ONE confirmation is the window of idosgames.com / the app over the game. The\n// game's popup appears only when the site could not ask (the game is not on idosgames.com) — with the link to the\n// confirmation page.\n\ninterface Picked {\n  storeID: string;\n  section: StorefrontSectionView;\n  slot: StorefrontSlotView;\n  offer: StorefrontOfferView;\n}\n\n/** An Aspis purchase in flight; `view` is set when the site could not ask and the player needs the link. */\ninterface CreditsBuy {\n  picked: Picked;\n  view: CreditsConfirmationView | null;\n}\n\nfunction slotOf(picked: Picked) {\n  return {\n    storeID: picked.storeID,\n    sectionID: picked.section.SectionID,\n    slotID: picked.slot.SlotID,\n  };\n}\n\nfunction creditsError(error: string | undefined): string {\n  if (error === CreditsError.LoginRequired) return t(\"creditsLogin\");\n  if (error === CreditsError.NotEnough) return t(\"creditsNotEnough\");\n  if (error === CreditsError.ConfirmationDeclined) return t(\"creditsDeclined\");\n  if (error === CreditsError.ConfirmationExpired) return t(\"creditsExpired\");\n  return errorText(error);\n}\n\nexport function StoreScreen({ args }: FeatureScreenProps): ReactNode {\n  const client = useIDosGamesClient();\n  const celebrate = useCelebrate();\n  const toast = useToast();\n  const play = useSound();\n  const [credits, setCredits] = useState<CreditsBuy | null>(null);\n  const creditsAbort = useRef<AbortController | null>(null);\n  useEffect(() => () => creditsAbort.current?.abort(), []);\n  const [front, setFront] = useState<GetStorefrontResponse | null>(\n    client.store.cachedStorefront,\n  );\n  const [loading, setLoading] = useState(front === null);\n  const [failed, setFailed] = useState<string | null>(null);\n  const [storeID, setStoreID] = useState<string | null>(\n    typeof args?.storeID === \"string\" ? args.storeID : null,\n  );\n  const [picked, setPicked] = useState<Picked | null>(null);\n  // Server clock offset: timers count from the SERVER time, not the device clock.\n  const [skewMs, setSkewMs] = useState(0);\n  const now = useNow() + skewMs;\n\n  const load = useCallback(async () => {\n    const res = await client.store.getStorefront();\n    setLoading(false);\n    if (!res.ok) {\n      // A title without a Store section answers \"not found\" — that is an empty shop, not a failure.\n      setFailed(\n        /not found|not configured/i.test(res.error ?? \"\")\n          ? t(\"emptyShop\")\n          : errorText(res.error),\n      );\n      return;\n    }\n    setFailed(null);\n    setFront(res.data);\n    setSkewMs(new Date(res.data.ServerTimeUtc).getTime() - Date.now());\n  }, [client]);\n\n  useEffect(() => {\n    void load();\n  }, [load]);\n\n  // One reload when the nearest card refreshes, instead of polling.\n  useEffect(() => {\n    const next = client.store.nextRefreshAtUtc();\n    if (!next) return;\n    const ms = new Date(next).getTime() - (Date.now() + skewMs);\n    if (ms <= 0 || ms > 24 * 3600_000) return;\n    const id = setTimeout(() => void load(), ms + 500);\n    return () => clearTimeout(id);\n  }, [front, client, load, skewMs]);\n\n  // Aspis: straight to the site's window, no popup of our own (see the note at the top).\n  const buyWithCredits = async (target: Picked) => {\n    if (creditsAbort.current) return; // one Aspis purchase at a time\n    const ac = new AbortController();\n    creditsAbort.current = ac;\n    setCredits({ picked: target, view: null });\n    const res = await client.store.purchaseWithCredits(\n      target.offer.OfferID,\n      1,\n      {\n        selectedOptionID: target.offer.PriceOptions?.[0]?.OptionID,\n        slot: slotOf(target),\n        onConfirmation: (view) =>\n          setCredits((cur) => (cur ? { ...cur, view } : cur)),\n        signal: ac.signal,\n      },\n    );\n    if (creditsAbort.current !== ac) return; // closed by the player\n    creditsAbort.current = null;\n    setCredits(null);\n    if (!res.ok) {\n      if (res.error === \"CREDITS_CONFIRMATION_CANCELLED\") return;\n      if (res.error === OFFER_NOT_IN_ROTATION) return void (await load());\n      if (res.error === CreditsError.NotEnough) {\n        const balance = await client.store.getCreditsBalance();\n        const url = balance.ok ? balance.data.TopUpUrl : null;\n        if (url) window.open(url, \"_blank\", \"noopener\");\n      }\n      toast(creditsError(res.error), \"error\");\n      return;\n    }\n    play(\"purchase\");\n    const granted = grantedBy(res.data);\n    celebrate(granted.length > 0 ? granted : grantLines(target.offer.Rewards));\n    await load();\n  };\n\n  const pick = (target: Picked) => {\n    if (creditsPriceOf(target.offer) != null) void buyWithCredits(target);\n    else setPicked(target);\n  };\n\n  const closeCredits = () => {\n    creditsAbort.current?.abort();\n    creditsAbort.current = null;\n    setCredits(null);\n  };\n\n  const buyingSlot = credits?.picked.slot.SlotID ?? null;\n\n  if (loading)\n    return (\n      <Center>\n        <Spinner />\n      </Center>\n    );\n  if (failed)\n    return (\n      <EmptyState\n        glyph=\"shop\"\n        text={failed}\n        action={<Button onClick={() => void load()}>{t(\"retry\")}</Button>}\n      />\n    );\n\n  const stores = sortedStores(front);\n  const store = stores.find((s) => s.StoreID === storeID) ?? stores[0];\n  const sections = sortedSections(store);\n  if (!store || sections.length === 0)\n    return <EmptyState glyph=\"shop\" text={t(\"emptyShop\")} />;\n  const [first, ...rest] = sections;\n\n  return (\n    <div style={{ display: \"grid\", gap: 18 }}>\n      <Tabs\n        tabs={stores.map((s) => ({\n          id: s.StoreID,\n          label: s.Identity?.DisplayName ?? s.StoreID,\n        }))}\n        value={store.StoreID}\n        onChange={setStoreID}\n      />\n      {first ? (\n        <div key={`${store.StoreID}:${first.SectionID}`}>\n          <SectionTitle\n            tone={SECTION_TONES[0]}\n            right={\n              <Timer\n                at={earliestRefresh(first)}\n                now={now}\n                label={t(\"refreshesIn\")}\n              />\n            }\n          >\n            {first.Identity?.DisplayName ?? first.SectionID}\n          </SectionTitle>\n          <div\n            className=\"idos-scroll\"\n            style={{\n              display: \"flex\",\n              gap: 12,\n              overflowX: \"auto\",\n              padding: \"4px 4px 12px\",\n              scrollSnapType: \"x mandatory\",\n            }}\n          >\n            {slotsOf(first).map((slot, i) => (\n              <OfferCard\n                key={slot.SlotID}\n                slot={slot}\n                now={now}\n                wide\n                index={i}\n                busy={buyingSlot === slot.SlotID}\n                onPick={(offer) =>\n                  pick({\n                    storeID: store.StoreID,\n                    section: first,\n                    slot,\n                    offer,\n                  })\n                }\n              />\n            ))}\n          </div>\n        </div>\n      ) : null}\n      {rest.map((section, i) => (\n        <div key={`${store.StoreID}:${section.SectionID}`}>\n          <SectionTitle\n            tone={SECTION_TONES[(i + 1) % SECTION_TONES.length]}\n            right={\n              <Timer\n                at={earliestRefresh(section)}\n                now={now}\n                label={t(\"refreshesIn\")}\n              />\n            }\n          >\n            {section.Identity?.DisplayName ?? section.SectionID}\n          </SectionTitle>\n          <OfferGrid>\n            {slotsOf(section).map((slot, i) => (\n              <OfferCard\n                key={slot.SlotID}\n                slot={slot}\n                now={now}\n                index={i}\n                busy={buyingSlot === slot.SlotID}\n                onPick={(offer) =>\n                  pick({ storeID: store.StoreID, section, slot, offer })\n                }\n              />\n            ))}\n          </OfferGrid>\n        </div>\n      ))}\n      {picked ? (\n        <ConfirmPurchase\n          picked={picked}\n          onReload={load}\n          onClose={() => setPicked(null)}\n        />\n      ) : null}\n      {credits?.view ? (\n        <Popup title={t(\"confirmTitle\")} onClose={closeCredits}>\n          <OfferPreview offer={credits.picked.offer} />\n          <CreditsLink view={credits.view} />\n        </Popup>\n      ) : null}\n    </div>\n  );\n}\n\nfunction OfferGrid({ children }: { children: ReactNode }): ReactNode {\n  const layout = useGameLayout();\n  return (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: `repeat(auto-fill, minmax(${layout === \"phone\" ? 150 : 180}px, 1fr))`,\n        gap: layout === \"phone\" ? 12 : 16,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction OfferCard({\n  slot,\n  now,\n  wide = false,\n  index,\n  busy = false,\n  onPick,\n}: {\n  slot: StorefrontSlotView;\n  now: number;\n  wide?: boolean;\n  index: number;\n  /** An Aspis purchase of this card waits for the site's window. */\n  busy?: boolean;\n  onPick: (offer: StorefrontOfferView) => void;\n}): ReactNode {\n  const catalog = useCatalog();\n  const layout = useGameLayout();\n  const stagger = useStagger();\n  const state = useUserState();\n  const offer = slot.Offer;\n  const width = wide ? (layout === \"phone\" ? 170 : 200) : undefined;\n\n  // An EMPTY slot is still drawn — the shelf must not jump when a window closes.\n  if (!offer)\n    return (\n      <div\n        style={{\n          ...panel,\n          width,\n          minHeight: 200,\n          display: \"grid\",\n          placeItems: \"center\",\n          opacity: 0.55,\n          scrollSnapAlign: \"start\",\n          flex: \"none\",\n          ...stagger(index),\n        }}\n      >\n        <Icon glyph=\"lock\" size={40} />\n      </div>\n    );\n\n  const rewards = grantLines(offer.Rewards);\n  const main = rewards[0];\n  const price = resourcePrice(offer);\n  const creditsPrice = creditsPriceOf(offer);\n  const soldOut = offer.State?.SoldOut === true;\n  const readyIn = countdown(offer.State?.AvailableAtUtc ?? null, now);\n  const free = isFree(offer);\n  const disabled = soldOut || readyIn !== null;\n  const affordable = canAfford(price, state?.InventoryV2?.VirtualCurrencies);\n  const name = catalog.localize(offer.Identity?.DisplayName ?? offer.OfferID);\n  const remaining = offer.State?.RemainingToday ?? offer.State?.RemainingTotal;\n\n  // The sheet's shop card: a light-blue plate in the ink frame (green when free), the name on top,\n  // the prize big in the middle, the price at the bottom; a sold-out card is dimmed under the stamp.\n  const [top, deep] = TONES[free ? \"green\" : \"blue\"];\n  return (\n    <div\n      className={free && !disabled ? \"idos-shine\" : undefined}\n      style={{\n        position: \"relative\",\n        width,\n        flex: wide ? \"none\" : undefined,\n        scrollSnapAlign: \"start\",\n        padding: \"10px 10px 12px\",\n        display: \"grid\",\n        gap: 8,\n        justifyItems: \"center\",\n        borderRadius: 12,\n        border: inkFrame,\n        background: `linear-gradient(180deg, color-mix(in srgb, ${top} 55%, #fff) 0%, ${top} 38%, ${deep} 100%)`,\n        boxShadow: `inset 0 -4px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.45)`,\n        ...stagger(index),\n      }}\n    >\n      <div\n        style={{\n          ...inked,\n          fontSize: 16,\n          textAlign: \"center\",\n          minHeight: 36,\n          display: \"grid\",\n          placeItems: \"center\",\n        }}\n      >\n        {name}\n      </div>\n      <div\n        className={free && !disabled ? \"idos-bounce\" : undefined}\n        style={{\n          width: 84,\n          height: 84,\n          display: \"grid\",\n          placeItems: \"center\",\n          borderRadius: 20,\n          background:\n            \"radial-gradient(circle, rgba(255,255,255,.18), transparent 70%)\",\n        }}\n      >\n        <Icon\n          glyph={\n            main\n              ? main.kind === \"token\"\n                ? tokenGlyph(main)\n                : catalog.iconOf(main)\n              : \"gift\"\n          }\n          size={62}\n        />\n      </div>\n      <div style={{ minHeight: 22 }}>\n        <ResourceList lines={rewards} />\n      </div>\n      {remaining != null ? (\n        <div\n          style={{\n            ...outlined,\n            fontSize: 11,\n            color: v.textDim,\n            fontWeight: 700,\n          }}\n        >\n          {t(\"left\")}: {remaining}\n        </div>\n      ) : null}\n      <Button\n        tone=\"gold\"\n        disabled={disabled}\n        busy={busy}\n        attract={free && !disabled}\n        onClick={() => onPick(offer)}\n        style={{ width: \"100%\", visibility: soldOut ? \"hidden\" : undefined }}\n      >\n        {soldOut ? (\n          t(\"soldOut\")\n        ) : readyIn ? (\n          `${t(\"readyIn\")} ${readyIn}`\n        ) : free ? (\n          t(\"free\")\n        ) : creditsPrice != null ? (\n          <CreditsPrice\n            amount={creditsPrice}\n            label={t(\"currencyName\")}\n            size={20}\n          />\n        ) : (\n          <ResourceList lines={price} size={20} dimIf={() => !affordable} />\n        )}\n      </Button>\n      {soldOut ? (\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            borderRadius: 9,\n            background: `color-mix(in srgb, ${v.bgBottom} 55%, transparent)`,\n            display: \"grid\",\n            placeItems: \"center\",\n          }}\n        >\n          <SoldOutStamp />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction ConfirmPurchase({\n  picked,\n  onReload,\n  onClose,\n}: {\n  picked: Picked;\n  onReload: () => Promise<void>;\n  onClose: () => void;\n}): ReactNode {\n  return (\n    <Popup title={t(\"confirmTitle\")} onClose={onClose}>\n      <OfferPreview offer={picked.offer} />\n      <BuyButton picked={picked} onReload={onReload} />\n    </Popup>\n  );\n}\n\n/** The offer's name and what it grants — the top of the confirmation popup. */\nfunction OfferPreview({ offer }: { offer: StorefrontOfferView }): ReactNode {\n  const catalog = useCatalog();\n  const rewards = grantLines(offer.Rewards);\n  const name = catalog.localize(offer.Identity?.DisplayName ?? offer.OfferID);\n  return (\n    <div style={{ display: \"grid\", justifyItems: \"center\", gap: 10 }}>\n      <div style={{ ...outlined, fontSize: 17, textAlign: \"center\" }}>\n        {name}\n      </div>\n      <div\n        style={{\n          display: \"flex\",\n          gap: 14,\n          flexWrap: \"wrap\",\n          justifyContent: \"center\",\n        }}\n      >\n        {rewards.map((line) => (\n          <div\n            key={`${line.kind}:${line.id}`}\n            style={{ display: \"grid\", justifyItems: \"center\", gap: 4 }}\n          >\n            <Icon\n              glyph={\n                line.kind === \"token\" ? tokenGlyph(line) : catalog.iconOf(line)\n              }\n              size={54}\n            />\n            <span style={{ ...outlined, fontSize: 17 }}>×{line.amount}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/**\n * The site could not show its window (the game is not on idosgames.com): the request waits for the player on the\n * confirmation page. A link, not window.open after an await: the browser blocks popups that are not a direct tap.\n */\nfunction CreditsLink({ view }: { view: CreditsConfirmationView }): ReactNode {\n  return (\n    <div style={{ display: \"grid\", gap: 10, textAlign: \"center\" }}>\n      <span style={{ ...outlined, fontSize: 14 }}>\n        {t(\"creditsConfirmHint\")}\n      </span>\n      <a\n        href={view.Url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        style={{ textDecoration: \"none\" }}\n      >\n        <Button tone=\"gold\" size=\"lg\" style={{ width: \"100%\" }}>\n          {t(\"creditsConfirmOpen\")}\n        </Button>\n      </a>\n      <span style={{ ...outlined, fontSize: 13, opacity: 0.8 }}>\n        {t(\"creditsWaiting\")}\n      </span>\n    </div>\n  );\n}\n\n/** Buys an offer priced in game resources (or free). Aspis offers never get here — see `buyWithCredits`. */\nfunction BuyButton({\n  picked,\n  onReload,\n}: {\n  picked: Picked;\n  onReload: () => Promise<void>;\n}): ReactNode {\n  const client = useIDosGamesClient();\n  const close = usePopupClose();\n  const celebrate = useCelebrate();\n  const toast = useToast();\n  const play = useSound();\n  const kit = useUiKit();\n  const ref = useRef<HTMLDivElement>(null);\n  const [busy, setBusy] = useState(false);\n  const option = picked.offer.PriceOptions?.[0];\n  const price: ResourceLine[] = resourcePrice(picked.offer);\n  const free = isFree(picked.offer);\n\n  const buy = async () => {\n    setBusy(true);\n    const res = await client.store.purchase(picked.offer.OfferID, 1, {\n      selectedOptionID: option?.OptionID,\n      slot: slotOf(picked),\n    });\n    setBusy(false);\n    if (!res.ok) {\n      if (res.error === OFFER_NOT_IN_ROTATION) {\n        close();\n        await onReload(); // the shelf reshuffled — redraw silently\n        return;\n      }\n      toast(errorText(res.error), \"error\");\n      return;\n    }\n    play(\"purchase\");\n    kit.fx.burst(ref.current);\n    close();\n    const granted = grantedBy(res.data);\n    celebrate(granted.length > 0 ? granted : grantLines(picked.offer.Rewards));\n    await onReload();\n  };\n\n  return (\n    <div ref={ref}>\n      <Button\n        tone={free ? \"green\" : \"gold\"}\n        busy={busy}\n        attract\n        onClick={() => void buy()}\n        style={{ width: \"100%\" }}\n        size=\"lg\"\n      >\n        {free ? (\n          t(\"confirmFree\")\n        ) : (\n          <>\n            {t(\"confirmBuy\")} <ResourceList lines={price} size={20} />\n          </>\n        )}\n      </Button>\n    </div>\n  );\n}\n"
     },
     {
       "path": "module.meta.json",
-      "content": "{\n  \"id\": \"store\",\n  \"type\": \"feature\",\n  \"summary\": \"Shop screen for any game: the title's storefront with stores as tabs, offer cards, purchase confirmation and the reward animation.\",\n  \"description\": \"A ready shop for ANY game, built on the @idosgames/react/ui kit. It draws the storefront the server resolves for the player (client.store.getStorefront — rotation, limits, timers and badges are the server's), several stores as tabs, the first section of a store as a carousel and the rest as grids, a free daily gift that shines, sold-out and not-yet-available states with countdowns, a confirmation popup (a bottom sheet on phones) and the 'You got' animation where rewards fly to the balance counters. Registers itself as the 'store' feature of the game (ctx.features): the lobby of the base shows it as a tab, and any module can open it with ctx.features.open('store'). Its badge counts free offers waiting. Ships title-seed.json: a demo store with a daily gift, items and currency packs.\",\n  \"provides\": [\n    \"shop screen from the title storefront\",\n    \"several stores as tabs\",\n    \"offer carousel and grids with countdowns\",\n    \"free daily gift offer\",\n    \"purchase confirmation popup\",\n    \"reward animation with icons flying to balances\",\n    \"shop badge for free offers\",\n    \"demo store settings\"\n  ],\n  \"tags\": [\n    \"shop\",\n    \"store\",\n    \"storefront\",\n    \"purchase\",\n    \"offers\",\n    \"ui\",\n    \"screen\",\n    \"economy\"\n  ],\n  \"author\": {\n    \"name\": \"iDos Games\",\n    \"url\": \"https://idosgames.com\"\n  },\n  \"version\": \"0.1.3\"\n}\n"
+      "content": "{\n  \"id\": \"store\",\n  \"type\": \"feature\",\n  \"summary\": \"Shop screen for any game: the title's storefront with stores as tabs, offer cards, purchase confirmation and the reward animation.\",\n  \"description\": \"A ready shop for ANY game, built on the @idosgames/react/ui kit. It draws the storefront the server resolves for the player (client.store.getStorefront — rotation, limits, timers and badges are the server's), several stores as tabs, the first section of a store as a carousel and the rest as grids, a free daily gift that shines, sold-out and not-yet-available states with countdowns, a confirmation popup (a bottom sheet on phones) and the 'You got' animation where rewards fly to the balance counters. Registers itself as the 'store' feature of the game (ctx.features): the lobby of the base shows it as a tab, and any module can open it with ctx.features.open('store'). Its badge counts free offers waiting. Ships title-seed.json: a demo store with a daily gift, items and currency packs.\",\n  \"provides\": [\n    \"shop screen from the title storefront\",\n    \"several stores as tabs\",\n    \"offer carousel and grids with countdowns\",\n    \"free daily gift offer\",\n    \"purchase confirmation popup\",\n    \"reward animation with icons flying to balances\",\n    \"shop badge for free offers\",\n    \"demo store settings\"\n  ],\n  \"tags\": [\n    \"shop\",\n    \"store\",\n    \"storefront\",\n    \"purchase\",\n    \"offers\",\n    \"ui\",\n    \"screen\",\n    \"economy\"\n  ],\n  \"author\": {\n    \"name\": \"iDos Games\",\n    \"url\": \"https://idosgames.com\"\n  },\n  \"version\": \"0.1.4\"\n}\n"
     }
   ]
 }

package/registry/modules/tutorials.json

@@ -29,15 +29,15 @@
       "name": "iDos Games",
       "url": "https://idosgames.com"
     },
-    "version": "0.1.3"
+    "version": "0.1.4"
   },
   "dependencies": {
-    "@idosgames/core": "0.24.2",
-    "@idosgames/module-sdk": "0.13.1",
-    "@idosgames/react": "0.6.2",
+    "@idosgames/core": "0.25.0",
+    "@idosgames/module-sdk": "0.13.2",
+    "@idosgames/react": "0.6.3",
     "react": "19.2.7"
   },
-  "contentHash": "03421dee0e738bed7dbe18114b3609e4fe6fcf830f909827907d785c4bfaaa18",
+  "contentHash": "da4dbd714014f6a0f2a2d761ac737dc2e70f5c466ec05f9cc51194d3cd87f40f",
   "files": [
     {
       "path": "i18n.ts",
@@ -57,11 +57,11 @@
     },
     {
       "path": "TutorialOverlay.tsx",
-      "content": "import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport type { FeatureScreenProps } from \"@idosgames/module-sdk\";\nimport { useIDosGamesClient } from \"@idosgames/react\";\nimport {\n  Columns,\n  bundleLines,\n  Button,\n  Center,\n  EmptyState,\n  errorText,\n  Icon,\n  inked,\n  outlined,\n  panel,\n  Spinner,\n  useCatalog,\n  useCelebrate,\n  useStagger,\n  useToast,\n  useUiKit,\n  v,\n} from \"@idosgames/react/ui\";\nimport {\n  activeFlow,\n  anchorOf,\n  bubblePlacement,\n  canTapNext,\n  stepCounter,\n  stepText,\n  type FlowView,\n  type Rect,\n} from \"./model\";\nimport { t } from \"./i18n\";\n\n// The tutorial overlay (Unity Runtime/UI/Tutorial): the current step of the running flow as a hint\n// bubble next to the element marked data-tutorial-anchor=\"{AnchorID}\" — any element of any module,\n// like Unity's TutorialAnchorRegistry. It waits while a popup is open, \"Next\" only on steps the\n// player closes, and the reward when the flow ends. The \"Tutorials\" feature replays a flow.\n\n/** Tutorial state shared by the overlay and the replay screen. */\nexport function createTutorialStore() {\n  let flows: FlowView[] | null = null;\n  const listeners = new Set<() => void>();\n  return {\n    get: () => flows,\n    set(next: FlowView[] | null) {\n      flows = next;\n      for (const l of listeners) l();\n    },\n    subscribe(l: () => void) {\n      listeners.add(l);\n      return () => {\n        listeners.delete(l);\n      };\n    },\n  };\n}\nexport type TutorialStore = ReturnType<typeof createTutorialStore>;\n\nconst BUBBLE = { width: 320, height: 150 };\n\n/** What an applied operation granted: the standard part plus premium bundles. */\nfunction operationLines(op: unknown) {\n  const grant = (\n    op as\n      | {\n          Grant?: {\n            Standard?: unknown;\n            PremiumTiers?: Array<{ Resources?: unknown } | null> | null;\n          } | null;\n        }\n      | null\n      | undefined\n  )?.Grant;\n  return [\n    ...bundleLines(grant?.Standard as never),\n    ...(grant?.PremiumTiers ?? []).flatMap((t) =>\n      bundleLines(t?.Resources as never),\n    ),\n  ];\n}\n\nfunction modalOpen(): boolean {\n  return document.querySelector(\"[data-idos-ui-layer] [role=dialog]\") !== null;\n}\n\nexport function makeTutorialOverlay(store: TutorialStore) {\n  return function TutorialOverlay(): ReactNode {\n    const client = useIDosGamesClient();\n    const catalog = useCatalog();\n    const celebrate = useCelebrate();\n    const toast = useToast();\n    const kit = useUiKit();\n    const [flows, setFlows] = useState<FlowView[] | null>(store.get());\n    const [rect, setRect] = useState<Rect | null>(null);\n    const [blocked, setBlocked] = useState(true);\n    const [busy, setBusy] = useState(false);\n    const shown = useRef(new Set<string>());\n\n    const load = useCallback(async () => {\n      const res = await client.tutorial.getUserTutorialState();\n      store.set(res.ok ? ((res.data.Flows ?? []) as FlowView[]) : []);\n    }, [client]);\n\n    useEffect(() => store.subscribe(() => setFlows(store.get())), []);\n    useEffect(() => {\n      void load();\n      // A SystemEvent step closes on a game action; the progress arrives with that action's reply.\n      const off = client.on(\"tutorial:systemProgress\", () => void load());\n      return () => off();\n    }, [client, load]);\n\n    const flow = activeFlow(flows);\n    const step = flow?.Status === \"InProgress\" ? flow.CurrentStep : null;\n    const anchor = anchorOf(step);\n\n    // Follow the anchor (it moves with layout, scroll and screen changes) and step aside for popups.\n    useEffect(() => {\n      if (!flow) return;\n      const tick = () => {\n        setBlocked(modalOpen());\n        const el = anchor\n          ? document.querySelector(\n              `[data-tutorial-anchor=\"${CSS.escape(anchor)}\"]`,\n            )\n          : null;\n        const r = el?.getBoundingClientRect();\n        setRect(\n          r && r.width > 0 && r.height > 0\n            ? { left: r.left, top: r.top, width: r.width, height: r.height }\n            : null,\n        );\n      };\n      tick();\n      const id = setInterval(tick, 250);\n      return () => clearInterval(id);\n    }, [flow?.FlowID, flow?.CurrentStepID, anchor]);\n\n    // The funnel measures time on step from this report — once per step shown.\n    useEffect(() => {\n      if (!flow || !flow.CurrentStepID || blocked) return;\n      const key = `${flow.FlowID}:${flow.CurrentStepID}`;\n      if (shown.current.has(key)) return;\n      shown.current.add(key);\n      kit.play(\"notify\");\n      void client.tutorial.reportStepShown(flow.FlowID, flow.CurrentStepID);\n    }, [flow?.FlowID, flow?.CurrentStepID, blocked]);\n\n    if (!flow || blocked) return null;\n\n    const act = async (\n      fn: () => Promise<{ ok: boolean; error?: string; data?: unknown }>,\n    ) => {\n      setBusy(true);\n      const res = await fn();\n      setBusy(false);\n      if (!res.ok) return toast(errorText(res.error ?? \"\"), \"error\");\n      await load();\n    };\n\n    const text = step\n      ? stepText(step, (k) => catalog.localize(k))\n      : { title: t(\"done\"), body: \"\" };\n    const place = bubblePlacement(\n      step ? rect : null,\n      { width: window.innerWidth, height: window.innerHeight },\n      BUBBLE,\n    );\n    const pad = 6;\n\n    return (\n      <div\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 45,\n          pointerEvents: \"none\",\n        }}\n        data-idos-tutorial\n      >\n        {step && rect ? (\n          <div\n            className=\"idos-pulse\"\n            style={{\n              position: \"fixed\",\n              left: rect.left - pad,\n              top: rect.top - pad,\n              width: rect.width + pad * 2,\n              height: rect.height + pad * 2,\n              borderRadius: 14,\n              border: `3px solid ${v.gold}`,\n              boxShadow: `0 0 0 9999px ${v.backdrop}`,\n              transition: \"all .25s ease\",\n            }}\n          />\n        ) : (\n          <div\n            style={{\n              position: \"fixed\",\n              inset: 0,\n              background: v.backdrop,\n            }}\n          />\n        )}\n        {/* The sheet's \"Welcome!\" bubble: white in the ink frame, dark letters, a light-blue lip. */}\n        <div\n          style={{\n            position: \"fixed\",\n            left: place.left,\n            top: place.top,\n            width: Math.min(BUBBLE.width, window.innerWidth - 24),\n            padding: \"14px 16px 12px\",\n            display: \"grid\",\n            gap: 8,\n            background: \"#ffffff\",\n            border: `${v.outline} solid ${v.ink}`,\n            borderRadius: 14,\n            boxShadow: `inset 0 -5px 0 color-mix(in srgb, ${v.blue} 35%, #fff), 0 4px 0 ${v.shadow}`,\n            color: \"#17193a\",\n            pointerEvents: \"auto\",\n            animation: `idos-pop-in ${v.slow} ease both`,\n            boxSizing: \"border-box\",\n          }}\n        >\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n            <Icon glyph={step ? \"bulb\" : \"trophy\"} size={26} />\n            <div style={{ flex: 1, fontWeight: 900, fontSize: 17 }}>\n              {text.title}\n            </div>\n            {step ? (\n              <span\n                style={{ fontWeight: 900, fontSize: 12, color: v.blueDeep }}\n              >\n                {stepCounter(flow)}\n              </span>\n            ) : null}\n          </div>\n          {text.body ? (\n            <div style={{ fontSize: 15, fontWeight: 800, lineHeight: 1.35 }}>\n              {text.body}\n            </div>\n          ) : null}\n          <div\n            style={{\n              display: \"flex\",\n              gap: 8,\n              justifyContent: \"flex-end\",\n              alignItems: \"center\",\n            }}\n          >\n            {step && flow.CanSkip ? (\n              // The sheet's \"SKIP ≫\": outlined white letters, no plate.\n              <button\n                type=\"button\"\n                className=\"idos-press\"\n                disabled={busy}\n                onClick={() =>\n                  void act(() => client.tutorial.skipFlow(flow.FlowID))\n                }\n                style={{\n                  ...inked,\n                  border: \"none\",\n                  background: \"none\",\n                  cursor: \"pointer\",\n                  fontSize: 16,\n                  textTransform: \"uppercase\",\n                  marginRight: \"auto\",\n                  padding: \"4px 2px\",\n                  color: v.blue,\n                }}\n              >\n                {t(\"skip\")} ≫\n              </button>\n            ) : null}\n            {step ? (\n              canTapNext(step) ? (\n                <Button\n                  size=\"sm\"\n                  tone=\"green\"\n                  attract\n                  busy={busy}\n                  onClick={() =>\n                    void act(() =>\n                      client.tutorial.completeStep(\n                        flow.FlowID,\n                        flow.CurrentStepID!,\n                      ),\n                    )\n                  }\n                  data-tutorial-anchor=\"tutorial:next\"\n                >\n                  {t(\"next\")}\n                </Button>\n              ) : (\n                <span\n                  style={{ fontWeight: 800, fontSize: 12, color: v.blueDeep }}\n                >\n                  {t(\"waiting\")}\n                </span>\n              )\n            ) : (\n              <Button\n                size=\"sm\"\n                tone=\"gold\"\n                attract\n                busy={busy}\n                onClick={() =>\n                  void act(async () => {\n                    const res = await client.tutorial.claimFlowReward(\n                      flow.FlowID,\n                    );\n                    // The payout sits in `Granted` (an operation), not where the generic reader looks.\n                    if (res.ok) celebrate(operationLines(res.data.Granted));\n                    return res;\n                  })\n                }\n              >\n                {t(\"claim\")}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  };\n}\n\ntype FlowDef = {\n  Identity?: { DisplayName?: string | null; SortOrder?: number | null } | null;\n  Policy?: { RestartPolicy?: string | null } | null;\n};\n\n/** \"Tutorials\": every flow of the title with its status; replay where the title allows it. */\nexport function makeTutorialsScreen(store: TutorialStore) {\n  return function TutorialsScreen(_: FeatureScreenProps): ReactNode {\n    const client = useIDosGamesClient();\n    const catalog = useCatalog();\n    const toast = useToast();\n    const stagger = useStagger();\n    const [defs, setDefs] = useState<Record<string, FlowDef | null> | null>(\n      null,\n    );\n    const [flows, setFlows] = useState<FlowView[]>([]);\n    const [busy, setBusy] = useState<string | null>(null);\n    const load = useCallback(async () => {\n      // Listing must not start anything — autoStart off.\n      const [d, s] = await Promise.all([\n        client.tutorial.getTutorialDefinitions(),\n        client.tutorial.getUserTutorialState(false),\n      ]);\n      setDefs(\n        d.ok ? ((d.data.Flows ?? {}) as Record<string, FlowDef | null>) : {},\n      );\n      setFlows(s.ok ? ((s.data.Flows ?? []) as FlowView[]) : []);\n    }, [client]);\n    useEffect(() => {\n      void load();\n    }, [load]);\n    if (!defs)\n      return (\n        <Center>\n          <Spinner />\n        </Center>\n      );\n    const ids = Object.keys(defs).sort(\n      (a, b) =>\n        Number(defs[a]?.Identity?.SortOrder ?? 0) -\n        Number(defs[b]?.Identity?.SortOrder ?? 0),\n    );\n    if (ids.length === 0)\n      return <EmptyState glyph=\"bulb\" text={t(\"noTutorials\")} />;\n    const replay = async (id: string) => {\n      setBusy(id);\n      const reset = await client.tutorial.resetFlow(id);\n      const started = reset.ok ? await client.tutorial.startFlow(id) : reset;\n      setBusy(null);\n      if (!started.ok) return toast(errorText(started.error), \"error\");\n      const s = await client.tutorial.getUserTutorialState(false);\n      if (s.ok) store.set((s.data.Flows ?? []) as FlowView[]);\n      await load();\n    };\n    return (\n      <Columns gap={8} min={340}>\n        {ids.map((id, i) => {\n          const view = flows.find((f) => f.FlowID === id);\n          const status = view?.Status ?? \"NotStarted\";\n          const label =\n            status === \"Completed\"\n              ? t(\"completed\")\n              : status === \"InProgress\"\n                ? t(\"inProgress\")\n                : status === \"Skipped\"\n                  ? t(\"skipped\")\n                  : t(\"notStarted\");\n          const canReplay =\n            defs[id]?.Policy?.RestartPolicy === \"OnRequest\" &&\n            (status === \"Completed\" || status === \"Skipped\");\n          return (\n            <div\n              key={id}\n              style={{\n                ...panel,\n                padding: 10,\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 10,\n                ...stagger(i),\n              }}\n            >\n              <Icon glyph=\"bulb\" size={28} />\n              <div style={{ flex: 1, minWidth: 0 }}>\n                <div style={{ ...outlined, fontSize: 15 }}>\n                  {catalog.localize(defs[id]?.Identity?.DisplayName ?? id)}\n                </div>\n                <div style={{ ...outlined, fontSize: 12, color: v.textDim }}>\n                  {label}\n                </div>\n              </div>\n              {canReplay ? (\n                <Button\n                  size=\"sm\"\n                  tone=\"blue\"\n                  busy={busy === id}\n                  onClick={() => void replay(id)}\n                >\n                  {t(\"replay\")}\n                </Button>\n              ) : null}\n            </div>\n          );\n        })}\n      </Columns>\n    );\n  };\n}\n"
+      "content": "import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport type { FeatureScreenProps } from \"@idosgames/module-sdk\";\nimport { useIDosGamesClient } from \"@idosgames/react\";\nimport {\n  Columns,\n  bundleLines,\n  Button,\n  Center,\n  EmptyState,\n  errorText,\n  Icon,\n  inked,\n  outlined,\n  panel,\n  Spinner,\n  useCatalog,\n  useCelebrate,\n  useStagger,\n  useToast,\n  useUiKit,\n  v,\n} from \"@idosgames/react/ui\";\nimport {\n  activeFlow,\n  anchorOf,\n  bubblePlacement,\n  canTapNext,\n  stepCounter,\n  stepText,\n  type FlowView,\n  type Rect,\n} from \"./model\";\nimport { t } from \"./i18n\";\n\n// The tutorial overlay (Unity Runtime/UI/Tutorial): the current step of the running flow as a hint\n// bubble next to the element marked data-tutorial-anchor=\"{AnchorID}\" — any element of any module,\n// like Unity's TutorialAnchorRegistry. It waits while a popup is open, \"Next\" only on steps the\n// player closes, and the reward when the flow ends. The \"Tutorials\" feature replays a flow.\n\n/** Tutorial state shared by the overlay and the replay screen. */\nexport function createTutorialStore() {\n  let flows: FlowView[] | null = null;\n  const listeners = new Set<() => void>();\n  return {\n    get: () => flows,\n    set(next: FlowView[] | null) {\n      flows = next;\n      for (const l of listeners) l();\n    },\n    subscribe(l: () => void) {\n      listeners.add(l);\n      return () => {\n        listeners.delete(l);\n      };\n    },\n  };\n}\nexport type TutorialStore = ReturnType<typeof createTutorialStore>;\n\nconst BUBBLE = { width: 320, height: 150 };\n\n/** What an applied operation granted: the standard part plus premium bundles. */\nfunction operationLines(op: unknown) {\n  const grant = (\n    op as\n      | {\n          Grant?: {\n            Standard?: unknown;\n            PremiumTiers?: Array<{ Resources?: unknown } | null> | null;\n          } | null;\n        }\n      | null\n      | undefined\n  )?.Grant;\n  return [\n    ...bundleLines(grant?.Standard as never),\n    ...(grant?.PremiumTiers ?? []).flatMap((t) =>\n      bundleLines(t?.Resources as never),\n    ),\n  ];\n}\n\nfunction modalOpen(): boolean {\n  return document.querySelector(\"[data-idos-ui-layer] [role=dialog]\") !== null;\n}\n\nexport function makeTutorialOverlay(store: TutorialStore) {\n  return function TutorialOverlay(): ReactNode {\n    const client = useIDosGamesClient();\n    const catalog = useCatalog();\n    const celebrate = useCelebrate();\n    const toast = useToast();\n    const kit = useUiKit();\n    const [flows, setFlows] = useState<FlowView[] | null>(store.get());\n    const [rect, setRect] = useState<Rect | null>(null);\n    const [blocked, setBlocked] = useState(true);\n    const [busy, setBusy] = useState(false);\n    const shown = useRef(new Set<string>());\n\n    const load = useCallback(async () => {\n      const res = await client.tutorial.getUserTutorialState();\n      store.set(res.ok ? ((res.data.Flows ?? []) as FlowView[]) : []);\n    }, [client]);\n\n    useEffect(() => store.subscribe(() => setFlows(store.get())), []);\n    useEffect(() => {\n      void load();\n      // A SystemEvent step closes on a game action; the progress arrives with that action's reply.\n      const off = client.on(\"tutorial:systemProgress\", () => void load());\n      return () => off();\n    }, [client, load]);\n\n    const flow = activeFlow(flows);\n    const step = flow?.Status === \"InProgress\" ? flow.CurrentStep : null;\n    const anchor = anchorOf(step);\n\n    // Follow the anchor (it moves with layout, scroll and screen changes) and step aside for popups.\n    useEffect(() => {\n      if (!flow) return;\n      const tick = () => {\n        setBlocked(modalOpen());\n        const el = anchor\n          ? document.querySelector(\n              `[data-tutorial-anchor=\"${CSS.escape(anchor)}\"]`,\n            )\n          : null;\n        const r = el?.getBoundingClientRect();\n        const next =\n          r && r.width > 0 && r.height > 0\n            ? { left: r.left, top: r.top, width: r.width, height: r.height }\n            : null;\n        // the same box keeps the same object: a new one every 250 ms re-rendered the overlay (and the\n        // spotlight over the whole screen) four times a second on a phone for nothing\n        setRect((prev) =>\n          prev &&\n          next &&\n          prev.left === next.left &&\n          prev.top === next.top &&\n          prev.width === next.width &&\n          prev.height === next.height\n            ? prev\n            : next,\n        );\n      };\n      tick();\n      const id = setInterval(tick, 250);\n      return () => clearInterval(id);\n    }, [flow?.FlowID, flow?.CurrentStepID, anchor]);\n\n    // The funnel measures time on step from this report — once per step shown.\n    useEffect(() => {\n      if (!flow || !flow.CurrentStepID || blocked) return;\n      const key = `${flow.FlowID}:${flow.CurrentStepID}`;\n      if (shown.current.has(key)) return;\n      shown.current.add(key);\n      kit.play(\"notify\");\n      void client.tutorial.reportStepShown(flow.FlowID, flow.CurrentStepID);\n    }, [flow?.FlowID, flow?.CurrentStepID, blocked]);\n\n    if (!flow || blocked) return null;\n\n    const act = async (\n      fn: () => Promise<{ ok: boolean; error?: string; data?: unknown }>,\n    ) => {\n      setBusy(true);\n      const res = await fn();\n      setBusy(false);\n      if (!res.ok) return toast(errorText(res.error ?? \"\"), \"error\");\n      await load();\n    };\n\n    const text = step\n      ? stepText(step, (k) => catalog.localize(k))\n      : { title: t(\"done\"), body: \"\" };\n    const place = bubblePlacement(\n      step ? rect : null,\n      { width: window.innerWidth, height: window.innerHeight },\n      BUBBLE,\n    );\n    const pad = 6;\n\n    return (\n      <div\n        style={{\n          position: \"fixed\",\n          inset: 0,\n          zIndex: 45,\n          pointerEvents: \"none\",\n        }}\n        data-idos-tutorial\n      >\n        {step && rect ? (\n          <div\n            className=\"idos-pulse\"\n            style={{\n              position: \"fixed\",\n              left: rect.left - pad,\n              top: rect.top - pad,\n              width: rect.width + pad * 2,\n              height: rect.height + pad * 2,\n              borderRadius: 14,\n              border: `3px solid ${v.gold}`,\n              boxShadow: `0 0 0 9999px ${v.backdrop}`,\n              transition: \"all .25s ease\",\n            }}\n          />\n        ) : (\n          <div\n            style={{\n              position: \"fixed\",\n              inset: 0,\n              background: v.backdrop,\n            }}\n          />\n        )}\n        {/* The sheet's \"Welcome!\" bubble: white in the ink frame, dark letters, a light-blue lip. */}\n        <div\n          style={{\n            position: \"fixed\",\n            left: place.left,\n            top: place.top,\n            width: Math.min(BUBBLE.width, window.innerWidth - 24),\n            padding: \"14px 16px 12px\",\n            display: \"grid\",\n            gap: 8,\n            background: \"#ffffff\",\n            border: `${v.outline} solid ${v.ink}`,\n            borderRadius: 14,\n            boxShadow: `inset 0 -5px 0 color-mix(in srgb, ${v.blue} 35%, #fff)`,\n            color: \"#17193a\",\n            pointerEvents: \"auto\",\n            animation: `idos-pop-in ${v.slow} ease both`,\n            boxSizing: \"border-box\",\n          }}\n        >\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n            <Icon glyph={step ? \"bulb\" : \"trophy\"} size={26} />\n            <div style={{ flex: 1, fontWeight: 900, fontSize: 17 }}>\n              {text.title}\n            </div>\n            {step ? (\n              <span\n                style={{ fontWeight: 900, fontSize: 12, color: v.blueDeep }}\n              >\n                {stepCounter(flow)}\n              </span>\n            ) : null}\n          </div>\n          {text.body ? (\n            <div style={{ fontSize: 15, fontWeight: 800, lineHeight: 1.35 }}>\n              {text.body}\n            </div>\n          ) : null}\n          <div\n            style={{\n              display: \"flex\",\n              gap: 8,\n              justifyContent: \"flex-end\",\n              alignItems: \"center\",\n            }}\n          >\n            {step && flow.CanSkip ? (\n              // The sheet's \"SKIP ≫\": outlined white letters, no plate.\n              <button\n                type=\"button\"\n                className=\"idos-press\"\n                disabled={busy}\n                onClick={() =>\n                  void act(() => client.tutorial.skipFlow(flow.FlowID))\n                }\n                style={{\n                  ...inked,\n                  border: \"none\",\n                  background: \"none\",\n                  cursor: \"pointer\",\n                  fontSize: 16,\n                  textTransform: \"uppercase\",\n                  marginRight: \"auto\",\n                  padding: \"4px 2px\",\n                  color: v.blue,\n                }}\n              >\n                {t(\"skip\")} ≫\n              </button>\n            ) : null}\n            {step ? (\n              canTapNext(step) ? (\n                <Button\n                  size=\"sm\"\n                  tone=\"green\"\n                  attract\n                  busy={busy}\n                  onClick={() =>\n                    void act(() =>\n                      client.tutorial.completeStep(\n                        flow.FlowID,\n                        flow.CurrentStepID!,\n                      ),\n                    )\n                  }\n                  data-tutorial-anchor=\"tutorial:next\"\n                >\n                  {t(\"next\")}\n                </Button>\n              ) : (\n                <span\n                  style={{ fontWeight: 800, fontSize: 12, color: v.blueDeep }}\n                >\n                  {t(\"waiting\")}\n                </span>\n              )\n            ) : (\n              <Button\n                size=\"sm\"\n                tone=\"gold\"\n                attract\n                busy={busy}\n                onClick={() =>\n                  void act(async () => {\n                    const res = await client.tutorial.claimFlowReward(\n                      flow.FlowID,\n                    );\n                    // The payout sits in `Granted` (an operation), not where the generic reader looks.\n                    if (res.ok) celebrate(operationLines(res.data.Granted));\n                    return res;\n                  })\n                }\n              >\n                {t(\"claim\")}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  };\n}\n\ntype FlowDef = {\n  Identity?: { DisplayName?: string | null; SortOrder?: number | null } | null;\n  Policy?: { RestartPolicy?: string | null } | null;\n};\n\n/** \"Tutorials\": every flow of the title with its status; replay where the title allows it. */\nexport function makeTutorialsScreen(store: TutorialStore) {\n  return function TutorialsScreen(_: FeatureScreenProps): ReactNode {\n    const client = useIDosGamesClient();\n    const catalog = useCatalog();\n    const toast = useToast();\n    const stagger = useStagger();\n    const [defs, setDefs] = useState<Record<string, FlowDef | null> | null>(\n      null,\n    );\n    const [flows, setFlows] = useState<FlowView[]>([]);\n    const [busy, setBusy] = useState<string | null>(null);\n    const load = useCallback(async () => {\n      // Listing must not start anything — autoStart off.\n      const [d, s] = await Promise.all([\n        client.tutorial.getTutorialDefinitions(),\n        client.tutorial.getUserTutorialState(false),\n      ]);\n      setDefs(\n        d.ok ? ((d.data.Flows ?? {}) as Record<string, FlowDef | null>) : {},\n      );\n      setFlows(s.ok ? ((s.data.Flows ?? []) as FlowView[]) : []);\n    }, [client]);\n    useEffect(() => {\n      void load();\n    }, [load]);\n    if (!defs)\n      return (\n        <Center>\n          <Spinner />\n        </Center>\n      );\n    const ids = Object.keys(defs).sort(\n      (a, b) =>\n        Number(defs[a]?.Identity?.SortOrder ?? 0) -\n        Number(defs[b]?.Identity?.SortOrder ?? 0),\n    );\n    if (ids.length === 0)\n      return <EmptyState glyph=\"bulb\" text={t(\"noTutorials\")} />;\n    const replay = async (id: string) => {\n      setBusy(id);\n      const reset = await client.tutorial.resetFlow(id);\n      const started = reset.ok ? await client.tutorial.startFlow(id) : reset;\n      setBusy(null);\n      if (!started.ok) return toast(errorText(started.error), \"error\");\n      const s = await client.tutorial.getUserTutorialState(false);\n      if (s.ok) store.set((s.data.Flows ?? []) as FlowView[]);\n      await load();\n    };\n    return (\n      <Columns gap={8} min={340}>\n        {ids.map((id, i) => {\n          const view = flows.find((f) => f.FlowID === id);\n          const status = view?.Status ?? \"NotStarted\";\n          const label =\n            status === \"Completed\"\n              ? t(\"completed\")\n              : status === \"InProgress\"\n                ? t(\"inProgress\")\n                : status === \"Skipped\"\n                  ? t(\"skipped\")\n                  : t(\"notStarted\");\n          const canReplay =\n            defs[id]?.Policy?.RestartPolicy === \"OnRequest\" &&\n            (status === \"Completed\" || status === \"Skipped\");\n          return (\n            <div\n              key={id}\n              style={{\n                ...panel,\n                padding: 10,\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 10,\n                ...stagger(i),\n              }}\n            >\n              <Icon glyph=\"bulb\" size={28} />\n              <div style={{ flex: 1, minWidth: 0 }}>\n                <div style={{ ...outlined, fontSize: 15 }}>\n                  {catalog.localize(defs[id]?.Identity?.DisplayName ?? id)}\n                </div>\n                <div style={{ ...outlined, fontSize: 12, color: v.textDim }}>\n                  {label}\n                </div>\n              </div>\n              {canReplay ? (\n                <Button\n                  size=\"sm\"\n                  tone=\"blue\"\n                  busy={busy === id}\n                  onClick={() => void replay(id)}\n                >\n                  {t(\"replay\")}\n                </Button>\n              ) : null}\n            </div>\n          );\n        })}\n      </Columns>\n    );\n  };\n}\n"
     },
     {
       "path": "module.meta.json",
-      "content": "{\n  \"id\": \"tutorials\",\n  \"type\": \"feature\",\n  \"summary\": \"Onboarding for any game: hint bubbles next to marked elements, step by step, skip, a completion reward and a replay list.\",\n  \"description\": \"A ready onboarding overlay (Unity Runtime/UI/Tutorial, TutorialAnchorRegistry) for ANY game, built on the @idosgames/react/ui kit and client.tutorial. It shows the current step of the running flow as a hint bubble next to the element marked data-tutorial-anchor=\\\"{AnchorID}\\\" — any element of any module (lobby tabs are tab:{featureID}, the profile button lobby:profile, a game's Play button play:{modeID}, the mini-game's round play:start) — with the rest of the screen dimmed. It follows the element as the layout changes, steps aside while a popup is open, offers 'Next' only on steps the player closes (a SystemEvent step waits for the real game action), 'Skip' when the flow allows it, and the reward when the flow ends; every shown step is reported for the funnel. Flows start by themselves when the title says so. The 'Tutorials' feature lists the flows and replays the ones the title lets the player restart. Ships title-seed.json: a five-step welcome tour of the lobby with a gem reward.\",\n  \"provides\": [\n    \"tutorial overlay with a highlighted element\",\n    \"hint bubble with next and skip\",\n    \"any element as an anchor via data-tutorial-anchor\",\n    \"tutorial completion reward\",\n    \"tutorials list with replay\",\n    \"demo welcome tour\"\n  ],\n  \"tags\": [\"tutorial\", \"onboarding\", \"ftue\", \"coach-marks\", \"hints\", \"ui\"],\n  \"author\": {\n    \"name\": \"iDos Games\",\n    \"url\": \"https://idosgames.com\"\n  },\n  \"version\": \"0.1.3\"\n}\n"
+      "content": "{\n  \"id\": \"tutorials\",\n  \"type\": \"feature\",\n  \"summary\": \"Onboarding for any game: hint bubbles next to marked elements, step by step, skip, a completion reward and a replay list.\",\n  \"description\": \"A ready onboarding overlay (Unity Runtime/UI/Tutorial, TutorialAnchorRegistry) for ANY game, built on the @idosgames/react/ui kit and client.tutorial. It shows the current step of the running flow as a hint bubble next to the element marked data-tutorial-anchor=\\\"{AnchorID}\\\" — any element of any module (lobby tabs are tab:{featureID}, the profile button lobby:profile, a game's Play button play:{modeID}, the mini-game's round play:start) — with the rest of the screen dimmed. It follows the element as the layout changes, steps aside while a popup is open, offers 'Next' only on steps the player closes (a SystemEvent step waits for the real game action), 'Skip' when the flow allows it, and the reward when the flow ends; every shown step is reported for the funnel. Flows start by themselves when the title says so. The 'Tutorials' feature lists the flows and replays the ones the title lets the player restart. Ships title-seed.json: a five-step welcome tour of the lobby with a gem reward.\",\n  \"provides\": [\n    \"tutorial overlay with a highlighted element\",\n    \"hint bubble with next and skip\",\n    \"any element as an anchor via data-tutorial-anchor\",\n    \"tutorial completion reward\",\n    \"tutorials list with replay\",\n    \"demo welcome tour\"\n  ],\n  \"tags\": [\"tutorial\", \"onboarding\", \"ftue\", \"coach-marks\", \"hints\", \"ui\"],\n  \"author\": {\n    \"name\": \"iDos Games\",\n    \"url\": \"https://idosgames.com\"\n  },\n  \"version\": \"0.1.4\"\n}\n"
     }
   ]
 }

package/registry/modules/video-studio.json

@@ -54,10 +54,10 @@
     "version": "0.1.1"
   },
   "dependencies": {
-    "@idosgames/characters": "0.1.1",
-    "@idosgames/core": "0.24.2",
-    "@idosgames/module-sdk": "0.13.1",
-    "@idosgames/react": "0.6.2",
+    "@idosgames/characters": "0.1.2",
+    "@idosgames/core": "0.25.0",
+    "@idosgames/module-sdk": "0.13.2",
+    "@idosgames/react": "0.6.3",
     "@idosgames/timeline": "0.1.0",
     "react": "19.2.7",
     "three": "0.185.1"