@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/ui/components/Toast.style.css

@@ -87,28 +87,26 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-toast--success {
-    border-color: rgba(20, 83, 45, 0.6);
-    background: rgba(20, 83, 45, 0.7);
-    color: #dcfce7;
-  }
-  .appkit-toast--error {
-    border-color: rgba(127, 29, 29, 0.6);
-    background: rgba(127, 29, 29, 0.7);
-    color: #fecdd3;
-  }
-  .appkit-toast--warning {
-    border-color: rgba(120, 53, 15, 0.6);
-    background: rgba(120, 53, 15, 0.7);
-    color: #fef3c7;
-  }
-  .appkit-toast--info {
-    border-color: rgba(12, 74, 110, 0.6);
-    background: rgba(12, 74, 110, 0.7);
-    color: #e0f2fe;
-  }
-  .appkit-toast__icon {
-    background: rgba(255, 255, 255, 0.1);
-  }
+.dark .appkit-toast--success {
+  border-color: rgba(20, 83, 45, 0.6);
+  background: rgba(20, 83, 45, 0.7);
+  color: #dcfce7;
+}
+.dark .appkit-toast--error {
+  border-color: rgba(127, 29, 29, 0.6);
+  background: rgba(127, 29, 29, 0.7);
+  color: #fecdd3;
+}
+.dark .appkit-toast--warning {
+  border-color: rgba(120, 53, 15, 0.6);
+  background: rgba(120, 53, 15, 0.7);
+  color: #fef3c7;
+}
+.dark .appkit-toast--info {
+  border-color: rgba(12, 74, 110, 0.6);
+  background: rgba(12, 74, 110, 0.7);
+  color: #e0f2fe;
+}
+.dark .appkit-toast__icon {
+  background: rgba(255, 255, 255, 0.1);
 }

package/dist/ui/components/Toggle.style.css

@@ -91,17 +91,15 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-toggle__track:focus-visible {
-    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
-  }
-  .appkit-toggle__track--off {
-    background-color: #334155;
-  }
-  .appkit-toggle__track--on {
-    background-color: #ec4899;
-  }
-  .appkit-toggle__thumb {
-    background: #020617;
-  }
+.dark .appkit-toggle__track:focus-visible {
+  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
+}
+.dark .appkit-toggle__track--off {
+  background-color: #334155;
+}
+.dark .appkit-toggle__track--on {
+  background-color: #ec4899;
+}
+.dark .appkit-toggle__thumb {
+  background: #020617;
 }

package/dist/ui/index.d.ts

@@ -8,6 +8,7 @@ export { Div } from "./components/Div";
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export type { SpinnerProps } from "./components/Spinner";
 export { Spinner } from "./components/Spinner";
+export { PageLoader } from "./components/PageLoader";
 export type { SkeletonProps } from "./components/Skeleton";
 export { Skeleton } from "./components/Skeleton";
 export type { ButtonProps } from "./components/Button";
@@ -108,6 +109,8 @@ export type { MenuProps } from "./components/Menu";
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, } from "./components/Menu";
 export type { DynamicSelectProps, DynamicSelectOption, AsyncPage, } from "./components/DynamicSelect";
 export { DynamicSelect } from "./components/DynamicSelect";
+export type { InlineCreateSelectProps } from "./components/InlineCreateSelect";
+export { InlineCreateSelect } from "./components/InlineCreateSelect";
 export type { RoleBadgeProps } from "./components/RoleBadge";
 export { RoleBadge } from "./components/RoleBadge";
 export type { SkipToMainProps } from "./components/SkipToMain";
@@ -130,6 +133,8 @@ export type { ActiveFilter, ActiveFilterChipsProps, } from "./components/ActiveF
 export { ActiveFilterChips } from "./components/ActiveFilterChips";
 export type { SortOption, SortDropdownProps } from "./components/SortDropdown";
 export { SortDropdown } from "./components/SortDropdown";
+export type { ListingToolbarProps, ListingToolbarSortOption, ListingToolbarLabels } from "./components/ListingToolbar";
+export { ListingToolbar } from "./components/ListingToolbar";
 export type { TablePaginationProps, TablePaginationLabels, } from "./components/TablePagination";
 export { TablePagination } from "./components/TablePagination";
 export type { DataTableProps, DataTableColumn } from "./DataTable";
@@ -143,6 +148,8 @@ export type { SideModalProps } from "./components/SideModal";
 export { SideModal } from "./components/SideModal";
 export type { RichTextProps } from "./rich-text/RichText";
 export { RichText } from "./rich-text/RichText";
+export type { RichTextRendererProps } from "./rich-text/RichTextRenderer";
+export { RichTextRenderer } from "./rich-text/RichTextRenderer";
 export type { RichTextEditorProps } from "./components/RichTextEditor";
 export { RichTextEditor } from "./components/RichTextEditor";
 export type { ListingLayoutProps, ListingLayoutLabels, } from "./components/ListingLayout";
@@ -157,6 +164,8 @@ export type { StackedViewShellProps, StackedViewShellLabels, } from "./component
 export { StackedViewShell } from "./components/StackedViewShell";
 export type { BulkActionBarProps, BulkActionBarLabels, BulkActionItem, } from "./components/BulkActionBar";
 export { BulkActionBar } from "./components/BulkActionBar";
+export type { BulkActionsBarProps, BulkAction } from "./components/BulkActionsBar";
+export { BulkActionsBar } from "./components/BulkActionsBar";
 export type { FlowStep, FlowDiagramProps } from "./components/FlowDiagram";
 export { FlowDiagram } from "./components/FlowDiagram";
 export type { BaseListingCardRootProps, BaseListingCardHeroProps, BaseListingCardInfoProps, BaseListingCardCheckboxProps, } from "./components/BaseListingCard";

package/dist/ui/index.js

@@ -6,6 +6,7 @@ export { Div } from "./components/Div";
 // --- Typography primitives ----------------------------------------------------
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export { Spinner } from "./components/Spinner";
+export { PageLoader } from "./components/PageLoader";
 export { Skeleton } from "./components/Skeleton";
 export { Button } from "./components/Button";
 export { IconButton } from "./components/IconButton";
@@ -56,6 +57,7 @@ export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSeparator, } from "./components/Dropdown";
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, } from "./components/Menu";
 export { DynamicSelect } from "./components/DynamicSelect";
+export { InlineCreateSelect } from "./components/InlineCreateSelect";
 export { RoleBadge } from "./components/RoleBadge";
 export { SkipToMain } from "./components/SkipToMain";
 export { NavigationLoader } from "./components/NavigationLoader";
@@ -67,6 +69,7 @@ export { AvatarDisplay } from "./components/AvatarDisplay";
 export { DashboardStatsCard } from "./components/DashboardStatsCard";
 export { ActiveFilterChips } from "./components/ActiveFilterChips";
 export { SortDropdown } from "./components/SortDropdown";
+export { ListingToolbar } from "./components/ListingToolbar";
 export { TablePagination } from "./components/TablePagination";
 export { DataTable } from "./DataTable";
 export { DEFAULT_TABLE_CONFIG, DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, mergeTableConfig, } from "../contracts";
@@ -75,6 +78,7 @@ export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
 export { classNames, mergeTailwindClasses } from "./style.helper";
 export { SideModal } from "./components/SideModal";
 export { RichText } from "./rich-text/RichText";
+export { RichTextRenderer } from "./rich-text/RichTextRenderer";
 export { RichTextEditor } from "./components/RichTextEditor";
 export { ListingLayout } from "./components/ListingLayout";
 export { ListingViewShell } from "./components/ListingViewShell";
@@ -82,6 +86,7 @@ export { SlottedListingView } from "./components/SlottedListingView";
 export { DetailViewShell } from "./components/DetailViewShell";
 export { StackedViewShell } from "./components/StackedViewShell";
 export { BulkActionBar } from "./components/BulkActionBar";
+export { BulkActionsBar } from "./components/BulkActionsBar";
 export { FlowDiagram } from "./components/FlowDiagram";
 export { BaseListingCard } from "./components/BaseListingCard";
 export { default as ImageGallery } from "./components/ImageGallery";

package/dist/ui/rich-text/RichText.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Div } from "../components/Div";
-// --- Allowed HTML tags (safe subset — no script/iframe/object) ---------------
+import { normalizeRichTextHtml } from "../../utils/string.formatter";
+// --- Allowed HTML tags (safe subset — no script/object; iframe allowed for YouTube only) -------
 const ALLOWED_TAGS = new Set([
     "p",
     "br",
@@ -44,6 +45,7 @@ const ALLOWED_TAGS = new Set([
     "div",
     "section",
     "article",
+    "iframe",
 ]);
 /** Attributes allowed per tag. "*" means allowed on any tag. */
 const ALLOWED_ATTRS = {
@@ -53,6 +55,7 @@ const ALLOWED_ATTRS = {
     td: ["colspan", "rowspan"],
     th: ["colspan", "rowspan", "scope"],
     ol: ["type", "start"],
+    iframe: ["src", "width", "height", "frameborder", "allowfullscreen", "allow", "title", "loading"],
 };
 // --- Simple client-side sanitiser --------------------------------------------
 // We avoid a third-party sanitizer dependency to keep this module lightweight.
@@ -97,6 +100,22 @@ function sanitiseHtml(dirty) {
                     child.removeAttribute("src");
                 }
             }
+            if (tag === "iframe") {
+                const src = child.getAttribute("src") ?? "";
+                const isYoutube = /^https:\/\/(www\.)?(youtube\.com\/embed\/|youtube-nocookie\.com\/embed\/)/.test(src.trim());
+                if (!isYoutube) {
+                    node.replaceChild(document.createTextNode(""), child);
+                    continue;
+                }
+                // Wrap in responsive 16:9 container if parent isn't already one
+                const wrapper = document.createElement("div");
+                wrapper.className = "relative aspect-video w-full overflow-hidden rounded-lg my-4";
+                child.setAttribute("class", "absolute inset-0 h-full w-full");
+                child.setAttribute("loading", "lazy");
+                node.replaceChild(wrapper, child);
+                wrapper.appendChild(child);
+                continue;
+            }
             walk(child);
         }
     }
@@ -150,7 +169,7 @@ function attachCopyButtons(container) {
  */
 export function RichText({ html, className = "", proseClass = "prose max-w-none dark:prose-invert", copyableCode = false, highlightCode, }) {
     const safe = useMemo(() => {
-        const sanitized = sanitiseHtml(html);
+        const sanitized = sanitiseHtml(normalizeRichTextHtml(html));
         if (!highlightCode || typeof document === "undefined")
             return sanitized;
         const container = document.createElement("div");

package/dist/ui/rich-text/RichText.style.css

@@ -1,5 +1,292 @@
-/* RichText — sanitised HTML renderer with prose styling */
-
-.appkit-rich-text {
-  /* Base wrapper — prose classes applied via className prop */
-}
+/* RichText — sanitised HTML renderer with prose styling */
+
+/* --- Rich Text Editor --------------------------------------------------------
+ * CSS-backed surface ensures dark mode applies even when Tailwind's dark:
+ * utilities for this package are not scanned/generated.
+ * The Tailwind utility classes on the element remain the primary source;
+ * these rules act as a reliable fallback with the same values.
+ * -------------------------------------------------------------------------- */
+.appkit-rich-text-editor {
+  background: var(--appkit-color-surface, #ffffff);
+  border: 1px solid var(--appkit-color-border, #e4e4e7);
+  border-radius: 0.5rem;
+}
+
+.dark .appkit-rich-text-editor {
+  background: #0f172a;    /* slate-900 = --appkit-color-surface dark */
+  border-color: #334155;  /* slate-700 = --appkit-color-border dark */
+}
+
+.appkit-rich-text-editor__toolbar {
+  border-bottom: 1px solid var(--appkit-color-border, #e4e4e7);
+}
+
+.dark .appkit-rich-text-editor__toolbar {
+  border-bottom-color: #334155;
+}
+
+.appkit-rich-text-editor__btn {
+  border: 1px solid #e4e4e7;
+  color: #3f3f46;
+  border-radius: 0.375rem;
+}
+
+.dark .appkit-rich-text-editor__btn {
+  border-color: #475569;
+  color: #e2e8f0;
+}
+
+.dark .appkit-rich-text-editor__btn:hover {
+  background-color: #1e293b;
+}
+
+
+
+/* --------------------------------------------------------------------------
+ * Base wrapper. All selectors are scoped to .appkit-rich-text so they
+ * never leak into surrounding UI.
+ * Prose classes (typography plugin) are applied via the `proseClass` prop.
+ * The rules below layer on top of prose to ensure proper dark-mode theming
+ * for elements that the typography plugin doesn't fully cover.
+ * -------------------------------------------------------------------------- */
+
+/* --- Inline code ---------------------------------------------------------- */
+.appkit-rich-text :not(pre) > code {
+  padding: 0.15em 0.4em;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  font-weight: 500;
+  background-color: rgba(53, 112, 252, 0.08);   /* primary cobalt /8 */
+  color: #1343de;                                /* primary-700 cobalt */
+  border: 1px solid rgba(53, 112, 252, 0.18);
+}
+
+.dark .appkit-rich-text :not(pre) > code {
+  background-color: rgba(51, 65, 85, 0.6);      /* slate-700/60 */
+  color: #84e122;                                /* lime green — high contrast on dark */
+  border-color: rgba(71, 85, 105, 0.5);
+}
+
+/* --- Code blocks (pre) ---------------------------------------------------- */
+.appkit-rich-text pre {
+  border-radius: 0.5rem;
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  font-size: 0.875em;
+  line-height: 1.7;
+  background-color: #1e293b;                     /* slate-800 — always dark */
+  color: #e2e8f0;                                /* slate-200 */
+  border: 1px solid rgba(51, 65, 85, 0.6);
+}
+
+.dark .appkit-rich-text pre {
+  background-color: #0f172a;                     /* slate-900 */
+  border-color: rgba(30, 41, 59, 0.8);
+}
+
+/* --- Blockquote ----------------------------------------------------------- */
+.appkit-rich-text blockquote {
+  border-left: 3px solid #3570fc;               /* primary cobalt */
+  padding: 0.5rem 1rem;
+  margin: 1.25rem 0;
+  border-radius: 0 0.375rem 0.375rem 0;
+  background-color: rgba(53, 112, 252, 0.06);
+  color: #3f3f46;                                /* zinc-700 */
+  font-style: italic;
+}
+
+.dark .appkit-rich-text blockquote {
+  border-left-color: #f063b9;                    /* secondary-400 */
+  background-color: rgba(240, 99, 185, 0.06);
+  color: #a1a1aa;                                /* zinc-400 */
+}
+
+/* --- Mark / Highlight ----------------------------------------------------- */
+.appkit-rich-text mark {
+  background-color: rgba(101, 196, 8, 0.25);
+  color: inherit;
+  border-radius: 0.125rem;
+  padding: 0 0.1em;
+}
+
+.dark .appkit-rich-text mark {
+  background-color: rgba(101, 196, 8, 0.35);
+  color: #f4f4f5;                               /* zinc-100 */
+}
+
+/* --- Horizontal rule ------------------------------------------------------ */
+.appkit-rich-text hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(to right, transparent, rgba(161, 161, 170, 0.4), transparent);
+  margin: 1.75rem 0;
+}
+
+.dark .appkit-rich-text hr {
+  background: linear-gradient(to right, transparent, rgba(71, 85, 105, 0.5), transparent);
+}
+
+/* --- Links ---------------------------------------------------------------- */
+.appkit-rich-text a {
+  color: #1a55f2;                               /* primary-600 cobalt */
+  text-decoration: underline;
+  text-decoration-color: rgba(26, 85, 242, 0.4);
+  text-underline-offset: 2px;
+  transition: color 150ms, text-decoration-color 150ms;
+}
+
+.appkit-rich-text a:hover {
+  color: #1343de;                               /* primary-700 cobalt */
+  text-decoration-color: rgba(19, 67, 222, 0.7);
+}
+
+.dark .appkit-rich-text a {
+  color: #84e122;                               /* lime green — high contrast on dark bg */
+  text-decoration-color: rgba(132, 225, 34, 0.4);
+}
+
+.dark .appkit-rich-text a:hover {
+  color: #a3f550;                               /* lighter lime green */
+  text-decoration-color: rgba(163, 245, 80, 0.6);
+}
+
+/* --- Tables --------------------------------------------------------------- */
+.appkit-rich-text table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;                    /* zinc-200 */
+}
+
+.dark .appkit-rich-text table {
+  border-color: #334155;                        /* slate-700 */
+}
+
+.appkit-rich-text th {
+  background-color: #f4f4f5;                    /* zinc-100 */
+  color: #18181b;                               /* zinc-900 */
+  font-weight: 600;
+  padding: 0.6rem 0.875rem;
+  text-align: left;
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.dark .appkit-rich-text th {
+  background-color: #1e293b;                    /* slate-800 */
+  color: #f4f4f5;                               /* zinc-100 */
+  border-bottom-color: #334155;
+}
+
+.appkit-rich-text td {
+  padding: 0.55rem 0.875rem;
+  border-bottom: 1px solid #f4f4f5;            /* zinc-100 */
+  color: #3f3f46;                               /* zinc-700 */
+}
+
+.dark .appkit-rich-text td {
+  border-bottom-color: #1e293b;                 /* slate-800 */
+  color: #a1a1aa;                               /* zinc-400 */
+}
+
+.appkit-rich-text tr:last-child td {
+  border-bottom: none;
+}
+
+.appkit-rich-text tr:hover td {
+  background-color: rgba(244, 244, 245, 0.6);   /* zinc-100/60 */
+}
+
+.dark .appkit-rich-text tr:hover td {
+  background-color: rgba(30, 41, 59, 0.5);      /* slate-800/50 */
+}
+
+/* --- Figure & captions ---------------------------------------------------- */
+.appkit-rich-text figure {
+  margin: 1.5rem 0;
+}
+
+.appkit-rich-text figcaption {
+  margin-top: 0.5rem;
+  font-size: 0.8em;
+  color: #71717a;                               /* zinc-500 */
+  text-align: center;
+  font-style: italic;
+}
+
+.dark .appkit-rich-text figcaption {
+  color: #71717a;                               /* zinc-500 */
+}
+
+/* --- Images --------------------------------------------------------------- */
+.appkit-rich-text img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+}
+
+/* --- Headings — consistent theming even without prose-invert -------------- */
+.appkit-rich-text h1,
+.appkit-rich-text h2,
+.appkit-rich-text h3,
+.appkit-rich-text h4,
+.appkit-rich-text h5,
+.appkit-rich-text h6 {
+  color: #18181b;                               /* zinc-900 */
+  font-weight: 700;
+  line-height: 1.25;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.dark .appkit-rich-text h1,
+.dark .appkit-rich-text h2,
+.dark .appkit-rich-text h3,
+.dark .appkit-rich-text h4,
+.dark .appkit-rich-text h5,
+.dark .appkit-rich-text h6 {
+  color: #fafafa;                               /* zinc-50 */
+}
+
+/* --- Body text fallback when not inside a prose wrapper ------------------- */
+.appkit-rich-text p {
+  color: #3f3f46;                               /* zinc-700 */
+}
+
+.dark .appkit-rich-text p {
+  color: #a1a1aa;                               /* zinc-400 */
+}
+
+/* --- Lists ---------------------------------------------------------------- */
+.appkit-rich-text ul,
+.appkit-rich-text ol {
+  padding-left: 1.5rem;
+  color: #3f3f46;
+}
+
+.dark .appkit-rich-text ul,
+.dark .appkit-rich-text ol {
+  color: #a1a1aa;
+}
+
+/* --- Ins / Del ------------------------------------------------------------ */
+.appkit-rich-text ins {
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: #3570fc;               /* primary cobalt */
+}
+
+.dark .appkit-rich-text ins {
+  text-decoration-color: #84e122;               /* lime green on dark */
+}
+
+.appkit-rich-text del {
+  text-decoration: line-through;
+  color: #71717a;
+  opacity: 0.75;
+}
+
+.dark .appkit-rich-text del {
+  color: #52525b;
+}

package/dist/ui/rich-text/RichTextRenderer.d.ts

@@ -0,0 +1,15 @@
+export interface RichTextRendererProps {
+    html?: string | null;
+    className?: string;
+    proseClass?: string;
+}
+/**
+ * SSR-safe HTML renderer for admin/CMS-authored rich text content.
+ *
+ * Works as a React Server Component — no browser APIs, no `"use client"`.
+ * Content is assumed to have been sanitized at save time via RichTextEditor.
+ *
+ * For user-generated content or untrusted HTML, use <RichText> instead
+ * (client-only, runs the DOM-based sanitizer).
+ */
+export declare function RichTextRenderer({ html, className, proseClass, }: RichTextRendererProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/rich-text/RichTextRenderer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SSR-safe HTML renderer for admin/CMS-authored rich text content.
+ *
+ * Works as a React Server Component — no browser APIs, no `"use client"`.
+ * Content is assumed to have been sanitized at save time via RichTextEditor.
+ *
+ * For user-generated content or untrusted HTML, use <RichText> instead
+ * (client-only, runs the DOM-based sanitizer).
+ */
+export function RichTextRenderer({ html, className = "", proseClass = "prose max-w-none dark:prose-invert", }) {
+    if (!html)
+        return null;
+    return (_jsx("div", { className: `appkit-rich-text ${proseClass} ${className}`.trim(), dangerouslySetInnerHTML: { __html: html } }));
+}

package/dist/utils/id-generators.d.ts

@@ -153,6 +153,8 @@ export interface GenerateReviewVideoFilenameInput {
 export declare function generateReviewVideoFilename(input: GenerateReviewVideoFilenameInput): string;
 export declare function generateStoreLogoFilename(storeName: string, ext?: string): string;
 export declare function generateStoreBannerFilename(storeName: string, ext?: string): string;
+export declare function generateBrandLogoFilename(brandName: string, ext?: string): string;
+export declare function generateBrandBannerFilename(brandName: string, ext?: string): string;
 export interface GenerateBlogImageFilenameInput {
     title: string;
     category: string;
@@ -200,6 +202,14 @@ export type MediaFilenameContext = ({
     type: "store-banner";
     store: string;
     ext?: string;
+} | {
+    type: "brand-logo";
+    brand: string;
+    ext?: string;
+} | {
+    type: "brand-banner";
+    brand: string;
+    ext?: string;
 } | ({
     type: "blog-image";
 } & GenerateBlogImageFilenameInput) | ({

package/dist/utils/id-generators.js

@@ -250,6 +250,14 @@ export function generateStoreBannerFilename(storeName, ext = "webp") {
     const store = slugify(storeName).substring(0, 40).replace(/-+$/, "");
     return `store-${store}-banner.${ext.replace(/^\./, "")}`;
 }
+export function generateBrandLogoFilename(brandName, ext = "webp") {
+    const brand = slugify(brandName).substring(0, 40).replace(/-+$/, "");
+    return `brand-${brand}-logo.${ext.replace(/^\./, "")}`;
+}
+export function generateBrandBannerFilename(brandName, ext = "webp") {
+    const brand = slugify(brandName).substring(0, 40).replace(/-+$/, "");
+    return `brand-${brand}-banner.${ext.replace(/^\./, "")}`;
+}
 export function generateBlogImageFilename(input) {
     const title = slugify(input.title).substring(0, 40).replace(/-+$/, "");
     const category = slugify(input.category).substring(0, 20).replace(/-+$/, "");
@@ -328,6 +336,10 @@ export function generateMediaFilename(ctx) {
             return generateStoreLogoFilename(ctx.store, ctx.ext);
         case "store-banner":
             return generateStoreBannerFilename(ctx.store, ctx.ext);
+        case "brand-logo":
+            return generateBrandLogoFilename(ctx.brand, ctx.ext);
+        case "brand-banner":
+            return generateBrandBannerFilename(ctx.brand, ctx.ext);
         case "blog-image":
             return generateBlogImageFilename(ctx);
         case "blog-cover":