@levo-so/blocks 0.3.13 → 0.3.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@levo-so/blocks",
   "description": "Set of blocks for Levo studio",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "author": "Levo Engineering <devs@theinternetfolks.com>",
   "dependencies": {
     "clsx": "2.1.1",
@@ -11,13 +11,13 @@
     "use-debounce": "10.0.2"
   },
   "devDependencies": {
+    "@levo-so/core": "0.3.14",
+    "@levo-so/react": "0.3.14",
+    "@levo-so/studio": "0.3.14",
+    "@levo/ts-config": "0.0.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "typescript": "5.9.3",
-    "@levo-so/core": "0.3.13",
-    "@levo-so/react": "0.3.13",
-    "@levo-so/studio": "0.3.13",
-    "@levo/ts-config": "0.0.0"
+    "typescript": "5.9.3"
   },
   "exports": {
     ".": "./src/index.ts"
@@ -28,11 +28,11 @@
   ],
   "main": "./src/index.ts",
   "peerDependencies": {
+    "@levo-so/core": "0.3.14",
+    "@levo-so/react": "0.3.14",
+    "@levo-so/studio": "0.3.14",
     "react": ">=18",
-    "react-dom": ">=18",
-    "@levo-so/react": "0.3.13",
-    "@levo-so/core": "0.3.13",
-    "@levo-so/studio": "0.3.13"
+    "react-dom": ">=18"
   },
   "publishConfig": {
     "access": "public"

package/src/blocks/calendar/calendar-1.schema.ts

@@ -14,12 +14,12 @@ const EVENT_BASE = {
 const EVENTS = [
   {
     ...EVENT_BASE,
-    event_starts_date: "2026-05-12T04:00:00.000Z",
-    event_starts_month: "2026-05-12T04:00:00.000Z",
-    event_ends_date: "2026-05-13T04:00:00.000Z",
-    event_ends_month: "2026-05-13T04:00:00.000Z",
-    starts_at: "2026-05-12T04:00:00.000Z",
-    ends_at: "2026-05-13T23:59:00.000Z",
+    event_starts_date: "2026-09-12T04:00:00.000Z",
+    event_starts_month: "2026-09-12T04:00:00.000Z",
+    event_ends_date: "2026-09-13T04:00:00.000Z",
+    event_ends_month: "2026-09-13T04:00:00.000Z",
+    starts_at: "2026-09-12T04:00:00.000Z",
+    ends_at: "2026-09-13T23:59:00.000Z",
     event_category: "Compliance",
     event_title: "PCI DSS 4.0 Readiness Workshop",
     event_description:
@@ -27,12 +27,12 @@ const EVENTS = [
   },
   {
     ...EVENT_BASE,
-    event_starts_date: "2026-05-19T04:30:00.000Z",
-    event_starts_month: "2026-05-19T04:30:00.000Z",
+    event_starts_date: "2026-09-19T04:30:00.000Z",
+    event_starts_month: "2026-09-19T04:30:00.000Z",
     event_ends_date: "",
     event_ends_month: "",
-    starts_at: "2026-05-19T04:30:00.000Z",
-    ends_at: "2026-05-19T12:00:00.000Z",
+    starts_at: "2026-09-19T04:30:00.000Z",
+    ends_at: "2026-09-19T12:00:00.000Z",
     event_category: "Payments",
     event_title: "Cross-Border Payments Summit",
     event_description:
@@ -40,12 +40,12 @@ const EVENTS = [
   },
   {
     ...EVENT_BASE,
-    event_starts_date: "2026-05-27T04:00:00.000Z",
-    event_starts_month: "2026-05-27T04:00:00.000Z",
-    event_ends_date: "2026-05-28T04:00:00.000Z",
-    event_ends_month: "2026-05-28T04:00:00.000Z",
-    starts_at: "2026-05-27T04:00:00.000Z",
-    ends_at: "2026-05-28T23:59:00.000Z",
+    event_starts_date: "2026-09-27T04:00:00.000Z",
+    event_starts_month: "2026-09-27T04:00:00.000Z",
+    event_ends_date: "2026-09-28T04:00:00.000Z",
+    event_ends_month: "2026-09-28T04:00:00.000Z",
+    starts_at: "2026-09-27T04:00:00.000Z",
+    ends_at: "2026-09-28T23:59:00.000Z",
     event_category: "Settlement",
     event_title: "Real-Time Settlement Forum",
     event_description:
@@ -53,12 +53,12 @@ const EVENTS = [
   },
   {
     ...EVENT_BASE,
-    event_starts_date: "2026-06-04T08:30:00.000Z",
-    event_starts_month: "2026-06-04T08:30:00.000Z",
+    event_starts_date: "2026-10-04T08:30:00.000Z",
+    event_starts_month: "2026-10-04T08:30:00.000Z",
     event_ends_date: "",
     event_ends_month: "",
-    starts_at: "2026-06-04T08:30:00.000Z",
-    ends_at: "2026-06-04T12:00:00.000Z",
+    starts_at: "2026-10-04T08:30:00.000Z",
+    ends_at: "2026-10-04T12:00:00.000Z",
     event_category: "Identity",
     event_title: "KYC & Identity Roundtable",
     event_description:
@@ -66,12 +66,12 @@ const EVENTS = [
   },
   {
     ...EVENT_BASE,
-    event_starts_date: "2026-06-11T04:00:00.000Z",
-    event_starts_month: "2026-06-11T04:00:00.000Z",
-    event_ends_date: "2026-06-12T04:00:00.000Z",
-    event_ends_month: "2026-06-12T04:00:00.000Z",
-    starts_at: "2026-06-11T04:00:00.000Z",
-    ends_at: "2026-06-12T23:59:00.000Z",
+    event_starts_date: "2026-10-11T04:00:00.000Z",
+    event_starts_month: "2026-10-11T04:00:00.000Z",
+    event_ends_date: "2026-10-12T04:00:00.000Z",
+    event_ends_month: "2026-10-12T04:00:00.000Z",
+    starts_at: "2026-10-11T04:00:00.000Z",
+    ends_at: "2026-10-12T23:59:00.000Z",
     event_category: "Engineering",
     event_title: "Open Banking DevDay",
     event_description:
@@ -79,12 +79,12 @@ const EVENTS = [
   },
   {
     ...EVENT_BASE,
-    event_starts_date: "2026-06-18T04:00:00.000Z",
-    event_starts_month: "2026-06-18T04:00:00.000Z",
+    event_starts_date: "2026-11-18T04:00:00.000Z",
+    event_starts_month: "2026-11-18T04:00:00.000Z",
     event_ends_date: "",
     event_ends_month: "",
-    starts_at: "2026-06-18T04:00:00.000Z",
-    ends_at: "2026-06-18T11:00:00.000Z",
+    starts_at: "2026-11-18T04:00:00.000Z",
+    ends_at: "2026-11-18T11:00:00.000Z",
     event_category: "Treasury",
     event_title: "Treasury & FinOps Bootcamp",
     event_description:
@@ -229,6 +229,11 @@ export const Calendar1: IBlock = {
           label: "Event Starts Month",
           field_interface: "TypographyWidget",
         },
+        {
+          key: "event_starts_year",
+          label: "Event Starts Year",
+          field_interface: "TypographyWidget",
+        },
         {
           key: "event_to",
           label: "Event To",
@@ -254,6 +259,11 @@ export const Calendar1: IBlock = {
           label: "Event Ends Month",
           field_interface: "TypographyWidget",
         },
+        {
+          key: "event_ends_year",
+          label: "Event Ends Year",
+          field_interface: "TypographyWidget",
+        },
         {
           key: "divider",
           label: "Divider",
@@ -274,6 +284,16 @@ export const Calendar1: IBlock = {
           label: "Event Sub Content",
           field_interface: "BoxWidget",
         },
+        {
+          key: "event_title_wrapper",
+          label: "Event Title Wrapper",
+          field_interface: "BoxWidget",
+        },
+        {
+          key: "event_status_pill",
+          label: "Event Status Pill",
+          field_interface: "TypographyWidget",
+        },
         {
           key: "event_title",
           label: "Event Title",
@@ -460,6 +480,11 @@ export const Calendar1: IBlock = {
             "text-align": "center",
             "font-weight": 600,
           },
+          event_starts_year: {
+            "text-align": "center",
+            "font-size": "xs",
+            opacity: 0.75,
+          },
           event_ends_date: {
             "text-align": "center",
           },
@@ -467,6 +492,11 @@ export const Calendar1: IBlock = {
             "text-align": "center",
             "font-weight": 600,
           },
+          event_ends_year: {
+            "text-align": "center",
+            "font-size": "xs",
+            opacity: 0.75,
+          },
           divider: {
             "margin-left": "2xs",
             "margin-right": "3xl",
@@ -501,6 +531,23 @@ export const Calendar1: IBlock = {
             "flex-direction": "column",
             "row-gap": "2xs",
           },
+          event_title_wrapper: {
+            display: "flex",
+            "align-items": "center",
+            "column-gap": "xs",
+            "flex-wrap": "wrap",
+          },
+          event_status_pill: {
+            display: "inline-flex",
+            "align-items": "center",
+            "padding-top": "2px",
+            "padding-bottom": "2px",
+            "padding-left": "sm",
+            "padding-right": "sm",
+            "border-radius": "full",
+            "font-size": "xs",
+            "font-weight": 600,
+          },
           event_ends: {
             display: "flex",
             "flex-direction": "column",

package/src/blocks/calendar/calendar-1.tsx

@@ -11,46 +11,67 @@ import {
   useContentEngine,
 } from "@levo-so/studio";
 import dayjs from "dayjs";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import type { ICalendar1Content } from "./calendar-1.schema";
 
+type IEventItem = ICalendar1Content["listing_section"][number] & {
+  starts_at?: string;
+  ends_at?: string;
+};
+
 const EventCard: React.FC<{
-  event: ICalendar1Content["listing_section"][number];
+  event: IEventItem;
   index: number;
 }> = ({ event, index }) => {
-  const isEndDateValid = !!(
-    dayjs(event?.event_ends_date).isValid() && dayjs(event?.event_ends_month).isValid()
+  const startDate = dayjs(
+    event?.event_starts_date && dayjs(event.event_starts_date).isValid()
+      ? event.event_starts_date
+      : event?.starts_at,
   );
-
-  const isStartDateIsSameAsEndDate = dayjs(event?.event_starts_date).isSame(
-    event?.event_ends_date,
-    "day",
+  const endDate = dayjs(
+    event?.event_ends_date && dayjs(event.event_ends_date).isValid()
+      ? event.event_ends_date
+      : event?.ends_at,
   );
 
+  const isStartDateValid = startDate.isValid();
+  const isEndDateValid = endDate.isValid() && !startDate.isSame(endDate, "day");
+
   const isStartTimeValid = dayjs(event?.starts_at).isValid();
   const isEndTimeValid = dayjs(event?.ends_at).isValid();
 
+  const today = dayjs();
+  const effectiveEnd = endDate.isValid() ? endDate : startDate;
+  const isCompleted = effectiveEnd.isValid() && effectiveEnd.isBefore(today, "day");
+  const statusText = isCompleted ? "Completed" : "Upcoming";
+
   return (
     <Box elementKey={`listing_section.${index}.event`}>
       <Box elementKey={`listing_section.${index}.event_timing`}>
         <Box elementKey={`listing_section.${index}.event_starts`}>
           <Heading elementKey={`listing_section.${index}.event_starts_date`}>
-            {dayjs(event?.event_starts_date).format("DD")}
+            {isStartDateValid ? startDate.format("DD") : ""}
           </Heading>
           <Typography elementKey={`listing_section.${index}.event_starts_month`}>
-            {dayjs(event?.event_starts_date).format("MMMM")}
+            {isStartDateValid ? startDate.format("MMMM") : ""}
+          </Typography>
+          <Typography elementKey={`listing_section.${index}.event_starts_year`}>
+            {isStartDateValid ? startDate.format("YYYY") : ""}
           </Typography>
         </Box>
-        {isEndDateValid && !isStartDateIsSameAsEndDate ? (
+        {isEndDateValid ? (
           <>
             <Typography elementKey={`listing_section.${index}.event_to`} />
             <Box elementKey={`listing_section.${index}.event_ends`}>
               <Heading elementKey={`listing_section.${index}.event_ends_date`}>
-                {dayjs(event?.event_ends_date).format("DD")}
+                {endDate.format("DD")}
               </Heading>
               <Typography elementKey={`listing_section.${index}.event_ends_month`}>
-                {dayjs(event?.event_ends_month).format("MMMM")}
+                {endDate.format("MMMM")}
+              </Typography>
+              <Typography elementKey={`listing_section.${index}.event_ends_year`}>
+                {endDate.format("YYYY")}
               </Typography>
             </Box>
           </>
@@ -72,10 +93,41 @@ const EventCard: React.FC<{
       </Box>
       <Box elementKey={`listing_section.${index}.divider`} />
       <Box elementKey={`listing_section.${index}.event_content`}>
-        <Heading elementKey={`listing_section.${index}.event_category`} />
+        <Heading elementKey={`listing_section.${index}.event_category`}>
+          {event?.event_category}
+        </Heading>
         <Box elementKey={`listing_section.${index}.event_sub_content`}>
-          <Heading elementKey={`listing_section.${index}.event_title`} />
-          <Typography elementKey={`listing_section.${index}.event_description`} />
+          <Box elementKey={`listing_section.${index}.event_title_wrapper`}>
+            <Typography
+              elementKey={`listing_section.${index}.event_status_pill`}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                padding: "2px 8px",
+                borderRadius: "9999px",
+                fontSize: "11px",
+                fontWeight: 600,
+                lineHeight: "1.2",
+                backgroundColor: isCompleted
+                  ? "var(--color-muted, oklch(0.94 0 0))"
+                  : "var(--color-success-subtle, oklch(0.95 0.05 145))",
+                color: isCompleted
+                  ? "var(--color-muted-foreground, oklch(0.42 0 0))"
+                  : "var(--color-success, oklch(0.38 0.12 145))",
+                border: isCompleted
+                  ? "1px solid oklch(0.88 0 0)"
+                  : "1px solid oklch(0.85 0.08 145)",
+              }}
+            >
+              {statusText}
+            </Typography>
+            <Heading elementKey={`listing_section.${index}.event_title`}>
+              {event?.event_title}
+            </Heading>
+          </Box>
+          <Typography elementKey={`listing_section.${index}.event_description`}>
+            {event?.event_description}
+          </Typography>
         </Box>
       </Box>
     </Box>
@@ -83,41 +135,106 @@ const EventCard: React.FC<{
 };
 
 const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = ({ content }) => {
-  const { data, query, setQuery } = useContentEngine("listing_section");
+  const { data, query, setQuery, loading } = useContentEngine("listing_section");
 
   const [calendarMonth, setCalendarMonth] = useState<Date>(new Date());
+  const [selectedMonth, setSelectedMonth] = useState<Date | null>(null);
+  const [isPendingMonthChange, setIsPendingMonthChange] = useState(false);
+
+  useEffect(() => {
+    if (!loading) {
+      setIsPendingMonthChange(false);
+    }
+  }, [loading]);
+
+  const rawEvents: IEventItem[] = !selectedMonth
+    ? (content?.listing_section ?? [])
+    : data && data.length > 0
+      ? data
+      : (content?.listing_section ?? []);
+
+  const getEventStart = (item: IEventItem) => {
+    const d1 = item?.event_starts_date ? dayjs(item.event_starts_date) : null;
+    if (d1 && d1.isValid()) return d1;
+    const d2 = item?.starts_at ? dayjs(item.starts_at) : null;
+    if (d2 && d2.isValid()) return d2;
+    return null;
+  };
+
+  const getEventEnd = (item: IEventItem, start: dayjs.Dayjs | null) => {
+    const d1 = item?.event_ends_date ? dayjs(item.event_ends_date) : null;
+    if (d1 && d1.isValid()) return d1;
+    const d2 = item?.ends_at ? dayjs(item.ends_at) : null;
+    if (d2 && d2.isValid()) return d2;
+    return start;
+  };
+
+  // Sort events chronologically ascending by start date
+  const sortedEvents = [...rawEvents].sort((a, b) => {
+    const startA = getEventStart(a);
+    const startB = getEventStart(b);
+    const dateA = startA ? startA.valueOf() : 0;
+    const dateB = startB ? startB.valueOf() : 0;
+    return dateA - dateB;
+  });
+
+  const currentMonthStart = dayjs().startOf("month");
+
+  // Filter displayed events: events matching selectedMonth if user picked a month,
+  // or events from current month onwards (current month or future) on initial view / refresh
+  const upcomingOrSelectedEvents = sortedEvents.filter((item) => {
+    const start = getEventStart(item);
+    const end = getEventEnd(item, start);
+    if (!start) return false;
+
+    if (!selectedMonth) {
+      const effectiveEnd = end || start;
+      return (
+        effectiveEnd.isAfter(currentMonthStart) || effectiveEnd.isSame(currentMonthStart, "day")
+      );
+    }
+
+    const monthStart = dayjs(selectedMonth).startOf("month");
+    const monthEnd = dayjs(selectedMonth).endOf("month");
+    const effectiveEnd = end || start;
+
+    return (
+      (start.isBefore(monthEnd) || start.isSame(monthEnd)) &&
+      (effectiveEnd.isAfter(monthStart) || effectiveEnd.isSame(monthStart))
+    );
+  });
+
+  // If no upcoming events exist from current month onwards, fall back to showing all sorted events
+  const displayedEvents =
+    !selectedMonth && upcomingOrSelectedEvents.length === 0
+      ? sortedEvents
+      : upcomingOrSelectedEvents;
 
-  const dateList = data
-    ?.map((v: any) => v?.event_starts_date)
-    ?.filter((v: any) => dayjs(v)?.isValid())
-    ?.map((v: any) => new Date(v));
+  const dateList = rawEvents
+    ?.map((v) => getEventStart(v))
+    ?.filter((v): v is dayjs.Dayjs => v !== null && v.isValid())
+    ?.map((v) => v.toDate());
 
   const handleMonthChange = (date: Date) => {
+    setIsPendingMonthChange(true);
     setCalendarMonth(date);
+    setSelectedMonth(date);
     setQuery({
-      ...query,
       limit: -1,
       where: {
-        ...(query?.where ?? {}),
-        AND: [
-          {
-            starts_at: {
-              gte: dayjs(date).startOf("month").format(),
-            },
-          },
-          {
-            ends_at: {
-              lte: dayjs(date).endOf("month").format(),
-            },
-          },
-        ],
+        starts_at: {
+          gte: dayjs(date).startOf("month").toISOString(),
+          lte: dayjs(date).endOf("month").toISOString(),
+        },
       },
     });
   };
 
   const handleResetFilter = () => {
+    setIsPendingMonthChange(false);
+    setSelectedMonth(null);
+    setCalendarMonth(new Date());
     setQuery({
-      ...query,
       limit: 20,
       where: {},
     });
@@ -132,11 +249,11 @@ const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = ({ content }
         </Box>
         <Box elementKey="content">
           <Box elementKey="listing_section_levoGroup" data-levo_group>
-            {data && data.length > 0 ? (
-              data?.map((item: any, index: number) => {
+            {displayedEvents && displayedEvents.length > 0 ? (
+              displayedEvents.map((item: IEventItem, index: number) => {
                 return <EventCard key={`listing_section.${index}`} index={index} event={item} />;
               })
-            ) : (
+            ) : loading || isPendingMonthChange ? null : (
               <Box elementKey="empty_state">
                 <Icon elementKey="empty_state_icon" />
                 <Heading elementKey="empty_state_title" />
@@ -162,11 +279,12 @@ const Calendar1: React.FC<ILevoBlockBaseProps<ICalendar1Content>> = ({ content }
               />
             </Box>
             <Box elementKey="calendar_ctas_levoGroup" data-levo_group>
-              {(content.calendar_ctas ?? []).map((_: any, index: number) => (
+              {(content.calendar_ctas ?? []).map((_: unknown, index: number) => (
                 <Button
                   key={`calendar_ctas.${index}.calendar_cta`}
                   elementKey={`calendar_ctas.${index}.calendar_cta`}
                   data-levo_group_item
+                  onClick={handleResetFilter}
                 />
               ))}
               <Button elementKey="empty_state_cta" onClick={handleResetFilter} />

package/src/blocks/jobs/jobs-1.schema.ts

@@ -3,8 +3,7 @@ import type { IBlock } from "@levo-so/studio";
 const HERO_IMAGE = {
   id: "7453352427682930486",
   kind: "image",
-  location:
-    "https://images.pexels.com/photos/5686124/pexels-photo-5686124.jpeg",
+  location: "https://images.pexels.com/photos/5686124/pexels-photo-5686124.jpeg",
   mimetype: "image/jpeg",
   srcset: {
     "320w":
@@ -150,14 +149,14 @@ const DEFAULT_CONTENT = {
     },
   ],
 
+  // Sidebar Embed
+  sidebar_embed:
+    '<div class="sidebar-video-container"><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube Video 1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><iframe src="https://www.youtube.com/embed/L_LUpnjgPso" title="YouTube Video 2" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><iframe src="https://www.youtube.com/embed/3JZ_D3ELwOQ" title="YouTube Video 3" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div><style>.sidebar-video-container { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } .sidebar-video-container iframe { width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; box-sizing: border-box; display: block; }</style>',
+
   // Social section
   social_section: null,
   social_title: "Share this role",
-  social_icons: [
-    { icon: ICON_LINKEDIN },
-    { icon: ICON_TWITTER },
-    { icon: ICON_FACEBOOK },
-  ],
+  social_icons: [{ icon: ICON_LINKEDIN }, { icon: ICON_TWITTER }, { icon: ICON_FACEBOOK }],
 
   // Job content
   job_content: null,
@@ -331,8 +330,7 @@ export const Jobs1: IBlock = {
       label: "Hero Image (Mobile)",
       field_interface: "MediaWidget",
       hint: {
-        prompt_description:
-          "Optimized version of the hero image for mobile screens.",
+        prompt_description: "Optimized version of the hero image for mobile screens.",
         orientation: "portrait",
         size: "medium",
         usecase: "hero",
@@ -363,8 +361,7 @@ export const Jobs1: IBlock = {
       label: "Details Content Wrapper",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Main wrapper for the two-column layout of job details.",
+        prompt_description: "Main wrapper for the two-column layout of job details.",
       },
     },
 
@@ -374,8 +371,7 @@ export const Jobs1: IBlock = {
       label: "Sidebar",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Left sidebar container for job info cards and social sharing.",
+        prompt_description: "Left sidebar container for job info cards and social sharing.",
       },
     },
     {
@@ -410,8 +406,7 @@ export const Jobs1: IBlock = {
           field_interface: "BoxWidget",
           kind: "group",
           hint: {
-            prompt_description:
-              "Repeatable label-value pairs for job information.",
+            prompt_description: "Repeatable label-value pairs for job information.",
           },
           fields: [
             {
@@ -436,8 +431,7 @@ export const Jobs1: IBlock = {
               label: "Value",
               field_interface: "TypographyWidget",
               hint: {
-                prompt_description:
-                  "Value for the job attribute (e.g., Full-time, 3-5 years).",
+                prompt_description: "Value for the job attribute (e.g., Full-time, 3-5 years).",
                 usecase: "description",
                 min_characters: 3,
                 max_characters: 50,
@@ -450,8 +444,7 @@ export const Jobs1: IBlock = {
           label: "Card Button",
           field_interface: "ButtonWidget",
           hint: {
-            prompt_description:
-              "Call-to-action button for the card (e.g., Apply Now).",
+            prompt_description: "Call-to-action button for the card (e.g., Apply Now).",
             usecase: "button",
             min_characters: 5,
             max_characters: 20,
@@ -460,6 +453,17 @@ export const Jobs1: IBlock = {
       ],
     },
 
+    // Sidebar Embed
+    {
+      key: "sidebar_embed",
+      label: "Sidebar Video Embed",
+      field_interface: "IframeWidget",
+      hint: {
+        prompt_description:
+          "Embedded video or custom HTML widget displayed in the left sidebar below job overview card.",
+      },
+    },
+
     // Social section
     {
       key: "social_section",
@@ -486,8 +490,7 @@ export const Jobs1: IBlock = {
       field_interface: "BoxWidget",
       kind: "group",
       hint: {
-        prompt_description:
-          "Social media platform icons for sharing the job listing.",
+        prompt_description: "Social media platform icons for sharing the job listing.",
       },
       fields: [
         {
@@ -510,8 +513,7 @@ export const Jobs1: IBlock = {
       label: "Job Content Area",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Main job content area containing meta info and description.",
+        prompt_description: "Main job content area containing meta info and description.",
       },
     },
 
@@ -521,8 +523,7 @@ export const Jobs1: IBlock = {
       label: "Job Meta Information",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for job metadata like department, location, and dates.",
+        prompt_description: "Container for job metadata like department, location, and dates.",
       },
     },
     {
@@ -570,8 +571,7 @@ export const Jobs1: IBlock = {
       label: "Meta Details",
       field_interface: "BoxWidget",
       hint: {
-        prompt_description:
-          "Container for posting date and application deadline.",
+        prompt_description: "Container for posting date and application deadline.",
       },
     },
     {
@@ -784,6 +784,7 @@ export const Jobs1: IBlock = {
             width: "100%",
           },
           "max-width": "256px",
+          "min-width": "0",
         },
         info_cards_levoGroup: {
           display: "flex",
@@ -839,6 +840,13 @@ export const Jobs1: IBlock = {
             items: [{}, {}, {}, {}],
           },
         ],
+        sidebar_embed: {
+          width: "100%",
+          "max-width": "100%",
+          "overflow-x": "hidden",
+          "overflow-y": "hidden",
+          height: "fit-content",
+        },
         social_section: {
           "padding-top": "xl",
           "border-top": "1px solid",

package/src/blocks/jobs/jobs-1.tsx

@@ -7,6 +7,7 @@ import {
   Form,
   Heading,
   Icon,
+  Iframe,
   Image,
   Section,
   Typography,
@@ -84,6 +85,8 @@ const Jobs1: React.FC<ILevoBlockBaseProps<IJobs1Content>> = ({ content }) => (
                 </Box>
               ))}
             </Box>
+            {/* Sidebar Embed Widget */}
+            <Iframe elementKey="sidebar_embed" />
             {/* Social Media Icons */}
             <Box elementKey="social_section">
               <Heading elementKey="social_title" />