cirrojs 0.0.11 → 0.0.13

package/CHANGELOG.md

@@ -13,6 +13,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [0.0.13] - 2026-06-28
+
+### Changed
+- The layout primitives now embed a human-readable prefix in their generated class names (for example `stack`, `cluster`, and `center-intrinsic`). The class names remain deterministic.
+
+## [0.0.12] - 2026-06-28
+
+### Added
+- Component versions of the layout primitives on the `Layout` interface: `Stack`, `Cluster`, `Center`, `Grid`, `Switcher`, `Frame`, `Reel`, `Imposter`, and `Box`. Each returns a layout-only `<div>` with the computed class name applied, and accepts its primitive's options together with the standard `div` attributes. `sidebar` and `cover` have no component version because they require slot-based markup.
+- `ElementOpt`, the standard `div` attributes accepted by the component versions (inline `style` is excluded to preserve `style-src 'self'`).
+- Exported the per-primitive option types: `StackOpt`, `ClusterOpt`, `CenterOpt`, `GridOpt`, `SwitcherOpt`, `SidebarOpt`, `CoverOpt`, `FrameOpt`, `ReelOpt`, `ImposterOpt`, and `BoxOpt`.
+- `cx`, a helper for joining class names that drops falsy values.
+
 ## [0.0.11] - 2026-06-28
 
 ### Added
@@ -91,7 +104,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## 0.0.1 - 2026-06-15
 - initial release
 
-[Unreleased]: https://github.com/osawa-naotaka/cirro/compare/v0.0.11...HEAD
+[Unreleased]: https://github.com/osawa-naotaka/cirro/compare/v0.0.13...HEAD
+[0.0.13]: https://github.com/osawa-naotaka/cirro/compare/v0.0.12...v0.0.13
+[0.0.12]: https://github.com/osawa-naotaka/cirro/compare/v0.0.11...v0.0.12
 [0.0.11]: https://github.com/osawa-naotaka/cirro/compare/v0.0.10...v0.0.11
 [0.0.10]: https://github.com/osawa-naotaka/cirro/compare/v0.0.9...v0.0.10
 [0.0.9]: https://github.com/osawa-naotaka/cirro/compare/v0.0.8...v0.0.9

package/dist/layout.d.ts

@@ -1,5 +1,6 @@
 import { t as Properties } from "./properties-FKQ-gJeC.js";
 import { t as CssFnT } from "./css-J_tbT4BH.js";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 
 //#region src/layout.d.ts
 interface LayoutDefaults {
@@ -35,58 +36,81 @@ interface CoverSlots {
   root: string;
   centered: string;
 }
+interface StackOpt {
+  gap?: string;
+}
+interface ClusterOpt {
+  gap?: string;
+  wrap?: Properties["flex_wrap"];
+  justify?: Properties["justify_content"];
+  align?: Properties["align_items"];
+}
+interface CenterOpt {
+  max?: string;
+  gutters?: string;
+  intrinsic?: boolean;
+  andText?: boolean;
+}
+interface GridOpt {
+  gap?: string;
+  min?: string;
+}
+interface SwitcherOpt {
+  threshold?: string;
+  gap?: string;
+  limit?: number;
+}
+interface SidebarOpt {
+  sideWidth?: string;
+  contentMin?: string;
+  gap?: string;
+}
+interface CoverOpt {
+  minHeight?: string;
+  gap?: string;
+  padding?: string;
+}
+interface FrameOpt {
+  ratio?: string;
+}
+interface ReelOpt {
+  itemWidth?: string;
+  height?: string;
+  gap?: string;
+}
+interface ImposterOpt {
+  fixed?: boolean;
+  contain?: boolean;
+  margin?: string;
+}
+interface BoxOpt {
+  padding?: string;
+  border?: string;
+}
+type ElementOpt = Omit<ComponentPropsWithoutRef<"div">, "style">;
 interface Layout {
-  stack(opts?: {
-    gap?: string;
-  }): string;
-  cluster(opts?: {
-    gap?: string;
-    justify?: Properties["justify_content"];
-    align?: Properties["align_items"];
-  }): string;
-  center(opts?: {
-    max?: string;
-    gutters?: string;
-    intrinsic?: boolean;
-    andText?: boolean;
-  }): string;
-  grid(opts?: {
-    gap?: string;
-    min?: string;
-  }): string;
-  switcher(opts?: {
-    threshold?: string;
-    gap?: string;
-    limit?: number;
-  }): string;
-  sidebar(opts?: {
-    sideWidth?: string;
-    contentMin?: string;
-    gap?: string;
-  }): SidebarSlots;
-  cover(opts?: {
-    minHeight?: string;
-    gap?: string;
-    padding?: string;
-  }): CoverSlots;
-  frame(opts?: {
-    ratio?: string;
-  }): string;
-  reel(opts?: {
-    itemWidth?: string;
-    height?: string;
-    gap?: string;
-  }): string;
-  imposter(opts?: {
-    fixed?: boolean;
-    contain?: boolean;
-    margin?: string;
-  }): string;
-  box(opts?: {
-    padding?: string;
-    border?: string;
-  }): string;
+  stack(opts?: StackOpt): string;
+  cluster(opts?: ClusterOpt): string;
+  center(opts?: CenterOpt): string;
+  grid(opts?: GridOpt): string;
+  switcher(opts?: SwitcherOpt): string;
+  sidebar(opts?: SidebarOpt): SidebarSlots;
+  cover(opts?: CoverOpt): CoverSlots;
+  frame(opts?: FrameOpt): string;
+  reel(opts?: ReelOpt): string;
+  imposter(opts?: ImposterOpt): string;
+  box(opts?: BoxOpt): string;
+  Stack(props?: StackOpt & ElementOpt): ReactNode;
+  Cluster(props?: ClusterOpt & ElementOpt): ReactNode;
+  Center(props?: CenterOpt & ElementOpt): ReactNode;
+  Grid(props?: GridOpt & ElementOpt): ReactNode;
+  Switcher(props?: SwitcherOpt & ElementOpt): ReactNode;
+  Frame(props?: FrameOpt & ElementOpt): ReactNode;
+  Reel(props?: ReelOpt & ElementOpt): ReactNode;
+  Imposter(props?: ImposterOpt & ElementOpt): ReactNode;
+  Box(props?: BoxOpt & ElementOpt): ReactNode;
 }
+declare function cx(...classes: (string | false | null | undefined)[]): string;
 declare function createLayout(theme?: LayoutTheme): Layout;
 //#endregion
-export { CoverSlots, Layout, LayoutDefaults, LayoutTheme, SidebarSlots, createLayout };
+export { BoxOpt, CenterOpt, ClusterOpt, CoverOpt, CoverSlots, ElementOpt, FrameOpt, GridOpt, ImposterOpt, Layout, LayoutDefaults, LayoutTheme, ReelOpt, SidebarOpt, SidebarSlots, StackOpt, SwitcherOpt, createLayout, cx };

package/dist/layout.js

@@ -1 +1 @@
-import{n as e}from"./css-CPDjsrSK.js";const t={gap:`1rem`,clusterJustify:`flex-start`,clusterAlign:`center`,centerMax:`60ch`,gridMin:`16rem`,switcherThreshold:`30rem`,switcherLimit:4,sidebarContentMin:`65ch`,sidebarSideWidth:`30ch`,coverMinHeight:`100vh`,frameRatio:`16 / 9`};function n(...e){return e.filter(Boolean).join(` `)}function r(r={}){let i=r.css??e({layer:`low`}),a={...t,...r.defaults};function o(e){return i({display:`flex`,flex_direction:`column`,gap:e?.gap??a.stackGap??a.gap})}function s(e){return i({display:`flex`,flex_wrap:e?.wrap??a.clusterWrap??`wrap`,gap:e?.gap??a.clusterGap??a.gap,justify_content:e?.justify??a.clusterJustify,align_items:e?.align??a.clusterAlign})}function c(e){return n(i({box_sizing:`border-box`,margin_inline:`auto`,max_inline_size:e?.max??a.centerMax}),e?.gutters?i({padding_inline:e.gutters}):``,e?.intrinsic?i({display:`flex`,flex_direction:`column`,align_items:`center`}):``,e?.andText?i({text_align:`center`}):``)}function l(e){let t=e?.min??a.gridMin;return i({display:`grid`,gap:e?.gap??a.gridGap??a.gap,grid_template_columns:`repeat(auto-fit, minmax(min(${t}, 100%), 1fr))`})}function u(e){let t=e?.threshold??a.switcherThreshold,r=e?.limit??a.switcherLimit;return n(i({display:`flex`,flex_wrap:`wrap`,gap:e?.gap??a.switcherGap??a.gap}),i({flex_grow:`1`,flex_basis:`calc((${t} - 100%) * 999)`},{selector:`& > *`}),i({flex_basis:`100%`},{selector:`& > :nth-last-child(n+${r+1})`}),i({flex_basis:`100%`},{selector:`& > :nth-last-child(n+${r+1}) ~ *`}))}function d(e){return{root:i({display:`flex`,flex_wrap:`wrap`,gap:e?.gap??a.sidebarGap??a.gap}),side:i({flex_grow:`1`,flex_basis:e?.sideWidth??a.sidebarSideWidth??`auto`}),content:i({flex_grow:`999`,flex_basis:`0`,min_inline_size:e?.contentMin??a.sidebarContentMin})}}function f(e){let t=e?.gap??a.gap,r=i({margin_block:`auto`});return{root:n(i({display:`flex`,flex_direction:`column`,min_block_size:e?.minHeight??a.coverMinHeight,padding:e?.padding??t}),i({margin_block:t},{selector:`& > :not(.${r})`}),i({margin_block_start:`0`},{selector:`& > :first-child:not(.${r})`}),i({margin_block_end:`0`},{selector:`& > :last-child:not(.${r})`})),centered:r}}function p(e){return n(i({aspect_ratio:e?.ratio??a.frameRatio,overflow:`hidden`,display:`flex`,justify_content:`center`,align_items:`center`}),i({inline_size:`100%`,block_size:`100%`,object_fit:`cover`},{selector:`& > img, & > video`}))}function m(e){return n(i({display:`flex`,block_size:e?.height??`auto`,overflow_x:`auto`,overflow_y:`hidden`,gap:e?.gap??a.gap}),i({flex:`0 0 ${e?.itemWidth??`auto`}`},{selector:`& > *`}),i({block_size:`100%`,flex_basis:`auto`,inline_size:`auto`},{selector:`& > img`}))}function h(e){let t=e?.margin??`0px`;return n(i({position:e?.fixed?`fixed`:`absolute`,inset_block_start:`50%`,inset_inline_start:`50%`,transform:`translate(-50%, -50%)`}),e?.contain?i({overflow:`auto`,max_inline_size:`calc(100% - (${t} * 2))`,max_block_size:`calc(100% - (${t} * 2))`}):``)}function g(e){return n(i({box_sizing:`border-box`,padding:e?.padding??a.boxPadding??a.gap}),e?.border?i({border:e.border}):``)}return{stack:o,cluster:s,center:c,grid:l,switcher:u,sidebar:d,cover:f,frame:p,reel:m,imposter:h,box:g}}export{r as createLayout};
+import{n as e}from"./css-CPDjsrSK.js";import{jsx as t}from"react/jsx-runtime";const n={gap:`1rem`,clusterJustify:`flex-start`,clusterAlign:`center`,centerMax:`60ch`,gridMin:`16rem`,switcherThreshold:`30rem`,switcherLimit:4,sidebarContentMin:`65ch`,sidebarSideWidth:`30ch`,coverMinHeight:`100vh`,frameRatio:`16 / 9`};function r(...e){return e.filter(Boolean).join(` `)}function i(i={}){let a=i.css??e({layer:`low`}),o={...n,...i.defaults};function s(e){return a({display:`flex`,flex_direction:`column`,gap:e?.gap??o.stackGap??o.gap},{name:`stack`})}function c(e){return a({display:`flex`,flex_wrap:e?.wrap??o.clusterWrap??`wrap`,gap:e?.gap??o.clusterGap??o.gap,justify_content:e?.justify??o.clusterJustify,align_items:e?.align??o.clusterAlign},{name:`cluster`})}function l(e){return r(a({box_sizing:`border-box`,margin_inline:`auto`,max_inline_size:e?.max??o.centerMax},{name:`center`}),e?.gutters?a({padding_inline:e.gutters},{name:`center-gutters`}):``,e?.intrinsic?a({display:`flex`,flex_direction:`column`,align_items:`center`},{name:`center-intrinsic`}):``,e?.andText?a({text_align:`center`},{name:`center-andText`}):``)}function u(e){let t=e?.min??o.gridMin;return a({display:`grid`,gap:e?.gap??o.gridGap??o.gap,grid_template_columns:`repeat(auto-fit, minmax(min(${t}, 100%), 1fr))`},{name:`grid`})}function d(e){let t=e?.threshold??o.switcherThreshold,n=e?.limit??o.switcherLimit;return r(a({display:`flex`,flex_wrap:`wrap`,gap:e?.gap??o.switcherGap??o.gap},{name:`switcher`}),a({flex_grow:`1`,flex_basis:`calc((${t} - 100%) * 999)`},{selector:`& > *`,name:`switcher-item`}),a({flex_basis:`100%`},{selector:`& > :nth-last-child(n+${n+1})`,name:`switcher-item-last`}),a({flex_basis:`100%`},{selector:`& > :nth-last-child(n+${n+1}) ~ *`,name:`switcher-item-last-child`}))}function f(e){return{root:a({display:`flex`,flex_wrap:`wrap`,gap:e?.gap??o.sidebarGap??o.gap},{name:`sidebar`}),side:a({flex_grow:`1`,flex_basis:e?.sideWidth??o.sidebarSideWidth??`auto`},{name:`sidebar-side`}),content:a({flex_grow:`999`,flex_basis:`0`,min_inline_size:e?.contentMin??o.sidebarContentMin},{name:`sidebar-content`})}}function p(e){let t=e?.gap??o.gap,n=a({margin_block:`auto`},{name:`cover-centered`});return{root:r(a({display:`flex`,flex_direction:`column`,min_block_size:e?.minHeight??o.coverMinHeight,padding:e?.padding??t},{name:`cover`}),a({margin_block:t},{selector:`& > :not(.${n})`,name:`cover-gap`}),a({margin_block_start:`0`},{selector:`& > :first-child:not(.${n})`,name:`cover-gap-first`}),a({margin_block_end:`0`},{selector:`& > :last-child:not(.${n})`,name:`cover-gap-last`})),centered:n}}function m(e){return r(a({aspect_ratio:e?.ratio??o.frameRatio,overflow:`hidden`,display:`flex`,justify_content:`center`,align_items:`center`},{name:`frame`}),a({inline_size:`100%`,block_size:`100%`,object_fit:`cover`},{selector:`& > img, & > video`,name:`frame-img`}))}function h(e){return r(a({display:`flex`,block_size:e?.height??`auto`,overflow_x:`auto`,overflow_y:`hidden`,gap:e?.gap??o.gap},{name:`reel`}),a({flex:`0 0 ${e?.itemWidth??`auto`}`},{selector:`& > *`,name:`reel-child`}),a({block_size:`100%`,flex_basis:`auto`,inline_size:`auto`},{selector:`& > img`,name:`reel-img`}))}function g(e){let t=e?.margin??`0px`;return r(a({position:e?.fixed?`fixed`:`absolute`,inset_block_start:`50%`,inset_inline_start:`50%`,transform:`translate(-50%, -50%)`},{name:`imposter`}),e?.contain?a({overflow:`auto`,max_inline_size:`calc(100% - (${t} * 2))`,max_block_size:`calc(100% - (${t} * 2))`},{name:`imposter-contain`}):``)}function _(e){return r(a({box_sizing:`border-box`,padding:e?.padding??o.boxPadding??o.gap},{name:`box`}),e?.border?a({border:e.border},{name:`box-border`}):``)}function v({gap:e,className:n,children:i,...a}={}){return t(`div`,{className:r(s({gap:e}),n),...a,children:i})}function y({gap:e,wrap:n,justify:i,align:a,className:o,children:s,...l}={}){return t(`div`,{className:r(c({gap:e,wrap:n,justify:i,align:a}),o),...l,children:s})}function b({max:e,gutters:n,intrinsic:i,andText:a,className:o,children:s,...c}={}){return t(`div`,{className:r(l({max:e,gutters:n,intrinsic:i,andText:a}),o),...c,children:s})}function x({gap:e,min:n,className:i,children:a,...o}={}){return t(`div`,{className:r(u({gap:e,min:n}),i),...o,children:a})}function S({threshold:e,gap:n,limit:i,className:a,children:o,...s}={}){return t(`div`,{className:r(d({threshold:e,gap:n,limit:i}),a),...s,children:o})}function C({ratio:e,className:n,children:i,...a}={}){return t(`div`,{className:r(m({ratio:e}),n),...a,children:i})}function w({itemWidth:e,height:n,gap:i,className:a,children:o,...s}={}){return t(`div`,{className:r(h({itemWidth:e,height:n,gap:i}),a),...s,children:o})}function T({fixed:e,contain:n,margin:i,className:a,children:o,...s}={}){return t(`div`,{className:r(g({fixed:e,contain:n,margin:i}),a),...s,children:o})}function E({padding:e,border:n,className:i,children:a,...o}={}){return t(`div`,{className:r(_({padding:e,border:n}),i),...o,children:a})}return{stack:s,cluster:c,center:l,grid:u,switcher:d,sidebar:f,cover:p,frame:m,reel:h,imposter:g,box:_,Stack:v,Cluster:y,Center:b,Grid:x,Switcher:S,Frame:C,Reel:w,Imposter:T,Box:E}}export{i as createLayout,r as cx};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cirrojs",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "React islands SSG with strict CSP (no unsafe-inline). Vite-based, MPA-first.",
   "license": "MIT",
   "type": "module",