@plasmicapp/react-web 0.2.99 → 0.2.102

package/dist/render/PlasmicImg/index.d.ts

@@ -18,7 +18,12 @@ export interface PlasmicImgProps extends ImgTagProps {
      * or just a src string with unknown intrinsic dimensions.
      */
     src?: string | {
-        src: string;
+        src: string | {
+            src: string;
+            height: number;
+            width: number;
+            blurDataURL?: string;
+        };
         fullHeight: number;
         fullWidth: number;
         aspectRatio?: number;

package/dist/states/index.d.ts

@@ -0,0 +1,15 @@
+interface $State {
+    [key: string]: any;
+}
+interface $StateSpec<T> {
+    path: string;
+    initFunc?: ($props: Record<string, any>, $state: $State) => T;
+    initVal?: T;
+    type: "private" | "readonly" | "writable";
+    valueProp?: string;
+    onChangeProp?: string;
+}
+export declare function keyBy<K extends string, V>(list: V[], keyFunc: (v: V) => K): Record<K, V>;
+declare function useVanillaDollarState(specs: $StateSpec<any>[], props: Record<string, any>): $State;
+declare const useDollarState: typeof useVanillaDollarState;
+export default useDollarState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.99",
+  "version": "0.2.102",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,7 +25,7 @@
     "start": "tsdx watch",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
-    "prepare": "yarn build",
+    "prepare": "if-env PREPARE_NO_BUILD=true || yarn build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
@@ -56,7 +56,9 @@
     "@react-stately/select": "^3.1.7",
     "@react-stately/toggle": "^3.2.7",
     "@react-stately/tree": "^3.2.4",
-    "classnames": "^2.2.6"
+    "classnames": "^2.2.6",
+    "dlv": "^1.1.3",
+    "dset": "^3.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
@@ -72,6 +74,7 @@
     "@storybook/addon-links": "^6.3.4",
     "@storybook/react": "^6.3.4",
     "@types/classnames": "^2.2.9",
+    "@types/dlv": "^1.1.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "babel-jest": "^27.0.6",

package/skinny/dist/index.d.ts

@@ -9,3 +9,4 @@ export * from "./plume/select";
 export * from "./plume/switch";
 export * from "./plume/text-input";
 export * from "./plume/triggered-overlay";
+export { default as useDollarState } from "./states/index";

package/skinny/dist/render/PlasmicImg/index.d.ts

@@ -18,7 +18,12 @@ export interface PlasmicImgProps extends ImgTagProps {
      * or just a src string with unknown intrinsic dimensions.
      */
     src?: string | {
-        src: string;
+        src: string | {
+            src: string;
+            height: number;
+            width: number;
+            blurDataURL?: string;
+        };
         fullHeight: number;
         fullWidth: number;
         aspectRatio?: number;

package/skinny/dist/render/PlasmicImg/index.js

@@ -21,7 +21,13 @@ var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef)
     var _a = typeof src === "string" || !src
         ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }
         : src, fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, aspectRatio = _a.aspectRatio;
-    var srcStr = src ? (typeof src === "string" ? src : src.src) : "";
+    var srcStr = src
+        ? typeof src === "string"
+            ? src
+            : typeof src.src === "string"
+                ? src.src
+                : src.src.src
+        : "";
     // Assume external image if either dimension is null and use usual <img>
     if (fullHeight == null || fullWidth == null) {
         return (React__default.createElement("img", __assign({ src: srcStr, className: className, style: style }, imgProps, { loading: loading, ref: mergeRefs(imgRef, outerRef) })));
@@ -31,6 +37,7 @@ var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef)
         (displayWidth == null || displayWidth === "auto")) {
         displayWidth = "100%";
     }
+    var computedDisplayWidth = displayWidth;
     if (fullWidth &&
         fullHeight &&
         (!displayWidth || displayWidth === "auto") &&
@@ -43,7 +50,8 @@ var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef)
             // We shouldn't do it for SVGs though, because `fullWidth` and
             // `fullHeight` might have rounded values so the final
             // `displayWidth` could differ by 1px or so.
-            displayWidth = (getPixelLength(displayHeight) * fullWidth) / fullHeight;
+            computedDisplayWidth =
+                (getPixelLength(displayHeight) * fullWidth) / fullHeight;
         }
     }
     var spacerWidth = fullWidth;
@@ -56,7 +64,7 @@ var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef)
         spacerWidth = DEFAULT_SVG_WIDTH;
         spacerHeight = Math.round(spacerWidth / aspectRatio);
     }
-    var _b = getWidths(displayWidth, fullWidth, {
+    var _b = getWidths(computedDisplayWidth, fullWidth, {
         minWidth: displayMinWidth,
     }), sizes = _b.sizes, widthDescs = _b.widthDescs;
     var imageLoader = getImageLoader(loader);
@@ -65,7 +73,7 @@ var PlasmicImg = React__default.forwardRef(function PlasmicImg(props, outerRef)
         ? Buffer.from(spacerSvg).toString("base64")
         : window.btoa(spacerSvg);
     var wrapperStyle = __assign({}, (style || {}));
-    var spacerStyle = pick(style || {}, "objectFit", "objectPosition");
+    var spacerStyle = __assign({}, pick(style || {}, "objectFit", "objectPosition"));
     if (displayWidth != null && displayWidth !== "auto") {
         // If width is set, set it on the wrapper along with min/max width
         // and just use `width: 100%` on the spacer

package/skinny/dist/render/PlasmicImg/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/render/PlasmicImg/index.tsx"],"sourcesContent":["/**\n * Responsive `<img/>` replacement, based on `next/image`\n */\n\nimport classNames from \"classnames\";\nimport React, { CSSProperties } from \"react\";\nimport { pick } from \"../../common\";\nimport { mergeRefs } from \"../../react-utils\";\n\nexport interface ImageLoader {\n  supportsUrl: (url: string) => boolean;\n  transformUrl: (opts: {\n    src: string;\n    width?: number;\n    quality?: number;\n    format?: \"webp\";\n  }) => string;\n}\n\ntype ImgTagProps = Omit<\n  React.ComponentProps<\"img\">,\n  \"src\" | \"srcSet\" | \"ref\" | \"style\"\n>;\n\n// Default image sizes to snap to\n// TODO: make this configurable?\nconst IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];\nconst DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];\nconst ALL_SIZES = [...IMG_SIZES, ...DEVICE_SIZES];\n\nexport interface PlasmicImgProps extends ImgTagProps {\n  /**\n   * Either an object with the src string, and its full width and height,\n   * or just a src string with unknown intrinsic dimensions.\n   */\n  src?:\n    | string\n    | {\n        src: string;\n        fullHeight: number;\n        fullWidth: number;\n        // We might also get a more precise aspectRatio for SVGs\n        // instead of relyiing on fullWidth / fullHeight, because\n        // those values might be rounded and not so accurate.\n        aspectRatio?: number;\n      };\n\n  /**\n   * className applied to the wrapper element if one is used.\n   */\n  className?: string;\n\n  /**\n   * css width\n   */\n  displayWidth?: number | string;\n\n  /**\n   * css height\n   */\n  displayHeight?: number | string;\n\n  /**\n   * css min-width\n   */\n  displayMinWidth?: number | string;\n\n  /**\n   * css min-height\n   */\n  displayMinHeight?: number | string;\n\n  /**\n   * css max-width\n   */\n  displayMaxWidth?: number | string;\n\n  /**\n   * css max-height\n   */\n  displayMaxHeight?: number | string;\n\n  /**\n   * For variable quality formats like jpg, the quality from 0 to 100\n   */\n  quality?: number;\n\n  /**\n   * ImageLoader to use for loading different dimensions of the image.\n   * If none specified, will not attempt to load different dimensions.\n   */\n  loader?: \"plasmic\" | ImageLoader;\n\n  /**\n   * Style applied to the wrapper element. objectFit and objectPosition\n   * rules are applied to the img element.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Ref for the img element.  The normal <PlasmicImg ref={...} />\n   * prop gives the root element instead, which may be the img element\n   * or a wrapper element\n   */\n  imgRef?: React.Ref<HTMLImageElement>;\n}\n\nexport const PlasmicImg = React.forwardRef(function PlasmicImg(\n  props: PlasmicImgProps,\n  outerRef: React.Ref<HTMLElement>\n) {\n  let {\n    src,\n    className,\n    displayWidth,\n    displayHeight,\n    displayMinWidth,\n    displayMinHeight,\n    displayMaxWidth,\n    displayMaxHeight,\n    quality,\n    loader,\n    imgRef,\n    style,\n    loading,\n    ...rest\n  } = props;\n\n  const imgProps = Object.assign({}, rest, {\n    // Default loading to \"lazy\" if not specified (which is different from the\n    // html img, which defaults to eager!)\n    loading: loading ?? \"lazy\",\n  });\n\n  const { fullWidth, fullHeight, aspectRatio } =\n    typeof src === \"string\" || !src\n      ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }\n      : src;\n  const srcStr = src ? (typeof src === \"string\" ? src : src.src) : \"\";\n\n  // Assume external image if either dimension is null and use usual <img>\n  if (fullHeight == null || fullWidth == null) {\n    return (\n      <img\n        src={srcStr}\n        className={className}\n        style={style}\n        {...imgProps}\n        loading={loading}\n        ref={mergeRefs(imgRef, outerRef) as any}\n      />\n    );\n  }\n\n  if (\n    isSvg(srcStr) &&\n    (displayHeight == null || displayHeight === \"auto\") &&\n    (displayWidth == null || displayWidth === \"auto\")\n  ) {\n    displayWidth = \"100%\";\n  }\n\n  if (\n    fullWidth &&\n    fullHeight &&\n    (!displayWidth || displayWidth === \"auto\") &&\n    !!getPixelLength(displayHeight)\n  ) {\n    // If there's a pixel length specified for displayHeight but not displayWidth,\n    // then we can derive the pixel length for displayWidth.  Having an explicit\n    // displayWidth makes this a fixed-size image, which makes it possible for us to\n    // generate better markup!\n    if (!isSvg(srcStr)) {\n      // We shouldn't do it for SVGs though, because `fullWidth` and\n      // `fullHeight` might have rounded values so the final\n      // `displayWidth` could differ by 1px or so.\n      displayWidth = (getPixelLength(displayHeight)! * fullWidth) / fullHeight;\n    }\n  }\n\n  let spacerWidth = fullWidth;\n  let spacerHeight = fullHeight;\n  if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {\n    // For SVGs, fullWidth and fullHeight can be rounded values, which would\n    // cause some discrepancy between the actual aspect ratio and the aspect\n    // ratio from those values. So, for those cases, we set large width / height\n    // values to get a more precise ratio from the spacer.\n    spacerWidth = DEFAULT_SVG_WIDTH;\n    spacerHeight = Math.round(spacerWidth / aspectRatio);\n  }\n\n  const { sizes, widthDescs } = getWidths(displayWidth, fullWidth, {\n    minWidth: displayMinWidth,\n  });\n  const imageLoader = getImageLoader(loader);\n  const spacerSvg = `<svg width=\"${spacerWidth}\" height=\"${spacerHeight}\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>`;\n  const spacerSvgBase64 =\n    typeof window === \"undefined\"\n      ? Buffer.from(spacerSvg).toString(\"base64\")\n      : window.btoa(spacerSvg);\n\n  let wrapperStyle: CSSProperties = { ...(style || {}) };\n  let spacerStyle: CSSProperties = pick(\n    style || {},\n    \"objectFit\",\n    \"objectPosition\"\n  );\n\n  if (displayWidth != null && displayWidth !== \"auto\") {\n    // If width is set, set it on the wrapper along with min/max width\n    // and just use `width: 100%` on the spacer\n    spacerStyle.width = \"100%\";\n    // Rely on the styles set by `classname` on the wrapper:\n    // wrapperStyle.width = displayWidth;\n    // wrapperStyle.minWidth = displayMinWidth;\n    // wrapperStyle.maxWidth = displayMaxWidth;\n  } else {\n    // Otherwise, we want auto sizing from the spacer, so set width there.\n    //\n    // But if we have min/max width, it should be set in the wrapper and it\n    // can be percentage values (and we add corresponding min/max width to\n    // 100% in the spacer). In general it ends up with the correct effect,\n    // but some edge cases might make `min-width: 100%` shrink the image more\n    // than it should.\n    spacerStyle.width = displayWidth;\n    wrapperStyle.width = \"auto\";\n    if (displayMinWidth) {\n      spacerStyle.minWidth = \"100%\";\n      // Rely on min-width set by `classname` on the wrapper:\n      // wrapperStyle.minWidth = displayMinWidth;\n    }\n    if (displayMaxWidth != null && displayMaxWidth !== \"none\") {\n      spacerStyle.maxWidth = \"100%\";\n      // Rely on max-width set by `classname` on the wrapper:\n      // wrapperStyle.maxWidth = displayMaxWidth;\n    }\n  }\n\n  if (displayHeight != null && displayHeight !== \"auto\") {\n    spacerStyle.height = \"100%\";\n    // wrapperStyle.height = displayHeight;\n    // wrapperStyle.minHeight = displayMinHeight;\n    // wrapperStyle.maxHeight = displayMaxHeight;\n  } else {\n    spacerStyle.height = displayHeight;\n    wrapperStyle.height = \"auto\";\n    if (displayMinHeight) {\n      spacerStyle.minHeight = \"100%\";\n      // wrapperStyle.minHeight = displayMinHeight;\n    }\n    if (displayMaxHeight != null && displayMaxHeight !== \"none\") {\n      spacerStyle.maxHeight = \"100%\";\n      // wrapperStyle.maxHeight = displayMaxHeight;\n    }\n  }\n\n  return (\n    <div\n      className={classNames(className, \"__wab_img-wrapper\")}\n      ref={outerRef as any}\n      style={wrapperStyle}\n    >\n      <img\n        alt=\"\"\n        aria-hidden\n        className=\"__wab_img-spacer-svg\"\n        src={`data:image/svg+xml;base64,${spacerSvgBase64}`}\n        style={spacerStyle}\n      />\n      {makePicture({\n        imageLoader,\n        widthDescs,\n        sizes,\n        src: srcStr,\n        quality,\n        ref: imgRef,\n        style: style ? pick(style, \"objectFit\", \"objectPosition\") : undefined,\n        imgProps,\n        className: \"__wab_img\",\n      })}\n    </div>\n  );\n});\n\nfunction makePicture(opts: {\n  imageLoader?: ImageLoader;\n  widthDescs: WidthDesc[];\n  sizes?: string;\n  src: string;\n  quality?: number;\n  style?: React.CSSProperties;\n  className?: string;\n  imgProps: ImgTagProps;\n  ref?: React.Ref<HTMLImageElement>;\n}) {\n  // If imageLoader is undefined, then this renders to just a normal\n  // <img />.  Else it will render to a <picture> with a <source> for\n  // webp, and srcSet/sizes set according to width requirements.\n  const {\n    imageLoader,\n    widthDescs,\n    src,\n    quality,\n    style,\n    className,\n    sizes,\n    imgProps,\n    ref,\n  } = opts;\n  return (\n    <picture className=\"__wab_picture\">\n      {imageLoader && imageLoader.supportsUrl(src) && (\n        <source\n          type=\"image/webp\"\n          srcSet={widthDescs\n            .map(\n              (wd) =>\n                `${imageLoader.transformUrl({\n                  src,\n                  quality,\n                  width: wd.width,\n                  format: \"webp\",\n                })} ${wd.desc}`\n            )\n            .join(\", \")}\n        />\n      )}\n      <img\n        {...imgProps}\n        ref={ref}\n        className={className}\n        decoding=\"async\"\n        src={\n          imageLoader && imageLoader.supportsUrl(src)\n            ? imageLoader.transformUrl({\n                src,\n                quality,\n                width: widthDescs[widthDescs.length - 1].width,\n              })\n            : src\n        }\n        srcSet={\n          imageLoader && imageLoader.supportsUrl(src)\n            ? widthDescs\n                .map(\n                  (wd) =>\n                    `${imageLoader.transformUrl({\n                      src,\n                      quality,\n                      width: wd.width,\n                    })} ${wd.desc}`\n                )\n                .join(\", \")\n            : undefined\n        }\n        sizes={imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined}\n        style={{\n          ...(style ? pick(style, \"objectFit\", \"objectPosition\") : {}),\n          width: 0,\n          height: 0,\n        }}\n      />\n    </picture>\n  );\n}\n\nconst DEFAULT_SVG_WIDTH = 10000;\n\nfunction isSvg(src: string) {\n  return src.endsWith(\".svg\") || src.startsWith(\"data:image/svg\");\n}\n\ninterface WidthDesc {\n  width?: number;\n  desc: string;\n}\n\nfunction getClosestPresetSize(width: number, fullWidth: number) {\n  const nextBiggerIndex =\n    ALL_SIZES.findIndex((w) => w >= width) ?? ALL_SIZES.length - 1;\n  const nextBigger = ALL_SIZES[nextBiggerIndex];\n  if (nextBigger >= fullWidth) {\n    // If the requested width is larger than the fullWidth,\n    // we just use the original width instead. It's impossible\n    // to make an image bigger than fullWidth!\n    return undefined;\n  } else if (\n    nextBiggerIndex + 1 < ALL_SIZES.length &&\n    fullWidth <= ALL_SIZES[nextBiggerIndex + 1]\n  ) {\n    // If the fullWidth is just between nextBigger and the one after that,\n    // then also might as well just use the original size (so, width is 30,\n    // nextBigger is 32, then we just use the original as long as fullWidth is\n    // less than 48)\n    return undefined;\n  }\n\n  return nextBigger;\n}\n\n/**\n * Computes the appropriate srcSet and sizes to use\n */\nfunction getWidths(\n  width: number | string | undefined,\n  fullWidth: number,\n  extra?: { minWidth: string | number | undefined }\n): { sizes: string | undefined; widthDescs: WidthDesc[] } {\n  const minWidth = extra?.minWidth;\n  const pixelWidth = getPixelLength(width);\n  const pixelMinWidth = getPixelLength(minWidth);\n  if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {\n    // If there's an exact width, then we just need to display it at 1x and 2x density\n    return {\n      widthDescs: [\n        {\n          width: getClosestPresetSize(\n            Math.max(pixelWidth, pixelMinWidth ?? 0),\n            fullWidth\n          ),\n          desc: \"1x\",\n        },\n        {\n          width: getClosestPresetSize(\n            Math.max(pixelWidth, pixelMinWidth ?? 0) * 2,\n            fullWidth\n          ),\n          desc: \"2x\",\n        },\n      ],\n      sizes: undefined,\n    };\n  }\n  // Otherwise we don't know what sizes we'll end up, so we just cap it at\n  // device width.  TODO: do better!\n  const usefulSizes = DEVICE_SIZES.filter(\n    (size) => !fullWidth || size < fullWidth\n  );\n  if (!!fullWidth && usefulSizes.length === 0) {\n    // image fullWidth is smaller than all device sizes.  So all we can do\n    // is offer 1x\n    return {\n      widthDescs: [\n        {\n          width: getClosestPresetSize(fullWidth, fullWidth),\n          desc: \"1x\",\n        },\n      ],\n      sizes: undefined,\n    };\n  }\n  return {\n    widthDescs: usefulSizes.map((size) => ({\n      width: getClosestPresetSize(size, fullWidth),\n      // If this is the last (buggest) useful width, but it is\n      // still within the bounds set by DEVICE_SIZES, then just\n      // use the original, unresized image.  This means if we match\n      // the largest size, we use unresized and best quality image.\n      // We only do this, though, if fullWidth is \"reasonable\" --\n      // smaller than the largest size we would consider.\n      // i === usefulSizes.length - 1 &&\n      // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]\n      //   ? undefined\n      //   : size,\n      desc: `${size}w`,\n    })),\n    sizes: \"100vw\",\n  };\n}\n\nfunction getPixelLength(length: number | string | undefined) {\n  if (length == null || length == \"\") {\n    return undefined;\n  }\n\n  if (typeof length === \"number\") {\n    return length;\n  }\n\n  const parsed = parseNumeric(length);\n  if (parsed && (!parsed.units || parsed.units === \"px\")) {\n    return parsed.num;\n  }\n\n  return undefined;\n}\n\nfunction parseNumeric(val: string) {\n  // Parse strings like \"30\", \"30px\", \"30%\", \"30px /* blah blah */\"\n  const res = val.match(\n    /^\\s*(-?(?:\\d+\\.\\d*|\\d*\\.\\d+|\\d+))\\s*([a-z]*|%)\\s*(?:\\/\\*.*)?$/i\n  );\n  if (res == null) {\n    return undefined;\n  }\n  const num = res[1];\n  const units = res[2];\n  return { num: +num, units };\n}\n\nfunction getImageLoader(loader: \"plasmic\" | ImageLoader | undefined) {\n  if (loader == null) {\n    return undefined;\n  } else if (loader === \"plasmic\") {\n    return PLASMIC_IMAGE_LOADER;\n  } else {\n    return loader;\n  }\n}\n\nconst PLASMIC_IMAGE_LOADER: ImageLoader = {\n  supportsUrl: (src) => {\n    return src.startsWith(\"https://img.plasmic.app\") && !isSvg(src);\n  },\n  transformUrl: (opts) => {\n    const params = [\n      opts.width ? `w=${opts.width}` : undefined,\n      `q=${opts.quality ?? 75}`,\n      opts.format ? `f=${opts.format}` : undefined,\n    ].filter((x) => !!x);\n    return `${opts.src}?${params.join(\"&\")}`;\n  },\n};\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/render/PlasmicImg/index.tsx"],"sourcesContent":["/**\n * Responsive `<img/>` replacement, based on `next/image`\n */\n\nimport classNames from \"classnames\";\nimport React, { CSSProperties } from \"react\";\nimport { pick } from \"../../common\";\nimport { mergeRefs } from \"../../react-utils\";\n\nexport interface ImageLoader {\n  supportsUrl: (url: string) => boolean;\n  transformUrl: (opts: {\n    src: string;\n    width?: number;\n    quality?: number;\n    format?: \"webp\";\n  }) => string;\n}\n\ntype ImgTagProps = Omit<\n  React.ComponentProps<\"img\">,\n  \"src\" | \"srcSet\" | \"ref\" | \"style\"\n>;\n\n// Default image sizes to snap to\n// TODO: make this configurable?\nconst IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];\nconst DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];\nconst ALL_SIZES = [...IMG_SIZES, ...DEVICE_SIZES];\n\nexport interface PlasmicImgProps extends ImgTagProps {\n  /**\n   * Either an object with the src string, and its full width and height,\n   * or just a src string with unknown intrinsic dimensions.\n   */\n  src?:\n    | string\n    | {\n        src:\n          | string\n          | {\n              src: string;\n              height: number;\n              width: number;\n              blurDataURL?: string;\n            };\n        fullHeight: number;\n        fullWidth: number;\n        // We might also get a more precise aspectRatio for SVGs\n        // instead of relyiing on fullWidth / fullHeight, because\n        // those values might be rounded and not so accurate.\n        aspectRatio?: number;\n      };\n\n  /**\n   * className applied to the wrapper element if one is used.\n   */\n  className?: string;\n\n  /**\n   * css width\n   */\n  displayWidth?: number | string;\n\n  /**\n   * css height\n   */\n  displayHeight?: number | string;\n\n  /**\n   * css min-width\n   */\n  displayMinWidth?: number | string;\n\n  /**\n   * css min-height\n   */\n  displayMinHeight?: number | string;\n\n  /**\n   * css max-width\n   */\n  displayMaxWidth?: number | string;\n\n  /**\n   * css max-height\n   */\n  displayMaxHeight?: number | string;\n\n  /**\n   * For variable quality formats like jpg, the quality from 0 to 100\n   */\n  quality?: number;\n\n  /**\n   * ImageLoader to use for loading different dimensions of the image.\n   * If none specified, will not attempt to load different dimensions.\n   */\n  loader?: \"plasmic\" | ImageLoader;\n\n  /**\n   * Style applied to the wrapper element. objectFit and objectPosition\n   * rules are applied to the img element.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Ref for the img element.  The normal <PlasmicImg ref={...} />\n   * prop gives the root element instead, which may be the img element\n   * or a wrapper element\n   */\n  imgRef?: React.Ref<HTMLImageElement>;\n}\n\nexport const PlasmicImg = React.forwardRef(function PlasmicImg(\n  props: PlasmicImgProps,\n  outerRef: React.Ref<HTMLElement>\n) {\n  let {\n    src,\n    className,\n    displayWidth,\n    displayHeight,\n    displayMinWidth,\n    displayMinHeight,\n    displayMaxWidth,\n    displayMaxHeight,\n    quality,\n    loader,\n    imgRef,\n    style,\n    loading,\n    ...rest\n  } = props;\n\n  const imgProps = Object.assign({}, rest, {\n    // Default loading to \"lazy\" if not specified (which is different from the\n    // html img, which defaults to eager!)\n    loading: loading ?? \"lazy\",\n  });\n\n  const { fullWidth, fullHeight, aspectRatio } =\n    typeof src === \"string\" || !src\n      ? { fullWidth: undefined, fullHeight: undefined, aspectRatio: undefined }\n      : src;\n  const srcStr = src\n    ? typeof src === \"string\"\n      ? src\n      : typeof src.src === \"string\"\n      ? src.src\n      : src.src.src\n    : \"\";\n\n  // Assume external image if either dimension is null and use usual <img>\n  if (fullHeight == null || fullWidth == null) {\n    return (\n      <img\n        src={srcStr}\n        className={className}\n        style={style}\n        {...imgProps}\n        loading={loading}\n        ref={mergeRefs(imgRef, outerRef) as any}\n      />\n    );\n  }\n\n  if (\n    isSvg(srcStr) &&\n    (displayHeight == null || displayHeight === \"auto\") &&\n    (displayWidth == null || displayWidth === \"auto\")\n  ) {\n    displayWidth = \"100%\";\n  }\n\n  let computedDisplayWidth = displayWidth;\n  if (\n    fullWidth &&\n    fullHeight &&\n    (!displayWidth || displayWidth === \"auto\") &&\n    !!getPixelLength(displayHeight)\n  ) {\n    // If there's a pixel length specified for displayHeight but not displayWidth,\n    // then we can derive the pixel length for displayWidth.  Having an explicit\n    // displayWidth makes this a fixed-size image, which makes it possible for us to\n    // generate better markup!\n    if (!isSvg(srcStr)) {\n      // We shouldn't do it for SVGs though, because `fullWidth` and\n      // `fullHeight` might have rounded values so the final\n      // `displayWidth` could differ by 1px or so.\n      computedDisplayWidth =\n        (getPixelLength(displayHeight)! * fullWidth) / fullHeight;\n    }\n  }\n\n  let spacerWidth = fullWidth;\n  let spacerHeight = fullHeight;\n  if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {\n    // For SVGs, fullWidth and fullHeight can be rounded values, which would\n    // cause some discrepancy between the actual aspect ratio and the aspect\n    // ratio from those values. So, for those cases, we set large width / height\n    // values to get a more precise ratio from the spacer.\n    spacerWidth = DEFAULT_SVG_WIDTH;\n    spacerHeight = Math.round(spacerWidth / aspectRatio);\n  }\n\n  const { sizes, widthDescs } = getWidths(computedDisplayWidth, fullWidth, {\n    minWidth: displayMinWidth,\n  });\n  const imageLoader = getImageLoader(loader);\n  const spacerSvg = `<svg width=\"${spacerWidth}\" height=\"${spacerHeight}\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>`;\n  const spacerSvgBase64 =\n    typeof window === \"undefined\"\n      ? Buffer.from(spacerSvg).toString(\"base64\")\n      : window.btoa(spacerSvg);\n\n  let wrapperStyle: CSSProperties = { ...(style || {}) };\n  let spacerStyle: CSSProperties = {\n    ...pick(style || {}, \"objectFit\", \"objectPosition\"),\n  };\n\n  if (displayWidth != null && displayWidth !== \"auto\") {\n    // If width is set, set it on the wrapper along with min/max width\n    // and just use `width: 100%` on the spacer\n    spacerStyle.width = \"100%\";\n    // Rely on the styles set by `classname` on the wrapper:\n    // wrapperStyle.width = displayWidth;\n    // wrapperStyle.minWidth = displayMinWidth;\n    // wrapperStyle.maxWidth = displayMaxWidth;\n  } else {\n    // Otherwise, we want auto sizing from the spacer, so set width there.\n    //\n    // But if we have min/max width, it should be set in the wrapper and it\n    // can be percentage values (and we add corresponding min/max width to\n    // 100% in the spacer). In general it ends up with the correct effect,\n    // but some edge cases might make `min-width: 100%` shrink the image more\n    // than it should.\n    spacerStyle.width = displayWidth;\n    wrapperStyle.width = \"auto\";\n    if (displayMinWidth) {\n      spacerStyle.minWidth = \"100%\";\n      // Rely on min-width set by `classname` on the wrapper:\n      // wrapperStyle.minWidth = displayMinWidth;\n    }\n    if (displayMaxWidth != null && displayMaxWidth !== \"none\") {\n      spacerStyle.maxWidth = \"100%\";\n      // Rely on max-width set by `classname` on the wrapper:\n      // wrapperStyle.maxWidth = displayMaxWidth;\n    }\n  }\n\n  if (displayHeight != null && displayHeight !== \"auto\") {\n    spacerStyle.height = \"100%\";\n    // wrapperStyle.height = displayHeight;\n    // wrapperStyle.minHeight = displayMinHeight;\n    // wrapperStyle.maxHeight = displayMaxHeight;\n  } else {\n    spacerStyle.height = displayHeight;\n    wrapperStyle.height = \"auto\";\n    if (displayMinHeight) {\n      spacerStyle.minHeight = \"100%\";\n      // wrapperStyle.minHeight = displayMinHeight;\n    }\n    if (displayMaxHeight != null && displayMaxHeight !== \"none\") {\n      spacerStyle.maxHeight = \"100%\";\n      // wrapperStyle.maxHeight = displayMaxHeight;\n    }\n  }\n\n  return (\n    <div\n      className={classNames(className, \"__wab_img-wrapper\")}\n      ref={outerRef as any}\n      style={wrapperStyle}\n    >\n      <img\n        alt=\"\"\n        aria-hidden\n        className=\"__wab_img-spacer-svg\"\n        src={`data:image/svg+xml;base64,${spacerSvgBase64}`}\n        style={spacerStyle}\n      />\n      {makePicture({\n        imageLoader,\n        widthDescs,\n        sizes,\n        src: srcStr,\n        quality,\n        ref: imgRef,\n        style: style ? pick(style, \"objectFit\", \"objectPosition\") : undefined,\n        imgProps,\n        className: \"__wab_img\",\n      })}\n    </div>\n  );\n});\n\nfunction makePicture(opts: {\n  imageLoader?: ImageLoader;\n  widthDescs: WidthDesc[];\n  sizes?: string;\n  src: string;\n  quality?: number;\n  style?: React.CSSProperties;\n  className?: string;\n  imgProps: ImgTagProps;\n  ref?: React.Ref<HTMLImageElement>;\n}) {\n  // If imageLoader is undefined, then this renders to just a normal\n  // <img />.  Else it will render to a <picture> with a <source> for\n  // webp, and srcSet/sizes set according to width requirements.\n  const {\n    imageLoader,\n    widthDescs,\n    src,\n    quality,\n    style,\n    className,\n    sizes,\n    imgProps,\n    ref,\n  } = opts;\n  return (\n    <picture className=\"__wab_picture\">\n      {imageLoader && imageLoader.supportsUrl(src) && (\n        <source\n          type=\"image/webp\"\n          srcSet={widthDescs\n            .map(\n              (wd) =>\n                `${imageLoader.transformUrl({\n                  src,\n                  quality,\n                  width: wd.width,\n                  format: \"webp\",\n                })} ${wd.desc}`\n            )\n            .join(\", \")}\n        />\n      )}\n      <img\n        {...imgProps}\n        ref={ref}\n        className={className}\n        decoding=\"async\"\n        src={\n          imageLoader && imageLoader.supportsUrl(src)\n            ? imageLoader.transformUrl({\n                src,\n                quality,\n                width: widthDescs[widthDescs.length - 1].width,\n              })\n            : src\n        }\n        srcSet={\n          imageLoader && imageLoader.supportsUrl(src)\n            ? widthDescs\n                .map(\n                  (wd) =>\n                    `${imageLoader.transformUrl({\n                      src,\n                      quality,\n                      width: wd.width,\n                    })} ${wd.desc}`\n                )\n                .join(\", \")\n            : undefined\n        }\n        sizes={imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined}\n        style={{\n          ...(style ? pick(style, \"objectFit\", \"objectPosition\") : {}),\n          width: 0,\n          height: 0,\n        }}\n      />\n    </picture>\n  );\n}\n\nconst DEFAULT_SVG_WIDTH = 10000;\n\nfunction isSvg(src: string) {\n  return src.endsWith(\".svg\") || src.startsWith(\"data:image/svg\");\n}\n\ninterface WidthDesc {\n  width?: number;\n  desc: string;\n}\n\nfunction getClosestPresetSize(width: number, fullWidth: number) {\n  const nextBiggerIndex =\n    ALL_SIZES.findIndex((w) => w >= width) ?? ALL_SIZES.length - 1;\n  const nextBigger = ALL_SIZES[nextBiggerIndex];\n  if (nextBigger >= fullWidth) {\n    // If the requested width is larger than the fullWidth,\n    // we just use the original width instead. It's impossible\n    // to make an image bigger than fullWidth!\n    return undefined;\n  } else if (\n    nextBiggerIndex + 1 < ALL_SIZES.length &&\n    fullWidth <= ALL_SIZES[nextBiggerIndex + 1]\n  ) {\n    // If the fullWidth is just between nextBigger and the one after that,\n    // then also might as well just use the original size (so, width is 30,\n    // nextBigger is 32, then we just use the original as long as fullWidth is\n    // less than 48)\n    return undefined;\n  }\n\n  return nextBigger;\n}\n\n/**\n * Computes the appropriate srcSet and sizes to use\n */\nfunction getWidths(\n  width: number | string | undefined,\n  fullWidth: number,\n  extra?: { minWidth: string | number | undefined }\n): { sizes: string | undefined; widthDescs: WidthDesc[] } {\n  const minWidth = extra?.minWidth;\n  const pixelWidth = getPixelLength(width);\n  const pixelMinWidth = getPixelLength(minWidth);\n  if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {\n    // If there's an exact width, then we just need to display it at 1x and 2x density\n    return {\n      widthDescs: [\n        {\n          width: getClosestPresetSize(\n            Math.max(pixelWidth, pixelMinWidth ?? 0),\n            fullWidth\n          ),\n          desc: \"1x\",\n        },\n        {\n          width: getClosestPresetSize(\n            Math.max(pixelWidth, pixelMinWidth ?? 0) * 2,\n            fullWidth\n          ),\n          desc: \"2x\",\n        },\n      ],\n      sizes: undefined,\n    };\n  }\n  // Otherwise we don't know what sizes we'll end up, so we just cap it at\n  // device width.  TODO: do better!\n  const usefulSizes = DEVICE_SIZES.filter(\n    (size) => !fullWidth || size < fullWidth\n  );\n  if (!!fullWidth && usefulSizes.length === 0) {\n    // image fullWidth is smaller than all device sizes.  So all we can do\n    // is offer 1x\n    return {\n      widthDescs: [\n        {\n          width: getClosestPresetSize(fullWidth, fullWidth),\n          desc: \"1x\",\n        },\n      ],\n      sizes: undefined,\n    };\n  }\n  return {\n    widthDescs: usefulSizes.map((size) => ({\n      width: getClosestPresetSize(size, fullWidth),\n      // If this is the last (buggest) useful width, but it is\n      // still within the bounds set by DEVICE_SIZES, then just\n      // use the original, unresized image.  This means if we match\n      // the largest size, we use unresized and best quality image.\n      // We only do this, though, if fullWidth is \"reasonable\" --\n      // smaller than the largest size we would consider.\n      // i === usefulSizes.length - 1 &&\n      // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]\n      //   ? undefined\n      //   : size,\n      desc: `${size}w`,\n    })),\n    sizes: \"100vw\",\n  };\n}\n\nfunction getPixelLength(length: number | string | undefined) {\n  if (length == null || length == \"\") {\n    return undefined;\n  }\n\n  if (typeof length === \"number\") {\n    return length;\n  }\n\n  const parsed = parseNumeric(length);\n  if (parsed && (!parsed.units || parsed.units === \"px\")) {\n    return parsed.num;\n  }\n\n  return undefined;\n}\n\nfunction parseNumeric(val: string) {\n  // Parse strings like \"30\", \"30px\", \"30%\", \"30px /* blah blah */\"\n  const res = val.match(\n    /^\\s*(-?(?:\\d+\\.\\d*|\\d*\\.\\d+|\\d+))\\s*([a-z]*|%)\\s*(?:\\/\\*.*)?$/i\n  );\n  if (res == null) {\n    return undefined;\n  }\n  const num = res[1];\n  const units = res[2];\n  return { num: +num, units };\n}\n\nfunction getImageLoader(loader: \"plasmic\" | ImageLoader | undefined) {\n  if (loader == null) {\n    return undefined;\n  } else if (loader === \"plasmic\") {\n    return PLASMIC_IMAGE_LOADER;\n  } else {\n    return loader;\n  }\n}\n\nconst PLASMIC_IMAGE_LOADER: ImageLoader = {\n  supportsUrl: (src) => {\n    return src.startsWith(\"https://img.plasmic.app\") && !isSvg(src);\n  },\n  transformUrl: (opts) => {\n    const params = [\n      opts.width ? `w=${opts.width}` : undefined,\n      `q=${opts.quality ?? 75}`,\n      opts.format ? `f=${opts.format}` : undefined,\n    ].filter((x) => !!x);\n    return `${opts.src}?${params.join(\"&\")}`;\n  },\n};\n"],"names":["React"],"mappings":"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"}

package/skinny/dist/states/index.d.ts

@@ -0,0 +1,15 @@
+interface $State {
+    [key: string]: any;
+}
+interface $StateSpec<T> {
+    path: string;
+    initFunc?: ($props: Record<string, any>, $state: $State) => T;
+    initVal?: T;
+    type: "private" | "readonly" | "writable";
+    valueProp?: string;
+    onChangeProp?: string;
+}
+export declare function keyBy<K extends string, V>(list: V[], keyFunc: (v: V) => K): Record<K, V>;
+declare function useVanillaDollarState(specs: $StateSpec<any>[], props: Record<string, any>): $State;
+declare const useDollarState: typeof useVanillaDollarState;
+export default useDollarState;

package/skinny/dist/collection-utils-3487dd27.js

@@ -1,238 +0,0 @@
-import { a as __assign, d as isString } from './tslib.es6-d26ffe68.js';
-import React__default from 'react';
-import { Item, Section } from 'react-stately';
-import { t as toChildArray, g as getElementTypeName } from './react-utils-7c01e440.js';
-import { g as getPlumeType, P as PLUME_STRICT_MODE } from './plume-utils-27cd384f.js';
-
-/**
- * In general, we try not to expose react-aria's Collections API to Plume users.
- * The Collections API is how react-aria users pass data about collections of
- * things using the built-in Item and Section components, which are abstract,
- * metadata-only components that don't render anything but only serve to specify
- * data.  For example, here's how you would use react-spectrum's Picker:
- *
- *   <Picker>
- *     <Section title="Asia">
- *       <Item key="taiwan">Taiwan</Item>
- *       <Item key="japan">Japan</Item>
- *       <Item key="china">China</Item>
- *     </Section>
- *     <Section title="Europe">
- *       <Item key="germany">Germany</Item>
- *       <Item key="france">France</Item>
- *     </Section>
- *   </Picker>
- *
- * You would re-use this same Item/Section components to pass similar things to
- * Menu, Tabs, etc.
- *
- * For Plasmic, this API is too abstract.  The user has explicitly designed components
- * like Select.Option and Select.OptionGroup, and it is weird that they don't actually
- * use these components. It is more natural to do:
- *
- *   <Select>
- *     <Select.OptionGroup title="Asia">
- *       <Select.Option key="taiwan">Taiwan</Select>
- *     </Select.OptionGroup>
- *   </Select>
- *
- * For Plume, we let users directly use the components they designed, both to collect
- * information and to perform actual rendering.  For example, for Plume,
- * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.
- * This means that the Select.Option props will collect the same information Item
- * does.
- *
- * A component like Select.Option then serves two purposes:
- *
- * 1. Allow users to specify the collection of data, like in the above example
- *    Here, we're mainly interested in the props in those ReactElements so
- *    we can pass the Item/Section data onto react-aria's APIs.  We are not
- *    actually rendering these elements.
- * 2. Once react-aria's Collections API has gone through them and built
- *    Collection "nodes", we then create cloned versions of these elements
- *    with the corresponding node passed in as a secret prop.  These ReactElements
- *    are then actually used to _render_ the corresponding Option / OptionGroup.
- *
- * This file contains helper functions to help with implementing the above.
- *
- * Note also that most of the collections-based react-aria components expose
- * a parallel API that accepts a list of "items" and a render prop, instead
- * of list of Item/Section elements.  This is for efficiency, but we are opting
- * to only support the composite-component pattern for now for simplicity.
- */
-/**
- * Given children of a component like Select or Menu, derive the items
- * that we will pass into the Collections API.  These will be
- * ReactElement<ItemLikeProps|SectionLikeProps>[].
- *
- * Will also assign keys to items by their index in the collection,
- * and collect the keys of disabled items.
- */
-function deriveItemsFromChildren(children, opts) {
-    if (!children) {
-        return {
-            items: [],
-            disabledKeys: [],
-        };
-    }
-    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError;
-    // For Plume items without an explicit key, we assign a key as the index
-    // of the collection.
-    var itemCount = 0;
-    var sectionCount = 0;
-    var ensureValue = function (element) {
-        if (!propInChild(element, "value")) {
-            if (opts.requireItemValue && PLUME_STRICT_MODE) {
-                throw new Error("Must specify a \"value\" prop for " + getElementTypeName(element));
-            }
-            else {
-                return cloneChild(element, { value: "" + itemCount++ });
-            }
-        }
-        else {
-            // Still increment count even if key is present, so that the
-            // auto-assigned key really reflects the index
-            itemCount++;
-            return element;
-        }
-    };
-    var disabledKeys = [];
-    var flattenedChildren = function (children) {
-        return toChildArray(children).flatMap(function (child) {
-            var _a;
-            if (React__default.isValidElement(child)) {
-                if (child.type === React__default.Fragment) {
-                    return flattenedChildren(child.props.children);
-                }
-                var type = getPlumeType(child);
-                if (type === itemPlumeType) {
-                    child = ensureValue(child);
-                    var childKey = getItemLikeKey(child);
-                    if (getChildProp(child, "isDisabled") && !!childKey) {
-                        disabledKeys.push(childKey);
-                    }
-                    return [child];
-                }
-                if (type === sectionPlumeType) {
-                    return [
-                        cloneChild(child, {
-                            // key of section doesn't actually matter, just needs
-                            // to be unique
-                            key: (_a = child.key) !== null && _a !== void 0 ? _a : "section-" + sectionCount++,
-                            children: flattenedChildren(getChildProp(child, "children")),
-                        }),
-                    ];
-                }
-            }
-            {
-                throw new Error(invalidChildError !== null && invalidChildError !== void 0 ? invalidChildError : "Unexpected child");
-            }
-        });
-    };
-    return { items: flattenedChildren(children), disabledKeys: disabledKeys };
-}
-function useDerivedItemsFromChildren(children, opts) {
-    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue;
-    return React__default.useMemo(function () {
-        return deriveItemsFromChildren(children, {
-            itemPlumeType: itemPlumeType,
-            sectionPlumeType: sectionPlumeType,
-            invalidChildError: invalidChildError,
-            requireItemValue: requireItemValue,
-        });
-    }, [
-        children,
-        itemPlumeType,
-        sectionPlumeType,
-        invalidChildError,
-        requireItemValue,
-    ]);
-}
-/**
- * Given a Collection node, create the React element that we should use
- * to render it.
- */
-function renderCollectionNode(node) {
-    // node.rendered should already have our item-like or section-like Plume
-    // component elements, so we just need to clone them with a secret
-    // _node prop that we use to render.
-    return cloneChild(node.rendered, {
-        _node: node,
-        key: node.key,
-    });
-}
-/**
- * Renders a item-like or section-like Plume component element into an
- * Item or a Section element.
- */
-function renderAsCollectionChild(child, opts) {
-    var _a;
-    var plumeType = getPlumeType(child);
-    if (plumeType === opts.itemPlumeType) {
-        var option = child;
-        // We look at the children passed to the item-like element, and derive key
-        // or textValue from it if it is a string
-        var content = getChildProp(option, "children");
-        // The children render prop needs to return an <Item/>
-        return (React__default.createElement(Item
-        // We use ItemLike.value if the user explicitly specified a value,
-        // and we fallback to key.  If the user specified neither, then
-        // the Collections API will generate a unique key for this item.
-        , { 
-            // We use ItemLike.value if the user explicitly specified a value,
-            // and we fallback to key.  If the user specified neither, then
-            // the Collections API will generate a unique key for this item.
-            key: getItemLikeKey(option), 
-            // textValue is either explicitly specified by the user, or we
-            // try to derive it if `content` is a string.
-            textValue: (_a = getChildProp(option, "textValue")) !== null && _a !== void 0 ? _a : (isString(content)
-                ? content
-                : propInChild(option, "value")
-                    ? getChildProp(option, "value")
-                    : option.key), "aria-label": getChildProp(option, "aria-label") }, option));
-    }
-    else {
-        var group = child;
-        return (React__default.createElement(Section
-        // Note that we are using the whole section-like element as the title
-        // here, and not group.props.title; we want the entire section-like
-        // Plume element to end up as Node.rendered.
-        , { 
-            // Note that we are using the whole section-like element as the title
-            // here, and not group.props.title; we want the entire section-like
-            // Plume element to end up as Node.rendered.
-            title: group, "aria-label": getChildProp(group, "aria-label"), 
-            // We are flattening and deriving the descendant Options as items here.
-            // group.props.children should've already been cleaned up by
-            // deriveItemsFromChildren()
-            items: getChildProp(group, "children") }, function (c) { return renderAsCollectionChild(c, opts); }));
-    }
-}
-function getItemLikeKey(element) {
-    var _a;
-    return (_a = getChildProp(element, "value")) !== null && _a !== void 0 ? _a : element.key;
-}
-// PlasmicLoader-aware function to get prop from child.
-function getChildProp(child, prop) {
-    return "componentProps" in child.props
-        ? child.props.componentProps[prop]
-        : child.props[prop];
-}
-// PlasmicLoader-aware function to check `if (prop in element.props)`.
-function propInChild(child, prop) {
-    return "componentProps" in child.props
-        ? prop in child.props.componentProps
-        : prop in child.props;
-}
-// PlasmicLoader-aware function to clone React element.
-function cloneChild(child, props) {
-    if (child.type.getPlumeType) {
-        // If React element has getPlumeType(), assume that it is PlasmicLoader,
-        // so add nodeProps to componentProps instead of element props.
-        return React__default.cloneElement(child, __assign({ componentProps: __assign(__assign({}, child.props.componentProps), props) }, (props.key ? { key: props.key } : {})));
-    }
-    return React__default.cloneElement(child, props);
-}
-
-export { renderAsCollectionChild as a, getChildProp as g, renderCollectionNode as r, useDerivedItemsFromChildren as u };
-//# sourceMappingURL=collection-utils-3487dd27.js.map

package/skinny/dist/collection-utils-3487dd27.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"collection-utils-3487dd27.js","sources":["../../src/plume/collection-utils.tsx"],"sourcesContent":["/**\n * In general, we try not to expose react-aria's Collections API to Plume users.\n * The Collections API is how react-aria users pass data about collections of\n * things using the built-in Item and Section components, which are abstract,\n * metadata-only components that don't render anything but only serve to specify\n * data.  For example, here's how you would use react-spectrum's Picker:\n *\n *   <Picker>\n *     <Section title=\"Asia\">\n *       <Item key=\"taiwan\">Taiwan</Item>\n *       <Item key=\"japan\">Japan</Item>\n *       <Item key=\"china\">China</Item>\n *     </Section>\n *     <Section title=\"Europe\">\n *       <Item key=\"germany\">Germany</Item>\n *       <Item key=\"france\">France</Item>\n *     </Section>\n *   </Picker>\n *\n * You would re-use this same Item/Section components to pass similar things to\n * Menu, Tabs, etc.\n *\n * For Plasmic, this API is too abstract.  The user has explicitly designed components\n * like Select.Option and Select.OptionGroup, and it is weird that they don't actually\n * use these components. It is more natural to do:\n *\n *   <Select>\n *     <Select.OptionGroup title=\"Asia\">\n *       <Select.Option key=\"taiwan\">Taiwan</Select>\n *     </Select.OptionGroup>\n *   </Select>\n *\n * For Plume, we let users directly use the components they designed, both to collect\n * information and to perform actual rendering.  For example, for Plume,\n * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.\n * This means that the Select.Option props will collect the same information Item\n * does.\n *\n * A component like Select.Option then serves two purposes:\n *\n * 1. Allow users to specify the collection of data, like in the above example\n *    Here, we're mainly interested in the props in those ReactElements so\n *    we can pass the Item/Section data onto react-aria's APIs.  We are not\n *    actually rendering these elements.\n * 2. Once react-aria's Collections API has gone through them and built\n *    Collection \"nodes\", we then create cloned versions of these elements\n *    with the corresponding node passed in as a secret prop.  These ReactElements\n *    are then actually used to _render_ the corresponding Option / OptionGroup.\n *\n * This file contains helper functions to help with implementing the above.\n *\n * Note also that most of the collections-based react-aria components expose\n * a parallel API that accepts a list of \"items\" and a render prop, instead\n * of list of Item/Section elements.  This is for efficiency, but we are opting\n * to only support the composite-component pattern for now for simplicity.\n */\n\nimport { Node } from \"@react-types/shared\";\nimport React from \"react\";\nimport { Item, Section } from \"react-stately\";\nimport { isString } from \"../common\";\nimport { getElementTypeName, toChildArray } from \"../react-utils\";\nimport { getPlumeType, PLUME_STRICT_MODE } from \"./plume-utils\";\n\nexport interface PlasmicLoaderProps<T> {\n  component: string;\n  componentProps: T;\n}\n\n/**\n * Props for a Plume component that corresponds to an Item\n */\nexport interface ItemLikeProps {\n  /**\n   * value key corresponding to this item. Not required if you use the\n   * `key` prop instead.\n   */\n  value?: string | null;\n\n  /**\n   * The text string value corresponding to this item. Used to support\n   * keyboard type-ahead.  If not specified, then will be derived from\n   * `children` if it is a string, or the `value` or `key`.\n   */\n  textValue?: string;\n\n  /**\n   * aria-label for this item.\n   */\n  \"aria-label\"?: string;\n\n  /**\n   * Primary content label for this item.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * If true, this item will not be selectable.\n   */\n  isDisabled?: boolean;\n}\n\ntype LoaderAwareItemLikeProps =\n  | ItemLikeProps\n  | PlasmicLoaderProps<ItemLikeProps>;\n\n/**\n * Props for a Plume component that corresponds to a Section\n */\nexport interface SectionLikeProps {\n  /**\n   * Heading content of the title\n   */\n  title?: React.ReactNode;\n\n  /**\n   * aria-label for this section\n   */\n  \"aria-label\"?: string;\n\n  /**\n   * A list of items that belong in this group\n   */\n  children?: React.ReactNode;\n}\n\ntype LoaderAwareSectionLikeProps =\n  | SectionLikeProps\n  | PlasmicLoaderProps<SectionLikeProps>;\n\n/**\n * Given children of a component like Select or Menu, derive the items\n * that we will pass into the Collections API.  These will be\n * ReactElement<ItemLikeProps|SectionLikeProps>[].\n *\n * Will also assign keys to items by their index in the collection,\n * and collect the keys of disabled items.\n */\nexport function deriveItemsFromChildren<T extends React.ReactElement>(\n  children: React.ReactNode,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n  }\n) {\n  if (!children) {\n    return {\n      items: [] as T[],\n      disabledKeys: [] as React.Key[],\n    };\n  }\n\n  const { itemPlumeType, sectionPlumeType, invalidChildError } = opts;\n\n  // For Plume items without an explicit key, we assign a key as the index\n  // of the collection.\n  let itemCount = 0;\n  let sectionCount = 0;\n\n  const ensureValue = (element: React.ReactElement) => {\n    if (!propInChild(element, \"value\")) {\n      if (opts.requireItemValue && PLUME_STRICT_MODE) {\n        throw new Error(\n          `Must specify a \"value\" prop for ${getElementTypeName(element)}`\n        );\n      } else {\n        return cloneChild(element, { value: `${itemCount++}` });\n      }\n    } else {\n      // Still increment count even if key is present, so that the\n      // auto-assigned key really reflects the index\n      itemCount++;\n      return element;\n    }\n  };\n\n  const disabledKeys: React.Key[] = [];\n\n  const flattenedChildren = (\n    children: React.ReactNode\n  ): React.ReactElement[] => {\n    return toChildArray(children).flatMap((child) => {\n      if (React.isValidElement(child)) {\n        if (child.type === React.Fragment) {\n          return flattenedChildren(child.props.children);\n        }\n        const type = getPlumeType(child);\n        if (type === itemPlumeType) {\n          child = ensureValue(child);\n          const childKey = getItemLikeKey(child);\n          if (getChildProp(child, \"isDisabled\") && !!childKey) {\n            disabledKeys.push(childKey);\n          }\n          return [child];\n        }\n        if (type === sectionPlumeType) {\n          return [\n            cloneChild(child, {\n              // key of section doesn't actually matter, just needs\n              // to be unique\n              key: child.key ?? `section-${sectionCount++}`,\n              children: flattenedChildren(getChildProp(child, \"children\")),\n            }),\n          ];\n        }\n      }\n\n      if (PLUME_STRICT_MODE) {\n        throw new Error(invalidChildError ?? `Unexpected child`);\n      } else {\n        return [];\n      }\n    });\n  };\n\n  return { items: flattenedChildren(children) as T[], disabledKeys };\n}\n\nexport function useDerivedItemsFromChildren<T extends React.ReactElement>(\n  children: React.ReactNode,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n    invalidChildError?: string;\n    requireItemValue: boolean;\n  }\n) {\n  const {\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n  } = opts;\n  return React.useMemo(() => {\n    return deriveItemsFromChildren<T>(children, {\n      itemPlumeType,\n      sectionPlumeType,\n      invalidChildError,\n      requireItemValue,\n    });\n  }, [\n    children,\n    itemPlumeType,\n    sectionPlumeType,\n    invalidChildError,\n    requireItemValue,\n  ]);\n}\n\n/**\n * Given a Collection node, create the React element that we should use\n * to render it.\n */\nexport function renderCollectionNode(node: Node<any>) {\n  // node.rendered should already have our item-like or section-like Plume\n  // component elements, so we just need to clone them with a secret\n  // _node prop that we use to render.\n  return cloneChild(node.rendered as React.ReactElement, {\n    _node: node,\n    key: node.key,\n  });\n}\n\n/**\n * Renders a item-like or section-like Plume component element into an\n * Item or a Section element.\n */\nexport function renderAsCollectionChild<\n  T extends React.ReactElement<\n    LoaderAwareItemLikeProps | LoaderAwareSectionLikeProps\n  >\n>(\n  child: T,\n  opts: {\n    itemPlumeType: string;\n    sectionPlumeType?: string;\n  }\n) {\n  const plumeType = getPlumeType(child);\n  if (plumeType === opts.itemPlumeType) {\n    const option = child as React.ReactElement<LoaderAwareItemLikeProps>;\n\n    // We look at the children passed to the item-like element, and derive key\n    // or textValue from it if it is a string\n    const content = getChildProp(option, \"children\");\n\n    // The children render prop needs to return an <Item/>\n    return (\n      <Item\n        // We use ItemLike.value if the user explicitly specified a value,\n        // and we fallback to key.  If the user specified neither, then\n        // the Collections API will generate a unique key for this item.\n        key={getItemLikeKey(option)}\n        // textValue is either explicitly specified by the user, or we\n        // try to derive it if `content` is a string.\n        textValue={\n          getChildProp(option, \"textValue\") ??\n          (isString(content)\n            ? content\n            : propInChild(option, \"value\")\n            ? getChildProp(option, \"value\")\n            : option.key)\n        }\n        aria-label={getChildProp(option, \"aria-label\")}\n      >\n        {\n          // Note that what we setting the item-like element as the children\n          // here, and not content; we want the entire item-like Plume element to\n          // end up as Node.rendered.\n        }\n        {option}\n      </Item>\n    );\n  } else {\n    const group = child as React.ReactElement<LoaderAwareSectionLikeProps>;\n    return (\n      <Section\n        // Note that we are using the whole section-like element as the title\n        // here, and not group.props.title; we want the entire section-like\n        // Plume element to end up as Node.rendered.\n        title={group}\n        aria-label={getChildProp(group, \"aria-label\")}\n        // We are flattening and deriving the descendant Options as items here.\n        // group.props.children should've already been cleaned up by\n        // deriveItemsFromChildren()\n        items={getChildProp(group, \"children\") as React.ReactElement[]}\n      >\n        {\n          // We use the same render function to turn descendent Options into Items\n        }\n        {(c: React.ReactElement) => renderAsCollectionChild(c, opts)}\n      </Section>\n    );\n  }\n}\n\nfunction getItemLikeKey(element: React.ReactElement<LoaderAwareItemLikeProps>) {\n  return getChildProp(element, \"value\") ?? element.key;\n}\n\n// PlasmicLoader-aware function to get prop from child.\nexport function getChildProp(child: React.ReactElement, prop: string) {\n  return \"componentProps\" in child.props\n    ? child.props.componentProps[prop]\n    : child.props[prop];\n}\n\n// PlasmicLoader-aware function to check `if (prop in element.props)`.\nfunction propInChild(child: React.ReactElement, prop: string): boolean {\n  return \"componentProps\" in child.props\n    ? prop in child.props.componentProps\n    : prop in child.props;\n}\n\n// PlasmicLoader-aware function to clone React element.\nfunction cloneChild(child: React.ReactElement, props: Record<string, any>) {\n  if ((child.type as any).getPlumeType) {\n    // If React element has getPlumeType(), assume that it is PlasmicLoader,\n    // so add nodeProps to componentProps instead of element props.\n    return React.cloneElement(child, {\n      componentProps: {\n        ...child.props.componentProps,\n        ...props,\n      },\n      ...(props.key ? { key: props.key } : {}),\n    });\n  }\n\n  return React.cloneElement(child, props);\n}\n"],"names":["React"],"mappings":"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"}