@tomako/tools-runtime 0.1.0

package/src/assets/icons/brands/social/bluesky-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function BlueskyIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+      <path d="M6.2 4.1c2.1 1.6 4.4 4.8 5.2 6.5.8-1.7 3.1-4.9 5.2-6.5 1.5-1.1 3.9-2 3.9.8 0 .6-.3 4.8-.5 5.5-.7 2.6-3.1 3.2-5.2 2.8 3.7.6 4.7 2.8 2.6 5-3.9 4.1-5.6-1-6-2.3-.1-.2-.1-.3-.1-.3s0 .1-.1.3c-.4 1.3-2.1 6.4-6 2.3-2.1-2.2-1.1-4.4 2.6-5-2.1.4-4.5-.2-5.2-2.8-.2-.7-.5-4.9-.5-5.5 0-2.8 2.4-1.9 3.9-.8Z" />
+    </svg>
+  );
+}

package/src/assets/icons/brands/social/facebook-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function FacebookIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+      <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 1.086.042 1.634.087v3.53h-1.164c-1.448 0-1.945.69-1.945 1.945v1.997h3.328l-.532 3.667h-2.796v7.98H9.101z" />
+    </svg>
+  );
+}

package/src/assets/icons/brands/social/index.ts

@@ -0,0 +1,8 @@
+export { BlueskyIcon } from "./bluesky-icon";
+export { FacebookIcon } from "./facebook-icon";
+export { InstagramIcon } from "./instagram-icon";
+export { LinkedinIcon } from "./linkedin-icon";
+export { ThreadsIcon } from "./threads-icon";
+export { TiktokIcon } from "./tiktok-icon";
+export { XIcon } from "./x-icon";
+export { YoutubeIcon } from "./youtube-icon";

package/src/assets/icons/brands/social/instagram-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function InstagramIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+      <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.757-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
+    </svg>
+  );
+}

package/src/assets/icons/brands/social/linkedin-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function LinkedinIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 448 512" fill="currentColor" aria-hidden {...props}>
+      <path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
+    </svg>
+  );
+}

package/src/assets/icons/brands/social/threads-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function ThreadsIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+      <path d="M12.2 3.2c4.3 0 7 2.7 7.2 7.1h-3.1c-.2-2.7-1.6-4.2-4.1-4.2-2.8 0-4.6 2.2-4.6 5.8 0 3.7 1.8 5.9 4.8 5.9 2.1 0 3.4-1 3.4-2.5 0-1.1-.8-1.8-2.2-2.1-.6 1.4-1.8 2.2-3.5 2.2-2.1 0-3.5-1.2-3.5-3 0-1.9 1.7-3.1 4.2-3.1.6 0 1.2 0 1.8.1-.4-1-1.2-1.5-2.3-1.5-1 0-1.8.3-2.5 1L8 6.8c1.1-.9 2.4-1.4 4-1.4 2.9 0 4.8 1.7 5.3 4.7 2.3.8 3.6 2.5 3.6 4.9 0 3.3-2.6 5.8-6.4 5.8-4.9 0-8-3.4-8-8.8 0-5.3 3.1-8.8 7.7-8.8Zm-1.7 9.8c.8 0 1.4-.4 1.7-1.2-.5-.1-.9-.1-1.3-.1-1 0-1.5.3-1.5.8s.4.5 1.1.5Z" />
+    </svg>
+  );
+}

package/src/assets/icons/brands/social/tiktok-icon.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from "react";
+
+/** TikTok glyph used for ContentPlatform `video`. */
+export function TiktokIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
+    </svg>
+  );
+}

package/src/assets/icons/brands/social/x-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function XIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+      <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
+    </svg>
+  );
+}

package/src/assets/icons/brands/social/youtube-icon.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function YoutubeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+    </svg>
+  );
+}

package/src/assets/icons/social-profile/facebook-icon.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+export function SocialProfileFacebookIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden {...props}>
+      <path
+        d="M14.3 8.1V6.7c0-.7.5-.9.9-.9h2.3V2.2L14.3 2c-3.5 0-4.4 2.1-4.4 4.4v1.7H7v4h2.9V22h4.4v-9.9h3.2l.5-4h-3.7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/assets/icons/social-profile/index.ts

@@ -0,0 +1,29 @@
+import { BlueskyIcon } from "../../../assets/icons/brands/social/bluesky-icon";
+import { ThreadsIcon } from "../../../assets/icons/brands/social/threads-icon";
+
+import { SocialProfileFacebookIcon } from "./facebook-icon";
+import { SocialProfileInstagramIcon } from "./instagram-icon";
+import { SocialProfileLinkedinIcon } from "./linkedin-icon";
+import { SocialProfileTiktokIcon } from "./tiktok-icon";
+import { SocialProfileXIcon } from "./x-icon";
+import { SocialProfileYoutubeIcon } from "./youtube-icon";
+
+export { SocialProfileFacebookIcon } from "./facebook-icon";
+export { SocialProfileInstagramIcon } from "./instagram-icon";
+export { SocialProfileLinkedinIcon } from "./linkedin-icon";
+export { SocialProfileTiktokIcon } from "./tiktok-icon";
+export { SocialProfileXIcon } from "./x-icon";
+export { SocialProfileYoutubeIcon } from "./youtube-icon";
+
+/** Dock / preview icons for Social Profile Kit platforms. */
+export const socialProfilePlatformIcons = {
+  x: SocialProfileXIcon,
+  bluesky: BlueskyIcon,
+  threads: ThreadsIcon,
+  linkedin: SocialProfileLinkedinIcon,
+  "linkedin-company": SocialProfileLinkedinIcon,
+  instagram: SocialProfileInstagramIcon,
+  tiktok: SocialProfileTiktokIcon,
+  youtube: SocialProfileYoutubeIcon,
+  facebook: SocialProfileFacebookIcon,
+} as const;

package/src/assets/icons/social-profile/instagram-icon.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function SocialProfileInstagramIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+      {...props}
+    >
+      <rect x="4" y="4" width="16" height="16" rx="5" />
+      <circle cx="12" cy="12" r="3.2" />
+      <circle cx="16.8" cy="7.2" r="0.8" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}

package/src/assets/icons/social-profile/linkedin-icon.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+export function SocialProfileLinkedinIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden {...props}>
+      <path
+        d="M5.2 8.7h3.1V19H5.2V8.7Zm1.6-5A1.8 1.8 0 1 1 6.7 7a1.8 1.8 0 0 1 .1-3.6Zm3.5 5h3v1.4h.1a3.3 3.3 0 0 1 3-1.7c3.2 0 3.8 2.1 3.8 4.8V19H17v-5c0-1.2 0-2.7-1.7-2.7s-1.9 1.3-1.9 2.6V19h-3.1V8.7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/assets/icons/social-profile/tiktok-icon.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+export function SocialProfileTiktokIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden {...props}>
+      <path
+        d="M14.2 4c.4 2.5 1.8 4 4.2 4.3v3.1a7 7 0 0 1-4.1-1.3v4.5c0 3.1-2.1 5.4-5.2 5.4a4.7 4.7 0 0 1-4.9-4.6c0-2.7 2.1-4.8 5-4.8.4 0 .8 0 1.1.1v3.2a2.4 2.4 0 0 0-1.1-.2 1.6 1.6 0 1 0 1.7 1.6V4h3.3Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/assets/icons/social-profile/x-icon.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from "react";
+
+/** Compact X mark for Social Profile Kit dock. */
+export function SocialProfileXIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden {...props}>
+      <path
+        d="M5 4h4.2l3.1 4.4L16.1 4H20l-5.8 6.7L21 20h-4.2l-3.7-5.2L8.6 20H4.7l6.5-7.5L5 4Zm2.7 1.7 9.9 12.6h1L8.8 5.7H7.7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/assets/icons/social-profile/youtube-icon.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+export function SocialProfileYoutubeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden {...props}>
+      <path
+        d="M21 8.2a3 3 0 0 0-.5-1.3 2 2 0 0 0-1.4-.6C17.2 6 12 6 12 6s-5.2 0-7.1.3a2 2 0 0 0-1.4.6A3 3 0 0 0 3 8.2 31 31 0 0 0 2.8 12 31 31 0 0 0 3 15.8a3 3 0 0 0 .5 1.3 2.4 2.4 0 0 0 1.6.6c1.9.3 6.9.3 6.9.3s5.2 0 7.1-.3a2 2 0 0 0 1.4-.6 3 3 0 0 0 .5-1.3 31 31 0 0 0 .2-3.8 31 31 0 0 0-.2-3.8ZM10.2 14.6V9.4L15 12l-4.8 2.6Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/tools/engine/form-builder.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useLocale } from "../../../i18n/client";
+import { Input } from "@tomako/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tomako/ui/select";
+import { Switch } from "@tomako/ui/switch";
+import { Textarea } from "@tomako/ui/textarea";
+import {
+  ToolField,
+  toolInputClass,
+  toolInvalidControlClass,
+  toolSelectTriggerClass,
+  toolTextareaClass,
+} from "../../../components/tools/workspace";
+import { cn } from "@tomako/ui/cn";
+import { pickL10n, pickL10nOptional } from "../../../features/tools/package/l10n";
+import type {
+  FormFieldSpec,
+  FormValues,
+} from "../../../features/tools/package/types";
+import type { AppLocale } from "../../../i18n/locale";
+
+export function FormBuilder({
+  form,
+  values,
+  invalidFields,
+  disabled,
+  defaultInvalidMessage,
+  collapseAdvanced = false,
+  advancedLabel,
+  onChange,
+}: {
+  form: FormFieldSpec[];
+  values: FormValues;
+  invalidFields: readonly string[];
+  disabled: boolean;
+  defaultInvalidMessage: string;
+  collapseAdvanced?: boolean;
+  advancedLabel?: string;
+  onChange: (id: string, value: string | boolean) => void;
+}) {
+  const locale = useLocale() as AppLocale;
+
+  const renderField = (field: FormFieldSpec) => {
+    const invalid = invalidFields.includes(field.id);
+    const errorText = invalid
+      ? pickL10nOptional(field.invalidMessage, locale) ?? defaultInvalidMessage
+      : undefined;
+    const label = pickL10n(field.label, locale);
+    const hint = pickL10nOptional(field.hint, locale);
+    const placeholder = pickL10nOptional(field.placeholder, locale);
+    const fieldControlId = `tool-package-field-${field.id}`;
+
+    switch (field.kind) {
+      case "text":
+        return (
+          <ToolField
+            key={field.id}
+            label={label}
+            htmlFor={fieldControlId}
+            hint={hint}
+            error={errorText}
+          >
+            <Input
+              id={fieldControlId}
+              data-field-id={field.id}
+              value={String(values[field.id] ?? "")}
+              maxLength={field.maxLength}
+              placeholder={placeholder}
+              disabled={disabled}
+              aria-invalid={invalid}
+              className={cn(toolInputClass, invalid && toolInvalidControlClass)}
+              onChange={(event) => onChange(field.id, event.target.value)}
+            />
+          </ToolField>
+        );
+      case "textarea":
+        return (
+          <ToolField
+            key={field.id}
+            label={label}
+            htmlFor={fieldControlId}
+            hint={hint}
+            error={errorText}
+          >
+            <Textarea
+              id={fieldControlId}
+              data-field-id={field.id}
+              value={String(values[field.id] ?? "")}
+              rows={field.rows ?? 4}
+              maxLength={field.maxLength}
+              placeholder={placeholder}
+              disabled={disabled}
+              aria-invalid={invalid}
+              className={cn(toolTextareaClass, invalid && toolInvalidControlClass)}
+              onChange={(event) => onChange(field.id, event.target.value)}
+            />
+          </ToolField>
+        );
+      case "select":
+        return (
+          <ToolField
+            key={field.id}
+            label={label}
+            htmlFor={fieldControlId}
+            hint={hint}
+            error={errorText}
+          >
+            <Select
+              value={String(values[field.id] ?? field.defaultValue)}
+              disabled={disabled}
+              onValueChange={(value) => onChange(field.id, value)}
+            >
+              <SelectTrigger
+                id={fieldControlId}
+                data-field-id={field.id}
+                className={cn(toolSelectTriggerClass, invalid && toolInvalidControlClass)}
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {field.options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {pickL10n(option.label, locale)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </ToolField>
+        );
+      case "toggle": {
+        const on = Boolean(values[field.id]);
+        return (
+          <ToolField
+            key={field.id}
+            label={label}
+            htmlFor={fieldControlId}
+            hint={hint}
+            error={errorText}
+          >
+            <div className="flex h-11 items-center gap-3 rounded-lg border border-[#DDE3EC] bg-[#F5F7FB] px-3.5">
+              <Switch
+                id={fieldControlId}
+                data-field-id={field.id}
+                checked={on}
+                disabled={disabled}
+                onCheckedChange={(checked) => onChange(field.id, checked)}
+              />
+              <span className="text-sm text-[#3D3D3D]">
+                {pickL10n(on ? field.onLabel : field.offLabel, locale)}
+              </span>
+            </div>
+          </ToolField>
+        );
+      }
+    }
+  };
+
+  const renderRows = (fields: FormFieldSpec[]) => {
+    const rows: FormFieldSpec[][] = [];
+    let pending: FormFieldSpec[] = [];
+    for (const field of fields) {
+      const spansRow =
+        field.fullWidth || field.kind === "textarea" || pending.length === 1;
+      if (field.fullWidth || field.kind === "textarea") {
+        if (pending.length) {
+          rows.push(pending);
+          pending = [];
+        }
+        rows.push([field]);
+        continue;
+      }
+      pending.push(field);
+      if (spansRow && pending.length === 2) {
+        rows.push(pending);
+        pending = [];
+      }
+    }
+    if (pending.length) rows.push(pending);
+
+    return rows.map((row, index) => (
+      <div
+        key={row.map((field) => field.id).join("-") || index}
+        className={cn("grid gap-4", row.length === 2 && "md:grid-cols-2")}
+      >
+        {row.map(renderField)}
+      </div>
+    ));
+  };
+
+  const primaryFields = collapseAdvanced
+    ? form.filter((field) => !field.advanced)
+    : form;
+  const advancedFields = collapseAdvanced
+    ? form.filter((field) => field.advanced)
+    : [];
+
+  return (
+    <div className="grid gap-4">
+      {renderRows(primaryFields)}
+      {advancedFields.length > 0 ? (
+        <details className="group rounded-lg border border-[#DDE3EC] bg-[#FAFBFC]">
+          <summary className="cursor-pointer list-none px-4 py-3 text-sm font-semibold text-[#3D3D3D] outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/25 [&::-webkit-details-marker]:hidden">
+            {advancedLabel}
+          </summary>
+          <div className="grid gap-4 border-t border-[#DDE3EC] p-4">
+            {renderRows(advancedFields)}
+          </div>
+        </details>
+      ) : null}
+    </div>
+  );
+}

package/src/components/tools/engine/package-widget-loader.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { NextIntlClientProvider } from "next-intl";
+
+import type { AppLocale } from "../../../i18n/locale";
+import type { PackageWidgetVariant } from "./package-widget-runtime";
+
+const LazyPackageWidget = dynamic(
+  () => import("./package-widget").then((module) => module.PackageWidget),
+  {
+    ssr: false,
+    loading: () => (
+      <div
+        aria-hidden="true"
+        className="min-h-[28rem] rounded-[1.5rem] border border-[#E6E3DA] bg-white/70 shadow-[0_18px_48px_rgba(17,17,17,0.06)]"
+      />
+    ),
+  },
+);
+
+export function PackageWidgetLoader({
+  locale,
+  messages,
+  slug,
+  variant = "default",
+}: {
+  locale: AppLocale;
+  messages: Record<string, unknown>;
+  slug: string;
+  variant?: PackageWidgetVariant;
+}) {
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      <LazyPackageWidget slug={slug} variant={variant} />
+    </NextIntlClientProvider>
+  );
+}