From afe36fd347b01a1825df667e1ab382dd7f28b6ca Mon Sep 17 00:00:00 2001 From: Ben Stull Date: Wed, 10 Jun 2026 21:53:43 -0700 Subject: [PATCH] add ui design ./ui/designs/ecomm-login-and-create-storefront-designs/ Claude Design export for SD-0001 (login + create-storefront surfaces): wf-*/hf-* screens, design-system bundle, offline preview. First artifact in the ui/designs/ collection (ecomm#8). Also ignore .DS_Store. Co-Authored-By: Claude Fable 5 --- .gitignore | 1 - .../project/.thumbnail | Bin 0 -> 17780 bytes .../project/Ecomm Hi-Fi (offline).html | 180 ++++ .../_adherence.oxlintrc.json | 378 +++++++ .../_ds_bundle.js | 959 +++++++++++++++++ .../_ds_manifest.json | 1 + .../assets/fonts/fonts.css | 10 + .../fonts/fraunces-v38-latin-500italic.woff2 | Bin 0 -> 22888 bytes .../fonts/fraunces-v38-latin-italic.woff2 | Bin 0 -> 22852 bytes .../assets/fonts/inter-v20-latin-500.woff2 | Bin 0 -> 24272 bytes .../assets/fonts/inter-v20-latin-600.woff2 | Bin 0 -> 24452 bytes .../fonts/inter-v20-latin-regular.woff2 | Bin 0 -> 23664 bytes .../fonts/space-grotesk-v22-latin-500.woff2 | Bin 0 -> 13312 bytes .../fonts/space-grotesk-v22-latin-700.woff2 | Bin 0 -> 12840 bytes .../readme.md | 170 +++ .../styles.css | 8 + .../tokens/colors.css | 60 ++ .../tokens/spacing.css | 55 + .../tokens/typography.css | 53 + .../project/assets/mark-mono-gold.svg | 8 + .../project/assets/mark-tile.svg | 9 + .../project/assets/wiggleverse-mark.svg | 19 + .../project/design-canvas.jsx | 974 ++++++++++++++++++ .../project/hf-admin.jsx | 80 ++ .../project/hf-bootstrap.jsx | 205 ++++ .../project/hf-intro.jsx | 87 ++ .../project/hf-kit.jsx | 267 +++++ .../project/hf-landing.jsx | 86 ++ .../project/hf-signin.jsx | 116 +++ .../project/hf-storefront.jsx | 79 ++ .../project/wf-admin.jsx | 128 +++ .../project/wf-bootstrap.jsx | 214 ++++ .../project/wf-intro.jsx | 175 ++++ .../project/wf-kit.jsx | 303 ++++++ .../project/wf-landing.jsx | 141 +++ .../project/wf-signin.jsx | 161 +++ .../project/wf-storefront.jsx | 117 +++ 37 files changed, 5043 insertions(+), 1 deletion(-) create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/.thumbnail create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/Ecomm Hi-Fi (offline).html create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_adherence.oxlintrc.json create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_bundle.js create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_ds_manifest.json create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fonts.css create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fraunces-v38-latin-500italic.woff2 create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/fraunces-v38-latin-italic.woff2 create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-500.woff2 create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-600.woff2 create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/inter-v20-latin-regular.woff2 create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/space-grotesk-v22-latin-500.woff2 create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/assets/fonts/space-grotesk-v22-latin-700.woff2 create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/readme.md create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/styles.css create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/colors.css create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/spacing.css create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/tokens/typography.css create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/assets/mark-mono-gold.svg create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/assets/mark-tile.svg create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/assets/wiggleverse-mark.svg create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/design-canvas.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/hf-admin.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/hf-bootstrap.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/hf-intro.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/hf-kit.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/hf-landing.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/hf-signin.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/hf-storefront.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/wf-admin.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/wf-bootstrap.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/wf-intro.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/wf-kit.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/wf-landing.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/wf-signin.jsx create mode 100644 ui/designs/ecomm-login-and-create-storefront-designs/project/wf-storefront.jsx diff --git a/.gitignore b/.gitignore index e0132b7..e43b0f9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ .DS_Store -*.local diff --git a/ui/designs/ecomm-login-and-create-storefront-designs/project/.thumbnail b/ui/designs/ecomm-login-and-create-storefront-designs/project/.thumbnail new file mode 100644 index 0000000000000000000000000000000000000000..9fdbab41b1b0c90b69c923c99950a31f79af3778 GIT binary patch literal 17780 zcmZ^LbyQo=6K{gM7Wd-r?gffVp}0E~cXxMp_u}proZ{{-rMSC2_@4JW=l%1Nlia(> z&F|Xd?sNEa^i?^xNraf08vsxR1p9G3Vobs!$5t!i_Fdne;j}gisIh@RTKD! z9|cikHAxd$Spdz)ISc?8Vh(`#yyWAB`|$z*z;l5B@Q)+#^RryA|9uM-$_4-5IUxJ< z!kj^Na{xdHASo*R(-nA{1)XUm?sPV}mpMCeW;q8{xswm0CgBSMhA`-hh+MNb zt;vD?g3mlS%)y5fS6dq-77JVFrU&uOSK+(Hz_^=>v;BnI#(nihyF*E{X|ZXWsk3|W zFQ0lZk@Ys^5*wfUOr-v&*-0^U5Y7ex$OJ65!I_C-9_pqAu``lOSUAnbBr-K$&R!lNDt!g48Wh`vYYtqwc z7SEQJT3!#|A1y{FCT4C6&eW`}ql=1)R{#AAwG*JFRmw5s;Kr$^rS_^Rwy!_!xB#2= zwes{_Ln7d@ZfEEoZfp0T=cF7O92{DEKq3&Rx|CmGSJk!VU-xp}n)=axm#*!6WfZ{9 z(b(c}joLqD+wFAU)ZejZ%-A|1@Z#6Jl1!grnEl?a*=3pY+`DL)z1n3}ekrEyd?@Dp zV$}JxVyM|{U28ZbzZAsVq^YWUpLXuBru{z5NZ5Q_?UB82WU6VZn$p&5*}30rD#gO^r0g zb=$0#wTuG#P)|<}kok;a1e#X;el~%SE176%N6l>ypM(pR2WW0f@U%L^!t5;0|Jf=7 z+AAvX{Xi|Z$3v(c82*!Lr-duEcU7}0?M?mZs~HtF#JY^(mUy^_^%W~~8ynn~xNt#UE_3?80w16;x2wG39SS;RUAJbE^0qg}nlk7ekBA6k z>NcNlb?IMj6#NM#1w~eI#3}%hOL~Q2_w4MVQZC#6_U!f0%WhuxND6QN+Urk*4bzj`WT&7*Gb0_HEntIsQ@5k2 zt!xHr|E%RCKI;x75;N$LR((K@(hR`@E=zMp>p7rI<|kQVH*t^C`mgsCYAb7QZ)p7d z-RqIQzA`WG&q8ITlL{y-f$}sL^fnXWveNv1?BRS(^pfq6a?*B!_FOB}nP0I+Lo;Hu zqiYcJX3#wL&h|W&)3N#JP2}a-tnILmapjTSWaE9%tvctztji4@p!?6M=eEbRZY8hN zs4=O++2lxxr(WFQ6%yJ9ViwnO7|@(mN!lQu0@5asD_6TfDgRSFcD=CU$4 zkJEBpa~JPphIY}d)|nBlZV?~vy8}Ctt4oRtsb>uOfXmD>o0eQ2?l+$H*Jzt1Jnvg}xxV)Ew-C#|C#P^+ z*TF~bX|ke(mG;d?=j#OW(X9v_p!UZUu_!CAuwK{jP((Jj`w@r#C~{U`(!3ZJ5{CRu znaPl5WVBMY)(0K#a5z>eM>2jqgJWgdaA-2zK8h`PEz|Oq7+0G>&T>t`R6LrnUOPqm zSIqHHFMA2zm#4f`5dOgM{_nTkvkVe?eLdR?OHJ?H7m2Oq&gaPPe|0vSK$qVQh5Z6= zG0i-&yC7um8$%bqmcPmJFZHVj-CJt5xpn!yvPkPL?*Tm|?}y|ydaz^&zQ@N4t*+e` zRb4Z`EXvqDxbtF@ET4Oj&wnu87^|rNum%?iP|;RD9K*@n|0JDqAdZX?kuRBRSU;bj(I`0Kh?IY}2_;}F!py$PhLTd=XN z?D{?kb~%^KGGWr8`fTS*=a#pxb`E3O7c|{DKl^NUdyu3&S#&^5#0m8R9&YMAPRnSW zmq{QySdKY)STJEXFhF^Ymr#^2D?$DLu%j;-{4j=KZiVnbnXnr-m6fN-1ufliB{@!8 zVHA(E&u7i?@dmu)tfiHe>xAAnc94iJZP*syL~!xa*WK!1{S`7Cz8@jer9oUQVqjpj zr6{u4q$gw%)pKK!mYRme$7Pqg{((JMq)29?x+3Jh=GIDa=p&8GJ>9zIv!8e`+Gptr`)vsxuk1%eMV&Q8>%d+9)E)7-Pg2i8o5GLN!2wG>GS#}sC1fx z0#I!=G&JlxOU?gRS<>AX4o|!0?W~eb!1ES*#(MZP=+I)VUHS3AuyxVQ@V|(db6Mjc zAkb!jFU_m{!_cBvkBEdoBfz?-&PzJdk!O>Xgux)uEox1SI2%=4Z6mZBo@LU~(N#OY znh^-Jy$zp;@uYxd<80P2HxFC;GR|;Y+g?7j&nZt8>Y>Fw4&i!_f8xXndawp!Qb<2a8*cc(#o+8e=qaAcCPoX4?PBv?c(TsJW&4pk36T6t{4d1 ztTm*}Tn+Aumj6D(@+Y{rw9i%|;XSz$f)Bv3T20}^yFfXfB`Bo_ z3GrO}9RtF5QYGa0DG6;!m#CJw_w)uHpvfy2jNE#fz0u?lJ?;!3&Mt@WLJ$ae>fs9T zdQZdsv=F*)Ggzy#PX!ko{Ps63uNT=lEq}t*zPeuHZRX}K4xL`a8P>{CzAi!Ac;|Rs zDdq4E#q>p0sh;4V(-6HrP{w<2&aV-_bvIi4+SkQXq|-~jy}RMgA%0sXCgKxhoJ@;U zW+Ax$<;-R4QDM^hSj*T6fd&PFCUh4q{+|B&gr{TSQ#}>j{TPAVI_&dJSKxktaWz8s z0Sv3beQ5D*_R+1%b7KFA`O8vLI@hv-YDr6V^=dU$OVaXISC>G$=GJ4CONVSvJ$?E( zf&Ci}m=Ub+YuYy=o!60+cBTxU&R3*%4IChEk`st*g!AosHJsF=^P1V~@vb_1Jf`zf zjI$*c=jqx;_c8r-gt5CfXxdZzR`A77(9u!b2*2ZnoKah^57U&RlGV1;)@`#`#(`#UPwGctYy?ak}%`7u^KB0A!O8?3EB-XCV&4v1t8 zFj#P6(EP@7Y34Y|y&fw7a5#viU5&GH4f&WDy;8cHhfAPx$z3zP*U} zSW?Q*uQC$)^jg0T#VmVlyaS(aDw~(IH($FPdPNRy^N*_|mUX78-XrOOp3Z)o(YP}1 zD5yd`JQoAfdaV+~Ud%jo&tWCEO@d_NuB8r83D1x9IfAx#Do*KE?PrgRZR%{lt6bFeNHZdF2w94}_lRxmUY z;dD&RdeB;IknO)I)Swx@zYTJs+-Z%xj(fiyCeUSG6TjIq&G(){T0P1$0vY|1Nc{={ zdd)&c=Nm9?`>Y;!t-dCneoT)BI~zB3DNC%A-&w%#{vh-o%JLEU$n)Jsf(wd1EuB%G zdc0qglD0gxE^6(Akgu<+-(Lcn-naDk;|U$piMB@WvNm6$JKsCclbg6qbbkOG%U9Y@ zW+KGuR(`$TTy{HcqGbl!c<&ysJLx`Msh&IwKE!oi1Rvvzu(y_)Q8s%&T|2K*3R>qp zzI1a5Sy@^)`Mk$eXIY(tdPKSIRVMm&#COPRX2@cbsmQ(SAirs>L%;p=Vu*W-V95dw zr;X&iY!f z#AZjLl~)FO`3eu^woxjd9-7`kgcN(R91jITwszEG$ZX!Pzm!zLaf4pQ_lVy^Y);Orpn8d z^MyP2mX>&Pj}P^&@Mc~rf=>BqUFKM|qD$P^o0Nhyz!;eYBlJXC6wDBAi;zfHM;fK# z?wmp&(66hiqjL1NW#@6Q>N9)Q@OxVL@njfEujyX<{E?K>RIza5EyJei_V{>D*P@=c z>rIw(b|p`J&!yv)6Cv0z6cLa`ugMXvl{dH*{d~7*(>&?9t-D^P&jjB6?seWo$u@nJ zd7$<8n?bH@{>yWUz$td9uJdlh8W|MGHSFx2|M6AFeHZ@JB3;(|!_(V-@gDo$_2DKq zJQKPudB3~(h#$&|zT>YA8TDfWHIF04S% zEhdYtPWfhYPTgr1QiAkUc}?RNNGY717=tu^QuvK%szcza)~7*s$K7Md<~^8{idd#t z@i8&c@N3IUefQIEnf+U9K_xrADWf0JIb7yGk8v>;`bDzNrBqXbZpWsl**R+m6OCrF z2oxgOE~oP<6beCrZM6B;(|TPrO_@Ncuy7aeYX(x$V2KJui$QZtkHXfJ z{fK*o-*%lE?G>i4?CTuXyt?k9Y^aegbvTb-eurW(ElXBk8GEBq(NtV*VTl;+N)3%p zgv=GyXR9n{_Zg9*i@=aZcbvoD6{Mz1oP1@)UZ)o5Ahrr(#)N0&Qlb}EsyRPn zGVwo0zyjMTLa$vuC(3n=R`aSHVg5xB&9hBjJ&2oorfd>GeB}tgHmT&idj+2W+aE!# zIrkL3yd{H|U?7A2bA|k5Dnh#kS7H{AD5ooY`>9PsU7*tRb>#BSFt=NB5g|)yeG)8( z6wL(y(7LM!`4ajF!-B%YVsn{L0MTff$p5OoI(-FTX2OHZ1FYxZK{2Pc1b5WHhgyO) zK~H{U`-isN&fIsu;E~&H_mgK9A6QUFd@;EKXGOKsF+m^p#@ZSKk$$O%Fj9^ig>4AR z7SgU%1g4j%EGnRexLfTd9-P4|Ub61)j^UNqRlk@Q5tZY@$-)965hs0&N8lZ4!cOeN zBbs02Tvk@q+2Nw|NL(EIc1vD|kBy#S_4p{0$vzzAu)?s`wVXa+4(n&*B40hox~Ego zW0kud4(Z$D_TJinc7aq?lyqO#zB>FbR&yt}yj)c%7@02LoKe;b0CXC?QY%fgwo6Sz@Mse`z_>LwgT^ud!aooz`;t?L!e> zLD(uw?19k&I|c-mS9jdd-6{t(d;_ILlG^WGisvxPX;quB`Xww`ZT`&sbipJ&4@f8q z44VAI{@`VjJ=pea4l?)toLcJT5bTGz=rR5S@pXamX~mXz`*e#Z8uGM0E5f{r2$urq zbV9i$ndqxifb)eos#z3roOfIhi{`t37sMj;V&M5Wcf;;uB(vwM{l@p_!OX18VHJs) zIad24M~5+M=~ncq8XcLvXFG3+$#Q*{JIi*zQ`oPxvFgb$VktPZ`8ePs4m)w@wZwGd6?>=RyMAtW^(s zfM&KyLlvmv;!S1`JbEjm%`rr0k-i*f4+j>j3Gjs?!G!8mH!=T!E$cB79+uQpUc%7SsnX-iJ^MXErXpKfC*Y=Yi2K`L+>{1M_u~bP{gDnk=ct<2qGBwix zgf>Oq5%PsUIh^c0)j5^lRLh!#I_+nyP{Xm<%*@J>$ymxhI=XlXoTvm3rhS_J2nV8= zgzRpMrv`?O5PzrknaxU=aU1KR^hyS3^f*Eq8}O$)Xg{S<7uNC&qX@&ICq6s438ED+ z^musyKkN@3s3y3vQVC}V%mje>hOrA>n|1; z0KX#I%+Dwl@GI~}Z(|Gj8=euq8Sjf84rej?8(nXJ8d#mSA)rMahDKWh0l2B9q@wcm z(Xm}DJC?+1$5d*6hVtlftz+aTVXy!5#HeM{j_lTQVg1d)hp()?_MQwOSl~;kVBvV4B$NjJ!6EH)th+&P zfg6&A%mZz+Wpsr+{`3olHp5Nnle>9R+*0%Wh6i;%qy ztbJ8HY*;mPY}yySt@pl6(b;7NMJ1uKD(gy6?Ytj`3E5w!a(``-cm0@eP{V!uLn2iS zzPJzy1+X)iH-}~hDZ0+J&qj&`&CQzwxB>@P(gaBuxwrnu*{0BcO+g2(iRMgeagyL)o7HH2;MREGa)v z<37?pq?W1Zm88nJv{D>iS-7o~T`eYNpzVi_<=Vtw6d;GfNyZ{u!q_Bu6XGPLAtLA* zllhukM8H?5#{3A;N|{b+Rgjlw+FR5sFCU2PC(!e#85{ zNVdi6dGmV~fCsT)7V68IPO*xJD2pT-Gjb1Yk2cc-F3ZG$E?^cG!}qk5*1|;JO0{62 zteHekO1jEnk_Ts#$Hib^tbnGVR8l$OHiUmT0DnX_9AavC=vl zfZC0lfc63jxdn&C06#V~J$(@~ zfBcB11XjR2vt^)i1DzrY25aFfJtOUtkeKY-fxzGq;CbFM>*9pk58Z<4?~jASOisE? z+H=RDlWB904~|*+I1)%@NrubVgc2nk-jw+&5%f zTca~xYuLn zb*QO2MoYg4?-!8@Hppgn&?&u#sK$<9*R|E;{ux#vIVS239_|Vvy^kZ`!Ax(hyGU$X z^#`EC!7%w$P*N&u868?YvzU`C7mpz0=Lp#hvsFRsO!GrG&_4O{p8Yu62w@xEbTeh2 z+Ak2uq$Ia~R7SAC$;7W~?}o(rrgQ0Wavq_8g*x#=rAe&5=Q2(Ba&!M>!AQkkFIP+t zJ;%8|b^|K$!AJrkl1U`}a!AI~;I#WdOQ2aaQH z2Hw#E)ky9rP%oQ}q0R!3mVN}sYk!hBTBV-@OXthhW~rHDta>u+oXbfU#mLD!P9r^I zWucu+P(|dlq8F@yoE?l;J<-l<2&~@Vro-wmY1(3h~&btjhix`!j?q9aE(2D4u6L{#S>HF4-^E*ZyaLmU;!Kt2UqB-C|$A<=KjRvct$5J%69 z^gE7e-(OK#y;$$KG_iB*!TuE=H#&B7@NBaeJFm|wFANa@iR+q8q$=K3Qil245astZ zQJ7Qaw5gd5lr)I65WKH56BiAC5^dj?1Z?fcc-)~flT+vsZ6sE7Y~Bl%lfr^6m<+lw z_w2O_+gL2>|6cg_&+rtS<5>9Q6<>X;jyMzfK>FAJhxD8DH?t#CiZ{%Cd)9p}r+HrW zIj`d%`rgQJPQhPc@)3HQ8h;Tc`ANAW^}+!`v3a{r6jCLVHJ-8g)ADp3{m$lnmhyWF zBHYqMop#EpBkotZ^GYnspP*YwkBeQA?Q1g;nf`rMDQOIzll~S}wOT;boEm zscQ?nx02vNOy&;9DtCdFm$k3FSaOQntJ*IDCguZt@}V^k_R;r9l8_+7@H9B72(z95 zF!rA?P;z$m=)xy(%?uE;KAoxst|Al)5Tq9=}2l8pvlC zzHBKv0zN9KLEx|{b7&vykDFZ0bL4b=W5NkL{hA0=N^PNrK}^LNn@7;F)`?z-9#*op zZohKMlO_78bI8-&1y=fNjL<++q)p>zp)K706PlwGHe`JW|IU>mNrq*RdJVGjQ|=QJ z^(NvfI?I4@v{%6YhJPi9x~;Qdm4;So-D^0`beQZ;}rh#~fSOi>#g3o~x zn5j#lP29_#FCl_$Q8!&SxDfcAvNDDop|CEHc2LMCR5t);71-iS0NCduhH-;1szVV2 ztcB^cS^}R@1qh{0dLFeN zkDs6?vPzLB828Y}t7~dj$lnrh|9${F{hD_-6R(!;ZuD6Yn23Ny3-ZbzkVxp35r4l4 zX9(BpFN?@1jB%^!Gi?L>@_Rkaf59ci;)GGdbQ22_zcGb*CKo!B~|qKY1Ib| zz1#H_DgK`1`XUDpF*@21%W>(M9(g$TOUKOBdK`6LoRvPwIamcEHJ79=RW^5idXpF- z_*4y2slBaDE0^#0G3j2VS*}?F#9Mx=9X@)hKi`vbiU(T5=p}-ArJ0RZ2t~wq84jS= z;7fG{mBS*-v|@!bcQgkgkWMe7+G2_)%b5xts}e7bl^c9t2j`;xv#JEQoqw*1G6=cI|8IrF%H z>F}?JX?4s7XaL<#Tr^pGA2M?OLx4%X&>)B|JT{hIlT7tWXSG}S>jmbx;V;I#F9C8} zD%2k4(J}(#V!ZD*SrQ1Y<`;FpV{NW4Desmzj3)rD0CEi?Vn{PkvA) zaH|CdiaxDu{2Smnvr^flSHiA`7ZU`}vVy`-fD+d^YaDa~N07biA zAA`q3={b)r0)$qxNr*#=kr9=aMav|QhejmG`fY_reiF{N=&SJ5VwG92;z0}r1nefq zq__ef&Nt$){mV2a0OlUX>OVNIKalmHw6yT`h#ylX57PT!+ah(QetlQiiURBr+Hue8 z?eG6^=p!2wND~ZWoCH0Jc?9I#xFIonh@OS3u5wql(*r_cczx5;wX=UFg3L?k(a;*+ zK|jphDsJ=HxdOlIBUaeh(m>Ux;=jnSGNTFIt ztx=?g91?1Gz~a-#UAN~j0Sp)dU-=JQxc;>BO5TW=dde0Qh@|I5_0N!>BaIdm`Q=e7 zs6`TTkIU3Qnz=r<4umg8UL0Ri^BL-xY5<{_z0$aFGl-K}uKe{`LSTRtZdZj-LDddZ zVRx>@{P&XOJcDbfzC6s#CluMeobW41MCCM_dd36cEU`_{Fv%$ualD3ONQ6FgTJ(Q8 z{4U4#hR}mC>VZDCe?F0y=*XKkQ&f6td5S?P>Nv3q(gZ5>C*Vy4XABCIcRy_&fC)Vv z1v`U$!Y*%jY?5{wOh`!;-2cTXM((~@c0SZ50u~{$EDmBd?bMo=L;KV>=G?7wY}?yB zik^Vdw0-Y{dxr&fFsITL-Ie2z?zJ@#7~6atYI4t}ZVLX&I+Q{GIu-9RG#%%?Yhz1X zOJry7(a5KHtju65_NX$xAP4EsIGLTjTE6aaK3y21NLiFm$aNPw`_^l6)2b>Xh}PdB zCy2Y8k%_Mqy7+TXxPs?xY34H=?YN#a-rJq@6L4qloP4LEVSTJ6P#NT%Q`&t5Tp$zk31gLZ@c=2e-+yb)?1zEGaIuX;!WxG`TSADxL+GuD+Exoa6CBRyu&}oVW z8foEPP=aUQX1>gl+m;v^_dpZC&e}q&4EyZv7Dz#B)qnfG8?sH#nwN3 z?LvW_q^Gyjpx6jeA6RdUjFKpQLHqaU(WovBiIVPo?~P*1xcUaC4yd?yX&Uf zo+wUu?-5(*VpZ22I|;ZP*Y;77X~ffB_MI%sPtQCEQ&yQ@nAUBCD zN)=l07lDssdki7c52+6Pfu0CG-Ys$uE3Hid$E8>ZBy%0@d|IYecVACYkh#1NdYl@> z(hfZpY>Fqhp3){Jo%!M{`c5gz307oOH2?gfRLMcR0|p1(XFWevHqxTKxP5a}ax)NF zreaaTmWuv0z#svq*vZ!+z6Y%#757c=tW(gV|MDvCD!KCKZ?=KbQ$brgb6szmk#b@| z1JuHpVof_qKQ==9Q^#9(bDlaYOaK^V%yk(=wiP@SU5P2W)7nX z1oiPaD_qD>0T#(KSkUtf_eVqefkH8qCQX``2ZN9pTz_C?3Wl>!M?YCBp!m`?!aD z0-mUg#c&NO;F`ybn5xfCcu|>MTB+17&-yzw)E<*Uf}bGV$r(ah<>Q!ur>d{!mFT-v zy`nw~^bCEHF!~|*Fp$Jxr#QJVHEitS{wc8eI_185vxrf0?Z2!d#^!q2AW-zRg=mEF zw0LQ1BACF%WL#m4Sm(btgV3$=wE+VHk9|y+2%#L2Y;F2rO_06#9ww7I_scUYe?b|? z0CN~OaVH``mJIS4>@kwBOwM{I1jx{wXAw3+9wJiptvNfLRE7o+ELNk!oyMofhth%J z7D|mz`z3~`*dUpZV`G6V>e?6bBZ}g_Yxw=*E~FkA5!gocFHeH~2&JVLb6f=GR3$7m zZo13WV-^z=?p_b?jNjAYtYw9ohDrgc0J76*I?ZkOCbLC? z=4cGz<1{o?(?3;WWHm$VXGKgFO7~|{Vo0hBPLH(oAWV}Mf34mkZE1K>tRsk9D5$Sp zCT!idVJ55FT6EzxX1a~w3iF67$jygMB1X*znGrlwa~*B4%=!Jb70y_QfXC_is!~Tm ziJ1Vk5-@vt8AA#Q!1qv*$DaCRsJ}480BUNZ8Kay`Ml`02 zf)Ed624NxJCZ5JOm?3i_06+$aCcs>xRum15f3fpo*;8KcrHL97Ge!l(KQ)B1QR`Mo zm#SxrbTs`6y(qE(CrK>?13(IeuF>49+GWWafiwVQbWmt;2C>VJp>`Rl2>X}$wOZ(L z0gZ;(qjwCVWCfi;ES#i6of6o*AdLd$d#K3@X@j=&N4k!=GMa`jfZmyiu=Cd6H4+v@ z4S&S(A17R)0K{hRaj?Z?8aO6QZvAE^%ea~@F3s6k59FkO8QI?HxP42dr>k^AvnJTS zYxdy}X0A8b1w5a{)q2<+;h35Inz>fn)=~7ONT;48^V$+q%AGX5J8?LDdRM9X^wg)v z^3#~~9&+)Ic((;iuV91ugKD|J)(1@Az;7=8h|Z2U@Z?4!HxFGBOL{YmQxS`7rK>?A z(!2ZJQ)aKY+(F}bA?iuHnM{)02Ovxg%_#aiY>O>U62ea(=fGJ(AEYIQHPb`}qJMtw;GgeuT^irz8_(!ANFQJ+6170XlL$i&aD6YT+!o&v zk4nfU!u#@`r0~5|9>AVs)}MOSg0NJwZW%=&s8T$bS?X>@pg}!h-fEx_r)5r?9h*6j z+mHOthwUIOeZnrDKR%(?Esg8x2yCGeCg@^?)5Cp$SO>l?&hly>pC0G1)CTZ)?rdh1 zHb`f8Rd~YE;R1F7dOiP)MNSa{gT+`@zorAJ^PE_R{Eks(bvOlVEeO^^=CvRZ!= z@tZ5B`vnkY6S)K>hdC~WlR(sma!d_QK>#`VHw2lv1c>*XMbE> z-wmBW;TroM_(ijB&%pM%mz_Le@83Bubk%J%nW4Mo?g?r=a_ZS z5Th!s5fggy91rxMm%x=G|9}f2qPLfqFa8M@*oFiA6V^EkSP0a*%mND^hC+#i1{~lP z2%eMI#FKvv=Wzb^G$bgkyrH#qw^XCHDlN(y=3TR;UxONv!oZhu`rBsl6BhG%!Kx@; zVW4Ubd=>22U7x8+AAA+!B4YFuw zEj4Q@kF_A;u2+T${p(y$;jUKyTsvu}nPY}9J7h=_6SsSReSW^r-_iFZLUL-ffE zh)k(;!WsQ@qDs4OX1?6%bU5+O++Pz|MYiG12B}hI}N~DBsq~L%rKx zIGiv27c@FqX~p13w&EG3Y*S@uibae}?Z{f0iFspF%n_iz^|Qb+-JGvBn(>a#w!-7d zPzP*O?6V%PSCT??h7UMdFnA(XHGVdnqZMrwwAI?RlEft^NWti*h9;o~j*oMgAXp{D zTK-tOBEM`%3f5gaE%6(YEV)laJ6tS76&1>XRUiMpn#7rtt-N>YW)%!LUU z2qx>xWkwfW7X&8FL68m>f4)(pNc*2(wCbm0b0vW|dCEz^rJZU0n2knNS1>c z43-*vt$lkn+e9kybECky#fv4%8_HrBQWC*nX0L16`{|7)!KRrYq zC9gXDge~766M($Sd?r}uYe)8qdG0*UCqDz7B}xsC7ZzGPb-?oS_*UxgZMCczQ=~q4 zjB1il6ek<&BF^K=DQ);hRB1=@eb=goVAUkUWc5Y~OEvl+KdZf^%UOrwI{FmmC+`mi z5$2~yB;Obr@kC|7AS@>|K`#n{f&>7w1&hb{=JyLmaq=gv)%s2WUUVd?0Tc|3s|aEk zLzZO%WzGg8Sb#yw*-+{qjXa@XCRGNTvOm4|i_*mN_kPC@F z6d|!X!UWrP|29iq0Nv`>dK>OBN(RE3TZ5lG;-HSb*EC(;FcASxLhGMzoEo7Li?Nhr z;f6I3^|Dnp0(xckqOkaV=P&_v*Mj-|hkV`wM~ZsDU{Q9RcQTU>!x9w%<}YffoeGZ1 zGu8y#0ntnwI{Tv6u+!j)IyVG$@`JjC_~uWW)NSSVal$td)hH9ZSD67F=7R&BYlw5E z_9=htqKBcR81|WuxdL;B6LyDFb|k*f3mS!fKZ{85O#vl-T2~-{%LOs9F+oh+G-_ov zljR3Lx`l{U%ZaH6v2F6NdtZ zfdj_UX{@&ifdq_5XW-PLO{q?L5>+bCbZ`*2ytKv4NHR7$NVaf1y>qO5ekeaKu0kPw z1+cglIFDm0F+VL$uQ}G=MsNr~wik4?Tmrq|i7y!K1E1~1!!nQG`^AYLHeLxEP#88q z^~U>#+odP%T|>jr;ccWH|0`Wsi2Y@CC_ZisYC4D>;6V+?tUt&hns zPS4EK0h7S!uAI$#G&MOiH8w!S{D^VI?*Rj`njXE0Z*D{tj=_KZ)iaB6l*Tm8D%Cp2 z)7(wTAo%%8o!wgF#Owi6G6R3}_926um!ottNV&RGb5c_jTuKwpIAlTb*x^*Fdh;2Fs^l8;-|6-KZa{pLUDaX!mg z{81XA9wDB}MGMOWX^|3c`Xe3qcmprdbV=MSEWaB?zgM;yL^wGXIpZ5XwD-smVPEGl z>!&@O&Xa${4{Z$$=5RA|w6_(}Eu<#R@0)v}k3tT}Ys$!CYhXLd3iqLpKP_)Q*%r`N z%qz>A>2rLp<313&M~TtJTeJ%_wI65~fR_9&IYI1Cit3{T2z<-4aR1o-lVC~pi6G>Z z%_tOp1dc&a2{*x$ngQ8pKGb4F{aF+D+3=kVPXZrlRL%+WDs?MqrSf(^cKSSDs$9CL zHFTKo{CtgsMtfIKx94vJTC3()fDm zUpsPL)v1N-ev{^~8din+?p?PcrNVo|r*0){V|omEY?|o6ca?s~8-B22oAqIYGX66{ z{YOd~rXI6Kb=Ck4%7Tw{u0G%Yx^wCE4eT<>=ntRz>D2LmQ8dq-9gk#_cqNv(*awd- zi_cqhg{33?2v%!-*ZuHEK9$yt)Q13OMpie+KNT~M{*>zX&r)O;!Y0P2REs__(W0d0?u^eSSmHlQ z#y7?fRsXgBA78$*<8}SNCgMKX^9783E(4$Ko0Fqp0SI|qL0wn-jIzhe$X)mA=Fii- zwth)H&;)~5^x%6Yj3CP&ILg|JzF_C_Ukv@}XB zMa+6q^__db7|g}ViO0&u)phCdP9r@dcd#)oPT$-UHGwPkaB54h=1^w0p4XJaz>ny3 z?57zrI`5iwMVqJF-1X6dm1Se;v=J@^qh>7ZS8IB zaf$~|;}s5mFVX1e=*bLLags@wm&~W~8Zl=c+hSO&(|sXYt6pAS$!Tfkc$_x1hT=#c zxKwFnX=RklOIP;iJfKMy(gLW_`w*a$(96n#rH?PH%viFsTi|omYRN@=`lM4d{gAc) z0{b#(^tZUEL_H70NXaXXPMXHS!*V2)*v8GxEw>kRh1zD(2t9QRBNGuGzE4z<{9e=l z1ZjPEc!-1$BK{p8fc51|+p)z$#RoY)Bc)n0#oGm`+hA&g=1uN(s`F#D>?DHXp8>mv zi@$Ef`bks%@#x4+qlI;z?|;!`m=;$p$lSRCeup19|Dy^4(sYbAJM!P(4Aq1wX%G(@KBU>K0mat%o3(QUp54nAsEet(z9 z%uiDpA2m%PT8O)_7Vxx(|!(6OJBdO*?qHbt{rDZcpnjZ|O5XOEldsqeyNo1|WTN zo^E`WUXf4aUZU17(F{dRW1Ja&(DS^AdQo`=N+S^HY&1Yfc@y{^k3g#_UPQug71*sY;8nFkJ77NQv5;fba+QZAY zrs{6zkjv&Z__tA8lA`$(YS{jL@XRvrvjtk6j?o`lh%u3PLJzuv4?)t(&ky47Gui9y zlOu^49v2s=tF>0;_CD?VW;(kt81C-wm2GV!R_`YV$SWc-FFR|4uW^YPpSRnnBF{!z-#d!ps9heYpwh=?(2ZBMiLo{wcCQYp9^igYwBUEZ2XO7vH; zsO_f?x^)X2RoXA{)%ee{865vM*cWKsZfSJ8znd4ohOc^^TvB3ogHzjv1OhLn^1z)B z2e4Z6&eq$9yiEQfju9c7CxPX&-qu{#{N3MQNst#jKGLdyW?8EGO(hTf@yIYC4t7eA zRrS=?*!UHMUFZMe2~_Kr2&5pmFg7+mVwDCh?jK=b$iFc4-OnZaMqbw7Sx6c^zzZ zHd7!^XrF`3ck}y+-3;q&$pjJ1@M)enUQenubvnn*xq3BQ?HkJ$Dr&->^jU}J)s=(Q zH;4hN)6<1zoVeEGDVlf2DlQOb_o+zz1lTo`;?~oL{v*a9zd$B>PrxztQ%5p*g=CZ+ z&>xsT`1|ynG=}2FEtWB6$Bt5L<(+eqXLKuIMn{a7Xli`0W_6Cm zn||4E7;i7~`XCt=wa~5qti3+MwAF`7*Y%v{@VLk;!TbvD6O|$)C877h->Scxr3KW7 zQyR+;Li(z!;~2DJOD_vQMSH-GkpoTAO=;gAb7Xl+JtkHgOP|*tvp+Qw85I!O7Zz?x z_w2)gif#Ka=c#R*S?8@E3+p3y`JF8segyPO>H1ppvs{`)V0|6di4 zaPdO1@$ET+`U*-H$jWx ziA!NMXtL)o`NPrC^N-gu7DXf)op*tA&|qTg?j-mw0(KJ;s`ts6Y+w;W2`z*G^Xs#Q zt4-E+FM+X*m|-ilsvx!4oP*@)HTNFO&y=QJWID$Ny@VZ1{F#}${b-Sz($YW9)|)0- z`ADmEZUu;;ljpqztBuh^sb*DIqTKv`;(K#A^A+c_VK|4d431ykA$y){}ZbNRQzYRbHsf}fom`*r6nbfXLI)xPdS2N zj z>?HfZu^lv6R#s}~u4NI)PpuTIHU(OE7=C^667Uj8js(03oE$mEY~`{`E^T^GFLWkSg*AisvJEzYi8`gzth?29NrTX6LO3fxHmjB@;`szA=`ENrSkC%+W6Rn zK(N5AYat)F)vnR{D$){grf=F?6!R8H+mIlg;ThlPMPNP8soVb8w( zcF~19>~Q^2Ei_c;780smQ)4Y{ZI+dhDR9l#fh>|)8-&n#Dc-?D%**0(5 zXm@_|E<2@XAt-Nr!)pzHV29S|ICS`EaQK|hH^1=>TGyl3e)0H|))ZR&>70uGz`P~k z8KLJbviL6`tbspDV`J0V3kg*Sm+-k*+Z+pypE!BSUD^<8FWi>jUZ4aPi4hv@{#Rf9 zD!b(q|7_Pi|GD<~?kDY)H@(!p`~4r->won%#)^nXj~;UX_==a^s9D}kcKcWFv|oMA zE1lJF_dWL-K>67(eAzavud^Gjd!CgmWajoe?z9(P|4UZ4ZmoU!_OH5^=mJNs%T_NV zw8DuZY_PL^E?ltwN-u#Fk-!;7=$O9)F+wl296fg2Eerb>fA#^_#5eBv7pLie{aly~{ ziOKw^Kiy!T`s^3o1ld==@h#h@$t;e4P1{U{0f=OikO4w~HJa69yPq%?KF9a_q8qNW zgNF_;q>HQinz+^lzU33Q+ijn@V^s@kxecClDjs}ak|TldeDhOw<*w~98(Z${0uvsU ku0_kpI9W(p&FcdHfAax?rDCO4v;Y7A07*qoM6N<$g1F+K>i_@% literal 0 HcmV?d00001 diff --git a/ui/designs/ecomm-login-and-create-storefront-designs/project/Ecomm Hi-Fi (offline).html b/ui/designs/ecomm-login-and-create-storefront-designs/project/Ecomm Hi-Fi (offline).html new file mode 100644 index 0000000..4a8d3aa --- /dev/null +++ b/ui/designs/ecomm-login-and-create-storefront-designs/project/Ecomm Hi-Fi (offline).html @@ -0,0 +1,180 @@ + + + + + ecomm — SD-0001 Hi-Fi (Direction A) + + + + +
+ + + + + +
+
Unpacking...
+ + + + + + + + + + \ No newline at end of file diff --git a/ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_adherence.oxlintrc.json b/ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_adherence.oxlintrc.json new file mode 100644 index 0000000..236d2d9 --- /dev/null +++ b/ui/designs/ecomm-login-and-create-storefront-designs/project/_ds/wiggleverse-design-system-94cd8055-314c-4d7c-b347-3d24b698eff8/_adherence.oxlintrc.json @@ -0,0 +1,378 @@ +{ + "plugins": [ + "react", + "import" + ], + "rules": { + "react/forbid-elements": [ + "warn", + { + "forbid": [] + } + ], + "no-restricted-imports": [ + "warn", + { + "patterns": [ + { + "group": [ + "components/brand/**", + "components/cards/**", + "components/core/**", + "components/navigation/**", + "ui_kits/wiggleverse-www/**" + ], + "message": "Import design-system components from 'index.js', not component internals." + } + ] + } + ], + "no-restricted-syntax": [ + "warn", + { + "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]", + "message": "Raw hex color — use a design-system color token via var()." + }, + { + "selector": "Literal[value=/\\b\\d+px\\b/]", + "message": "Raw px value — use a design-system spacing token via var()." + }, + { + "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Space Grotesk|Inter|Fraunces))/i]", + "message": "Font not provided by the design system. Available: Space Grotesk, Inter, Fraunces." + }, + { + "selector": "JSXOpeningElement[name.name='BrandLockup'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|size|href|showWordmark|assetBase|key|ref|className|style|children)$/]", + "message": " doesn't accept that prop. Declared props: variant, size, href, showWordmark, assetBase." + }, + { + "selector": "JSXOpeningElement[name.name='BrandLockup'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|footer|onLight)$/]", + "message": " variant must be one of 'primary' | 'footer' | 'onLight'." + }, + { + "selector": "JSXOpeningElement[name.name='BuildCard'] > JSXAttribute > JSXIdentifier[name!=/^(?:tag|title|children|key|ref|className|style|children)$/]", + "message": " doesn't accept that prop. Declared props: tag, title, children." + }, + { + "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|href|onLight|disabled|type|onClick|key|ref|className|style|children)$/]", + "message": " + {menuOpen && ( +
e.stopPropagation()}> + + +
+ +
+ )} + + + + +
+ {children ||
{id}
} +
+ + ); +} + +// Inline rename — commits on blur or Enter. +function DCEditable({ value, onChange, style, tag = 'span', onClick }) { + const T = tag; + return ( + e.stopPropagation()} + onBlur={(e) => onChange && onChange(e.currentTarget.textContent)} + onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }} + style={style}>{value} + ); +} + +// ───────────────────────────────────────────────────────────── +// Focus mode — overlay one artboard; ←/→ within section, ↑/↓ across +// sections, Esc or backdrop click to exit. +// ───────────────────────────────────────────────────────────── +function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) { + const ctx = React.useContext(DCCtx); + const { sectionId, artboard } = entry; + const sec = ctx.section(sectionId); + const meta = sectionMeta[sectionId]; + const peers = meta.slotIds; + const aid = artboard.props.id ?? artboard.props.label; + const idx = peers.indexOf(aid); + const secIdx = sectionOrder.indexOf(sectionId); + + const go = (d) => { const n = peers[(idx + d + peers.length) % peers.length]; if (n) ctx.setFocus(`${sectionId}/${n}`); }; + const goSection = (d) => { + // Sections whose artboards are all deleted have slotIds:[] — step past + // them to the next non-empty section so ↑/↓ doesn't dead-end. + const n = sectionOrder.length; + for (let i = 1; i < n; i++) { + const ns = sectionOrder[(((secIdx + d * i) % n) + n) % n]; + const first = sectionMeta[ns] && sectionMeta[ns].slotIds[0]; + if (first) { ctx.setFocus(`${ns}/${first}`); return; } + } + }; + + React.useEffect(() => { + const k = (e) => { + if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); } + if (e.key === 'ArrowRight') { e.preventDefault(); go(1); } + if (e.key === 'ArrowUp') { e.preventDefault(); goSection(-1); } + if (e.key === 'ArrowDown') { e.preventDefault(); goSection(1); } + }; + document.addEventListener('keydown', k); + return () => document.removeEventListener('keydown', k); + }); + + const { width = 260, height = 480, children } = artboard.props; + const [vp, setVp] = React.useState({ w: window.innerWidth, h: window.innerHeight }); + React.useEffect(() => { const r = () => setVp({ w: window.innerWidth, h: window.innerHeight }); window.addEventListener('resize', r); return () => window.removeEventListener('resize', r); }, []); + const scale = Math.max(0.1, Math.min((vp.w - 200) / width, (vp.h - 260) / height, 2)); + + const [ddOpen, setDd] = React.useState(false); + const Arrow = ({ dir, onClick }) => ( + + ); + + // Portal to body so position:fixed is the real viewport regardless of any + // transform on DesignCanvas's ancestors (including the canvas zoom itself). + return ReactDOM.createPortal( +
ctx.setFocus(null)} + onWheel={(e) => e.preventDefault()} + style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(24,20,16,.6)', backdropFilter: 'blur(14px)', + fontFamily: DC.font, color: '#fff' }}> + + {/* top bar: section dropdown (left) · close (right) */} +
e.stopPropagation()} + style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 72, display: 'flex', alignItems: 'flex-start', padding: '16px 20px 0', gap: 16 }}> +
+ + {ddOpen && ( +
+ {sectionOrder.filter((sid) => sectionMeta[sid].slotIds.length).map((sid) => ( + + ))} +
+ )} +
+
+ +
+ + {/* card centered, label + index below — only the card itself stops + propagation so any backdrop click (including the margins around + the card) exits focus */} +
+
e.stopPropagation()} style={{ width: width * scale, height: height * scale, position: 'relative' }}> +
+ {children ||
{aid}
} +
+
+
e.stopPropagation()} style={{ fontSize: 14, fontWeight: 500, opacity: .85, textAlign: 'center' }}> + {(sec.labels || {})[aid] ?? artboard.props.label} + {idx + 1} / {peers.length} +
+
+ + go(-1)} /> + go(1)} /> + + {/* dots */} +
e.stopPropagation()} + style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8 }}> + {peers.map((p, i) => ( +
+
, + document.body, + ); +} + +// ───────────────────────────────────────────────────────────── +// Post-it — absolute-positioned sticky note +// ───────────────────────────────────────────────────────────── +function DCPostIt({ children, top, left, right, bottom, rotate = -2, width = 180 }) { + return ( +
{children}
+ ); +} + +Object.assign(window, { DesignCanvas, DCSection, DCArtboard, DCPostIt }); + diff --git a/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-admin.jsx b/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-admin.jsx new file mode 100644 index 0000000..5990d6e --- /dev/null +++ b/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-admin.jsx @@ -0,0 +1,80 @@ +// hf-admin.jsx — Admin shell (PUC-8 / PUC-9) hi-fi. Honestly empty + states. +const { HFScreen: AScreen, HFTopBar: ATopBar, HFAccountChip: AChip, HFBanner: ABanner, + HFStateCard: AStateCard, HFStates: AStates, HF_H: A, HF_STORE: ASTORE, HF_DSC: ADS } = window; +const { Eyebrow: AEyebrow, Soul: ASoul } = ADS; + +// storefront identity lockup — the admin's anchor +function StoreId({ size = 17 }) { + return ( + + + + {ASTORE} + ecomm storefront + + + ); +} + +// the honest-empty centerpiece — intentional, not sparse +function EmptyHome({ compact = false }) { + return ( +
+ {/* faint constellation seal — one decorative mark, low alpha */} +
+ +
+ Your storefront +

{ASTORE}

+

+ There's nothing to manage yet — and that's a finished state, not a missing one. + Catalog, orders, and settings will appear here as ecomm grows. +

+
+ ); +} + +function HFAdmin({ device = 'desktop' }) { + const desktop = device === 'desktop'; + return ( + + } + right={desktop ? : } /> + + + ); +} + +function HFAdminStates() { + return ( + + +
+ + + + + +
+ + + + For your security you've been signed out. Sign in again → + + + +
+ +
+ + + ); +} +function Skel({ w, h, r = 6 }) { + return
; +} + +Object.assign(window, { HFAdmin, HFAdminStates }); diff --git a/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-bootstrap.jsx b/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-bootstrap.jsx new file mode 100644 index 0000000..6310f70 --- /dev/null +++ b/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-bootstrap.jsx @@ -0,0 +1,205 @@ +// hf-bootstrap.jsx — Bootstrap (PUC-10 / PUC-11) hi-fi. Terminals + runbook. +const { HF_H: B, HF_STARS: B_STARS, HF_DSC: BDS } = window; +const { Eyebrow: BEyebrow, Soul: BSoul, Callout: BCallout } = BDS; +const BMONO = 'ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace'; + +function BBay({ children, pad = 32 }) { + return
{children}
; +} +function BHead({ kicker, title, sub }) { + return ( +
+ {kicker} +

{title}

+ {sub &&

{sub}

} +
+ ); +} + +function BTerminal({ title, lines, style = {} }) { + return ( +
+
+ + {['rgba(155,140,255,.55)', 'rgba(244,199,107,.55)', 'rgba(237,234,255,.32)'].map((c, i) => ( + + ))} + + {title} +
+
+ {lines.map((ln, i) => )} +
+
+ ); +} +function BLine({ ln }) { + const [k, t] = ln; + if (k === 'sp') return
; + if (k === 'cmd') return
$ {t}
; + if (k === 'step') return
→ {t}
; + if (k === 'ok') return
✓ {t}
; + if (k === 'hl') return
{t}
; + if (k === 'note') return
{t}
; + return
{t}
; +} + +// 1 · principle ---------------------------------------------------------------- +function HFBootPrinciple() { + const steps = [ + ['Operator starts the app', 'scripts/dev.sh locally · flotilla deploy when deployed', 'lilac'], + ['App migrates itself', 'pending .sql migrations apply in order, fail-stop (INV-7)', 'lilac'], + ['/healthz goes green', 'process up · DB reachable · migrations current', 'gold'], + ['First merchant walks the product', 'sign up → create storefront → admin (PUC-2 / 4 / 6)', 'gold'], + ['First rows exist', 'created through the flows alone — nothing placed by hand', 'lilac'], + ]; + return ( + + +
+ {steps.map(([t, d, c], i) => { + const col = c === 'gold' ? B.gold : B.lilac; + return ( +
+
+ {i + 1} + {i < steps.length - 1 && } +
+
+
{t}
+
{d}
+
+
+ ); + })} +
+ + ); +} + +// 2 · runbook (Paper) ---------------------------------------------------------- +function HFBootRunbook() { + const envs = [ + ['localhost', './scripts/dev.sh', 'Docker is the one prerequisite. Brings up Postgres, migrates, serves on :5173.'], + ['pre-prod (PPE)', 'flotilla deploy ecomm --env ppe', 'Provisions Cloud SQL, resolves secrets, migrates at startup. Rehearse here first.'], + ['production', 'flotilla deploy ecomm --env prod', 'The identical gesture. Day-one prod is simply the bootstrap state.'], + ]; + return ( +
+
+ docs/BOOTSTRAP.md + the documented gesture +
+

Bringing ecomm up from empty

+

+ One gesture, three environments. No hand-seeded data — the first merchant arrives through the product flows alone. +

+
+ {envs.map(([env, cmd, note]) => ( +
+ {env} +
+
{cmd}
+
{note}
+
+
+ ))} +
+
+ Empty is a working state — there is no seed. +
+ ); +} + +// 3 · localhost terminal ------------------------------------------------------- +function HFBootDev() { + return ( + + + + + ); +} + +// 4 · the OTC channel ---------------------------------------------------------- +function HFBootChannel() { + return ( + + +
+
+ Dev — the code prints to the backend log + +
+
+ Deployed — the code arrives as real email +
+
+ ecomm <no-reply@ecomm.wiggleverse.org>now +
+
Your ecomm code: 419 204
+
+ Enter this code to sign in. It's good for 10 minutes. If you didn't request it, you can ignore this email. +
+
+
+
+ + ); +} +function ChanLabel({ children, tone }) { + const c = tone === 'gold' ? B.gold : B.lilac; + return
+ {children} +
; +} + +// 5 · deploy terminal ---------------------------------------------------------- +function HFBootDeploy() { + return ( + + + + + ); +} + +Object.assign(window, { HFBootPrinciple, HFBootRunbook, HFBootDev, HFBootChannel, HFBootDeploy }); diff --git a/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-intro.jsx b/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-intro.jsx new file mode 100644 index 0000000..18c24d8 --- /dev/null +++ b/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-intro.jsx @@ -0,0 +1,87 @@ +// hf-intro.jsx — Hi-fi cover: the design language Direction A locks in. +const { HFScreen: IScreen, HFWordmark: IWordmark, HF_H: I, HF_DSC: IDS } = window; +const { Eyebrow: IEyebrow, Soul: ISoul, Tag: ITag } = IDS; + +function HFCover() { + const langs = [ + ['Ground', 'Midnight sky with a barely-there starfield; a gold horizon glow warms the bottom of entry screens.'], + ['Depth', 'Carried by layered surfaces and hairlines — not drop shadows. Only the auth card earns real elevation.'], + ['Type', 'Space Grotesk for structure, Inter for body — calm and precise, never hypey. Sentence case throughout; uppercase only for small eyebrows.'], + ['Action', 'One gold CTA per screen. Lilac for links and nodes. Hover lifts 1px; focus is a gold ring.'], + ['Attention', 'Gold, always — the palette carries no red. Honest failure, never a faked success.'], + ['Emptiness', 'A finished state with its own composition — no zeroed tiles, no locked-feature teasers.'], + ]; + return ( + +
+ + SD-0001 · Hi-fi · Direction A +
+
+ Quiet centered — the full design +

+ The language, before
the hundred screens +

+

+ Every surface below is the same six decisions, applied. Get these right and the next ninety-six + screens inherit a calm, honest house style for free. +

+
+
+ {langs.map(([k, v]) => ( +
+ +
+
{k}
+
{v}
+
+
+ ))} +
+ + ); +} + +// Entry routing — the shared spine, hi-fi +function HFRouting() { + const lanes = [ + { sess: 'No session', store: '—', arrow: 'Landing', puc: 'PUC-1', tone: 'mute' }, + { sess: 'Valid session', store: 'No storefront', arrow: 'Create storefront', puc: 'PUC-5', tone: 'gold' }, + { sess: 'Valid session', store: 'Has storefront', arrow: 'Admin shell', puc: 'PUC-6', tone: 'lilac' }, + ]; + return ( + + The shared spine +

Entry routing

+

+ One server answer — GET /api/auth/me — decides where every arrival lands. +

+
+ {lanes.map((l, i) => { + const c = l.tone === 'gold' ? I.gold : l.tone === 'lilac' ? I.lilac : I.mute; + return ( +
+
+ {l.sess}{l.store} +
+ +
+ {l.arrow} + {l.puc} +
+
+ ); + })} +
+

+ + Exhaustive by design — no state lands nowhere. A merchant without a storefront is guided to create one, never stranded. +

+ + ); +} +function Cond({ children }) { + return {children}; +} + +Object.assign(window, { HFCover, HFRouting }); diff --git a/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-kit.jsx b/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-kit.jsx new file mode 100644 index 0000000..60bb7a7 --- /dev/null +++ b/ui/designs/ecomm-login-and-create-storefront-designs/project/hf-kit.jsx @@ -0,0 +1,267 @@ +// hf-kit.jsx — Wiggleverse ecomm HI-FI primitives (Direction A · Quiet centered). +// Depth = layered surfaces + hairlines (the brand avoids shadows). Hover = 1–3px lift. +// Merchant persona: Ben's Bets · ben@bensbets.com + +const HFDS = window.WiggleverseDesignSystem_94cd80; +const { Button: HFButton, Soul: HFSoul, Eyebrow: HFEyebrow, Tag: HFTag } = HFDS; + +// Resolve a brand asset: blob URL when bundled offline (window.__resources), else relative path. +const HF_ASSET = (id, path) => (window.__resources && window.__resources[id]) || path; +window.HF_ASSET = HF_ASSET; + +// ---- token shorthands ---------------------------------------------------- +const H = { + sky: 'var(--wv-midnight)', night: 'var(--wv-night)', + raised: 'var(--wv-indigo)', raisedHi: 'var(--wv-indigo-2)', + star: 'var(--wv-starlight)', soft: 'var(--wv-starlight-78)', + mute: 'var(--wv-starlight-60)', faint: 'var(--wv-starlight-55)', + lilac: 'var(--wv-lilac)', violet: 'var(--wv-violet)', + gold: 'var(--wv-gold)', goldHi: 'var(--wv-gold-hi)', goldInk: 'var(--wv-gold-ink)', + hair: 'var(--border-soft)', hairCard: 'var(--border-card)', hairStrong: 'var(--border-strong)', + disp: 'var(--wv-font-display)', body: 'var(--wv-font-body)', soul: 'var(--wv-font-human)', + shadow: 'var(--shadow-soft)', +}; +const MENU_EMAIL = 'ben@bensbets.com'; +const STORE = "Ben's Bets"; + +// barely-there starfield (Direction A: restrained) — a few asymmetric nodes +const HF_STARS = + 'radial-gradient(1.3px 1.3px at 16% 22%, rgba(237,234,255,.34), transparent),' + + 'radial-gradient(1.2px 1.2px at 78% 14%, rgba(237,234,255,.22), transparent),' + + 'radial-gradient(1.1px 1.1px at 88% 46%, rgba(155,140,255,.30), transparent),' + + 'radial-gradient(1.3px 1.3px at 30% 72%, rgba(237,234,255,.24), transparent),' + + 'radial-gradient(1.1px 1.1px at 62% 86%, rgba(237,234,255,.18), transparent),' + + 'radial-gradient(1.2px 1.2px at 7% 56%, rgba(155,140,255,.26), transparent)'; +// gold horizon — the brand's warmth, a low glow at the bottom of the sky +const HF_HORIZON = 'radial-gradient(120% 70% at 50% 142%, rgba(244,199,107,.16) 0%, rgba(244,199,107,.05) 38%, transparent 64%)'; + +// One-time injected stylesheet: hover + focus affordances (subtle motion only). +function HFStyles() { + return ( +