simplycms 0.4.0

package/dist/storefront-routes/pages/Properties.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/storefront-routes/pages/Properties.tsx"],"names":[],"mappings":"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","file":"Properties.js","sourcesContent":["import { Link } from '@tanstack/react-router';\nimport { useQuery } from '@tanstack/react-query';\nimport { useT } from 'simplycms/i18n';\nimport { Card, CardContent, CardHeader, CardTitle } from 'simplycms/ui/card';\nimport { Loader2, ChevronRight, Tag } from 'lucide-react';\nimport type { PropertyWithOptions } from 'simplycms/storefront/loaders';\nimport { getProperties } from '../server/properties';\n\nexport interface PropertiesPageProps {\n  properties?: PropertyWithOptions[];\n}\n\nexport default function PropertiesPage({\n  properties: initialProperties,\n}: PropertiesPageProps = {}) {\n  const t = useT();\n\n  /**\n   * 🔴 Один запит замість двох. Кількість значень більше не окремий похід у\n   * БД по ВСІХ опціях магазину: серверний лоадер віддає характеристику разом\n   * з її опціями, тож лічильник — це довжина вже наявного масиву.\n   */\n  const { data: properties, isLoading } = useQuery({\n    queryKey: ['public-properties-with-pages'],\n    queryFn: (): Promise<PropertyWithOptions[]> => getProperties(),\n    initialData: initialProperties,\n  });\n\n  if (isLoading) {\n    return (\n      <div className=\"min-h-[50vh] flex items-center justify-center\">\n        <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"container mx-auto px-4 py-8\">\n      {/* Breadcrumbs */}\n      <nav className=\"flex items-center gap-2 text-sm text-muted-foreground mb-6\">\n        <Link to=\"/\" className=\"hover:text-foreground transition-colors\">\n          {t('breadcrumbs.home')}\n        </Link>\n        <ChevronRight className=\"h-4 w-4\" />\n        <span className=\"text-foreground\">{t('properties.title')}</span>\n      </nav>\n\n      {/* Header */}\n      <div className=\"mb-8\">\n        <h1 className=\"text-4xl font-bold mb-2\">{t('properties.pageTitle')}</h1>\n        <p className=\"text-muted-foreground\">{t('properties.subtitle')}</p>\n      </div>\n\n      {/* Properties grid */}\n      {properties && properties.length > 0 ? (\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\n          {properties.map((property) => (\n            <Link\n              key={property.id}\n              to=\"/properties/$propertySlug\"\n              params={{ propertySlug: property.slug }}\n            >\n              <Card className=\"h-full hover:shadow-lg transition-shadow cursor-pointer group\">\n                <CardHeader className=\"pb-2\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"p-2 bg-primary/10 rounded-lg group-hover:bg-primary/20 transition-colors\">\n                      <Tag className=\"h-5 w-5 text-primary\" />\n                    </div>\n                    <CardTitle className=\"text-lg\">{property.name}</CardTitle>\n                  </div>\n                </CardHeader>\n                <CardContent>\n                  <p className=\"text-sm text-muted-foreground\">\n                    {t('properties.optionCount', {\n                      count: property.property_options.length,\n                    })}\n                  </p>\n                </CardContent>\n              </Card>\n            </Link>\n          ))}\n        </div>\n      ) : (\n        <div className=\"text-center py-12 bg-muted/30 rounded-lg\">\n          <p className=\"text-muted-foreground\">{t('properties.empty')}</p>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/storefront-routes/pages/PropertyDetail.d.ts

@@ -0,0 +1,6 @@
+import type { OptionRow, PropertyWithOptions } from 'simplycms/storefront/loaders';
+export interface PropertyDetailPageProps {
+    property?: PropertyWithOptions;
+    options?: OptionRow[];
+}
+export default function PropertyDetailPage({ property: initialProperty, options: initialOptions, }?: PropertyDetailPageProps): import("react").JSX.Element;

package/dist/storefront-routes/pages/PropertyDetail.js

@@ -0,0 +1,78 @@
+import { getPropertyBySlug } from '../../chunk-MTGH4EXD.js';
+import { useParams, Link } from '@tanstack/react-router';
+import { useQuery } from '@tanstack/react-query';
+import { useT } from 'simplycms/i18n';
+import { Card, CardContent } from 'simplycms/ui/card';
+import { Button } from 'simplycms/ui/button';
+import { Loader2, ChevronRight } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function PropertyDetailPage({
+  property: initialProperty,
+  options: initialOptions
+} = {}) {
+  const t = useT();
+  const params = useParams({ strict: false });
+  const propertySlug = params?.propertySlug;
+  const { data: property, isLoading: propertyLoading } = useQuery({
+    queryKey: ["property-by-slug-detail", propertySlug],
+    queryFn: () => getPropertyBySlug({ data: { slug: propertySlug } }),
+    enabled: !!propertySlug,
+    initialData: initialProperty
+  });
+  const options = property?.property_options ?? initialOptions ?? [];
+  if (propertyLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "min-h-[50vh] flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }) });
+  }
+  if (!property) {
+    return /* @__PURE__ */ jsxs("div", { className: "min-h-[50vh] flex flex-col items-center justify-center", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-4", children: t("properties.notFound") }),
+      /* @__PURE__ */ jsx(Link, { to: "/properties", children: /* @__PURE__ */ jsx(Button, { children: t("properties.backToProperties") }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 py-8", children: [
+    /* @__PURE__ */ jsxs("nav", { className: "flex items-center gap-2 text-sm text-muted-foreground mb-6", children: [
+      /* @__PURE__ */ jsx(Link, { to: "/", className: "hover:text-foreground transition-colors", children: t("breadcrumbs.home") }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: "/properties",
+          className: "hover:text-foreground transition-colors",
+          children: t("properties.title")
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: property.name })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold mb-2", children: property.name }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("properties.chooseValue") })
+    ] }),
+    options.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4", children: options.map((option) => /* @__PURE__ */ jsx(
+      Link,
+      {
+        to: "/properties/$propertySlug/$optionSlug",
+        params: { propertySlug: property.slug, optionSlug: option.slug },
+        children: /* @__PURE__ */ jsxs(Card, { className: "h-full hover:shadow-lg transition-shadow cursor-pointer group overflow-hidden", children: [
+          option.image_url && /* @__PURE__ */ jsx("div", { className: "relative aspect-square overflow-hidden", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: option.image_url,
+              alt: option.name,
+              className: "absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300",
+              loading: "lazy",
+              decoding: "async"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(CardContent, { className: option.image_url ? "pt-3" : "pt-6", children: /* @__PURE__ */ jsx("p", { className: "font-medium text-center group-hover:text-primary transition-colors", children: option.name }) })
+        ] })
+      },
+      option.id
+    )) }) : /* @__PURE__ */ jsx("div", { className: "text-center py-12 bg-muted/30 rounded-lg", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("properties.optionsEmpty") }) })
+  ] });
+}
+
+export { PropertyDetailPage as default };
+//# sourceMappingURL=PropertyDetail.js.map
+//# sourceMappingURL=PropertyDetail.js.map

package/dist/storefront-routes/pages/PropertyDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/storefront-routes/pages/PropertyDetail.tsx"],"names":[],"mappings":"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","file":"PropertyDetail.js","sourcesContent":["import { useParams, Link } from '@tanstack/react-router';\nimport { useQuery } from '@tanstack/react-query';\nimport { useT } from 'simplycms/i18n';\nimport { Card, CardContent } from 'simplycms/ui/card';\nimport { Button } from 'simplycms/ui/button';\nimport { Loader2, ChevronRight } from 'lucide-react';\nimport type {\n  OptionRow,\n  PropertyWithOptions,\n} from 'simplycms/storefront/loaders';\nimport { getPropertyBySlug } from '../server/properties';\n\nexport interface PropertyDetailPageProps {\n  property?: PropertyWithOptions;\n  options?: OptionRow[];\n}\n\nexport default function PropertyDetailPage({\n  property: initialProperty,\n  options: initialOptions,\n}: PropertyDetailPageProps = {}) {\n  const t = useT();\n  const params = useParams({ strict: false }) as Record<\n    string,\n    string | undefined\n  >;\n  const propertySlug = params?.propertySlug as string | undefined;\n\n  /**\n   * 🔴 Один запит замість двох: характеристика приїжджає разом з опціями, а\n   * не другим походом за `property_options` після того, як приїхав її id.\n   * Заодно зникає стан «характеристика вже є, опції ще ні».\n   */\n  const { data: property, isLoading: propertyLoading } = useQuery({\n    queryKey: ['property-by-slug-detail', propertySlug],\n    queryFn: (): Promise<PropertyWithOptions | null> =>\n      getPropertyBySlug({ data: { slug: propertySlug as string } }),\n    enabled: !!propertySlug,\n    initialData: initialProperty,\n  });\n\n  const options: OptionRow[] =\n    property?.property_options ?? initialOptions ?? [];\n\n  if (propertyLoading) {\n    return (\n      <div className=\"min-h-[50vh] flex items-center justify-center\">\n        <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n      </div>\n    );\n  }\n\n  if (!property) {\n    return (\n      <div className=\"min-h-[50vh] flex flex-col items-center justify-center\">\n        <h1 className=\"text-2xl font-bold mb-4\">{t('properties.notFound')}</h1>\n        <Link to=\"/properties\">\n          <Button>{t('properties.backToProperties')}</Button>\n        </Link>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"container mx-auto px-4 py-8\">\n      {/* Breadcrumbs */}\n      <nav className=\"flex items-center gap-2 text-sm text-muted-foreground mb-6\">\n        <Link to=\"/\" className=\"hover:text-foreground transition-colors\">\n          {t('breadcrumbs.home')}\n        </Link>\n        <ChevronRight className=\"h-4 w-4\" />\n        <Link\n          to=\"/properties\"\n          className=\"hover:text-foreground transition-colors\"\n        >\n          {t('properties.title')}\n        </Link>\n        <ChevronRight className=\"h-4 w-4\" />\n        <span className=\"text-foreground\">{property.name}</span>\n      </nav>\n\n      {/* Header */}\n      <div className=\"mb-8\">\n        <h1 className=\"text-4xl font-bold mb-2\">{property.name}</h1>\n        <p className=\"text-muted-foreground\">{t('properties.chooseValue')}</p>\n      </div>\n\n      {/* Options grid */}\n      {options.length > 0 ? (\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4\">\n          {options.map((option) => (\n            <Link\n              key={option.id}\n              to=\"/properties/$propertySlug/$optionSlug\"\n              params={{ propertySlug: property.slug, optionSlug: option.slug }}\n            >\n              <Card className=\"h-full hover:shadow-lg transition-shadow cursor-pointer group overflow-hidden\">\n                {option.image_url && (\n                  <div className=\"relative aspect-square overflow-hidden\">\n                    <img\n                      src={option.image_url}\n                      alt={option.name}\n                      className=\"absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\n                      loading=\"lazy\"\n                      decoding=\"async\"\n                    />\n                  </div>\n                )}\n                <CardContent className={option.image_url ? 'pt-3' : 'pt-6'}>\n                  <p className=\"font-medium text-center group-hover:text-primary transition-colors\">\n                    {option.name}\n                  </p>\n                </CardContent>\n              </Card>\n            </Link>\n          ))}\n        </div>\n      ) : (\n        <div className=\"text-center py-12 bg-muted/30 rounded-lg\">\n          <p className=\"text-muted-foreground\">\n            {t('properties.optionsEmpty')}\n          </p>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/storefront-routes/pages/PropertyPage.d.ts

@@ -0,0 +1,7 @@
+import type { CatalogProductRow, OptionRow, PropertyRow } from 'simplycms/storefront/loaders';
+export interface PropertyOptionPageProps {
+    property?: PropertyRow;
+    option?: OptionRow;
+    products?: CatalogProductRow[];
+}
+export default function PropertyPage({ property: initialProperty, option: initialOption, products: initialProducts, }?: PropertyOptionPageProps): import("react").JSX.Element;

package/dist/storefront-routes/pages/PropertyPage.js

@@ -0,0 +1,131 @@
+import { getPropertyOption } from '../../chunk-MTGH4EXD.js';
+import { useMemo } from 'react';
+import { useParams, Link } from '@tanstack/react-router';
+import { useQuery } from '@tanstack/react-query';
+import { useT } from 'simplycms/i18n';
+import { ProductCard } from 'simplycms/core/components/catalog/ProductCard';
+import { Loader2, ChevronRight } from 'lucide-react';
+import { Button } from 'simplycms/ui/button';
+import { usePriceType } from 'simplycms/core/hooks/usePriceType';
+import { resolvePrice } from 'simplycms/domain/pricing';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function PropertyPage({
+  property: initialProperty,
+  option: initialOption,
+  products: initialProducts
+} = {}) {
+  const t = useT();
+  const params = useParams({ strict: false });
+  const propertySlug = params?.propertySlug;
+  const optionSlug = params?.optionSlug;
+  const { priceTypeId, defaultPriceTypeId } = usePriceType();
+  const initialData = initialProperty && initialOption ? {
+    property: initialProperty,
+    option: initialOption,
+    products: initialProducts ?? []
+  } : void 0;
+  const { data, isLoading } = useQuery({
+    queryKey: ["property-option-page", propertySlug, optionSlug],
+    queryFn: () => getPropertyOption({
+      data: {
+        propertySlug,
+        optionSlug
+      }
+    }),
+    enabled: !!propertySlug && !!optionSlug,
+    initialData
+  });
+  const property = data?.property ?? null;
+  const option = data?.option ?? null;
+  const optionLoading = isLoading;
+  const productsLoading = isLoading;
+  const products = useMemo(() => {
+    if (!data) return void 0;
+    return data.products.map((p) => {
+      const hasModifications = p.has_modifications ?? true;
+      const defaultMod = hasModifications ? p.modifications[0] ?? null : null;
+      const resolved = resolvePrice(
+        p.product_prices,
+        priceTypeId,
+        defaultPriceTypeId,
+        defaultMod?.id ?? null
+      );
+      return {
+        ...p,
+        price: resolved.price,
+        old_price: resolved.oldPrice,
+        stock_status: defaultMod ? defaultMod.stock_status ?? "in_stock" : p.stock_status ?? "in_stock"
+      };
+    });
+  }, [data, priceTypeId, defaultPriceTypeId]);
+  if (optionLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "min-h-[50vh] flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }) });
+  }
+  if (!option) {
+    return /* @__PURE__ */ jsxs("div", { className: "min-h-[50vh] flex flex-col items-center justify-center", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-4", children: t("properties.pageNotFound") }),
+      /* @__PURE__ */ jsx(Link, { to: "/catalog", children: /* @__PURE__ */ jsx(Button, { children: t("catalog.back") }) })
+    ] });
+  }
+  const displayName = option.name;
+  const description = option.description;
+  const imageUrl = option.image_url;
+  return /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-4 py-8", children: [
+    /* @__PURE__ */ jsxs("nav", { className: "flex items-center gap-2 text-sm text-muted-foreground mb-6", children: [
+      /* @__PURE__ */ jsx(Link, { to: "/", className: "hover:text-foreground transition-colors", children: t("breadcrumbs.home") }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: "/properties",
+          className: "hover:text-foreground transition-colors",
+          children: t("properties.title")
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: "/properties/$propertySlug",
+          params: { propertySlug: property?.slug ?? "" },
+          className: "hover:text-foreground transition-colors",
+          children: property?.name
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx("span", { className: "text-foreground", children: displayName })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+      imageUrl && /* @__PURE__ */ jsx("div", { className: "relative w-full h-48 md:h-64 mb-6 rounded-xl overflow-hidden", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: displayName,
+          className: "absolute inset-0 w-full h-full object-cover",
+          loading: "lazy",
+          decoding: "async"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold mb-4", children: displayName }),
+      description && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "prose prose-lg max-w-none text-muted-foreground dark:prose-invert",
+          dangerouslySetInnerHTML: { __html: description }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold mb-6", children: property?.name ? t("properties.productsFiltered", {
+        property: property.name,
+        option: option.name
+      }) : t("properties.products") }),
+      productsLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }) }) : products && products.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4", children: products.map((product) => /* @__PURE__ */ jsx(ProductCard, { product }, product.id)) }) : /* @__PURE__ */ jsx("div", { className: "text-center py-12 bg-muted/30 rounded-lg", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: t("properties.productsEmpty") }) })
+    ] })
+  ] });
+}
+
+export { PropertyPage as default };
+//# sourceMappingURL=PropertyPage.js.map
+//# sourceMappingURL=PropertyPage.js.map

package/dist/storefront-routes/pages/PropertyPage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/storefront-routes/pages/PropertyPage.tsx"],"names":[],"mappings":"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","file":"PropertyPage.js","sourcesContent":["import { useMemo } from 'react';\nimport { useParams, Link } from '@tanstack/react-router';\nimport { useQuery } from '@tanstack/react-query';\nimport { useT } from 'simplycms/i18n';\nimport { ProductCard } from 'simplycms/core/components/catalog/ProductCard';\nimport { Loader2, ChevronRight } from 'lucide-react';\nimport { Button } from 'simplycms/ui/button';\nimport { usePriceType } from 'simplycms/core/hooks/usePriceType';\nimport { resolvePrice } from 'simplycms/domain/pricing';\nimport type {\n  CatalogProductRow,\n  OptionRow,\n  PropertyOptionPageData,\n  PropertyRow,\n} from 'simplycms/storefront/loaders';\nimport { getPropertyOption } from '../server/properties';\n\nexport interface PropertyOptionPageProps {\n  property?: PropertyRow;\n  option?: OptionRow;\n  products?: CatalogProductRow[];\n}\n\nexport default function PropertyPage({\n  property: initialProperty,\n  option: initialOption,\n  products: initialProducts,\n}: PropertyOptionPageProps = {}) {\n  const t = useT();\n  const params = useParams({ strict: false }) as Record<\n    string,\n    string | undefined\n  >;\n  const propertySlug = params?.propertySlug as string | undefined;\n  const optionSlug = params?.optionSlug as string | undefined;\n\n  const { priceTypeId, defaultPriceTypeId } = usePriceType();\n\n  /**\n   * 🔴 Один серверний виклик замість чотирьох клієнтських запитів\n   * (характеристика → опція → id товарів двома вибірками → самі товари).\n   * Обидва рівні характеристики — товар і модифікація — обʼєднані в SQL, тож\n   * список більше не залежить від того, скільки id влізе в `in (…)`.\n   */\n  const initialData: PropertyOptionPageData | undefined =\n    initialProperty && initialOption\n      ? {\n          property: initialProperty,\n          option: initialOption,\n          products: initialProducts ?? [],\n        }\n      : undefined;\n\n  const { data, isLoading } = useQuery({\n    queryKey: ['property-option-page', propertySlug, optionSlug],\n    queryFn: (): Promise<PropertyOptionPageData | null> =>\n      getPropertyOption({\n        data: {\n          propertySlug: propertySlug as string,\n          optionSlug: optionSlug as string,\n        },\n      }),\n    enabled: !!propertySlug && !!optionSlug,\n    initialData,\n  });\n\n  const property = data?.property ?? null;\n  const option = data?.option ?? null;\n  const optionLoading = isLoading;\n  const productsLoading = isLoading;\n\n  // Резолв цін під тип ціни покупця — форма картки лишилась незмінною.\n  const products = useMemo(() => {\n    if (!data) return undefined;\n    return data.products.map((p) => {\n      const hasModifications = p.has_modifications ?? true;\n      const defaultMod = hasModifications ? (p.modifications[0] ?? null) : null;\n      const resolved = resolvePrice(\n        p.product_prices,\n        priceTypeId,\n        defaultPriceTypeId,\n        defaultMod?.id ?? null,\n      );\n\n      return {\n        ...p,\n        price: resolved.price,\n        old_price: resolved.oldPrice,\n        stock_status: defaultMod\n          ? (defaultMod.stock_status ?? 'in_stock')\n          : (p.stock_status ?? 'in_stock'),\n      };\n    });\n  }, [data, priceTypeId, defaultPriceTypeId]);\n\n  if (optionLoading) {\n    return (\n      <div className=\"min-h-[50vh] flex items-center justify-center\">\n        <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n      </div>\n    );\n  }\n\n  if (!option) {\n    return (\n      <div className=\"min-h-[50vh] flex flex-col items-center justify-center\">\n        <h1 className=\"text-2xl font-bold mb-4\">\n          {t('properties.pageNotFound')}\n        </h1>\n        <Link to=\"/catalog\">\n          <Button>{t('catalog.back')}</Button>\n        </Link>\n      </div>\n    );\n  }\n\n  // Page data is now directly on the option\n  const displayName = option.name;\n  const description = option.description;\n  const imageUrl = option.image_url;\n\n  return (\n    <div className=\"container mx-auto px-4 py-8\">\n      {/* Breadcrumbs */}\n      <nav className=\"flex items-center gap-2 text-sm text-muted-foreground mb-6\">\n        <Link to=\"/\" className=\"hover:text-foreground transition-colors\">\n          {t('breadcrumbs.home')}\n        </Link>\n        <ChevronRight className=\"h-4 w-4\" />\n        <Link\n          to=\"/properties\"\n          className=\"hover:text-foreground transition-colors\"\n        >\n          {t('properties.title')}\n        </Link>\n        <ChevronRight className=\"h-4 w-4\" />\n        <Link\n          to=\"/properties/$propertySlug\"\n          params={{ propertySlug: property?.slug ?? '' }}\n          className=\"hover:text-foreground transition-colors\"\n        >\n          {property?.name}\n        </Link>\n        <ChevronRight className=\"h-4 w-4\" />\n        <span className=\"text-foreground\">{displayName}</span>\n      </nav>\n\n      {/* Hero section */}\n      <div className=\"mb-8\">\n        {imageUrl && (\n          <div className=\"relative w-full h-48 md:h-64 mb-6 rounded-xl overflow-hidden\">\n            <img\n              src={imageUrl}\n              alt={displayName}\n              className=\"absolute inset-0 w-full h-full object-cover\"\n              loading=\"lazy\"\n              decoding=\"async\"\n            />\n          </div>\n        )}\n\n        <h1 className=\"text-4xl font-bold mb-4\">{displayName}</h1>\n\n        {description && (\n          <div\n            className=\"prose prose-lg max-w-none text-muted-foreground dark:prose-invert\"\n            dangerouslySetInnerHTML={{ __html: description }}\n          />\n        )}\n      </div>\n\n      {/* Products section */}\n      <div>\n        <h2 className=\"text-2xl font-bold mb-6\">\n          {property?.name\n            ? t('properties.productsFiltered', {\n                property: property.name,\n                option: option.name,\n              })\n            : t('properties.products')}\n        </h2>\n\n        {productsLoading ? (\n          <div className=\"flex items-center justify-center py-12\">\n            <Loader2 className=\"h-8 w-8 animate-spin text-primary\" />\n          </div>\n        ) : products && products.length > 0 ? (\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4\">\n            {products.map((product) => (\n              <ProductCard key={product.id} product={product} />\n            ))}\n          </div>\n        ) : (\n          <div className=\"text-center py-12 bg-muted/30 rounded-lg\">\n            <p className=\"text-muted-foreground\">\n              {t('properties.productsEmpty')}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/storefront-routes/pages/cart/breadcrumbs.d.ts

@@ -0,0 +1,4 @@
+import type { Translator } from 'simplycms/i18n';
+import type { BreadcrumbItem } from 'simplycms/contracts/views';
+/** Головна → сам кошик (остання ланка без `href` — рендериться текстом). */
+export declare function buildCartBreadcrumbs(t: Translator): BreadcrumbItem[];

package/dist/storefront-routes/pages/cart/slots.d.ts

@@ -0,0 +1,2 @@
+import type { CartSlots } from 'simplycms/contracts/views';
+export declare const cartSlots: CartSlots;

package/dist/storefront-routes/pages/catalog/active-filter-chips.d.ts

@@ -0,0 +1,20 @@
+import type { Translator } from 'simplycms/i18n';
+import type { ActiveFilterChip, CatalogFiltersState, NumericProperty, NumericRange, NumericRanges } from './types';
+/** Опція характеристики; назву групи читаємо з приєднаної гілки. */
+export interface PropertyOptionRow {
+    id: string;
+    name: string;
+    section_properties: unknown;
+}
+export interface ChipSources {
+    priceRange: NumericRange | undefined;
+    numericRanges: NumericRanges;
+    numericProperties: NumericProperty[] | undefined;
+    propertyOptions: PropertyOptionRow[] | undefined;
+}
+/**
+ * Порядок бейджів — ціна, діапазони, опції; до спліту він повторював порядок
+ * ключів у стані фільтрів. Різниця суто косметична (склад бейджів той самий),
+ * зате зникає дедуплікація пар `…Min`/`…Max` пошуком по вже зібраному списку.
+ */
+export declare function buildActiveFilterChips(filters: CatalogFiltersState, t: Translator, sources: ChipSources): ActiveFilterChip[];

package/dist/storefront-routes/pages/catalog/breadcrumbs.d.ts

@@ -0,0 +1,6 @@
+import type { Translator } from 'simplycms/i18n';
+import type { BreadcrumbItem } from 'simplycms/contracts/views';
+/** Головна → каталог (остання ланка без `href` — рендериться текстом). */
+export declare function buildCatalogBreadcrumbs(t: Translator): BreadcrumbItem[];
+/** Головна → каталог → розділ. */
+export declare function buildSectionBreadcrumbs(t: Translator, sectionName: string): BreadcrumbItem[];

package/dist/storefront-routes/pages/catalog/filter-predicates.d.ts

@@ -0,0 +1,21 @@
+import type { CatalogFiltersState, NumericProperty } from './types';
+/** Мінімум полів товару, потрібний фільтрам і сортуванню. */
+export interface FilterableProduct {
+    price: number | null;
+    created_at: string;
+    isAvailable: boolean;
+    section: {
+        id: string;
+    } | null;
+    propertyValues: Array<{
+        property_id: string;
+        numeric_value: number | null;
+        option_id: string | null;
+    }>;
+}
+/** Фільтри-діапазони числових характеристик. */
+export declare function matchesNumericFilters(product: FilterableProduct, filters: CatalogFiltersState, numericProperties: NumericProperty[] | undefined): boolean;
+/** Фільтри-опції (мультивибір за `option_id`). */
+export declare function matchesOptionFilters(product: FilterableProduct, filters: CatalogFiltersState): boolean;
+/** Фільтр ціни; товар без ціни ним не відсіюється. */
+export declare function matchesPriceFilter(product: FilterableProduct, filters: CatalogFiltersState): boolean;

package/dist/storefront-routes/pages/catalog/filtering.d.ts

@@ -0,0 +1,25 @@
+import type { CatalogSortOption } from '../../views/slots/CatalogToolbarSlots';
+import { type FilterableProduct } from './filter-predicates';
+import type { CatalogFiltersState, NumericProperty, NumericRange, NumericRanges } from './types';
+export type { FilterableProduct };
+export interface FilterAndSortOptions {
+    filters: CatalogFiltersState;
+    sortBy: CatalogSortOption;
+    /** Розділ поточної вибірки; `null` — усі товари. */
+    sectionId: string | null;
+    numericProperties: NumericProperty[] | undefined;
+}
+/** Межі цін вибірки — початкові значення слайдера фільтра. */
+export declare function computePriceRange<T extends {
+    price: number | null;
+}>(products: T[] | undefined): NumericRange | undefined;
+/** Товари поточного розділу; без розділу — вибірка цілком. */
+export declare function filterBySection<T extends {
+    section: {
+        id: string;
+    } | null;
+}>(products: T[] | undefined, sectionId: string | null): T[] | undefined;
+/** Межі числових характеристик по товарах поточного розділу. */
+export declare function computeNumericRanges<T extends FilterableProduct>(products: T[] | undefined, numericProperties: NumericProperty[] | undefined, sectionId: string | null): NumericRanges;
+/** Вибірка після всіх фільтрів і сортування. */
+export declare function filterAndSortProducts<T extends FilterableProduct>(products: T[] | undefined, { filters, sortBy, sectionId, numericProperties }: FilterAndSortOptions): T[];

package/dist/storefront-routes/pages/catalog/slot-context.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import type { CatalogFiltersProps } from '../../views/slots/CatalogFilters';
+import type { CatalogProductGridProps } from '../../views/slots/CatalogProductGrid';
+import type { CatalogFilterChipsProps, CatalogLinkChipsProps } from '../../views/slots/CatalogSectionChips';
+import type { CatalogActiveFiltersProps, CatalogSortSelectProps, CatalogViewModeToggleProps } from '../../views/slots/CatalogToolbarSlots';
+/**
+ * Чипси розділів — один реквізит із двома поведінками: у каталозі вони
+ * перемикають вибірку на місці, на сторінці розділу ведуть лінками. Вибір
+ * робить контейнер, тема лише ставить слот у свій лейаут.
+ */
+export type CatalogChipsBinding = ({
+    mode: 'filter';
+} & Omit<CatalogFilterChipsProps, 'className'>) | ({
+    mode: 'link';
+} & Omit<CatalogLinkChipsProps, 'className'>);
+/** Усе, що контейнер прибінджує до реквізитів каталогу. */
+export interface CatalogBindings {
+    chips: CatalogChipsBinding;
+    filters: Omit<CatalogFiltersProps, 'className'>;
+    sort: Omit<CatalogSortSelectProps, 'className'>;
+    viewMode: Omit<CatalogViewModeToggleProps, 'className'>;
+    activeFilters: Omit<CatalogActiveFiltersProps, 'className'>;
+    grid: Omit<CatalogProductGridProps, 'className'>;
+}
+/**
+ * 🔴 Прив'язки їдуть контекстом, а не замиканнями: компоненти слотів мають
+ * бути модуль-рівневими й сталими, інакше React перемонтовував би піддерева
+ * реквізитів (фільтри з власними запитами, сітку товарів) щорендеру.
+ */
+export declare function CatalogSlotBindings({ value, children, }: {
+    value: CatalogBindings;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useCatalogBindings(): CatalogBindings;

package/dist/storefront-routes/pages/catalog/slots.d.ts

@@ -0,0 +1,3 @@
+import type { CatalogSlots } from 'simplycms/contracts/views';
+/** Сталий набір реквізитів каталогу — саме він їде у view-model. */
+export declare const catalogSlots: CatalogSlots;

package/dist/storefront-routes/pages/catalog/types.d.ts

@@ -0,0 +1,33 @@
+import type { FilterValue } from 'simplycms/core/components/catalog/FilterSidebar';
+export type { FilterValue };
+/** Стан панелі фільтрів: ключ характеристики → обране значення. */
+export type CatalogFiltersState = Record<string, FilterValue>;
+/** Значення характеристики товару у вибірці каталогу. */
+export interface CatalogPropertyValue {
+    property_id: string;
+    value: string | null;
+    numeric_value: number | null;
+    option_id: string | null;
+}
+/** Числова характеристика розділу, придатна для фільтра-діапазону. */
+export interface NumericProperty {
+    id: string;
+    slug: string;
+    property_type: string;
+    is_filterable: boolean;
+}
+/** Межі числового діапазону поточної вибірки. */
+export interface NumericRange {
+    min: number;
+    max: number;
+}
+/** Діапазони числових характеристик: slug характеристики → межі. */
+export type NumericRanges = Record<string, NumericRange>;
+/** Бейдж активного фільтра — форма `ActiveFilters` ядра. */
+export interface ActiveFilterChip {
+    key: string;
+    label: string;
+    value: string;
+    type: 'option' | 'range' | 'price';
+    optionId?: string;
+}

package/dist/storefront-routes/pages/catalog/useActiveFilters.d.ts

@@ -0,0 +1,17 @@
+import { type ChipSources, type PropertyOptionRow } from './active-filter-chips';
+import type { CatalogFiltersState } from './types';
+export type { PropertyOptionRow };
+interface UseActiveFiltersOptions extends ChipSources {
+    filters: CatalogFiltersState;
+    setFilters: (filters: CatalogFiltersState) => void;
+}
+/** Список бейджів активних фільтрів + обробники їх зняття. */
+export declare function useActiveFilters({ filters, setFilters, priceRange, numericRanges, numericProperties, propertyOptions, }: UseActiveFiltersOptions): {
+    chips: import("./types").ActiveFilterChip[];
+    onRemoveFilter: (filter: {
+        key: string;
+        type: string;
+        optionId?: string;
+    }) => void;
+    onClearAll: () => void;
+};

package/dist/storefront-routes/pages/catalog/useCatalogController.d.ts

@@ -0,0 +1,19 @@
+import type { ProductListItem } from '../../server/product-list-item';
+import type { CatalogBindings } from './slot-context';
+import { type CatalogSectionRow } from './useCatalogQueries';
+export interface CatalogControllerOptions {
+    /**
+     * Сторінка розділу: вибірка звужена запитом. `undefined` — сторінка
+     * каталогу (розділ обирається чипсами на клієнті), `null` — сторінка
+     * розділу, розділ якої ще не приїхав.
+     */
+    sectionId?: string | null;
+    initialSections?: CatalogSectionRow[];
+    initialProducts?: ProductListItem[];
+}
+export interface CatalogController {
+    /** Підпис панелі інструментів: скільки товарів у поточній вибірці. */
+    productCount: number;
+    bindings: CatalogBindings;
+}
+export declare function useCatalogController({ sectionId, initialSections, initialProducts, }?: CatalogControllerOptions): CatalogController;

package/dist/storefront-routes/pages/catalog/useCatalogProductsQuery.d.ts

@@ -0,0 +1,18 @@
+import type { CatalogProductRow } from 'simplycms/storefront/loaders';
+/**
+ * Вибірка товарів із модифікаціями, цінами, характеристиками й наявністю.
+ *
+ * `sectionId`:
+ * - `undefined` — сторінка каталогу: беруться ВСІ активні товари, розділ
+ *   потім фільтрується на клієнті (чипси перемикають вибірку без запиту);
+ * - рядок — сторінка розділу: вибірка звужена запитом;
+ * - `null` — сторінка розділу, розділ ще не приїхав: запит чекає.
+ *
+ * 🔴 Три колишні запити браузера (модифікації, характеристики модифікацій,
+ * залишки по точках видачі) склеєні в один серверний виклик. Наявність
+ * приходить готовим прапорцем `isAvailable`: складські рядки клієнту не
+ * потрібні й назовні більше не їдуть.
+ */
+export declare function useCatalogProductsQuery(sectionId: string | null | undefined): import("@tanstack/react-query").UseQueryResult<NoInfer<CatalogProductRow[]>, Error>;
+/** Товар вибірки до резолву ціни. */
+export type RawCatalogProduct = CatalogProductRow;

package/dist/storefront-routes/pages/catalog/useCatalogQueries.d.ts

@@ -0,0 +1,17 @@
+import type { SectionRow } from 'simplycms/storefront/loaders';
+/** Рядок розділу у формі, яку віддає SSR-лоадер і споживають чипси. */
+export type CatalogSectionRow = SectionRow;
+/** Усі активні розділи — чипси над списком товарів. */
+export declare function useSectionsQuery(initialSections?: CatalogSectionRow[]): import("@tanstack/react-query").UseQueryResult<NoInfer<SectionRow[]>, Error>;
+/** Розділ поточної сторінки за slug-ом. */
+export declare function useSectionQuery(sectionSlug: string | undefined, initialSection?: CatalogSectionRow): import("@tanstack/react-query").UseQueryResult<NoInfer<SectionRow | null>, Error>;
+/** Числові характеристики розділу, за якими можна фільтрувати. */
+export declare function useNumericPropertiesQuery(sectionId: string | null): import("@tanstack/react-query").UseQueryResult<NoInfer<import("simplycms/storefront/loaders").NumericPropertyRow[]>, Error>;
+/**
+ * Опції характеристик — назви для бейджів активних фільтрів.
+ *
+ * 🔴 Ключ без розділу навмисно: запит вибирає опції ЦІЛКОМ і розділу не
+ * знає, тож розділ у ключі давав би зайвий рефетч тих самих даних на кожне
+ * перемикання чипсів (так було до спліту, окремими ключами на двох сторінках).
+ */
+export declare function usePropertyOptionsQuery(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("simplycms/storefront/loaders").FilterOptionRow[]>, Error>;

package/dist/storefront-routes/pages/catalog/usePricedProducts.d.ts

@@ -0,0 +1,38 @@
+import { type PriceEntry } from 'simplycms/domain/pricing';
+import type { RawCatalogProduct } from './useCatalogProductsQuery';
+/**
+ * Ціна за замовчуванням береться з модифікації-дефолту (товар із
+ * модифікаціями) або з самого товару. Знижка, якщо спрацювала, стає
+ * поточною ціною, а вихідна показується як «стара».
+ *
+ * 🔴 Три хуки цінового контуру викликаються безумовно — інакше їхні запити
+ * серіалізувалися б після вибірки товарів замість того, щоб іти паралельно.
+ */
+export declare function usePricedProducts(rawProducts: RawCatalogProduct[] | undefined): {
+    price: number | null;
+    old_price: number | null;
+    stock_status: "in_stock" | "out_of_stock" | "on_order";
+    has_modifications: boolean;
+    section: import("../../../storefront").SectionRef | null;
+    product_modifications: import("../../../storefront").CatalogModificationRow[];
+    modifications: import("../../../storefront").CatalogModificationRow[];
+    product_prices: PriceEntry[];
+    propertyValues: import("../../../storefront").CatalogPropertyValueRow[];
+    isAvailable: boolean;
+    name: import("../../../schema/types").Product["name"];
+    id: import("../../../schema/types").Product["id"];
+    images: string[];
+    description: import("../../../schema/types").Product["description"];
+    is_active: import("../../../schema/types").Product["isActive"];
+    updated_at: import("../../../schema/types").Product["updatedAt"];
+    created_at: import("../../../schema/types").Product["createdAt"];
+    slug: import("../../../schema/types").Product["slug"];
+    meta_title: import("../../../schema/types").Product["metaTitle"];
+    meta_description: import("../../../schema/types").Product["metaDescription"];
+    section_id: import("../../../schema/types").Product["sectionId"];
+    short_description: import("../../../schema/types").Product["shortDescription"];
+    is_featured: import("../../../schema/types").Product["isFeatured"];
+    sku: import("../../../schema/types").Product["sku"];
+}[] | undefined;
+/** Товар вибірки з резолвленою ціною — саме він їде у фільтри й у сітку. */
+export type PricedProduct = NonNullable<ReturnType<typeof usePricedProducts>>[number];

package/dist/storefront-routes/pages/home/SectionProductCarousel.d.ts

@@ -0,0 +1,11 @@
+import type { HomeProduct, HomeSection } from './types';
+export interface SectionProductCarouselProps {
+    section: HomeSection;
+    /** Товари секції з SSR-лоадера — без них карусель зробила б власний запит */
+    initialData?: HomeProduct[];
+}
+/**
+ * Канонічна секція головної: товарна добірка однієї кореневої категорії.
+ * Порожні категорії не рендеряться.
+ */
+export declare function SectionProductCarousel({ section, initialData, }: SectionProductCarouselProps): import("react").JSX.Element | null;

package/dist/storefront-routes/pages/home/queries.d.ts

@@ -0,0 +1,26 @@
+import type { HomeProduct, HomeSection } from './types';
+/**
+ * Запити головної.
+ *
+ * 🔴 Усі чотири ходять через `createServerFn`, а не в БД із браузера: на
+ * чистому Postgres PostgREST не існує, тож будь-який `supabase.from(...)`
+ * після гідрації просто нікуди не потрапляє. Форма даних збережена
+ * дослівно — сторінка й картки не переписувались.
+ */
+/** Популярні товари (`is_featured`) — канонічна добірка головної */
+export declare function useFeaturedProducts(initialData?: HomeProduct[]): import("@tanstack/react-query").UseQueryResult<NoInfer<HomeProduct[]>, Error>;
+/** Новинки — канонічна добірка головної */
+export declare function useNewProducts(initialData?: HomeProduct[]): import("@tanstack/react-query").UseQueryResult<NoInfer<HomeProduct[]>, Error>;
+/** Кореневі категорії каталогу */
+export declare function useRootSections(initialData?: HomeSection[]): import("@tanstack/react-query").UseQueryResult<NoInfer<HomeSection[]>, Error>;
+/** Опції посекційної добірки: `initialData` приходить із SSR-лоадера */
+export interface SectionProductsOptions {
+    initialData?: HomeProduct[];
+}
+/**
+ * Товари однієї категорії — для посекційної добірки.
+ *
+ * Дані префетчить SSR-лоадер головної й передає через `initialData`: разом зі
+ * `staleTime` це прибирає N+1 — карусель не ходить на сервер під час рендеру.
+ */
+export declare function useSectionProducts(section: HomeSection, options?: SectionProductsOptions): import("@tanstack/react-query").UseQueryResult<NoInfer<HomeProduct[]>, Error>;