@fiyuu/core 0.1.0

package/src/media.js

@@ -0,0 +1,87 @@
+import { escapeHtml } from "./template.js";
+export function optimizedImage(props) {
+    const loading = props.loading ?? "lazy";
+    const decoding = props.decoding ?? "async";
+    const fetchPriority = props.fetchPriority ?? "auto";
+    const imageAttributes = [
+        createAttribute("src", props.src),
+        createAttribute("alt", props.alt),
+        createAttribute("loading", loading),
+        createAttribute("decoding", decoding),
+        createAttribute("fetchpriority", fetchPriority),
+        createAttribute("sizes", props.sizes),
+        createAttribute("srcset", props.srcSet),
+        createAttribute("width", props.width),
+        createAttribute("height", props.height),
+        createAttribute("class", props.class),
+        createAttribute("style", props.style),
+        createAttribute("id", props.id),
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const sourceTags = (props.sources ?? [])
+        .map((source) => {
+        const attributes = [
+            createAttribute("srcset", source.srcSet),
+            createAttribute("media", source.media),
+            createAttribute("type", source.type),
+            createAttribute("sizes", source.sizes),
+        ]
+            .filter(Boolean)
+            .join(" ");
+        return `<source ${attributes}>`;
+    })
+        .join("");
+    if (sourceTags.length > 0) {
+        return `<picture>${sourceTags}<img ${imageAttributes}></picture>`;
+    }
+    return `<img ${imageAttributes}>`;
+}
+export function optimizedVideo(props) {
+    const preload = props.preload ?? "metadata";
+    const controls = props.controls ?? true;
+    const playsInline = props.playsInline ?? true;
+    const sources = props.sources && props.sources.length > 0
+        ? props.sources
+        : props.src
+            ? [{ src: props.src }]
+            : [];
+    if (sources.length === 0) {
+        throw new Error("optimizedVideo requires either `src` or `sources`.");
+    }
+    const videoAttributes = [
+        createAttribute("poster", props.poster),
+        createAttribute("preload", preload),
+        createAttribute("width", props.width),
+        createAttribute("height", props.height),
+        createAttribute("class", props.class),
+        createAttribute("style", props.style),
+        createAttribute("id", props.id),
+        controls ? "controls" : "",
+        props.muted ? "muted" : "",
+        props.loop ? "loop" : "",
+        props.autoPlay ? "autoplay" : "",
+        playsInline ? "playsinline" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const sourceTags = sources
+        .map((source) => {
+        const attributes = [
+            createAttribute("src", source.src),
+            createAttribute("type", source.type),
+            createAttribute("media", source.media),
+        ]
+            .filter(Boolean)
+            .join(" ");
+        return `<source ${attributes}>`;
+    })
+        .join("");
+    return `<video ${videoAttributes}>${sourceTags}</video>`;
+}
+function createAttribute(name, value) {
+    if (value === undefined || value === null || value === "") {
+        return "";
+    }
+    return `${name}="${escapeHtml(value)}"`;
+}

package/src/reactive.d.ts

@@ -0,0 +1,53 @@
+import { type RawHtml } from "./template.js";
+export type Signal<T> = {
+    get(): T;
+    set(next: T): void;
+    subscribe(fn: () => void): () => void;
+};
+type RenderBlock = string | (() => string);
+export declare function createSignal<T>(initial: T): Signal<T>;
+export declare function when(condition: unknown, content: string | (() => string)): string;
+export type ElseBranch = {
+    kind: "Else";
+    render: () => string;
+};
+export declare function Else(content: RenderBlock): ElseBranch;
+export declare function If(input: {
+    condition: unknown;
+    then: RenderBlock;
+    else?: RenderBlock | ElseBranch;
+}): string;
+export declare function each<T>(items: T[] | readonly T[], renderItem: (item: T, index: number) => string): string;
+export declare function For<T>(input: {
+    each: readonly T[] | T[];
+    render: (item: T, index: number) => string;
+    empty?: RenderBlock;
+}): string;
+export declare function onEvent(handler: (event: Event) => void): string;
+export declare function getEventHandler(id: string): ((event: Event) => void) | undefined;
+export declare function clearEventRegistry(): void;
+export declare function mount(root: HTMLElement, render: () => string, signals?: Signal<unknown>[]): () => void;
+export declare function createFiyuuStore<T>(initialValue: T): {
+    get: () => T;
+    set: (next: T) => void;
+    subscribe: (fn: () => void) => () => void;
+};
+export declare function createFlatStore<T>(initialValue: T): {
+    get: () => T;
+    set: (next: T) => void;
+    subscribe: (fn: () => void) => () => void;
+};
+export declare function scopedStyles(name: string, css: string): {
+    scopeClass: string;
+    style: RawHtml;
+};
+export declare function island(options: {
+    id: string;
+    placeholder: string;
+    bootCode: string;
+    trigger?: "click" | "hover" | "visible";
+}): string;
+export declare function debugTag(name: string, content: string): string;
+export declare function humanDebugOverlay(): RawHtml;
+export type FiyuuStore<T> = ReturnType<typeof createFiyuuStore<T>>;
+export {};

package/src/reactive.js

@@ -0,0 +1,160 @@
+import { html, raw } from "./template.js";
+export function createSignal(initial) {
+    let value = initial;
+    const listeners = new Set();
+    return {
+        get() {
+            return value;
+        },
+        set(next) {
+            if (value === next)
+                return;
+            value = next;
+            for (const fn of listeners)
+                fn();
+        },
+        subscribe(fn) {
+            listeners.add(fn);
+            return () => listeners.delete(fn);
+        },
+    };
+}
+export function when(condition, content) {
+    if (!condition)
+        return "";
+    return typeof content === "function" ? content() : content;
+}
+export function Else(content) {
+    return {
+        kind: "Else",
+        render: () => renderBlock(content),
+    };
+}
+export function If(input) {
+    if (input.condition) {
+        return renderBlock(input.then);
+    }
+    if (!input.else) {
+        return "";
+    }
+    if (isElseBranch(input.else)) {
+        return input.else.render();
+    }
+    return renderBlock(input.else);
+}
+function isElseBranch(value) {
+    return Boolean(value &&
+        typeof value === "object" &&
+        "kind" in value &&
+        "render" in value &&
+        value.kind === "Else" &&
+        typeof value.render === "function");
+}
+function renderBlock(block) {
+    if (block == null) {
+        return "";
+    }
+    if (typeof block === "function") {
+        return block();
+    }
+    return block;
+}
+export function each(items, renderItem) {
+    if (!items || items.length === 0)
+        return "";
+    return items.map(renderItem).join("");
+}
+export function For(input) {
+    if (!input.each || input.each.length === 0) {
+        return renderBlock(input.empty);
+    }
+    return input.each.map((item, index) => input.render(item, index)).join("");
+}
+let _eventId = 0;
+const _eventRegistry = new Map();
+export function onEvent(handler) {
+    const id = `fiyuu_evt_${_eventId++}`;
+    _eventRegistry.set(id, handler);
+    return id;
+}
+export function getEventHandler(id) {
+    return _eventRegistry.get(id);
+}
+export function clearEventRegistry() {
+    _eventRegistry.clear();
+    _eventId = 0;
+}
+export function mount(root, render, signals = []) {
+    function update() {
+        root.innerHTML = render();
+        attachDeclarativeEvents(root);
+    }
+    update();
+    const unsubscribers = signals.map((s) => s.subscribe(update));
+    return () => {
+        unsubscribers.forEach((u) => u());
+        root.innerHTML = "";
+    };
+}
+function attachDeclarativeEvents(root) {
+    const elements = root.querySelectorAll("[data-fiyuu-on]");
+    for (const el of elements) {
+        const parts = el.getAttribute("data-fiyuu-on").split(":");
+        if (parts.length !== 2)
+            continue;
+        const [eventName, handlerId] = parts;
+        const handler = _eventRegistry.get(handlerId);
+        if (handler) {
+            el.addEventListener(eventName, handler);
+        }
+    }
+}
+export function createFiyuuStore(initialValue) {
+    const signal = createSignal(initialValue);
+    return {
+        get: signal.get,
+        set: signal.set,
+        subscribe: signal.subscribe,
+    };
+}
+export function createFlatStore(initialValue) {
+    return createFiyuuStore(initialValue);
+}
+let scopedStyleCounter = 0;
+function toScopeSlug(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 24) || "scope";
+}
+export function scopedStyles(name, css) {
+    scopedStyleCounter += 1;
+    const scopeClass = `fx-${toScopeSlug(name)}-${scopedStyleCounter}`;
+    const scopedCss = css.replaceAll(":scope", `.${scopeClass}`);
+    return {
+        scopeClass,
+        style: raw(`<style>${scopedCss}</style>`),
+    };
+}
+function escapeSingleQuotes(value) {
+    return value.replaceAll("\\", "\\\\").replaceAll("'", "\\'");
+}
+export function island(options) {
+    const trigger = options.trigger ?? "click";
+    const safeId = escapeSingleQuotes(options.id);
+    const script = `(function(){\n  var root = document.querySelector('[data-fiyuu-island="${safeId}"]');\n  if (!root) return;\n\n  var started = false;\n\n  function start() {\n    if (started) return;\n    started = true;\n    ${options.bootCode}\n  }\n\n  if ("${trigger}" === "click") {\n    root.addEventListener("click", start, { once: true });\n    return;\n  }\n\n  if ("${trigger}" === "hover") {\n    root.addEventListener("mouseenter", start, { once: true });\n    root.addEventListener("focusin", start, { once: true });\n    return;\n  }\n\n  if (typeof window.IntersectionObserver !== "function") {\n    start();\n    return;\n  }\n\n  var observer = new IntersectionObserver(function(entries) {\n    for (var i = 0; i < entries.length; i += 1) {\n      if (!entries[i].isIntersecting) continue;\n      observer.disconnect();\n      start();\n      break;\n    }\n  }, { rootMargin: "220px" });\n\n  observer.observe(root);\n})();`;
+    return html `
+    <section data-fiyuu-island="${options.id}">
+      ${raw(options.placeholder)}
+    </section>
+    <script>${raw(script)}</script>
+  `;
+}
+export function debugTag(name, content) {
+    return html `<section data-fiyuu-debug-tag="${name}">${raw(content)}</section>`;
+}
+export function humanDebugOverlay() {
+    const script = `(function() {\n  var lastTag = "unknown";\n\n  function findTag(target) {\n    if (!target || !target.closest) return null;\n    var tagged = target.closest("[data-fiyuu-debug-tag]");\n    if (!tagged) return null;\n    return tagged.getAttribute("data-fiyuu-debug-tag");\n  }\n\n  document.addEventListener("pointerdown", function(event) {\n    var tag = findTag(event.target);\n    if (tag) lastTag = tag;\n  }, true);\n\n  document.addEventListener("focusin", function(event) {\n    var tag = findTag(event.target);\n    if (tag) lastTag = tag;\n  }, true);\n\n  function inferHint(message) {\n    var text = String(message || "").toLowerCase();\n    if (text.includes("undefined") || text.includes("null")) {\n      return "Eksik null/undefined kontrolu var. Verinin geldigi yeri kontrol et.";\n    }\n    if (text.includes("is not a function")) {\n      return "Fonksiyon yerine farkli bir tip geciyor. Cagrilan methodu dogrula.";\n    }\n    if (text.includes("json")) {\n      return "Beklenen veri formati ile gelen cevap uyusmuyor. Query/action ciktisini kontrol et.";\n    }\n    return "Kosul bloklarinda beklenmeyen bir durum olabilir. Son degisen bolumu kontrol et.";\n  }\n\n  function getPanel() {\n    var panel = document.getElementById("fiyuu-human-debug");\n    if (panel) return panel;\n\n    panel = document.createElement("aside");\n    panel.id = "fiyuu-human-debug";\n    panel.style.position = "fixed";\n    panel.style.right = "16px";\n    panel.style.bottom = "16px";\n    panel.style.maxWidth = "min(92vw, 480px)";\n    panel.style.padding = "12px 14px";\n    panel.style.borderRadius = "10px";\n    panel.style.border = "1px solid #fecaca";\n    panel.style.background = "#fff1f2";\n    panel.style.color = "#7f1d1d";\n    panel.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, monospace";\n    panel.style.fontSize = "12px";\n    panel.style.lineHeight = "1.45";\n    panel.style.whiteSpace = "pre-line";\n    panel.style.zIndex = "99999";\n    panel.style.boxShadow = "0 10px 28px rgba(0,0,0,0.12)";\n    document.body.appendChild(panel);\n    return panel;\n  }\n\n  if (!window.fiyuu || typeof window.fiyuu.onError !== "function") {\n    return;\n  }\n\n  window.fiyuu.onError(function(detail) {\n    var source = detail && detail.source ? detail.source : "unknown file";\n    var line = detail && detail.line ? ":" + detail.line : "";\n    var message = detail && detail.message ? detail.message : "Unknown runtime error";\n    var hint = inferHint(message);\n    var tag = lastTag;\n    var activeElement = document.activeElement;\n\n    if (tag === "unknown" && activeElement && activeElement.tagName) {\n      tag = activeElement.tagName.toLowerCase();\n    }\n\n    var panel = getPanel();\n    panel.textContent = [\n      "Insancil Hata Analizi",\n      "Mesaj: " + message,\n      "Dosya: " + source + line,\n      "Etiket/Bolum: " + tag,\n      "Ihtimal: " + hint,\n    ].join("\\n");\n  });\n})();`;
+    return raw(`<script>${script}</script>`);
+}

package/src/responsive-wrapper.d.ts

@@ -0,0 +1,18 @@
+export type BreakpointPreset = "mobile-first" | "desktop-first" | "full-width" | "article" | "card" | "dashboard" | "narrow";
+export type PreviewDevice = "phone" | "tablet" | "watch" | "desktop";
+export type PreviewMode = "mobile" | "desktop" | "both";
+export interface ResponsiveWrapperOptions {
+    content: string;
+    class?: string;
+    style?: string;
+    maxWidth?: number;
+    padding?: "none" | "sm" | "md" | "lg" | "xl" | string;
+    previewEnabled?: boolean;
+    previewLabel?: string;
+    id?: string;
+    preset?: BreakpointPreset;
+    /** Default preview mode */
+    defaultPreviewMode?: PreviewMode;
+}
+export declare function responsiveWrapper(options: ResponsiveWrapperOptions): string;
+export declare function responsiveWrapperScript(): string;

package/src/responsive-wrapper.js

@@ -0,0 +1,285 @@
+import { escapeHtml } from "./template.js";
+const PRESETS = {
+    "mobile-first": { maxWidth: 768, padding: "1rem", class: "rw-mobile-first" },
+    "desktop-first": { maxWidth: 1280, padding: "1rem", class: "rw-desktop-first" },
+    "full-width": { maxWidth: 0, padding: "0", class: "rw-full-width" },
+    "article": { maxWidth: 720, padding: "1.5rem", class: "rw-article" },
+    "card": { maxWidth: 480, padding: "1rem", class: "rw-card" },
+    "dashboard": { maxWidth: 1440, padding: "1rem", class: "rw-dashboard" },
+    "narrow": { maxWidth: 540, padding: "1rem", class: "rw-narrow" },
+};
+const DEVICES = {
+    phone: {
+        width: 390,
+        height: 844,
+        label: "iPhone",
+        scale: 0.72,
+        icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width:15px;height:15px"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg>',
+    },
+    tablet: {
+        width: 768,
+        height: 1024,
+        label: "iPad",
+        scale: 0.56,
+        icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width:15px;height:15px"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M12 18h.01"/></svg>',
+    },
+    watch: {
+        width: 200,
+        height: 240,
+        label: "Watch",
+        scale: 0.85,
+        icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width:15px;height:15px"><rect x="6" y="5" width="12" height="14" rx="3"/><path d="M12 12h.01M9 5V3M15 5V3M9 19v2M15 19v2"/></svg>',
+    },
+    desktop: {
+        width: 1280,
+        height: 800,
+        label: "Desktop",
+        scale: 0.52,
+        icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width:15px;height:15px"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>',
+    },
+};
+export function responsiveWrapper(options) {
+    const { content, class: customClass = "", style: customStyle = "", maxWidth: customMaxWidth, padding: customPadding, previewEnabled = true, previewLabel = "Responsive", id, preset = "mobile-first", defaultPreviewMode = "both", } = options;
+    const presetConfig = PRESETS[preset];
+    const maxWidth = customMaxWidth ?? presetConfig.maxWidth;
+    const containerClass = customClass || presetConfig.class;
+    const widthStyle = maxWidth > 0 ? `max-width:${maxWidth}px;` : "";
+    const paddingStyle = getPaddingStyle(customPadding ?? presetConfig.padding);
+    const wrapperId = id || `rw-${generateId()}`;
+    const previewButton = previewEnabled ? buildPreviewButton(wrapperId) : "";
+    const previewPanel = previewEnabled ? buildPreviewPanel(wrapperId, content, preset, defaultPreviewMode) : "";
+    const previewStyles = previewEnabled ? buildPreviewStyles() : "";
+    const centerStyle = maxWidth > 0 ? "margin-left:auto;margin-right:auto;" : "";
+    return `<div id="${wrapperId}" class="fiyuu-responsive-wrapper ${containerClass}" style="position:relative;width:100%;${widthStyle}${centerStyle}${paddingStyle}${customStyle}">${previewButton}${content}${previewPanel}</div>${previewStyles}`;
+}
+function getPaddingStyle(padding) {
+    if (!padding || padding === "none")
+        return "";
+    const map = { sm: "0.75rem", md: "1rem", lg: "1.5rem", xl: "2rem" };
+    return `padding:${map[padding] || padding};`;
+}
+function generateId() {
+    return Math.random().toString(36).substring(2, 8);
+}
+function buildPreviewButton(wrapperId) {
+    return `<button type="button" class="fiyuu-rw-btn" onclick="window.__fiyuu_rw_open('${wrapperId}')" aria-label="Responsive Preview" title="Responsive Preview">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width:15px;height:15px"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+    <span>Responsive Preview</span>
+  </button>`;
+}
+function buildPreviewPanel(wrapperId, content, preset, defaultMode) {
+    const phoneDevice = DEVICES.phone;
+    const tabletDevice = DEVICES.tablet;
+    const watchDevice = DEVICES.watch;
+    const desktopDevice = DEVICES.desktop;
+    // Scale wrappers clip to actual visual size so height matches
+    const phoneW = Math.round(phoneDevice.width * phoneDevice.scale);
+    const phoneH = Math.round(phoneDevice.height * phoneDevice.scale);
+    const desktopW = Math.round(desktopDevice.width * desktopDevice.scale);
+    const desktopH = Math.round(desktopDevice.height * desktopDevice.scale);
+    return `<div id="${wrapperId}-panel" class="fiyuu-rw-panel" style="display:none;">
+    <!-- Left float sidebar -->
+    <div class="fiyuu-rw-sidebar">
+      <button type="button" class="fiyuu-rw-close" onclick="window.__fiyuu_rw_close('${wrapperId}')" aria-label="Close" title="Close">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+      <span class="fiyuu-rw-preset-badge">${escapeHtml(preset)}</span>
+      <div class="fiyuu-rw-sidebar-divider"></div>
+      <span class="fiyuu-rw-sidebar-label">VIEW</span>
+      <button type="button" class="fiyuu-rw-mode-btn" data-mode="mobile" onclick="window.__fiyuu_rw_setmode('${wrapperId}','mobile')" title="Mobile">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width:16px;height:16px"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg>
+        <span>Mobile</span>
+      </button>
+      <button type="button" class="fiyuu-rw-mode-btn" data-mode="desktop" onclick="window.__fiyuu_rw_setmode('${wrapperId}','desktop')" title="Desktop">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width:16px;height:16px"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
+        <span>Desktop</span>
+      </button>
+      <button type="button" class="fiyuu-rw-mode-btn active" data-mode="both" onclick="window.__fiyuu_rw_setmode('${wrapperId}','both')" title="Both">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" style="width:16px;height:16px"><rect x="1" y="7" width="9" height="13" rx="1"/><rect x="14" y="4" width="9" height="13" rx="1"/></svg>
+        <span>Both</span>
+      </button>
+      <div class="fiyuu-rw-sidebar-divider"></div>
+      <span class="fiyuu-rw-sidebar-label">DEVICE</span>
+      <button type="button" class="fiyuu-rw-dev-btn active" data-device="phone" onclick="window.__fiyuu_rw_setdevice('${wrapperId}','phone')" title="iPhone (375px)">${phoneDevice.icon}</button>
+      <button type="button" class="fiyuu-rw-dev-btn" data-device="tablet" onclick="window.__fiyuu_rw_setdevice('${wrapperId}','tablet')" title="iPad (768px)">${tabletDevice.icon}</button>
+      <button type="button" class="fiyuu-rw-dev-btn" data-device="watch" onclick="window.__fiyuu_rw_setdevice('${wrapperId}','watch')" title="Watch (200px)">${watchDevice.icon}</button>
+      <button type="button" class="fiyuu-rw-dev-btn" data-device="desktop" onclick="window.__fiyuu_rw_setdevice('${wrapperId}','desktop')" title="Desktop (1280px)">${desktopDevice.icon}</button>
+    </div>
+
+    <!-- Viewport area -->
+    <div class="fiyuu-rw-viewport">
+      <!-- Mobile View -->
+      <div id="${wrapperId}-mobile-view" class="fiyuu-rw-device-col" style="display:none;">
+        <div class="fiyuu-rw-device-frame fiyuu-rw-phone-frame">
+          <div class="fiyuu-rw-phone-notch"></div>
+          <div class="fiyuu-rw-screen-wrapper" id="${wrapperId}-mobile-screen-wrapper" style="width:${phoneW}px;height:${phoneH}px;">
+            <div class="fiyuu-rw-device-screen" style="width:${phoneDevice.width}px;height:${phoneDevice.height}px;transform:scale(${phoneDevice.scale});transform-origin:top left;">
+              ${content}
+            </div>
+          </div>
+          <div class="fiyuu-rw-phone-home"></div>
+        </div>
+        <div class="fiyuu-rw-device-info">${phoneDevice.icon} ${phoneDevice.label} — ${phoneDevice.width}px</div>
+      </div>
+
+      <!-- Desktop View -->
+      <div id="${wrapperId}-desktop-view" class="fiyuu-rw-device-col" style="display:none;">
+        <div class="fiyuu-rw-device-frame fiyuu-rw-desktop-frame">
+          <div class="fiyuu-rw-desktop-toolbar">
+            <span class="fiyuu-rw-dot" style="background:#FF5F57;"></span>
+            <span class="fiyuu-rw-dot" style="background:#FEBC2E;"></span>
+            <span class="fiyuu-rw-dot" style="background:#28C840;"></span>
+            <span class="fiyuu-rw-url-bar">${"localhost".padEnd(42, " ")}</span>
+          </div>
+          <div class="fiyuu-rw-screen-wrapper" style="width:${desktopW}px;height:${desktopH}px;">
+            <div class="fiyuu-rw-device-screen" style="width:${desktopDevice.width}px;height:${desktopDevice.height}px;transform:scale(${desktopDevice.scale});transform-origin:top left;">
+              ${content}
+            </div>
+          </div>
+        </div>
+        <div class="fiyuu-rw-device-info">${desktopDevice.icon} ${desktopDevice.label} — ${desktopDevice.width}px</div>
+      </div>
+    </div>
+  </div>`;
+}
+function buildPreviewStyles() {
+    return `<style id="fiyuu-rw-styles">
+.fiyuu-responsive-wrapper{position:relative;width:100%;box-sizing:border-box;}
+
+/* Preview Button (FAB) */
+.fiyuu-rw-btn{position:fixed;bottom:24px;right:24px;z-index:999;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:12px;border:none;background:var(--accent,#ca6242);color:white;font-size:12px;font-weight:600;font-family:var(--font-sans,system-ui,sans-serif);cursor:pointer;opacity:0.9;transition:all .2s ease;box-shadow:0 4px 16px rgba(0,0,0,.15);letter-spacing:.01em;}
+.fiyuu-rw-btn:hover{opacity:1;transform:scale(1.05);box-shadow:0 6px 24px rgba(0,0,0,.2);}
+.fiyuu-rw-btn svg{flex-shrink:0;}
+
+/* Panel — row: sidebar + viewport */
+.fiyuu-rw-panel{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:flex;flex-direction:row;animation:fiyuu-rw-fade .18s ease;}
+@keyframes fiyuu-rw-fade{from{opacity:0}to{opacity:1}}
+
+/* Left Sidebar */
+.fiyuu-rw-sidebar{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:var(--bg-primary,#fff);border-right:1px solid var(--border,#e5e7eb);width:76px;flex-shrink:0;overflow-y:auto;}
+.fiyuu-rw-close{background:none;border:none;color:var(--text-muted,#9ca3af);cursor:pointer;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;width:36px;height:36px;transition:all .15s;flex-shrink:0;}
+.fiyuu-rw-close:hover{background:var(--bg-secondary,#f3f4f6);color:var(--text-primary,#111827);}
+.fiyuu-rw-preset-badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent,#ca6242);background:rgba(202,98,66,.1);padding:3px 6px;border-radius:6px;text-align:center;word-break:break-all;line-height:1.3;}
+.fiyuu-rw-sidebar-divider{width:80%;height:1px;background:var(--border,#e5e7eb);margin:4px 0;flex-shrink:0;}
+.fiyuu-rw-sidebar-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted,#9ca3af);font-family:var(--font-sans,system-ui);}
+
+/* Mode buttons — vertical pill blob */
+.fiyuu-rw-mode-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 6px;border-radius:999px;border:none;background:var(--bg-secondary,#f3f4f6);color:var(--text-secondary,#4b5563);font-size:9px;font-weight:700;cursor:pointer;font-family:var(--font-sans,system-ui);transition:all .15s;width:56px;text-align:center;flex-shrink:0;}
+.fiyuu-rw-mode-btn span{line-height:1.2;}
+.fiyuu-rw-mode-btn:hover{background:rgba(202,98,66,.12);color:var(--accent,#ca6242);}
+.fiyuu-rw-mode-btn.active{background:var(--accent,#ca6242);color:white;}
+
+/* Device buttons — circle blob icon-only */
+.fiyuu-rw-dev-btn{display:flex;align-items:center;justify-content:center;padding:0;border-radius:999px;border:none;background:var(--bg-secondary,#f3f4f6);color:var(--text-muted,#9ca3af);cursor:pointer;transition:all .15s;width:40px;height:40px;flex-shrink:0;}
+.fiyuu-rw-dev-btn:hover{background:rgba(202,98,66,.12);color:var(--accent,#ca6242);}
+.fiyuu-rw-dev-btn.active{background:var(--accent,#ca6242);color:white;}
+
+/* Viewport */
+.fiyuu-rw-viewport{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;gap:32px;padding:32px 24px;}
+.fiyuu-rw-device-col{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0;}
+.fiyuu-rw-device-info{font-size:11px;font-weight:600;color:var(--text-muted,#9ca3af);display:flex;align-items:center;gap:5px;font-family:var(--font-sans,system-ui);}
+
+/* Device Frame */
+.fiyuu-rw-device-frame{background:#111;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
+
+/* Screen wrapper clips to actual scaled dimensions */
+.fiyuu-rw-screen-wrapper{position:relative;overflow:hidden;flex-shrink:0;}
+.fiyuu-rw-device-screen{background:var(--bg-primary,#fff);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:absolute;top:0;left:0;}
+
+/* Phone Frame */
+.fiyuu-rw-phone-frame{border-radius:36px;padding:28px 8px 20px;position:relative;}
+.fiyuu-rw-phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:72px;height:20px;background:#111;border-radius:0 0 14px 14px;z-index:10;}
+.fiyuu-rw-phone-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:72px;height:4px;background:rgba(255,255,255,.25);border-radius:2px;}
+
+/* Desktop Frame */
+.fiyuu-rw-desktop-frame{border-radius:10px;border:1px solid #2a2a2e;}
+.fiyuu-rw-desktop-toolbar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#1a1a1d;border-bottom:1px solid #2a2a2e;}
+.fiyuu-rw-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
+.fiyuu-rw-url-bar{flex:1;margin-left:8px;background:#0f0f10;border:1px solid #2a2a2e;border-radius:6px;padding:3px 10px;font-size:10px;color:#6b7280;font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+
+@media(max-width:900px){.fiyuu-rw-viewport{flex-direction:column;align-items:center;padding:20px 12px;gap:24px;}}
+@media(max-width:600px){.fiyuu-rw-sidebar{width:56px;padding:10px 6px;gap:4px;}.fiyuu-rw-mode-btn{width:44px;font-size:8px;padding:7px 4px;}.fiyuu-rw-dev-btn{width:36px;height:36px;}.fiyuu-rw-viewport{padding:16px 8px;gap:16px;}}
+@media(max-width:480px){.fiyuu-rw-mode-btn span{display:none;}.fiyuu-rw-mode-btn{padding:8px;gap:0;width:40px;height:40px;}.fiyuu-rw-viewport{padding:10px 6px;}}
+  </style>`;
+}
+export function responsiveWrapperScript() {
+    return `<script>
+(function(){
+  if (window.__fiyuu_rw_open) return;
+  window.__fiyuu_rw_open = function(id) {
+    var el = document.getElementById(id + "-panel");
+    if (!el) return;
+    el.style.display = "flex";
+    document.body.style.overflow = "hidden";
+    var mode = window.innerWidth < 600 ? "mobile" : "both";
+    window.__fiyuu_rw_setmode(id, mode);
+    window.__fiyuu_rw_setdevice(id, "phone");
+  };
+  window.__fiyuu_rw_close = function(id) {
+    var el = document.getElementById(id + "-panel");
+    if (!el) return;
+    el.style.display = "none";
+    document.body.style.overflow = "";
+  };
+  window.__fiyuu_rw_setmode = function(id, mode) {
+    var mobile = document.getElementById(id + "-mobile-view");
+    var desktop = document.getElementById(id + "-desktop-view");
+    if (!mobile || !desktop) return;
+    mobile.style.display = (mode === "mobile" || mode === "both") ? "flex" : "none";
+    desktop.style.display = (mode === "desktop" || mode === "both") ? "flex" : "none";
+    var panel = document.getElementById(id + "-panel");
+    if (!panel) return;
+    panel.querySelectorAll(".fiyuu-rw-mode-btn").forEach(function(btn) {
+      btn.classList.toggle("active", btn.getAttribute("data-mode") === mode);
+    });
+  };
+  window.__fiyuu_rw_setdevice = function(id, device) {
+    var panel = document.getElementById(id + "-panel");
+    if (!panel) return;
+    panel.querySelectorAll(".fiyuu-rw-dev-btn").forEach(function(btn) {
+      btn.classList.toggle("active", btn.getAttribute("data-device") === device);
+    });
+    var mobileView = document.getElementById(id + "-mobile-view");
+    if (mobileView) {
+      var screen = mobileView.querySelector(".fiyuu-rw-device-screen");
+      var wrapper = mobileView.querySelector(".fiyuu-rw-screen-wrapper");
+      var sizes = { phone: { w: 390, h: 844, s: 0.72 }, tablet: { w: 768, h: 1024, s: 0.56 }, watch: { w: 200, h: 240, s: 0.85 }, desktop: { w: 1280, h: 800, s: 0.52 } };
+      var size = sizes[device] || sizes.phone;
+      if (screen) {
+        screen.style.width = size.w + "px";
+        screen.style.height = size.h + "px";
+        screen.style.transform = "scale(" + size.s + ")";
+      }
+      if (wrapper) {
+        wrapper.style.width = Math.round(size.w * size.s) + "px";
+        wrapper.style.height = Math.round(size.h * size.s) + "px";
+      }
+      var frame = mobileView.querySelector(".fiyuu-rw-device-frame");
+      if (frame) {
+        if (device === "tablet" || device === "desktop") {
+          frame.className = "fiyuu-rw-device-frame fiyuu-rw-desktop-frame";
+          var notch = frame.querySelector(".fiyuu-rw-phone-notch");
+          if (notch) notch.style.display = "none";
+          var home = frame.querySelector(".fiyuu-rw-phone-home");
+          if (home) home.style.display = "none";
+          if (!frame.querySelector(".fiyuu-rw-desktop-toolbar")) {
+            var tb = document.createElement("div");
+            tb.className = "fiyuu-rw-desktop-toolbar";
+            tb.innerHTML = '<span class="fiyuu-rw-dot" style="background:#FF5F57;"></span><span class="fiyuu-rw-dot" style="background:#FEBC2E;"></span><span class="fiyuu-rw-dot" style="background:#28C840;"></span>';
+            frame.insertBefore(tb, frame.firstChild);
+          }
+        } else {
+          frame.className = "fiyuu-rw-device-frame fiyuu-rw-phone-frame";
+          var notch2 = frame.querySelector(".fiyuu-rw-phone-notch");
+          if (notch2) notch2.style.display = "";
+          var home2 = frame.querySelector(".fiyuu-rw-phone-home");
+          if (home2) home2.style.display = "";
+          var dtb = frame.querySelector(".fiyuu-rw-desktop-toolbar");
+          if (dtb) dtb.remove();
+        }
+      }
+    }
+  };
+})();
+</script>`;
+}

package/src/responsive.d.ts

@@ -0,0 +1,15 @@
+export declare const BREAKPOINTS: {
+    readonly xs: 480;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+};
+export type BreakpointName = keyof typeof BREAKPOINTS;
+export declare function mediaUp(name: BreakpointName, css: string): string;
+export declare function mediaDown(name: BreakpointName, css: string): string;
+export declare function mediaBetween(min: BreakpointName, max: BreakpointName, css: string): string;
+export declare function fluid(minSizePx: number, maxSizePx: number, minViewportPx?: number, maxViewportPx?: number): string;
+export declare function responsiveSizes(config: Partial<Record<BreakpointName, string>>, fallback?: string): string;
+export declare function responsiveStyle(selector: string, baseCss: string, overrides: Partial<Record<BreakpointName, string>>): string;