bsign-customization-full 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsign-customization-full",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/constructure-menu.tsx

@@ -1,5 +1,6 @@
 import { type JSX, type ReactNode } from "react";
 import { ScrollArea } from "./ui/scroll-area";
+import { resolveAssetUrl } from "../lib/asset-url";
 
 export default function ConstructureSidebar({ items, onSelectItem, children, selectedItem }: {
     items: Array<{
@@ -13,7 +14,7 @@ export default function ConstructureSidebar({ items, onSelectItem, children, sel
     return (
         <div className="flex h-full w-full flex-col border-b border-[#D6D6D6] md:flex-row md:border-r md:border-b-0">
             <div className="flex w-full items-center gap-3 overflow-x-auto border-b border-[#D6D6D6] bg-[#F4F4F4] p-3 md:h-full md:w-[110px] md:flex-col md:items-center md:gap-4 md:overflow-visible md:border-b-0 md:py-[15px] md:rounded-tl-3xl 2xl:w-[200px]">
-                <img src="/logo.png" className="h-[30px] w-[74px] shrink-0 md:h-[37px] md:w-[92px]" />
+                <img src={resolveAssetUrl("/logo.png")} className="h-[30px] w-[74px] shrink-0 md:h-[37px] md:w-[92px]" />
                 {items.map(item => {
                     const Icon = item.icon;
                     return (

package/src/components/layers/layers-container.tsx

@@ -7,9 +7,10 @@ import { Textarea } from "../ui/textarea"
 import { AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, ImageIcon, TypeIcon } from "lucide-react"
 import { ToggleGroup, ToggleGroupItem } from "../ui/toggle-group"
 import { useState } from "react"
-import { Checkbox } from "../ui/checkbox"
-import { Input } from "../ui/input"
+import { Checkbox } from "../ui/checkbox"
+import { Input } from "../ui/input"
 import { getMaxLineLengthByPt } from "../../lib/config-font"
+import { resolveAssetUrl } from "../../lib/asset-url"
 
 export default function LayersContainer() {
     const { layers, init: setLayers, options } = useLayersStore()
@@ -94,11 +95,11 @@ export default function LayersContainer() {
                         {layer.type === "image" && isImageLayer(layer) && (
                             <div className="flex flex-col gap-4">
                                 <div className="flex items-center justify-center p-4 bg-slate-50 rounded-lg border-2 border-dashed border-slate-200">
-                                    <img
-                                        src={layer.props.imageSrc || "/placeholder.svg"}
-                                        className={`h-16 max-w-full object-contain rounded shadow-sm`}
-                                        alt="Layer preview"
-                                    />
+                                    <img
+                                        src={layer.props.imageSrc || resolveAssetUrl("/placeholder.svg")}
+                                        className={`h-16 max-w-full object-contain rounded shadow-sm`}
+                                        alt="Layer preview"
+                                    />
                                 </div>
                             </div>
                         )}

package/src/components/size-guide-modal.tsx

@@ -3,9 +3,10 @@ import {
     DialogPortal,
     DialogOverlay,
 } from "./ui/dialog"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { cn } from "../lib/utils"
-import { X } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cn } from "../lib/utils"
+import { X } from "lucide-react"
+import { resolveAssetUrl } from "../lib/asset-url"
 
 interface ImportFileModalProps {
     open: boolean
@@ -39,7 +40,7 @@ export function SizeGuideModal({
                             Close
                         </DialogPrimitive.Close>
                     </div>
-                    <img src="/size-guide.webp" className="w-full h-auto rounded-2xl object-contain" />
+                    <img src={resolveAssetUrl("/size-guide.webp")} className="w-full h-auto rounded-2xl object-contain" />
                 </DialogPrimitive.Content>
             </DialogPortal>
         </Dialog>

package/src/index.css

@@ -4,7 +4,7 @@
 @font-face {
   font-family: 'Bebasneue';
   src:
-    url('https://cdn.jsdelivr.net/npm/bsign-customization@latest/src/fonts/BEBASNEUE-REGULAR.TTF') format('truetype');
+    url('/fonts/BEBASNEUE-REGULAR.TTF') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -13,7 +13,7 @@
 @font-face {
   font-family: 'GOTHICB';
   src:
-    url('./fonts/GOTHICB.TTF') format('truetype');
+    url('/fonts/GOTHICB.TTF') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -22,11 +22,11 @@
 @font-face {
   font-family: 'Braille';
   src:
-    url('https://cdn.jsdelivr.net/npm/bsign-customization@latest/src/fonts/Braille-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
+    url('/fonts/Braille-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
 
 @custom-variant dark (&:is(.dark *));
 

package/src/index.tsx

@@ -3,6 +3,7 @@ import SignCustomizer, { type SignCustomizerProps } from "./AppDemo2"
 import resizableStyles from "react-resizable/css/styles.css?inline"
 import widgetStyles from "./index.css?inline"
 import { WidgetPortalContainerContext } from "./lib/widget-context"
+import { resolveAssetUrl } from "./lib/asset-url"
 
 export type WidgetTarget = string | HTMLElement
 
@@ -10,7 +11,24 @@ export interface MountConstructorWidgetProps extends SignCustomizerProps {
   widgetCss?: string | string[]
 }
 
-const BASE_WIDGET_CSS = `${resizableStyles}\n${widgetStyles}`
+const FONT_ASSET_PATHS = [
+  "/fonts/BEBASNEUE-REGULAR.TTF",
+  "/fonts/GOTHICB.TTF",
+  "/fonts/Braille-Regular.ttf",
+] as const
+
+function resolveFontUrlsInCss(styles: string): string {
+  return FONT_ASSET_PATHS.reduce((nextStyles, fontPath) => {
+    const resolvedFontPath = resolveAssetUrl(fontPath)
+
+    return nextStyles
+      .replaceAll(`url('${fontPath}')`, `url('${resolvedFontPath}')`)
+      .replaceAll(`url("${fontPath}")`, `url("${resolvedFontPath}")`)
+      .replaceAll(`url(${fontPath})`, `url(${resolvedFontPath})`)
+  }, styles)
+}
+
+const BASE_WIDGET_CSS = `${resizableStyles}\n${resolveFontUrlsInCss(widgetStyles)}`
 const rootsByHost = new WeakMap<HTMLElement, Root>()
 
 function resolveTarget(target: WidgetTarget): HTMLElement {

package/src/lib/asset-url.ts

@@ -0,0 +1,96 @@
+const ABSOLUTE_URL_PATTERN = /^(?:[a-z][a-z\d+\-.]*:)?\/\//i
+const SPECIAL_PROTOCOL_PATTERN = /^(?:data|blob):/i
+
+function isLocalhostHost(hostname: string): boolean {
+  const normalizedHost = hostname.toLowerCase()
+  return (
+    normalizedHost === "localhost" ||
+    normalizedHost === "127.0.0.1" ||
+    normalizedHost === "[::1]" ||
+    normalizedHost.endsWith(".localhost")
+  )
+}
+
+function shouldUseRelativeUrls(): boolean {
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  return isLocalhostHost(window.location.hostname)
+}
+
+function toBaseUrl(url: string): string | undefined {
+  try {
+    return new URL(".", url).toString()
+  } catch {
+    return undefined
+  }
+}
+
+function resolveDefaultAssetBaseUrl(): string {
+  const importMetaBase = toBaseUrl(import.meta.url)
+  if (importMetaBase) {
+    return importMetaBase
+  }
+
+  if (typeof document !== "undefined") {
+    const currentScript = document.currentScript
+    if (currentScript instanceof HTMLScriptElement && currentScript.src) {
+      const scriptBase = toBaseUrl(currentScript.src)
+      if (scriptBase) {
+        return scriptBase
+      }
+    }
+
+    const scripts = document.getElementsByTagName("script")
+    const lastScript = scripts.item(scripts.length - 1)
+    if (lastScript instanceof HTMLScriptElement && lastScript.src) {
+      const scriptBase = toBaseUrl(lastScript.src)
+      if (scriptBase) {
+        return scriptBase
+      }
+    }
+  }
+
+  if (typeof window !== "undefined") {
+    return toBaseUrl(window.location.href) ?? "/"
+  }
+
+  return "/"
+}
+
+let assetBaseUrl = resolveDefaultAssetBaseUrl()
+
+export function setAssetBaseUrl(baseUrl?: string) {
+  if (!baseUrl) {
+    assetBaseUrl = resolveDefaultAssetBaseUrl()
+    return
+  }
+
+  assetBaseUrl = toBaseUrl(baseUrl) ?? assetBaseUrl
+}
+
+export function getAssetBaseUrl() {
+  return assetBaseUrl
+}
+
+export function resolveAssetUrl(path: string): string {
+  if (!path) {
+    return path
+  }
+
+  if (ABSOLUTE_URL_PATTERN.test(path) || SPECIAL_PROTOCOL_PATTERN.test(path)) {
+    return path
+  }
+
+  if (shouldUseRelativeUrls()) {
+    if (path.startsWith("/") || path.startsWith("./") || path.startsWith("../")) {
+      return path
+    }
+
+    return `./${path}`
+  }
+
+  const normalizedPath = path.startsWith("/") ? path.slice(1) : path
+  return new URL(normalizedPath, getAssetBaseUrl()).toString()
+}

package/src/lib/config.ts

@@ -1,5 +1,6 @@
 import type { LayrProps, TLayer } from "../components/preview";
 import { BASE_FONT_SIZE } from "./config-font";
+import { resolveAssetUrl } from "./asset-url";
 
 export const prodApiUrl = "https://constructor-api-production.up.railway.app/v1/product/generate";
 
@@ -85,12 +86,12 @@ export const getSizeLimitScale = (size: Pick<TSize, "cm">): number => {
 
 const MODERN_BACKGROUND_ASSETS = {
   rectangle: {
-    black: "/templates/assets/modern/rectangle-black.webp",
-    white: "/templates/assets/modern/rectangle-white.webp",
+    black: resolveAssetUrl("/templates/assets/modern/rectangle-black.webp"),
+    white: resolveAssetUrl("/templates/assets/modern/rectangle-white.webp"),
   },
   square: {
-    black: "/templates/assets/modern/square-black.webp",
-    white: "/templates/assets/modern/square-white.webp",
+    black: resolveAssetUrl("/templates/assets/modern/square-black.webp"),
+    white: resolveAssetUrl("/templates/assets/modern/square-white.webp"),
   },
 } as const;
 
@@ -199,38 +200,38 @@ const WAVE_MATERIALS = [
   {
     id: "anthracite-gray",
     label: "Anthracite Gray",
-    previewImage: "/colors/anthracite-gray_50x50.png",
-    image: "/colors/anthracite-gray.webp",
+    previewImage: resolveAssetUrl("/colors/anthracite-gray_50x50.png"),
+    image: resolveAssetUrl("/colors/anthracite-gray.webp"),
   },
   {
     id: "indian-rosewood",
     label: "Indian Rosewood",
-    previewImage: "/colors/indian-rosewood_50x50.png",
-    image: "/colors/indian-rosewood.webp",
+    previewImage: resolveAssetUrl("/colors/indian-rosewood_50x50.png"),
+    image: resolveAssetUrl("/colors/indian-rosewood.webp"),
   },
   {
     id: "natural-wood",
     label: "Natural Wood",
-    previewImage: "/colors/natural-wood_50x50.png",
-    image: "/colors/natural-wood.webp",
+    previewImage: resolveAssetUrl("/colors/natural-wood_50x50.png"),
+    image: resolveAssetUrl("/colors/natural-wood.webp"),
   },
   {
     id: "walnut",
     label: "Walnut",
-    previewImage: "/colors/walnut_50x50.png",
-    image: "/colors/walnut.webp",
+    previewImage: resolveAssetUrl("/colors/walnut_50x50.png"),
+    image: resolveAssetUrl("/colors/walnut.webp"),
   },
   {
     id: "redwood",
     label: "Redwood",
-    previewImage: "/colors/redwood_50x50.png",
-    image: "/colors/redwood.webp",
+    previewImage: resolveAssetUrl("/colors/redwood_50x50.png"),
+    image: resolveAssetUrl("/colors/redwood.webp"),
   },
   {
     id: "dark-wenge",
     label: "Dark Wenge",
-    previewImage: "/colors/dark-wenge_50x50.png",
-    image: "/colors/dark-wenge.webp",
+    previewImage: resolveAssetUrl("/colors/dark-wenge_50x50.png"),
+    image: resolveAssetUrl("/colors/dark-wenge.webp"),
   },
 ] as const;
 
@@ -400,7 +401,7 @@ const modernTemplate: TemplateDefinition = {
 const waveTemplate: TemplateDefinition = {
   id: "wave",
   name: "Wave",
-  image: "/templates/wave.webp",
+  image: resolveAssetUrl("/templates/wave.webp"),
   textFont: "font-bebasneue",
   defaultShapeId: "square",
   defaultMaterialId: "anthracite-gray",
@@ -410,7 +411,7 @@ const waveTemplate: TemplateDefinition = {
       id: "square",
       label: "Square",
       sizes: SQUARE_SIZES,
-      previewImage: "/templates/wave.webp",
+      previewImage: resolveAssetUrl("/templates/wave.webp"),
     },
   ],
   materials: WAVE_MATERIALS.map((material) => ({
@@ -440,7 +441,7 @@ const waveTemplate: TemplateDefinition = {
       {
         type: "image",
         props: {
-          imageSrc: "/templates/assets/wave.webp",
+          imageSrc: resolveAssetUrl("/templates/assets/wave.webp"),
           coordinates: {
             "3.5x3.5": { x: -35, y: 90 },
             "5x5": { x: -35, y: 100 },