elegance-js 2.0.17 → 2.0.19

package/dist/docs/docs/page-files/page.mjs

@@ -1,1206 +0,0 @@
-// src/internal/deprecate.ts
-var ShowDeprecationWarning = (msg) => {
-  console.warn("\x1B[31m", msg, "\x1B[0m");
-  console.trace("Stack Trace:");
-};
-
-// src/server/loadHook.ts
-var loadHook = (deps, fn, bind) => {
-  const stringFn = fn.toString();
-  const depsArray = (deps || []).map((dep) => ({
-    id: dep.id,
-    bind: dep.bind
-  }));
-  let dependencyString = "[";
-  for (const dep of depsArray) {
-    dependencyString += `{id:${dep.id}`;
-    if (dep.bind) dependencyString += `,bind:${dep.bind}`;
-    dependencyString += `},`;
-  }
-  dependencyString += "]";
-  const isAsync = fn.constructor.name === "AsyncFunction";
-  const wrapperFn = isAsync ? `async (state) => await (${stringFn})(state, ...state.getAll(${dependencyString}))` : `(state) => (${stringFn})(state, ...state.getAll(${dependencyString}))`;
-  globalThis.__SERVER_CURRENT_LOADHOOKS__.push({
-    fn: wrapperFn,
-    bind: bind || ""
-  });
-};
-var createLoadHook = (options) => {
-  ShowDeprecationWarning("WARNING: createLoadHook() is a deprecated function. Use loadHook() from elegance-js/loadHook instead.");
-  const stringFn = options.fn.toString();
-  const deps = (options.deps || []).map((dep) => ({
-    id: dep.id,
-    bind: dep.bind
-  }));
-  let dependencyString = "[";
-  for (const dep of deps) {
-    dependencyString += `{id:${dep.id}`;
-    if (dep.bind) dependencyString += `,bind:${dep.bind}`;
-    dependencyString += `},`;
-  }
-  dependencyString += "]";
-  const isAsync = options.fn.constructor.name === "AsyncFunction";
-  const wrapperFn = isAsync ? `async (state) => await (${stringFn})(state, ...state.getAll(${dependencyString}))` : `(state) => (${stringFn})(state, ...state.getAll(${dependencyString}))`;
-  globalThis.__SERVER_CURRENT_LOADHOOKS__.push({
-    fn: wrapperFn,
-    bind: options.bind || ""
-  });
-};
-
-// src/server/state.ts
-if (!globalThis.__SERVER_CURRENT_STATE_ID__) {
-  globalThis.__SERVER_CURRENT_STATE_ID__ = 1;
-}
-var eventListener = (dependencies, eventListener2) => {
-  const deps = dependencies.map((dep) => ({ id: dep.id, bind: dep.bind }));
-  let dependencyString = "[";
-  for (const dep of deps) {
-    dependencyString += `{id:${dep.id}`;
-    if (dep.bind) dependencyString += `,bind:${dep.bind}`;
-    dependencyString += `},`;
-  }
-  dependencyString += "]";
-  const value = {
-    id: __SERVER_CURRENT_STATE_ID__ += 1,
-    type: 1 /* STATE */,
-    value: new Function(
-      "state",
-      "event",
-      `(${eventListener2.toString()})(event, ...state.getAll(${dependencyString}))`
-    )
-  };
-  globalThis.__SERVER_CURRENT_STATE__.push(value);
-  return value;
-};
-
-// src/server/observe.ts
-var observe = (refs, update) => {
-  const returnValue = {
-    type: 2 /* OBSERVER */,
-    initialValues: refs.map((ref) => ref.value),
-    update,
-    refs: refs.map((ref) => ({
-      id: ref.id,
-      bind: ref.bind
-    }))
-  };
-  return returnValue;
-};
-
-// src/components/Link.ts
-loadHook(
-  [],
-  () => {
-    const anchors = Array.from(document.querySelectorAll("a[prefetch]"));
-    const elsToClear = [];
-    for (const anchor of anchors) {
-      const prefetch = anchor.getAttribute("prefetch");
-      const href = new URL(anchor.href);
-      switch (prefetch) {
-        case "load":
-          client.fetchPage(href);
-          break;
-        case "hover":
-          const fn = () => {
-            client.fetchPage(href);
-          };
-          anchor.addEventListener("mouseenter", fn);
-          elsToClear.push({
-            el: anchor,
-            fn
-          });
-          break;
-      }
-    }
-    return () => {
-      for (const listener of elsToClear) {
-        listener.el.removeEventListener("mouseenter", listener.fn);
-      }
-    };
-  }
-);
-var navigate = eventListener(
-  [],
-  (event) => {
-    const target = new URL(event.currentTarget.href);
-    const client2 = globalThis.client;
-    const sanitizedTarget = client2.sanitizePathname(target.pathname);
-    const sanitizedCurrent = client2.sanitizePathname(window.location.pathname);
-    if (sanitizedTarget === sanitizedCurrent) {
-      if (target.hash === window.location.hash) return event.preventDefault();
-      return;
-    }
-    event.preventDefault();
-    client2.navigateLocally(target.href);
-  }
-);
-var Link = (options, ...children) => {
-  if (!options.href) {
-    throw `Link elements must have a HREF attribute set.`;
-  }
-  if (!options.href.startsWith("/")) {
-    throw `Link elements may only navigate to local pages. "/"`;
-  }
-  return a(
-    {
-      ...options,
-      onClick: navigate
-    },
-    ...children
-  );
-};
-
-// src/docs/components/RootLayout.ts
-var RootLayout = (...children) => body(
-  {
-    class: "bg-background-900 text-text-50 font-inter select-none text-text-50"
-  },
-  ...children
-);
-
-// src/server/createState.ts
-if (!globalThis.__SERVER_CURRENT_STATE_ID__) {
-  globalThis.__SERVER_CURRENT_STATE_ID__ = 1;
-}
-var createState = (value, options) => {
-  ShowDeprecationWarning("WARNING: The createState() and function is deprecated. Please use state() instead, from elegance-js/state.");
-  const serverStateEntry = {
-    id: __SERVER_CURRENT_STATE_ID__ += 1,
-    value,
-    type: 1 /* STATE */,
-    bind: options?.bind
-  };
-  globalThis.__SERVER_CURRENT_STATE__.push(serverStateEntry);
-  return serverStateEntry;
-};
-var createEventListener = ({
-  eventListener: eventListener2,
-  dependencies = [],
-  params
-}) => {
-  ShowDeprecationWarning("WARNING: The createEventListener() and function is deprecated. Please use eventListener() instead, from elegance-js/state.");
-  const deps = dependencies.map((dep) => ({ id: dep.id, bind: dep.bind }));
-  let dependencyString = "[";
-  for (const dep of deps) {
-    dependencyString += `{id:${dep.id}`;
-    if (dep.bind) dependencyString += `,bind:${dep.bind}`;
-    dependencyString += `},`;
-  }
-  dependencyString += "]";
-  const value = {
-    id: __SERVER_CURRENT_STATE_ID__ += 1,
-    type: 1 /* STATE */,
-    value: new Function(
-      "state",
-      "event",
-      `(${eventListener2.toString()})({ event, ...${JSON.stringify(params || {})} }, ...state.getAll(${dependencyString}))`
-    )
-  };
-  globalThis.__SERVER_CURRENT_STATE__.push(value);
-  return value;
-};
-
-// src/docs/utils/MEGALEXER.ts
-var tokenize = (input) => {
-  const tokens = [];
-  const length = input.length;
-  let index = 0;
-  const keywords = /* @__PURE__ */ new Set([
-    "if",
-    "else",
-    "for",
-    "while",
-    "function",
-    "return",
-    "class",
-    "const",
-    "let",
-    "var",
-    "interface",
-    "extends",
-    "implements",
-    "export",
-    "import",
-    "from"
-  ]);
-  const operatorChars = /* @__PURE__ */ new Set([
-    "+",
-    "-",
-    "*",
-    "/",
-    "%",
-    "=",
-    ">",
-    "<",
-    "!",
-    "&",
-    "|",
-    "^",
-    "~",
-    "?",
-    ":"
-  ]);
-  const punctuationChars = /* @__PURE__ */ new Set([
-    ";",
-    ",",
-    ".",
-    "(",
-    ")",
-    "{",
-    "}",
-    "[",
-    "]"
-  ]);
-  const peek = (offset = 1) => index + offset < length ? input[index + offset] : "";
-  const readWhile = (predicate) => {
-    const start = index;
-    while (index < length && predicate(input[index])) {
-      index++;
-    }
-    return input.slice(start, index);
-  };
-  const readString = (quoteType) => {
-    let value = input[index++];
-    while (index < length && input[index] !== quoteType) {
-      if (input[index] === "\\") {
-        value += input[index++];
-        if (index < length) {
-          value += input[index++];
-        }
-      } else {
-        value += input[index++];
-      }
-    }
-    if (index < length) {
-      value += input[index++];
-    }
-    return value;
-  };
-  const readLineComment = () => {
-    const start = index;
-    index += 2;
-    while (index < length && input[index] !== "\n") {
-      index++;
-    }
-    return input.slice(start, index);
-  };
-  const readBlockComment = () => {
-    const start = index;
-    index += 2;
-    while (index < length && !(input[index] === "*" && peek() === "/")) {
-      index++;
-    }
-    if (index < length) {
-      index += 2;
-    }
-    return input.slice(start, index);
-  };
-  while (index < length) {
-    const char = input[index];
-    const startPos = index;
-    if (/\s/.test(char)) {
-      const value = readWhile((c) => /\s/.test(c));
-      tokens.push({ type: "" /* Whitespace */, value, position: startPos });
-      continue;
-    }
-    if (char === "/") {
-      if (peek() === "/") {
-        const value = readLineComment();
-        tokens.push({ type: "text-gray-400" /* Comment */, value, position: startPos });
-        continue;
-      } else if (peek() === "*") {
-        const value = readBlockComment();
-        tokens.push({ type: "text-gray-400" /* Comment */, value, position: startPos });
-        continue;
-      }
-    }
-    if (char === '"' || char === "'") {
-      const value = readString(char);
-      tokens.push({ type: "text-green-200" /* String */, value, position: startPos });
-      continue;
-    }
-    if (/\d/.test(char)) {
-      const value = readWhile((c) => /[\d\.]/.test(c));
-      tokens.push({ type: "text-blue-400" /* Number */, value, position: startPos });
-      continue;
-    }
-    if (/[a-zA-Z_$]/.test(char)) {
-      const value = readWhile((c) => /[a-zA-Z0-9_$]/.test(c));
-      let type = "text-orange-300" /* Identifier */;
-      if (keywords.has(value)) {
-        type = "text-amber-100 font-semibold" /* Keyword */;
-      } else if (value === "true" || value === "false") {
-        type = "text-blue-200" /* Boolean */;
-      }
-      let tempIndex = index;
-      while (tempIndex < length && /\s/.test(input[tempIndex])) {
-        tempIndex++;
-      }
-      if (tempIndex < length && input[tempIndex] === "(") {
-        type = "text-red-300" /* FunctionCall */;
-      }
-      tokens.push({ type, value, position: startPos });
-      continue;
-    }
-    if (operatorChars.has(char)) {
-      let value = char;
-      index++;
-      if (index < length && operatorChars.has(input[index])) {
-        value += input[index++];
-      }
-      tokens.push({ type: "" /* Operator */, value, position: startPos });
-      continue;
-    }
-    if (punctuationChars.has(char)) {
-      tokens.push({ type: "text-gray-400" /* Punctuation */, value: char, position: startPos });
-      index++;
-      continue;
-    }
-    tokens.push({ type: "" /* Unknown */, value: char, position: startPos });
-    index++;
-  }
-  return tokens;
-};
-var escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-var highlightCode = (code) => {
-  const tokens = tokenize(code);
-  return tokens.map(
-    (token) => token.type === "" /* Whitespace */ ? token.value : `<span class="${token.type}">${escapeHtml(token.value)}</span>`
-  ).join("");
-};
-
-// src/docs/docs/components/CodeBlock.ts
-var isToastShowing = createState(false);
-var toastTimeoutId = createState(0);
-var copyCode = createEventListener({
-  dependencies: [
-    isToastShowing,
-    toastTimeoutId
-  ],
-  eventListener: async (params, isToastShowing2, toastTimeoutId2) => {
-    const children = params.event.currentTarget.children;
-    const pre2 = children.item(0);
-    const content = pre2.innerText;
-    await navigator.clipboard.writeText(content);
-    if (toastTimeoutId2.value !== 0) clearTimeout(toastTimeoutId2.value);
-    isToastShowing2.value = true;
-    isToastShowing2.signal();
-    const timeoutId = window.setTimeout(() => {
-      isToastShowing2.value = false;
-      isToastShowing2.signal();
-    }, 3e3);
-    toastTimeoutId2.value = timeoutId;
-  }
-});
-var Toast = (bind) => {
-  createLoadHook({
-    bind,
-    deps: [
-      toastTimeoutId,
-      isToastShowing
-    ],
-    fn: (state2, toastTimeoutId2, isToastShowing2) => {
-      return () => {
-        clearTimeout(toastTimeoutId2.value);
-        isToastShowing2.value = false;
-        isToastShowing2.signal();
-      };
-    }
-  });
-  return div(
-    {
-      class: observe(
-        [isToastShowing],
-        (isShowing) => {
-          const modularClass = isShowing ? "right-8" : "right-0 translate-x-full";
-          return `fixed z-50 shadow-lg rounded-sm duration-200 bottom-4 px-4 py-2 w-max bg-background-950 ` + modularClass;
-        }
-      )
-    },
-    h1({
-      class: "font-mono uppercase"
-    }, "copied to clipboard")
-  );
-};
-var escapeHtml2 = (str) => {
-  const replaced = str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
-  return replaced;
-};
-var CodeBlock = (value, parse = true) => div(
-  {
-    class: `bg-background-950 hover:cursor-pointer p-2 rounded-sm
-            border-[1px] border-background-800 w-max my-3 max-w-full
-            overflow-scroll`,
-    onClick: copyCode
-  },
-  pre({}, parse ? highlightCode(value) : escapeHtml2(value))
-);
-
-// src/components/Breakpoint.ts
-var Breakpoint = (options, ...children) => {
-  process.emitWarning(
-    "Function Breakpoint() is deprecated. Prefer layout.ts files instead.",
-    { type: "DeprecationWarning" }
-  );
-  if (options.id === void 0) throw `Breakpoints must set a name attribute.`;
-  const id = options.id;
-  delete options.id;
-  return div(
-    {
-      bp: id,
-      ...options
-    },
-    ...children
-  );
-};
-
-// src/docs/docs/components/Header.ts
-var Header = () => header(
-  {
-    class: "sticky z-10 lef-0 right-0 top-0 text-text-50 font-inter overflow-hidden duration-300 border-b-[1px] border-b-transparent"
-  },
-  div(
-    {
-      class: "group duration-300 border-b-[1px] hover:border-b-transparent pointer-fine:hover:bg-accent-400 border-b-background-800 bg-background-950"
-    },
-    div(
-      {
-        class: "max-w-[1200px] w-full mx-auto flex pr-2 px-3 sm:px-5 sm:min-[calc(1200px+1rem)]:px-0"
-      },
-      div(
-        {
-          class: "flex min-w-max w-full items-center z-10"
-        },
-        Link(
-          {
-            href: "/",
-            class: "flex items-center gap-1 h-full"
-          },
-          p({
-            class: "font-niconne pointer-fine:group-hover:text-background-950 font-bold text-xl sm:text-3xl relative top-0 z-20 duration-300 pointer-events-none",
-            innerText: "Elegance"
-          }),
-          p({
-            innerText: "JS",
-            class: "font-bold pointer-fine:group-hover:text-background-950 relative top-0 text-xl sm:text-3xl z-10 text-accent-400 duration-300 pointer-events-none"
-          })
-        )
-      ),
-      div(
-        {
-          class: "flex py-2 sm:py-4 flex relative items-center justify-end w-full"
-        },
-        Link({
-          prefetch: "hover",
-          class: "z-10 text-xs uppercase font-bold px-4 py-2 rounded-full duration-300 bg-accent-400 text-primary-900 pointer-fine:group-hover:bg-background-950 pointer-fine:group-hover:text-accent-400 group-hover:hover:bg-text-50 group-hover:hover:text-background-950",
-          href: "/docs",
-          innerText: "Docs"
-        })
-      )
-    )
-  )
-);
-
-// src/server/layout.ts
-if (!globalThis.__SERVER_CURRENT_LAYOUT_ID__) globalThis.__SERVER_CURRENT_LAYOUT_ID__ = 1;
-var createLayout = (name) => {
-  process.emitWarning(
-    "Function createLayout() is deprecated. Prefer layout.ts files instead.",
-    { type: "DeprecationWarning" }
-  );
-  const layouts = globalThis.__SERVER_CURRENT_LAYOUTS__;
-  if (layouts.has(name)) return layouts.get(name);
-  const id = globalThis.__SERVER_CURRENT_LAYOUT_ID__ += 1;
-  layouts.set(name, id);
-  return id;
-};
-
-// src/docs/docs/components/DocsLayout.ts
-var docsLayoutId = createLayout("docs-layout");
-var secondsSpentOnPage = createState(0, {
-  bind: docsLayoutId
-});
-createLoadHook({
-  deps: [secondsSpentOnPage],
-  bind: docsLayoutId,
-  fn: (state2, time) => {
-    const storedTime = localStorage.getItem("time-on-page");
-    if (storedTime) {
-      time.value = parseInt(storedTime);
-      time.signal();
-    }
-    let intervalId;
-    intervalId = setInterval(() => {
-      time.value++;
-      time.signal();
-    }, 1e3);
-    const handlePageLeave = () => {
-      localStorage.setItem("time-on-page", `${time.value}`);
-    };
-    window.addEventListener("beforeunload", handlePageLeave);
-    return () => {
-      window.removeEventListener("beforeunload", handlePageLeave);
-      handlePageLeave();
-      clearInterval(intervalId);
-    };
-  }
-});
-var NavSubLink = (href, innerText) => Link({
-  class: "text-sm font-normal flex flex-col gap-2 opacity-80 hover:opacity-60 duration-200",
-  innerText,
-  href,
-  prefetch: "hover"
-});
-var Sidebar = () => nav(
-  {
-    class: "w-1/5"
-  },
-  ul(
-    {
-      class: "flex flex-col gap-4"
-    },
-    li(
-      {},
-      h2(
-        {
-          class: "text-lg font-semibold"
-        },
-        "Quick Nav"
-      ),
-      span(
-        {
-          class: "text-xs opacity-75"
-        },
-        "Elapsed: ",
-        span({
-          class: "font-mono",
-          innerText: observe(
-            [secondsSpentOnPage],
-            (secondsSpentOnPage2) => {
-              const hours = Math.floor(secondsSpentOnPage2 / 60 / 60);
-              const minutes = Math.floor(secondsSpentOnPage2 / 60 % 60);
-              const seconds = secondsSpentOnPage2 % 60;
-              return `${hours}h:${minutes}m:${seconds}s`;
-            }
-          )
-        })
-      )
-    ),
-    li(
-      {
-        class: "flex flex-col gap-1"
-      },
-      h4({
-        class: "text-base font-medium",
-        innerText: "The Basics"
-      }),
-      ol(
-        {
-          class: "pl-2 ml-2 border-l-[1px] border-background-600 flex flex-col gap-2"
-        },
-        NavSubLink(
-          "/docs/basics#preamble",
-          "Preamble"
-        ),
-        NavSubLink(
-          "/docs/basics#how-elegance-works",
-          "How Elegance Works"
-        ),
-        NavSubLink(
-          "/docs/basics#installation",
-          "Installation"
-        ),
-        NavSubLink(
-          "/docs/basics#your-first-page",
-          "Your First Page"
-        )
-      )
-    ),
-    li(
-      {
-        class: "flex flex-col gap-1"
-      },
-      h4({
-        class: "text-base font-medium",
-        innerText: "Concepts"
-      }),
-      ol(
-        {
-          class: "pl-2 ml-2 border-l-[1px] border-background-600 flex flex-col gap-2"
-        },
-        NavSubLink(
-          "/docs/concepts#elements",
-          "Elements"
-        ),
-        NavSubLink(
-          "/docs/concepts#object-attributes",
-          "Object Attributes"
-        )
-      )
-    ),
-    li(
-      {
-        class: "flex flex-col gap-1"
-      },
-      h4({
-        class: "text-base font-medium",
-        innerText: "Page Files"
-      }),
-      ol(
-        {
-          class: "pl-2 ml-2 border-l-[1px] border-background-600 flex flex-col gap-2"
-        },
-        NavSubLink(
-          "/docs/page-files#state",
-          "State"
-        ),
-        NavSubLink(
-          "/docs/page-files#load-hooks",
-          "Load Hooks"
-        ),
-        NavSubLink(
-          "/docs/page-files#event-listeners",
-          "Event Listeners"
-        ),
-        NavSubLink(
-          "/docs/page-files#layouts",
-          "Layouts"
-        )
-      )
-    ),
-    li(
-      {
-        class: "flex flex-col gap-1"
-      },
-      h4({
-        class: "text-base font-medium",
-        innerText: "Compilation"
-      }),
-      ol(
-        {
-          class: "pl-2 ml-2 border-l-[1px] border-background-600 flex flex-col gap-2"
-        },
-        NavSubLink(
-          "/docs/compilation#options",
-          "Compilation Options"
-        )
-      )
-    )
-  )
-);
-var DocsLayout = (...children) => div(
-  {
-    class: "h-screen overflow-clip"
-  },
-  Header(),
-  Toast(docsLayoutId),
-  div(
-    {
-      class: "max-w-[1200px] h-full w-full mx-auto flex pt-8 px-3 sm:px-5 sm:min-[calc(1200px+1rem)]:px-0"
-    },
-    Sidebar(),
-    article(
-      {
-        class: "h-full w-full overflow-y-scroll pb-[250px] pl-6 ml-6"
-      },
-      Breakpoint(
-        {
-          id: docsLayoutId
-        },
-        ...children
-      )
-    )
-  )
-);
-
-// src/docs/docs/components/Mono.ts
-var Mono = (text) => span({
-  class: "font-mono select-text"
-}, text);
-
-// src/docs/docs/components/PageHeading.ts
-var PageHeading = (title2, id) => h2({
-  class: "text-3xl font-semibold mb-4",
-  id,
-  innerText: title2
-});
-
-// src/docs/docs/components/Paragraph.ts
-var Paragraph = (...children) => p(
-  {
-    class: "opacity-80"
-  },
-  ...children
-);
-
-// src/docs/docs/components/Separator.ts
-var Separator = () => div({
-  class: "my-20"
-}, []);
-
-// src/docs/docs/components/SubHeading.ts
-var SubHeading = (content) => h3({
-  class: "text-lg font-medium mb-1",
-  innerText: content
-});
-
-// src/docs/docs/components/SubSeparator.ts
-var SubSeparator = () => div({
-  class: "my-10"
-}, []);
-
-// src/docs/docs/components/Subtext.ts
-var Subtext = (text) => span({
-  class: "text-xs opacity-60",
-  innerText: text
-});
-
-// src/docs/docs/page-files/page.ts
-var exampleLoadHook = `
-createLoadHook({
-    fn: () => {
-        console.log("The page has loaded!");
-    },
-});
-`;
-var exampleCleanupFunction = `
-const counter = createState(0);
-
-createLoadHook({
-    deps: [counter],
-    fn: (state, counter) => {
-        const timer = setInterval(() => {
-            counter.value++;
-            counter.signal();
-        }, 100);
-
-        return () => {
-            // Begone, timer!
-            clearInterval(timer);
-        }
-    },
-});
-`;
-var exampleLoadHookBind = `
-const layout = createLayout("epic-layout");
-
-createLoadHook({
-    bind: layout,
-    fn: () => {
-        alert("epic layout was just rendered")
-
-        return () => {
-            alert ("epic layout is no longer with us :(")
-        };
-    },
-})
-`;
-var exampleStateCreation = `
-const superEpicState = createState("MMMMMMM STATE");
-`;
-var exampleStateCreationReturn = `
-{
-    type: ObjectAttributeType.STATE,
-    id: 0,
-    value: "MMMMMMM STATE", 
-    bind: undefined,
-}
-`;
-var exampleStateReference = `
-const isUsingDarkMode = createState(false);
-
-div ({
-    class: observe(
-        [isUsingDarkMode],
-        (value) => value ? "bg-black" : "bg-white",
-    ),
-})
-`;
-var exampleStateLayoutBind = `
-const docsLayout = createLayout("docs-layout");
-
-const timeSpentOnPage = createState(0, {
-    bind: docsLayout
-});
-`;
-var exampleCreateEventListener = `
-const handleClick = createEventListener({
-    eventListener: (params: SetEvent<MouseEvent, HTMLDivElement>) => {
-        console.log(params.event);
-        console.log(params.event.currentTarget);
-    },
-});
-
-div ({
-    onClick: handleClick,
-});
-`;
-var exampleCreateEventListenerDependencies = `
-const counter = createState(0);
-
-const handleClick = createEventListener({
-    dependencies: [counter],
-    eventListener: (params, counter) => {
-        counter++;
-        counter.signal();
-    },
-});
-`;
-var exampleCreateEventListenerParams = `
-const reference = createReference();
-
-createEventListener({
-    params: {
-        someElementReference: reference,
-        pageCompiledAt: new Date(),
-    },
-
-    eventListener: (params) => {
-        console.log("i am now aware of: ", params.someElementReference);
-        console.log("This page was originally compiled at: ", pageCompiledAt);
-    },
-});
-`;
-var exampleCreateLayout = `
-const superAwesomeLayoutID  = createLayout("super-awesome-layout");
-`;
-var exampleSimpleLayout = `
-const superAwesomeLayoutID = createLayout("super-awesome-layout");
-
-const SuperAwesomeLayout = (...children: Child[]) => div ({
-    style: "background-color: #000; color: #fff",
-},
-    ...children
-);
-`;
-var exampleBreakpoint = `
-const superAwesomeLayoutID = createLayout("super-awesome-layout");
-
-const SuperAwesomeLayout = (...children: Child[]) => div ({
-    style: "background-color: #000; color: #fff",
-},
-    Breakpoint ({
-        id: superAwesomeLayoutID
-    },
-        ...children
-    ),
-);
-`;
-var metadata = () => head(
-  {},
-  link({
-    rel: "stylesheet",
-    href: "/index.css"
-  }),
-  title("Hi There!")
-);
-var page = RootLayout(
-  DocsLayout(
-    PageHeading("State", "state"),
-    Subtext("Available Via: elegance-js/server/state"),
-    Paragraph(
-      "State is, simply put, a collection of variables.",
-      br(),
-      "You initialize it on the server using the ",
-      Mono("createState()"),
-      " function."
-    ),
-    CodeBlock(exampleStateCreation),
-    SubSeparator(),
-    SubHeading("Usage"),
-    Paragraph(
-      "The ",
-      Mono("createState()"),
-      " function takes in two values.",
-      br(),
-      "The initial value of the state, and an options object.",
-      br(),
-      "The options object may currently only define a bind to the state (more on this later)",
-      br(),
-      br(),
-      "The function stores the created state in the servers current state store,",
-      br(),
-      "so that upon completion of compilation, it may be serialized into page_data."
-    ),
-    SubSeparator(),
-    SubHeading("Return Value"),
-    Paragraph(
-      "The return value of ",
-      Mono("createState()"),
-      " is a State ",
-      Link(
-        {
-          href: "/docs/concepts#object-attributes",
-          class: "border-b-2"
-        },
-        "Object Attribute, "
-      ),
-      br(),
-      "which you can use to refer back to the created state."
-    ),
-    CodeBlock(exampleStateCreationReturn),
-    CodeBlock(exampleStateReference),
-    Paragraph(
-      "Many functions like load hooks, event listeners, and observe, take in optional SOAs."
-    ),
-    SubSeparator(),
-    SubHeading("Bind"),
-    Paragraph(
-      "State, in the browser, is kept in the global ",
-      Mono("pd"),
-      " object, and indexed via pathnames.",
-      br(),
-      "All state for the pathname ",
-      Mono("/recipes/apple-pie"),
-      " will be in ",
-      Mono('pd["/recipes/apple-pie"]'),
-      br(),
-      br(),
-      "However, in some scenarios you may want to reference the same state on multiple pages. ",
-      br(),
-      "For this, you may ",
-      b("bind "),
-      "the state to a ",
-      Link({
-        href: "/docs/page-files#layouts",
-        class: "border-b-2"
-      }, "Layout."),
-      br(),
-      br(),
-      "Then, the state will go into ",
-      Mono("pd[layout_id]"),
-      ", instead of the pathname of the page."
-    ),
-    CodeBlock(exampleStateLayoutBind),
-    SubSeparator(),
-    SubHeading("Important Considerations"),
-    Paragraph(
-      "State persists it's value during page navigation.",
-      br(),
-      "Meaning if you want it to reset it's value, you must do so yourself."
-    ),
-    Separator(),
-    PageHeading("Load Hooks", "load-hooks"),
-    Subtext(
-      "Available Via: elegance-js/server/loadHook"
-    ),
-    br(),
-    br(),
-    SubHeading("Basic Usage"),
-    Paragraph(
-      "Load hooks are functions that are called on the initial page load, and subsequent navigations.",
-      br(),
-      "A load hook is registered using the ",
-      Mono("createLoadHook()"),
-      " function."
-    ),
-    CodeBlock(exampleLoadHook),
-    SubSeparator(),
-    SubHeading("Cleanup Function"),
-    Paragraph(
-      "The return value of a load hook is referred to as a cleanup function.",
-      br(),
-      "It is called whenever the load hook goes out of scope.",
-      br(),
-      br(),
-      "You'll want to do things like ",
-      Mono("clearInterval() & element.removeEventListener()"),
-      br(),
-      " here, so you don't get any unintended/undefined behavior."
-    ),
-    CodeBlock(exampleCleanupFunction),
-    SubSeparator(),
-    SubHeading("Load Hook Scope"),
-    Paragraph(
-      "The scope of a load hook is either the page it is on, or the layout it is bound to.",
-      br(),
-      "If a load hook is bound to layout, it is called when that layout first appears.",
-      br(),
-      "Subsequently, its cleanup function will get called once it's bound layout no longer exists on the page.",
-      br(),
-      br(),
-      "To bind a load hook to a layout, use the ",
-      Mono("bind"),
-      " attribute, and pass in a ",
-      Link(
-        {
-          href: "/docs/page-files#layouts",
-          class: "border-b-2"
-        },
-        "Layout ID"
-      ),
-      CodeBlock(exampleLoadHookBind)
-    ),
-    SubSeparator(),
-    SubHeading("Important Considerations"),
-    Paragraph(
-      "It's important to note that the load hook function body exists in ",
-      br(),
-      b("browser land "),
-      " not server land. Therefore the code is ",
-      b("untrusted.")
-    ),
-    Separator(),
-    PageHeading("Event Listener", "event-listeners"),
-    Subtext("Available Via: elegance-js/server/createState"),
-    br(),
-    br(),
-    SubHeading("Basic Usage"),
-    Paragraph(
-      "Event listeners are a type of state, that you can create with the",
-      br(),
-      Mono("createEventListener()"),
-      " function."
-    ),
-    CodeBlock(exampleCreateEventListener),
-    Paragraph(
-      "This function returns an SOA, which can then be put on any event listener option of an element.",
-      br(),
-      br(),
-      "The eventListener parameter of ",
-      Mono("createEventListener()"),
-      " takes in two types values.",
-      br(),
-      "First, a params object, which by default contains the native event which was triggered."
-    ),
-    SubSeparator(),
-    SubHeading("Dependencies"),
-    Paragraph(
-      "The second parameter, is a spread parameter, containing the dependencies of the event listener."
-    ),
-    CodeBlock(exampleCreateEventListenerDependencies),
-    SubSeparator(),
-    SubHeading("Extra Params"),
-    Paragraph(
-      "You may also extend the params object parameter of the event listener,",
-      br(),
-      "With the ",
-      Mono("params"),
-      " attribute.",
-      br(),
-      br(),
-      "This is handy for when you need to pass some value to the client, ",
-      br(),
-      "that is not necessarily a state variable, but it can change per compilation."
-    ),
-    CodeBlock(exampleCreateEventListenerParams),
-    SubSeparator(),
-    SubHeading("Important Considerations"),
-    Paragraph(
-      "It's important to note that the event listener function body exists in ",
-      br(),
-      b("browser land "),
-      " not server land. Therefore the code is ",
-      b("untrusted.")
-    ),
-    Separator(),
-    PageHeading("Layouts", "layouts"),
-    Subtext("Available Via: elegance-js/server/layout"),
-    br(),
-    br(),
-    Paragraph(
-      "A layout is a section of a page that is not re-rendered between",
-      br(),
-      "page navigations, to pages that share the same layout order.",
-      br(),
-      br(),
-      "Instead, the layouts ",
-      b("children"),
-      " are replaced.",
-      br(),
-      br(),
-      "This has a few advantages. The main one being, that since the elements themselves,",
-      br(),
-      "are not re-rendered, they maintain things like their hover state."
-    ),
-    SubSeparator(),
-    SubHeading("Basic Usage"),
-    Paragraph(
-      "Layouts work a bit differently in Elegance than you may perhaps be used to.",
-      br(),
-      "For example, in Next.JS, layouts are ",
-      b("inherited "),
-      "to every subsequent page.",
-      br(),
-      br(),
-      "So a layout defined at ",
-      Mono("/"),
-      " would apply to ",
-      b("every"),
-      " single page.",
-      br(),
-      "Which you may think is nice and saves time, but almost always I find myself in a situation",
-      br(),
-      "where I want a layout for every page of a given depth, except one.",
-      br(),
-      br(),
-      "And then, I have to either move the special page one depth upward",
-      br(),
-      "or the others one-depth downward.",
-      br(),
-      br(),
-      "Conversly, layouts in Elegance are ",
-      b("not "),
-      "inherited, and are are ",
-      b("opt-in."),
-      br(),
-      br(),
-      "To create a layout, use the ",
-      Mono("createLayout()"),
-      " function, and pass in a name.",
-      br(),
-      "The name is used so any subsequent calls to this function by other pages will get the same ID."
-    ),
-    CodeBlock(exampleCreateLayout),
-    Paragraph(
-      "This layout ID can then be passed to state, load hooks, etc."
-    ),
-    SubSeparator(),
-    SubHeading("Breakpoints"),
-    Paragraph(
-      "Creating the actual layout element is simple.",
-      br(),
-      "Just make a function that takes in child elements, and have it return some kind of simple layout."
-    ),
-    CodeBlock(exampleSimpleLayout),
-    Paragraph(
-      "Then, wrap the children with the built-in ",
-      Mono("Breakpoint()"),
-      " element."
-    ),
-    CodeBlock(exampleBreakpoint),
-    SubSeparator(),
-    SubHeading("Important Considerations"),
-    Paragraph(
-      "The ",
-      Mono("Breakpoint()"),
-      " element is the one that gets replaced",
-      br(),
-      "when navigating within any given layout.",
-      br(),
-      br(),
-      "All sibling and parent elements stay untouched.",
-      br(),
-      br(),
-      "Also note, that in complex pages where there are multiple nested layouts,",
-      br(),
-      "the one that has its children replaced, is the layout that is ",
-      b("last shared."),
-      br(),
-      br(),
-      b("For example:"),
-      br(),
-      "Page 1 Layouts: A,B,C,D,E",
-      br(),
-      "Page 2 Layouts: A,B,D,C,E",
-      br(),
-      "In this instance, the ",
-      b("B"),
-      " layout is the last shared layout."
-    )
-  )
-);
-export {
-  metadata,
-  page
-};