fix: API cleanup

.eslintignore

@@ -0,0 +1,7 @@
+# Ignore nested node_modules
+node_modules/
+coverage/
+dist/
+.cache
+.next
+.vercel

.eslintrc.js

@@ -0,0 +1,9 @@
+const { version: reactVersion } = require('react/package.json')
+
+module.exports = {
+  extends: ['react-app'],
+  settings: { react: { version: reactVersion } },
+  rules: {
+    'jsx-a11y/anchor-is-valid': ['off'],
+  },
+}

TODO.md

@@ -3,12 +3,31 @@ Stop relying on memo stuff.
 If react's render loop triggers, communicate to outside fn's via refs and the like.
 A change to snap points affects how far one can drag.
 
-- minHeight should be renamed safeHeight or similar, as it denotes the smallest height while still being able to render the drag handle. Isn't it header height technically?
-- maxHeight renamed to contentHeight, as that's what it is.
-- rename initialHeight to initialSnapPoint.
-- rename viewportHeight to maxHeight?
-- rename isOpen to open, like the <details> tag works.
-- rename setHeight to setSnapPoint
+```
+max-content
+  The intrinsic preferred width.
+min-content
+  The intrinsic minimum width.
+fit-content(<length-percentage>)
+  Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)).
+
+```
+
+hmmmm
+
+- currentHeight => height
+- footerHeight => added
+- headerHeight => added
+- maxHeight => minHeight, includes header and footer heights, it tries to avoid a scrollbar
+- minHeight => gone, used to be header + footer
+- viewportHeight => maxHeight
+- snap points array is optional
+
+footerHeight
+headerHeight
+height
+maxHeight
+minHeight
 
 ## package.json stuffs
 
@@ -21,3 +40,53 @@ A change to snap points affects how far one can drag.
 - Play icon: https://fontawesome.com/icons/play-circle?style=regular
 - Phone frame used in logo: https://www.figma.com/community/file/896042888090872154/Mono-Devices-1.0
 - iPhone frame used to wrap examples: https://www.figma.com/community/file/858143367356468985/(Variants)-iOS-%26-iPadOS-14-UI-Kit-for-Figma
+
+# Ok let's map this nonsense
+
+Consider using a
+
+```js
+const [, nextTick] = useState(0)
+nextTick((_) => ++_)
+```
+
+to force updates.
+Fast way to check if there's new snapPoints generated:
+
+```js
+var arr1 = [1, 2, 3, 4, 5]
+var arr2 = [1, 2, 3, 4, 5]
+
+if (JSON.stringify(arr1) === JSON.stringify(arr2)) {
+  console.log('They are equal!')
+}
+```
+
+Faux plugin architecture. "Plugins" or "hooks" can register in an es6 map if they want to do work before the animation starts, while the bottom sheet is resting in the final state but opacity: 0. This allows setting up focus lock, scroll lock and more ahead of time. Hopefully alleviating a lot of jank.
+
+a transition to close can be cancelled if the open state is changed back to `true`.
+open/close is fairly easy and stabl. snap to snap on the other hand, require diligence in making sure whoever cancels a snap transition, makes sure to send the animation on the right direction.
+
+## Changes that can happen from React's side of things at any time by means of a prop change
+
+And that may affect side effects that are running atm
+
+- isOpen
+- snapPoints
+- initialHeight
+
+## Big picture state machines
+
+- transitioning from closed to open.
+- transition to closed while opening but not open.
+- transition to open while closing.
+- transition to closed after finished opening.
+- while opening the user interrupts and starts dragging (should be fine, all work should be done by now.).
+- while opening the user keyboard navs, maybe even fucks the scroll.
+
+- Some hooks care only about if we're on our way to open, or on our way to close.
+- Other hooks care about the current drag state.
+- Dragging is king, should not be interruptible, but may allow side effects that affect where/how dragging happens.
+- Except if the window changes height, maybe respond to header and footer height changes too by interrupting.
+- Focus set by keyboard nav or a screen reader can fuck things up.
+- Consider two drag modes? One fast, but can get scroll fuckups, one that's like the current one, safe because it changes the height property.

docs/StickyNugget.tsx

@@ -10,7 +10,7 @@ export default function StickyNugget({
   example,
 }: {
   flip?: boolean
-  heading: React.ReactNode
+  heading: string
   lead: React.ReactNode
   example: string
 }) {
@@ -64,6 +64,7 @@ export default function StickyNugget({
         <div className={styles.phoneframe}>
           {active && (
             <iframe
+              title={heading}
               className={cx('z-10 transition-opacity duration-300', {
                 'opacity-0': !loaded,
               })}

docs/fixtures/Container.tsx

@@ -12,7 +12,7 @@ export default function Container({ children }: { children: React.ReactNode }) {
   }, [env])
 
   return (
-    <main className="grid place-items-center min-h-screen bg-white">
+    <main className="grid place-content-evenly min-h-screen bg-white">
       {children}
     </main>
   )

docs/style.css

@@ -1,5 +1,9 @@
 @tailwind base;
 
+:root {
+  --rsbs-backdrop-bg: rgba(15, 23, 42, 0.7);
+}
+
 html,
 body {
   @apply font-body overscroll-y-none snap snap-proximity snap-y;

next.config.js

@@ -0,0 +1 @@
+module.exports = {}