@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/gallery-culture-photo-grid/GalleryCulturePhotoGrid.tsx

@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Gallery` (42478:479), Type=Culture Photo Grid.
+ *
+ * A start-aligned header over a grid of captioned photos: three columns on
+ * Desktop, two on Tablet, one on a phone, with the same 32px gap both ways.
+ * Each card is a photo with a one-line caption under it, the title at the
+ * start and a short meta (a month, "Weekly") at the end. The photo travels
+ * with its caption, so it lives on the item (`items[i].image`), and the cards
+ * keep Figma's order at every breakpoint. No photos come with the block:
+ * until you pass them, each card shows a `muted` placeholder of the same box.
+ *
+ * The photo's shape changes with the breakpoint, as Figma draws it (296×220,
+ * 304×240, 395×288), so its height tracks the column width between them. A
+ * caption never wraps: a long title trims with an ellipsis and the meta keeps
+ * its width.
+ *
+ * In Arabic the grid fills from the right and each caption mirrors, title on
+ * the right and meta on the left, as Figma's RTL variants do; nothing here
+ * knows about direction, because every side is a logical one. Years in the
+ * Arabic meta sit in `<bdi dir="ltr">`. The photographs are never flipped.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container, so the block lays out for the room it is
+ * given, such as a docs preview narrower than the screen. The base classes
+ * are Figma's Mobile (360); `[@container(min-width:40rem)]:` is its Tablet,
+ * from 640px of content (Figma's Tablet, 768 less its padding), and
+ * `[@container(min-width:64rem)]:` its Desktop, from 1024px of content.
+ * The section's own padding still follows the window, since an element
+ * can't query itself.
+ */
+
+export interface GalleryCulturePhotoGridPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface GalleryCulturePhotoGridItem {
+  /** The caption's title, at the start. One line; trims when too long. */
+  title: React.ReactNode
+  /** The short note at the caption's end: a month, a cadence. One line. */
+  meta: React.ReactNode
+  /**
+   * The card's photo. None by default: the card shows a `muted` placeholder.
+   * @default none: `muted` placeholder
+   */
+  image?: GalleryCulturePhotoGridPhoto
+}
+
+export interface GalleryCulturePhotoGridCopy {
+  /** The short label above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. */
+  description: React.ReactNode
+  /** The cards, in order. Each has a `title`, a `meta` and an optional `image`. */
+  items: GalleryCulturePhotoGridItem[]
+  /** Shown in place of the grid when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", GalleryCulturePhotoGridCopy> = {
+  en: {
+    eyebrow: "GALLERY",
+    heading: "Moments from the year",
+    description: "A few of the places, faces and late nights that made this year what it was.",
+    items: [
+      { title: "Offsite in Lisbon", meta: "May 2026" },
+      { title: "Launch night", meta: "Feb 2026" },
+      { title: "Design crit, Thursday", meta: "Weekly" },
+      { title: "New studio, day one", meta: "Jan 2026" },
+      { title: "Hack week finals", meta: "Aug 2026" },
+      { title: "Summer picnic", meta: "Jul 2026" },
+    ],
+    empty: "No photos yet.",
+  },
+  ar: {
+    eyebrow: "معرض الصور",
+    heading: "لحظات من العام",
+    description: "بعض الأماكن والوجوه وليالي السهر التي صنعت هذا العام.",
+    items: [
+      {
+        title: "رحلة الفريق في لشبونة",
+        meta: (
+          <>
+            مايو <bdi dir="ltr">2026</bdi>
+          </>
+        ),
+      },
+      {
+        title: "ليلة الإطلاق",
+        meta: (
+          <>
+            فبراير <bdi dir="ltr">2026</bdi>
+          </>
+        ),
+      },
+      { title: "جلسة نقد التصميم، الخميس", meta: "أسبوعيًا" },
+      {
+        title: "الاستوديو الجديد، اليوم الأول",
+        meta: (
+          <>
+            يناير <bdi dir="ltr">2026</bdi>
+          </>
+        ),
+      },
+      {
+        title: "نهائيات أسبوع الابتكار",
+        meta: (
+          <>
+            أغسطس <bdi dir="ltr">2026</bdi>
+          </>
+        ),
+      },
+      {
+        title: "نزهة الصيف",
+        meta: (
+          <>
+            يوليو <bdi dir="ltr">2026</bdi>
+          </>
+        ),
+      },
+    ],
+    empty: "لا توجد صور بعد.",
+  },
+}
+
+export interface GalleryCulturePhotoGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<GalleryCulturePhotoGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function GalleryCulturePhotoGrid({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  items,
+  empty,
+  className,
+  ...props
+}: GalleryCulturePhotoGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-12">
+        <header className="flex flex-col gap-2">
+          <p className="text-xs font-medium text-primary">{eyebrow ?? copy.eyebrow}</p>
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl [@container(min-width:64rem)]:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+        </header>
+
+        {list.length === 0 ? (
+          <p className="text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <ul className="grid grid-cols-1 gap-8 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-3">
+            {list.map((item, index) => (
+              <li key={index}>
+                <figure className="flex flex-col gap-3">
+                  <div className="relative aspect-[296/220] overflow-hidden rounded-lg bg-muted [@container(min-width:40rem)]:aspect-[304/240] [@container(min-width:64rem)]:aspect-[395/288]">
+                    {item.image ? (
+                      <img
+                        src={item.image.src}
+                        alt={item.image.alt}
+                        loading="lazy"
+                        decoding="async"
+                        className="absolute inset-0 size-full object-cover"
+                      />
+                    ) : null}
+                  </div>
+                  <figcaption className="flex items-center justify-between gap-2">
+                    <span className="min-w-0 truncate text-sm font-medium text-foreground">{item.title}</span>
+                    <span className="shrink-0 whitespace-nowrap text-xs text-muted-foreground">{item.meta}</span>
+                  </figcaption>
+                </figure>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const galleryCulturePhotoGridCopy = COPY

package/registry/blocks/gallery-culture-photo-grid/index.ts

@@ -0,0 +1,8 @@
+export {
+  GalleryCulturePhotoGrid,
+  galleryCulturePhotoGridCopy,
+  type GalleryCulturePhotoGridCopy,
+  type GalleryCulturePhotoGridItem,
+  type GalleryCulturePhotoGridPhoto,
+  type GalleryCulturePhotoGridProps,
+} from "./GalleryCulturePhotoGrid"

package/registry/blocks/gallery-dark-cinema-wall/GalleryDarkCinemaWall.tsx

@@ -0,0 +1,180 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Gallery` (42478:479), Type=Dark Cinema Wall.
+ *
+ * A centred header over two rows of wide stills on an inverted surface, like
+ * a wall of screens. Each row runs past both edges of the section and is
+ * clipped there; its first and last stills are dimmed to 35%, so the wall
+ * fades out at the sides. The two rows are staggered: the first starts half
+ * a still before the start edge, the second a little later (96px on Desktop,
+ * 80 on Tablet, 60 on Mobile), so the gaps never line up. Past Figma's 1440
+ * the wall keeps Figma's 1440 width, centred, with the surface either side.
+ *
+ * The surface is painted with the inverse tokens, the only way Fasla inverts
+ * one: dark in Light, light in Dark, without forcing a `.dark` class, as
+ * Error State's Dark Spotlight does. The theme-inverse registry item maps the
+ * tokens, falling back to the page colours swapped in a theme that doesn't
+ * define them. A missing still is a placeholder in the inverse muted colour,
+ * not `muted`, which would show as a pale tile on the dark wall.
+ *
+ * Nothing moves: the wall is still, as Figma's motion note says. A
+ * still with an `href` is a link, with the house focus ring in the inverse
+ * foreground, so it shows on the inverted surface. The rows clip only
+ * sideways, so a ring above or below a still is never cut off.
+ *
+ * In Arabic the rows start at the right, as Figma's RTL variants draw them:
+ * the first still sits at the right edge, half outside, and the stagger runs
+ * from the right. The photographs are never flipped. Figma hides the
+ * description on Mobile; so does the block.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container, so the block lays out for the room it is
+ * given, such as a docs preview narrower than the screen. The base classes
+ * are Figma's Mobile (360); `[@container(min-width:48rem)]:` is its Tablet,
+ * from 768px, and `[@container(min-width:64rem)]:` its Desktop, from
+ * 1024px. The section's own padding still follows the window, since an
+ * element can't query itself.
+ */
+
+export interface GalleryDarkCinemaWallPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+  /** Where the still links to, such as its film or project. Without it the still is a plain image. */
+  href?: string
+}
+
+export interface GalleryDarkCinemaWallCopy {
+  /** The short label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden on Mobile, as in Figma. */
+  description: React.ReactNode
+  /** Shown in place of the wall when `photos` is an empty list. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", GalleryDarkCinemaWallCopy> = {
+  en: {
+    eyebrow: "ARCHIVE",
+    heading: "Every frame we have ever shipped",
+    description: "Stills from launches, films and studio life, in two rows that fade at the edges.",
+    empty: "No photos yet.",
+  },
+  ar: {
+    eyebrow: "الأرشيف",
+    heading: "كل صورة أطلقناها يومًا",
+    description: "لقطات من الإطلاقات والأفلام وحياة الاستوديو، في صفّين يتلاشيان عند الأطراف.",
+    empty: "لا توجد صور بعد.",
+  },
+}
+
+/** How far each row starts before the start edge, per breakpoint. */
+const ROW_OFFSET = ["-ms-20 [@container(min-width:48rem)]:-ms-[110px] [@container(min-width:64rem)]:-ms-[136px]", "-ms-5 [@container(min-width:48rem)]:-ms-[30px] [@container(min-width:64rem)]:-ms-10"]
+
+export interface GalleryDarkCinemaWallProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<GalleryDarkCinemaWallCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The stills, in Figma's order: the first row from the start edge, then the
+   * second. Figma's wall holds 12, six a row; any other count splits in half,
+   * the first row taking the odd one. The first and last still of each row
+   * are dimmed and half outside the wall, so put the strongest ones in
+   * between. None by default: 12 placeholders. An empty list shows the
+   * `empty` line instead of the wall.
+   * @default none: 12 placeholders
+   */
+  photos?: GalleryDarkCinemaWallPhoto[]
+}
+
+export function GalleryDarkCinemaWall({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  empty,
+  photos,
+  className,
+  ...props
+}: GalleryDarkCinemaWallProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const label = eyebrow ?? copy.eyebrow
+  const stills: (GalleryDarkCinemaWallPhoto | undefined)[] = photos ?? Array.from({ length: 12 }, () => undefined)
+  const half = Math.ceil(stills.length / 2)
+  const rows = [stills.slice(0, half), stills.slice(half)].filter((row) => row.length > 0)
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("[container-type:inline-size] flex flex-col gap-8 bg-background-inverse py-8 md:py-16 lg:py-24", className)}
+      {...props}
+    >
+      <div className="px-8 [@container(min-width:48rem)]:px-16 [@container(min-width:48rem)]:pb-4 [@container(min-width:64rem)]:px-24">
+        <div className="mx-auto flex w-full max-w-[1248px] flex-col items-center gap-4 text-center">
+          <div className="flex w-full flex-col gap-3">
+            {label ? <p className="text-xs font-medium text-muted-foreground-inverse">{label}</p> : null}
+            <h2 id={headingId} className="text-2xl font-semibold text-foreground-inverse [@container(min-width:48rem)]:text-3xl [@container(min-width:64rem)]:text-4xl">
+              {heading ?? copy.heading}
+            </h2>
+          </div>
+          <p className="hidden w-full max-w-[520px] text-base text-muted-foreground-inverse [@container(min-width:48rem)]:block">
+            {description ?? copy.description}
+          </p>
+        </div>
+      </div>
+
+      {rows.length === 0 ? (
+        <p className="px-8 text-center text-sm text-muted-foreground-inverse">{empty ?? copy.empty}</p>
+      ) : (
+        rows.map((row, rowIndex) => (
+          <div key={rowIndex} className="mx-auto w-full max-w-[1440px] overflow-x-clip">
+            <ul className={cn("flex w-max gap-4", ROW_OFFSET[rowIndex])}>
+              {row.map((photo, index) => {
+                const edge = index === 0 || index === row.length - 1
+                const tile = cn(
+                  "relative block h-24 w-40 overflow-hidden rounded-md bg-muted-foreground-inverse/20 [@container(min-width:48rem)]:h-[130px] [@container(min-width:48rem)]:w-[220px] [@container(min-width:64rem)]:h-40 [@container(min-width:64rem)]:w-[272px]",
+                  edge && "opacity-[0.35]"
+                )
+                const image = photo ? (
+                  <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover" />
+                ) : null
+                return (
+                  <li key={index} className="shrink-0">
+                    {photo?.href ? (
+                      <a
+                        href={photo.href}
+                        className={cn(
+                          tile,
+                          "[outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-inverse"
+                        )}
+                      >
+                        {image}
+                      </a>
+                    ) : (
+                      <div className={tile}>{image}</div>
+                    )}
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
+        ))
+      )}
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const galleryDarkCinemaWallCopy = COPY

package/registry/blocks/gallery-dark-cinema-wall/index.ts

@@ -0,0 +1,7 @@
+export {
+  GalleryDarkCinemaWall,
+  galleryDarkCinemaWallCopy,
+  type GalleryDarkCinemaWallCopy,
+  type GalleryDarkCinemaWallPhoto,
+  type GalleryDarkCinemaWallProps,
+} from "./GalleryDarkCinemaWall"

package/registry/blocks/gallery-editorial-split/GalleryEditorialSplit.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Gallery` (42478:479), Type=Editorial Split.
+ *
+ * An editorial intro beside a cluster of four photos. The copy (eyebrow,
+ * heading, description and two links) takes a fixed 448px column at the
+ * start; the cluster fills the rest, as two columns of two photos. The
+ * columns are staggered: the first starts lower (40px, 24 on Mobile) and
+ * runs tall-then-short, the second short-then-tall, so the four photos make
+ * an offset brick rather than a grid. The copy is centred against the
+ * cluster's height.
+ *
+ * Tablet and Mobile stack the copy over the cluster. Tablet keeps Desktop's
+ * photo heights (300 and 220); Mobile shortens them to 160 and 120 and the
+ * heading drops from 48px to 30. The photos' heights are fixed, as Figma's
+ * are, and their widths follow the column.
+ *
+ * In Arabic the copy moves to the right and the cluster to the left, with
+ * the lowered column still on the start side, as Figma's RTL variants draw
+ * it. The arrow on "View all photos" points the reading direction. The
+ * photographs are never flipped.
+ *
+ * Mobile first, and sized by the block's own width, not the window's: the
+ * section is a query container, so the block lays out for the room it is
+ * given, such as a docs preview narrower than the screen. The base classes
+ * are Figma's Mobile (360); `[@container(min-width:40rem)]:` is its Tablet,
+ * from 640px of content (Figma's Tablet, 768 less its padding), and
+ * `[@container(min-width:64rem)]:` its Desktop, from 1024px of content.
+ * The section's own padding still follows the window, since an element
+ * can't query itself.
+ */
+
+export interface GalleryEditorialSplitAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface GalleryEditorialSplitPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface GalleryEditorialSplitCopy {
+  /** The short label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The paragraph under the heading. */
+  description: React.ReactNode
+  /** The solid button: the main way in, such as the team page. */
+  primaryAction: GalleryEditorialSplitAction
+  /** The outline button beside it, with an arrow: the full gallery. Hidden when null. */
+  secondaryAction: GalleryEditorialSplitAction | null
+  /** Shown in place of the photos when `photos` is an empty list. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", GalleryEditorialSplitCopy> = {
+  en: {
+    eyebrow: "WHO WE ARE",
+    heading: "Built by people obsessed with the details",
+    description:
+      "Designers, engineers and writers working out of two studios. We photograph almost everything we make, and most of what we do not.",
+    primaryAction: { label: "Meet the team", href: "#team" },
+    secondaryAction: { label: "View all photos", href: "#gallery" },
+    empty: "No photos yet.",
+  },
+  ar: {
+    eyebrow: "من نحن",
+    heading: "بناه أشخاص مهووسون بالتفاصيل",
+    description: "مصمّمون ومهندسون وكُتّاب في استوديوين. نصوّر أعمالنا كلها تقريبًا، وما هو أكثر منها.",
+    primaryAction: { label: "تعرّف على الفريق", href: "#team" },
+    secondaryAction: { label: "عرض كل الصور", href: "#gallery" },
+    empty: "لا توجد صور بعد.",
+  },
+}
+
+/**
+ * The four photo frames in slot order, two to a column. The heights are
+ * Figma's: tall 300 and short 220 from Tablet up, 160 and 120 on Mobile.
+ */
+const TALL = "h-40 [@container(min-width:40rem)]:h-[300px]"
+const SHORT = "h-[120px] [@container(min-width:40rem)]:h-[220px]"
+const COLUMNS = [
+  { className: "pt-6 [@container(min-width:40rem)]:pt-10", frames: [TALL, SHORT] },
+  { className: "", frames: [SHORT, TALL] },
+]
+
+export interface GalleryEditorialSplitProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<GalleryEditorialSplitCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The four photos, in Figma's order: the lowered start column top to
+   * bottom (tall, then short), then the end column (short, then tall).
+   * Photos past the fourth are not shown. None by default: four `muted`
+   * placeholders. An empty list shows the `empty` line instead of the
+   * cluster.
+   * @default none: `muted` placeholders
+   */
+  photos?: GalleryEditorialSplitPhoto[]
+}
+
+export function GalleryEditorialSplit({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
+  empty,
+  photos,
+  className,
+  ...props
+}: GalleryEditorialSplitProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const label = eyebrow ?? copy.eyebrow
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-8 [@container(min-width:40rem)]:gap-10 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:gap-16">
+        <div className="flex flex-col gap-6 [@container(min-width:64rem)]:w-[448px] [@container(min-width:64rem)]:shrink-0">
+          {label ? <p className="text-xs font-medium text-primary">{label}</p> : null}
+          <h2 id={headingId} className="text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-5xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="text-base text-muted-foreground">{description ?? copy.description}</p>
+          <div className="flex flex-wrap gap-3">
+            <a href={primary.href} className={buttonVariants()}>
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a href={secondary.href} className={buttonVariants({ variant: "outline" })}>
+                {secondary.label}
+                <ArrowRight size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="[&:dir(rtl)]:-scale-x-100" />
+              </a>
+            ) : null}
+          </div>
+        </div>
+
+        {photos && photos.length === 0 ? (
+          <p className="flex-1 text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <div className="grid min-w-0 flex-1 grid-cols-2 gap-6">
+            {COLUMNS.map((column, columnIndex) => (
+              <div key={columnIndex} className={cn("flex flex-col gap-6", column.className)}>
+                {column.frames.map((frame, frameIndex) => {
+                  const photo = photos?.[columnIndex * 2 + frameIndex]
+                  return (
+                    <div key={frameIndex} className={cn("relative overflow-hidden rounded-lg bg-muted", frame)}>
+                      {photo ? (
+                        <img
+                          src={photo.src}
+                          alt={photo.alt}
+                          loading="lazy"
+                          decoding="async"
+                          className="absolute inset-0 size-full object-cover"
+                        />
+                      ) : null}
+                    </div>
+                  )
+                })}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const galleryEditorialSplitCopy = COPY

package/registry/blocks/gallery-editorial-split/index.ts

@@ -0,0 +1,8 @@
+export {
+  GalleryEditorialSplit,
+  galleryEditorialSplitCopy,
+  type GalleryEditorialSplitAction,
+  type GalleryEditorialSplitCopy,
+  type GalleryEditorialSplitPhoto,
+  type GalleryEditorialSplitProps,
+} from "./GalleryEditorialSplit"