@gifcommit/golden-grids 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Gregory Edgerton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,100 @@
+# Golden Grids
+
+How I Learned to Stop Worrying about Rows and Columns and Love the Golden Ratio
+
+[Live Demo](https://gregoryedgerton.github.io/golden-grids/)
+
+## What is it?
+
+Golden Grids is a responsive CSS Grid layout library driven by the Fibonacci Sequence. Instead of traditional rows and columns you get proportionally aligned boxes that follow the golden ratio. What you do with those boxes is your business, but at least you won't be boring.
+
+## Installation
+
+```bash
+npm install @gifcommit/golden-grids
+```
+
+## Usage
+
+```tsx
+import { GoldenGrid, GoldenBox, GridProvider } from '@gifcommit/golden-grids'
+// CSS is auto-injected — no separate import needed
+
+// Transparent layout slots (no color):
+<GoldenGrid from={1} to={5} />
+
+// With HSL color progression:
+<GoldenGrid from={1} to={5} color="#7f7ec7" />
+
+// With outline:
+<GoldenGrid from={1} to={5} color="#7f7ec7" outline="2px solid #000000" />
+
+// Compound component — map your content into grid slots:
+<GoldenGrid from={3} to={5} color="#7f7ec7">
+  <GoldenBox placeholder><p>Fills the skipped-range area</p></GoldenBox>
+  <GoldenBox><h1>First visible box</h1></GoldenBox>
+  <GoldenBox><p>Second visible box</p></GoldenBox>
+  <GoldenBox><p>Third visible box</p></GoldenBox>
+</GoldenGrid>
+
+// With provider for dynamic/interactive control:
+<GridProvider initialConfig={myConfig}>
+  <GoldenGrid />
+</GridProvider>
+```
+
+Extra `<GoldenBox>` children beyond the visible slot count are silently ignored, so you can always declare the full set of 78 and let the config control what renders.
+
+## Configuration
+
+| Prop        | Type                    | Description                                                                                                                      |
+| ----------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `from`      | `number`                | Index position (1–78) in the Fibonacci Sequence. The library sorts your range smallest to largest automatically.                 |
+| `to`        | `number`                | Another index position (1–78). Together with `from` this defines your slice of the sequence.                                     |
+| `color`     | `string` (hex)          | Optional base color for the HSL progression. When omitted, boxes are transparent layout slots.                                   |
+| `outline`   | `string` (CSS border)   | Optional border applied to all box edges — e.g. `"2px solid #000000"`. Shared edges draw a single line (no doubling).            |
+| `placement` | `"right" \| "bottom" \| "left" \| "top"` | Starting direction of the spiral. Defaults to `"right"`.                                                         |
+| `clockwise` | `boolean`               | Spiral direction — `true` for clockwise, `false` for counter-clockwise. Defaults to `true`.                                      |
+| `children`  | `GoldenBox` elements    | Optional slot content. Each `<GoldenBox>` maps to a visible square in order. Use `<GoldenBox placeholder>` for the skipped area. |
+
+## How it works
+
+Based on your `from` and `to` index positions, the library calculates the corresponding slice of the Fibonacci Sequence (`1`, `1`, `2`, `3`, `5`, `8`, `13`, `21`, `34`, `55`, ...) and creates a responsive grid based on the golden ratio. Each number in your selected range becomes a proportionally sized square box in the grid.
+
+A `1, 1` grid gives you two equal squares (side by side or stacked depending on your `placement` value), while a `1, 3` grid produces 4 boxes where each gets progressively larger (`1`, `1`, `2`, `3`). The Fibonacci values are used as relative ratios for each box.
+
+### Skipping digits
+
+Golden Grids lets you skip numbers in the sequence and that can add just the [right amount of flair](https://www.youtube.com/watch?v=F7SNEdjftno) to your grid. When your range doesn't start at the 1st digit, the preceding space is still accounted for — not as a perfect 1:1 square, but as a single irregular box that proportionally represents all the sequenced values that were skipped. This keeps the grid golden.
+
+### Placement and spiral direction
+
+The `placement` prop determines which side the spiral builds out from (`"right"`, `"bottom"`, `"left"`, or `"top"`) and `clockwise` controls the spiral direction. Using these values you can create landscape and portrait grids. Think of how we declare `padding` or `margin` — we list values top, right, bottom, left. Golden Grids uses this same approach to place boxes which create our spiral. By default the first grid item is placed to the `"right"`, then the next box goes to the `"bottom"`, then `"left"`, then `"top"`, and repeat. With `placement` you shift that starting direction and `clockwise` reverses the flow.
+
+### Responsiveness
+
+Golden Grids are responsive and fill 100% of their container width. The proportions of the grid shouldn't break but I intentionally do not clip the box. Overflow management is the importers responsiblity.
+
+## How big can I go?
+
+The theoretical maximum is the 78th Fibonacci number: `8,944,394,323,791,464`. That's the largest value that fits within JavaScript's `Number.MAX_SAFE_INTEGER` (`9,007,199,254,740,991`). Beyond this threshold, integer arithmetic loses precision and the sequence values can't be trusted. The library generates all 78 valid stops automatically, giving you index positions 0 through 78 to work with.
+
+To be honest it's less about the absolute number and more about controlling the range. After all, a similar range at the start and end of the sequence renders comparably — `8/16` is still `1/2`, same relative proportions. Shorter ranges are easier on the eyes and more practical to use. You can still reach for `5,702,887`, but pair it with the 32nd digit `2,178,309` for a lovely 4-box golden grid dawg.
+
+## Why did I make this?
+
+Part of me doesn't accept myself as a true engineer. It's harsh, but It's how I feel. If I was a musician I would feel the same if I hadn't wrote a song. I'm not saying that's your life, but that's mine. While coding has been my trade for many years, there's one last hurtle I have yet to climb. One last mountain to climb. The release of an open-source project. I have a lot of things I want to make with this repo, but time is precisious. Better the community have it then keep it to myself and wait another decade.
+
+This library is meant to challenge the status quo that all things web must submit to rows and columns. Fuck that, this isn't 1984, I was born in 83, [think different](https://www.youtube.com/watch?v=5sMBhDv4sik). Ask yourself [is Golden Grids for you?](https://youtu.be/pRIIwJh1DDQ?si=LHKhOkO-RctUPEGA&t=210).
+
+## A long standing obsession with the Golden Ratio
+
+The golden ratio has been a passion of mine since Philly. The 1931 commercial piece [l'Atlantique](https://www.singulart.com/en/blog/2024/11/18/latlantique-by-a-m-cassandre-bc/) by A.M. Years later I would walk into a quaint shore antingue shop while scouting locations for a music video and saw a lithograph tucked away cover in dust, it now hangs on my wall at home produly framed. I first saw it in the pages of [The History of Graphic Design (3rd Edition)](https://www.amazon.com/History-Graphic-Design-Philip-Meggs/dp/0471291986) while at college, even then it reaced out. Hidden in the smoke stack, trailing off towards the tugboat in the lower frame, is the golden ratio. It spoke to me.
+
+During the record label years I often made 1-off landing pages for album releases and always tried to sneak the golden ratio in, placing the album art as the dominant square and using the remaining space for navigation. My first attempt at a true layout based solely on the golden ratio was in May 2016 with flexbox — a `1` to `8` golden grid built from `100vw`. It was cool but it didn't do much. I tried to use jQuery to do an infinite inward spiral but I didn't have the chops to make it happen. From there the idea sat for a while.
+
+It wasn't until September 2024 when I saw [Mads Stoumann](https://stoumann.dk/)'s post on [Golden Ratio with CSS Grid](https://dev.to/madsstoumann/the-golden-ratio-in-css-53d0) that I rekindled my curiosity. I began by sketching a 5 box grid in my notebook and having a moment of claity on what input variables would yield the most results. From their I built a basic example and did a lot of browser sessions with chatGPT where I provided it hard coded grids in vanilla HTML/JS/CSS then prompted the model to extend variable inputs. Around March copy/pasta was getting old and the models was hitting its complexity as I attempted to port my suprisly accurate vanilla file into a react library of substance. I got few days in and waived the white flag. I had hit The Tower of Hanoi problem, the work was going backwards.
+
+Maybe it was the [the suber bowl](https://www.youtube.com/watch?v=kQRu7DdTTVA) commericals, maybe it was more usage at work, maybe it was the fact I was 3 months into a green-scare, but on Friday Feb 13th I decided that it was time to dive back into Golden Grids. Me and my son were going camping on a frozen lake (shout-out [Pack 137](https://www.hazletcubscouts.org/)) and I had taken off to prep. I finished early so I setup Claude Code in my IDE and proposed this simple question. Why was my vanilla version always a perfect fit but the ported library version not consitently accruate as input variables changed? Within seconds Claude identified the error in my logic, it was a simple bounding box issue. [Dillon!](https://www.youtube.com/watch?v=txuWGoZF3ew)
+
+Ever since then I've been pushing the library forward. I try not to use Claude for everything, some of the commits we share, the harder ones I just direct but I still take the time to review. The multiple spelling-mistakes... all me. I have mixed feelings on AI and I still believe that creativity is sacred, but it's also an undeniable tool in our belts. Use it with purpose.

package/dist/golden-grids.cjs.js

@@ -0,0 +1,81 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".golden-grid{margin:0;padding:0;position:relative;width:100%;box-sizing:border-box}.golden-grid>.golden-grid__box{position:absolute}.golden-grid--outlined>.golden-grid__box{box-sizing:border-box}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ie=require("react");var we={exports:{}},ue={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var Le;function _t(){if(Le)return ue;Le=1;var n=ie,i=Symbol.for("react.element"),s=Symbol.for("react.fragment"),x=Object.prototype.hasOwnProperty,h=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function l(u,v,R){var _,O={},M=null,U=null;R!==void 0&&(M=""+R),v.key!==void 0&&(M=""+v.key),v.ref!==void 0&&(U=v.ref);for(_ in v)x.call(v,_)&&!c.hasOwnProperty(_)&&(O[_]=v[_]);if(u&&u.defaultProps)for(_ in v=u.defaultProps,v)O[_]===void 0&&(O[_]=v[_]);return{$$typeof:i,type:u,key:M,ref:U,props:O,_owner:h.current}}return ue.Fragment=s,ue.jsx=l,ue.jsxs=l,ue}var fe={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var We;function Et(){return We||(We=1,process.env.NODE_ENV!=="production"&&function(){var n=ie,i=Symbol.for("react.element"),s=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),c=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),u=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),R=Symbol.for("react.suspense"),_=Symbol.for("react.suspense_list"),O=Symbol.for("react.memo"),M=Symbol.for("react.lazy"),U=Symbol.for("react.offscreen"),I=Symbol.iterator,a="@@iterator";function j(e){if(e===null||typeof e!="object")return null;var t=I&&e[I]||e[a];return typeof t=="function"?t:null}var w=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function p(e){{for(var t=arguments.length,r=new Array(t>1?t-1:0),o=1;o<t;o++)r[o-1]=arguments[o];N("error",e,r)}}function N(e,t,r){{var o=w.ReactDebugCurrentFrame,g=o.getStackAddendum();g!==""&&(t+="%s",r=r.concat([g]));var m=r.map(function(d){return String(d)});m.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,m)}}var H=!1,ee=!1,oe=!1,J=!1,T=!1,Z;Z=Symbol.for("react.module.reference");function te(e){return!!(typeof e=="string"||typeof e=="function"||e===x||e===c||T||e===h||e===R||e===_||J||e===U||H||ee||oe||typeof e=="object"&&e!==null&&(e.$$typeof===M||e.$$typeof===O||e.$$typeof===l||e.$$typeof===u||e.$$typeof===v||e.$$typeof===Z||e.getModuleId!==void 0))}function Q(e,t,r){var o=e.displayName;if(o)return o;var g=t.displayName||t.name||"";return g!==""?r+"("+g+")":r}function E(e){return e.displayName||"Context"}function S(e){if(e==null)return null;if(typeof e.tag=="number"&&p("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case x:return"Fragment";case s:return"Portal";case c:return"Profiler";case h:return"StrictMode";case R:return"Suspense";case _:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case u:var t=e;return E(t)+".Consumer";case l:var r=e;return E(r._context)+".Provider";case v:return Q(e,e.render,"ForwardRef");case O:var o=e.displayName||null;return o!==null?o:S(e.type)||"Memo";case M:{var g=e,m=g._payload,d=g._init;try{return S(d(m))}catch{return null}}}return null}var z=Object.assign,L=0,$,F,W,A,q,b,k;function D(){}D.__reactDisabledLog=!0;function V(){{if(L===0){$=console.log,F=console.info,W=console.warn,A=console.error,q=console.group,b=console.groupCollapsed,k=console.groupEnd;var e={configurable:!0,enumerable:!0,value:D,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}L++}}function K(){{if(L--,L===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:z({},e,{value:$}),info:z({},e,{value:F}),warn:z({},e,{value:W}),error:z({},e,{value:A}),group:z({},e,{value:q}),groupCollapsed:z({},e,{value:b}),groupEnd:z({},e,{value:k})})}L<0&&p("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var re=w.ReactCurrentDispatcher,y;function de(e,t,r){{if(y===void 0)try{throw Error()}catch(g){var o=g.stack.trim().match(/\n( *(at )?)/);y=o&&o[1]||""}return`
+`+y+e}}var ye=!1,he;{var Ke=typeof WeakMap=="function"?WeakMap:Map;he=new Ke}function Pe(e,t){if(!e||ye)return"";{var r=he.get(e);if(r!==void 0)return r}var o;ye=!0;var g=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var m;m=re.current,re.current=null,V();try{if(t){var d=function(){throw Error()};if(Object.defineProperty(d.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(d,[])}catch(G){o=G}Reflect.construct(e,[],d)}else{try{d.call()}catch(G){o=G}e.call(d.prototype)}}else{try{throw Error()}catch(G){o=G}e()}}catch(G){if(G&&o&&typeof G.stack=="string"){for(var f=G.stack.split(`
+`),Y=o.stack.split(`
+`),C=f.length-1,P=Y.length-1;C>=1&&P>=0&&f[C]!==Y[P];)P--;for(;C>=1&&P>=0;C--,P--)if(f[C]!==Y[P]){if(C!==1||P!==1)do if(C--,P--,P<0||f[C]!==Y[P]){var B=`
+`+f[C].replace(" at new "," at ");return e.displayName&&B.includes("<anonymous>")&&(B=B.replace("<anonymous>",e.displayName)),typeof e=="function"&&he.set(e,B),B}while(C>=1&&P>=0);break}}}finally{ye=!1,re.current=m,K(),Error.prepareStackTrace=g}var se=e?e.displayName||e.name:"",ne=se?de(se):"";return typeof e=="function"&&he.set(e,ne),ne}function Ze(e,t,r){return Pe(e,!1)}function Qe(e){var t=e.prototype;return!!(t&&t.isReactComponent)}function ge(e,t,r){if(e==null)return"";if(typeof e=="function")return Pe(e,Qe(e));if(typeof e=="string")return de(e);switch(e){case R:return de("Suspense");case _:return de("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case v:return Ze(e.render);case O:return ge(e.type,t,r);case M:{var o=e,g=o._payload,m=o._init;try{return ge(m(g),t,r)}catch{}}}return""}var le=Object.prototype.hasOwnProperty,Oe={},$e=w.ReactDebugCurrentFrame;function ve(e){if(e){var t=e._owner,r=ge(e.type,e._source,t?t.type:null);$e.setExtraStackFrame(r)}else $e.setExtraStackFrame(null)}function qe(e,t,r,o,g){{var m=Function.call.bind(le);for(var d in e)if(m(e,d)){var f=void 0;try{if(typeof e[d]!="function"){var Y=Error((o||"React class")+": "+r+" type `"+d+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[d]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw Y.name="Invariant Violation",Y}f=e[d](t,d,o,r,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(C){f=C}f&&!(f instanceof Error)&&(ve(g),p("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",o||"React class",r,d,typeof f),ve(null)),f instanceof Error&&!(f.message in Oe)&&(Oe[f.message]=!0,ve(g),p("Failed %s type: %s",r,f.message),ve(null))}}}var et=Array.isArray;function me(e){return et(e)}function tt(e){{var t=typeof Symbol=="function"&&Symbol.toStringTag,r=t&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r}}function rt(e){try{return je(e),!1}catch{return!0}}function je(e){return""+e}function ke(e){if(rt(e))return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",tt(e)),je(e)}var ce=w.ReactCurrentOwner,nt={key:!0,ref:!0,__self:!0,__source:!0},Ie,De,be;be={};function it(e){if(le.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return e.ref!==void 0}function ot(e){if(le.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function at(e,t){if(typeof e.ref=="string"&&ce.current&&t&&ce.current.stateNode!==t){var r=S(ce.current.type);be[r]||(p('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref',S(ce.current.type),e.ref),be[r]=!0)}}function st(e,t){{var r=function(){Ie||(Ie=!0,p("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}}function lt(e,t){{var r=function(){De||(De=!0,p("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}}var ct=function(e,t,r,o,g,m,d){var f={$$typeof:i,type:e,key:t,ref:r,props:d,_owner:m};return f._store={},Object.defineProperty(f._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(f,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(f,"_source",{configurable:!1,enumerable:!1,writable:!1,value:g}),Object.freeze&&(Object.freeze(f.props),Object.freeze(f)),f};function ut(e,t,r,o,g){{var m,d={},f=null,Y=null;r!==void 0&&(ke(r),f=""+r),ot(t)&&(ke(t.key),f=""+t.key),it(t)&&(Y=t.ref,at(t,g));for(m in t)le.call(t,m)&&!nt.hasOwnProperty(m)&&(d[m]=t[m]);if(e&&e.defaultProps){var C=e.defaultProps;for(m in C)d[m]===void 0&&(d[m]=C[m])}if(f||Y){var P=typeof e=="function"?e.displayName||e.name||"Unknown":e;f&&st(d,P),Y&&lt(d,P)}return ct(e,f,Y,g,o,ce.current,d)}}var xe=w.ReactCurrentOwner,Me=w.ReactDebugCurrentFrame;function ae(e){if(e){var t=e._owner,r=ge(e.type,e._source,t?t.type:null);Me.setExtraStackFrame(r)}else Me.setExtraStackFrame(null)}var _e;_e=!1;function Ee(e){return typeof e=="object"&&e!==null&&e.$$typeof===i}function Fe(){{if(xe.current){var e=S(xe.current.type);if(e)return`
+
+Check the render method of \``+e+"`."}return""}}function ft(e){{if(e!==void 0){var t=e.fileName.replace(/^.*[\\\/]/,""),r=e.lineNumber;return`
+
+Check your code at `+t+":"+r+"."}return""}}var Ae={};function dt(e){{var t=Fe();if(!t){var r=typeof e=="string"?e:e.displayName||e.name;r&&(t=`
+
+Check the top-level render call using <`+r+">.")}return t}}function Ye(e,t){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var r=dt(t);if(Ae[r])return;Ae[r]=!0;var o="";e&&e._owner&&e._owner!==xe.current&&(o=" It was passed a child from "+S(e._owner.type)+"."),ae(e),p('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',r,o),ae(null)}}function Ge(e,t){{if(typeof e!="object")return;if(me(e))for(var r=0;r<e.length;r++){var o=e[r];Ee(o)&&Ye(o,t)}else if(Ee(e))e._store&&(e._store.validated=!0);else if(e){var g=j(e);if(typeof g=="function"&&g!==e.entries)for(var m=g.call(e),d;!(d=m.next()).done;)Ee(d.value)&&Ye(d.value,t)}}}function ht(e){{var t=e.type;if(t==null||typeof t=="string")return;var r;if(typeof t=="function")r=t.propTypes;else if(typeof t=="object"&&(t.$$typeof===v||t.$$typeof===O))r=t.propTypes;else return;if(r){var o=S(t);qe(r,e.props,"prop",o,e)}else if(t.PropTypes!==void 0&&!_e){_e=!0;var g=S(t);p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",g||"Unknown")}typeof t.getDefaultProps=="function"&&!t.getDefaultProps.isReactClassApproved&&p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function gt(e){{for(var t=Object.keys(e.props),r=0;r<t.length;r++){var o=t[r];if(o!=="children"&&o!=="key"){ae(e),p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",o),ae(null);break}}e.ref!==null&&(ae(e),p("Invalid attribute `ref` supplied to `React.Fragment`."),ae(null))}}var Ne={};function ze(e,t,r,o,g,m){{var d=te(e);if(!d){var f="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(f+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var Y=ft(g);Y?f+=Y:f+=Fe();var C;e===null?C="null":me(e)?C="array":e!==void 0&&e.$$typeof===i?(C="<"+(S(e.type)||"Unknown")+" />",f=" Did you accidentally export a JSX literal instead of a component?"):C=typeof e,p("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",C,f)}var P=ut(e,t,r,g,m);if(P==null)return P;if(d){var B=t.children;if(B!==void 0)if(o)if(me(B)){for(var se=0;se<B.length;se++)Ge(B[se],e);Object.freeze&&Object.freeze(B)}else p("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Ge(B,e)}if(le.call(t,"key")){var ne=S(e),G=Object.keys(t).filter(function(xt){return xt!=="key"}),Re=G.length>0?"{key: someKey, "+G.join(": ..., ")+": ...}":"{key: someKey}";if(!Ne[ne+Re]){var bt=G.length>0?"{"+G.join(": ..., ")+": ...}":"{}";p(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,Re,ne,bt,ne),Ne[ne+Re]=!0}}return e===x?gt(P):ht(P),P}}function vt(e,t,r){return ze(e,t,r,!0)}function pt(e,t,r){return ze(e,t,r,!1)}var yt=pt,mt=vt;fe.Fragment=x,fe.jsx=yt,fe.jsxs=mt}()),fe}process.env.NODE_ENV==="production"?we.exports=_t():we.exports=Et();var X=we.exports;const Te=(()=>{const n=[0];let i=1,s=1;for(;i<=Number.MAX_SAFE_INTEGER;)n.push(i),[i,s]=[s,i+s];return n})();function Be(n){const i=[1,1];for(;i[i.length-1]<n;)i.push(i[i.length-1]+i[i.length-2]);return i.filter(s=>s<=n)}function Ce(n,i){let s=Math.min(n,i),x=Math.max(n,i);if(x===0)return null;s===0&&(s=1);const h=s-1,c=x-1,l=[1,1];for(;l.length<=c;)l.push(l[l.length-1]+l[l.length-2]);return{userSequence:l.slice(h,c+1),startIdx:h,endIdx:c}}const Ue=ie.createContext({inputControl:{from:1,to:1,color:"#7f7ec7",clockwise:!0,placement:"right"},setInputControl:()=>{}}),Rt=({children:n,initialConfig:i})=>{if(!n)return X.jsx(X.Fragment,{});const[s,x]=ie.useState({from:1,to:4,color:"#7f7ec7",clockwise:!0,placement:"right",...i}),h=c=>{const{from:l,to:u}=c;l<0||l>=Te.length||u<0||u>=Te.length||!Number.isInteger(l)||!Number.isInteger(u)||x(c)};return X.jsx(Ue.Provider,{value:{inputControl:s,setInputControl:h},children:n})},Ve=()=>{const n=ie.useContext(Ue);if(!n)throw new Error("useGrid must be used within a GridProvider");return n};function Xe(n,i,s){const h={right:0,bottom:90,left:180,top:270}[n];if(s<2)return(h+360)%360;const u=(i?[90,180,270,0]:[270,180,90,0])[(s-2)%4];return(h-u+360)%360}function Se(n,i=!0,s=0){if(n.length<2)throw new Error("Need at least two numbers in the sequence.");if(![0,90,180,270].includes(s))throw new Error(`Invalid rotation value: ${s}. Only 0, 90, 180, and 270 are allowed.`);const h=[];let c=1/0,l=-1/0,u=1/0,v=-1/0;function R(a){a.x<c&&(c=a.x),a.x+a.size-1>l&&(l=a.x+a.size-1),a.y<u&&(u=a.y),a.y+a.size-1>v&&(v=a.y+a.size-1)}function _(){c=1/0,l=-1/0,u=1/0,v=-1/0;for(const a of h)R(a)}h.push({size:n[0],x:0,y:0}),h.push({size:n[1],x:n[0],y:0}),R(h[0]),R(h[1]);const O=i?[{dx:0,dy:1},{dx:-1,dy:0},{dx:0,dy:-1},{dx:1,dy:0}]:[{dx:0,dy:-1},{dx:-1,dy:0},{dx:0,dy:1},{dx:1,dy:0}];let M=0;for(let a=2;a<n.length;a++){const j=n[a],w=O[M];let p,N;w.dx===0&&w.dy===1?(p=c,N=v+1):w.dx===-1&&w.dy===0?(p=c-j,N=v-j+1):w.dx===0&&w.dy===-1?(p=l-j+1,N=u-j):(p=l+1,N=u);const H={size:j,x:p,y:N};h.push(H),R(H),M=(M+1)%O.length}s&&(h.forEach(a=>{const j=a.x,w=a.y;s===90?(a.x=-w-a.size+1,a.y=j):s===180?(a.x=-j-a.size+1,a.y=-w-a.size+1):s===270&&(a.x=w,a.y=-j-a.size+1)}),_());const U=l-c+1,I=v-u+1;return{squares:h,width:U,height:I,minX:c,minY:u}}function He(n){n=n.replace(/^#/,"");let i=parseInt(n.substring(0,2),16)/255,s=parseInt(n.substring(2,4),16)/255,x=parseInt(n.substring(4,6),16)/255,h=Math.max(i,s,x),c=Math.min(i,s,x),l=0,u=0,v=(h+c)/2;if(h!==c){let R=h-c;switch(u=v>.5?R/(2-h-c):R/(h+c),h){case i:l=(s-x)/R+(s<x?6:0);break;case s:l=(x-i)/R+2;break;case x:l=(i-s)/R+4;break}l=l/6}return[l*360,u*100,v*100]}function pe(n,i,s){return`hsl(${n}, ${i}%, ${s}%)`}const Je=({children:n,className:i,style:s})=>X.jsx("div",{className:i,style:{width:"100%",height:"100%",position:"relative",...s},children:n});const wt=n=>{const{inputControl:i}=Ve(),s=n.from??i.from,x=n.to??i.to,h="color"in n?n.color:i.color,c=n.clockwise??i.clockwise,l=n.placement??i.placement,u="outline"in n?n.outline:void 0,v=!!u,R=u?{borderTop:u,borderLeft:u}:{},_=u?{borderRight:u,borderBottom:u}:{},O=ie.Children.toArray(n.children).filter(b=>ie.isValidElement(b)&&b.type===Je),M=O.find(b=>b.props.placeholder)??null,U=O.filter(b=>!b.props.placeholder);let I=s,a=x;I>a&&([I,a]=[a,I]);const j=Ce(I,a);if(!j)return X.jsx("div",{className:"golden-grid"});const{userSequence:w,startIdx:p,endIdx:N}=j,H=Xe(l,c,p),ee=Math.max(...w),oe=Be(ee),J=h||void 0,[T,Z,te]=J?He(J):[0,0,50],Q=`golden-grid${v?" golden-grid--outlined":""}`;if(p===0&&N===0){const b=J?pe(T,Z,te):void 0;return X.jsx("div",{className:Q,style:{aspectRatio:"1 / 1",...R},children:X.jsx("div",{className:"golden-grid__box",style:{left:0,top:0,width:"100%",height:"100%",background:b,..._},children:U[0]??null})})}const E=Se(oe,c,H),S=E.squares.slice(p,N+1),z=E.squares.slice(0,p),L=z.length>0;let $=null;if(L){let b=1/0,k=-1/0,D=1/0,V=-1/0;for(const y of z)y.x<b&&(b=y.x),y.x+y.size-1>k&&(k=y.x+y.size-1),y.y<D&&(D=y.y),y.y+y.size-1>V&&(V=y.y+y.size-1);const K=k-b+1,re=V-D+1;$={left:`${(b-E.minX)/E.width*100}%`,top:`${(D-E.minY)/E.height*100}%`,width:`${K/E.width*100}%`,height:`${re/E.height*100}%`,background:J??void 0,..._}}const F=S.length,W=Math.min(330,180+Math.max(0,F-4)*15),A=Math.min(50,F*3),q=S.map((b,k)=>{if(!J)return;let D=0;F>1?D=L?(k+1)/(F+1):k/(F-1):L&&(D=.5);const V=(T+W*D)%360,K=Math.max(10,Math.min(90,te+A/2-D*A));return pe(V,Z,K)});return X.jsxs("div",{className:Q,style:{aspectRatio:`${E.width} / ${E.height}`,...R},children:[L&&$&&X.jsx("div",{className:"golden-grid__box golden-grid__box--placeholder",style:$,children:M}),S.map((b,k)=>X.jsx("div",{className:"golden-grid__box",style:{left:`${(b.x-E.minX)/E.width*100}%`,top:`${(b.y-E.minY)/E.height*100}%`,width:`${b.size/E.width*100}%`,height:`${b.size/E.height*100}%`,background:q[k],..._},children:U[k]??null},k))]})};function Tt(n,i,s,x,h,c){let l=n,u=i;l>u&&([l,u]=[u,l]);const v=Ce(l,u);if(!v)return"<!-- No grid to render -->";const{userSequence:R,startIdx:_,endIdx:O}=v,M=Math.max(...R),U=Be(M),I=s||void 0,[a,j,w]=I?He(I):[0,0,50],p=!!c,N=`golden-grid${p?" golden-grid--outlined":""}`,H=c?` style="border-top: ${c}; border-left: ${c};"`:"",ee=c?` border-right: ${c}; border-bottom: ${c};`:"",oe=p?`
+    .golden-grid--outlined > .golden-grid__box { box-sizing: border-box; }`:"";if(_===0&&O===0){const $=I?` background: ${pe(a,j,w)};`:"";return`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Golden Grid</title>
+  <style>
+    body { margin: 0; padding: 0; }
+    .golden-grid {
+      margin: 0; padding: 0;
+      position: relative; width: 100%; aspect-ratio: 1 / 1;
+    }
+    .golden-grid > .golden-grid__box { position: absolute; }${oe}
+  </style>
+</head>
+<body>
+  <div class="${N}"${H}>
+    <div class="golden-grid__box" style="left: 0; top: 0; width: 100%; height: 100%;${$}${ee}"></div>
+  </div>
+</body>
+</html>`}const J=Xe(h,x,_),T=Se(U,x,J),Z=T.squares.slice(_,O+1),te=T.squares.slice(0,_),Q=te.length>0,E=[];if(Q){let $=1/0,F=-1/0,W=1/0,A=-1/0;for(const y of te)y.x<$&&($=y.x),y.x+y.size-1>F&&(F=y.x+y.size-1),y.y<W&&(W=y.y),y.y+y.size-1>A&&(A=y.y+y.size-1);const q=F-$+1,b=A-W+1,k=($-T.minX)/T.width*100,D=(W-T.minY)/T.height*100,V=q/T.width*100,K=b/T.height*100,re=I?` background: ${I};`:"";E.push(`      <div class="golden-grid__box golden-grid__box--placeholder" style="left: ${k}%; top: ${D}%; width: ${V}%; height: ${K}%;${re}${ee}"></div>`)}const S=Z.length,z=Math.min(330,180+Math.max(0,S-4)*15),L=Math.min(50,S*3);return Z.forEach(($,F)=>{let W=a,A=0;S>1?(Q?A=(F+1)/(S+1):A=F/(S-1),W=(a+z*A)%360):Q&&(A=.5,W=(a+z*.5)%360);const q=Math.max(10,Math.min(90,w+L/2-A*L)),b=($.x-T.minX)/T.width*100,k=($.y-T.minY)/T.height*100,D=$.size/T.width*100,V=$.size/T.height*100,K=I?` background: ${pe(W,j,q)};`:"";E.push(`      <div class="golden-grid__box" style="left: ${b}%; top: ${k}%; width: ${D}%; height: ${V}%;${K}${ee}"></div>`)}),`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Golden Grid</title>
+  <style>
+    body { margin: 0; padding: 0; }
+    .golden-grid {
+      margin: 0;
+      padding: 0;
+      position: relative;
+      width: 100%;
+      box-sizing: border-box;
+      aspect-ratio: ${T.width} / ${T.height};
+    }
+    .golden-grid > .golden-grid__box {
+      position: absolute;
+    }${oe}
+  </style>
+</head>
+<body>
+  <div class="${N}"${H}>
+${E.join(`
+`)}
+  </div>
+</body>
+</html>`}exports.FIB_STOPS=Te;exports.GoldenBox=Je;exports.GoldenGrid=wt;exports.GridProvider=Rt;exports.generateGoldenGridLayout=Se;exports.generateGridHTML=Tt;exports.getGridRange=Ce;exports.useGrid=Ve;

package/dist/golden-grids.es.js

@@ -0,0 +1,926 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".golden-grid{margin:0;padding:0;position:relative;width:100%;box-sizing:border-box}.golden-grid>.golden-grid__box{position:absolute}.golden-grid--outlined>.golden-grid__box{box-sizing:border-box}")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
+import ge, { createContext as bt, useState as xt, useContext as _t } from "react";
+var we = { exports: {} }, ce = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Ne;
+function Et() {
+  if (Ne)
+    return ce;
+  Ne = 1;
+  var n = ge, i = Symbol.for("react.element"), s = Symbol.for("react.fragment"), x = Object.prototype.hasOwnProperty, h = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, c = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function l(u, g, R) {
+    var _, $ = {}, M = null, U = null;
+    R !== void 0 && (M = "" + R), g.key !== void 0 && (M = "" + g.key), g.ref !== void 0 && (U = g.ref);
+    for (_ in g)
+      x.call(g, _) && !c.hasOwnProperty(_) && ($[_] = g[_]);
+    if (u && u.defaultProps)
+      for (_ in g = u.defaultProps, g)
+        $[_] === void 0 && ($[_] = g[_]);
+    return { $$typeof: i, type: u, key: M, ref: U, props: $, _owner: h.current };
+  }
+  return ce.Fragment = s, ce.jsx = l, ce.jsxs = l, ce;
+}
+var ue = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ze;
+function Rt() {
+  return ze || (ze = 1, process.env.NODE_ENV !== "production" && function() {
+    var n = ge, i = Symbol.for("react.element"), s = Symbol.for("react.portal"), x = Symbol.for("react.fragment"), h = Symbol.for("react.strict_mode"), c = Symbol.for("react.profiler"), l = Symbol.for("react.provider"), u = Symbol.for("react.context"), g = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), _ = Symbol.for("react.suspense_list"), $ = Symbol.for("react.memo"), M = Symbol.for("react.lazy"), U = Symbol.for("react.offscreen"), I = Symbol.iterator, a = "@@iterator";
+    function j(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var t = I && e[I] || e[a];
+      return typeof t == "function" ? t : null;
+    }
+    var w = n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function p(e) {
+      {
+        for (var t = arguments.length, r = new Array(t > 1 ? t - 1 : 0), o = 1; o < t; o++)
+          r[o - 1] = arguments[o];
+        z("error", e, r);
+      }
+    }
+    function z(e, t, r) {
+      {
+        var o = w.ReactDebugCurrentFrame, v = o.getStackAddendum();
+        v !== "" && (t += "%s", r = r.concat([v]));
+        var m = r.map(function(d) {
+          return String(d);
+        });
+        m.unshift("Warning: " + t), Function.prototype.apply.call(console[e], console, m);
+      }
+    }
+    var H = !1, ee = !1, ie = !1, J = !1, C = !1, Z;
+    Z = Symbol.for("react.module.reference");
+    function te(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === x || e === c || C || e === h || e === R || e === _ || J || e === U || H || ee || ie || typeof e == "object" && e !== null && (e.$$typeof === M || e.$$typeof === $ || e.$$typeof === l || e.$$typeof === u || e.$$typeof === g || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === Z || e.getModuleId !== void 0));
+    }
+    function Q(e, t, r) {
+      var o = e.displayName;
+      if (o)
+        return o;
+      var v = t.displayName || t.name || "";
+      return v !== "" ? r + "(" + v + ")" : r;
+    }
+    function E(e) {
+      return e.displayName || "Context";
+    }
+    function S(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && p("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+        return e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case x:
+          return "Fragment";
+        case s:
+          return "Portal";
+        case c:
+          return "Profiler";
+        case h:
+          return "StrictMode";
+        case R:
+          return "Suspense";
+        case _:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case u:
+            var t = e;
+            return E(t) + ".Consumer";
+          case l:
+            var r = e;
+            return E(r._context) + ".Provider";
+          case g:
+            return Q(e, e.render, "ForwardRef");
+          case $:
+            var o = e.displayName || null;
+            return o !== null ? o : S(e.type) || "Memo";
+          case M: {
+            var v = e, m = v._payload, d = v._init;
+            try {
+              return S(d(m));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var W = Object.assign, G = 0, O, F, L, A, q, b, k;
+    function D() {
+    }
+    D.__reactDisabledLog = !0;
+    function V() {
+      {
+        if (G === 0) {
+          O = console.log, F = console.info, L = console.warn, A = console.error, q = console.group, b = console.groupCollapsed, k = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: D,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        G++;
+      }
+    }
+    function K() {
+      {
+        if (G--, G === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: W({}, e, {
+              value: O
+            }),
+            info: W({}, e, {
+              value: F
+            }),
+            warn: W({}, e, {
+              value: L
+            }),
+            error: W({}, e, {
+              value: A
+            }),
+            group: W({}, e, {
+              value: q
+            }),
+            groupCollapsed: W({}, e, {
+              value: b
+            }),
+            groupEnd: W({}, e, {
+              value: k
+            })
+          });
+        }
+        G < 0 && p("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var re = w.ReactCurrentDispatcher, y;
+    function fe(e, t, r) {
+      {
+        if (y === void 0)
+          try {
+            throw Error();
+          } catch (v) {
+            var o = v.stack.trim().match(/\n( *(at )?)/);
+            y = o && o[1] || "";
+          }
+        return `
+` + y + e;
+      }
+    }
+    var ye = !1, de;
+    {
+      var He = typeof WeakMap == "function" ? WeakMap : Map;
+      de = new He();
+    }
+    function Ce(e, t) {
+      if (!e || ye)
+        return "";
+      {
+        var r = de.get(e);
+        if (r !== void 0)
+          return r;
+      }
+      var o;
+      ye = !0;
+      var v = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var m;
+      m = re.current, re.current = null, V();
+      try {
+        if (t) {
+          var d = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(d.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(d, []);
+            } catch (N) {
+              o = N;
+            }
+            Reflect.construct(e, [], d);
+          } else {
+            try {
+              d.call();
+            } catch (N) {
+              o = N;
+            }
+            e.call(d.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (N) {
+            o = N;
+          }
+          e();
+        }
+      } catch (N) {
+        if (N && o && typeof N.stack == "string") {
+          for (var f = N.stack.split(`
+`), Y = o.stack.split(`
+`), T = f.length - 1, P = Y.length - 1; T >= 1 && P >= 0 && f[T] !== Y[P]; )
+            P--;
+          for (; T >= 1 && P >= 0; T--, P--)
+            if (f[T] !== Y[P]) {
+              if (T !== 1 || P !== 1)
+                do
+                  if (T--, P--, P < 0 || f[T] !== Y[P]) {
+                    var B = `
+` + f[T].replace(" at new ", " at ");
+                    return e.displayName && B.includes("<anonymous>") && (B = B.replace("<anonymous>", e.displayName)), typeof e == "function" && de.set(e, B), B;
+                  }
+                while (T >= 1 && P >= 0);
+              break;
+            }
+        }
+      } finally {
+        ye = !1, re.current = m, K(), Error.prepareStackTrace = v;
+      }
+      var ae = e ? e.displayName || e.name : "", ne = ae ? fe(ae) : "";
+      return typeof e == "function" && de.set(e, ne), ne;
+    }
+    function Je(e, t, r) {
+      return Ce(e, !1);
+    }
+    function Ke(e) {
+      var t = e.prototype;
+      return !!(t && t.isReactComponent);
+    }
+    function he(e, t, r) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return Ce(e, Ke(e));
+      if (typeof e == "string")
+        return fe(e);
+      switch (e) {
+        case R:
+          return fe("Suspense");
+        case _:
+          return fe("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case g:
+            return Je(e.render);
+          case $:
+            return he(e.type, t, r);
+          case M: {
+            var o = e, v = o._payload, m = o._init;
+            try {
+              return he(m(v), t, r);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var se = Object.prototype.hasOwnProperty, Te = {}, Se = w.ReactDebugCurrentFrame;
+    function ve(e) {
+      if (e) {
+        var t = e._owner, r = he(e.type, e._source, t ? t.type : null);
+        Se.setExtraStackFrame(r);
+      } else
+        Se.setExtraStackFrame(null);
+    }
+    function Ze(e, t, r, o, v) {
+      {
+        var m = Function.call.bind(se);
+        for (var d in e)
+          if (m(e, d)) {
+            var f = void 0;
+            try {
+              if (typeof e[d] != "function") {
+                var Y = Error((o || "React class") + ": " + r + " type `" + d + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[d] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw Y.name = "Invariant Violation", Y;
+              }
+              f = e[d](t, d, o, r, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (T) {
+              f = T;
+            }
+            f && !(f instanceof Error) && (ve(v), p("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", o || "React class", r, d, typeof f), ve(null)), f instanceof Error && !(f.message in Te) && (Te[f.message] = !0, ve(v), p("Failed %s type: %s", r, f.message), ve(null));
+          }
+      }
+    }
+    var Qe = Array.isArray;
+    function me(e) {
+      return Qe(e);
+    }
+    function qe(e) {
+      {
+        var t = typeof Symbol == "function" && Symbol.toStringTag, r = t && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return r;
+      }
+    }
+    function et(e) {
+      try {
+        return Pe(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Pe(e) {
+      return "" + e;
+    }
+    function $e(e) {
+      if (et(e))
+        return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", qe(e)), Pe(e);
+    }
+    var le = w.ReactCurrentOwner, tt = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Oe, je, be;
+    be = {};
+    function rt(e) {
+      if (se.call(e, "ref")) {
+        var t = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (t && t.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function nt(e) {
+      if (se.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function it(e, t) {
+      if (typeof e.ref == "string" && le.current && t && le.current.stateNode !== t) {
+        var r = S(le.current.type);
+        be[r] || (p('Component "%s" contains the string ref "%s". Support for string refs will be removed in a future major release. This case cannot be automatically converted to an arrow function. We ask you to manually fix this case by using useRef() or createRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref', S(le.current.type), e.ref), be[r] = !0);
+      }
+    }
+    function ot(e, t) {
+      {
+        var r = function() {
+          Oe || (Oe = !0, p("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
+        };
+        r.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: r,
+          configurable: !0
+        });
+      }
+    }
+    function at(e, t) {
+      {
+        var r = function() {
+          je || (je = !0, p("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", t));
+        };
+        r.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: r,
+          configurable: !0
+        });
+      }
+    }
+    var st = function(e, t, r, o, v, m, d) {
+      var f = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: i,
+        // Built-in properties that belong on the element
+        type: e,
+        key: t,
+        ref: r,
+        props: d,
+        // Record the component responsible for creating this element.
+        _owner: m
+      };
+      return f._store = {}, Object.defineProperty(f._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(f, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: o
+      }), Object.defineProperty(f, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: v
+      }), Object.freeze && (Object.freeze(f.props), Object.freeze(f)), f;
+    };
+    function lt(e, t, r, o, v) {
+      {
+        var m, d = {}, f = null, Y = null;
+        r !== void 0 && ($e(r), f = "" + r), nt(t) && ($e(t.key), f = "" + t.key), rt(t) && (Y = t.ref, it(t, v));
+        for (m in t)
+          se.call(t, m) && !tt.hasOwnProperty(m) && (d[m] = t[m]);
+        if (e && e.defaultProps) {
+          var T = e.defaultProps;
+          for (m in T)
+            d[m] === void 0 && (d[m] = T[m]);
+        }
+        if (f || Y) {
+          var P = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          f && ot(d, P), Y && at(d, P);
+        }
+        return st(e, f, Y, v, o, le.current, d);
+      }
+    }
+    var xe = w.ReactCurrentOwner, ke = w.ReactDebugCurrentFrame;
+    function oe(e) {
+      if (e) {
+        var t = e._owner, r = he(e.type, e._source, t ? t.type : null);
+        ke.setExtraStackFrame(r);
+      } else
+        ke.setExtraStackFrame(null);
+    }
+    var _e;
+    _e = !1;
+    function Ee(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === i;
+    }
+    function Ie() {
+      {
+        if (xe.current) {
+          var e = S(xe.current.type);
+          if (e)
+            return `
+
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function ct(e) {
+      {
+        if (e !== void 0) {
+          var t = e.fileName.replace(/^.*[\\\/]/, ""), r = e.lineNumber;
+          return `
+
+Check your code at ` + t + ":" + r + ".";
+        }
+        return "";
+      }
+    }
+    var De = {};
+    function ut(e) {
+      {
+        var t = Ie();
+        if (!t) {
+          var r = typeof e == "string" ? e : e.displayName || e.name;
+          r && (t = `
+
+Check the top-level render call using <` + r + ">.");
+        }
+        return t;
+      }
+    }
+    function Me(e, t) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var r = ut(t);
+        if (De[r])
+          return;
+        De[r] = !0;
+        var o = "";
+        e && e._owner && e._owner !== xe.current && (o = " It was passed a child from " + S(e._owner.type) + "."), oe(e), p('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', r, o), oe(null);
+      }
+    }
+    function Fe(e, t) {
+      {
+        if (typeof e != "object")
+          return;
+        if (me(e))
+          for (var r = 0; r < e.length; r++) {
+            var o = e[r];
+            Ee(o) && Me(o, t);
+          }
+        else if (Ee(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var v = j(e);
+          if (typeof v == "function" && v !== e.entries)
+            for (var m = v.call(e), d; !(d = m.next()).done; )
+              Ee(d.value) && Me(d.value, t);
+        }
+      }
+    }
+    function ft(e) {
+      {
+        var t = e.type;
+        if (t == null || typeof t == "string")
+          return;
+        var r;
+        if (typeof t == "function")
+          r = t.propTypes;
+        else if (typeof t == "object" && (t.$$typeof === g || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        t.$$typeof === $))
+          r = t.propTypes;
+        else
+          return;
+        if (r) {
+          var o = S(t);
+          Ze(r, e.props, "prop", o, e);
+        } else if (t.PropTypes !== void 0 && !_e) {
+          _e = !0;
+          var v = S(t);
+          p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", v || "Unknown");
+        }
+        typeof t.getDefaultProps == "function" && !t.getDefaultProps.isReactClassApproved && p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function dt(e) {
+      {
+        for (var t = Object.keys(e.props), r = 0; r < t.length; r++) {
+          var o = t[r];
+          if (o !== "children" && o !== "key") {
+            oe(e), p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", o), oe(null);
+            break;
+          }
+        }
+        e.ref !== null && (oe(e), p("Invalid attribute `ref` supplied to `React.Fragment`."), oe(null));
+      }
+    }
+    var Ae = {};
+    function Ye(e, t, r, o, v, m) {
+      {
+        var d = te(e);
+        if (!d) {
+          var f = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (f += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var Y = ct(v);
+          Y ? f += Y : f += Ie();
+          var T;
+          e === null ? T = "null" : me(e) ? T = "array" : e !== void 0 && e.$$typeof === i ? (T = "<" + (S(e.type) || "Unknown") + " />", f = " Did you accidentally export a JSX literal instead of a component?") : T = typeof e, p("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", T, f);
+        }
+        var P = lt(e, t, r, v, m);
+        if (P == null)
+          return P;
+        if (d) {
+          var B = t.children;
+          if (B !== void 0)
+            if (o)
+              if (me(B)) {
+                for (var ae = 0; ae < B.length; ae++)
+                  Fe(B[ae], e);
+                Object.freeze && Object.freeze(B);
+              } else
+                p("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              Fe(B, e);
+        }
+        if (se.call(t, "key")) {
+          var ne = S(e), N = Object.keys(t).filter(function(mt) {
+            return mt !== "key";
+          }), Re = N.length > 0 ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Ae[ne + Re]) {
+            var yt = N.length > 0 ? "{" + N.join(": ..., ") + ": ...}" : "{}";
+            p(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, Re, ne, yt, ne), Ae[ne + Re] = !0;
+          }
+        }
+        return e === x ? dt(P) : ft(P), P;
+      }
+    }
+    function ht(e, t, r) {
+      return Ye(e, t, r, !0);
+    }
+    function vt(e, t, r) {
+      return Ye(e, t, r, !1);
+    }
+    var gt = vt, pt = ht;
+    ue.Fragment = x, ue.jsx = gt, ue.jsxs = pt;
+  }()), ue;
+}
+process.env.NODE_ENV === "production" ? we.exports = Et() : we.exports = Rt();
+var X = we.exports;
+const We = (() => {
+  const n = [0];
+  let i = 1, s = 1;
+  for (; i <= Number.MAX_SAFE_INTEGER; )
+    n.push(i), [i, s] = [s, i + s];
+  return n;
+})();
+function Ge(n) {
+  const i = [1, 1];
+  for (; i[i.length - 1] < n; )
+    i.push(i[i.length - 1] + i[i.length - 2]);
+  return i.filter((s) => s <= n);
+}
+function Le(n, i) {
+  let s = Math.min(n, i), x = Math.max(n, i);
+  if (x === 0)
+    return null;
+  s === 0 && (s = 1);
+  const h = s - 1, c = x - 1, l = [1, 1];
+  for (; l.length <= c; )
+    l.push(l[l.length - 1] + l[l.length - 2]);
+  return {
+    userSequence: l.slice(h, c + 1),
+    startIdx: h,
+    endIdx: c
+  };
+}
+const Be = bt({
+  inputControl: {
+    from: 1,
+    to: 1,
+    color: "#7f7ec7",
+    clockwise: !0,
+    placement: "right"
+  },
+  setInputControl: () => {
+  }
+}), St = ({ children: n, initialConfig: i }) => {
+  if (!n)
+    return /* @__PURE__ */ X.jsx(X.Fragment, {});
+  const [s, x] = xt({
+    from: 1,
+    to: 4,
+    color: "#7f7ec7",
+    clockwise: !0,
+    placement: "right",
+    ...i
+  }), h = (c) => {
+    const { from: l, to: u } = c;
+    l < 0 || l >= We.length || u < 0 || u >= We.length || !Number.isInteger(l) || !Number.isInteger(u) || x(c);
+  };
+  return /* @__PURE__ */ X.jsx(Be.Provider, { value: { inputControl: s, setInputControl: h }, children: n });
+}, wt = () => {
+  const n = _t(Be);
+  if (!n)
+    throw new Error("useGrid must be used within a GridProvider");
+  return n;
+};
+function Ue(n, i, s) {
+  const h = { right: 0, bottom: 90, left: 180, top: 270 }[n];
+  if (s < 2)
+    return (h + 360) % 360;
+  const u = (i ? [90, 180, 270, 0] : [270, 180, 90, 0])[(s - 2) % 4];
+  return (h - u + 360) % 360;
+}
+function Ve(n, i = !0, s = 0) {
+  if (n.length < 2)
+    throw new Error("Need at least two numbers in the sequence.");
+  if (![0, 90, 180, 270].includes(s))
+    throw new Error(`Invalid rotation value: ${s}. Only 0, 90, 180, and 270 are allowed.`);
+  const h = [];
+  let c = 1 / 0, l = -1 / 0, u = 1 / 0, g = -1 / 0;
+  function R(a) {
+    a.x < c && (c = a.x), a.x + a.size - 1 > l && (l = a.x + a.size - 1), a.y < u && (u = a.y), a.y + a.size - 1 > g && (g = a.y + a.size - 1);
+  }
+  function _() {
+    c = 1 / 0, l = -1 / 0, u = 1 / 0, g = -1 / 0;
+    for (const a of h)
+      R(a);
+  }
+  h.push({ size: n[0], x: 0, y: 0 }), h.push({ size: n[1], x: n[0], y: 0 }), R(h[0]), R(h[1]);
+  const $ = i ? [{ dx: 0, dy: 1 }, { dx: -1, dy: 0 }, { dx: 0, dy: -1 }, { dx: 1, dy: 0 }] : [{ dx: 0, dy: -1 }, { dx: -1, dy: 0 }, { dx: 0, dy: 1 }, { dx: 1, dy: 0 }];
+  let M = 0;
+  for (let a = 2; a < n.length; a++) {
+    const j = n[a], w = $[M];
+    let p, z;
+    w.dx === 0 && w.dy === 1 ? (p = c, z = g + 1) : w.dx === -1 && w.dy === 0 ? (p = c - j, z = g - j + 1) : w.dx === 0 && w.dy === -1 ? (p = l - j + 1, z = u - j) : (p = l + 1, z = u);
+    const H = { size: j, x: p, y: z };
+    h.push(H), R(H), M = (M + 1) % $.length;
+  }
+  s && (h.forEach((a) => {
+    const j = a.x, w = a.y;
+    s === 90 ? (a.x = -w - a.size + 1, a.y = j) : s === 180 ? (a.x = -j - a.size + 1, a.y = -w - a.size + 1) : s === 270 && (a.x = w, a.y = -j - a.size + 1);
+  }), _());
+  const U = l - c + 1, I = g - u + 1;
+  return { squares: h, width: U, height: I, minX: c, minY: u };
+}
+function Xe(n) {
+  n = n.replace(/^#/, "");
+  let i = parseInt(n.substring(0, 2), 16) / 255, s = parseInt(n.substring(2, 4), 16) / 255, x = parseInt(n.substring(4, 6), 16) / 255, h = Math.max(i, s, x), c = Math.min(i, s, x), l = 0, u = 0, g = (h + c) / 2;
+  if (h !== c) {
+    let R = h - c;
+    switch (u = g > 0.5 ? R / (2 - h - c) : R / (h + c), h) {
+      case i:
+        l = (s - x) / R + (s < x ? 6 : 0);
+        break;
+      case s:
+        l = (x - i) / R + 2;
+        break;
+      case x:
+        l = (i - s) / R + 4;
+        break;
+    }
+    l = l / 6;
+  }
+  return [l * 360, u * 100, g * 100];
+}
+function pe(n, i, s) {
+  return `hsl(${n}, ${i}%, ${s}%)`;
+}
+const Ct = ({ children: n, className: i, style: s }) => /* @__PURE__ */ X.jsx(
+  "div",
+  {
+    className: i,
+    style: { width: "100%", height: "100%", position: "relative", ...s },
+    children: n
+  }
+);
+const Pt = (n) => {
+  const { inputControl: i } = wt(), s = n.from ?? i.from, x = n.to ?? i.to, h = "color" in n ? n.color : i.color, c = n.clockwise ?? i.clockwise, l = n.placement ?? i.placement, u = "outline" in n ? n.outline : void 0, g = !!u, R = u ? { borderTop: u, borderLeft: u } : {}, _ = u ? { borderRight: u, borderBottom: u } : {}, $ = ge.Children.toArray(n.children).filter(
+    (b) => ge.isValidElement(b) && b.type === Ct
+  ), M = $.find((b) => b.props.placeholder) ?? null, U = $.filter((b) => !b.props.placeholder);
+  let I = s, a = x;
+  I > a && ([I, a] = [a, I]);
+  const j = Le(I, a);
+  if (!j)
+    return /* @__PURE__ */ X.jsx("div", { className: "golden-grid" });
+  const { userSequence: w, startIdx: p, endIdx: z } = j, H = Ue(l, c, p), ee = Math.max(...w), ie = Ge(ee), J = h || void 0, [C, Z, te] = J ? Xe(J) : [0, 0, 50], Q = `golden-grid${g ? " golden-grid--outlined" : ""}`;
+  if (p === 0 && z === 0) {
+    const b = J ? pe(C, Z, te) : void 0;
+    return /* @__PURE__ */ X.jsx("div", { className: Q, style: { aspectRatio: "1 / 1", ...R }, children: /* @__PURE__ */ X.jsx("div", { className: "golden-grid__box", style: { left: 0, top: 0, width: "100%", height: "100%", background: b, ..._ }, children: U[0] ?? null }) });
+  }
+  const E = Ve(ie, c, H), S = E.squares.slice(p, z + 1), W = E.squares.slice(0, p), G = W.length > 0;
+  let O = null;
+  if (G) {
+    let b = 1 / 0, k = -1 / 0, D = 1 / 0, V = -1 / 0;
+    for (const y of W)
+      y.x < b && (b = y.x), y.x + y.size - 1 > k && (k = y.x + y.size - 1), y.y < D && (D = y.y), y.y + y.size - 1 > V && (V = y.y + y.size - 1);
+    const K = k - b + 1, re = V - D + 1;
+    O = {
+      left: `${(b - E.minX) / E.width * 100}%`,
+      top: `${(D - E.minY) / E.height * 100}%`,
+      width: `${K / E.width * 100}%`,
+      height: `${re / E.height * 100}%`,
+      background: J ?? void 0,
+      ..._
+    };
+  }
+  const F = S.length, L = Math.min(330, 180 + Math.max(0, F - 4) * 15), A = Math.min(50, F * 3), q = S.map((b, k) => {
+    if (!J)
+      return;
+    let D = 0;
+    F > 1 ? D = G ? (k + 1) / (F + 1) : k / (F - 1) : G && (D = 0.5);
+    const V = (C + L * D) % 360, K = Math.max(10, Math.min(90, te + A / 2 - D * A));
+    return pe(V, Z, K);
+  });
+  return /* @__PURE__ */ X.jsxs("div", { className: Q, style: { aspectRatio: `${E.width} / ${E.height}`, ...R }, children: [
+    G && O && /* @__PURE__ */ X.jsx(
+      "div",
+      {
+        className: "golden-grid__box golden-grid__box--placeholder",
+        style: O,
+        children: M
+      }
+    ),
+    S.map((b, k) => /* @__PURE__ */ X.jsx(
+      "div",
+      {
+        className: "golden-grid__box",
+        style: {
+          left: `${(b.x - E.minX) / E.width * 100}%`,
+          top: `${(b.y - E.minY) / E.height * 100}%`,
+          width: `${b.size / E.width * 100}%`,
+          height: `${b.size / E.height * 100}%`,
+          background: q[k],
+          ..._
+        },
+        children: U[k] ?? null
+      },
+      k
+    ))
+  ] });
+};
+function $t(n, i, s, x, h, c) {
+  let l = n, u = i;
+  l > u && ([l, u] = [u, l]);
+  const g = Le(l, u);
+  if (!g)
+    return "<!-- No grid to render -->";
+  const { userSequence: R, startIdx: _, endIdx: $ } = g, M = Math.max(...R), U = Ge(M), I = s || void 0, [a, j, w] = I ? Xe(I) : [0, 0, 50], p = !!c, z = `golden-grid${p ? " golden-grid--outlined" : ""}`, H = c ? ` style="border-top: ${c}; border-left: ${c};"` : "", ee = c ? ` border-right: ${c}; border-bottom: ${c};` : "", ie = p ? `
+    .golden-grid--outlined > .golden-grid__box { box-sizing: border-box; }` : "";
+  if (_ === 0 && $ === 0) {
+    const O = I ? ` background: ${pe(a, j, w)};` : "";
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Golden Grid</title>
+  <style>
+    body { margin: 0; padding: 0; }
+    .golden-grid {
+      margin: 0; padding: 0;
+      position: relative; width: 100%; aspect-ratio: 1 / 1;
+    }
+    .golden-grid > .golden-grid__box { position: absolute; }${ie}
+  </style>
+</head>
+<body>
+  <div class="${z}"${H}>
+    <div class="golden-grid__box" style="left: 0; top: 0; width: 100%; height: 100%;${O}${ee}"></div>
+  </div>
+</body>
+</html>`;
+  }
+  const J = Ue(h, x, _), C = Ve(U, x, J), Z = C.squares.slice(_, $ + 1), te = C.squares.slice(0, _), Q = te.length > 0, E = [];
+  if (Q) {
+    let O = 1 / 0, F = -1 / 0, L = 1 / 0, A = -1 / 0;
+    for (const y of te)
+      y.x < O && (O = y.x), y.x + y.size - 1 > F && (F = y.x + y.size - 1), y.y < L && (L = y.y), y.y + y.size - 1 > A && (A = y.y + y.size - 1);
+    const q = F - O + 1, b = A - L + 1, k = (O - C.minX) / C.width * 100, D = (L - C.minY) / C.height * 100, V = q / C.width * 100, K = b / C.height * 100, re = I ? ` background: ${I};` : "";
+    E.push(
+      `      <div class="golden-grid__box golden-grid__box--placeholder" style="left: ${k}%; top: ${D}%; width: ${V}%; height: ${K}%;${re}${ee}"></div>`
+    );
+  }
+  const S = Z.length, W = Math.min(330, 180 + Math.max(0, S - 4) * 15), G = Math.min(50, S * 3);
+  return Z.forEach((O, F) => {
+    let L = a, A = 0;
+    S > 1 ? (Q ? A = (F + 1) / (S + 1) : A = F / (S - 1), L = (a + W * A) % 360) : Q && (A = 0.5, L = (a + W * 0.5) % 360);
+    const q = Math.max(10, Math.min(90, w + G / 2 - A * G)), b = (O.x - C.minX) / C.width * 100, k = (O.y - C.minY) / C.height * 100, D = O.size / C.width * 100, V = O.size / C.height * 100, K = I ? ` background: ${pe(L, j, q)};` : "";
+    E.push(
+      `      <div class="golden-grid__box" style="left: ${b}%; top: ${k}%; width: ${D}%; height: ${V}%;${K}${ee}"></div>`
+    );
+  }), `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Golden Grid</title>
+  <style>
+    body { margin: 0; padding: 0; }
+    .golden-grid {
+      margin: 0;
+      padding: 0;
+      position: relative;
+      width: 100%;
+      box-sizing: border-box;
+      aspect-ratio: ${C.width} / ${C.height};
+    }
+    .golden-grid > .golden-grid__box {
+      position: absolute;
+    }${ie}
+  </style>
+</head>
+<body>
+  <div class="${z}"${H}>
+${E.join(`
+`)}
+  </div>
+</body>
+</html>`;
+}
+export {
+  We as FIB_STOPS,
+  Ct as GoldenBox,
+  Pt as GoldenGrid,
+  St as GridProvider,
+  Ve as generateGoldenGridLayout,
+  $t as generateGridHTML,
+  Le as getGridRange,
+  wt as useGrid
+};

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+import { default as default_2 } from 'react';
+import * as React_2 from 'react';
+
+export declare const FIB_STOPS: number[];
+
+/**
+ * Generate the golden spiral layout using bounding-box placement.
+ * Each new square is placed flush against the overall grid edge,
+ * producing a tight Fibonacci spiral.
+ */
+export declare function generateGoldenGridLayout(fibSequence: number[], clockwise?: boolean, rotate?: number): GridLayout;
+
+export declare function generateGridHTML(from: number, to: number, color: string | undefined, clockwise: boolean, placement: "right" | "bottom" | "left" | "top", outline?: string): string;
+
+/**
+ * Get the grid range from FIB_STOPS indices.
+ * fromIdx/toIdx are positions in FIB_STOPS (0 = value 0, 1 = first 1, 2 = second 1, 3 = 2, ...).
+ * Returns userSequence as Fibonacci values, and startIdx/endIdx into the fullFib array.
+ */
+export declare function getGridRange(fromIdx: number, toIdx: number): {
+    userSequence: number[];
+    startIdx: number;
+    endIdx: number;
+} | null;
+
+export declare const GoldenBox: default_2.FC<GoldenBoxProps>;
+
+export declare interface GoldenBoxProps {
+    children?: default_2.ReactNode;
+    placeholder?: boolean;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare const GoldenGrid: default_2.FC<GoldenGridProps>;
+
+export declare interface GoldenGridProps {
+    from?: number;
+    to?: number;
+    color?: string;
+    clockwise?: boolean;
+    placement?: "right" | "bottom" | "left" | "top";
+    outline?: string;
+    children?: default_2.ReactNode;
+}
+
+declare interface GridContextProps {
+    inputControl: InputControlType;
+    setInputControl: (control: InputControlType) => void;
+}
+
+export declare interface GridLayout {
+    squares: Square[];
+    width: number;
+    height: number;
+    minX: number;
+    minY: number;
+}
+
+export declare const GridProvider: React_2.FC<{
+    children?: React_2.ReactNode;
+    initialConfig?: Partial<InputControlType>;
+}>;
+
+export declare interface InputControlType {
+    from: number;
+    to: number;
+    color: string;
+    clockwise: boolean;
+    placement: PlacementValue;
+}
+
+export declare type PlacementValue = "right" | "bottom" | "left" | "top";
+
+export declare interface Square {
+    x: number;
+    y: number;
+    size: number;
+}
+
+export declare const useGrid: () => GridContextProps;
+
+export { }

package/dist/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Golden Grids</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@gifcommit/golden-grids",
+  "version": "1.0.0",
+  "description": "A React library for generating golden ratio grid layouts.",
+  "main": "dist/golden-grids.cjs.js",
+  "module": "dist/golden-grids.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/golden-grids.es.js",
+      "require": "./dist/golden-grids.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "start": "vite",
+    "serve": "vite preview",
+    "build:demo": "VITE_BUILD_DEMO=1 vite build",
+    "test": "jest",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm test",
+    "setup": "husky install"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.6",
+    "@semantic-release/npm": "^13.1.4",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@types/jest": "^27.5.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "husky": "^8.0.0",
+    "jest": "^27.4.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.32.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "semantic-release": "^25.0.3",
+    "ts-jest": "^27.1.0",
+    "tslib": "^2.8.1",
+    "typescript": "^4.9.5",
+    "vite": "^4.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gregoryedgerton/golden-grids"
+  },
+  "keywords": [
+    "react",
+    "golden ratio",
+    "grid",
+    "layout"
+  ],
+  "author": "Gregory Edgerton",
+  "license": "MIT",
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "globals": {
+      "ts-jest": {
+        "tsconfig": "./tsconfig.test.json"
+      }
+    }
+  }
+}