timvir 0.2.42 → 0.2.44

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # timvir
 
+## 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
+
+- **Avoid cyclic dependencies between Timvir modules** ([#3482](https://github.com/timvir/timvir/pull/3482)) - Cyclic dependencies were causing broken styles at best, and a crash at worst.
+
 ## 0.2.42
 
 ### Patch Changes

package/blocks/Arbitrary/index.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { Exhibit } from 'timvir/blocks';
-import { useBlock, layoutStyles } from 'timvir/core';
+import { useBlock } from 'timvir/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function cx(...args) {
@@ -222,6 +222,14 @@ function decode(output) {
   return new Uint8Array(bytes.reverse());
 }
 
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  }};
+
 const Context = /*#__PURE__*/React.createContext({
   seed: 0
 });

package/blocks/Arbitrary/styles.css

@@ -1,8 +1,28 @@
 @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-ln7xf2 {
     font: inherit;
   }
 
+  .timvir-s-1t4wa6b {
+    margin: 0 0 2rem;
+  }
+
   .timvir-s-9t3ola {
     margin: 1em 0;
   }
@@ -20,7 +40,7 @@
   }
 }
 
-@layer priority2 {
+@layer priority3 {
   .timvir-s-j7gikm {
     border-color: var(--timvir-border-color);
   }
@@ -41,6 +61,18 @@
     border-width: 1px;
   }
 
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+
   .timvir-s-d3ue5d {
     grid-gap: 8px;
   }
@@ -74,7 +106,7 @@
   }
 }
 
-@layer priority3 {
+@layer priority4 {
   .timvir-s-6s0dn4 {
     align-items: center;
   }
@@ -115,6 +147,14 @@
     display: inline-block;
   }
 
+  .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-9flyx0 {
     grid-template-columns: 1fr 100px;
   }
@@ -146,9 +186,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-1e56ztr {
     margin-bottom: 8px;
   }
@@ -161,6 +213,10 @@
     min-height: 36px;
   }
 
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+
   .timvir-s-h8yej3 {
     width: 100%;
   }

package/blocks/Code/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { useBlock, layoutStyles } from 'timvir/core';
+import { useBlock } from 'timvir/core';
 import { codeToHtml } from 'shiki';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -166,6 +166,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 = "div";
 function Code(props$1, ref) {
   const block = useBlock(props$1);

package/blocks/Code/styles.css

@@ -6,9 +6,27 @@
   .timvir-s-idmeni {
     --timvir-b-Code-inlinePadding: max(var(--timvir-b-Code-bleed), 8px);
   }
+
+  .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-1etwjqo {
     margin: 0 calc(-1 * var(--timvir-b-Code-bleed));
   }
@@ -43,6 +61,18 @@
     border-width: 1px;
   }
 
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+
   .timvir-s-e193im {
     padding-inline: var(--timvir-b-Code-inlinePadding);
   }
@@ -69,6 +99,10 @@
     display: block;
   }
 
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
   .timvir-s-1rg5ohu {
     display: inline-block;
   }
@@ -81,9 +115,29 @@
     font-size: .8em;
   }
 
+  .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-jkpybl {
     line-height: 1.1875;
   }
+
+  @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 {
@@ -91,6 +145,10 @@
     margin-top: .3em;
   }
 
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+
   .timvir-s-w2csxc {
     overflow-x: auto;
   }

package/blocks/ColorBar/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { Swatch } from 'timvir/blocks';
-import { useBlock, layoutStyles } from 'timvir/core';
+import { useBlock } from 'timvir/core';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -166,6 +166,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 = "div";
 function ColorBar(props$1, ref) {
   const block = useBlock(props$1);

package/blocks/ColorBar/styles.css

@@ -11,6 +11,14 @@
     --timvir-b-ColorBar-value-margin: 0;
   }
 
+  .timvir-s-1f9b50e {
+    --timvir-margin: var(--timvir-page-margin);
+  }
+
+  .timvir-s-1hz7z82 {
+    --timvir-page-margin: 16px;
+  }
+
   .timvir-s-inzabm:hover {
     --timvir-b-ColorBar-value-borderRadius: 2px;
   }
@@ -18,9 +26,19 @@
   .timvir-s-1bxid8z:hover {
     --timvir-b-ColorBar-value-margin: -3px 1px;
   }
+
+  @media (width >= 48rem) {
+    .timvir-s-1i3za4p.timvir-s-1i3za4p {
+      --timvir-page-margin: 24px;
+    }
+  }
 }
 
 @layer priority2 {
+  .timvir-s-1t4wa6b {
+    margin: 0 0 2rem;
+  }
+
   .timvir-s-1ehn4u0 {
     margin: var(--timvir-b-ColorBar-value-margin);
   }
@@ -31,6 +49,18 @@
     border-radius: var(--timvir-b-ColorBar-value-borderRadius, var(--timvir-b-ColorBar-value-borderRadiusDefault));
   }
 
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+
   .timvir-s-13b6k1y {
     place-items: stretch stretch;
   }
@@ -57,6 +87,14 @@
     grid-auto-flow: row;
   }
 
+  .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-dz4c1r {
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   }
@@ -84,6 +122,18 @@
   .timvir-s-32zglm:hover {
     box-shadow: inset 0 0 0 1px #10161a33, 0 2px 4px #10161a1a, 0 8px 24px #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 {
@@ -95,6 +145,10 @@
     left: 0;
   }
 
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+
   .timvir-s-3m8u43 {
     right: 0;
   }

package/blocks/ColorBook/index.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { layoutStyles } from 'timvir/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styleq = {};
@@ -153,6 +152,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 = "div";
 function ColorBook(props$1, ref) {
   const {

package/blocks/ColorBook/styles.css

@@ -1,10 +1,44 @@
 @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;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+
   .timvir-s-1p3d3bo {
     grid-gap: 16px;
   }
 }
 
-@layer priority2 {
+@layer priority4 {
   .timvir-s-7a106z {
     align-items: start;
   }
@@ -45,6 +79,14 @@
     grid-auto-columns: 1fr;
   }
 
+  .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-o5v014 {
     line-height: 1;
   }
@@ -68,9 +110,21 @@
   .timvir-s-s2hnm7:hover:before {
     opacity: 1;
   }
+
+  @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 priority3 {
+@layer priority5 {
   .timvir-s-frllxf {
     border-bottom-left-radius: 0;
   }
@@ -111,12 +165,16 @@
     margin-top: .8em;
   }
 
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+
   .timvir-s-h8yej3 {
     width: 100%;
   }
 }
 
-@layer priority4 {
+@layer priority6 {
   .timvir-s-b52w3a:before {
     border-radius: 4px;
   }
@@ -126,7 +184,7 @@
   }
 }
 
-@layer priority5 {
+@layer priority7 {
   .timvir-s-ktd1bz:before {
     box-shadow: 0 0 #137cbd00;
   }
@@ -148,7 +206,7 @@
   }
 }
 
-@layer priority6 {
+@layer priority8 {
   .timvir-s-e80sof:before {
     bottom: -2px;
   }

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { layoutStyles } from 'timvir/core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function cx(...args) {
@@ -164,6 +163,19 @@ function props(...styles) {
     return result;
 }
 
+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 Root = "div";
 function Cover(props$1, ref) {
   const {

package/blocks/Cover/styles.css

@@ -1,14 +1,74 @@
 @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;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+}
+
+@layer priority4 {
   .timvir-s-1lliihq {
     display: block;
   }
 
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .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-l1xv1r {
     object-fit: cover;
   }
+
+  @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 priority2 {
+@layer priority5 {
   .timvir-s-5i6pxz {
     height: 35vh;
   }
@@ -16,4 +76,8 @@
   .timvir-s-193iq5w {
     max-width: 100%;
   }
+
+  .timvir-s-euugli {
+    min-width: 0;
+  }
 }

package/blocks/Exhibit/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { useBlock, layoutStyles } from 'timvir/core';
+import { useBlock } from 'timvir/core';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -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 = "div";
 function Exhibit(props$1, ref) {
   const block = useBlock(props$1);