@oxy.so/bloom 2.12.4 → 3.0.0
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.
- package/README.md +4 -4
- package/docs/button-group.mdx +46 -4
- package/docs/composition.mdx +159 -0
- package/docs/field.mdx +39 -1
- package/docs/glass.mdx +46 -0
- package/docs/layout.mdx +72 -4
- package/docs/migrating-to-3.0.mdx +169 -0
- package/docs/page-header.mdx +192 -36
- package/lib/commonjs/button/Button.js +2 -0
- package/lib/commonjs/button/Button.js.map +1 -1
- package/lib/commonjs/button-group/ButtonGroup.js +124 -19
- package/lib/commonjs/button-group/ButtonGroup.js.map +1 -1
- package/lib/commonjs/control-surface/ControlSurface.js +46 -0
- package/lib/commonjs/control-surface/ControlSurface.js.map +1 -0
- package/lib/commonjs/control-surface/context.js +84 -0
- package/lib/commonjs/control-surface/context.js.map +1 -0
- package/lib/commonjs/control-surface/index.js +26 -0
- package/lib/commonjs/control-surface/index.js.map +1 -0
- package/lib/commonjs/control-surface/types.js +6 -0
- package/lib/commonjs/control-surface/types.js.map +1 -0
- package/lib/commonjs/field/Field.js +71 -26
- package/lib/commonjs/field/Field.js.map +1 -1
- package/lib/commonjs/field/context.js +80 -0
- package/lib/commonjs/field/context.js.map +1 -0
- package/lib/commonjs/field/index.js +7 -0
- package/lib/commonjs/field/index.js.map +1 -1
- package/lib/commonjs/floating/TriggerSlot.js +32 -0
- package/lib/commonjs/floating/TriggerSlot.js.map +1 -1
- package/lib/commonjs/glass/GlassIsland.js +107 -0
- package/lib/commonjs/glass/GlassIsland.js.map +1 -0
- package/lib/commonjs/glass/GlassSurface.js +4 -1
- package/lib/commonjs/glass/GlassSurface.js.map +1 -1
- package/lib/commonjs/glass/index.js +7 -0
- package/lib/commonjs/glass/index.js.map +1 -1
- package/lib/commonjs/index.js +564 -517
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/index.web.js +564 -517
- package/lib/commonjs/index.web.js.map +1 -1
- package/lib/commonjs/label/Label.js +4 -1
- package/lib/commonjs/label/Label.js.map +1 -1
- package/lib/commonjs/layout/bottom-edge.js +3 -42
- package/lib/commonjs/layout/bottom-edge.js.map +1 -1
- package/lib/commonjs/layout/edge-store.js +65 -0
- package/lib/commonjs/layout/edge-store.js.map +1 -0
- package/lib/commonjs/layout/index.js +32 -0
- package/lib/commonjs/layout/index.js.map +1 -1
- package/lib/commonjs/layout/scroll-offset.js +83 -0
- package/lib/commonjs/layout/scroll-offset.js.map +1 -0
- package/lib/commonjs/layout/top-edge.js +109 -0
- package/lib/commonjs/layout/top-edge.js.map +1 -0
- package/lib/commonjs/page-header/EdgeScrim.js +136 -0
- package/lib/commonjs/page-header/EdgeScrim.js.map +1 -0
- package/lib/commonjs/page-header/PageHeader.js +236 -61
- package/lib/commonjs/page-header/PageHeader.js.map +1 -1
- package/lib/commonjs/provider/BloomProvider.js +5 -2
- package/lib/commonjs/provider/BloomProvider.js.map +1 -1
- package/lib/commonjs/social-button/OxyMark.js +2 -2
- package/lib/commonjs/social-button/OxyMark.js.map +1 -1
- package/lib/commonjs/social-button/SocialButton.js +2 -2
- package/lib/commonjs/social-button/SocialButton.js.map +1 -1
- package/lib/commonjs/styles/svg-id.js +29 -0
- package/lib/commonjs/styles/svg-id.js.map +1 -0
- package/lib/commonjs/text-field/TextField.js +39 -6
- package/lib/commonjs/text-field/TextField.js.map +1 -1
- package/lib/commonjs/theme/glass-colors.js +81 -1
- package/lib/commonjs/theme/glass-colors.js.map +1 -1
- package/lib/module/button/Button.js +2 -0
- package/lib/module/button/Button.js.map +1 -1
- package/lib/module/button-group/ButtonGroup.js +124 -19
- package/lib/module/button-group/ButtonGroup.js.map +1 -1
- package/lib/module/control-surface/ControlSurface.js +41 -0
- package/lib/module/control-surface/ControlSurface.js.map +1 -0
- package/lib/module/control-surface/context.js +77 -0
- package/lib/module/control-surface/context.js.map +1 -0
- package/lib/module/control-surface/index.js +5 -0
- package/lib/module/control-surface/index.js.map +1 -0
- package/lib/module/control-surface/types.js +4 -0
- package/lib/module/control-surface/types.js.map +1 -0
- package/lib/module/field/Field.js +72 -27
- package/lib/module/field/Field.js.map +1 -1
- package/lib/module/field/context.js +74 -0
- package/lib/module/field/context.js.map +1 -0
- package/lib/module/field/index.js +1 -0
- package/lib/module/field/index.js.map +1 -1
- package/lib/module/floating/TriggerSlot.js +33 -1
- package/lib/module/floating/TriggerSlot.js.map +1 -1
- package/lib/module/glass/GlassIsland.js +102 -0
- package/lib/module/glass/GlassIsland.js.map +1 -0
- package/lib/module/glass/GlassSurface.js +5 -2
- package/lib/module/glass/GlassSurface.js.map +1 -1
- package/lib/module/glass/index.js +1 -0
- package/lib/module/glass/index.js.map +1 -1
- package/lib/module/index.js +2 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/index.web.js +2 -1
- package/lib/module/index.web.js.map +1 -1
- package/lib/module/label/Label.js +4 -1
- package/lib/module/label/Label.js.map +1 -1
- package/lib/module/layout/bottom-edge.js +2 -41
- package/lib/module/layout/bottom-edge.js.map +1 -1
- package/lib/module/layout/edge-store.js +58 -0
- package/lib/module/layout/edge-store.js.map +1 -0
- package/lib/module/layout/index.js +8 -3
- package/lib/module/layout/index.js.map +1 -1
- package/lib/module/layout/scroll-offset.js +77 -0
- package/lib/module/layout/scroll-offset.js.map +1 -0
- package/lib/module/layout/top-edge.js +102 -0
- package/lib/module/layout/top-edge.js.map +1 -0
- package/lib/module/page-header/EdgeScrim.js +132 -0
- package/lib/module/page-header/EdgeScrim.js.map +1 -0
- package/lib/module/page-header/PageHeader.js +233 -58
- package/lib/module/page-header/PageHeader.js.map +1 -1
- package/lib/module/provider/BloomProvider.js +5 -2
- package/lib/module/provider/BloomProvider.js.map +1 -1
- package/lib/module/social-button/OxyMark.js +1 -1
- package/lib/module/social-button/OxyMark.js.map +1 -1
- package/lib/module/social-button/SocialButton.js +1 -1
- package/lib/module/social-button/SocialButton.js.map +1 -1
- package/lib/module/styles/svg-id.js +26 -0
- package/lib/module/styles/svg-id.js.map +1 -0
- package/lib/module/text-field/TextField.js +39 -6
- package/lib/module/text-field/TextField.js.map +1 -1
- package/lib/module/theme/glass-colors.js +79 -0
- package/lib/module/theme/glass-colors.js.map +1 -1
- package/lib/typescript/commonjs/button/Button.d.ts.map +1 -1
- package/lib/typescript/commonjs/button-group/ButtonGroup.d.ts.map +1 -1
- package/lib/typescript/commonjs/button-group/types.d.ts +61 -5
- package/lib/typescript/commonjs/button-group/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/control-surface/ControlSurface.d.ts +4 -0
- package/lib/typescript/commonjs/control-surface/ControlSurface.d.ts.map +1 -0
- package/lib/typescript/commonjs/control-surface/context.d.ts +21 -0
- package/lib/typescript/commonjs/control-surface/context.d.ts.map +1 -0
- package/lib/typescript/commonjs/control-surface/index.d.ts +4 -0
- package/lib/typescript/commonjs/control-surface/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/control-surface/types.d.ts +37 -0
- package/lib/typescript/commonjs/control-surface/types.d.ts.map +1 -0
- package/lib/typescript/commonjs/field/Field.d.ts +1 -1
- package/lib/typescript/commonjs/field/Field.d.ts.map +1 -1
- package/lib/typescript/commonjs/field/context.d.ts +55 -0
- package/lib/typescript/commonjs/field/context.d.ts.map +1 -0
- package/lib/typescript/commonjs/field/index.d.ts +2 -0
- package/lib/typescript/commonjs/field/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/field/types.d.ts +22 -3
- package/lib/typescript/commonjs/field/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/floating/TriggerSlot.d.ts.map +1 -1
- package/lib/typescript/commonjs/glass/GlassIsland.d.ts +4 -0
- package/lib/typescript/commonjs/glass/GlassIsland.d.ts.map +1 -0
- package/lib/typescript/commonjs/glass/GlassSurface.d.ts.map +1 -1
- package/lib/typescript/commonjs/glass/index.d.ts +2 -1
- package/lib/typescript/commonjs/glass/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/glass/types.d.ts +43 -0
- package/lib/typescript/commonjs/glass/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.d.ts +2 -1
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.web.d.ts +2 -1
- package/lib/typescript/commonjs/index.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/label/Label.d.ts.map +1 -1
- package/lib/typescript/commonjs/label/types.d.ts +7 -1
- package/lib/typescript/commonjs/label/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/bottom-edge.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/edge-store.d.ts +31 -0
- package/lib/typescript/commonjs/layout/edge-store.d.ts.map +1 -0
- package/lib/typescript/commonjs/layout/index.d.ts +8 -3
- package/lib/typescript/commonjs/layout/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/scroll-offset.d.ts +16 -0
- package/lib/typescript/commonjs/layout/scroll-offset.d.ts.map +1 -0
- package/lib/typescript/commonjs/layout/top-edge.d.ts +77 -0
- package/lib/typescript/commonjs/layout/top-edge.d.ts.map +1 -0
- package/lib/typescript/commonjs/page-header/EdgeScrim.d.ts +95 -0
- package/lib/typescript/commonjs/page-header/EdgeScrim.d.ts.map +1 -0
- package/lib/typescript/commonjs/page-header/PageHeader.d.ts +1 -1
- package/lib/typescript/commonjs/page-header/PageHeader.d.ts.map +1 -1
- package/lib/typescript/commonjs/page-header/index.d.ts +1 -1
- package/lib/typescript/commonjs/page-header/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/page-header/types.d.ts +97 -10
- package/lib/typescript/commonjs/page-header/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/provider/BloomProvider.d.ts.map +1 -1
- package/lib/typescript/commonjs/styles/svg-id.d.ts +20 -0
- package/lib/typescript/commonjs/styles/svg-id.d.ts.map +1 -0
- package/lib/typescript/commonjs/text-field/TextField.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/glass-colors.d.ts +67 -0
- package/lib/typescript/commonjs/theme/glass-colors.d.ts.map +1 -1
- package/lib/typescript/module/button/Button.d.ts.map +1 -1
- package/lib/typescript/module/button-group/ButtonGroup.d.ts.map +1 -1
- package/lib/typescript/module/button-group/types.d.ts +61 -5
- package/lib/typescript/module/button-group/types.d.ts.map +1 -1
- package/lib/typescript/module/control-surface/ControlSurface.d.ts +4 -0
- package/lib/typescript/module/control-surface/ControlSurface.d.ts.map +1 -0
- package/lib/typescript/module/control-surface/context.d.ts +21 -0
- package/lib/typescript/module/control-surface/context.d.ts.map +1 -0
- package/lib/typescript/module/control-surface/index.d.ts +4 -0
- package/lib/typescript/module/control-surface/index.d.ts.map +1 -0
- package/lib/typescript/module/control-surface/types.d.ts +37 -0
- package/lib/typescript/module/control-surface/types.d.ts.map +1 -0
- package/lib/typescript/module/field/Field.d.ts +1 -1
- package/lib/typescript/module/field/Field.d.ts.map +1 -1
- package/lib/typescript/module/field/context.d.ts +55 -0
- package/lib/typescript/module/field/context.d.ts.map +1 -0
- package/lib/typescript/module/field/index.d.ts +2 -0
- package/lib/typescript/module/field/index.d.ts.map +1 -1
- package/lib/typescript/module/field/types.d.ts +22 -3
- package/lib/typescript/module/field/types.d.ts.map +1 -1
- package/lib/typescript/module/floating/TriggerSlot.d.ts.map +1 -1
- package/lib/typescript/module/glass/GlassIsland.d.ts +4 -0
- package/lib/typescript/module/glass/GlassIsland.d.ts.map +1 -0
- package/lib/typescript/module/glass/GlassSurface.d.ts.map +1 -1
- package/lib/typescript/module/glass/index.d.ts +2 -1
- package/lib/typescript/module/glass/index.d.ts.map +1 -1
- package/lib/typescript/module/glass/types.d.ts +43 -0
- package/lib/typescript/module/glass/types.d.ts.map +1 -1
- package/lib/typescript/module/index.d.ts +2 -1
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/lib/typescript/module/index.web.d.ts +2 -1
- package/lib/typescript/module/index.web.d.ts.map +1 -1
- package/lib/typescript/module/label/Label.d.ts.map +1 -1
- package/lib/typescript/module/label/types.d.ts +7 -1
- package/lib/typescript/module/label/types.d.ts.map +1 -1
- package/lib/typescript/module/layout/bottom-edge.d.ts.map +1 -1
- package/lib/typescript/module/layout/edge-store.d.ts +31 -0
- package/lib/typescript/module/layout/edge-store.d.ts.map +1 -0
- package/lib/typescript/module/layout/index.d.ts +8 -3
- package/lib/typescript/module/layout/index.d.ts.map +1 -1
- package/lib/typescript/module/layout/scroll-offset.d.ts +16 -0
- package/lib/typescript/module/layout/scroll-offset.d.ts.map +1 -0
- package/lib/typescript/module/layout/top-edge.d.ts +77 -0
- package/lib/typescript/module/layout/top-edge.d.ts.map +1 -0
- package/lib/typescript/module/page-header/EdgeScrim.d.ts +95 -0
- package/lib/typescript/module/page-header/EdgeScrim.d.ts.map +1 -0
- package/lib/typescript/module/page-header/PageHeader.d.ts +1 -1
- package/lib/typescript/module/page-header/PageHeader.d.ts.map +1 -1
- package/lib/typescript/module/page-header/index.d.ts +1 -1
- package/lib/typescript/module/page-header/index.d.ts.map +1 -1
- package/lib/typescript/module/page-header/types.d.ts +97 -10
- package/lib/typescript/module/page-header/types.d.ts.map +1 -1
- package/lib/typescript/module/provider/BloomProvider.d.ts.map +1 -1
- package/lib/typescript/module/styles/svg-id.d.ts +20 -0
- package/lib/typescript/module/styles/svg-id.d.ts.map +1 -0
- package/lib/typescript/module/text-field/TextField.d.ts.map +1 -1
- package/lib/typescript/module/theme/glass-colors.d.ts +67 -0
- package/lib/typescript/module/theme/glass-colors.d.ts.map +1 -1
- package/package.json +15 -1
- package/src/button/Button.tsx +10 -1
- package/src/button-group/ButtonGroup.tsx +146 -19
- package/src/button-group/types.ts +68 -5
- package/src/control-surface/ControlSurface.tsx +41 -0
- package/src/control-surface/context.ts +81 -0
- package/src/control-surface/index.ts +4 -0
- package/src/control-surface/types.ts +40 -0
- package/src/field/Field.tsx +84 -27
- package/src/field/context.ts +110 -0
- package/src/field/index.ts +3 -0
- package/src/field/types.ts +22 -3
- package/src/floating/TriggerSlot.tsx +35 -1
- package/src/glass/GlassIsland.tsx +109 -0
- package/src/glass/GlassSurface.tsx +26 -2
- package/src/glass/index.ts +3 -0
- package/src/glass/types.ts +45 -0
- package/src/index.ts +6 -0
- package/src/index.web.ts +6 -0
- package/src/label/Label.tsx +3 -1
- package/src/label/types.ts +7 -1
- package/src/layout/bottom-edge.tsx +3 -56
- package/src/layout/edge-store.ts +69 -0
- package/src/layout/index.ts +8 -3
- package/src/layout/scroll-offset.ts +76 -0
- package/src/layout/top-edge.tsx +109 -0
- package/src/page-header/EdgeScrim.tsx +118 -0
- package/src/page-header/PageHeader.tsx +253 -61
- package/src/page-header/index.ts +9 -1
- package/src/page-header/types.ts +103 -10
- package/src/provider/BloomProvider.tsx +12 -1
- package/src/social-button/OxyMark.tsx +1 -1
- package/src/social-button/SocialButton.tsx +1 -1
- package/src/styles/svg-id.ts +23 -0
- package/src/text-field/TextField.tsx +44 -5
- package/src/theme/glass-colors.ts +80 -0
- package/lib/commonjs/social-button/use-svg-id.js +0 -16
- package/lib/commonjs/social-button/use-svg-id.js.map +0 -1
- package/lib/module/social-button/use-svg-id.js +0 -13
- package/lib/module/social-button/use-svg-id.js.map +0 -1
- package/lib/typescript/commonjs/social-button/use-svg-id.d.ts +0 -7
- package/lib/typescript/commonjs/social-button/use-svg-id.d.ts.map +0 -1
- package/lib/typescript/module/social-button/use-svg-id.d.ts +0 -7
- package/lib/typescript/module/social-button/use-svg-id.d.ts.map +0 -1
- package/src/social-button/use-svg-id.ts +0 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","Platform","Text","TEXT_FIELD_LEADING_GAP","TEXT_FIELD_STACK_GAP","useTextFieldPalette","jsx","_jsx","jsxs","_jsxs","SIZE_VARIANT","xs","sm","md","IS_WEB","OS","LabelComponent","Label","children","nativeID","htmlFor","required","disabled","size","style","testID","palette","webProps","variant","marginBottom","color","placeholder","text","accessibilityLabel","error","marginLeft","displayName"],"sourceRoot":"../../../src","sources":["label/Label.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAiB,OAAO;AAC5C,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,IAAI,QAAQ,wBAAe;AAEpC,SACEC,sBAAsB,EACtBC,oBAAoB,EACpBC,mBAAmB,QACd,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAuE,GAAG;EAC9EC,EAAE,EAAE,eAAe;EACnBC,EAAE,EAAE,aAAa;EACjBC,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,MAAM,GAAGb,QAAQ,CAACc,EAAE,KAAK,KAAK;AAEpC,MAAMC,cAAc,GAAG,SAASC,KAAKA,CAAC;EACpCC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ,GAAG,KAAK;EAChBC,QAAQ,GAAG,KAAK;EAChBC,IAAI,GAAG,IAAI;EACXC,KAAK;EACLC;AACU,CAAC,EAAE;EACb,MAAMC,OAAO,GAAGrB,mBAAmB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["React","memo","Platform","Text","TEXT_FIELD_LEADING_GAP","TEXT_FIELD_STACK_GAP","useTextFieldPalette","jsx","_jsx","jsxs","_jsxs","SIZE_VARIANT","xs","sm","md","IS_WEB","OS","LabelComponent","Label","children","nativeID","htmlFor","required","disabled","size","style","testID","palette","webProps","undefined","variant","marginBottom","color","placeholder","text","accessibilityLabel","error","marginLeft","displayName"],"sourceRoot":"../../../src","sources":["label/Label.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAiB,OAAO;AAC5C,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,IAAI,QAAQ,wBAAe;AAEpC,SACEC,sBAAsB,EACtBC,oBAAoB,EACpBC,mBAAmB,QACd,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAuE,GAAG;EAC9EC,EAAE,EAAE,eAAe;EACnBC,EAAE,EAAE,aAAa;EACjBC,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,MAAM,GAAGb,QAAQ,CAACc,EAAE,KAAK,KAAK;AAEpC,MAAMC,cAAc,GAAG,SAASC,KAAKA,CAAC;EACpCC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ,GAAG,KAAK;EAChBC,QAAQ,GAAG,KAAK;EAChBC,IAAI,GAAG,IAAI;EACXC,KAAK;EACLC;AACU,CAAC,EAAE;EACb,MAAMC,OAAO,GAAGrB,mBAAmB,CAAC,CAAC;;EAErC;EACA;EACA,MAAMsB,QAAiC,GACrCb,MAAM,GAAG;IAAEM,OAAO,EAAEA,OAAO,KAAK,IAAI,GAAGQ,SAAS,GAAIR,OAAO,IAAID;EAAU,CAAC,GAAG,CAAC,CAAC;EAEjF,oBACEV,KAAA,CAACP,IAAI;IAAA,GACCyB,QAAQ;IACZE,OAAO,EAAEnB,YAAY,CAACa,IAAI,CAAE;IAC5BJ,QAAQ,EAAEA,QAAS;IACnBM,MAAM,EAAEA,MAAO;IACfD,KAAK,EAAE,CACL;MACEM,YAAY,EAAE1B,oBAAoB;MAClC2B,KAAK,EAAET,QAAQ,GAAGI,OAAO,CAACM,WAAW,GAAGN,OAAO,CAACO;IAClD,CAAC,EACDT,KAAK,CACL;IAAAN,QAAA,GACDA,QAAQ,EACRG,QAAQ,gBACPd,IAAA,CAACL,IAAI;MACH2B,OAAO,EAAEnB,YAAY,CAACa,IAAI,CAAE;MAC5BW,kBAAkB,EAAC;MACnB;MACA;MAAA;MACAV,KAAK,EAAE,CAAC;QAAEO,KAAK,EAAEL,OAAO,CAACS;MAAM,CAAC,EAAErB,MAAM,GAAG;QAAEsB,UAAU,EAAEjC;MAAuB,CAAC,GAAG,IAAI,CAAE;MAAAe,QAAA,EACzFJ,MAAM,GAAG,GAAG,GAAG;IAAI,CAChB,CAAC,GACL,IAAI;EAAA,CACJ,CAAC;AAEX,CAAC;AAED,OAAO,MAAMG,KAAK,gBAAGjB,IAAI,CAACgB,cAAc,CAAC;AACzCC,KAAK,CAACoB,WAAW,GAAG,OAAO","ignoreList":[]}
|
|
@@ -60,42 +60,8 @@
|
|
|
60
60
|
* roots, stay isolated from each other.
|
|
61
61
|
*/
|
|
62
62
|
import { createContext, useContext, useEffect, useId, useState, useSyncExternalStore } from 'react';
|
|
63
|
+
import { createEdgeStore, NO_INSET, NO_SUBSCRIPTION } from "./edge-store.js";
|
|
63
64
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
64
|
-
function createBottomEdgeStore() {
|
|
65
|
-
const claims = new Map();
|
|
66
|
-
const listeners = new Set();
|
|
67
|
-
let inset = 0;
|
|
68
|
-
const recompute = () => {
|
|
69
|
-
let next = 0;
|
|
70
|
-
for (const height of claims.values()) {
|
|
71
|
-
if (height > next) next = height;
|
|
72
|
-
}
|
|
73
|
-
// Bail before notifying: a re-registration at an unchanged height (every
|
|
74
|
-
// render of a claimant whose footprint did not move) must not re-render
|
|
75
|
-
// every reader.
|
|
76
|
-
if (next === inset) return;
|
|
77
|
-
inset = next;
|
|
78
|
-
for (const listener of listeners) listener();
|
|
79
|
-
};
|
|
80
|
-
return {
|
|
81
|
-
subscribe(onChange) {
|
|
82
|
-
listeners.add(onChange);
|
|
83
|
-
return () => {
|
|
84
|
-
listeners.delete(onChange);
|
|
85
|
-
};
|
|
86
|
-
},
|
|
87
|
-
getInset: () => inset,
|
|
88
|
-
claim(id, height) {
|
|
89
|
-
if (claims.get(id) === height) return;
|
|
90
|
-
claims.set(id, height);
|
|
91
|
-
recompute();
|
|
92
|
-
},
|
|
93
|
-
release(id) {
|
|
94
|
-
if (!claims.delete(id)) return;
|
|
95
|
-
recompute();
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
}
|
|
99
65
|
const BottomEdgeContext = /*#__PURE__*/createContext(null);
|
|
100
66
|
|
|
101
67
|
/**
|
|
@@ -107,7 +73,7 @@ const BottomEdgeContext = /*#__PURE__*/createContext(null);
|
|
|
107
73
|
export function BottomEdgeProvider({
|
|
108
74
|
children
|
|
109
75
|
}) {
|
|
110
|
-
const [store] = useState(
|
|
76
|
+
const [store] = useState(createEdgeStore);
|
|
111
77
|
return /*#__PURE__*/_jsx(BottomEdgeContext.Provider, {
|
|
112
78
|
value: store,
|
|
113
79
|
children: children
|
|
@@ -115,11 +81,6 @@ export function BottomEdgeProvider({
|
|
|
115
81
|
}
|
|
116
82
|
BottomEdgeProvider.displayName = 'BottomEdgeProvider';
|
|
117
83
|
|
|
118
|
-
// Stable module-scope identities for the no-provider path. Fresh closures here
|
|
119
|
-
// would resubscribe `useSyncExternalStore` on every render.
|
|
120
|
-
const NO_SUBSCRIPTION = () => () => {};
|
|
121
|
-
const NO_INSET = () => 0;
|
|
122
|
-
|
|
123
84
|
/**
|
|
124
85
|
* How much of the bottom edge is already occupied, in px.
|
|
125
86
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","useEffect","useId","useState","useSyncExternalStore","
|
|
1
|
+
{"version":3,"names":["createContext","useContext","useEffect","useId","useState","useSyncExternalStore","createEdgeStore","NO_INSET","NO_SUBSCRIPTION","jsx","_jsx","BottomEdgeContext","BottomEdgeProvider","children","store","Provider","value","displayName","useBottomEdgeInset","subscribe","getInset","useClaimBottomEdge","height","id","claim","release"],"sourceRoot":"../../../src","sources":["layout/bottom-edge.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,oBAAoB,QAEf,OAAO;AAEd,SAASC,eAAe,EAAEC,QAAQ,EAAEC,eAAe,QAAwB,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1F,MAAMC,iBAAiB,gBAAGX,aAAa,CAAmB,IAAI,CAAC;;AAE/D;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASY,kBAAkBA,CAAC;EAAEC;AAA4B,CAAC,EAAE;EAClE,MAAM,CAACC,KAAK,CAAC,GAAGV,QAAQ,CAACE,eAAe,CAAC;EACzC,oBAAOI,IAAA,CAACC,iBAAiB,CAACI,QAAQ;IAACC,KAAK,EAAEF,KAAM;IAAAD,QAAA,EAAEA;EAAQ,CAA6B,CAAC;AAC1F;AAEAD,kBAAkB,CAACK,WAAW,GAAG,oBAAoB;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAA,EAAW;EAC3C,MAAMJ,KAAK,GAAGb,UAAU,CAACU,iBAAiB,CAAC;EAC3C,OAAON,oBAAoB,CACzBS,KAAK,EAAEK,SAAS,IAAIX,eAAe,EACnCM,KAAK,EAAEM,QAAQ,IAAIb,QAAQ,EAC3BO,KAAK,EAAEM,QAAQ,IAAIb,QACrB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASc,kBAAkBA,CAACC,MAAc,EAAQ;EACvD,MAAMR,KAAK,GAAGb,UAAU,CAACU,iBAAiB,CAAC;EAC3C,MAAMY,EAAE,GAAGpB,KAAK,CAAC,CAAC;EAElBD,SAAS,CAAC,MAAM;IACd,IAAI,CAACY,KAAK,EAAE;IACZA,KAAK,CAACU,KAAK,CAACD,EAAE,EAAED,MAAM,CAAC;IACvB,OAAO,MAAMR,KAAK,CAACW,OAAO,CAACF,EAAE,CAAC;EAChC,CAAC,EAAE,CAACT,KAAK,EAAES,EAAE,EAAED,MAAM,CAAC,CAAC;AACzB","ignoreList":[]}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The claim REGISTRY behind `bottom-edge` and `top-edge`, written once.
|
|
5
|
+
*
|
|
6
|
+
* `bottom-edge.tsx` carried this store inline while it was the only edge with
|
|
7
|
+
* claimants. A floating page header is the second — it parks at the TOP edge
|
|
8
|
+
* and the content under it has the same question the FAB had about the tab bar:
|
|
9
|
+
* how much of the edge is already taken. The two registries are the same object
|
|
10
|
+
* with a different context, so the object moved here rather than being written
|
|
11
|
+
* out twice; the reasoning that decided its shape (why MAX rather than sum, why
|
|
12
|
+
* an external store, why the collapse is NOT published through it) stays in
|
|
13
|
+
* `bottom-edge.tsx`, which is where a reader looking for it will be.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
export function createEdgeStore() {
|
|
17
|
+
const claims = new Map();
|
|
18
|
+
const listeners = new Set();
|
|
19
|
+
let inset = 0;
|
|
20
|
+
const recompute = () => {
|
|
21
|
+
let next = 0;
|
|
22
|
+
for (const height of claims.values()) {
|
|
23
|
+
if (height > next) next = height;
|
|
24
|
+
}
|
|
25
|
+
// Bail before notifying: a re-registration at an unchanged height (every
|
|
26
|
+
// render of a claimant whose footprint did not move) must not re-render
|
|
27
|
+
// every reader.
|
|
28
|
+
if (next === inset) return;
|
|
29
|
+
inset = next;
|
|
30
|
+
for (const listener of listeners) listener();
|
|
31
|
+
};
|
|
32
|
+
return {
|
|
33
|
+
subscribe(onChange) {
|
|
34
|
+
listeners.add(onChange);
|
|
35
|
+
return () => {
|
|
36
|
+
listeners.delete(onChange);
|
|
37
|
+
};
|
|
38
|
+
},
|
|
39
|
+
getInset: () => inset,
|
|
40
|
+
claim(id, height) {
|
|
41
|
+
if (claims.get(id) === height) return;
|
|
42
|
+
claims.set(id, height);
|
|
43
|
+
recompute();
|
|
44
|
+
},
|
|
45
|
+
release(id) {
|
|
46
|
+
if (!claims.delete(id)) return;
|
|
47
|
+
recompute();
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Stable module-scope identities for the no-provider path. Fresh closures here
|
|
54
|
+
* would resubscribe `useSyncExternalStore` on every render.
|
|
55
|
+
*/
|
|
56
|
+
export const NO_SUBSCRIPTION = () => () => {};
|
|
57
|
+
export const NO_INSET = () => 0;
|
|
58
|
+
//# sourceMappingURL=edge-store.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createEdgeStore","claims","Map","listeners","Set","inset","recompute","next","height","values","listener","subscribe","onChange","add","delete","getInset","claim","id","get","set","release","NO_SUBSCRIPTION","NO_INSET"],"sourceRoot":"../../../src","sources":["layout/edge-store.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAcA,OAAO,SAASA,eAAeA,CAAA,EAAc;EAC3C,MAAMC,MAAM,GAAG,IAAIC,GAAG,CAAiB,CAAC;EACxC,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAa,CAAC;EACvC,IAAIC,KAAK,GAAG,CAAC;EAEb,MAAMC,SAAS,GAAGA,CAAA,KAAM;IACtB,IAAIC,IAAI,GAAG,CAAC;IACZ,KAAK,MAAMC,MAAM,IAAIP,MAAM,CAACQ,MAAM,CAAC,CAAC,EAAE;MACpC,IAAID,MAAM,GAAGD,IAAI,EAAEA,IAAI,GAAGC,MAAM;IAClC;IACA;IACA;IACA;IACA,IAAID,IAAI,KAAKF,KAAK,EAAE;IACpBA,KAAK,GAAGE,IAAI;IACZ,KAAK,MAAMG,QAAQ,IAAIP,SAAS,EAAEO,QAAQ,CAAC,CAAC;EAC9C,CAAC;EAED,OAAO;IACLC,SAASA,CAACC,QAAQ,EAAE;MAClBT,SAAS,CAACU,GAAG,CAACD,QAAQ,CAAC;MACvB,OAAO,MAAM;QACXT,SAAS,CAACW,MAAM,CAACF,QAAQ,CAAC;MAC5B,CAAC;IACH,CAAC;IACDG,QAAQ,EAAEA,CAAA,KAAMV,KAAK;IACrBW,KAAKA,CAACC,EAAE,EAAET,MAAM,EAAE;MAChB,IAAIP,MAAM,CAACiB,GAAG,CAACD,EAAE,CAAC,KAAKT,MAAM,EAAE;MAC/BP,MAAM,CAACkB,GAAG,CAACF,EAAE,EAAET,MAAM,CAAC;MACtBF,SAAS,CAAC,CAAC;IACb,CAAC;IACDc,OAAOA,CAACH,EAAE,EAAE;MACV,IAAI,CAAChB,MAAM,CAACa,MAAM,CAACG,EAAE,CAAC,EAAE;MACxBX,SAAS,CAAC,CAAC;IACb;EACF,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMe,eAAe,GAAGA,CAAA,KAAM,MAAM,CAAC,CAAC;AAC7C,OAAO,MAAMC,QAAQ,GAAGA,CAAA,KAAM,CAAC","ignoreList":[]}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Window-edge geometry, shared by every floating
|
|
4
|
+
* Window-edge geometry and screen-scope coordination, shared by every floating
|
|
5
|
+
* surface and every piece of scroll-linked chrome.
|
|
5
6
|
*
|
|
6
|
-
* `edge` answers "how far from the edge"; `bottom-edge`
|
|
7
|
-
* parked there"
|
|
7
|
+
* `edge` answers "how far from the edge"; `bottom-edge` and `top-edge` answer
|
|
8
|
+
* "what is already parked there"; `scroll-offset` answers "which scroller am I
|
|
9
|
+
* following". A surface that floats at an edge needs the first two; chrome that
|
|
10
|
+
* reacts to scrolling needs the third.
|
|
8
11
|
*/
|
|
9
12
|
export { EDGE_GAP, windowEdgeGap } from "./edge.js";
|
|
10
13
|
export { BottomEdgeProvider, useBottomEdgeInset, useClaimBottomEdge } from "./bottom-edge.js";
|
|
14
|
+
export { TopEdgeProvider, useClaimTopEdge, useTopEdgeInset } from "./top-edge.js";
|
|
15
|
+
export { ScrollOffsetProvider, useScrollOffset } from "./scroll-offset.js";
|
|
11
16
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["EDGE_GAP","windowEdgeGap","BottomEdgeProvider","useBottomEdgeInset","useClaimBottomEdge"],"sourceRoot":"../../../src","sources":["layout/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,aAAa,QAAQ,WAAQ;AAChD,SAASC,kBAAkB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,kBAAe","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["EDGE_GAP","windowEdgeGap","BottomEdgeProvider","useBottomEdgeInset","useClaimBottomEdge","TopEdgeProvider","useClaimTopEdge","useTopEdgeInset","ScrollOffsetProvider","useScrollOffset"],"sourceRoot":"../../../src","sources":["layout/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,aAAa,QAAQ,WAAQ;AAChD,SAASC,kBAAkB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAQ,kBAAe;AAC1F,SAASC,eAAe,EAAEC,eAAe,EAAEC,eAAe,QAAQ,eAAY;AAC9E,SAASC,oBAAoB,EAAEC,eAAe,QAAQ,oBAAiB","ignoreList":[]}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* WHICH SCROLLER the chrome around a screen is following.
|
|
5
|
+
*
|
|
6
|
+
* ## The problem it answers
|
|
7
|
+
*
|
|
8
|
+
* Every piece of scroll-linked chrome Bloom draws — a header's separator, its
|
|
9
|
+
* shadow, the scrim under its islands — is a function of one number: how far
|
|
10
|
+
* one scroll container has moved. The container is the screen's, and the chrome
|
|
11
|
+
* is usually not inside it, so the number has to travel.
|
|
12
|
+
*
|
|
13
|
+
* Until now it travelled as a prop, and the default when the prop was omitted
|
|
14
|
+
* was `window.scrollY` on web and "nothing moves" on native. That default is
|
|
15
|
+
* right for exactly one layout — a web page whose document IS the scroller —
|
|
16
|
+
* and silently wrong for the two that a Bloom app usually has: a desktop panel
|
|
17
|
+
* that scrolls inside a fixed shell, and any native screen at all. The failure
|
|
18
|
+
* has no error in it. The header simply never reacts, which reads as a header
|
|
19
|
+
* that was designed not to.
|
|
20
|
+
*
|
|
21
|
+
* ## The rule
|
|
22
|
+
*
|
|
23
|
+
* A screen has exactly ONE scroll owner, and the owner publishes its offset
|
|
24
|
+
* here. Chrome reads it. Neither imports the other, so an app composes them in
|
|
25
|
+
* any arrangement — a header above a list, a header overlaying a list, two
|
|
26
|
+
* panels side by side each with its own header and its own scroller — and the
|
|
27
|
+
* right header still follows the right list, because the provider's position in
|
|
28
|
+
* the tree is what pairs them.
|
|
29
|
+
*
|
|
30
|
+
* ```tsx
|
|
31
|
+
* const scrollY = useSharedValue(0);
|
|
32
|
+
* const onScroll = useAnimatedScrollHandler(
|
|
33
|
+
* { onScroll: (e) => { scrollY.value = e.contentOffset.y; } },
|
|
34
|
+
* [scrollY],
|
|
35
|
+
* );
|
|
36
|
+
*
|
|
37
|
+
* <ScrollOffsetProvider value={scrollY}>
|
|
38
|
+
* <PageHeader title="Inbox" />
|
|
39
|
+
* <Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>…</Animated.ScrollView>
|
|
40
|
+
* </ScrollOffsetProvider>
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
43
|
+
* ## Why a SharedValue and not state
|
|
44
|
+
*
|
|
45
|
+
* The same reason `layout/bottom-edge.tsx` refuses to publish the tab bar's
|
|
46
|
+
* collapse: a scroll offset changes on every frame, and a React re-render per
|
|
47
|
+
* frame is not a performance detail here, it is the whole cost of the feature.
|
|
48
|
+
* A `SharedValue` crosses this context ONCE, at mount — the object identity
|
|
49
|
+
* never changes — and every subsequent frame reaches the chrome on the UI
|
|
50
|
+
* thread through `useAnimatedStyle`, with no render at all.
|
|
51
|
+
*
|
|
52
|
+
* That is also why the context holds the shared VALUE rather than a number: a
|
|
53
|
+
* context whose value changed per frame would re-render every consumer per
|
|
54
|
+
* frame, which is exactly what this exists to avoid.
|
|
55
|
+
*/
|
|
56
|
+
import { createContext, useContext } from 'react';
|
|
57
|
+
const ScrollOffsetContext = /*#__PURE__*/createContext(null);
|
|
58
|
+
ScrollOffsetContext.displayName = 'BloomScrollOffsetContext';
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Publish this subtree's scroll offset. `value` is a `SharedValue<number>` the
|
|
62
|
+
* scroll owner writes from its own animated handler.
|
|
63
|
+
*/
|
|
64
|
+
export const ScrollOffsetProvider = ScrollOffsetContext.Provider;
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* The nearest published scroll offset, or `null` when nothing published one.
|
|
68
|
+
*
|
|
69
|
+
* `null` rather than a zero shared value, because the two mean different things
|
|
70
|
+
* to the chrome reading it: a published zero is "the scroller is at the top",
|
|
71
|
+
* and `null` is "no one told me", which is the case where a web header may
|
|
72
|
+
* still fall back to the document's own scroll.
|
|
73
|
+
*/
|
|
74
|
+
export function useScrollOffset() {
|
|
75
|
+
return useContext(ScrollOffsetContext);
|
|
76
|
+
}
|
|
77
|
+
//# sourceMappingURL=scroll-offset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","useContext","ScrollOffsetContext","displayName","ScrollOffsetProvider","Provider","useScrollOffset"],"sourceRoot":"../../../src","sources":["layout/scroll-offset.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAGjD,MAAMC,mBAAmB,gBAAGF,aAAa,CAA6B,IAAI,CAAC;AAC3EE,mBAAmB,CAACC,WAAW,GAAG,0BAA0B;;AAE5D;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGF,mBAAmB,CAACG,QAAQ;;AAEhE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAA,EAA+B;EAC5D,OAAOL,UAAU,CAACC,mBAAmB,CAAC;AACxC","ignoreList":[]}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The top edge's OCCUPANCY — the mirror of `bottom-edge.tsx`, for chrome that
|
|
5
|
+
* parks at the TOP of a screen.
|
|
6
|
+
*
|
|
7
|
+
* ## Why a floating header needs it and a bar header does not
|
|
8
|
+
*
|
|
9
|
+
* A header that participates in layout answers this question by existing: the
|
|
10
|
+
* content starts where the header ends, because the header is a sibling above
|
|
11
|
+
* it in a column. A header that OVERLAYS content — the floating presentation,
|
|
12
|
+
* where the page scrolls under translucent islands — occupies no layout space
|
|
13
|
+
* at all, and the first item of the content lands underneath it.
|
|
14
|
+
*
|
|
15
|
+
* Somebody has to pad that content, and there are only three candidates. The
|
|
16
|
+
* app can hardcode a number, which is what every fleet header made its
|
|
17
|
+
* consumers do and which goes wrong the moment a subtitle, a safe-area inset or
|
|
18
|
+
* a larger font changes the height. The header can pad the content, which it
|
|
19
|
+
* cannot do — it does not own it, and often is not even its ancestor. Or the
|
|
20
|
+
* header can declare what it occupies and the content can read it. That is this
|
|
21
|
+
* registry, and it is the same object the bottom edge already uses
|
|
22
|
+
* (`edge-store.ts`), so a reader who knows one knows the other.
|
|
23
|
+
*
|
|
24
|
+
* ## The height is MEASURED, not computed
|
|
25
|
+
*
|
|
26
|
+
* `PageHeader` claims what `onLayout` reports, not a constant plus the insets.
|
|
27
|
+
* The two disagree in every case the constant was written to survive — a
|
|
28
|
+
* two-line title under an enlarged font, a subtitle that wraps in a long
|
|
29
|
+
* translation, a notch — and the failure of a computed height is silent: the
|
|
30
|
+
* content starts a few points under the islands and looks like a design
|
|
31
|
+
* decision.
|
|
32
|
+
*
|
|
33
|
+
* One consequence, stated rather than hidden: a claim registers in an EFFECT,
|
|
34
|
+
* so a reader mounted in the same commit sees `0` on its first render and the
|
|
35
|
+
* claimed number on the next. For a scroll container's `paddingTop` that is one
|
|
36
|
+
* frame of content sitting too high, before any scroll has happened.
|
|
37
|
+
*
|
|
38
|
+
* `PageHeader` narrows that frame rather than closing it: it claims its own
|
|
39
|
+
* resting height (the safe-area inset plus the 56pt bar) from the first commit
|
|
40
|
+
* and replaces it with the measured height once `onLayout` reports, so the one
|
|
41
|
+
* bad frame is off by whatever a subtitle or an enlarged font adds rather than
|
|
42
|
+
* by the whole header.
|
|
43
|
+
*/
|
|
44
|
+
import { createContext, useContext, useEffect, useId, useState, useSyncExternalStore } from 'react';
|
|
45
|
+
import { createEdgeStore, NO_INSET, NO_SUBSCRIPTION } from "./edge-store.js";
|
|
46
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
47
|
+
const TopEdgeContext = /*#__PURE__*/createContext(null);
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Wrap the app once — `BloomProvider` already does. A nested provider scopes a
|
|
51
|
+
* subtree to its own claims, which is what a full-screen modal with its own
|
|
52
|
+
* header wants: the content inside it must clear the MODAL's header, not the
|
|
53
|
+
* screen's.
|
|
54
|
+
*/
|
|
55
|
+
export function TopEdgeProvider({
|
|
56
|
+
children
|
|
57
|
+
}) {
|
|
58
|
+
const [store] = useState(createEdgeStore);
|
|
59
|
+
return /*#__PURE__*/_jsx(TopEdgeContext.Provider, {
|
|
60
|
+
value: store,
|
|
61
|
+
children: children
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
TopEdgeProvider.displayName = 'TopEdgeProvider';
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* How much of the top edge is already occupied, in px — the padding a scroll
|
|
68
|
+
* container needs so its first item is not born under the chrome.
|
|
69
|
+
*
|
|
70
|
+
* ```tsx
|
|
71
|
+
* <ScrollView contentContainerStyle={{ paddingTop: useTopEdgeInset() }}>
|
|
72
|
+
* ```
|
|
73
|
+
*
|
|
74
|
+
* `0` outside a provider, and `0` on the first render even inside one — a claim
|
|
75
|
+
* registers in an effect. See the module comment for what that costs and how
|
|
76
|
+
* `PageHeader` narrows it.
|
|
77
|
+
*/
|
|
78
|
+
export function useTopEdgeInset() {
|
|
79
|
+
const store = useContext(TopEdgeContext);
|
|
80
|
+
return useSyncExternalStore(store?.subscribe ?? NO_SUBSCRIPTION, store?.getInset ?? NO_INSET, store?.getInset ?? NO_INSET);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/**
|
|
84
|
+
* Claim `height` px of the top edge for as long as the caller is mounted.
|
|
85
|
+
*
|
|
86
|
+
* Claiming does not move the claimant — it declares the space it already
|
|
87
|
+
* occupies so that everything reading `useTopEdgeInset()` starts below it. Pass
|
|
88
|
+
* the FULL footprint: the chrome's measured height including any safe-area
|
|
89
|
+
* padding it applied itself.
|
|
90
|
+
*
|
|
91
|
+
* A no-op outside a provider, so the chrome stays usable standalone.
|
|
92
|
+
*/
|
|
93
|
+
export function useClaimTopEdge(height) {
|
|
94
|
+
const store = useContext(TopEdgeContext);
|
|
95
|
+
const id = useId();
|
|
96
|
+
useEffect(() => {
|
|
97
|
+
if (!store) return;
|
|
98
|
+
store.claim(id, height);
|
|
99
|
+
return () => store.release(id);
|
|
100
|
+
}, [store, id, height]);
|
|
101
|
+
}
|
|
102
|
+
//# sourceMappingURL=top-edge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","useContext","useEffect","useId","useState","useSyncExternalStore","createEdgeStore","NO_INSET","NO_SUBSCRIPTION","jsx","_jsx","TopEdgeContext","TopEdgeProvider","children","store","Provider","value","displayName","useTopEdgeInset","subscribe","getInset","useClaimTopEdge","height","id","claim","release"],"sourceRoot":"../../../src","sources":["layout/top-edge.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SACEA,aAAa,EACbC,UAAU,EACVC,SAAS,EACTC,KAAK,EACLC,QAAQ,EACRC,oBAAoB,QAEf,OAAO;AAEd,SAASC,eAAe,EAAEC,QAAQ,EAAEC,eAAe,QAAwB,iBAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1F,MAAMC,cAAc,gBAAGX,aAAa,CAAmB,IAAI,CAAC;;AAE5D;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASY,eAAeA,CAAC;EAAEC;AAA4B,CAAC,EAAE;EAC/D,MAAM,CAACC,KAAK,CAAC,GAAGV,QAAQ,CAACE,eAAe,CAAC;EACzC,oBAAOI,IAAA,CAACC,cAAc,CAACI,QAAQ;IAACC,KAAK,EAAEF,KAAM;IAAAD,QAAA,EAAEA;EAAQ,CAA0B,CAAC;AACpF;AAEAD,eAAe,CAACK,WAAW,GAAG,iBAAiB;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAA,EAAW;EACxC,MAAMJ,KAAK,GAAGb,UAAU,CAACU,cAAc,CAAC;EACxC,OAAON,oBAAoB,CACzBS,KAAK,EAAEK,SAAS,IAAIX,eAAe,EACnCM,KAAK,EAAEM,QAAQ,IAAIb,QAAQ,EAC3BO,KAAK,EAAEM,QAAQ,IAAIb,QACrB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASc,eAAeA,CAACC,MAAc,EAAQ;EACpD,MAAMR,KAAK,GAAGb,UAAU,CAACU,cAAc,CAAC;EACxC,MAAMY,EAAE,GAAGpB,KAAK,CAAC,CAAC;EAElBD,SAAS,CAAC,MAAM;IACd,IAAI,CAACY,KAAK,EAAE;IACZA,KAAK,CAACU,KAAK,CAACD,EAAE,EAAED,MAAM,CAAC;IACvB,OAAO,MAAMR,KAAK,CAACW,OAAO,CAACF,EAAE,CAAC;EAChC,CAAC,EAAE,CAACT,KAAK,EAAES,EAAE,EAAED,MAAM,CAAC,CAAC;AACzB","ignoreList":[]}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { memo } from 'react';
|
|
4
|
+
import { StyleSheet } from 'react-native';
|
|
5
|
+
import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
|
|
6
|
+
import { useSvgIdPrefix } from "../styles/svg-id.js";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* The floating header's EDGE EFFECT: the page colour at the top, fading to
|
|
10
|
+
* nothing below the islands.
|
|
11
|
+
*
|
|
12
|
+
* ── WHY IT IS A GRADIENT AND NOT A BLUR ─────────────────────────────────────
|
|
13
|
+
*
|
|
14
|
+
* It is the thing that lets a title sit on a photograph and still be read, and
|
|
15
|
+
* it has exactly one job: no horizontal line anywhere. A translucent rectangle
|
|
16
|
+
* — even a blurred one — ends at its own bottom edge, and that edge is a line
|
|
17
|
+
* across the screen whether or not it is drawn. Apple's scroll edge effect is
|
|
18
|
+
* described the same way: it protects legibility at the edge and must not read
|
|
19
|
+
* as a slab over the content.
|
|
20
|
+
*
|
|
21
|
+
* It is NOT a blur of varying intensity, and saying so matters because the two
|
|
22
|
+
* are easy to conflate and only one of them is here. `backdrop-filter` and
|
|
23
|
+
* `expo-blur` both take a single radius for the whole surface; a falloff would
|
|
24
|
+
* need the ten stacked layers `progressive-blur` uses, which is a real cost for
|
|
25
|
+
* a strip this size. This is an opacity ramp of one flat colour, and that is
|
|
26
|
+
* all it claims to be.
|
|
27
|
+
*
|
|
28
|
+
* ── THE STOPS ───────────────────────────────────────────────────────────────
|
|
29
|
+
*
|
|
30
|
+
* Four of them, shaped as an ease-out rather than a straight line. A LINEAR
|
|
31
|
+
* ramp of opacity is perceptually not linear: it holds too much colour through
|
|
32
|
+
* the middle and then falls off visibly in the last fifth, which puts a soft
|
|
33
|
+
* but findable band across the content. Weighting the fall earlier spends the
|
|
34
|
+
* gradient's height where the eye is looking — the region behind the title —
|
|
35
|
+
* and arrives at zero gently.
|
|
36
|
+
*
|
|
37
|
+
* `TAIL_RATIO` extends the ramp BELOW the header's own box. The header is as
|
|
38
|
+
* tall as its islands plus its padding; the fade needs room after that, or it
|
|
39
|
+
* finishes at the same place the layout does, which is the line again.
|
|
40
|
+
*
|
|
41
|
+
* ── `stopOpacity`, NOT AN `rgba()` STOP ─────────────────────────────────────
|
|
42
|
+
*
|
|
43
|
+
* `react-native-svg` parses `stopColor` for its RGB and DISCARDS the alpha
|
|
44
|
+
* channel, so an `rgba(…, 0.4)` stop renders at FULL strength on native and
|
|
45
|
+
* correctly on web. That is the exact defect documented on `GLASS_SHEEN` in
|
|
46
|
+
* `theme/glass-colors.ts`, where it painted an Android pane as an achromatic
|
|
47
|
+
* white-to-black wipe while every gate stayed green. The colour and the opacity
|
|
48
|
+
* travel here in separate props for the same reason.
|
|
49
|
+
*
|
|
50
|
+
* ── `width="100%"` IS NOT REDUNDANT ─────────────────────────────────────────
|
|
51
|
+
*
|
|
52
|
+
* An `<svg>` is a REPLACED element. With `width: auto` its used width is its
|
|
53
|
+
* INTRINSIC width, and an SVG with no intrinsic size falls back to CSS's
|
|
54
|
+
* default 300 x 150 — so `position: absolute; left: 0; right: 0` does NOT
|
|
55
|
+
* stretch it: `right` is over-constrained and dropped. Measured in Chrome
|
|
56
|
+
* before this prop existed: a 760px-wide header painted a 300 x 150 block of
|
|
57
|
+
* scrim with a hard vertical edge down the middle of the screen, over content
|
|
58
|
+
* that was otherwise untouched.
|
|
59
|
+
*
|
|
60
|
+
* Native is unaffected — react-native-svg lays its host view out with flexbox
|
|
61
|
+
* there — which is exactly why the omission survives review: it is correct on
|
|
62
|
+
* the platform most of this library is tested on. Gate:
|
|
63
|
+
* `src/__tests__/svg-absolute-fill-size.test.ts`.
|
|
64
|
+
*
|
|
65
|
+
* ── THE GRADIENT ID ─────────────────────────────────────────────────────────
|
|
66
|
+
*
|
|
67
|
+
* From `useSvgIdPrefix`, which is `useId` with React's punctuation stripped.
|
|
68
|
+
* Two headers on one page (a split view) must not resolve each other's
|
|
69
|
+
* `url(#…)`, and a module-scope counter — which is what `GlassSurface` uses,
|
|
70
|
+
* and which is right for a native-only surface — increments in a different
|
|
71
|
+
* order on the server than during hydration, so an SSR'd page would reference a
|
|
72
|
+
* gradient that is not there.
|
|
73
|
+
*/
|
|
74
|
+
|
|
75
|
+
/** How far past the header's own height the fade continues, as a ratio of it. */
|
|
76
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
77
|
+
export const SCRIM_TAIL_RATIO = 0.55;
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Offset down the ramp -> how much of the page colour survives there.
|
|
81
|
+
*
|
|
82
|
+
* Read as: solid behind the title, nine tenths gone by three quarters of the
|
|
83
|
+
* way down, nothing at the bottom.
|
|
84
|
+
*/
|
|
85
|
+
export const SCRIM_STOPS = [{
|
|
86
|
+
offset: 0,
|
|
87
|
+
opacity: 1
|
|
88
|
+
}, {
|
|
89
|
+
offset: 0.42,
|
|
90
|
+
opacity: 0.86
|
|
91
|
+
}, {
|
|
92
|
+
offset: 0.72,
|
|
93
|
+
opacity: 0.38
|
|
94
|
+
}, {
|
|
95
|
+
offset: 1,
|
|
96
|
+
opacity: 0
|
|
97
|
+
}];
|
|
98
|
+
const EdgeScrimComponent = ({
|
|
99
|
+
color,
|
|
100
|
+
testID
|
|
101
|
+
}) => {
|
|
102
|
+
const id = `${useSvgIdPrefix('bloom-page-header-scrim')}gradient`;
|
|
103
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
104
|
+
width: "100%",
|
|
105
|
+
height: "100%",
|
|
106
|
+
style: StyleSheet.absoluteFill,
|
|
107
|
+
testID: testID,
|
|
108
|
+
children: [/*#__PURE__*/_jsx(Defs, {
|
|
109
|
+
children: /*#__PURE__*/_jsx(LinearGradient, {
|
|
110
|
+
id: id,
|
|
111
|
+
x1: "0",
|
|
112
|
+
y1: "0",
|
|
113
|
+
x2: "0",
|
|
114
|
+
y2: "1",
|
|
115
|
+
children: SCRIM_STOPS.map(stop => /*#__PURE__*/_jsx(Stop, {
|
|
116
|
+
offset: String(stop.offset),
|
|
117
|
+
stopColor: color,
|
|
118
|
+
stopOpacity: stop.opacity
|
|
119
|
+
}, stop.offset))
|
|
120
|
+
})
|
|
121
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
122
|
+
x: "0",
|
|
123
|
+
y: "0",
|
|
124
|
+
width: "100%",
|
|
125
|
+
height: "100%",
|
|
126
|
+
fill: `url(#${id})`
|
|
127
|
+
})]
|
|
128
|
+
});
|
|
129
|
+
};
|
|
130
|
+
export const EdgeScrim = /*#__PURE__*/memo(EdgeScrimComponent);
|
|
131
|
+
EdgeScrim.displayName = 'PageHeaderEdgeScrim';
|
|
132
|
+
//# sourceMappingURL=EdgeScrim.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","memo","StyleSheet","Svg","Defs","LinearGradient","Rect","Stop","useSvgIdPrefix","jsx","_jsx","jsxs","_jsxs","SCRIM_TAIL_RATIO","SCRIM_STOPS","offset","opacity","EdgeScrimComponent","color","testID","id","width","height","style","absoluteFill","children","x1","y1","x2","y2","map","stop","String","stopColor","stopOpacity","x","y","fill","EdgeScrim","displayName"],"sourceRoot":"../../../src","sources":["page-header/EdgeScrim.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,GAAG,IAAIC,IAAI,EAAEC,cAAc,EAAEC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAExE,SAASC,cAAc,QAAQ,qBAAkB;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,OAAO,MAAMC,gBAAgB,GAAG,IAAI;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAG,CACzB;EAAEC,MAAM,EAAE,CAAC;EAAEC,OAAO,EAAE;AAAE,CAAC,EACzB;EAAED,MAAM,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAK,CAAC,EAC/B;EAAED,MAAM,EAAE,IAAI;EAAEC,OAAO,EAAE;AAAK,CAAC,EAC/B;EAAED,MAAM,EAAE,CAAC;EAAEC,OAAO,EAAE;AAAE,CAAC,CACjB;AAQV,MAAMC,kBAA4C,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAO,CAAC,KAAK;EAC1E,MAAMC,EAAE,GAAG,GAAGZ,cAAc,CAAC,yBAAyB,CAAC,UAAU;EACjE,oBACEI,KAAA,CAACT,GAAG;IAACkB,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACC,KAAK,EAAErB,UAAU,CAACsB,YAAa;IAACL,MAAM,EAAEA,MAAO;IAAAM,QAAA,gBAC7Ef,IAAA,CAACN,IAAI;MAAAqB,QAAA,eACHf,IAAA,CAACL,cAAc;QAACe,EAAE,EAAEA,EAAG;QAACM,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAACC,EAAE,EAAC,GAAG;QAAAJ,QAAA,EAChDX,WAAW,CAACgB,GAAG,CAAEC,IAAI,iBACpBrB,IAAA,CAACH,IAAI;UAEHQ,MAAM,EAAEiB,MAAM,CAACD,IAAI,CAAChB,MAAM,CAAE;UAC5BkB,SAAS,EAAEf,KAAM;UACjBgB,WAAW,EAAEH,IAAI,CAACf;QAAQ,GAHrBe,IAAI,CAAChB,MAIX,CACF;MAAC,CACY;IAAC,CACb,CAAC,eACPL,IAAA,CAACJ,IAAI;MAAC6B,CAAC,EAAC,GAAG;MAACC,CAAC,EAAC,GAAG;MAACf,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC,MAAM;MAACe,IAAI,EAAE,QAAQjB,EAAE;IAAI,CAAE,CAAC;EAAA,CACjE,CAAC;AAEV,CAAC;AAED,OAAO,MAAMkB,SAAS,gBAAGrC,IAAI,CAACgB,kBAAkB,CAAC;AACjDqB,SAAS,CAACC,WAAW,GAAG,qBAAqB","ignoreList":[]}
|