@salla.sa/twilight-theme-engine 1.0.94 → 1.0.96

package/dist/vite/index.js

@@ -3,17 +3,18 @@ export { REACT_THEME_TYPE, describeThemeTypeIssue, getThemeType, isReactThemeMan
 import { tanstackHeadAdapter } from '../chunk-N2A72R2I.js';
 import { nextjsHeadAdapter } from '../chunk-HOSHJBPS.js';
 import '../chunk-RV54D2D7.js';
+import { EMPTY_DEV_SCHEMA, DEV_PREVIEW_GLOBAL, DEV_PREVIEW_ENDPOINT, normalizePreviewState, DEV_PREVIEW_EVENT, DEV_EDITOR_PATH, DEV_PREVIEW_IMAGE_ENDPOINT, DEV_PREVIEW_IMAGE_MAX_BYTES } from '../chunk-N45X7D55.js';
 import { setHeadAdapter } from '../chunk-GD26FI4J.js';
 import '../chunk-4SZZPXM2.js';
 import { RouteId } from '../chunk-OUW6WESU.js';
 import '../chunk-N2S25NXP.js';
 import '../chunk-T72DAX7R.js';
 import '../chunk-DGUM43GV.js';
-import { readFile, readdir } from 'fs/promises';
+import { readFile, readdir, writeFile, mkdir } from 'fs/promises';
 import { dirname, join, relative, resolve, basename, sep } from 'path';
+import { createHash } from 'crypto';
 import { parseSync } from 'oxc-parser';
 import { existsSync, mkdirSync, writeFileSync, readFileSync, rmSync, readdirSync, statSync } from 'fs';
-import { createHash } from 'crypto';
 import { fileURLToPath, pathToFileURL } from 'url';
 import Module, { createRequire } from 'module';
 import { transformSync } from 'esbuild';
@@ -160,7 +161,33 @@ ${entries.join(",\n")}
 }
 
 // src/vite/plugins/twilight-schema.ts
-var TEXTUAL_FORMATS = /* @__PURE__ */ new Set(["text", "textarea", "image", "icon", "line"]);
+var TEXT_FORMATS = /* @__PURE__ */ new Set(["text", "icon", "line", "hidden", "url", "email", "color"]);
+function text(value) {
+  return typeof value === "string" && value.trim() ? value : void 0;
+}
+function num(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+}
+function toConditions(raw) {
+  if (!Array.isArray(raw)) return void 0;
+  const conditions = raw.flatMap((c) => {
+    const obj = c ?? {};
+    if (typeof obj.id !== "string" || !obj.id) return [];
+    const operation = typeof obj.operation === "string" && obj.operation ? obj.operation : "=";
+    return [{ id: obj.id, operation, value: obj.value }];
+  });
+  return conditions.length ? conditions : void 0;
+}
+function extras(entry) {
+  const out = {};
+  const description = text(entry.description);
+  const placeholder = text(entry.placeholder);
+  const conditions = toConditions(entry.conditions);
+  if (description) out.description = description;
+  if (placeholder) out.placeholder = placeholder;
+  if (conditions) out.conditions = conditions;
+  return out;
+}
 function labelOf(entry, fallback) {
   return typeof entry.label === "string" && entry.label.trim() ? entry.label : fallback;
 }
@@ -196,6 +223,47 @@ function firstScalar(v) {
   }
   return v;
 }
+var ENTITY_SOURCES = ["products", "categories", "brands"];
+function isEntitySource(source) {
+  return ENTITY_SOURCES.includes(source);
+}
+function classifyString(entry, id, label) {
+  const { format } = entry;
+  const value = typeof entry.value === "string" ? entry.value : "";
+  const base = { id, label, default: value, ...extras(entry) };
+  if (format === "textarea") return { ...base, kind: "textarea" };
+  if (format === "image") return { ...base, kind: "image" };
+  if (typeof format === "string" && TEXT_FORMATS.has(format)) return { ...base, kind: "text" };
+  return null;
+}
+function classifyCollection(entry, id, label) {
+  const prefix = `${id}.`;
+  const fields = [];
+  for (const sub of Array.isArray(entry.fields) ? entry.fields : []) {
+    const subId = typeof sub.id === "string" && sub.id.startsWith(prefix) ? sub.id.slice(prefix.length) : sub.id;
+    const field = classify({ ...sub, id: subId });
+    if (!field) continue;
+    field.conditions = field.conditions?.map(
+      (c) => c.id.startsWith(prefix) ? { ...c, id: c.id.slice(prefix.length) } : c
+    );
+    if (!field.conditions) delete field.conditions;
+    fields.push(field);
+  }
+  const min = num(entry.minLength);
+  const max = num(entry.maxLength);
+  const itemLabel = text(entry.item_label);
+  return {
+    id,
+    label,
+    kind: "collection",
+    default: collectionRows(entry),
+    fields,
+    ...min !== void 0 ? { min } : {},
+    ...max !== void 0 ? { max } : {},
+    ...itemLabel ? { itemLabel } : {},
+    ...extras(entry)
+  };
+}
 function classify(entry) {
   const id = typeof entry.id === "string" ? entry.id : "";
   if (!id) return null;
@@ -207,35 +275,103 @@ function classify(entry) {
       id,
       label,
       kind: "toggle",
-      default: typeof entry.value === "boolean" ? entry.value : false
+      default: typeof entry.value === "boolean" ? entry.value : false,
+      ...extras(entry)
     };
   }
   if (type === "items" && format === "dropdown-list") {
     const options = toOptions(entry.options);
+    if (!options && isEntitySource(entry.source)) {
+      const min = num(entry.minLength);
+      const max = num(entry.maxLength);
+      return {
+        id,
+        label,
+        kind: "entities",
+        source: entry.source,
+        multiple: entry.multichoice === true,
+        default: Array.isArray(entry.value) ? entry.value : [],
+        ...min !== void 0 ? { min } : {},
+        ...max !== void 0 ? { max } : {},
+        ...extras(entry)
+      };
+    }
     if (!options) {
       return {
         id,
         label,
         kind: "readonly",
         default: null,
-        note: `remote (${entry.source ?? "dynamic"})`
+        note: `remote (${entry.source ?? "dynamic"})`,
+        ...extras(entry)
       };
     }
     const fallback = options[0]?.value;
     const def = firstScalar(entry.value) ?? firstScalar(entry.selected) ?? fallback;
-    return { id, label, kind: "select", default: def ?? "", options };
+    return { id, label, kind: "select", default: def ?? "", options, ...extras(entry) };
   }
-  if (type === "string" && typeof format === "string" && TEXTUAL_FORMATS.has(format)) {
-    return { id, label, kind: "text", default: typeof entry.value === "string" ? entry.value : "" };
+  if (type === "string") {
+    const field = classifyString(entry, id, label);
+    if (field) return field;
+  }
+  if (type === "number") {
+    const min = num(entry.minimum);
+    const max = num(entry.maximum);
+    return {
+      id,
+      label,
+      kind: "number",
+      default: num(entry.value) ?? null,
+      ...min !== void 0 ? { min } : {},
+      ...max !== void 0 ? { max } : {},
+      ...extras(entry)
+    };
+  }
+  if (type === "collection") return classifyCollection(entry, id, label);
+  if (type === "items" && format === "variable-list") {
+    const linkSources = toOptions(entry.sources);
+    return {
+      id,
+      label,
+      kind: "link",
+      default: typeof entry.value === "string" ? entry.value : "",
+      ...linkSources ? { linkSources } : {},
+      ...extras(entry)
+    };
   }
   return {
     id,
     label,
     kind: "readonly",
     default: null,
-    note: `${type ?? "unknown"}/${format ?? "?"}`
+    note: `${type ?? "unknown"}/${format ?? "?"}`,
+    ...extras(entry)
   };
 }
+function collectionRows(entry) {
+  if (!Array.isArray(entry.value)) return [];
+  const prefix = `${entry.id}.`;
+  return entry.value.filter((row) => !!row && typeof row === "object").map(
+    (row) => Object.fromEntries(
+      Object.entries(row).map(([key, value]) => [
+        key.startsWith(prefix) ? key.slice(prefix.length) : key,
+        value
+      ])
+    )
+  );
+}
+function blockDefaultsFor(fieldsRaw, fields) {
+  const out = {};
+  for (const entry of fieldsRaw) {
+    if (typeof entry.id !== "string" || !entry.id || entry.type === "static") continue;
+    if (entry.type === "collection") out[entry.id] = collectionRows(entry);
+    else if (entry.type === "items" && entry.format === "variable-list")
+      out[entry.id] = typeof entry.value === "string" ? entry.value : "";
+    else if (entry.type === "items" && !toOptions(entry.options)) out[entry.id] = [];
+    else if (entry.value !== void 0) out[entry.id] = entry.value;
+  }
+  return { ...out, ...defaultsFor(fields) };
+}
 function defaultsFor(fields) {
   const out = {};
   for (const f of fields) {
@@ -243,6 +379,14 @@ function defaultsFor(fields) {
   }
   return out;
 }
+function localizedOf(name) {
+  if (typeof name === "string" && name) return { ar: name, en: name };
+  if (!name || typeof name !== "object") return void 0;
+  const entries = Object.entries(name).filter(
+    (entry) => typeof entry[1] === "string" && entry[1] !== ""
+  );
+  return entries.length ? Object.fromEntries(entries) : void 0;
+}
 function buildTwilightSchema(raw) {
   const root = raw ?? {};
   const settingsRaw = Array.isArray(root.settings) ? root.settings : [];
@@ -254,6 +398,7 @@ function buildTwilightSchema(raw) {
   const componentsRaw = Array.isArray(root.components) ? root.components : [];
   const components = [];
   const componentDefaults = {};
+  const blockDefaults = {};
   for (const c of componentsRaw) {
     const path = typeof c.path === "string" && c.path || typeof c.key === "string" && c.key || "";
     if (!path) continue;
@@ -263,33 +408,271 @@ function buildTwilightSchema(raw) {
       const field = classify(fr);
       if (field) fields.push(field);
     }
-    components.push({ path, title: titleOf(c), fields });
+    const key = typeof c.key === "string" && c.key ? c.key : void 0;
+    const titles = c.title && typeof c.title === "object" ? localizedOf(c.title) : void 0;
+    components.push({
+      path,
+      ...key ? { key } : {},
+      title: titleOf(c),
+      ...titles ? { titles } : {},
+      ...text(c.image) ? { image: text(c.image) } : {},
+      ...typeof c.icon === "string" && /^sicon-[a-z0-9-]+$/.test(c.icon) ? { icon: c.icon } : {},
+      fields
+    });
     componentDefaults[path] = defaultsFor(fields);
+    blockDefaults[path] = blockDefaultsFor(fieldsRaw, fields);
   }
+  const themeName = localizedOf(root.name);
   return {
+    ...themeName ? { themeName } : {},
     settings,
     components,
     settingsDefaults: defaultsFor(settings),
-    componentDefaults
+    componentDefaults,
+    blockDefaults
   };
 }
 
-// src/dev/schema-types.ts
-var EMPTY_DEV_SCHEMA = {
-  settings: [],
-  components: [],
-  settingsDefaults: {},
-  componentDefaults: {}
-};
-
 // src/vite/plugins/twilight-schema.plugin.ts
 var VIRTUAL_ID2 = "virtual:twilight/schema";
 var RESOLVED_ID2 = "\0" + VIRTUAL_ID2;
+var EDITOR_ENTRY_ID = "virtual:twilight/editor";
+var RESOLVED_EDITOR_ENTRY_ID = "\0" + EDITOR_ENTRY_ID;
+var EDITOR_ENTRY = [
+  `import schema from '${VIRTUAL_ID2}';`,
+  `import { mountThemeEditor } from '@salla.sa/twilight-theme-engine/dev/editor';`,
+  `mountThemeEditor(document.getElementById('root'), schema);`
+].join("\n");
+var EDITOR_HTML = `<!doctype html>
+<html lang="ar" dir="rtl">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Theme editor</title>
+    <link rel="stylesheet" href="https://cdn.salla.network/fonts/pingarlt.css" />
+    <link rel="stylesheet" href="https://cdn.salla.network/fonts/sallaicons.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/@id/__x00__${EDITOR_ENTRY_ID}"></script>
+  </body>
+</html>
+`;
+function serveEditorPage(server, onShown) {
+  server.middlewares.use(DEV_EDITOR_PATH, (req, res, next) => {
+    const rest = (req.url ?? "/").split("?")[0];
+    if (req.method !== "GET" || rest !== "/" && rest !== "") {
+      next();
+      return;
+    }
+    onShown();
+    server.transformIndexHtml(req.originalUrl ?? DEV_EDITOR_PATH, EDITOR_HTML).then((html) => {
+      res.statusCode = 200;
+      res.setHeader("content-type", "text/html; charset=utf-8");
+      res.end(html);
+    }).catch(next);
+  });
+}
+var EDITOR_OPT_OUT = /(?:^|&)editor=off(?:&|$)/;
+function isStorefrontPage(path) {
+  if (/^\/(?:@|__|node_modules\/|_serverFn)/.test(path)) return false;
+  const last = path.split("/").pop() ?? "";
+  return !last.includes(".");
+}
+function openEditorFirst(server, editorShown) {
+  server.middlewares.use((req, res, next) => {
+    const url = req.url ?? "/";
+    const [path, query = ""] = url.split("?");
+    const opens = req.method === "GET" && req.headers["sec-fetch-dest"] === "document" && !EDITOR_OPT_OUT.test(query) && isStorefrontPage(path) && (path === "/" || !editorShown());
+    if (!opens) {
+      next();
+      return;
+    }
+    const location = url === "/" ? DEV_EDITOR_PATH : `${DEV_EDITOR_PATH}?path=${encodeURIComponent(url)}`;
+    res.statusCode = 302;
+    res.setHeader("location", location);
+    res.end();
+  });
+}
+function serveEditor(server) {
+  let shown = false;
+  serveEditorPage(server, () => {
+    shown = true;
+  });
+  openEditorFirst(server, () => shown);
+}
 var EMPTY_MODULE = `export default ${JSON.stringify(EMPTY_DEV_SCHEMA)};`;
 var LOG_PREFIX = "[twilight-react:schema]";
 var MAX_REPORTED = 8;
+var DEV_PREVIEW_FILE = "twilight.preview.json";
+var MAX_PREVIEW_BYTES = 2 * 1024 * 1024;
+async function readPreview(path) {
+  try {
+    return normalizePreviewState(JSON.parse(await readFile(path, "utf-8")));
+  } catch {
+    return null;
+  }
+}
+function readBody(req, limit) {
+  return new Promise((resolveBody, reject) => {
+    let size = 0;
+    const chunks = [];
+    req.on("data", (chunk) => {
+      size += chunk.length;
+      if (size > limit) {
+        reject(new Error("request too large"));
+        req.destroy();
+        return;
+      }
+      chunks.push(chunk);
+    });
+    req.on("end", () => resolveBody(Buffer.concat(chunks)));
+    req.on("error", reject);
+  });
+}
+function isSameOrigin(req) {
+  const { origin, host } = req.headers;
+  const site = req.headers["sec-fetch-site"];
+  if (site !== void 0 && site !== "same-origin" && site !== "none") return false;
+  if (origin === void 0) return true;
+  try {
+    return new URL(origin).host === host;
+  } catch {
+    return false;
+  }
+}
+var IMAGE_EXTENSIONS = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/webp": "webp",
+  "image/gif": "gif",
+  "image/avif": "avif"
+};
+var IMAGE_TYPES = Object.fromEntries(
+  Object.entries(IMAGE_EXTENSIONS).map(([type, ext]) => [ext, type])
+);
+var IMAGE_NAME = /^[a-f0-9]{16}\.(png|jpg|webp|gif|avif)$/;
+var DEV_PREVIEW_ASSETS_DIR = "twilight-preview-assets";
+function send(res, status, body, type = "text/plain") {
+  res.statusCode = status;
+  if (body !== void 0) res.setHeader("content-type", type);
+  res.end(body);
+}
+function refreshServerModules(server, resolvedId) {
+  const environments = Object.values(server.environments ?? {});
+  if (!environments.length) {
+    const mod = server.moduleGraph.getModuleById(resolvedId);
+    if (mod) server.moduleGraph.invalidateModule(mod);
+    return;
+  }
+  for (const environment of environments) {
+    const mod = environment.moduleGraph.getModuleById(resolvedId);
+    if (mod) environment.moduleGraph.invalidateModule(mod);
+    if (environment.name !== "client") environment.hot.send({ type: "full-reload" });
+  }
+}
+function imageRoutes(assets) {
+  const saveImage = async (req, res) => {
+    const ext = IMAGE_EXTENSIONS[String(req.headers["content-type"]).split(";")[0].trim()];
+    if (!ext) {
+      send(res, 415, "expected a png, jpeg, webp, gif or avif image");
+      return;
+    }
+    const bytes = await readBody(req, DEV_PREVIEW_IMAGE_MAX_BYTES);
+    const name = `${createHash("sha256").update(bytes).digest("hex").slice(0, 16)}.${ext}`;
+    await mkdir(assets, { recursive: true });
+    await writeFile(resolve(assets, name), bytes);
+    send(
+      res,
+      201,
+      JSON.stringify({ url: `${DEV_PREVIEW_IMAGE_ENDPOINT}/${name}` }),
+      "application/json"
+    );
+  };
+  const serveImage = async (name, res) => {
+    if (!IMAGE_NAME.test(name)) {
+      send(res, 404);
+      return;
+    }
+    try {
+      const bytes = await readFile(resolve(assets, name));
+      res.statusCode = 200;
+      res.setHeader("x-content-type-options", "nosniff");
+      res.setHeader("content-type", IMAGE_TYPES[name.slice(name.lastIndexOf(".") + 1)]);
+      res.end(bytes);
+    } catch {
+      send(res, 404);
+    }
+  };
+  return { saveImage, serveImage };
+}
+function servePreviewFile(server, preview) {
+  let lastWritten;
+  let writes = Promise.resolve();
+  const { saveImage, serveImage } = imageRoutes(resolve(dirname(preview), DEV_PREVIEW_ASSETS_DIR));
+  server.watcher.add(preview);
+  const onPreviewFile = async (file) => {
+    if (file !== preview) return;
+    let content;
+    try {
+      content = await readFile(preview, "utf-8");
+    } catch {
+      content = void 0;
+    }
+    if (content !== void 0 && content === lastWritten) return;
+    refreshServerModules(server, RESOLVED_ID2);
+    server.ws.send({ type: "full-reload" });
+  };
+  server.watcher.on("change", (file) => void onPreviewFile(file));
+  server.watcher.on("add", (file) => void onPreviewFile(file));
+  server.watcher.on("unlink", (file) => void onPreviewFile(file));
+  const saveState = async (req, res) => {
+    if (!String(req.headers["content-type"]).startsWith("application/json")) {
+      send(res, 415, "expected application/json");
+      return;
+    }
+    const body = JSON.parse((await readBody(req, MAX_PREVIEW_BYTES)).toString("utf-8"));
+    const state = normalizePreviewState(body.state);
+    if (!state) throw new Error("not a preview state");
+    const content = `${JSON.stringify(state, null, 2)}
+`;
+    const write = writes.then(async () => {
+      lastWritten = content;
+      await writeFile(preview, content);
+    });
+    writes = write.catch(() => {
+    });
+    await write;
+    refreshServerModules(server, RESOLVED_ID2);
+    server.ws.send({
+      type: "custom",
+      event: DEV_PREVIEW_EVENT,
+      data: { state, from: typeof body.from === "string" ? body.from : null }
+    });
+    send(res, 204);
+  };
+  server.middlewares.use(DEV_PREVIEW_ENDPOINT, (req, res) => {
+    const route = (req.url ?? "/").split("?")[0];
+    if (req.method === "GET" && route.startsWith("/image/")) {
+      void serveImage(route.slice("/image/".length), res);
+      return;
+    }
+    if (req.method !== "POST" || route !== "/" && route !== "" && route !== "/image") {
+      send(res, 405);
+      return;
+    }
+    if (!isSameOrigin(req)) {
+      send(res, 403, "cross-origin write refused");
+      return;
+    }
+    (route === "/image" ? saveImage(req, res) : saveState(req, res)).catch(
+      (error) => send(res, 400, error instanceof Error ? error.message : "bad request")
+    );
+  });
+}
 function twilightSchemaPlugin(twilightJsonPath = "twilight.json") {
   let filePath;
+  let previewPath;
   let isDevServer = false;
   async function checkManifest() {
     if (!isDevServer || !filePath) return;
@@ -321,23 +704,30 @@ function twilightSchemaPlugin(twilightJsonPath = "twilight.json") {
     configResolved(config) {
       isDevServer = config.command === "serve";
       filePath = resolve(config.root, twilightJsonPath);
+      previewPath = resolve(config.root, DEV_PREVIEW_FILE);
     },
     buildStart() {
       return checkManifest();
     },
     resolveId(id) {
       if (id === VIRTUAL_ID2) return RESOLVED_ID2;
+      if (id === EDITOR_ENTRY_ID && isDevServer) return RESOLVED_EDITOR_ENTRY_ID;
     },
     async load(id) {
+      if (id === RESOLVED_EDITOR_ENTRY_ID) return EDITOR_ENTRY;
       if (id !== RESOLVED_ID2) return;
       if (!isDevServer || !filePath) return EMPTY_MODULE;
+      const preview = previewPath ? await readPreview(previewPath) : null;
+      let schema = EMPTY_DEV_SCHEMA;
       try {
-        const raw = JSON.parse(await readFile(filePath, "utf-8"));
-        const schema = buildTwilightSchema(raw);
-        return `export default ${JSON.stringify(schema)};`;
+        schema = buildTwilightSchema(JSON.parse(await readFile(filePath, "utf-8")));
       } catch {
-        return EMPTY_MODULE;
       }
+      return [
+        `const schema = ${JSON.stringify({ ...schema, preview })};`,
+        `globalThis[${JSON.stringify(DEV_PREVIEW_GLOBAL)}] = schema.preview;`,
+        "export default schema;"
+      ].join("\n");
     },
     configureServer(server) {
       if (!filePath) return;
@@ -354,6 +744,8 @@ function twilightSchemaPlugin(twilightJsonPath = "twilight.json") {
       };
       server.watcher.on("change", invalidate);
       server.watcher.on("add", invalidate);
+      if (previewPath) servePreviewFile(server, previewPath);
+      serveEditor(server);
     }
   };
 }
@@ -2223,29 +2615,19 @@ export const Route = createFileRoute('${tanstackRoutePath}')({
 }`;
       return `// @auto-generated
 import { createFileRoute } from '@tanstack/react-router';
-import { ${importName} } from '${moduleImport}';${typeImport}${extraTypeImport}
+import { ${importName}, searchListingSearch } from '${moduleImport}';${typeImport}${extraTypeImport}
 import { withHead } from '${baseImport.replace("/routes", "")}/tanstack';
 
 /**
- * Search route configuration with URL query parameter support.
- * Uses validateSearch for type-safe search params and loaderDeps to pass
- * them to the loader.
+ * Search route configuration: \`searchListingSearch\` keeps ?q=, ?page= and ?sort=
+ * and forwards them to the loader.
  */
 export const Route = createFileRoute('${tanstackRoutePath}')({
-  validateSearch: (search: Record<string, unknown>) => {
-    const page = Number(search.page) || 1;
-    const sort = (search.sort as string) || undefined;
-    return {
-      q: (search.q as string) || '',
-      ...(page > 1 ? { page } : {}),
-      ...(sort ? { sort } : {}),
-    };
-  },
-  loaderDeps: ({ search }) => ({ q: search.q, page: search.page, sort: search.sort }),
+  ...searchListingSearch,
   loader: ({ deps, params }): Promise<${loaderType}> =>
     ${importName}.loader({
       params: { source: 'search' },
-      search: { q: deps.q, page: deps.page, sort: deps.sort },
+      search: deps,
       locale: params.locale,
     }),
   head: withHead(${importName}),
@@ -2351,16 +2733,16 @@ import { ${skeletonName} } from '${skeletonModulePath}';` : "";
       const sortLoaderCall = hasParams ? `({ deps, params }): ${returnType} =>
     ${importName}.loader({
       params: ${paramMapping},
-      search: { page: deps.page, sort: deps.sort },
+      search: deps,
       locale: params.locale,
     })` : `({ deps, params }): ${returnType} =>
     ${importName}.loader({
-      search: { page: deps.page, sort: deps.sort },
+      search: deps,
       locale: params.locale,
     })`;
       return `// @auto-generated
 import { createFileRoute } from '@tanstack/react-router';
-import { ${importName} } from '${moduleImport}';${typeImport}${skeletonImport}
+import { ${importName}, listingSearch } from '${moduleImport}';${typeImport}${skeletonImport}
 ${headImport}
 
 /**
@@ -2368,12 +2750,7 @@ ${headImport}
  * Loads page data via loader and renders the ${importName} component.
  */
 export const Route = createFileRoute('${tanstackRoutePath}')({
-  validateSearch: (search: Record<string, unknown>) => {
-    const page = Number(search.page) || 1;
-    const sort = (search.sort as string) || undefined;
-    return { ...(page > 1 ? { page } : {}), ...(sort ? { sort } : {}) };
-  },
-  loaderDeps: ({ search }) => ({ page: search.page, sort: search.sort }),
+  ...listingSearch,
   loader: ${sortLoaderCall},
   head: ${headCallback},${pendingLine}
   component: ${importName}Component,