@satinhq/kit 0.1.0-beta.0 → 0.1.0-beta.1

package/NOTICE

@@ -12,7 +12,7 @@ is a separately installed build dependency. Consumer Vite builds emit NOTICE.txt
 and licenses.json from their actual emitted module graph, including runtime peers.
 Development dependencies are not assumed to be bundled.
 
-## Satin 0.1.0-beta.0
+## Satin 0.1.0-beta.1
 
 License: MIT
 Source: https://opensource.org/license/mit

package/dist/acknowledgements/inventory.json

@@ -1,7 +1,7 @@
 [
     {
         "name": "Satin",
-        "version": "0.1.0-beta.0",
+        "version": "0.1.0-beta.1",
         "license": "MIT",
         "source": "https://opensource.org/license/mit",
         "text": "MIT License\n\nCopyright (c) 2026 Satin contributors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n",

package/dist/docs/swiftui-reference.md

@@ -1883,7 +1883,7 @@ export function DraftEditor() {
 - `@satinhq/kit:6b1393b088849383b4d58af841b53afabf734a131abd2a0c51e5e47d76a031ee`
 - `@satinhq/kit/vite:63ab5323f1fdbfe3425716de812e63889353f0a7252fdb379ddd29f0113c6c7b`
 - `@satinhq/kit/install:85c36af3f6d918e999f65db362675d8982468350930a540177d3d9809c88ca01`
-- `@satinhq/kit/internal:debba3992b9960c73ceaa33af510cfd6162fbb3271b7807f1041fd9968c4a6e0`
+- `@satinhq/kit/internal:39d720eaa8548f9bf1a0c01ef5868efc9b437c21e18114ef50436047fdbd4e80`
 - `@satinhq/kit/unstable:09d854e967c086ed0eaa8b3decbbd326306e1f35e493b79cc1f375060319a840`
 - `@satinhq/kit/server:1b9db029ea048edc062313e7116510843dab71d9a5630842f778bc45736e3990`
 - `@satinhq/kit/testing:cb9036de4e4b3df41671c759c0fc123b059bd412849ac0796479ead545fa8728`
@@ -1892,4 +1892,4 @@ export function DraftEditor() {
 
 ## Framework source fingerprint
 
-SHA-256 of sorted TS/TSX/CSS source paths and bytes, excluding tests: c4f66a9a5ac0b203be131846ee35fd33d9ec84aaf9fbf8a7dacd1c3278f251e3
+SHA-256 of sorted TS/TSX/CSS source paths and bytes, excluding tests: b5ce591e73a0ec3a6d860cfa0434aa456a6128aa55251eed3e46b4e35ad8d223

package/dist/glass/GlassPresentation.d.ts

@@ -9,6 +9,7 @@ export type GlassPresentationConsumer = Readonly<{
     content: HTMLDivElement;
     scroller: HTMLDivElement;
     tabs?: Readonly<{
+        tint?: string;
         insetHost?: HTMLElement;
         intrinsicWidth?: boolean;
         placement?: 'bottom' | 'top';

package/dist/glass/GlassPresentation.js

@@ -970,7 +970,10 @@ export function GlassPresentation({ consumer }) {
                                     runtimeRef.current?.selectTabAnimated(next);
                                 }, children: tabNames.map((label, index) => (_jsxs("button", { className: index === selectedTab
                                         ? 'satin-lens-tab-item satin-lens-is-selected'
-                                        : 'satin-lens-tab-item', style: tabGlyphStyle(appearance, contentPage, index), type: "button", role: "tab", "data-tab-index": index, "data-satin-tab-role": consumer?.tabs?.items[index]?.role, id: consumer?.tabs?.items[index]?.tabId, "aria-controls": consumer?.tabs?.items[index]?.panelId, disabled: consumer?.tabs?.items[index]?.disabled, "aria-label": consumer?.tabs?.items[index]?.accessibilityLabel ??
+                                        : 'satin-lens-tab-item', style: {
+                                        ...tabGlyphStyle(appearance, contentPage, index, consumer?.tabs?.tint),
+                                        '--satin-tab-tint': consumer?.tabs?.tint,
+                                    }, type: "button", role: "tab", "data-tab-index": index, "data-satin-tab-role": consumer?.tabs?.items[index]?.role, id: consumer?.tabs?.items[index]?.tabId, "aria-controls": consumer?.tabs?.items[index]?.panelId, disabled: consumer?.tabs?.items[index]?.disabled, "aria-label": consumer?.tabs?.items[index]?.accessibilityLabel ??
                                         (tabBarPlacement === 'top' && consumer?.tabs?.items[index]?.role === 'search'
                                             ? typeof label === 'string'
                                                 ? label

package/dist/glass/TabBar.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useControlStyle } from '../public/controlStyle.js';
 import { orderedTabItems, TopTabLabel } from '../tabs/presentation.js';
 import { handleTabKeyDown } from '../tabs/keyboard.js';
 import { readDeviceIdiom } from '../layout/deviceIdiom.js';
@@ -19,6 +20,7 @@ import { useGlassMaterialContext } from './context.js';
 import { resolveTabBarModel, TabBarAccessoryContext } from './tabBarModel.js';
 import {} from './tokens.js';
 export function TabBar({ className, adaptive = true, onShowSidebar, items: declaredItems, onSelect, selected, style, variant = 'regular', ...props }) {
+    const { tint } = useControlStyle();
     const liquid = useContext(MaterialEffectContext);
     const layoutClass = useLayoutClass();
     const metrics = useSafeAreaMetrics();
@@ -83,6 +85,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
             onSelect,
             adaptive,
             variant,
+            tint,
             insetHost: elementRef.current ?? undefined,
             placement: 'top',
             itemFrames,
@@ -96,6 +99,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
         onSelect,
         adaptive,
         variant,
+        tint,
         liquidTop,
         itemFrames,
     ]);
@@ -108,6 +112,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
             onSelect,
             adaptive,
             variant,
+            tint,
             insetHost: elementRef.current ?? undefined,
             intrinsicWidth,
         });
@@ -120,6 +125,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
         onSelect,
         adaptive,
         variant,
+        tint,
         sidebar,
         intrinsicWidth,
     ]);
@@ -146,6 +152,7 @@ export function TabBar({ className, adaptive = true, onShowSidebar, items: decla
     const tabBarStyle = {
         ...style,
         ...(sidebar ? sidebarCssTokens : {}),
+        '--satin-tab-tint': tint,
         '--satin-tab-count': items.length,
         '--satin-tab-selection-offset': `${selectedIndex * 100}%`,
         '--satin-tab-selected-index': selectedIndex,

package/dist/glass/lens/tabGlyphColours.d.ts

@@ -3,13 +3,13 @@ import type { Appearance } from './theme.js';
  * glass mirror; scrolling needs no new GPU readback and no fixture-name lookup.
  * The chroma correction is a first-order fit, pending textured ink acceptance.
  */
-export declare function tabGlyphContextStyle(appearance: Appearance, rgb: readonly number[]): {
+export declare function tabGlyphContextStyle(appearance: Appearance, rgb: readonly number[], tint?: string): {
     '--tab-selected-icon': string;
     '--tab-selected-label': string;
     '--tab-unselected-icon': string;
     '--tab-unselected-label': string;
 };
-export declare function tabGlyphStyle(appearance: Appearance, _background: string, _index: number): {
+export declare function tabGlyphStyle(appearance: Appearance, _background: string, _index: number, tint?: string): {
     '--tab-selected-icon': string;
     '--tab-selected-label': string;
     '--tab-unselected-icon': string;

package/dist/glass/lens/tabGlyphColours.js

@@ -15,7 +15,7 @@ function neutral(appearance, k, kind) {
  * glass mirror; scrolling needs no new GPU readback and no fixture-name lookup.
  * The chroma correction is a first-order fit, pending textured ink acceptance.
  */
-export function tabGlyphContextStyle(appearance, rgb) {
+export function tabGlyphContextStyle(appearance, rgb, tint) {
     const k = luma(rgb);
     const chroma = rgb.reduce((sum, v, i) => sum + (v - k) * axis[i], 0) / norm;
     const colour = (kind) => {
@@ -24,7 +24,8 @@ export function tabGlyphContextStyle(appearance, rgb) {
             .map((v, i) => Math.max(0, Math.min(255, v + chroma * (fit[appearance][2][kind][i] - blueNeutral[i]))).toFixed(3))
             .join(' ')})`;
     };
-    const selected = colour('selected'), unselected = colour('unselected');
+    // Explicit author tint is a semantic colour, not the system-blue vibrancy fit.
+    const selected = tint || colour('selected'), unselected = colour('unselected');
     return {
         '--tab-selected-icon': selected,
         '--tab-selected-label': selected,
@@ -32,6 +33,6 @@ export function tabGlyphContextStyle(appearance, rgb) {
         '--tab-unselected-label': unselected,
     };
 }
-export function tabGlyphStyle(appearance, _background, _index) {
-    return tabGlyphContextStyle(appearance, appearance === 'light' ? [1, 1, 1] : [0, 0, 0]);
+export function tabGlyphStyle(appearance, _background, _index, tint) {
+    return tabGlyphContextStyle(appearance, appearance === 'light' ? [1, 1, 1] : [0, 0, 0], tint);
 }

package/dist/glass/liquidContext.d.ts

@@ -1,6 +1,7 @@
 import type { GlassRegionRegistry } from './regionRegistry.js';
 import type { TabBarProps, TabItemFrame } from './TabBar.js';
 export type RegisteredTabBar = TabBarProps & Readonly<{
+    tint?: string;
     insetHost?: HTMLElement;
     intrinsicWidth?: boolean;
     /** 'top': the regular-width iPad bar, laid out by `itemFrames` inside `insetHost`. */

package/dist/glass/webgpu/productionPrepare.js

@@ -736,7 +736,8 @@ function applyTabGlyphContext(dock, elements, context, geometry, appearance) {
         const sample = context.sample(dock.frameX + 10.5 + ((dock.frameWidth - 20) / tabs.length) * (i + 0.5), dock.frameY + dock.frameHeight / 2 + elements.scroller.scrollTop, TAB_CONTEXT_RADIUS, elements.scroller.scrollTop, elements.scroller.scrollTop + geometry.height);
         if (!sample)
             return;
-        for (const [property, value] of Object.entries(tabGlyphContextStyle(appearance, sample.rgb)))
+        const tint = getComputedStyle(tab).getPropertyValue('--satin-tab-tint').trim();
+        for (const [property, value] of Object.entries(tabGlyphContextStyle(appearance, sample.rgb, tint)))
             tab.style.setProperty(property, value);
     });
 }

package/dist/styles.css

@@ -349,7 +349,7 @@ body[data-satin-document='true'],
 }
 
 [data-satin-tab-item='true'][data-satin-tab-selected='true'] {
-  color: rgb(0 122 255);
+  color: var(--satin-tab-tint, rgb(0 122 255));
 }
 
 [data-satin-tab-icon='true'] {
@@ -387,7 +387,7 @@ body[data-satin-document='true'],
 }
 :where(html[data-satin-appearance='dark'])
   [data-satin-tab-item='true'][data-satin-tab-selected='true'] {
-  color: rgb(64 156 255);
+  color: var(--satin-tab-tint, rgb(64 156 255));
 }
 :where(html[data-satin-appearance='dark']) [data-satin-tab-selection='true'] {
   background: rgb(98 99 107 / 34%);
@@ -1129,7 +1129,7 @@ body[data-satin-document='true'],
   color: inherit;
 }
 [data-satin-tab-placement='top'] [data-satin-tab-selected='true'] {
-  color: var(--satin-sidebar-light-tabTint);
+  color: var(--satin-tab-tint, var(--satin-sidebar-light-tabTint));
   background: var(--satin-sidebar-light-tabSelection);
 }
 [data-satin-tab-placement='top'] [data-satin-tab-label] {
@@ -1162,7 +1162,7 @@ body[data-satin-document='true'],
 :where(html[data-satin-appearance='dark'])
   [data-satin-tab-placement='top']
   [data-satin-tab-selected='true'] {
-  color: var(--satin-sidebar-dark-tabTint);
+  color: var(--satin-tab-tint, var(--satin-sidebar-dark-tabTint));
   background: var(--satin-sidebar-dark-tabSelection);
 }
 
@@ -2261,7 +2261,7 @@ body[data-satin-document='true'],
   white-space: nowrap;
 }
 [data-satin-tab-layout='top'] .satin-lens-tab-item.satin-lens-is-selected small {
-  color: var(--satin-sidebar-light-tabTint);
+  color: var(--satin-tab-tint, var(--satin-sidebar-light-tabTint));
   font-weight: var(--satin-sidebar-tabSelectedFontWeight);
 }
 :where(html[data-satin-appearance='dark'])
@@ -2274,7 +2274,7 @@ body[data-satin-document='true'],
   [data-satin-tab-layout='top']
   .satin-lens-tab-item.satin-lens-is-selected
   small {
-  color: var(--satin-sidebar-dark-tabTint);
+  color: var(--satin-tab-tint, var(--satin-sidebar-dark-tabTint));
 }
 [data-satin-tab-layout='compact'] .satin-lens-tab-items .satin-lens-tab-icon {
   width: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@satinhq/kit",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.1",
   "type": "module",
   "description": "Opinionated single-target framework for agent-generated personal iOS Home Screen apps.",
   "main": "./dist/index.js",
@@ -107,6 +107,7 @@
   "bin": {
     "satin": "./bin/satin.mjs"
   },
+  "homepage": "https://satin.build",
   "scripts": {
     "build": "node scripts/build.mjs",
     "typecheck": "tsc -p tsconfig.json --pretty false",