globalThis.process ??= {}; globalThis.process.env ??= {};
import { s as ssr, e as escape, a as createComponent, b as ssrHydrationKey, d as ssrStyleProperty, S as Show, f as createSignal, g as ssrAttribute, D as Dynamic } from './_@astro-renderers_DpxbEuk7.mjs';

var _tmpl$$9 = ["<div", ' style="', '">', "</div>"], _tmpl$2$9 = ["<div", ' style="', '"><div style="', '">', "</div><!--$-->", "<!--/--></div>"];
function Clock(props) {
  const [time] = createSignal("");
  return ssr(_tmpl$2$9, ssrHydrationKey(), ssrStyleProperty("border:", "1px solid var(--border)") + ssrStyleProperty(";padding:", "1rem") + ssrStyleProperty(";width:", "100%") + ssrStyleProperty(";height:", "100%") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";display:", "flex") + ssrStyleProperty(";flex-direction:", "column") + ssrStyleProperty(";justify-content:", "center") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";background:", "var(--bg, #fff)"), ssrStyleProperty("font-size:", "clamp(0.8rem, 3.5vw + 0.5vh, 2.5rem)") + ssrStyleProperty(";font-weight:", "bold") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";word-break:", "break-word") + ssrStyleProperty(";line-height:", "1.2"), escape(time()), escape(createComponent(Show, {
    get when() {
      return props.settings.showLabel;
    },
    get children() {
      return ssr(_tmpl$$9, ssrHydrationKey(), ssrStyleProperty("margin-top:", "0.5rem") + ssrStyleProperty(";color:", "var(--gray)") + ssrStyleProperty(";font-size:", "clamp(0.6rem, 1.5vw + 0.5vh, 1rem)") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";line-height:", "1.4"), escape(props.settings.label) || "Current Time");
    }
  })));
}
const clockSchema = {
  name: "Clock",
  description: "Display current time and date",
  settingsSchema: {
    format: {
      type: "select",
      label: "Time Format",
      default: "24h",
      options: ["12h", "24h"],
      required: true
    },
    timeFormat: {
      type: "select",
      label: "Display Format",
      default: "HH:MM:SS",
      options: ["HH:MM:SS", "HH:MM", "HH only"]
    },
    showDate: {
      type: "boolean",
      label: "Show Date",
      default: true
    },
    showLabel: {
      type: "boolean",
      label: "Show Label",
      default: true
    },
    label: {
      type: "string",
      label: "Custom Label",
      default: "Current Time"
    },
    refreshRate: {
      type: "number",
      label: "Refresh Rate (seconds)",
      default: 1
    }
  }
};

var _tmpl$$8 = ["<div", ' style="', '"><div style="', '">', '</div><div style="', '">', "</div><!--$-->", "<!--/--></div>"], _tmpl$2$8 = ["<div", ' style="', '">', "</div>"];
const priceCache = /* @__PURE__ */ new Map();
const errorCache = /* @__PURE__ */ new Map();
function CryptoPrice(props) {
  const widgetKey = `${props.settings.symbol}-${props.settings.currency}`;
  const [price] = createSignal(priceCache.get(widgetKey) || "Loading...");
  const [error] = createSignal(errorCache.get(widgetKey) || "");
  return ssr(_tmpl$$8, ssrHydrationKey(), ssrStyleProperty("border:", "1px solid var(--border)") + ssrStyleProperty(";padding:", "1rem") + ssrStyleProperty(";width:", "100%") + ssrStyleProperty(";height:", "100%") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";display:", "flex") + ssrStyleProperty(";flex-direction:", "column") + ssrStyleProperty(";justify-content:", "center") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";background:", "var(--bg, #fff)"), ssrStyleProperty("margin-bottom:", "0.5rem") + ssrStyleProperty(";font-weight:", "bold") + ssrStyleProperty(";font-size:", "clamp(0.7rem, 2vw + 0.5vh, 1.5rem)") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";line-height:", "1.3"), escape(props.settings.symbol) || "BTC", ssrStyleProperty("font-size:", "clamp(0.8rem, 3.5vw + 0.5vh, 2.5rem)") + ssrStyleProperty(";font-weight:", "bold") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";word-break:", "break-word") + ssrStyleProperty(";line-height:", "1.2"), escape(error()) || escape(price()), props.settings.showLabel && ssr(_tmpl$2$8, ssrHydrationKey(), ssrStyleProperty("margin-top:", "0.5rem") + ssrStyleProperty(";color:", "var(--gray)") + ssrStyleProperty(";font-size:", "clamp(0.6rem, 1.5vw + 0.5vh, 1rem)") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";line-height:", "1.4"), escape(props.settings.label) || "Price"));
}
const cryptoPriceSchema = {
  name: "Crypto Price",
  description: "Display cryptocurrency price from CoinGecko API",
  settingsSchema: {
    symbol: {
      type: "string",
      label: "Crypto Symbol (e.g., bitcoin, ethereum)",
      default: "bitcoin",
      required: true
    },
    currency: {
      type: "string",
      label: "Currency (e.g., USD, EUR)",
      default: "USD",
      required: true
    },
    refreshIntervalValue: {
      type: "number",
      label: "Refresh Interval",
      default: 1,
      required: true
    },
    refreshIntervalUnit: {
      type: "select",
      label: "Unit",
      options: ["seconds", "minutes", "hours", "days"],
      default: "minutes",
      required: true
    },
    showLabel: {
      type: "boolean",
      label: "Show Label",
      default: true
    },
    label: {
      type: "string",
      label: "Custom Label",
      default: "Price"
    }
  }
};

var _tmpl$$7 = ["<div", ' style="', '">', "</div>"], _tmpl$2$7 = ["<div", ' style="', '"><!--$-->', "<!--/-->°<!--$-->", "<!--/--></div>"], _tmpl$3$2 = ["<div", ' style="', '"><div>💧 <!--$-->', "<!--/-->%</div><div>💨 <!--$-->", "<!--/--> m/s</div></div>"], _tmpl$4$1 = ["<div", ' style="', '"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"];
function Weather(props) {
  const [weather] = createSignal(null);
  const [error] = createSignal("");
  return ssr(_tmpl$4$1, ssrHydrationKey(), ssrStyleProperty("border:", "1px solid var(--border)") + ssrStyleProperty(";padding:", "1rem") + ssrStyleProperty(";width:", "100%") + ssrStyleProperty(";height:", "100%") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";display:", "flex") + ssrStyleProperty(";flex-direction:", "column") + ssrStyleProperty(";justify-content:", "center") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";background:", "var(--bg, #fff)"), escape(createComponent(Show, {
    get when() {
      return error();
    },
    get children() {
      return ssr(_tmpl$$7, ssrHydrationKey(), ssrStyleProperty("color:", "#ff4444") + ssrStyleProperty(";font-size:", "clamp(0.7rem, 2vw + 0.5vh, 1rem)") + ssrStyleProperty(";text-align:", "center"), escape(error()));
    }
  })), escape(createComponent(Show, {
    get when() {
      return !error() && weather();
    },
    get children() {
      return [ssr(_tmpl$$7, ssrHydrationKey(), ssrStyleProperty("font-size:", "clamp(0.7rem, 2vw + 0.5vh, 1.2rem)") + ssrStyleProperty(";font-weight:", "bold") + ssrStyleProperty(";margin-bottom:", "0.5rem") + ssrStyleProperty(";text-align:", "center"), props.settings.lat && props.settings.lon ? `${escape(props.settings.lat)}, ${escape(props.settings.lon)}` : escape(props.settings.city) || "London"), ssr(_tmpl$2$7, ssrHydrationKey(), ssrStyleProperty("font-size:", "clamp(1.5rem, 5vw + 1vh, 3.5rem)") + ssrStyleProperty(";font-weight:", "bold") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";line-height:", "1.1"), escape(weather()?.temp), props.settings.units === "metric" ? "C" : "F"), ssr(_tmpl$$7, ssrHydrationKey(), ssrStyleProperty("font-size:", "clamp(0.7rem, 1.8vw + 0.5vh, 1.1rem)") + ssrStyleProperty(";text-align:", "center") + ssrStyleProperty(";margin-top:", "0.3rem") + ssrStyleProperty(";text-transform:", "capitalize") + ssrStyleProperty(";color:", "var(--gray)"), escape(weather()?.description)), createComponent(Show, {
        get when() {
          return props.settings.showDetails;
        },
        get children() {
          return ssr(_tmpl$3$2, ssrHydrationKey(), ssrStyleProperty("display:", "flex") + ssrStyleProperty(";gap:", "1rem") + ssrStyleProperty(";margin-top:", "0.8rem") + ssrStyleProperty(";font-size:", "clamp(0.6rem, 1.5vw + 0.5vh, 0.9rem)") + ssrStyleProperty(";color:", "var(--gray)"), escape(weather()?.humidity), escape(weather()?.windSpeed));
        }
      })];
    }
  })));
}
const weatherSchema = {
  name: "Weather",
  description: "Display current weather from OpenWeatherMap API",
  settingsSchema: {
    city: {
      type: "string",
      label: "City Name",
      default: "London",
      required: false
    },
    lat: {
      type: "string",
      label: "Latitude (optional, overrides city)",
      default: "",
      required: false
    },
    lon: {
      type: "string",
      label: "Longitude (optional, overrides city)",
      default: "",
      required: false
    },
    apiKey: {
      type: "string",
      label: "OpenWeatherMap API Key",
      default: "",
      required: true
    },
    units: {
      type: "select",
      label: "Temperature Units",
      default: "metric",
      options: ["metric", "imperial"]
    },
    showDetails: {
      type: "boolean",
      label: "Show Humidity & Wind",
      default: true
    },
    refreshIntervalValue: {
      type: "number",
      label: "Refresh Interval",
      default: 10,
      required: true
    },
    refreshIntervalUnit: {
      type: "select",
      label: "Unit",
      options: ["seconds", "minutes", "hours", "days"],
      default: "minutes",
      required: true
    }
  }
};

var _tmpl$$6 = ["<div", ' style="', '"><div style="', '">Σ</div><div style="', '">', '</div><div style="', '">Stoic Wisdom</div></div>'], _tmpl$2$6 = ["<div", ' style="', '">', "</div>"], _tmpl$3$1 = ["<div", ' style="', '">"<!--$-->', '<!--/-->"</div>'], _tmpl$4 = ["<div", ' style="', '">— <!--$-->', "<!--/--></div>"];
const quoteCache = /* @__PURE__ */ new Map();
function StoicQuote(props) {
  const widgetKey = "stoic-quote";
  const initialQuote = quoteCache.get(widgetKey) || {
    text: "Loading wisdom...",
    author: ""
  };
  const [quote] = createSignal(initialQuote);
  const [error] = createSignal("");
  const [renderKey] = createSignal(0);
  const showAuthor = () => props.settings.showAuthor !== false;
  const fontSize = () => props.settings.fontSize || "medium";
  const getSizes = () => {
    const fontSizeMap = {
      small: {
        quote: "clamp(0.7rem, 1.5vw, 1.2rem)",
        author: "clamp(0.6rem, 1.2vw, 0.9rem)"
      },
      medium: {
        quote: "clamp(0.9rem, 2vw, 1.5rem)",
        author: "clamp(0.7rem, 1.5vw, 1.1rem)"
      },
      large: {
        quote: "clamp(1.1rem, 2.5vw, 2rem)",
        author: "clamp(0.8rem, 1.8vw, 1.3rem)"
      }
    };
    return fontSizeMap[fontSize()] || fontSizeMap.medium;
  };
  return ssr(_tmpl$$6, ssrHydrationKey() + ssrAttribute("data-render-key", escape(renderKey(), true), false), ssrStyleProperty("border:", "1px solid var(--border)") + ssrStyleProperty(";padding:", "1rem") + ssrStyleProperty(";width:", "100%") + ssrStyleProperty(";height:", "100%") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";display:", "flex") + ssrStyleProperty(";flex-direction:", "column") + ssrStyleProperty(";justify-content:", "center") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";background:", "var(--bg, #fff)") + ssrStyleProperty(";position:", "relative"), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";top:", "0.5rem") + ssrStyleProperty(";left:", "0.5rem") + ssrStyleProperty(";font-size:", "1.5rem") + ssrStyleProperty(";line-height:", "1") + ssrStyleProperty(";color:", "var(--border, #ccc)") + ssrStyleProperty(";font-family:", "Georgia, serif") + ssrStyleProperty(";font-weight:", "bold") + ssrStyleProperty(";opacity:", "0.3"), ssrStyleProperty("text-align:", "center") + ssrStyleProperty(";max-width:", "95%"), error() ? ssr(_tmpl$2$6, ssrHydrationKey(), ssrStyleProperty("color:", "var(--gray, #999)"), escape(error())) : escape([ssr(_tmpl$3$1, ssrHydrationKey(), ssrStyleProperty("font-size:", escape(getSizes().quote, true)) + ssrStyleProperty(";line-height:", "1.4") + ssrStyleProperty(";font-style:", "italic"), escape(quote().text)), showAuthor() && quote().author && ssr(_tmpl$4, ssrHydrationKey(), ssrStyleProperty("margin-top:", "0.5rem") + ssrStyleProperty(";font-size:", escape(getSizes().author, true)) + ssrStyleProperty(";color:", "var(--gray, #666)") + ssrStyleProperty(";font-weight:", "500"), escape(quote().author))]), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";bottom:", "8px") + ssrStyleProperty(";left:", "8px") + ssrStyleProperty(";font-size:", "0.7rem") + ssrStyleProperty(";color:", "var(--gray, #999)") + ssrStyleProperty(";text-transform:", "uppercase") + ssrStyleProperty(";letter-spacing:", "0.05em") + ssrStyleProperty(";opacity:", "0.5"));
}
const stoicQuoteSchema = {
  name: "Stoic Quote",
  description: "Display stoic wisdom from Marcus Aurelius, Seneca, and Epictetus",
  settingsSchema: {
    fontSize: {
      type: "select",
      label: "Font Size",
      options: ["small", "medium", "large"],
      default: "medium"
    },
    showAuthor: {
      type: "boolean",
      label: "Show Author",
      default: true
    },
    refreshIntervalValue: {
      type: "number",
      label: "Refresh Interval",
      default: 1,
      required: true
    },
    refreshIntervalUnit: {
      type: "select",
      label: "Unit",
      options: ["seconds", "minutes", "hours", "days"],
      default: "hours",
      required: true
    }
  }
};

const widgetRegistry = {
  "crypto-price": {
    schema: cryptoPriceSchema,
    Component: CryptoPrice
  },
  clock: {
    schema: clockSchema,
    Component: Clock
  },
  weather: {
    schema: weatherSchema,
    Component: Weather
  },
  "stoic-quote": {
    schema: stoicQuoteSchema,
    Component: StoicQuote
  }
};
function getWidget(type) {
  return widgetRegistry[type];
}

var _tmpl$$5 = ["<div", ' style="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><div style="', '">', "</div></div>"], _tmpl$2$5 = ["<button", ' style="', '">×</button>'], _tmpl$3 = ["<div", ' class="resize-handle" style="', '"></div>'];
function WidgetRenderer(props) {
  const widgetDef = getWidget(props.config.type);
  const [isDragging] = createSignal(false);
  const [isResizing] = createSignal(false);
  const size = () => props.config.size || {
    width: 200,
    height: 150
  };
  return createComponent(Show, {
    when: widgetDef,
    children: (widget) => ssr(_tmpl$$5, ssrHydrationKey() + ssrAttribute("data-widget-id", escape(props.config.id, true), false), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";width:", `${escape(size().width, true)}px`) + ssrStyleProperty(";height:", `${escape(size().height, true)}px`) + ssrStyleProperty(";cursor:", props.locked ? "default" : isDragging() ? "grabbing" : "grab") + ssrStyleProperty(";user-select:", "none") + ssrStyleProperty(";transition:", isDragging() || isResizing() ? "none" : "box-shadow 0.2s") + ssrStyleProperty(";box-shadow:", isDragging() || isResizing() ? "0 8px 16px rgba(0,0,0,0.2)" : "0 2px 4px rgba(0,0,0,0.1)") + ssrStyleProperty(";z-index:", isDragging() || isResizing() ? "100" : "1"), !props.locked && props.onRemove && ssr(_tmpl$2$5, ssrHydrationKey(), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";top:", "-8px") + ssrStyleProperty(";right:", "-8px") + ssrStyleProperty(";z-index:", "10") + ssrStyleProperty(";padding:", "0") + ssrStyleProperty(";font-size:", "1rem") + ssrStyleProperty(";background:", "#ff4444") + ssrStyleProperty(";color:", "white") + ssrStyleProperty(";border:", "none") + ssrStyleProperty(";border-radius:", "50%") + ssrStyleProperty(";cursor:", "pointer") + ssrStyleProperty(";width:", "24px") + ssrStyleProperty(";height:", "24px") + ssrStyleProperty(";display:", "flex") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";justify-content:", "center") + ssrStyleProperty(";font-weight:", "bold")), !props.locked && (!props.gridCells || props.gridCells.length === 0) && ssr(_tmpl$3, ssrHydrationKey(), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";bottom:", "0") + ssrStyleProperty(";right:", "0") + ssrStyleProperty(";width:", "20px") + ssrStyleProperty(";height:", "20px") + ssrStyleProperty(";cursor:", "nwse-resize") + ssrStyleProperty(";z-index:", "10") + ssrStyleProperty(";background:", "linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.2) 50%)") + ssrStyleProperty(";border-bottom-right-radius:", "4px")), ssrStyleProperty("width:", "100%") + ssrStyleProperty(";height:", "100%") + ssrStyleProperty(";overflow:", "auto"), escape(createComponent(Dynamic, {
      get component() {
        return widget().Component;
      },
      get settings() {
        return props.config.settings;
      }
    })))
  });
}

var _tmpl$$4 = ["<div", ' style="', '">', "</div>"], _tmpl$2$4 = ["<div", ' style="', '"></div>'];
const simpleGridTemplate = {
  id: "simple",
  name: "Simple 2x2 Grid",
  description: "Basic 2x2 grid layout",
  width: 800,
  height: 600,
  background: "#1a1a1a",
  cells: [{
    id: "cell-1",
    x: 10,
    y: 10,
    width: 385,
    height: 285
  }, {
    id: "cell-2",
    x: 405,
    y: 10,
    width: 385,
    height: 285
  }, {
    id: "cell-3",
    x: 10,
    y: 305,
    width: 385,
    height: 285
  }, {
    id: "cell-4",
    x: 405,
    y: 305,
    width: 385,
    height: 285
  }]
};
function SimpleGrid() {
  return ssr(_tmpl$$4, ssrHydrationKey(), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";width:", `${escape(simpleGridTemplate.width, true)}px`) + ssrStyleProperty(";height:", `${escape(simpleGridTemplate.height, true)}px`) + ssrStyleProperty(";background:", escape(simpleGridTemplate.background, true)) + ssrStyleProperty(";pointer-events:", "none"), escape(simpleGridTemplate.cells.map((cell) => ssr(_tmpl$2$4, ssrHydrationKey() + ssrAttribute("data-grid-cell", escape(cell.id, true), false), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";left:", `${escape(cell.x, true)}px`) + ssrStyleProperty(";top:", `${escape(cell.y, true)}px`) + ssrStyleProperty(";width:", `${escape(cell.width, true)}px`) + ssrStyleProperty(";height:", `${escape(cell.height, true)}px`) + ssrStyleProperty(";border:", "2px dashed rgba(255, 255, 255, 0.2)") + ssrStyleProperty(";border-radius:", "12px") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";background:", "rgba(255, 255, 255, 0.03)")))));
}

var _tmpl$$3 = ["<div", ' style="', '">', "</div>"], _tmpl$2$3 = ["<div", ' style="', '"></div>'];
const threeColumnGridTemplate = {
  id: "threeColumn",
  name: "Three Column Layout",
  description: "Sidebar, main content, and right panel",
  width: 1200,
  height: 800,
  background: "#1a1a1a",
  cells: [
    // Left sidebar - narrow
    {
      id: "sidebar-left",
      x: 10,
      y: 10,
      width: 200,
      height: 780
    },
    // Main content area - wide
    {
      id: "main-top",
      x: 220,
      y: 10,
      width: 760,
      height: 380
    },
    {
      id: "main-bottom-left",
      x: 220,
      y: 400,
      width: 370,
      height: 390
    },
    {
      id: "main-bottom-right",
      x: 600,
      y: 400,
      width: 380,
      height: 390
    },
    // Right panel - medium
    {
      id: "panel-top",
      x: 990,
      y: 10,
      width: 200,
      height: 380
    },
    {
      id: "panel-bottom",
      x: 990,
      y: 400,
      width: 200,
      height: 390
    }
  ]
};
function ThreeColumnGrid() {
  return ssr(_tmpl$$3, ssrHydrationKey(), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";width:", `${escape(threeColumnGridTemplate.width, true)}px`) + ssrStyleProperty(";height:", `${escape(threeColumnGridTemplate.height, true)}px`) + ssrStyleProperty(";background:", escape(threeColumnGridTemplate.background, true)) + ssrStyleProperty(";pointer-events:", "none"), escape(threeColumnGridTemplate.cells.map((cell) => ssr(_tmpl$2$3, ssrHydrationKey() + ssrAttribute("data-grid-cell", escape(cell.id, true), false), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";left:", `${escape(cell.x, true)}px`) + ssrStyleProperty(";top:", `${escape(cell.y, true)}px`) + ssrStyleProperty(";width:", `${escape(cell.width, true)}px`) + ssrStyleProperty(";height:", `${escape(cell.height, true)}px`) + ssrStyleProperty(";border:", "2px dashed rgba(255, 255, 255, 0.2)") + ssrStyleProperty(";border-radius:", "12px") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";background:", "rgba(255, 255, 255, 0.03)")))));
}

var _tmpl$$2 = ["<div", ' style="', '">', "</div>"], _tmpl$2$2 = ["<div", ' style="', '"></div>'];
const dashboardGridTemplate = {
  id: "dashboard",
  name: "Dashboard Layout",
  description: "Professional dashboard with header and mixed sizes",
  width: 1400,
  height: 900,
  background: "#1a1a1a",
  cells: [
    // Header row - full width
    {
      id: "header",
      x: 10,
      y: 10,
      width: 1380,
      height: 120
    },
    // Main metrics row
    {
      id: "metric-1",
      x: 10,
      y: 140,
      width: 330,
      height: 200
    },
    {
      id: "metric-2",
      x: 350,
      y: 140,
      width: 330,
      height: 200
    },
    {
      id: "metric-3",
      x: 690,
      y: 140,
      width: 330,
      height: 200
    },
    {
      id: "metric-4",
      x: 1030,
      y: 140,
      width: 360,
      height: 200
    },
    // Middle row - large chart on left, two stacked on right
    {
      id: "chart-main",
      x: 10,
      y: 350,
      width: 880,
      height: 540
    },
    {
      id: "info-top",
      x: 900,
      y: 350,
      width: 490,
      height: 260
    },
    {
      id: "info-bottom",
      x: 900,
      y: 620,
      width: 490,
      height: 270
    }
  ]
};
function DashboardGrid() {
  return ssr(_tmpl$$2, ssrHydrationKey(), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";width:", `${escape(dashboardGridTemplate.width, true)}px`) + ssrStyleProperty(";height:", `${escape(dashboardGridTemplate.height, true)}px`) + ssrStyleProperty(";background:", escape(dashboardGridTemplate.background, true)) + ssrStyleProperty(";pointer-events:", "none"), escape(dashboardGridTemplate.cells.map((cell) => ssr(_tmpl$2$2, ssrHydrationKey() + ssrAttribute("data-grid-cell", escape(cell.id, true), false), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";left:", `${escape(cell.x, true)}px`) + ssrStyleProperty(";top:", `${escape(cell.y, true)}px`) + ssrStyleProperty(";width:", `${escape(cell.width, true)}px`) + ssrStyleProperty(";height:", `${escape(cell.height, true)}px`) + ssrStyleProperty(";border:", "2px dashed rgba(255, 255, 255, 0.2)") + ssrStyleProperty(";border-radius:", "12px") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";background:", "rgba(255, 255, 255, 0.03)")))));
}

var _tmpl$$1 = ["<div", ' style="', '">', "</div>"], _tmpl$2$1 = ["<div", ' style="', '"></div>'];
const sidebarContentGridTemplate = {
  id: "sidebarContent",
  name: "Sidebar Content Layout",
  description: "Two long sidebars with large content in middle",
  width: 1400,
  height: 900,
  background: "#1a1a1a",
  cells: [
    // Left sidebar - single long bar
    {
      id: "left-sidebar",
      x: 10,
      y: 10,
      width: 280,
      height: 880
    },
    // Main content - centered between sidebars
    // Math: left ends at 290, right starts at 1110
    // Available: 1110 - 290 = 820px
    // Center: 290 + (820 - 800)/2 = 300
    {
      id: "main-content",
      x: 300,
      y: 10,
      width: 800,
      height: 880
    },
    // Right sidebar - single long bar
    {
      id: "right-sidebar",
      x: 1110,
      y: 10,
      width: 280,
      height: 880
    }
  ]
};
function SidebarContentGrid() {
  return ssr(_tmpl$$1, ssrHydrationKey(), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";width:", `${escape(sidebarContentGridTemplate.width, true)}px`) + ssrStyleProperty(";height:", `${escape(sidebarContentGridTemplate.height, true)}px`) + ssrStyleProperty(";background:", escape(sidebarContentGridTemplate.background, true)) + ssrStyleProperty(";pointer-events:", "none"), escape(sidebarContentGridTemplate.cells.map((cell) => ssr(_tmpl$2$1, ssrHydrationKey() + ssrAttribute("data-grid-cell", escape(cell.id, true), false), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";left:", `${escape(cell.x, true)}px`) + ssrStyleProperty(";top:", `${escape(cell.y, true)}px`) + ssrStyleProperty(";width:", `${escape(cell.width, true)}px`) + ssrStyleProperty(";height:", `${escape(cell.height, true)}px`) + ssrStyleProperty(";border:", "2px dashed rgba(255, 255, 255, 0.2)") + ssrStyleProperty(";border-radius:", "12px") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";background:", "rgba(255, 255, 255, 0.03)")))));
}

var _tmpl$ = ["<div", ' style="', '">', "</div>"], _tmpl$2 = ["<div", ' style="', '"></div>'];
const centeredFocusGridTemplate = {
  id: "centeredFocus",
  name: "Centered Focus Layout",
  description: "2 center items with left sidebar boxes and tall right panel",
  width: 1520,
  height: 760,
  background: "#1a1a1a",
  cells: [
    // Left sidebar - 2 stacked boxes
    {
      id: "left-top",
      x: 10,
      y: 10,
      width: 390,
      height: 340
    },
    {
      id: "left-bottom",
      x: 10,
      y: 360,
      width: 390,
      height: 390
    },
    // Center - 2 items (short wide on top, larger below)
    {
      id: "center-top",
      x: 410,
      y: 10,
      width: 760,
      height: 250
    },
    {
      id: "center-bottom",
      x: 410,
      y: 270,
      width: 760,
      height: 480
    },
    // Right sidebar - single tall item
    {
      id: "right-tall",
      x: 1180,
      y: 10,
      width: 330,
      height: 740
    }
  ]
};
function CenteredFocusGrid() {
  return ssr(_tmpl$, ssrHydrationKey(), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";width:", `${escape(centeredFocusGridTemplate.width, true)}px`) + ssrStyleProperty(";height:", `${escape(centeredFocusGridTemplate.height, true)}px`) + ssrStyleProperty(";background:", escape(centeredFocusGridTemplate.background, true)) + ssrStyleProperty(";pointer-events:", "none"), escape(centeredFocusGridTemplate.cells.map((cell) => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("data-grid-cell", escape(cell.id, true), false), ssrStyleProperty("position:", "absolute") + ssrStyleProperty(";left:", `${escape(cell.x, true)}px`) + ssrStyleProperty(";top:", `${escape(cell.y, true)}px`) + ssrStyleProperty(";width:", `${escape(cell.width, true)}px`) + ssrStyleProperty(";height:", `${escape(cell.height, true)}px`) + ssrStyleProperty(";border:", "2px dashed rgba(255, 255, 255, 0.2)") + ssrStyleProperty(";border-radius:", "12px") + ssrStyleProperty(";box-sizing:", "border-box") + ssrStyleProperty(";background:", "rgba(255, 255, 255, 0.03)")))));
}

const gridRegistry = {
  simple: {
    template: simpleGridTemplate,
    Component: SimpleGrid
  },
  threeColumn: {
    template: threeColumnGridTemplate,
    Component: ThreeColumnGrid
  },
  dashboard: {
    template: dashboardGridTemplate,
    Component: DashboardGrid
  },
  sidebarContent: {
    template: sidebarContentGridTemplate,
    Component: SidebarContentGrid
  },
  centeredFocus: {
    template: centeredFocusGridTemplate,
    Component: CenteredFocusGrid
  }
};
function getGrid(id) {
  return gridRegistry[id];
}
function getAllGrids() {
  return Object.values(gridRegistry);
}

export { WidgetRenderer as W, getAllGrids as a, getGrid as g, widgetRegistry as w };