@fiyuu/core 0.1.0 → 0.2.0

package/src/reactive.ts

@@ -0,0 +1,229 @@
+import { html, raw, unsafeHtml, type ComponentProps, type RawHtml } from "./template.js";
+
+export type Signal<T> = {
+  get(): T;
+  set(next: T): void;
+  subscribe(fn: () => void): () => void;
+};
+
+type RenderBlock = string | (() => string);
+
+export function createSignal<T>(initial: T): Signal<T> {
+  let value = initial;
+  const listeners = new Set<() => void>();
+
+  return {
+    get() {
+      return value;
+    },
+    set(next: T) {
+      if (value === next) return;
+      value = next;
+      for (const fn of listeners) fn();
+    },
+    subscribe(fn: () => void) {
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    },
+  };
+}
+
+export function when(condition: unknown, content: string | (() => string)): string {
+  if (!condition) return "";
+  return typeof content === "function" ? content() : content;
+}
+
+export type ElseBranch = {
+  kind: "Else";
+  render: () => string;
+};
+
+export function Else(content: RenderBlock): ElseBranch {
+  return {
+    kind: "Else",
+    render: () => renderBlock(content),
+  };
+}
+
+export function If(input: {
+  condition: unknown;
+  then: RenderBlock;
+  else?: RenderBlock | ElseBranch;
+}): string {
+  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: unknown): value is ElseBranch {
+  return Boolean(
+    value &&
+      typeof value === "object" &&
+      "kind" in value &&
+      "render" in value &&
+      (value as { kind?: unknown }).kind === "Else" &&
+      typeof (value as { render?: unknown }).render === "function",
+  );
+}
+
+function renderBlock(block?: RenderBlock): string {
+  if (block == null) {
+    return "";
+  }
+
+  if (typeof block === "function") {
+    return block();
+  }
+
+  return block;
+}
+
+export function each<T>(
+  items: T[] | readonly T[],
+  renderItem: (item: T, index: number) => string,
+): string {
+  if (!items || items.length === 0) return "";
+  return items.map(renderItem).join("");
+}
+
+export function For<T>(input: {
+  each: readonly T[] | T[];
+  render: (item: T, index: number) => string;
+  empty?: RenderBlock;
+}): string {
+  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<string, (event: Event) => void>();
+
+export function onEvent(handler: (event: Event) => void): string {
+  const id = `fiyuu_evt_${_eventId++}`;
+  _eventRegistry.set(id, handler);
+  return id;
+}
+
+export function getEventHandler(id: string): ((event: Event) => void) | undefined {
+  return _eventRegistry.get(id);
+}
+
+export function clearEventRegistry(): void {
+  _eventRegistry.clear();
+  _eventId = 0;
+}
+
+export function mount(
+  root: HTMLElement,
+  render: () => string,
+  signals: Signal<unknown>[] = [],
+): () => void {
+  function update(): void {
+    root.innerHTML = render();
+    attachDeclarativeEvents(root);
+  }
+
+  update();
+
+  const unsubscribers = signals.map((s) => s.subscribe(update));
+  return () => {
+    unsubscribers.forEach((u) => u());
+    root.innerHTML = "";
+  };
+}
+
+function attachDeclarativeEvents(root: HTMLElement): void {
+  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 as [string, string];
+    const handler = _eventRegistry.get(handlerId);
+    if (handler) {
+      el.addEventListener(eventName, handler);
+    }
+  }
+}
+
+export function createFiyuuStore<T>(initialValue: T) {
+  const signal = createSignal(initialValue);
+  return {
+    get: signal.get,
+    set: signal.set,
+    subscribe: signal.subscribe,
+  };
+}
+
+export function createFlatStore<T>(initialValue: T) {
+  return createFiyuuStore(initialValue);
+}
+
+let scopedStyleCounter = 0;
+
+function toScopeSlug(value: string): string {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 24) || "scope";
+}
+
+export function scopedStyles(name: string, css: string): { scopeClass: string; style: RawHtml } {
+  scopedStyleCounter += 1;
+  const scopeClass = `fx-${toScopeSlug(name)}-${scopedStyleCounter}`;
+  const scopedCss = css.replaceAll(":scope", `.${scopeClass}`);
+
+  return {
+    scopeClass,
+    style: raw(`<style>${scopedCss}</style>`),
+  };
+}
+
+function escapeSingleQuotes(value: string): string {
+  return value.replaceAll("\\", "\\\\").replaceAll("'", "\\'");
+}
+
+export function island(options: {
+  id: string;
+  placeholder: string;
+  bootCode: string;
+  trigger?: "click" | "hover" | "visible";
+}): string {
+  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: string, content: string): string {
+  return html`<section data-fiyuu-debug-tag="${name}">${raw(content)}</section>`;
+}
+
+export function humanDebugOverlay(): RawHtml {
+  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>`);
+}
+
+export type FiyuuStore<T> = ReturnType<typeof createFiyuuStore<T>>;

package/src/{responsive-wrapper.js → responsive-wrapper.ts}

@@ -1,83 +1,125 @@
 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" },
+
+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;
+}
+
+const PRESETS: Record<BreakpointPreset, { maxWidth: number; padding: string; class: string }> = {
+  "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>',
-    },
+
+const DEVICES: Record<PreviewDevice, { width: number; height: number; label: string; icon: string; scale: number }> = {
+  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}`;
+
+export function responsiveWrapper(options: ResponsiveWrapperOptions): string {
+  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 getPaddingStyle(padding: string): string {
+  if (!padding || padding === "none") return "";
+  const map: Record<string, string> = { 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 generateId(): string {
+  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">
+
+function buildPreviewButton(wrapperId: string): string {
+  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;">
+
+function buildPreviewPanel(wrapperId: string, content: string, preset: string, defaultMode: PreviewMode): string {
+  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">
@@ -142,8 +184,9 @@ function buildPreviewPanel(wrapperId, content, preset, defaultMode) {
     </div>
   </div>`;
 }
-function buildPreviewStyles() {
-    return `<style id="fiyuu-rw-styles">
+
+function buildPreviewStyles(): string {
+  return `<style id="fiyuu-rw-styles">
 .fiyuu-responsive-wrapper{position:relative;width:100%;box-sizing:border-box;}
 
 /* Preview Button (FAB) */
@@ -202,8 +245,9 @@ function buildPreviewStyles() {
 @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>
+
+export function responsiveWrapperScript(): string {
+  return `<script>
 (function(){
   if (window.__fiyuu_rw_open) return;
   window.__fiyuu_rw_open = function(id) {

package/src/responsive.ts

@@ -0,0 +1,54 @@
+export const BREAKPOINTS = {
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+} as const;
+
+export type BreakpointName = keyof typeof BREAKPOINTS;
+
+export function mediaUp(name: BreakpointName, css: string): string {
+  return `@media (min-width:${BREAKPOINTS[name]}px){${css}}`;
+}
+
+export function mediaDown(name: BreakpointName, css: string): string {
+  return `@media (max-width:${BREAKPOINTS[name] - 0.02}px){${css}}`;
+}
+
+export function mediaBetween(min: BreakpointName, max: BreakpointName, css: string): string {
+  return `@media (min-width:${BREAKPOINTS[min]}px) and (max-width:${BREAKPOINTS[max] - 0.02}px){${css}}`;
+}
+
+export function fluid(minSizePx: number, maxSizePx: number, minViewportPx = 360, maxViewportPx = 1440): string {
+  if (maxViewportPx <= minViewportPx) {
+    throw new Error("fluid requires maxViewportPx to be larger than minViewportPx.");
+  }
+  const slope = ((maxSizePx - minSizePx) / (maxViewportPx - minViewportPx)) * 100;
+  const intercept = minSizePx - (slope / 100) * minViewportPx;
+  return `clamp(${minSizePx}px, ${intercept.toFixed(4)}px + ${slope.toFixed(4)}vw, ${maxSizePx}px)`;
+}
+
+export function responsiveSizes(config: Partial<Record<BreakpointName, string>>, fallback = "100vw"): string {
+  const ordered = Object.entries(BREAKPOINTS)
+    .sort((a, b) => b[1] - a[1])
+    .map(([name, width]) => {
+      const value = config[name as BreakpointName];
+      if (!value) return "";
+      return `(min-width: ${width}px) ${value}`;
+    })
+    .filter(Boolean);
+  ordered.push(fallback);
+  return ordered.join(", ");
+}
+
+export function responsiveStyle(selector: string, baseCss: string, overrides: Partial<Record<BreakpointName, string>>): string {
+  const blocks = [`${selector}{${baseCss}}`];
+  for (const [name] of Object.entries(BREAKPOINTS)) {
+    const css = overrides[name as BreakpointName];
+    if (!css) continue;
+    blocks.push(mediaUp(name as BreakpointName, `${selector}{${css}}`));
+  }
+  return `<style>${blocks.join("")}</style>`;
+}