styleframe 3.5.1 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # styleframe
 
+## 3.7.0
+
+### Minor Changes
+
+- [#221](https://github.com/styleframe-dev/styleframe/pull/221) [`6d406c2`](https://github.com/styleframe-dev/styleframe/commit/6d406c289b39c666a3fb7468aa3ec08f5a6d316b) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `treeshake` option to remove unused variables from CSS output.
+
+  `root._usage` now tracks both `variables` and `utilities` referenced during config execution and scanner registration. The transpiler's new `treeshake: true` option filters `root.variables` and theme variables down to only those present in `_usage.variables`. The plugin enables treeshaking by default when generating global CSS.
+
+- [#215](https://github.com/styleframe-dev/styleframe/pull/215) [`43f8f4f`](https://github.com/styleframe-dev/styleframe/commit/43f8f4f322d120def777262277aa40c5d84736a8) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Unify fluid and fixed font sizes under `useFontSizeDesignTokens`. Tuple `[min, max]` and object `{ min, max }` values are now treated as **absolute pixel ranges** and routed through `useFluidClamp`; plain `TokenValue` values stay static. The same call accepts mixed fluid + fixed entries.
+
+  ```ts
+  useFontSizeDesignTokens(s, {
+    default: "@font-size.md",
+    md: [16, 18], // fluid
+    sm: "0.8rem", // fixed
+    lg: { min: 18, max: 24 }, // fluid (object form)
+  });
+  ```
+
+  Breaking changes:
+  - `useFluidFontSizeDesignTokens` is removed. Pass ranges directly to `useFontSizeDesignTokens` instead.
+  - `useDesignTokensPreset`'s `fluidFontSize.values` config now expects the unified `FontSizeValue` (`TokenValue | RangeInput<TokenValue>`) per key. Existing `[min, max]` / `{ min, max }` shapes still work but are interpreted as **absolute pixels**, not multipliers of a base.
+  - When `fluidFontSize` is enabled and the user passes their own `fontSize` config, those values now win over the fluid defaults instead of being silently dropped.
+  - `fontSizeValues` is renamed to `fontSizeStaticValues`. The pixel base used by the default fluid scale is emitted as configurable CSS variables (`--font-size--min: 16;` / `--font-size--max: 18;`); each fluid `font-size.*` `calc()` references them via `var()`, so the base can be retargeted by overriding those custom properties.
+
+  Internal: `createUseVariable` gains a `fluid?: boolean` opt-in flag plus a `breakpoint` options-bag arg on the returned composable, so any composable can adopt range-aware values with a single line.
+
+### Patch Changes
+
+- Updated dependencies [[`6d406c2`](https://github.com/styleframe-dev/styleframe/commit/6d406c289b39c666a3fb7468aa3ec08f5a6d316b)]:
+  - @styleframe/core@3.5.0
+  - @styleframe/transpiler@3.3.0
+  - @styleframe/plugin@3.3.0
+
+## 3.6.0
+
+### Minor Changes
+
+- [#204](https://github.com/styleframe-dev/styleframe/pull/204) [`1d57ffa`](https://github.com/styleframe-dev/styleframe/commit/1d57ffaa2861fd05a03f370cf3948d772d6be237) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `Media` recipe — a layout-only multi-part recipe modeled on the Bootstrap/Inkline media object pattern for image-plus-content layouts (comments, posts, list items)
+  - New recipes: `useMediaRecipe`, `useMediaFigureRecipe`, `useMediaBodyRecipe`, `useMediaTitleRecipe`
+  - Root recipe exposes `orientation` (`horizontal`/`vertical`), `align` (`start`/`center`/`end`), and `size` (`sm`/`md`/`lg`) axes — no color or surface styling, so it composes inside Card, Callout, etc.
+  - `useMediaBodyRecipe` sets `min-width: 0` to safely wrap long titles inside flex containers
+  - Designed for nesting (parent Media → child Media inside `MediaBody`) for comment threads and reply chains
+
+- [#208](https://github.com/styleframe-dev/styleframe/pull/208) [`787cf14`](https://github.com/styleframe-dev/styleframe/commit/787cf143c925ac9caacb3df1c72c3aeb2d626419) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add `PageHero` recipe — a multi-part composable for full-width hero sections with color, size, orientation, alignment, and reverse axes
+  - New recipes: `usePageHeroRecipe`, `usePageHeroBodyRecipe`, `usePageHeroHeadlineRecipe`, `usePageHeroTitleRecipe`, `usePageHeroDescriptionRecipe`, `usePageHeroActionsRecipe`, `usePageHeroLinksRecipe`, `usePageHeroImageRecipe`
+  - Container exposes `color` (`light`/`dark`/`neutral` with adaptive dark mode), `size` (`sm`/`md`/`lg`), `orientation` (`vertical`/`horizontal`), `alignment` (`start`/`center`/`end`), and `reverse` axes
+  - Sub-recipes mirror the `size` and `alignment` axes and override alignment to `start` in horizontal orientation for correct two-column layout
+  - Adds a generic `useFilterUtility` and registers it in `useUtilitiesPreset`
+
+- [#209](https://github.com/styleframe-dev/styleframe/pull/209) [`3559b70`](https://github.com/styleframe-dev/styleframe/commit/3559b70dedcc13ad191c78869cd86407b8470604) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Add pagination recipe with `usePaginationRecipe`, `usePaginationItemRecipe`, and `usePaginationEllipsisRecipe`. Supports 3 color modes (light, dark, neutral), 6 style variants (solid, outline, soft, subtle, ghost, link), 3 sizes (sm, md, lg), and active/disabled item states.
+
+- [#203](https://github.com/styleframe-dev/styleframe/pull/203) [`c314dbc`](https://github.com/styleframe-dev/styleframe/commit/c314dbc78872df38efe72d7931faf86afce5ffcc) Thanks [@alexgrozav](https://github.com/alexgrozav)! - Track variable references in `root._usage.variables` for future transpiler optimizations
+  - Add `_usage: { variables: Set<string> }` to `Root` type and initialize in `createRoot()`
+  - Record variable names whenever `ref()` is called or `@`-prefixed syntax is resolved
+
+### Patch Changes
+
+- Updated dependencies [[`8826eda`](https://github.com/styleframe-dev/styleframe/commit/8826edad3fcb2e969024a586a20c2059229d958f), [`8826eda`](https://github.com/styleframe-dev/styleframe/commit/8826edad3fcb2e969024a586a20c2059229d958f), [`8826eda`](https://github.com/styleframe-dev/styleframe/commit/8826edad3fcb2e969024a586a20c2059229d958f), [`8826eda`](https://github.com/styleframe-dev/styleframe/commit/8826edad3fcb2e969024a586a20c2059229d958f), [`8826eda`](https://github.com/styleframe-dev/styleframe/commit/8826edad3fcb2e969024a586a20c2059229d958f), [`24eebba`](https://github.com/styleframe-dev/styleframe/commit/24eebba87c8fa6fc6822e18d67f4c0412192e793), [`c314dbc`](https://github.com/styleframe-dev/styleframe/commit/c314dbc78872df38efe72d7931faf86afce5ffcc)]:
+  - @styleframe/cli@4.0.0
+  - @styleframe/core@3.4.0
+
 ## 3.5.1
 
 ### Patch Changes

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "styleframe",
-  "version": "3.5.1",
+  "version": "3.7.0",
   "bin": {
-    "styleframe": "./dist/cli.cjs"
+    "styleframe": "./dist/cli.js"
   },
   "description": "From simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API — AI-ready by design.",
   "type": "module",
@@ -84,22 +84,22 @@
     "access": "public"
   },
   "dependencies": {
-    "@styleframe/cli": "^3.0.0",
+    "@styleframe/cli": "^4.0.0",
     "@styleframe/license": "^2.0.2"
   },
   "peerDependencies": {
-    "@styleframe/plugin": "^3.2.0",
-    "@styleframe/core": "^3.3.0",
+    "@styleframe/plugin": "^3.3.0",
+    "@styleframe/core": "^3.5.0",
     "@styleframe/loader": "^3.0.1",
-    "@styleframe/transpiler": "^3.2.0"
+    "@styleframe/transpiler": "^3.3.0"
   },
   "devDependencies": {
     "@styleframe/config-typescript": "^3.0.0",
-    "@styleframe/cli": "^3.0.0",
-    "@styleframe/plugin": "^3.2.0",
-    "@styleframe/core": "^3.3.0",
+    "@styleframe/cli": "^4.0.0",
+    "@styleframe/plugin": "^3.3.0",
+    "@styleframe/core": "^3.5.0",
     "@styleframe/loader": "^3.0.1",
-    "@styleframe/transpiler": "^3.2.0",
+    "@styleframe/transpiler": "^3.3.0",
     "@types/node": "^22.15.17",
     "@vitest/coverage-v8": "^3.2.4",
     "bumpp": "^10.1.0",