timvir 0.2.50 → 0.2.52

package/blocks/Swatch/styles.css

@@ -75,8 +75,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-l56j7k {
@@ -104,14 +104,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    .timvir-s-5diife.timvir-s-5diife {
+      grid-template-columns: [le]1fr var(--timvir-page-margin)[lex]minmax(0,12rem)[lc]48rem[rc]minmax(0,12rem)[rex]var(--timvir-page-margin) 1fr[re];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/Viewport/Viewport.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "div";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     /**
      * URL that should be loaded in the viewport. Can be absolute or relative.
      */
@@ -13,5 +13,5 @@ interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
      */
     code?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export declare function Viewport(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Viewport/docs/index.mdx

@@ -2,13 +2,12 @@ import { Viewport } from "..";
 
 # Viewport
 
-The `<Viewport>` component is a full-width component which is a lightly interactive wrapper around an `<iframe>`.
-The viewport can be resized to simulate different device widths. The height of the iframe will automatically adjust
-to the iframe content.
+> A resizable iframe wrapper for previewing content at different device widths.
 
-The component does not provide the full functionality of the browsers responsive device mode simulation. In particular,
-it can't simulate network / CPU throttling, nor can it change the user agent. It's purpose is to provide a simple
-interface to test your components at different viewport widths.
+<Viewport src="/docs/components/Grid/samples/basic" />
+
+The height of the iframe automatically adjusts to fit the content.
+Note that it does not replicate the browser's full responsive device mode: network and CPU throttling, as well as user agent changes, are not supported.
 
 Since `<Viewport>` uses an `<iframe>`, you must provide a page which can be loaded into it. If you used the timvir
 cli to scaffold your component, you already have one such sample (in `src/components/…/samples/basic.tsx`). Make that
@@ -16,8 +15,6 @@ sample available via a Next.js page and load it into the `<Viewport>`.
 
 See also [Concepts: Component Sample](/concepts/component-sample).
 
-<Viewport src="/docs/components/Grid/samples/basic" />
-
 ## Loading Behaviour
 
 The `<Viewport>` displays a gray, animated background while the iframe is loading.

package/blocks/Viewport/index.d.ts

@@ -1 +1 @@
-export { default as Viewport } from "./Viewport";
+export { Viewport } from "./Viewport";

package/blocks/Viewport/index.js

@@ -248,7 +248,6 @@ function Caption(props$1) {
     })]
   });
 }
-var Caption$1 = /*#__PURE__*/React.memo(Caption);
 const styles$1 = {
   figcaption: {
     kGuDYH: "timvir-s-1dcheo9",
@@ -292,7 +291,6 @@ function Handle(props) {
     })
   });
 }
-var Handle$1 = /*#__PURE__*/React.memo(Handle);
 
 const height = 16;
 function Ruler(props) {
@@ -328,7 +326,7 @@ function Ruler(props) {
 }
 
 const Root = "div";
-function Viewport(props$1, ref) {
+function Viewport(props$1) {
   const block = useBlock(props$1);
   const {
     src,
@@ -393,7 +391,6 @@ function Viewport(props$1, ref) {
   const rootStyleProps = props(layoutStyles.block, layoutStyles.fullWidth, styles.root);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs(Root, {
-      ref: ref,
       "data-timvir-b-viewport": true,
       ...rest,
       className: cx(!state.settled && "timvir-unsettled", className, rootStyleProps.className),
@@ -422,7 +419,7 @@ function Viewport(props$1, ref) {
                   className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-1h3vnj2 timvir-s-10r4kp7 timvir-s-b3r6kr"
                 },
                 1: {
-                  className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-10r4kp7 timvir-s-b3r6kr timvir-s-1c74tu6 timvir-s-10e4vud timvir-s-a4qsjk timvir-s-1bx2yh timvir-s-1esw782 timvir-s-dftl3q timvir-s-9ncquh timvir-s-1w911z timvir-s-1nj7uno"
+                  className: "timvir-s-wonfvy timvir-s-w75i6v timvir-s-1n2onr6 timvir-s-98rzlu timvir-s-pyat2d timvir-s-10r4kp7 timvir-s-b3r6kr timvir-s-1c74tu6 timvir-s-10e4vud timvir-s-a4qsjk timvir-s-1bx2yh timvir-s-1esw782 timvir-s-dftl3q timvir-s-9emw9s timvir-s-1w911z timvir-s-1nj7uno"
                 }
               }[!!(height === undefined) << 0],
               style: {
@@ -474,12 +471,12 @@ function Viewport(props$1, ref) {
                   pointerEvents: height === undefined ? "none" : undefined
                 }
               })
-            }), /*#__PURE__*/jsx(Handle$1, {
+            }), /*#__PURE__*/jsx(Handle, {
               gridColumn: "1",
               lock: lock,
               edge: "left",
               iframeRef: iframeRef
-            }), /*#__PURE__*/jsx(Handle$1, {
+            }), /*#__PURE__*/jsx(Handle, {
               gridColumn: "3",
               lock: lock,
               edge: "right",
@@ -491,7 +488,7 @@ function Viewport(props$1, ref) {
         containerWidth: svgROE?.contentRect.width,
         viewportWidth: width
       })]
-    }), /*#__PURE__*/jsx(Caption$1, {
+    }), /*#__PURE__*/jsx(Caption, {
       src: src,
       code: code
     }), /*#__PURE__*/jsx("div", {
@@ -503,7 +500,6 @@ function Viewport(props$1, ref) {
     })]
   });
 }
-var Viewport_default = /*#__PURE__*/React.forwardRef(Viewport);
 const styles = {
   root: {
     ktR8K2: "timvir-s-1vjgj0v",
@@ -512,4 +508,4 @@ const styles = {
   }
 };
 
-export { Viewport_default as Viewport };
+export { Viewport };

package/blocks/Viewport/internal/Caption.d.ts

@@ -1,8 +1,6 @@
-import * as React from "react";
 interface Props {
     src: string;
     code?: string;
 }
-declare function Caption(props: Props): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof Caption>;
-export default _default;
+export declare function Caption(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Viewport/internal/Handle.d.ts

@@ -1,10 +1,9 @@
-import * as React from "react";
+import type * as React from "react";
 interface Props {
     gridColumn: string;
     lock: React.MutableRefObject<string>;
     edge: "left" | "right";
     iframeRef: React.RefObject<null | HTMLIFrameElement>;
 }
-declare function Handle(props: Props): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof Handle>;
-export default _default;
+export declare function Handle(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Viewport/internal/Ruler.d.ts

@@ -2,5 +2,5 @@ interface Props {
     containerWidth?: number;
     viewportWidth?: number;
 }
-declare function Ruler(props: Props): import("react/jsx-runtime").JSX.Element;
-export default Ruler;
+export declare function Ruler(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/Viewport/internal/index.d.ts

@@ -1,3 +1,3 @@
-export { default as Caption } from "./Caption";
-export { default as Handle } from "./Handle";
-export { default as Ruler } from "./Ruler";
+export { Caption } from "./Caption";
+export { Handle } from "./Handle";
+export { Ruler } from "./Ruler";

package/blocks/Viewport/styles.css

@@ -101,7 +101,7 @@
     animation-timing-function: linear;
   }
 
-  .timvir-s-9ncquh {
+  .timvir-s-9emw9s {
     background-image: linear-gradient(to right, #fafafa 0%, #f4f4f4 25%, #fafafa 40%);
   }
 
@@ -161,8 +161,8 @@
     grid-column-gap: 8px;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-7tmw4v {
@@ -226,14 +226,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    .timvir-s-5diife.timvir-s-5diife {
+      grid-template-columns: [le]1fr var(--timvir-page-margin)[lex]minmax(0,12rem)[lc]48rem[rc]minmax(0,12rem)[rex]var(--timvir-page-margin) 1fr[re];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }

package/blocks/WebLink/WebLink.d.ts

@@ -3,8 +3,8 @@ import * as React from "react";
  * The underlying DOM element which is rendered by this component.
  */
 declare const Root = "a";
-interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+interface Props extends React.ComponentPropsWithRef<typeof Root> {
     url: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
-export default _default;
+export declare function WebLink(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/blocks/WebLink/docs/index.mdx

@@ -2,7 +2,9 @@ import { WebLink } from "..";
 
 # WebLink
 
-`<WebLink>` is a link to an website, displayed as rich media (title, description, and opengraph image).
+> A link to a website displayed as rich media with title, description, and image.
+
+<WebLink url="https://tangled.sh" />
 
 ## Examples
 

package/blocks/WebLink/index.d.ts

@@ -1 +1 @@
-export { default as WebLink } from "./WebLink";
+export { WebLink } from "./WebLink";

package/blocks/WebLink/index.js

@@ -174,7 +174,7 @@ const layoutStyles = {
   }};
 
 const Root = "a";
-function WebLink(props$1, ref) {
+function WebLink(props$1) {
   const {
     url,
     className,
@@ -199,7 +199,6 @@ function WebLink(props$1, ref) {
   const image = metadata?.open_graph?.images?.[0]?.url;
   const rootStyleProps = props(layoutStyles.block, styles.root);
   return /*#__PURE__*/jsxs(Root, {
-    ref: ref,
     "data-timvir-b-weblink": true,
     href: url,
     target: "_blank",
@@ -242,7 +241,6 @@ function WebLink(props$1, ref) {
     })]
   });
 }
-var WebLink_default = /*#__PURE__*/React.forwardRef(WebLink);
 const styles = {
   root: {
     kmkexE: "timvir-s-zhuw26",
@@ -265,4 +263,4 @@ async function defaultUnfurl(url) {
   return fetch(`https://timvir.dev/api/unfurl?url=${encodeURIComponent(url)}`).then(res => res.json());
 }
 
-export { WebLink_default as WebLink };
+export { WebLink };

package/blocks/WebLink/styles.css

@@ -119,8 +119,8 @@
     grid-auto-rows: min-content;
   }
 
-  .timvir-s-12c0rpe {
-    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  .timvir-s-1u7e2r6 {
+    grid-template-columns: [le]var(--timvir-page-margin)[lex lc]1fr[rc rex]var(--timvir-page-margin)[re];
   }
 
   .timvir-s-1vbrtjm {
@@ -156,14 +156,14 @@
   }
 
   @media (width >= 72rem) {
-    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
-      grid-template-columns: [le] 1fr var(--timvir-page-margin) [lex] minmax(0, 12rem) [lc] 48rem[rc] minmax(0, 12rem) [rex] var(--timvir-page-margin) 1fr[re];
+    .timvir-s-5diife.timvir-s-5diife {
+      grid-template-columns: [le]1fr var(--timvir-page-margin)[lex]minmax(0,12rem)[lc]48rem[rc]minmax(0,12rem)[rex]var(--timvir-page-margin) 1fr[re];
     }
   }
 
   @media (width >= 48rem) {
-    .timvir-s-9q0i6z.timvir-s-9q0i6z {
-      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    .timvir-s-1s3i72i.timvir-s-1s3i72i {
+      grid-template-columns: [le]var(--timvir-page-margin)[lex]1fr[lc]minmax(0,48rem)[rc]1fr[rex]var(--timvir-page-margin)[re];
     }
   }
 }