@aussieljk/forkbook 0.0.0-stage → 0.0.1-10

package/dist/_browser-chunks/chunk-QDXFODK4.js

@@ -0,0 +1,274 @@
+// src/viewport/constants.ts
+var ADDON_ID = "@aussieljk/forkbook/viewport", PARAM_KEY = "viewport", PANEL_ID = `${ADDON_ID}/panel`, TOOL_ID = `${ADDON_ID}/tool`, RESPONSIVE_VIEWPORT_VALUE = "100pct-100pct";
+
+// src/viewport/defaults.ts
+var INITIAL_VIEWPORTS = {
+  iphone5: {
+    name: "iPhone 5",
+    styles: {
+      height: "568px",
+      width: "320px"
+    },
+    type: "mobile"
+  },
+  iphone6: {
+    name: "iPhone 6",
+    styles: {
+      height: "667px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphone6p: {
+    name: "iPhone 6 Plus",
+    styles: {
+      height: "736px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  iphone8p: {
+    name: "iPhone 8 Plus",
+    styles: {
+      height: "736px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  iphonex: {
+    name: "iPhone X",
+    styles: {
+      height: "812px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphonexr: {
+    name: "iPhone XR",
+    styles: {
+      height: "896px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  iphonexsmax: {
+    name: "iPhone XS Max",
+    styles: {
+      height: "896px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  iphonese2: {
+    name: "iPhone SE (2nd generation)",
+    styles: {
+      height: "667px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphone12mini: {
+    name: "iPhone 12 mini",
+    styles: {
+      height: "812px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphone12: {
+    name: "iPhone 12",
+    styles: {
+      height: "844px",
+      width: "390px"
+    },
+    type: "mobile"
+  },
+  iphone12promax: {
+    name: "iPhone 12 Pro Max",
+    styles: {
+      height: "926px",
+      width: "428px"
+    },
+    type: "mobile"
+  },
+  iphoneSE3: {
+    name: "iPhone SE 3rd generation",
+    styles: {
+      height: "667px",
+      width: "375px"
+    },
+    type: "mobile"
+  },
+  iphone13: {
+    name: "iPhone 13",
+    styles: {
+      height: "844px",
+      width: "390px"
+    },
+    type: "mobile"
+  },
+  iphone13pro: {
+    name: "iPhone 13 Pro",
+    styles: {
+      height: "844px",
+      width: "390px"
+    },
+    type: "mobile"
+  },
+  iphone13promax: {
+    name: "iPhone 13 Pro Max",
+    styles: {
+      height: "926px",
+      width: "428px"
+    },
+    type: "mobile"
+  },
+  iphone14: {
+    name: "iPhone 14",
+    styles: {
+      height: "844px",
+      width: "390px"
+    },
+    type: "mobile"
+  },
+  iphone14pro: {
+    name: "iPhone 14 Pro",
+    styles: {
+      height: "852px",
+      width: "393px"
+    },
+    type: "mobile"
+  },
+  iphone14promax: {
+    name: "iPhone 14 Pro Max",
+    styles: {
+      height: "932px",
+      width: "430px"
+    },
+    type: "mobile"
+  },
+  ipad: {
+    name: "iPad",
+    styles: {
+      height: "1024px",
+      width: "768px"
+    },
+    type: "tablet"
+  },
+  ipad10p: {
+    name: "iPad Pro 10.5-in",
+    styles: {
+      height: "1112px",
+      width: "834px"
+    },
+    type: "tablet"
+  },
+  ipad11p: {
+    name: "iPad Pro 11-in",
+    styles: {
+      height: "1194px",
+      width: "834px"
+    },
+    type: "tablet"
+  },
+  ipad12p: {
+    name: "iPad Pro 12.9-in",
+    styles: {
+      height: "1366px",
+      width: "1024px"
+    },
+    type: "tablet"
+  },
+  galaxys5: {
+    name: "Galaxy S5",
+    styles: {
+      height: "640px",
+      width: "360px"
+    },
+    type: "mobile"
+  },
+  galaxys9: {
+    name: "Galaxy S9",
+    styles: {
+      height: "740px",
+      width: "360px"
+    },
+    type: "mobile"
+  },
+  nexus5x: {
+    name: "Nexus 5X",
+    styles: {
+      height: "660px",
+      width: "412px"
+    },
+    type: "mobile"
+  },
+  nexus6p: {
+    name: "Nexus 6P",
+    styles: {
+      height: "732px",
+      width: "412px"
+    },
+    type: "mobile"
+  },
+  pixel: {
+    name: "Pixel",
+    styles: {
+      height: "960px",
+      width: "540px"
+    },
+    type: "mobile"
+  },
+  pixelxl: {
+    name: "Pixel XL",
+    styles: {
+      height: "1280px",
+      width: "720px"
+    },
+    type: "mobile"
+  }
+}, DEFAULT_VIEWPORT = "responsive", MINIMAL_VIEWPORTS = {
+  mobile1: {
+    name: "Small mobile",
+    styles: {
+      height: "568px",
+      width: "320px"
+    },
+    type: "mobile"
+  },
+  mobile2: {
+    name: "Large mobile",
+    styles: {
+      height: "896px",
+      width: "414px"
+    },
+    type: "mobile"
+  },
+  tablet: {
+    name: "Tablet",
+    styles: {
+      height: "1112px",
+      width: "834px"
+    },
+    type: "tablet"
+  },
+  desktop: {
+    name: "Desktop",
+    styles: {
+      height: "1024px",
+      width: "1280px"
+    },
+    type: "desktop"
+  }
+};
+
+export {
+  ADDON_ID,
+  PARAM_KEY,
+  PANEL_ID,
+  TOOL_ID,
+  RESPONSIVE_VIEWPORT_VALUE,
+  INITIAL_VIEWPORTS,
+  DEFAULT_VIEWPORT,
+  MINIMAL_VIEWPORTS
+};

package/dist/_browser-chunks/chunk-RBCHTR7C.js

@@ -0,0 +1,28 @@
+import {
+  __export
+} from "./chunk-IMSF75WX.js";
+
+// src/addon-docs/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  parameters: () => parameters
+});
+var excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
+  (acc, [tag, option]) => (option.hideFromAutodocs && (acc[tag] = !0), acc),
+  {}
+), parameters = {
+  docs: {
+    renderer: async () => {
+      let { DocsRenderer } = await import("./DocsRenderer-JXND3PVQ.js");
+      return new DocsRenderer();
+    },
+    stories: {
+      filter: (story) => (story.tags || []).filter((tag) => excludeTags[tag]).length === 0 && !story.parameters.docs?.disable
+    }
+  }
+};
+
+export {
+  parameters,
+  preview_exports
+};

package/dist/_browser-chunks/chunk-RMYQ3QN3.js

@@ -0,0 +1,294 @@
+import {
+  EXCLUDED_PSEUDO_ELEMENT_PATTERNS,
+  PARAM_KEY,
+  PSEUDO_STATES
+} from "./chunk-OVH3USFB.js";
+import {
+  __export
+} from "./chunk-IMSF75WX.js";
+
+// src/addon-pseudo-states/preview.ts
+var preview_exports = {};
+__export(preview_exports, {
+  decorators: () => decorators,
+  initialGlobals: () => initialGlobals
+});
+
+// src/addon-pseudo-states/preview/withPseudoState.ts
+import {
+  DOCS_RENDERED,
+  FORCE_REMOUNT,
+  FORCE_RE_RENDER,
+  GLOBALS_UPDATED,
+  STORY_CHANGED,
+  STORY_RENDERED,
+  UPDATE_GLOBALS
+} from "@aussieljk/forkbook/internal/core-events";
+import { addons, useEffect, useMemo, useRef } from "@aussieljk/forkbook/preview-api";
+
+// src/addon-pseudo-states/preview/splitSelectors.ts
+var isAtRule = (selector) => selector.indexOf("@") === 0, splitSelectors = (selectors) => {
+  if (isAtRule(selectors))
+    return [selectors];
+  let result = [], parentheses = 0, brackets = 0, selector = "";
+  for (let i = 0, len = selectors.length; i < len; i++) {
+    let char = selectors[i];
+    if (char === "(")
+      parentheses += 1;
+    else if (char === ")")
+      parentheses -= 1;
+    else if (char === "[")
+      brackets += 1;
+    else if (char === "]")
+      brackets -= 1;
+    else if (char === "," && !parentheses && !brackets) {
+      result.push(selector.trim()), selector = "";
+      continue;
+    }
+    selector += char;
+  }
+  return result.push(selector.trim()), result;
+};
+
+// src/addon-pseudo-states/preview/rewriteStyleSheet.ts
+var pseudoStates = Object.values(PSEUDO_STATES), selectorStartPattern = /[|>+~,\s(]/, pseudoStatePattern = new RegExp(`:(${pseudoStates.join("|")})`, "g"), excludedPseudoElementPattern = new RegExp(
+  `(?:${EXCLUDED_PSEUDO_ELEMENT_PATTERNS.join("|")})\\S*`,
+  "g"
+), isEscaped = (selector, index) => {
+  let precedingBackslashes = 0;
+  for (let cursor = index - 1; cursor >= 0 && selector[cursor] === "\\"; cursor--)
+    precedingBackslashes++;
+  return precedingBackslashes % 2 === 1;
+}, findPseudoStates = (selector) => {
+  let matches = [];
+  pseudoStatePattern.lastIndex = 0;
+  let match = pseudoStatePattern.exec(selector);
+  for (; match; ) {
+    let index = match.index;
+    isEscaped(selector, index) || matches.push({ index, state: match[1], text: match[0] }), match = pseudoStatePattern.exec(selector);
+  }
+  return matches;
+}, findExcludedPseudoElementRanges = (selector) => {
+  let ranges = [];
+  excludedPseudoElementPattern.lastIndex = 0;
+  let match = excludedPseudoElementPattern.exec(selector);
+  for (; match; )
+    ranges.push({ start: match.index, end: match.index + match[0].length }), match = excludedPseudoElementPattern.exec(selector);
+  return ranges;
+}, replacePseudoStateMatches = (selector, matches, replacement) => {
+  let result = "", cursor = 0;
+  return matches.forEach((match) => {
+    result += selector.slice(cursor, match.index), result += replacement(match.state), cursor = match.index + match.text.length;
+  }), result + selector.slice(cursor);
+}, maximumSelectorsPerRule = 4e3, warnings = /* @__PURE__ */ new Set(), warnOnce = (message) => {
+  warnings.has(message) || (console.warn(message), warnings.add(message));
+}, replacePseudoStates = (selector, allClass, pseudoStateMatches = findPseudoStates(selector)) => {
+  let excludedRanges = findExcludedPseudoElementRanges(selector), matches = pseudoStateMatches.filter(
+    ({ index }) => !excludedRanges.some(({ start, end }) => index >= start && index < end)
+  );
+  return replacePseudoStateMatches(
+    selector,
+    matches,
+    (state) => `.pseudo-${state}${allClass ? "-all" : ""}`
+  );
+}, replacePseudoStatesWithAncestorSelector = (selector, forShadowDOM, additionalHostSelectors) => {
+  let extracted = extractPseudoStates(selector);
+  if (extracted.states.length === 0 && !additionalHostSelectors)
+    return selector;
+  let selectors = `${additionalHostSelectors ?? ""}${extracted.states.map((s) => `.pseudo-${s}-all`).join("")}`, { withoutPseudoStates } = extracted;
+  return withoutPseudoStates = withoutPseudoStates.replace(":host-context(*)", "").trimStart(), withoutPseudoStates.startsWith(":host-context(") ? withoutPseudoStates.replace(/^(:host-context\(\S+\))/, `$1${selectors}`) : forShadowDOM ? `:host(${selectors}) ${withoutPseudoStates}` : `${selectors} ${withoutPseudoStates}`;
+}, extractPseudoStates = (selector) => {
+  let states = /* @__PURE__ */ new Set(), matches = findPseudoStates(selector), withoutPseudoStates = "", cursor = 0;
+  return matches.forEach((match) => {
+    withoutPseudoStates += selector.slice(cursor, match.index), match.index > 0 && selectorStartPattern.test(selector[match.index - 1]) && (withoutPseudoStates += "*"), states.add(match.state), cursor = match.index + match.text.length;
+  }), withoutPseudoStates += selector.slice(cursor), withoutPseudoStates = withoutPseudoStates.replaceAll(/([\s(]),\s+|(,\s+)+(?=\))/g, "$1") || "*", {
+    states: Array.from(states),
+    withoutPseudoStates
+  };
+}, rewriteNotSelectors = (selector, forShadowDOM) => [...selector.matchAll(/:not\((?:[^()]|\([^()]+\)|\((?:[^()]|\([^()]+\))+\))+\)/g)].reduce(
+  (acc, [originalNot]) => {
+    let selectorList = originalNot.match(/^:not\((.+)\)$/)?.[1] ?? "", rewrittenNot = rewriteNotSelector(selectorList, forShadowDOM);
+    return acc.replace(originalNot, rewrittenNot);
+  },
+  selector
+), rewriteNotSelector = (negatedSelectorList, forShadowDOM) => {
+  let rewrittenSelectors = [];
+  for (let negatedSelector of negatedSelectorList.split(/,\s*/))
+    rewrittenSelectors.push(replacePseudoStatesWithAncestorSelector(negatedSelector, forShadowDOM));
+  return `:not(${rewrittenSelectors.join(", ")})`;
+}, rewriteRules = ({ cssText, selectorText }, forShadowDOM) => {
+  let didRewrite = !1, rewrittenSelectors = splitSelectors(selectorText).flatMap((selector) => {
+    if (selector.includes(".pseudo-"))
+      return [selector];
+    let replacementSelectors = [selector], pseudoStateMatches = findPseudoStates(selector);
+    if (pseudoStateMatches.length === 0)
+      return replacementSelectors;
+    didRewrite = !0;
+    let classSelector = replacePseudoStates(selector, !1, pseudoStateMatches);
+    classSelector !== selector && replacementSelectors.push(classSelector);
+    let ancestorSelector = "";
+    if (selector.startsWith(":host(")) {
+      let matches = selector.match(/^:host\((\S+)\)\s+(.+)$/);
+      if (matches && findPseudoStates(matches[2]).length > 0) {
+        let hostInnerSelector = matches[1], descendantSelector = matches[2];
+        hostInnerSelector = replacePseudoStates(hostInnerSelector, !0), descendantSelector = rewriteNotSelectors(descendantSelector, !0), ancestorSelector = replacePseudoStatesWithAncestorSelector(
+          descendantSelector,
+          !0,
+          hostInnerSelector
+        );
+      } else
+        ancestorSelector = replacePseudoStates(selector, !0);
+    } else {
+      let withNotsReplaced = rewriteNotSelectors(selector, forShadowDOM);
+      ancestorSelector = replacePseudoStatesWithAncestorSelector(withNotsReplaced, forShadowDOM);
+    }
+    return replacementSelectors.push(ancestorSelector), replacementSelectors;
+  });
+  if (!didRewrite)
+    return [];
+  let rewrittenRules = [];
+  for (let index = 0; index < rewrittenSelectors.length; index += maximumSelectorsPerRule) {
+    let chunk = rewrittenSelectors.slice(index, index + maximumSelectorsPerRule).join(", ");
+    rewrittenRules.push(cssText.replace(selectorText, () => chunk));
+  }
+  return rewrittenRules;
+}, replaceRule = (ruleContainer, index, newRules) => {
+  let insertedRules = 0;
+  try {
+    newRules.forEach((newRule, offset) => {
+      ruleContainer.insertRule(newRule, index + offset + 1), insertedRules++;
+    }), ruleContainer.deleteRule(index);
+  } catch (error) {
+    for (; insertedRules > 0; )
+      ruleContainer.deleteRule(index + 1), insertedRules--;
+    throw error;
+  }
+  return Array.from(ruleContainer.cssRules).slice(index, index + newRules.length);
+}, rewriteStyleSheet = (sheet, forShadowDOM = !1) => {
+  try {
+    let count = rewriteRuleContainer(sheet, 1e3, forShadowDOM);
+    return count >= 1e3 && warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest."), count > 0;
+  } catch (e) {
+    return String(e).includes("cssRules") ? warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`) : console.error(e, sheet.href), !1;
+  }
+}, rewriteRuleContainer = (ruleContainer, rewriteLimit, forShadowDOM) => {
+  let count = 0, index = -1;
+  for (let cssRule of ruleContainer.cssRules) {
+    index++;
+    let numRewritten = 0;
+    if (cssRule.__processed)
+      numRewritten = cssRule.__pseudoStatesRewrittenCount;
+    else {
+      let styleRules = [cssRule];
+      if ("selectorText" in styleRules[0]) {
+        let newRules = rewriteRules(styleRules[0], forShadowDOM);
+        newRules.length > 0 && (styleRules = replaceRule(ruleContainer, index, newRules), numRewritten = 1);
+      }
+      let rewrittenCounts = styleRules.map(
+        (_, styleRuleIndex) => styleRuleIndex === 0 ? numRewritten : 0
+      );
+      styleRules.forEach((styleRule, styleRuleIndex) => {
+        let remainingRewriteLimit = rewriteLimit - count - rewrittenCounts.reduce((sum, value) => sum + value, 0);
+        remainingRewriteLimit > 0 && "cssRules" in styleRule && styleRule.cssRules.length && (rewrittenCounts[styleRuleIndex] += rewriteRuleContainer(
+          styleRule,
+          remainingRewriteLimit,
+          forShadowDOM
+        )), styleRule.__processed = !0;
+      }), numRewritten = rewrittenCounts.reduce((sum, value) => sum + value, 0), styleRules.forEach((styleRule, styleRuleIndex) => {
+        styleRule.__pseudoStatesRewrittenCount = styleRuleIndex === 0 ? numRewritten : 0;
+      });
+    }
+    if (count += numRewritten, count >= rewriteLimit)
+      break;
+  }
+  return count;
+};
+
+// src/addon-pseudo-states/preview/withPseudoState.ts
+var channel = addons.getChannel(), shadowHosts = /* @__PURE__ */ new Set(), applyClasses = (element, classnames) => {
+  Object.values(PSEUDO_STATES).forEach((state) => {
+    element.classList.remove(`pseudo-${state}`), element.classList.remove(`pseudo-${state}-all`);
+  }), classnames.forEach((classname) => element.classList.add(classname));
+};
+function querySelectorPiercingShadowDOM(root, selector) {
+  let results = [];
+  return root.querySelectorAll("*").forEach((el) => {
+    el.shadowRoot && results.push(...querySelectorPiercingShadowDOM(el.shadowRoot, selector));
+  }), results.push(...root.querySelectorAll(selector).values()), results;
+}
+var applyParameter = (rootElement, parameter = {}) => {
+  let map = /* @__PURE__ */ new Map([[rootElement, /* @__PURE__ */ new Set()]]), add = (target, state) => map.set(target, /* @__PURE__ */ new Set([...map.get(target) || [], state]));
+  Object.entries(parameter || {}).forEach(([state, value]) => {
+    typeof value == "boolean" ? value && add(rootElement, `${state}-all`) : typeof value == "string" ? querySelectorPiercingShadowDOM(rootElement, value).forEach((el) => add(el, state)) : Array.isArray(value) && value.forEach(
+      (sel) => querySelectorPiercingShadowDOM(rootElement, sel).forEach((el) => add(el, state))
+    );
+  }), map.forEach((states, target) => {
+    let classnames = /* @__PURE__ */ new Set();
+    states.forEach((key) => {
+      let keyWithoutAll = key.replace("-all", "");
+      PSEUDO_STATES[key] ? classnames.add(`pseudo-${PSEUDO_STATES[key]}`) : PSEUDO_STATES[keyWithoutAll] && classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`);
+    }), applyClasses(target, classnames);
+  });
+}, updateShadowHost = (shadowHost) => {
+  let classnames = /* @__PURE__ */ new Set();
+  shadowHost.className.split(" ").filter((classname) => classname.match(/^pseudo-(.(?!-all))+$/)).forEach((classname) => classnames.add(classname));
+  for (let node = shadowHost.parentNode; node; ) {
+    if (node instanceof ShadowRoot) {
+      node = node.host;
+      continue;
+    }
+    if (node instanceof Element) {
+      let element = node;
+      element.className && element.className.split(" ").filter((classname) => classname.match(/^pseudo-.+-all$/) !== null).forEach((classname) => classnames.add(classname));
+    }
+    node = node.parentNode;
+  }
+  applyClasses(shadowHost, classnames);
+}, pseudoConfig = (parameter) => {
+  let { rootSelector, ...pseudoStateConfig } = parameter || {};
+  return pseudoStateConfig;
+}, equals = (a = {}, b = {}) => a !== null && b !== null && Object.keys(a).length === Object.keys(b).length && Object.keys(a).every(
+  (key) => JSON.stringify(a[key]) === JSON.stringify(b[key])
+), withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs }) => {
+  let { pseudo: parameter } = parameters, { pseudo: globals } = globalsArgs, { rootSelector } = parameter || {}, rootElement = useMemo(() => rootSelector ? document.querySelector(rootSelector) : viewMode === "docs" ? document.getElementById(`story--${id}`) : document.getElementById("storybook-root") || // Forkbook 7.0+
+  document.getElementById("root"), [rootSelector, viewMode, id]), globalsRef = useRef(globals);
+  return useEffect(() => {
+    let config = pseudoConfig(parameter);
+    viewMode === "story" && Object.keys(config).length > 0 && !equals(config, globalsRef.current) && channel.emit(UPDATE_GLOBALS, {
+      globals: { pseudo: config }
+    });
+  }, [parameter, viewMode]), useEffect(() => {
+    if (!rootElement)
+      return;
+    let timeout = setTimeout(() => {
+      applyParameter(rootElement, globals || pseudoConfig(parameter)), shadowHosts.forEach(updateShadowHost);
+    }, 0);
+    return () => clearTimeout(timeout);
+  }, [rootElement, globals, parameter]), StoryFn();
+}, rewriteStyleSheets = (shadowRoot) => {
+  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
+  shadowRoot?.adoptedStyleSheets?.length && (styleSheets = shadowRoot.adoptedStyleSheets), styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, !!shadowRoot)), shadowRoot && shadowHosts && shadowHosts.add(shadowRoot.host);
+};
+channel.on(STORY_CHANGED, () => shadowHosts.clear());
+channel.on(STORY_RENDERED, () => rewriteStyleSheets());
+channel.on(GLOBALS_UPDATED, () => rewriteStyleSheets());
+channel.on(FORCE_RE_RENDER, () => rewriteStyleSheets());
+channel.on(FORCE_REMOUNT, () => rewriteStyleSheets());
+channel.on(DOCS_RENDERED, () => rewriteStyleSheets());
+Element.prototype.attachShadow && (Element.prototype._attachShadow = Element.prototype.attachShadow, Element.prototype.attachShadow = function(init) {
+  let shadowRoot = this._attachShadow({ ...init, mode: "open" });
+  return requestAnimationFrame(() => {
+    rewriteStyleSheets(shadowRoot), shadowHosts.has(shadowRoot.host) && updateShadowHost(shadowRoot.host);
+  }), shadowRoot;
+});
+
+// src/addon-pseudo-states/preview.ts
+var decorators = [withPseudoState], initialGlobals = {
+  [PARAM_KEY]: !1
+};
+
+export {
+  decorators,
+  initialGlobals,
+  preview_exports
+};