@a-type/ui 6.0.64 → 6.0.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/arbor/arbor.d.ts +1 -1
  2. package/dist/components/provider/Provider.js +1 -1
  3. package/dist/components/provider/Provider.js.map +1 -1
  4. package/dist/hooks/useTitleBarColor.d.ts +1 -3
  5. package/dist/hooks/useTitleBarColor.js +64 -6
  6. package/dist/hooks/useTitleBarColor.js.map +1 -1
  7. package/dist/hooks/useTitleBarColor.stories.js +1 -1
  8. package/dist/hooks/useTitleBarColor.stories.js.map +1 -1
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.js +1 -0
  11. package/dist/index.js.map +1 -1
  12. package/package.json +3 -3
  13. package/src/components/provider/Provider.tsx +1 -1
  14. package/src/hooks/useTitleBarColor.stories.tsx +1 -1
  15. package/src/hooks/useTitleBarColor.ts +73 -10
  16. package/src/index.ts +2 -0
package/dist/arbor/arbor.d.ts CHANGED
@@ -1116,7 +1116,7 @@ export declare function presetAtype<TColors extends DefaultColorRangeName = Defa
1116
1116
  }]>;
1117
1117
  }, "focusRing"> & {
1118
1118
  focusRing: import("@arbor-css/core").ArborFunction<import("@arbor-css/core").FunctionParams>;
1119
- }, Omit<Omit<Omit<{}, "fill" | "stroke" | "accent" | "borderColor" | "shadow" | "ring" | "fg" | "bg" | "accentLighter" | "accentHeavier" | "accentDesaturated" | "accentSaturated" | "accentFaded" | "bgLighter" | "bgHeavier" | "bgDesaturated" | "bgSaturated" | "bgFaded" | "borderColorLighter" | "borderColorHeavier" | "borderColorDesaturated" | "borderColorSaturated" | "borderColorFaded" | "fillLighter" | "fillHeavier" | "fillDesaturated" | "fillSaturated" | "fillFaded" | "fgLighter" | "fgHeavier" | "fgDesaturated" | "fgSaturated" | "fgFaded" | "strokeLighter" | "strokeHeavier" | "strokeDesaturated" | "strokeSaturated" | "strokeFaded"> & {
1119
+ }, Omit<Omit<Omit<{}, "shadow" | "fill" | "stroke" | "accent" | "borderColor" | "ring" | "fg" | "bg" | "accentLighter" | "accentHeavier" | "accentDesaturated" | "accentSaturated" | "accentFaded" | "bgLighter" | "bgHeavier" | "bgDesaturated" | "bgSaturated" | "bgFaded" | "borderColorLighter" | "borderColorHeavier" | "borderColorDesaturated" | "borderColorSaturated" | "borderColorFaded" | "fillLighter" | "fillHeavier" | "fillDesaturated" | "fillSaturated" | "fillFaded" | "fgLighter" | "fgHeavier" | "fgDesaturated" | "fgSaturated" | "fgFaded" | "strokeLighter" | "strokeHeavier" | "strokeDesaturated" | "strokeSaturated" | "strokeFaded"> & {
1120
1120
  readonly shadow: import("@arbor-css/core").ArborMixin<readonly [{
1121
1121
  readonly name: "--shadow";
1122
1122
  readonly fallback: "0 0 0 0 transparent";
package/dist/components/provider/Provider.js CHANGED
@@ -17,7 +17,7 @@ export function Provider({ children, disableParticles, disableViewportOffset, vi
17
17
  ? virtualKeyboardBehavior
18
18
  : 'displace';
19
19
  useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
20
- useThemedTitleBar('gray', 'wash', undefined, disableTitleBarColor);
20
+ useThemedTitleBar('--m-color-main-paper', disableTitleBarColor);
21
21
  const otherStuff = (_jsxs(_Fragment, { children: [_jsx(IconSpritesheet, {}), _jsx(Toaster, {}), manifestPath === false ? null : (_jsx(PwaInstall, { manifestPath: manifestPath }))] }));
22
22
  if (disableParticles)
23
23
  return (_jsx(ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: _jsx(DefaultToastProvider, { children: _jsxs(TooltipProvider, { children: [children, otherStuff] }) }) }));
package/dist/components/provider/Provider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EACN,iBAAiB,EACjB,+BAA+B,EAC/B,uBAAuB,GACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,+BAA+B,EAAE,CAAC;IAClC,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,KAAG,EACV,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,GAAI,CAC1C,IACC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACI,GACC,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACI,GACC,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}
1
+ {"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EACN,iBAAiB,EACjB,+BAA+B,EAC/B,uBAAuB,GACvB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAWtD;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,EACpC,oBAAoB,EACpB,YAAY,GACG;IACf,uBAAuB,CAAC,qBAAqB,CAAC,CAAC;IAC/C,+BAA+B,EAAE,CAAC;IAClC,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,0BAA0B,CAAC,gCAAgC,CAAC,CAAC;IAC7D,iBAAiB,CAAC,sBAAsB,EAAE,oBAAoB,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,CAClB,8BACC,KAAC,eAAe,KAAG,EACnB,KAAC,OAAO,KAAG,EACV,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,KAAC,UAAU,IAAC,YAAY,EAAE,YAAY,GAAI,CAC1C,IACC,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,MAAC,eAAe,eACd,QAAQ,EACR,UAAU,IACM,GACI,GACC,CACzB,CAAC;IAEH,OAAO,CACN,KAAC,aAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,KAAC,oBAAoB,cACpB,KAAC,eAAe,cACf,MAAC,aAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACI,GACC,CACzB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,MAAM,UAAU,SAAS;IACxB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AAClC,CAAC"}
package/dist/hooks/useTitleBarColor.d.ts CHANGED
@@ -6,6 +6,4 @@ export declare function useSetTitleBarColor(): {
6
6
  setColor: (color: string) => void;
7
7
  resetColor: () => void;
8
8
  };
9
- export declare function useThemedTitleBar(paletteOrName: any, value: any,
10
- /** If not provided, will inherit from app */
11
- mode?: 'light' | 'dark', skip?: boolean): void;
9
+ export declare function useThemedTitleBar(colorToken: string, skip?: boolean): void;
package/dist/hooks/useTitleBarColor.js CHANGED
@@ -1,5 +1,6 @@
1
1
  var _a;
2
- import { useCallback } from 'react';
2
+ import { useCallback, useEffect, useSyncExternalStore } from 'react';
3
+ import { useResolvedColorMode } from '../colorMode.js';
3
4
  let defaultColor = '#ffffff';
4
5
  function getCurrentColor() {
5
6
  var _a;
@@ -29,16 +30,73 @@ function changeThemeColor(color) {
29
30
  console.log('set title bar color', color);
30
31
  }
31
32
  export function useTitleBarColor(color) {
32
- /* TODO: rewrite this */
33
+ const colorMode = useResolvedColorMode();
34
+ useEffect(() => {
35
+ var _a, _b;
36
+ const finalColor = typeof color === 'string'
37
+ ? color
38
+ : colorMode === 'dark'
39
+ ? color.dark
40
+ : color.light;
41
+ const previousColor = (_b = (_a = document
42
+ .querySelector('meta[name=theme-color]')) === null || _a === void 0 ? void 0 : _a.getAttribute('content')) !== null && _b !== void 0 ? _b : defaultColor;
43
+ changeThemeColor(finalColor);
44
+ return () => {
45
+ changeThemeColor(previousColor);
46
+ };
47
+ }, [color, colorMode]);
33
48
  }
34
49
  export function useSetTitleBarColor() {
35
50
  const setColor = useCallback((color) => changeThemeColor(color), []);
36
51
  const resetColor = useCallback(() => changeThemeColor(defaultColor), []);
37
52
  return { setColor, resetColor };
38
53
  }
39
- export function useThemedTitleBar(paletteOrName, value,
40
- /** If not provided, will inherit from app */
41
- mode, skip) {
42
- /* TODO: rewrite this */
54
+ export function useThemedTitleBar(colorToken, skip) {
55
+ const { setColor } = useSetTitleBarColor();
56
+ // using a variable to rerun the effect instead of subscribing in-effect...
57
+ // this is an attempt to preserve the cascading behavior in the React tree
58
+ // if a child calls this hook, so ideally the parent and child should both
59
+ // re-evaluate but the child should 'win'
60
+ const visible = useSyncExternalStore((onStoreChange) => {
61
+ document.addEventListener('visibilitychange', onStoreChange);
62
+ return () => {
63
+ document.removeEventListener('visibilitychange', onStoreChange);
64
+ };
65
+ }, () => document.visibilityState === 'visible', () => true);
66
+ const mode = useResolvedColorMode();
67
+ useEffect(() => {
68
+ if (skip)
69
+ return;
70
+ const previousColor = getCurrentColor();
71
+ async function update() {
72
+ try {
73
+ const { resolveRuntimeValue } = await import('@arbor-css/core/runtime');
74
+ const color = await resolveRuntimeValue(colorToken, {
75
+ tokenPurpose: 'color',
76
+ });
77
+ if (color) {
78
+ setColor(extractLightDark(color, mode));
79
+ }
80
+ }
81
+ catch (e) {
82
+ console.error('Error updating title bar color:', e);
83
+ }
84
+ }
85
+ update();
86
+ if (previousColor) {
87
+ return () => {
88
+ setColor(previousColor);
89
+ };
90
+ }
91
+ }, [setColor, colorToken, skip, visible, mode]);
92
+ }
93
+ function extractLightDark(colorValue, mode) {
94
+ if (colorValue.startsWith('light-dark(')) {
95
+ const colors = colorValue.slice(11, -1).split(',');
96
+ if (colors.length === 2) {
97
+ return mode === 'light' ? colors[0].trim() : colors[1].trim();
98
+ }
99
+ }
100
+ return colorValue;
43
101
  }
44
102
  //# sourceMappingURL=useTitleBarColor.js.map
package/dist/hooks/useTitleBarColor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,IAAI,YAAY,GAAG,SAAS,CAAC;AAC7B,SAAS,eAAe;;IACvB,OAAO,MAAA,QAAQ;SACb,aAAa,CAAC,wBAAwB,CAAC,0CACtC,YAAY,CAAC,SAAS,CAAC,CAAC;AAC5B,CAAC;AACD,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;IACrC,YAAY,GAAG,MAAA,eAAe,EAAE,mCAAI,YAAY,CAAC;AAClD,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAa;IACtC,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACrC,OAAO;IACR,CAAC;IACD,gCAAgC;IAChC,OAAO,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;QACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QACzC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;IACD,IAAI,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACtE,IAAI,CAAC,cAAc,EAAE,CAAC;QACrB,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChD,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACnD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,CAAC;IACD,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC/C,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC/B,KAA+C;IAE/C,wBAAwB;AACzB,CAAC;AAED,MAAM,UAAU,mBAAmB;IAClC,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IACzE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AACjC,CAAC;AAED,MAAM,UAAU,iBAAiB,CAChC,aAAkB,EAClB,KAAU;AACV,6CAA6C;AAC7C,IAAuB,EACvB,IAAc;IAEd,wBAAwB;AACzB,CAAC"}
1
+ {"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":"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"}
package/dist/hooks/useTitleBarColor.stories.js CHANGED
@@ -46,7 +46,7 @@ function MockTitleBar() {
46
46
  return (_jsxs(Box, { justify: "between", items: "center", p: "md", style: { backgroundColor: color }, children: [_jsx("div", { children: time }), _jsx(Box, { gap: true, items: "center", children: _jsx(Icon, { name: "globe" }) })] }));
47
47
  }
48
48
  function Overrider() {
49
- useThemedTitleBar('primary', 'dark');
49
+ useThemedTitleBar('--m-color-accent-light');
50
50
  return null;
51
51
  }
52
52
  //# sourceMappingURL=useTitleBarColor.stories.js.map
package/dist/hooks/useTitleBarColor.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTitleBarColor.stories.js","sourceRoot":"","sources":["../../src/hooks/useTitleBarColor.stories.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useTitleBarColor.stories.js","sourceRoot":"","sources":["../../src/hooks/useTitleBarColor.stories.tsx"],"names":[],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export { clsx } from 'clsx';
2
2
  export * from './colorMode.js';
3
3
  export * from './components/index.js';
4
4
  export * from './hooks.js';
5
+ export * as userModeProps from './arbor/props.js';
package/dist/index.js CHANGED
@@ -2,4 +2,5 @@ export { clsx } from 'clsx';
2
2
  export * from './colorMode.js';
3
3
  export * from './components/index.js';
4
4
  export * from './hooks.js';
5
+ export * as userModeProps from './arbor/props.js';
5
6
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAE3B,OAAO,KAAK,aAAa,MAAM,kBAAkB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.64",
3
+ "version": "6.0.66",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
@@ -41,8 +41,8 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@a-type/utils": "^1.1.9",
44
- "@arbor-css/core": "^0.0.136",
45
- "@arbor-css/postcss": "^0.0.136",
44
+ "@arbor-css/core": "^0.0.139",
45
+ "@arbor-css/postcss": "^0.0.139",
46
46
  "@base-ui/react": "^1.4.1",
47
47
  "@use-gesture/react": "^10.3.1",
48
48
  "browser-image-resizer": "^2.4.1",
package/src/components/provider/Provider.tsx CHANGED
@@ -38,7 +38,7 @@ export function Provider({
38
38
  ? virtualKeyboardBehavior
39
39
  : 'displace';
40
40
  useVirtualKeyboardBehavior(supportedVirtualKeyboardBehavior);
41
- useThemedTitleBar('gray', 'wash', undefined, disableTitleBarColor);
41
+ useThemedTitleBar('--m-color-main-paper', disableTitleBarColor);
42
42
  const otherStuff = (
43
43
  <>
44
44
  <IconSpritesheet />
package/src/hooks/useTitleBarColor.stories.tsx CHANGED
@@ -98,6 +98,6 @@ function MockTitleBar() {
98
98
  }
99
99
 
100
100
  function Overrider() {
101
- useThemedTitleBar('primary', 'dark');
101
+ useThemedTitleBar('--m-color-accent-light');
102
102
  return null;
103
103
  }
package/src/hooks/useTitleBarColor.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { useCallback } from 'react';
1
+ import { useCallback, useEffect, useSyncExternalStore } from 'react';
2
+ import { useResolvedColorMode } from '../colorMode.js';
2
3
 
3
4
  let defaultColor = '#ffffff';
4
5
  function getCurrentColor() {
@@ -33,7 +34,23 @@ function changeThemeColor(color: string) {
33
34
  export function useTitleBarColor(
34
35
  color: string | { light: string; dark: string },
35
36
  ) {
36
- /* TODO: rewrite this */
37
+ const colorMode = useResolvedColorMode();
38
+ useEffect(() => {
39
+ const finalColor =
40
+ typeof color === 'string'
41
+ ? color
42
+ : colorMode === 'dark'
43
+ ? color.dark
44
+ : color.light;
45
+ const previousColor =
46
+ document
47
+ .querySelector('meta[name=theme-color]')
48
+ ?.getAttribute('content') ?? defaultColor;
49
+ changeThemeColor(finalColor);
50
+ return () => {
51
+ changeThemeColor(previousColor);
52
+ };
53
+ }, [color, colorMode]);
37
54
  }
38
55
 
39
56
  export function useSetTitleBarColor() {
@@ -42,12 +59,58 @@ export function useSetTitleBarColor() {
42
59
  return { setColor, resetColor };
43
60
  }
44
61
 
45
- export function useThemedTitleBar(
46
- paletteOrName: any,
47
- value: any,
48
- /** If not provided, will inherit from app */
49
- mode?: 'light' | 'dark',
50
- skip?: boolean,
51
- ) {
52
- /* TODO: rewrite this */
62
+ export function useThemedTitleBar(colorToken: string, skip?: boolean) {
63
+ const { setColor } = useSetTitleBarColor();
64
+ // using a variable to rerun the effect instead of subscribing in-effect...
65
+ // this is an attempt to preserve the cascading behavior in the React tree
66
+ // if a child calls this hook, so ideally the parent and child should both
67
+ // re-evaluate but the child should 'win'
68
+ const visible = useSyncExternalStore(
69
+ (onStoreChange) => {
70
+ document.addEventListener('visibilitychange', onStoreChange);
71
+ return () => {
72
+ document.removeEventListener('visibilitychange', onStoreChange);
73
+ };
74
+ },
75
+ () => document.visibilityState === 'visible',
76
+ () => true,
77
+ );
78
+
79
+ const mode = useResolvedColorMode();
80
+
81
+ useEffect(() => {
82
+ if (skip) return;
83
+ const previousColor = getCurrentColor();
84
+
85
+ async function update() {
86
+ try {
87
+ const { resolveRuntimeValue } = await import('@arbor-css/core/runtime');
88
+ const color = await resolveRuntimeValue(colorToken, {
89
+ tokenPurpose: 'color',
90
+ });
91
+ if (color) {
92
+ setColor(extractLightDark(color, mode));
93
+ }
94
+ } catch (e) {
95
+ console.error('Error updating title bar color:', e);
96
+ }
97
+ }
98
+ update();
99
+
100
+ if (previousColor) {
101
+ return () => {
102
+ setColor(previousColor);
103
+ };
104
+ }
105
+ }, [setColor, colorToken, skip, visible, mode]);
106
+ }
107
+
108
+ function extractLightDark(colorValue: string, mode: string): string {
109
+ if (colorValue.startsWith('light-dark(')) {
110
+ const colors = colorValue.slice(11, -1).split(',');
111
+ if (colors.length === 2) {
112
+ return mode === 'light' ? colors[0].trim() : colors[1].trim();
113
+ }
114
+ }
115
+ return colorValue;
53
116
  }
package/src/index.ts CHANGED
@@ -3,3 +3,5 @@ export { clsx } from 'clsx';
3
3
  export * from './colorMode.js';
4
4
  export * from './components/index.js';
5
5
  export * from './hooks.js';
6
+
7
+ export * as userModeProps from './arbor/props.js';