@salla.sa/twilight-theme-engine 1.0.85 → 1.0.86

package/dist/tanstack.js

@@ -1,13 +1,14 @@
-export { tanstackDocumentAdapter as attrs, createRouter, createTwilightRootRoute, useTanstackDocumentAttrs as useAttrs } from './chunk-SDFDS4Q3.js';
+export { tanstackDocumentAdapter as attrs, createRouter, createTwilightRootRoute, useTanstackDocumentAttrs as useAttrs } from './chunk-4WVJJ7SN.js';
+import './chunk-Z4Y55HWX.js';
+import { CRITICAL_STYLE_HREF } from './chunk-4FJGZQD3.js';
 import { requestHostOf } from './chunk-UGLZPGPF.js';
 export { TanStackLinkAdapter, TanStackNavigationProvider, createTanStackLinkAdapter } from './chunk-UGLZPGPF.js';
-import './chunk-Z4Y55HWX.js';
 export { tanstackHeadAdapter as head, withHead } from './chunk-3LXB4VFK.js';
 import './chunk-MKVCFBVF.js';
 import './chunk-BNI6SKFL.js';
 import './chunk-OH2L4U2C.js';
 import './chunk-556OT3BN.js';
-import { rootHead } from './chunk-22SH7OVF.js';
+import { rootHead } from './chunk-E7WWO3V3.js';
 import './chunk-RV54D2D7.js';
 import './chunk-ZVZGLEZ6.js';
 import './chunk-5G7NYNX6.js';
@@ -15,9 +16,10 @@ import './chunk-GD26FI4J.js';
 import './chunk-TZ3E5BN4.js';
 import './chunk-6ZMNTJM3.js';
 import './chunk-OUW6WESU.js';
-import './chunk-QGOPTVV5.js';
 import './chunk-JWXJPJBO.js';
 export { mergeDocumentDescriptors as mergeAttrs } from './chunk-CW625T2E.js';
+import './chunk-IVBOLREE.js';
+import './chunk-QGOPTVV5.js';
 import './chunk-TYNZ5B2B.js';
 import './chunk-BYMOPN2S.js';
 import './chunk-6N33IKYP.js';
@@ -27,9 +29,36 @@ export { getTwilightContext, runWithTwilightContext, updateTwilightContext } fro
 import './chunk-T72DAX7R.js';
 import './chunk-DF6FBKDN.js';
 import './chunk-DGUM43GV.js';
+import { useState, useSyncExternalStore, createElement } from 'react';
+import { useRouterState, useTags, useRouter, Asset } from '@tanstack/react-router';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createMiddleware } from '@tanstack/react-start';
 import { tsrStartManifest } from 'tanstack-start-manifest:v';
 
+var subscribeNothing = () => () => {
+};
+function ThemeStylesheet({ href, critical = {} }) {
+  const routeId = useRouterState({
+    select: (state) => state.matches.find((match) => Object.hasOwn(critical, match.routeId))?.routeId
+  });
+  const [criticalRoute] = useState(routeId);
+  const hydrated = useSyncExternalStore(
+    subscribeNothing,
+    () => true,
+    () => false
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    criticalRoute && // Its own precedence, so it lands before the full sheet; React renders the CSS verbatim.
+    /* @__PURE__ */ jsx("style", { href: CRITICAL_STYLE_HREF, precedence: "critical", children: critical[criticalRoute] }),
+    (!criticalRoute || hydrated) && /* @__PURE__ */ jsx("link", { id: "salla-theme-css", rel: "stylesheet", href, precedence: "default" }),
+    criticalRoute && /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx("link", { rel: "stylesheet", href }) })
+  ] });
+}
+function ThemeHeadContent() {
+  const tags = useTags();
+  const nonce = useRouter().options.ssr?.nonce;
+  return tags.filter((tag) => !(tag.tag === "link" && tag.attrs?.rel === "modulepreload")).map((tag) => /* @__PURE__ */ createElement(Asset, { ...tag, key: `tsr-meta-${JSON.stringify(tag)}`, nonce }));
+}
 var twilightMiddleware = (options) => {
   const cookieName = options?.cookieName ?? AUTH_TOKEN_COOKIE_NAME;
   return createMiddleware().server(({ request, next }) => {
@@ -143,6 +172,6 @@ var earlyHintsMiddleware = () => {
   });
 };
 
-export { earlyHintsMiddleware, twilightMiddleware };
+export { ThemeHeadContent, ThemeStylesheet, earlyHintsMiddleware, twilightMiddleware };
 //# sourceMappingURL=tanstack.js.map
 //# sourceMappingURL=tanstack.js.map

package/dist/tanstack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tanstack/middleware/twilight.ts","../src/tanstack/middleware/earlyHints.ts"],"names":["createMiddleware"],"mappings":"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","file":"tanstack.js","sourcesContent":["import type { AnyRequestMiddleware } from '@tanstack/react-start';\nimport { createMiddleware } from '@tanstack/react-start';\nimport {\n  extractTokenFromCookies,\n  resolveRequestScope,\n  resolveRequestStore,\n  resolveRequestVersionId,\n  AUTH_TOKEN_COOKIE_NAME,\n} from '../../utils/cookies';\nimport { runWithTwilightContext } from '../../twilight/context';\nimport { requestHostOf } from '../../utils/request-host';\n\ninterface TwilightMiddlewareOptions {\n  cookieName?: string;\n}\n\nexport const twilightMiddleware = (options?: TwilightMiddlewareOptions): AnyRequestMiddleware => {\n  const cookieName = options?.cookieName ?? AUTH_TOKEN_COOKIE_NAME;\n\n  return createMiddleware().server(({ request, next }) => {\n    const cookieHeader = request.headers.get('Cookie');\n    const authToken = extractTokenFromCookies(cookieHeader, cookieName);\n    // `?scope=` before the cookie: it is how a market is switched (see resolveRequestScope).\n    const scope = resolveRequestScope(request.url, cookieHeader);\n    const requestHost = requestHostOf(request);\n    // Read here and nowhere else: a deployed theme worker has no vars and no\n    // bindings, so the request is the only thing that knows which store it is\n    // serving. Everything downstream reads it off the context rather than\n    // reaching for a build-time constant that is not there in production.\n    //\n    // The host goes in because it decides whether the request is allowed to name\n    // a store at all. On a merchant's own domain it is not: the hostname is the\n    // store, and `?storeId=` there would serve a stranger's shop from a domain\n    // its owner controls.\n    //\n    // On those same hosts the store is also the first segment of the path, the\n    // root of every URL there, and a store named that way takes the cookie's\n    // place: the path is the address the visitor can see.\n    const { storeId, storeBase } = resolveRequestStore(request.url, cookieHeader, requestHost);\n    // The version is read here for the same reason and behind the same gate. A\n    // theme editor previews a draft version of a merchant's settings before it is\n    // published, and a partner running the theme locally renders against one —\n    // both open the storefront in an iframe and say which version in the URL.\n    const versionId = resolveRequestVersionId(request.url, cookieHeader, requestHost);\n\n    return runWithTwilightContext(\n      { authToken, scope, storeId, storeBase, versionId, requestHost },\n      () => next({ context: { authToken } })\n    );\n  });\n};\n","import type { AnyRequestMiddleware } from '@tanstack/react-start';\nimport { createMiddleware } from '@tanstack/react-start';\nimport { tsrStartManifest } from 'tanstack-start-manifest:v';\nimport { rootHead } from '../../routes/root/head';\n\n/** Known critical assets that should always be preloaded */\nconst CRITICAL_ASSETS = [\n  { rel: 'preconnect', href: 'https://api.salla.dev' },\n  { rel: 'preconnect', href: 'https://cdn.salla.sa' },\n  { rel: 'preconnect', href: 'https://cdn.assets.salla.network', crossOrigin: 'anonymous' },\n  { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },\n] as const;\n\n/** Extract locale from URL path (e.g., /ar/products → 'ar') */\nfunction extractLocale(url: string): string | undefined {\n  const match = url.match(/^\\/([a-z]{2})(\\/|$)/);\n  return match?.[1];\n}\n\n/** Build Link header value from a link descriptor */\nfunction buildLinkHeader(link: Record<string, unknown>): string | null {\n  const href = link.href as string | undefined;\n  const rel = link.rel as string | undefined;\n  if (!href || !rel) return null;\n\n  // Skip print-media stylesheets (already non-blocking)\n  if (rel === 'stylesheet') {\n    const media = link.media as string | undefined;\n    if (media === 'print') return null;\n    return `<${href}>; rel=preload; as=style`;\n  }\n\n  if (rel === 'preload') {\n    const asType = link.as as string | undefined;\n    if (!asType) return null;\n    const parts = [`<${href}>`, 'rel=preload', `as=${asType}`];\n    if (asType === 'font' || link.crossOrigin) {\n      parts.push('crossorigin');\n    }\n    return parts.join('; ');\n  }\n\n  if (rel === 'modulepreload') {\n    return `<${href}>; rel=modulepreload`;\n  }\n\n  return null;\n}\n\nexport const earlyHintsMiddleware = (): AnyRequestMiddleware => {\n  let cachedManifestPaths: string[] | null = null;\n\n  return createMiddleware().server(async ({ request, next }) => {\n    const response = await next();\n\n    const accept = request.headers.get('Accept') ?? '';\n    if (!accept.includes('text/html') && accept !== '*/*') return response;\n    if (!(response instanceof Response)) return response;\n\n    const linkHeaders: string[] = [];\n\n    // 1. Add critical assets from rootHead (fonts, icons, SDK, etc.)\n    try {\n      const url = new URL(request.url);\n      const locale = extractLocale(url.pathname);\n      if (locale) {\n        const headResult = rootHead({ params: { locale } });\n        const links = (headResult.links as Record<string, unknown>[]) ?? [];\n        for (const link of links) {\n          const header = buildLinkHeader(link);\n          if (header) linkHeaders.push(header);\n        }\n      }\n    } catch (e) {\n      // rootHead failed — log why, then fall back to known critical assets\n      console.warn('[earlyHints] rootHead failed:', e instanceof Error ? e.message : e);\n      for (const asset of CRITICAL_ASSETS) {\n        const co = 'crossOrigin' in asset ? asset.crossOrigin : undefined;\n        linkHeaders.push(`<${asset.href}>; rel=${asset.rel}${co ? '; crossorigin' : ''}`);\n      }\n    }\n\n    // 2. Add CSS from TanStack Start manifest (bundled theme CSS)\n    if (!cachedManifestPaths) {\n      try {\n        const manifest = tsrStartManifest();\n        const rootAssets = manifest.routes['__root__']?.assets ?? [];\n        const seen = new Set<string>();\n        cachedManifestPaths = [];\n        for (const asset of rootAssets) {\n          if (asset.tag === 'link' && asset.attrs?.href?.endsWith('.css')) {\n            if (!seen.has(asset.attrs.href)) {\n              seen.add(asset.attrs.href);\n              cachedManifestPaths.push(asset.attrs.href);\n            }\n          }\n        }\n      } catch (e) {\n        // manifest not available — skip\n        console.warn('[earlyHints] tsrStartManifest failed:', e instanceof Error ? e.message : e);\n      }\n    }\n\n    if (cachedManifestPaths) {\n      for (const href of cachedManifestPaths) {\n        linkHeaders.push(`<${href}>; rel=preload; as=style`);\n      }\n    }\n\n    // Apply Link headers if we have any\n    if (linkHeaders.length === 0) {\n      console.warn('[earlyHints] no critical assets found — no Link headers added');\n      return response;\n    }\n\n    const headers = new Headers(response.headers);\n    for (const linkHeader of linkHeaders) {\n      headers.append('Link', linkHeader);\n    }\n\n    return new Response(response.body, {\n      status: response.status,\n      statusText: response.statusText,\n      headers,\n    });\n  });\n};\n"]}
+{"version":3,"sources":["../src/tanstack/stylesheet.tsx","../src/tanstack/middleware/twilight.ts","../src/tanstack/middleware/earlyHints.ts"],"names":["createMiddleware"],"mappings":"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","file":"tanstack.js","sourcesContent":["import { useState, useSyncExternalStore } from 'react';\nimport { Asset, useRouter, useRouterState, useTags } from '@tanstack/react-router';\nimport { CRITICAL_STYLE_HREF } from '../boot/critical-style';\n\nexport interface ThemeStylesheetProps {\n  /** The full stylesheet's URL (`app.css?url`). */\n  href: string;\n  /**\n   * Inline critical CSS by route id. A page server-rendered as one of these routes paints from it,\n   * and `bootClient` adds `href` once its first screen has painted. Pass the same route ids on the\n   * client with empty strings, so hydration renders the same tags without shipping the CSS twice.\n   */\n  critical?: Readonly<Record<string, string>>;\n}\n\nconst subscribeNothing = () => () => {};\n\n/** The theme's stylesheet: inline critical CSS for the routes that have it, the full sheet otherwise. */\nexport function ThemeStylesheet({ href, critical = {} }: ThemeStylesheetProps) {\n  const routeId = useRouterState({\n    select: (state): string | undefined =>\n      state.matches.find((match) => Object.hasOwn(critical, match.routeId))?.routeId,\n  });\n  // The route the page was server-rendered as: never added or removed on client-side navigations.\n  const [criticalRoute] = useState(routeId);\n  const hydrated = useSyncExternalStore(\n    subscribeNothing,\n    () => true,\n    () => false\n  );\n\n  return (\n    <>\n      {criticalRoute && (\n        // Its own precedence, so it lands before the full sheet; React renders the CSS verbatim.\n        <style href={CRITICAL_STYLE_HREF} precedence=\"critical\">\n          {critical[criticalRoute]}\n        </style>\n      )}\n      {(!criticalRoute || hydrated) && (\n        <link id=\"salla-theme-css\" rel=\"stylesheet\" href={href} precedence=\"default\" />\n      )}\n      {criticalRoute && (\n        <noscript>\n          <link rel=\"stylesheet\" href={href} />\n        </noscript>\n      )}\n    </>\n  );\n}\n\n/** The route's head tags without module preloads: they raced the LCP image, and the entry loads every chunk anyway. */\nexport function ThemeHeadContent() {\n  const tags = useTags();\n  const nonce = useRouter().options.ssr?.nonce;\n  return tags\n    .filter((tag) => !(tag.tag === 'link' && tag.attrs?.rel === 'modulepreload'))\n    .map((tag) => <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />);\n}\n","import type { AnyRequestMiddleware } from '@tanstack/react-start';\nimport { createMiddleware } from '@tanstack/react-start';\nimport {\n  extractTokenFromCookies,\n  resolveRequestScope,\n  resolveRequestStore,\n  resolveRequestVersionId,\n  AUTH_TOKEN_COOKIE_NAME,\n} from '../../utils/cookies';\nimport { runWithTwilightContext } from '../../twilight/context';\nimport { requestHostOf } from '../../utils/request-host';\n\ninterface TwilightMiddlewareOptions {\n  cookieName?: string;\n}\n\nexport const twilightMiddleware = (options?: TwilightMiddlewareOptions): AnyRequestMiddleware => {\n  const cookieName = options?.cookieName ?? AUTH_TOKEN_COOKIE_NAME;\n\n  return createMiddleware().server(({ request, next }) => {\n    const cookieHeader = request.headers.get('Cookie');\n    const authToken = extractTokenFromCookies(cookieHeader, cookieName);\n    // `?scope=` before the cookie: it is how a market is switched (see resolveRequestScope).\n    const scope = resolveRequestScope(request.url, cookieHeader);\n    const requestHost = requestHostOf(request);\n    // Read here and nowhere else: a deployed theme worker has no vars and no\n    // bindings, so the request is the only thing that knows which store it is\n    // serving. Everything downstream reads it off the context rather than\n    // reaching for a build-time constant that is not there in production.\n    //\n    // The host goes in because it decides whether the request is allowed to name\n    // a store at all. On a merchant's own domain it is not: the hostname is the\n    // store, and `?storeId=` there would serve a stranger's shop from a domain\n    // its owner controls.\n    //\n    // On those same hosts the store is also the first segment of the path, the\n    // root of every URL there, and a store named that way takes the cookie's\n    // place: the path is the address the visitor can see.\n    const { storeId, storeBase } = resolveRequestStore(request.url, cookieHeader, requestHost);\n    // The version is read here for the same reason and behind the same gate. A\n    // theme editor previews a draft version of a merchant's settings before it is\n    // published, and a partner running the theme locally renders against one —\n    // both open the storefront in an iframe and say which version in the URL.\n    const versionId = resolveRequestVersionId(request.url, cookieHeader, requestHost);\n\n    return runWithTwilightContext(\n      { authToken, scope, storeId, storeBase, versionId, requestHost },\n      () => next({ context: { authToken } })\n    );\n  });\n};\n","import type { AnyRequestMiddleware } from '@tanstack/react-start';\nimport { createMiddleware } from '@tanstack/react-start';\nimport { tsrStartManifest } from 'tanstack-start-manifest:v';\nimport { rootHead } from '../../routes/root/head';\n\n/** Known critical assets that should always be preloaded */\nconst CRITICAL_ASSETS = [\n  { rel: 'preconnect', href: 'https://api.salla.dev' },\n  { rel: 'preconnect', href: 'https://cdn.salla.sa' },\n  { rel: 'preconnect', href: 'https://cdn.assets.salla.network', crossOrigin: 'anonymous' },\n  { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },\n] as const;\n\n/** Extract locale from URL path (e.g., /ar/products → 'ar') */\nfunction extractLocale(url: string): string | undefined {\n  const match = url.match(/^\\/([a-z]{2})(\\/|$)/);\n  return match?.[1];\n}\n\n/** Build Link header value from a link descriptor */\nfunction buildLinkHeader(link: Record<string, unknown>): string | null {\n  const href = link.href as string | undefined;\n  const rel = link.rel as string | undefined;\n  if (!href || !rel) return null;\n\n  // Skip print-media stylesheets (already non-blocking)\n  if (rel === 'stylesheet') {\n    const media = link.media as string | undefined;\n    if (media === 'print') return null;\n    return `<${href}>; rel=preload; as=style`;\n  }\n\n  if (rel === 'preload') {\n    const asType = link.as as string | undefined;\n    if (!asType) return null;\n    const parts = [`<${href}>`, 'rel=preload', `as=${asType}`];\n    if (asType === 'font' || link.crossOrigin) {\n      parts.push('crossorigin');\n    }\n    return parts.join('; ');\n  }\n\n  if (rel === 'modulepreload') {\n    return `<${href}>; rel=modulepreload`;\n  }\n\n  return null;\n}\n\nexport const earlyHintsMiddleware = (): AnyRequestMiddleware => {\n  let cachedManifestPaths: string[] | null = null;\n\n  return createMiddleware().server(async ({ request, next }) => {\n    const response = await next();\n\n    const accept = request.headers.get('Accept') ?? '';\n    if (!accept.includes('text/html') && accept !== '*/*') return response;\n    if (!(response instanceof Response)) return response;\n\n    const linkHeaders: string[] = [];\n\n    // 1. Add critical assets from rootHead (fonts, icons, SDK, etc.)\n    try {\n      const url = new URL(request.url);\n      const locale = extractLocale(url.pathname);\n      if (locale) {\n        const headResult = rootHead({ params: { locale } });\n        const links = (headResult.links as Record<string, unknown>[]) ?? [];\n        for (const link of links) {\n          const header = buildLinkHeader(link);\n          if (header) linkHeaders.push(header);\n        }\n      }\n    } catch (e) {\n      // rootHead failed — log why, then fall back to known critical assets\n      console.warn('[earlyHints] rootHead failed:', e instanceof Error ? e.message : e);\n      for (const asset of CRITICAL_ASSETS) {\n        const co = 'crossOrigin' in asset ? asset.crossOrigin : undefined;\n        linkHeaders.push(`<${asset.href}>; rel=${asset.rel}${co ? '; crossorigin' : ''}`);\n      }\n    }\n\n    // 2. Add CSS from TanStack Start manifest (bundled theme CSS)\n    if (!cachedManifestPaths) {\n      try {\n        const manifest = tsrStartManifest();\n        const rootAssets = manifest.routes['__root__']?.assets ?? [];\n        const seen = new Set<string>();\n        cachedManifestPaths = [];\n        for (const asset of rootAssets) {\n          if (asset.tag === 'link' && asset.attrs?.href?.endsWith('.css')) {\n            if (!seen.has(asset.attrs.href)) {\n              seen.add(asset.attrs.href);\n              cachedManifestPaths.push(asset.attrs.href);\n            }\n          }\n        }\n      } catch (e) {\n        // manifest not available — skip\n        console.warn('[earlyHints] tsrStartManifest failed:', e instanceof Error ? e.message : e);\n      }\n    }\n\n    if (cachedManifestPaths) {\n      for (const href of cachedManifestPaths) {\n        linkHeaders.push(`<${href}>; rel=preload; as=style`);\n      }\n    }\n\n    // Apply Link headers if we have any\n    if (linkHeaders.length === 0) {\n      console.warn('[earlyHints] no critical assets found — no Link headers added');\n      return response;\n    }\n\n    const headers = new Headers(response.headers);\n    for (const linkHeader of linkHeaders) {\n      headers.append('Link', linkHeader);\n    }\n\n    return new Response(response.body, {\n      status: response.status,\n      statusText: response.statusText,\n      headers,\n    });\n  });\n};\n"]}

package/dist/utils/index.js

@@ -6,9 +6,9 @@ export { color } from '../chunk-VVZNW5CB.js';
 export { applyAppScopeMocks, registerThemeHookSlots } from '../chunk-5G7NYNX6.js';
 export { mergeHead, resolveHead, setHeadAdapter } from '../chunk-GD26FI4J.js';
 export { buildBaseHead, buildHreflangAlternates, localeToOgLocale } from '../chunk-TZ3E5BN4.js';
-import '../chunk-QGOPTVV5.js';
 export { asset, cdn, isPlaceholder } from '../chunk-ZCH7W7DZ.js';
 export { mergeDocumentDescriptors, mergeElementAttrs, normalizeClasses, syncAttrsToElement, toReactProps } from '../chunk-CW625T2E.js';
+import '../chunk-QGOPTVV5.js';
 export { AUTH_TOKEN_COOKIE_NAME, clearAuthTokenCookie, extractTokenFromCookies, getSallaSDK, getStoreIdentifier, onSallaEvent, whenSallaLoaded, whenSallaReady } from '../chunk-HSWRYXC7.js';
 import '../chunk-N2S25NXP.js';
 import '../chunk-T72DAX7R.js';

package/dist/vite/index.js

@@ -1,5 +1,5 @@
-import { tanstackHeadAdapter } from '../chunk-3LXB4VFK.js';
 import { nextjsHeadAdapter } from '../chunk-HOSHJBPS.js';
+import { tanstackHeadAdapter } from '../chunk-3LXB4VFK.js';
 import '../chunk-RV54D2D7.js';
 import { setHeadAdapter } from '../chunk-GD26FI4J.js';
 import { RouteId } from '../chunk-OUW6WESU.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salla.sa/twilight-theme-engine",
-  "version": "1.0.85",
+  "version": "1.0.86",
   "publishConfig": {
     "access": "public"
   },
@@ -202,6 +202,10 @@
       "types": "./dist/dom.d.ts",
       "import": "./dist/dom.js"
     },
+    "./boot": {
+      "types": "./dist/boot.d.ts",
+      "import": "./dist/boot.js"
+    },
     "./sentry/client": {
       "types": "./dist/sentry/client.d.ts",
       "import": "./dist/sentry/client.js"
@@ -362,6 +366,10 @@
       "types": "./dist/api/profile.d.ts",
       "import": "./dist/api/profile.js"
     },
+    "./api/advertisement": {
+      "types": "./dist/api/advertisement.d.ts",
+      "import": "./dist/api/advertisement.js"
+    },
     "./api/apps": {
       "types": "./dist/api/apps.d.ts",
       "import": "./dist/api/apps.js"
@@ -389,13 +397,14 @@
   },
   "files": [
     "dist",
+    "tailwind",
     "README.md"
   ],
   "scripts": {
-    "build": "tsup && node scripts/add-js-extensions.mjs && rm -f tsconfig.tsbuildinfo && tsc --build && node scripts/generate-dts-stubs.mjs && node scripts/copy-ambient-dts.mjs",
+    "build": "tsup && node scripts/add-js-extensions.mjs && rm -f tsconfig.tsbuildinfo && tsc --build && node scripts/generate-dts-stubs.mjs && node scripts/copy-ambient-dts.mjs && node scripts/copy-tailwind-sources.mjs",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist tailwind",
     "test": "vitest --reporter=agent run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",

package/tailwind/components/Component.tsx.txt

@@ -0,0 +1,21 @@
+import React from 'react';
+import { registry } from './ComponentRegistry';
+
+export interface ComponentProps {
+  name: string;
+  fallback?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+export function Component({ name, fallback = null, ...props }: ComponentProps): React.ReactNode {
+  const ResolvedComponent = registry.resolve(name);
+
+  if (!ResolvedComponent) {
+    if (process.env.NODE_ENV === 'development') {
+      window.salla?.logger?.warn(`Component::"${name}" not found in registry`);
+    }
+    return fallback;
+  }
+
+  return <ResolvedComponent {...props} />;
+}

package/tailwind/components/ComponentRegistry.ts.txt

@@ -0,0 +1,66 @@
+import type { ComponentType, ComponentDefinition } from '../types';
+
+class ComponentRegistry {
+  private components = new Map<string, ComponentDefinition>();
+
+  register<P = Record<string, unknown>>(name: string, component: ComponentType<P>): void {
+    this.components.set(name, {
+      component: component as ComponentType,
+      displayName: name,
+    });
+  }
+
+  override<P = Record<string, unknown>>(name: string, component: ComponentType<P>): void {
+    const existing = this.components.get(name);
+    if (existing) {
+      this.components.set(name, {
+        component: component as ComponentType,
+        displayName: name,
+        original: existing,
+      });
+    } else {
+      this.register(name, component);
+    }
+  }
+
+  resolve<P = Record<string, unknown>>(name: string): ComponentType<P> | null {
+    const definition = this.components.get(name);
+    return (definition?.component as ComponentType<P>) ?? null;
+  }
+
+  getOriginal<P = Record<string, unknown>>(name: string): ComponentType<P> | null {
+    const definition = this.components.get(name);
+    return (definition?.original?.component as ComponentType<P>) ?? null;
+  }
+
+  has(name: string): boolean {
+    return this.components.has(name);
+  }
+
+  list(): string[] {
+    return Array.from(this.components.keys());
+  }
+
+  listByPrefix(prefix: string): string[] {
+    return this.list().filter((name) => name.startsWith(prefix));
+  }
+
+  clear(): void {
+    this.components.clear();
+  }
+
+  remove(name: string): boolean {
+    return this.components.delete(name);
+  }
+}
+
+export const registry = new ComponentRegistry();
+
+export { ComponentRegistry };
+
+export const COMPONENT_KEYS = {
+  PRODUCT_CARD: 'product:card',
+  PRODUCT_GALLERY: 'product:gallery',
+  PRODUCT_LIST_PAGE: 'product:list-page',
+  PRODUCT_LIST_SKELETON: 'product:list-skeleton',
+} as const;

package/tailwind/components/cart/CartItem.tsx.txt

@@ -0,0 +1,211 @@
+import type { Money, CartItem as CartItemType } from '../../types';
+import { useTranslation } from '../../providers/I18nProvider';
+import { useMoney } from '../../hooks/useMoney';
+import { Link, Image } from '../common';
+import { SallaCartItemOffers } from '@salla.sa/twilight-components-react/cart-item-offers';
+import { SallaQuantityInput } from '@salla.sa/twilight-components-react/quantity-input';
+import { SallaButton } from '@salla.sa/twilight-components-react/button';
+import { SallaProductOptions } from '@salla.sa/twilight-components-react/product-options';
+import { useHostAttributes } from '@salla.sa/twilight-theme-engine/hooks/useHostAttributes';
+
+interface CartItemProps {
+  item: CartItemType;
+  isFirst?: boolean;
+}
+
+function toNumber(value: number | Money | undefined): number | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return value;
+  return value.amount;
+}
+
+function moneyCurrency(value: number | Money | undefined): string | undefined {
+  if (typeof value !== 'object') return undefined;
+  return value.currency;
+}
+
+function CartItemPrices({ item }: { item: CartItemType }) {
+  const { format } = useMoney();
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      {item.offer && (
+        <span className="text-sm text-gray-500 line-through item-regular-price">
+          {format(toNumber(item.product_price), {
+            currency: moneyCurrency(item.product_price),
+          })}
+        </span>
+      )}
+
+      {item.is_on_sale && (
+        <span className="inline-flex gap-1 leading-4 text-sm text-gray-500 line-through item-original-price">
+          {format(toNumber(item.original_price), {
+            currency: moneyCurrency(item.original_price),
+          })}
+        </span>
+      )}
+
+      <span
+        className={`inline-flex gap-1 leading-4 item-price ${item.has_discount ? 'text-red-800' : 'text-sm text-gray-500'}`}
+      >
+        {format(toNumber(item.price), { currency: moneyCurrency(item.price) })}
+      </span>
+    </div>
+  );
+}
+
+function CartItemQuantity({ item }: { item: CartItemType }) {
+  const { t } = useTranslation();
+  const quantityRef = useHostAttributes({
+    max: item.max_quantity,
+    value: item.quantity,
+    name: 'quantity',
+  });
+
+  if (item.type === 'donating') return <span></span>;
+
+  if (item.is_hidden_quantity) {
+    return (
+      <>
+        <input
+          type="hidden"
+          value={item.quantity}
+          name="quantity"
+          aria-label={t('pages.products.quantity')}
+        />
+        <span className="w-10 text-center">{item.quantity}</span>
+      </>
+    );
+  }
+
+  return (
+    <SallaQuantityInput
+      // The loaded component reads `value` only once, so remount when the quantity changes.
+      key={`${item.id}-${item.quantity}`}
+      ref={quantityRef}
+      cartItemId={item.id}
+      max={item.max_quantity ?? undefined}
+      className="transition transition-color duration-300"
+      aria-label={t('pages.products.quantity')}
+      value={item.quantity}
+      name="quantity"
+    />
+  );
+}
+
+function CartItemTotal({ item }: { item: CartItemType }) {
+  const { t } = useTranslation();
+  const { format } = useMoney();
+  const total = item.detailed_offers?.length ? item.total_special_price : item.total;
+  return (
+    <p className="text-primary flex-none font-bold text-sm rtl:md:pl-12 ltr:md:pr-12">
+      <span>{t('pages.cart.total')}:</span>
+      <span className="inline-block item-total">
+        {item.is_available
+          ? format(toNumber(total), { currency: moneyCurrency(total) })
+          : t('pages.products.out_of_stock')}
+      </span>
+    </p>
+  );
+}
+
+const handleChange = (e: React.ChangeEvent<HTMLFormElement>) => {
+  window.salla?.form.onChange('cart.updateItem', e);
+};
+
+export function CartItem({ item, isFirst = false }: CartItemProps) {
+  const { t } = useTranslation();
+
+  const handleDelete = async () => {
+    await window.salla?.cart.deleteItem(item.id);
+    document.querySelector(`#item-${item.id}`)?.remove();
+  };
+
+  const isFreeProduct = toNumber(item.price) === 0 && item.has_discount;
+
+  return (
+    <form onChange={handleChange} id={`item-${item.id}`}>
+      <section className="cart-item bg-white p-5 xs:p-7 rounded-md mb-5 relative">
+        <input type="hidden" name="id" value={item.id} />
+
+        <div className="md:flex rtl:space-x-reverse md:space-x-12 items-start justify-between mb-8 last:mb-0">
+          <div className="flex flex-1 rtl:space-x-reverse space-x-4">
+            <Link to={item.url} className="relative overflow-hidden shrink-0">
+              <Image
+                src={item.product_image}
+                alt={item.product_name}
+                className="flex-none w-24 h-20 border border-gray-200 bg-gray-100 rounded-md object-center object-cover"
+                aspectRatio="6/5"
+                priority={isFirst}
+              />
+
+              {isFreeProduct && (
+                <div className="free-ribbon absolute top-[11px] right-[-38px] w-32 bg-red-600 text-white text-xs font-bold text-center py-1 rotate-45 shadow-md">
+                  {/* Twig: trans('pages.loyalty_program.free_product') */}
+                  {t('pages.loyalty_program.free_product')}
+                </div>
+              )}
+            </Link>
+
+            <div className="space-y-1">
+              <div className="text-gray-900 leading-6 text-lg font-bold">
+                <Link to={item.url} className="text-base">
+                  {item.product_name}
+                </Link>
+              </div>
+
+              <CartItemPrices item={item} />
+
+              {item.weight_label && (
+                <p className="text-sm text-gray-500">
+                  {t('pages.products.weight')}: <span>{item.weight_label}</span>
+                </p>
+              )}
+
+              {/* Twig: class="{{ item.detailed_offers ? 'hidden' : '' }}": hide old offer when detailed_offers present */}
+              {item.offer && !item.detailed_offers?.length && (
+                <span className="old-offers flex items-center gap-1 mx-1.5">
+                  <i className="sicon-discount-calculator text-gray-500 offer-icon"></i>
+                  <span className="text-sm text-gray-500 offer-name">{item.offer.names}</span>
+                </span>
+              )}
+
+              {item.detailed_offers && item.detailed_offers.length > 0 && (
+                <SallaCartItemOffers
+                  quantity={item.quantity}
+                  itemId={String(item.id) as any}
+                  productPrice={toNumber(item.product_price) ?? 0}
+                  offers={JSON.stringify(item.detailed_offers)}
+                />
+              )}
+            </div>
+          </div>
+
+          <div className="border-t border-b border-gray-200 py-3 md:p-0 md:border-none mt-5 md:mt-0 flex gap-8 justify-between items-center md:items-start">
+            <CartItemQuantity item={item} />
+
+            <CartItemTotal item={item} />
+          </div>
+        </div>
+
+        {/* Twig: {% include 'pages.partials.product.options' with {product:item} %} */}
+        {item.options && item.options.length > 0 && (
+          <SallaProductOptions options={JSON.stringify(item.options)} productId={item.product_id} />
+        )}
+
+        <span className="absolute top-1.5 rtl:left-1.5 ltr:right-1.5 rtl:xs:left-5 ltr:xs:right-5 xs:top-5">
+          <SallaButton
+            type="button"
+            shape="icon"
+            size="small"
+            color="danger"
+            className="btn--delete"
+            ariaLabel={t('common.elements.remove')}
+            onClick={handleDelete}
+          >
+            <i className="sicon-cancel"></i>
+          </SallaButton>
+        </span>
+      </section>
+    </form>
+  );
+}