timvir 0.2.43 → 0.2.45

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # timvir
 
+## 0.2.45
+
+### Patch Changes
+
+- **Use data attributes instead of CSS classes to identify block elements** ([#3511](https://github.com/timvir/timvir/pull/3511)) - Previously we've added well-known class names to certain blocks. This was used to allow external tools to more easily identify blocks on a rendered page. The custom CSS classes have been replaced by data attributes. If you used class selectors to identify blocks, you'll need to replace them with data attribute selectors. For example, instead of `.timvir-b-Exhibit` use `[data-timvir-b-exhibit]`. Note: data attributes are lowercase.
+
+## 0.2.44
+
+### Patch Changes
+
+- **Fix Viewport caption placement** ([#3484](https://github.com/timvir/timvir/pull/3484)) - During the migration to StyleX the layout of the Viewport caption got broken. Now the caption is once again in its correct place.
+- **Trim dependencies** ([#3497](https://github.com/timvir/timvir/pull/3497)) - Removed `downshift` (because unused) and vendored the few icons from `react-feathers`. These dependencies are either unmaintained, contain legacy code, or make Timvir depend on such through their transitive dependencies. These changes improve the security posture of the Timvir package.
+
 ## 0.2.43
 
 ### Patch Changes

package/blocks/Arbitrary/index.js

@@ -264,16 +264,14 @@ function Arbitrary(props$1, ref) {
     }
   }, [props$1.id, block.bus, value.seed]);
   const rootStyleProps = props(layoutStyles.block, styles.root);
-  const inputStyleProps = {
-    className: "timvir-s-c342km timvir-s-1a2a7pz timvir-s-ln7xf2 timvir-s-jbqb8w timvir-s-kh2ocl timvir-s-1717udv timvir-s-h8yej3 timvir-s-1heor9g"
-  };
   return /*#__PURE__*/jsx(Context.Provider, {
     value: value,
     children: /*#__PURE__*/jsxs(Root, {
       ref: ref,
+      "data-timvir-b-arbitrary": true,
       ...rest,
       ...rootStyleProps,
-      className: cx("timvir-b-Arbitrary", rootStyleProps.className, className),
+      className: cx(rootStyleProps.className, className),
       style: {
         margin: "1em 0",
         ...rootStyleProps.style,
@@ -287,11 +285,8 @@ function Arbitrary(props$1, ref) {
             className: "timvir-s-1rg5ohu timvir-s-vgvpxu timvir-s-15ku74s",
             children: "Seed:"
           }), /*#__PURE__*/jsx("input", {
-            ...inputStyleProps,
-            className: cx("timvir-b-Arbitrary-seed", inputStyleProps.className),
-            style: {
-              ...inputStyleProps.style
-            },
+            "data-timvir-b-arbitrary-seed": true,
+            className: "timvir-s-c342km timvir-s-1a2a7pz timvir-s-ln7xf2 timvir-s-jbqb8w timvir-s-kh2ocl timvir-s-1717udv timvir-s-h8yej3 timvir-s-1heor9g",
             placeholder: "Seed",
             value: encode(new TextEncoder().encode(`${value.seed}`)),
             readOnly: true,
@@ -325,7 +320,7 @@ function Arbitrary(props$1, ref) {
     })
   });
 }
-var Arbitrary$1 = /*#__PURE__*/React.forwardRef(Arbitrary);
+var Arbitrary_default = /*#__PURE__*/React.forwardRef(Arbitrary);
 const styles = {
   root: {
     kogj98: "timvir-s-9t3ola",
@@ -333,4 +328,4 @@ const styles = {
   }
 };
 
-export { Arbitrary$1 as Arbitrary, useContext };
+export { Arbitrary_default as Arbitrary, useContext };

package/blocks/Code/index.js

@@ -229,34 +229,29 @@ function Code(props$1, ref) {
     })();
   }, [children, language, highlightedLines]);
   const rootStyleProps = props(layoutStyles.block);
-  const codeStyleProps = {
-    className: "timvir-s-w2csxc timvir-s-6wvzqs timvir-s-sfzzmd timvir-s-1sxf85j timvir-s-15o1dgp timvir-s-idmeni timvir-s-1717udv timvir-s-1etwjqo timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1d0dlzq"
-  };
-  const captionStyleProps = {
-    className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot"
-  };
   return /*#__PURE__*/jsxs(Root, {
     ref: ref,
+    "data-timvir-b-code": true,
     ...rest,
     ...rootStyleProps,
-    className: cx("timvir-b-Code", !state.settled && "timvir-unsettled", className, rootStyleProps.className),
+    className: cx(!state.settled && "timvir-unsettled", className, rootStyleProps.className),
     style: {
       ...rootStyleProps.style,
       ...rest.style
     },
     children: [/*#__PURE__*/jsx("div", {
-      ...codeStyleProps,
-      className: cx("timvir-b-Code-container", codeStyleProps.className),
+      "data-timvir-b-code-container": true,
+      className: "timvir-s-w2csxc timvir-s-6wvzqs timvir-s-sfzzmd timvir-s-1sxf85j timvir-s-i27niw timvir-s-idmeni timvir-s-1717udv timvir-s-1etwjqo timvir-s-mkeg23 timvir-s-1y0btm7 timvir-s-j7gikm timvir-s-1d0dlzq",
       dangerouslySetInnerHTML: {
         __html: state.html
       }
     }), caption && /*#__PURE__*/jsx("div", {
-      ...captionStyleProps,
-      className: cx("timvir-b-Code-caption", captionStyleProps.className),
+      "data-timvir-b-code-caption": true,
+      className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot",
       children: caption
     })]
   });
 }
-var Code$1 = /*#__PURE__*/React.forwardRef(Code);
+var Code_default = /*#__PURE__*/React.forwardRef(Code);
 
-export { Code$1 as Code };
+export { Code_default as Code };

package/blocks/Code/styles.css

@@ -1,6 +1,6 @@
 @layer priority1 {
-  .timvir-s-15o1dgp {
-    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0) * .6666);
+  .timvir-s-i27niw {
+    --timvir-b-Code-bleed: calc(var(--timvir-margin, 0px) * .6666);
   }
 
   .timvir-s-idmeni {

package/blocks/ColorBar/docs/index.mdx

@@ -5,130 +5,45 @@ import { Code, Exhibit } from "timvir/blocks";
 
 A `ColorBar` is a horizontal arrangement of swatches.
 
-<Exhibit>
-  <ColorBar
-    values={[
-      "#D6CCFF",
-      "#C8BCF5",
-      "#BAACEB",
-      "#AC9CE1",
-      "#9E8CD7",
-      "#907DCD",
-      "#826EC3",
-      "#745FBA",
-      "#6550B0",
-      "#5642A6",
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
+<Sample variant="basic" />
 
-<Exhibit>
-  <ColorBar values={["#a0dbc2", "#60c19f", "#1a896b", "#0e6d54"]} style={{ margin: 0 }} />
-</Exhibit>
+Pass the colors as an array of CSS color values.
 
-<Code language="jsx" caption="Pass an array of color values to the component." highlightedLines={[4]}>
+<Code language="jsx" highlightedLines={[4]}>
   <Sample variant="basic" as="source" />
 </Code>
 
-The ColorBar works comfortably with as few as two colors and as many as 20
-
-<Exhibit caption="Two colors in a ColorBar">
-  <ColorBar
-    values={[
-      { value: "#FFE4A0", name: "Yellow Submarine", ancestry: "Yellow 001" },
-      { value: "#A67908", name: "Yellow Spaceship", ancestry: "Yellow 999", contrastValue: "white" },
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
-
-<Exhibit caption="20 colors in a ColorBar">
-  <ColorBar
-    values={[
-      "#FFE4A0",
-      "#FBDE98",
-      "#F6D891",
-      "#F2D28A",
-      "#EDCC82",
-      "#E8C77B",
-      "#E4C173",
-      "#DFBB6C",
-      "#DBB565",
-      "#D6B05D",
-      "#D1AA56",
-      "#CDA54F",
-      "#C89F47",
-      "#C39940",
-      "#BE9438",
-      "#BA8E30",
-      "#B58928",
-      "#B0841F",
-      "#AB7E15",
-      "#A67908",
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
-
-## Text Colors
-
-These are the main text colors that are used in our website. We have a **textPrimary** color for
-headings and body text, **textSecondary** for captions and meta lines, and a third (yet unamed)
-text color for card descriptions.
-
-All text colors are taken from the **Gray** palette.
-
-<Exhibit caption="Text Colors" style={{ margin: "10px 0 20px 0" }}>
-  <ColorBar
-    values={[
-      { value: "rgba(0, 0, 13, 0.89)", name: "textPrimary", ancestry: "Gray 01", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.69)", name: "???? (unnamed)", ancestry: "Gray 03", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.49)", name: "textSecondary", ancestry: "Gray 05" },
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
-<Exhibit caption="Gray Color Palette (00 – 09)" style={{ margin: "-12px 0 20px 0" }}>
-  <ColorBar
-    values={[
-      { value: "rgba(0, 0, 13, 0.99)", name: "Gray 00", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.89)", name: "Gray 01", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.79)", name: "Gray 02", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.69)", name: "Gray 03", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.59)", name: "Gray 04", contrastValue: "white" },
-      { value: "rgba(0, 0, 13, 0.49)", name: "Gray 05", contrastValue: "black" },
-      { value: "rgba(0, 0, 13, 0.39)", name: "Gray 06", contrastValue: "black" },
-      { value: "rgba(0, 0, 13, 0.29)", name: "Gray 07", contrastValue: "black" },
-      { value: "rgba(0, 0, 13, 0.19)", name: "Gray 08", contrastValue: "black" },
-      { value: "rgba(0, 0, 13, 0.09)", name: "Gray 09", contrastValue: "black" },
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
-
-Wrap a `<ColorBar>` in a `<Exhibit>` to add a caption to it. The caption can even include links!
-
-<Exhibit
-  caption={
-    <>
-      Source: <a href="https://hihayk.github.io/scale/#2/7/50/90/0/0/0/-0/1190D7/17/144/215">hihayk.github.io/scale</a>
-    </>
-  }
->
-  <ColorBar
-    values={[
-      "#E7F4FB",
-      "#C9E6F6",
-      "#AAD7F1",
-      "#8BC9EC",
-      "#6DBBE6",
-      "#4EADE1",
-      "#309EDC",
-      "#1190D7",
-      "#0D6CA1",
-      "#09486C",
-    ]}
-    style={{ margin: 0 }}
-  />
-</Exhibit>
+The ColorBar works comfortably with as few as two colors and as many as 20.
+If you specify more colors than that, each individual swatch becomes tiny, especially on smaller viewports.
+
+<ColorBar
+  values={[
+    { value: "#FFE4A0", name: "Yellow Submarine", ancestry: "Yellow 001" },
+    { value: "#A67908", name: "Yellow Spaceship", ancestry: "Yellow 999", contrastValue: "white" },
+  ]}
+/>
+
+<ColorBar
+  values={[
+    "#FFE4A0",
+    "#FBDE98",
+    "#F6D891",
+    "#F2D28A",
+    "#EDCC82",
+    "#E8C77B",
+    "#E4C173",
+    "#DFBB6C",
+    "#DBB565",
+    "#D6B05D",
+    "#D1AA56",
+    "#CDA54F",
+    "#C89F47",
+    "#C39940",
+    "#BE9438",
+    "#BA8E30",
+    "#B58928",
+    "#B0841F",
+    "#AB7E15",
+    "#A67908",
+  ]}
+/>

package/blocks/ColorBar/index.js

@@ -227,7 +227,7 @@ function ColorBar(props$1, ref) {
     })]
   });
 }
-var ColorBar$1 = /*#__PURE__*/React.forwardRef(ColorBar);
+var ColorBar_default = /*#__PURE__*/React.forwardRef(ColorBar);
 const styles = {
   root: {
     kVAEAm: "timvir-s-1n2onr6",
@@ -250,4 +250,4 @@ const styles = {
   }
 };
 
-export { ColorBar$1 as ColorBar };
+export { ColorBar_default as ColorBar };

package/blocks/ColorBook/index.js

@@ -213,7 +213,7 @@ function ColorBook(props$1, ref) {
     }, i))
   });
 }
-var ColorBook$1 = /*#__PURE__*/React.forwardRef(ColorBook);
+var ColorBook_default = /*#__PURE__*/React.forwardRef(ColorBook);
 const styles = {
   root: {
     k1xSpc: "timvir-s-rvj5dj",
@@ -243,4 +243,4 @@ const styles = {
   }
 };
 
-export { ColorBook$1 as ColorBook };
+export { ColorBook_default as ColorBook };

package/blocks/Cover/docs/index.mdx

@@ -7,14 +7,3 @@ import image from "../../../../../assets/daniel-leone-v7daTKlZzaw-unsplash.jpg";
 # Cover
 
 The Cover component is an image that is displayed full-width. Use it above the first h1 heading on the page.
-
-## Usage
-
-Use the `importImage()` macro from the `"@zhif/macro"` package to load the image.
-
-```jsx
-import { Cover } from "timvir/blocks";
-import { importImage } from "@zhif/macro";
-
-<Cover {...importImage("path/to/image.jpg")} />;
-```

package/blocks/Cover/index.js

@@ -201,6 +201,6 @@ function Cover(props$1, ref) {
     })
   });
 }
-var Cover$1 = /*#__PURE__*/React.forwardRef(Cover);
+var Cover_default = /*#__PURE__*/React.forwardRef(Cover);
 
-export { Cover$1 as Cover };
+export { Cover_default as Cover };

package/blocks/Exhibit/index.js

@@ -194,14 +194,12 @@ function Exhibit(props$1, ref) {
       className: "timvir-s-ufnvkl timvir-s-7zdco timvir-s-1sxf85j timvir-s-mkeg23 timvir-s-1tffoc1 timvir-s-ng3xce timvir-s-rxpjvj timvir-s-1717udv"
     }
   }[!!(bleed === 0) << 0];
-  const captionStyleProps = {
-    className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot"
-  };
   return /*#__PURE__*/jsxs(Root, {
     ref: ref,
+    "data-timvir-b-exhibit": true,
     ...rest,
     ...rootStyleProps,
-    className: cx("timvir-b-Exhibit", className, rootStyleProps.className),
+    className: cx(className, rootStyleProps.className),
     style: {
       ...rootStyleProps.style,
       ...style,
@@ -210,9 +208,10 @@ function Exhibit(props$1, ref) {
       [cssVariables.background]: "var(--timvir-background-pattern)"
     },
     children: [/*#__PURE__*/jsx("div", {
+      "data-timvir-b-exhibit-container": true,
       ...BackdropProps,
       ...containerStyleProps,
-      className: cx("timvir-b-Exhibit-container", containerStyleProps.className, BackdropProps?.className),
+      className: cx(containerStyleProps.className, BackdropProps?.className),
       style: {
         ...containerStyleProps.style,
         border: bleed === 0 ? "none" : `1px solid var(${cssVariables.borderColor})`,
@@ -220,13 +219,13 @@ function Exhibit(props$1, ref) {
       },
       children: children
     }), caption && /*#__PURE__*/jsx("div", {
-      ...captionStyleProps,
-      className: cx("timvir-b-Exhibit-caption", captionStyleProps.className),
+      "data-timvir-b-exhibit-caption": true,
+      className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-lwy1ot",
       children: caption
     })]
   });
 }
-var Exhibit$1 = /*#__PURE__*/React.forwardRef(Exhibit);
+var Exhibit_default = /*#__PURE__*/React.forwardRef(Exhibit);
 const cssVariables = {
   bleed: "--timvir-b-Exhibit-bleed",
   borderColor: "--timvir-b-Exhibit-borderColor",
@@ -238,4 +237,4 @@ const styles = {
   }
 };
 
-export { Exhibit$1 as Exhibit };
+export { Exhibit_default as Exhibit };

package/blocks/Font/index.js

@@ -1,7 +1,6 @@
 'use client';
 import { useArticleComponents } from 'timvir/core';
 import * as React from 'react';
-import * as Icons from 'react-feather';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function cx(...args) {
@@ -174,6 +173,26 @@ function props(...styles) {
     return result;
 }
 
+const SvgInfo = props => /*#__PURE__*/jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: 2,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/jsx("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  }), /*#__PURE__*/jsx("path", {
+    d: "M12 16v-4M12 8h.01"
+  })]
+});
+
 const Root = "div";
 function Font(props$1, ref) {
   const components = useArticleComponents();
@@ -240,8 +259,9 @@ function Font(props$1, ref) {
             }
           }
         },
-        children: /*#__PURE__*/jsx(Icons.Info, {
-          size: "1.1em",
+        children: /*#__PURE__*/jsx(SvgInfo, {
+          width: "1.1em",
+          height: "1.1em",
           className: "timvir-s-1n2onr6 timvir-s-s7f9wi"
         })
       })]
@@ -280,6 +300,6 @@ function Font(props$1, ref) {
     })]
   });
 }
-var Font$1 = /*#__PURE__*/React.forwardRef(Font);
+var Font_default = /*#__PURE__*/React.forwardRef(Font);
 
-export { Font$1 as Font };
+export { Font_default as Font };

package/blocks/Grid/index.js

@@ -188,10 +188,26 @@ function Grid(props$1, ref) {
       ...rest.style
     },
     className: cx(className, rootStyleProps.className),
-    children: children
+    children: React.Children.map(children, child => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return child;
+      }
+      const {
+        style,
+        ...props
+      } = child.props;
+      return /*#__PURE__*/React.createElement(child.type, {
+        ...props,
+        style: {
+          margin: 0,
+          gridColumn: "initial",
+          ...style
+        }
+      });
+    })
   });
 }
-var Grid$1 = /*#__PURE__*/React.forwardRef(Grid);
+var Grid_default = /*#__PURE__*/React.forwardRef(Grid);
 const styles = {
   root: {
     k1xSpc: "timvir-s-rvj5dj",
@@ -202,4 +218,4 @@ const styles = {
   }
 };
 
-export { Grid$1 as Grid };
+export { Grid_default as Grid };

package/blocks/Icon/index.js

@@ -136,6 +136,6 @@ function Icon(props, ref) {
     })
   });
 }
-var Icon$1 = /*#__PURE__*/React.forwardRef(Icon);
+var Icon_default = /*#__PURE__*/React.forwardRef(Icon);
 
-export { Icon$1 as Icon };
+export { Icon_default as Icon };

package/blocks/Message/docs/index.mdx

@@ -1,48 +1,57 @@
-import { Exhibit } from "../../Exhibit";
-import { Grid } from "../../Grid";
 import { Swatch } from "../../Swatch";
 import { Code } from "../../Code";
 
 # Message
 
-<Exhibit>
-  <Sample variant="basic" />
-</Exhibit>
+The `<Message>` component is a simple container for messages.
 
-<Code language="jsx">
-  <Sample variant="basic" as="source" />
-</Code>
+<Sample variant="basic" />
 
 ## Variants
 
-<Grid>
-  <Exhibit caption="info" style={{ margin: 0, gridColumn: "initial" }}>
-    <Sample variant="basic" props={{ variant: "info" }} />
-  </Exhibit>
-  <Exhibit caption="warning" style={{ margin: 0, gridColumn: "initial" }}>
-    <Sample variant="basic" props={{ variant: "warning" }} />
-  </Exhibit>
-  <Exhibit caption="alert" style={{ margin: 0, gridColumn: "initial" }}>
-    <Sample variant="basic" props={{ variant: "alert" }} />
-  </Exhibit>
-</Grid>
+The Message block comes in four variants: **plain**, **info**, **warning**, and **alert**.
+Each variant uses a different color and icon.
+Below are examples in which situations to use the variants.
 
-## Content
+<Sample variant="basic">
+This is the **plain** variant. Use it for simple notes, neutral remarks, or secondary information that doesn’t require emphasis.
+
+_Example:_ This component is defined in src/components/Message.tsx.
+
+</Sample>
+
+<Sample variant="basic" props={{ variant: "info" }}>
+This is the **info** variant. Use it to share helpful or contextual information about the code or component.
+
+_Example:_ This hook is useful for managing form state.
+
+</Sample>
 
-Make the title bold and place it before the message, or use a level 3 heading. You can use arbitrary markdown inside the message.
+<Sample variant="basic" props={{ variant: "warning" }}>
+  This is the **warning** variant. Use it to call attention to potential pitfalls, limitations, or special cases to consider when using the code.
 
-<Grid>
-<Exhibit caption="Inline title" style={{ margin: 0, gridColumn: "initial" }}>
-  <Sample variant="basic">
+_Example:_ This component has not been tested with server-side rendering.
 
-**Short Messages** should place the title in front of the message and make it stand out.
+</Sample>
 
-  </Sample>
-</Exhibit>
+<Sample variant="basic" props={{ variant: "alert" }}>
+This is the **alert** variant. Use it for strict requirements, do-nots, or critical caveats that must be followed when using the code.
 
-<Exhibit caption="Title as a separate block elment" style={{ margin: 0, gridColumn: "initial" }}>
-  <Sample variant="basic">
+_Example:_ You must not use this component inside a React Suspense boundary.
 
+</Sample>
+
+## Content
+
+You can use arbitrary markdown inside the message, or even blocks.
+Note that not all combinations have been exhaustively tested.
+If you come across markup that doesn't render well, please raise an issue in the Timvir project.
+
+<Sample variant="basic">
+  **Short Messages** should place the title in front of the message and make it stand out.
+</Sample>
+
+<Sample variant="basic">
 ### Longer Messages
 
 Longer messages should make the title a separate block element. This body uses [links](#) and _italic_ text.
@@ -50,10 +59,7 @@ Longer messages should make the title a separate block element. This body uses [
 And multiple paragraphs. And even a component:
 
 <Swatch value="#FF00FF" />
-
-  </Sample>
-</Exhibit>
-</Grid>
+</Sample>
 
 ## References