timvir 0.2.42 → 0.2.44

package/blocks/Viewport/index.js

@@ -1,9 +1,8 @@
 'use client';
 import * as React from 'react';
-import { useArticleComponents, useBlock, layoutStyles } from 'timvir/core';
+import { useArticleComponents, useBlock } from 'timvir/core';
 import { useResizeObserverEntry, useResizeObserver } from 'timvir/hooks';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import * as Icons from 'react-feather';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Code } from 'timvir/blocks';
 
 function cx(...args) {
@@ -168,16 +167,45 @@ function props(...styles) {
     return result;
 }
 
-function Caption(props) {
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  },
+  fullWidth: {
+    kBCFzs: "timvir-s-1ywaqmw",
+    $$css: true
+  }
+};
+
+const SvgCode = props => /*#__PURE__*/jsx("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("path", {
+    d: "m16 18 6-6-6-6M8 6l-6 6 6 6"
+  })
+});
+
+function Caption(props$1) {
   const components = useArticleComponents();
   const {
     src,
     code
-  } = props;
+  } = props$1;
   const [codeRef, setCodeRef] = React.useState(null);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("figcaption", {
-      className: "timvir-s-1dcheo9 timvir-s-jkpybl timvir-s-vgvpxu timvir-s-uxw1ft timvir-s-78zum5 timvir-s-1qughib timvir-s-6s0dn4",
+      ...props(layoutStyles.block, styles$1.figcaption),
       children: [/*#__PURE__*/jsxs("div", {
         children: ["Source:", " ", /*#__PURE__*/jsx(components.a, {
           href: src,
@@ -198,8 +226,9 @@ function Caption(props) {
             }
           }
         },
-        children: /*#__PURE__*/jsx(Icons.Code, {
-          size: "1.6em",
+        children: /*#__PURE__*/jsx(SvgCode, {
+          width: "1.6em",
+          height: "1.6em",
           className: "timvir-s-1lliihq"
         })
       })]
@@ -217,6 +246,18 @@ function Caption(props) {
   });
 }
 var Caption$1 = /*#__PURE__*/React.memo(Caption);
+const styles$1 = {
+  figcaption: {
+    kGuDYH: "timvir-s-1dcheo9",
+    kLWn49: "timvir-s-jkpybl",
+    kMwMTN: "timvir-s-vgvpxu",
+    khDVqt: "timvir-s-uxw1ft",
+    k1xSpc: "timvir-s-78zum5",
+    kjj79g: "timvir-s-1qughib",
+    kGNEyG: "timvir-s-6s0dn4",
+    $$css: true
+  }
+};
 
 function Handle(props) {
   const {
@@ -448,6 +489,7 @@ function Viewport(props$1, ref) {
       code: code
     }), /*#__PURE__*/jsx("div", {
       style: {
+        gridColumn: "1 / -1",
         height: (maxHeight ?? 0) - (height ?? 0),
         transition: "height 0.16s"
       }

package/blocks/Viewport/styles.css

@@ -1,6 +1,10 @@
 @layer priority1;
 
 @layer priority2 {
+  .timvir-s-1t4wa6b {
+    margin: 0 0 2rem;
+  }
+
   .timvir-s-14kudrl {
     margin: 8px 0;
   }
@@ -27,6 +31,18 @@
     grid-column: 2 / span 1;
   }
 
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+
   .timvir-s-diuk5s {
     grid-row: 1 / span 3;
   }
@@ -137,10 +153,18 @@
     font-variant-numeric: tabular-nums;
   }
 
+  .timvir-s-3xbxsf {
+    grid-auto-rows: min-content;
+  }
+
   .timvir-s-jv0b96 {
     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-7tmw4v {
     grid-template-columns: 56px auto 56px;
   }
@@ -200,6 +224,18 @@
   .timvir-s-1kpm4h4:active {
     box-shadow: 0 0 0 1px #10161a1a, 0 0 #10161a00, 0 1px 1px #10161a33;
   }
+
+  @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];
+    }
+  }
+
+  @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];
+    }
+  }
 }
 
 @layer priority5 {
@@ -235,6 +271,10 @@
     margin-top: 12px;
   }
 
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+
   .timvir-s-13vifvy {
     top: 0;
   }
@@ -261,3 +301,17 @@
     background-position: 85vw 0;
   }
 }
+
+.timvir-s-1f9b50e {
+  --timvir-margin: var(--timvir-page-margin);
+}
+
+.timvir-s-1hz7z82 {
+  --timvir-page-margin: 16px;
+}
+
+@media (width >= 48rem) {
+  .timvir-s-1i3za4p.timvir-s-1i3za4p {
+    --timvir-page-margin: 24px;
+  }
+}

package/blocks/WebLink/index.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { useContext, layoutStyles } from 'timvir/core';
+import { useContext } from 'timvir/core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function cx(...args) {
@@ -165,6 +165,14 @@ function props(...styles) {
     return result;
 }
 
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  }};
+
 const Root = "a";
 function WebLink(props$1, ref) {
   const {

package/blocks/WebLink/styles.css

@@ -1,10 +1,30 @@
 @layer priority1 {
+  .timvir-s-1f9b50e {
+    --timvir-margin: var(--timvir-page-margin);
+  }
+
+  .timvir-s-1hz7z82 {
+    --timvir-page-margin: 16px;
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-1i3za4p.timvir-s-1i3za4p {
+      --timvir-page-margin: 24px;
+    }
+  }
+}
+
+@layer priority2 {
+  .timvir-s-1t4wa6b {
+    margin: 0 0 2rem;
+  }
+
   .timvir-s-hkrif2 {
     padding: 12px 14px 14px;
   }
 }
 
-@layer priority2 {
+@layer priority3 {
   .timvir-s-j7gikm {
     border-color: var(--timvir-border-color);
   }
@@ -33,6 +53,18 @@
     flex: 4 180px;
   }
 
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+
   .timvir-s-b3r6kr {
     overflow: hidden;
   }
@@ -50,7 +82,7 @@
   }
 }
 
-@layer priority3 {
+@layer priority4 {
   .timvir-s-1d0dlzq {
     background-color: var(--timvir-secondary-background-color);
   }
@@ -75,10 +107,22 @@
     display: flex;
   }
 
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
   .timvir-s-boafo0 {
     font-size: .75rem;
   }
 
+  .timvir-s-3xbxsf {
+    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-1vbrtjm {
     line-height: 1.1rem;
   }
@@ -110,9 +154,21 @@
   .timvir-s-1dc5b4e:hover, .timvir-s-1bx2y69:active {
     background-color: var(--timvir-sidebar-highlight-color);
   }
+
+  @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];
+    }
+  }
+
+  @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];
+    }
+  }
 }
 
-@layer priority4 {
+@layer priority5 {
   .timvir-s-5yr21d {
     height: 100%;
   }