diff --git a/app/e2e/visual/fixtures/constellation.doc.txt b/app/e2e/visual/fixtures/constellation.doc.txt new file mode 100644 index 000000000..8e3b04ddd --- /dev/null +++ b/app/e2e/visual/fixtures/constellation.doc.txt @@ -0,0 +1,22 @@ +Copernicus #copernicus.color_yellow + heliocentrism: Galileo #galileo.color_blue + telescope evidence: Newton #newton.color_yellow + Principia: Laplace #laplace.color_blue + optics: Maxwell #maxwell.color_red + gravitation: Halley #halley + elliptical orbits: Kepler #kepler.color_green + planetary laws: (#newton) +Tycho Brahe #brahe + star charts: (#kepler) +Descartes #descartes.color_purple + analytic geometry: (#newton) +Leibniz #leibniz.color_purple + calculus dispute: (#newton) +Euler #euler.color_green + celestial mechanics: (#laplace) +Faraday #faraday.color_orange + field theory: (#maxwell) + +===== +{"themeEditor":{"layoutName":"cose","direction":"DOWN","spacingFactor":1.5,"background":"#0a0e1f","fontFamily":"Satoshi","shape":"ellipse","nodeBackground":"#e8c26a","nodeForeground":"#f5edda","padding":10,"borderWidth":0,"borderColor":"#e8c26a","textMaxWidth":120,"lineHeight":1.25,"textMarginY":8,"useFixedHeight":true,"fixedHeight":26,"curveStyle":"bezier","edgeWidth":1,"edgeColor":"#2c3654","sourceArrowShape":"none","targetArrowShape":"none","sourceDistanceFromNode":2,"targetDistanceFromNode":2,"arrowScale":1,"edgeTextSize":0.875,"rotateEdgeLabel":false},"cytoscapeStyle":"@import url('/fonts/Satoshi.css');\n\n$bg: #0a0e1f;\n$gold: #e8c26a;\n$goldLight: #ffe9b3;\n$goldDark: #3a3320;\n$warmWhite: #f5edda;\n$line: #2c3654;\n$red: #d98a8a;\n$orange: #e0975c;\n$yellow: #f0d080;\n$green: #8fae8b;\n$blue: #9db8e8;\n$purple: #af97d8;\n$grey: #a8b0c4;\n\n/* Stars: small glowing points, labels beneath.\n Size, colors, border and margins come from the FFTheme object so the\n theme editor stays in control; only knob-free props live here. */\n:childless {\n width: 26;\n background-fill: radial-gradient;\n background-gradient-stop-colors: $goldLight $gold $goldDark;\n background-gradient-stop-positions: 0 45 100;\n text-valign: bottom;\n text-halign: center;\n font-weight: 400;\n text-outline-color: $bg;\n text-outline-width: 2;\n text-outline-opacity: 0.85;\n underlay-color: $gold;\n underlay-opacity: 0.14;\n underlay-padding: 8;\n underlay-shape: ellipse;\n}\n\n/* Hubs: heavily-connected stars shine bigger and brighter */\n:childless[in_degree > 2] {\n width: 34;\n height: 34;\n font-size: 18;\n underlay-opacity: 0.22;\n underlay-padding: 10;\n}\n:childless[out_degree > 2] {\n width: 34;\n height: 34;\n font-size: 18;\n underlay-opacity: 0.22;\n underlay-padding: 10;\n}\n\n/* Constellation lines */\nedge {\n source-endpoint: outside-to-node;\n target-endpoint: outside-to-node;\n color: #8a93ad;\n font-weight: 400;\n text-background-opacity: 1;\n text-background-padding: 4;\n}\n\n:parent {\n background-opacity: 0.4;\n border-width: 1;\n border-style: dashed;\n border-color: $line;\n corner-radius: 24;\n color: #8a93ad;\n font-size: 14;\n padding: 20;\n}\n\n:childless:selected {\n underlay-color: $gold;\n underlay-opacity: 0.35;\n underlay-padding: 10;\n opacity: 1;\n}\n\nedge:selected {\n line-color: $gold;\n target-arrow-color: $gold;\n opacity: 1;\n width: 2;\n}\n\n/* Star hues: each class retints the radial gradient */\n:childless.color_red {\n background-gradient-stop-colors: #f0c4c4 $red #4a2424;\n underlay-color: $red;\n}\n:childless.color_orange {\n background-gradient-stop-colors: #ffd9ae $orange #4a3117;\n underlay-color: $orange;\n}\n:childless.color_yellow {\n background-gradient-stop-colors: #fff3cf $yellow #4a3f1d;\n underlay-color: $yellow;\n}\n:childless.color_green {\n background-gradient-stop-colors: #cfe3cc $green #263a24;\n underlay-color: $green;\n}\n:childless.color_blue {\n background-gradient-stop-colors: #d3e1f7 $blue #22304f;\n underlay-color: $blue;\n}\n:childless.color_purple {\n background-gradient-stop-colors: #ddd0f0 $purple #322648;\n underlay-color: $purple;\n}\n:childless.color_grey {\n background-gradient-stop-colors: #e8ecf4 $grey #2e3442;\n underlay-color: $grey;\n}\n\n:parent.color_white {\n background-color: $warmWhite;\n background-opacity: 0.08;\n}\n:parent.color_grey {\n background-color: #1a2340;\n background-opacity: 0.6;\n}\n","expires":"2026-07-24T18:07:48.814Z","customCssOnly":false,"nodePositions":{"copernicus":{"x":-300.9853286494548,"y":-21.913886827842227},"galileo":{"x":-159.61882966259157,"y":-70.02111365885315},"newton":{"x":-13.254982480370966,"y":26.4145977721532},"laplace":{"x":-45.023299195673005,"y":-149.11590396030357},"maxwell":{"x":165.1403415113931,"y":162.86996022394368},"halley":{"x":104.76780526074067,"y":71.6495303988184},"kepler":{"x":-167.29202285013722,"y":90.62202652568118},"brahe":{"x":-179.07871468529603,"y":240.43793513282893},"descartes":{"x":158.99194898215038,"y":-31.673089154043545},"leibniz":{"x":59.985346026674485,"y":-107.29632372186603},"euler":{"x":104.43184132268894,"y":-220.43793513282893},"faraday":{"x":300.9853286494548,"y":37.484728125865196}}} +===== \ No newline at end of file diff --git a/app/e2e/visual/fixtures/ink-mindmap.doc.txt b/app/e2e/visual/fixtures/ink-mindmap.doc.txt new file mode 100644 index 000000000..3d77edee9 --- /dev/null +++ b/app/e2e/visual/fixtures/ink-mindmap.doc.txt @@ -0,0 +1,21 @@ +Plan the team offsite + Location .color_orange + Mountain lodge + Beach house + Agenda .color_blue + Workshops + Team retro + 2027 roadmap + Food .color_green + Local caterer + Group cooking night + Fun .color_purple + Big hike + Trivia night + Budget .color_yellow + Travel costs + Lodging + +===== +{"themeEditor":{"layoutName":"cose","direction":"DOWN","spacingFactor":1.2,"background":"#faf7f0","fontFamily":"Open Runde","shape":"roundrectangle","nodeBackground":"#fffdf8","nodeForeground":"#4b3317","padding":12,"borderWidth":2,"borderColor":"#bb7125","textMaxWidth":140,"lineHeight":1.3,"textMarginY":0,"useFixedHeight":false,"fixedHeight":50,"curveStyle":"bezier","edgeWidth":2.5,"edgeColor":"#c9a06a","sourceArrowShape":"none","targetArrowShape":"none","sourceDistanceFromNode":6,"targetDistanceFromNode":6,"arrowScale":1,"edgeTextSize":0.875,"rotateEdgeLabel":false},"cytoscapeStyle":"@import url('/fonts/OpenRunde.css');\n\n$ink: #4b3317;\n$paper: #fffdf8;\n$accent: #bb7125;\n$red: #c55347;\n$orange: #d98137;\n$yellow: #e5b83c;\n$green: #648f7b;\n$blue: #46658c;\n$purple: #7d5a78;\n$grey: #efe9dd;\n\n:childless {\n corner-radius: 999;\n font-weight: 500;\n}\n\n/* The root idea: filled sienna, bigger, round */\n:childless[in_degree < 1] {\n shape: ellipse;\n background-color: $accent;\n border-color: #9c5c1c;\n color: $paper;\n font-size: 20;\n font-weight: 600;\n padding: 20;\n}\n\nedge {\n source-endpoint: outside-to-node;\n target-endpoint: outside-to-node;\n text-background-padding: 4;\n color: #8a6f4d;\n font-weight: 500;\n}\n\n:parent {\n corner-radius: 20;\n border-width: 2;\n border-color: #e2d7c2;\n background-opacity: 0.6;\n color: #8a6f4d;\n font-size: 15;\n padding: 18;\n}\n\n:childless:selected {\n underlay-color: $accent;\n underlay-opacity: 0.25;\n underlay-padding: 6;\n underlay-shape: round-rectangle;\n opacity: 1;\n border-color: $accent;\n}\n\nedge:selected {\n line-color: $accent;\n target-arrow-color: $accent;\n opacity: 1;\n width: 3;\n}\n\n:childless.color_red {\n background-color: #f7e5e1;\n border-color: $red;\n color: $ink;\n}\n:childless.color_orange {\n background-color: #f9ecdc;\n border-color: $orange;\n color: $ink;\n}\n:childless.color_yellow {\n background-color: #faf1d6;\n border-color: $yellow;\n color: $ink;\n}\n:childless.color_green {\n background-color: #e7efe9;\n border-color: $green;\n color: $ink;\n}\n:childless.color_blue {\n background-color: #e4e9f0;\n border-color: $blue;\n color: $ink;\n}\n:childless.color_purple {\n background-color: #efe6ee;\n border-color: $purple;\n color: $ink;\n}\n:childless.color_grey {\n background-color: $grey;\n border-color: #cfc4ab;\n color: $ink;\n}\n\n:parent.color_white {\n background-color: white;\n}\n:parent.color_grey {\n background-color: $grey;\n}\n","expires":"2026-07-24T18:07:44.102Z","customCssOnly":false,"nodePositions":{"n1":{"x":-3.6109320815028467,"y":-21.858377853490506},"n2":{"x":38.5560657566158,"y":160.93813913307037},"n3":{"x":142.864796768456,"y":259.5072072415701},"n4":{"x":-136.3320040056654,"y":239.22956898194025},"n5":{"x":-94.49251447267262,"y":-164.83194306745096},"n6":{"x":199.21468454964702,"y":-182.42449382121856},"n7":{"x":42.489014215053146,"y":-252.2519356787781},"n8":{"x":-223.96769353456338,"y":-259.5072072415701},"n9":{"x":-20.03070307592419,"y":95.95724343832237},"n10":{"x":272.0375009789857,"y":38.11176096425583},"n11":{"x":294.988786313034,"y":144.17202324901842},"n12":{"x":-309.6645735952521,"y":44.27619013442382},"n13":{"x":-498.59219560574724,"y":119.50773827702645},"n14":{"x":-600.3430524122833,"y":-15.271219789830933},"n15":{"x":308.60273302319325,"y":-61.19713449676052},"n16":{"x":545.9573646631833,"y":9.613584656035878},"n17":{"x":600.3430524122834,"y":-116.91078063637805}}} +===== \ No newline at end of file diff --git a/app/e2e/visual/fixtures/mindmap-dark.doc.txt b/app/e2e/visual/fixtures/mindmap-dark.doc.txt deleted file mode 100644 index 8b851e59e..000000000 --- a/app/e2e/visual/fixtures/mindmap-dark.doc.txt +++ /dev/null @@ -1,14 +0,0 @@ -Universe .color_blue .shape_ellipse - Stars .color_yellow - Sun .shape_circle - Planets .color_green - Earth .shape_roundrectangle - Moon .color_grey .shape_circle - Mars .color_red .shape_circle - Galaxies .color_purple - Milky Way .shape_star - Black Holes .color_black .shape_octagon - -===== -{"themeEditor":{"layoutName":"cose","spacingFactor":1,"background":"#111827","fontFamily":"Space Grotesk","shape":"roundrectangle","nodeBackground":"#1f2937","nodeForeground":"#f3f4f6","padding":15,"borderWidth":2,"borderColor":"#4b5563","textMaxWidth":100,"lineHeight":1.3,"textMarginY":0,"useFixedHeight":false,"curveStyle":"bezier","edgeWidth":2,"edgeColor":"#6b7280","sourceArrowShape":"none","targetArrowShape":"none","sourceDistanceFromNode":5,"targetDistanceFromNode":5,"edgeTextSize":1,"rotateEdgeLabel":false,"direction":"DOWN","fixedHeight":300,"arrowScale":1},"cytoscapeStyle":"\n$bg-dark: #111827;\n$bg-light: #1f2937;\n$text-light: #f3f4f6;\n$text-dark: #9ca3af;\n$accent-blue: #3b82f6;\n$accent-yellow: #fbbf24;\n$accent-green: #10b981;\n$accent-red: #ef4444;\n$accent-purple: #8b5cf6;\n$accent-grey: #6b7280;\n$accent-black: #000000;\n\nnode {\n font-weight: 400;\n text-halign: center;\n text-valign: center;\n color: $text-light;\n background-color: $bg-light;\n border-color: $text-dark;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n text-outline-color: $bg-dark;\n text-outline-width: 1px;\n text-outline-opacity: 0.5;\n}\n\nedge {\n curve-style: bezier;\n line-color: $text-dark;\n width: 2px;\n opacity: 0.8;\n}\n\n:parent {\n background-color: rgba(29, 78, 216, 0.15);\n border-color: $accent-blue;\n border-width: 2px;\n border-style: dashed;\n}\n\n:childless {\n padding: 12px;\n font-size: 14px;\n text-wrap: wrap;\n text-max-width: 90px;\n}\n\n.color_blue { background-color: $accent-blue; }\n.color_yellow { background-color: $accent-yellow; color: $bg-dark; }\n.color_green { background-color: $accent-green; }\n.color_red { background-color: $accent-red; }\n.color_purple { background-color: $accent-purple; }\n.color_grey { background-color: $accent-grey; }\n.color_black { background-color: $accent-black; }\n\n.shape_circle { shape: circle; }\n.shape_ellipse { shape: ellipse; }\n.shape_roundrectangle { shape: roundrectangle; }\n.shape_star { shape: star; }\n.shape_octagon { shape: octagon; }\n\n#Universe {\n font-size: 18px;\n font-weight: bold;\n text-max-width: 120px;\n border-width: 3px;\n border-color: $accent-yellow;\n}\n\n:childless[depth = 1] {\n font-weight: 700;\n}\n\n:childless:selected,\n:parent:selected {\n border-color: $accent-yellow;\n border-width: 3px;\n border-style: solid;\n box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4);\n}\n\nedge:selected {\n width: 4px;\n line-color: $accent-yellow;\n}\n","expires":"2026-05-30T05:15:18.481Z","customCssOnly":false,"nodePositions":{"n1":{"x":90.67366458040678,"y":-11.956547958492905},"n2":{"x":123.27758161762398,"y":80.78059141462374},"n3":{"x":92.78993602175682,"y":232.28754556266546},"n4":{"x":42.97874508916401,"y":-101.13440975012406},"n5":{"x":41.63073908276477,"y":-196.17265159894208},"n6":{"x":36.65882349396908,"y":-290.28754556266546},"n7":{"x":-166.95238074430725,"y":-116.91847656696797},"n8":{"x":-92.41263496731636,"y":42.73202943040194},"n9":{"x":-299.48551400430085,"y":57.35070103967438},"n10":{"x":299.48551400430085,"y":-17.722130573523543}}} -===== \ No newline at end of file diff --git a/app/e2e/visual/fixtures/mindmap.doc.txt b/app/e2e/visual/fixtures/mindmap.doc.txt deleted file mode 100644 index 886c94677..000000000 --- a/app/e2e/visual/fixtures/mindmap.doc.txt +++ /dev/null @@ -1,16 +0,0 @@ -Mind Mapping .size_lg - Learning Style .color_blue - Read .color_blue - Listen .color_blue - Summarize .color_blue - Motivation .color_orange - Tips .color_orange - Roadmap .color_orange - Review .color_green - Notes .color_green - Method .color_green - Discuss .color_green - -===== -{"themeEditor":{"layoutName":"cose","direction":"RIGHT","spacingFactor":0.95,"lineHeight":1.2,"shape":"ellipse","background":"#ffffff","textMaxWidth":100,"padding":17,"fontFamily":"Kalam","curveStyle":"bezier","textMarginY":2,"borderWidth":0,"edgeTextSize":0.8,"edgeWidth":2,"sourceArrowShape":"none","targetArrowShape":"triangle-backcurve","edgeColor":"#314137","borderColor":"#000000","nodeBackground":"#ffffff","nodeForeground":"#314137","sourceDistanceFromNode":0,"targetDistanceFromNode":7,"arrowScale":1.25,"rotateEdgeLabel":false,"useFixedHeight":false,"fixedHeight":130},"cytoscapeStyle":"$green: #ddff75;\n$blue: #bde2ff;\n$orange: #ffe253;\n$pink: #ffb6bc;\n$grey: #f2f0ea;\n\n:childless.size_lg {\n font-size: 30;\n width: 150;\n line-height: 1;\n text-max-width: 130;\n}\n\n:childless.color_orange {\n background-color: $orange;\n}\n:childless.color_green {\n background-color: $green;\n}\n:childless.color_pink {\n background-color: $pink;\n}\n:childless.color_grey {\n background-color: $grey;\n}\n:childless.color_blue {\n background-color: $blue;\n}","expires":"2026-05-30T05:15:07.598Z","customCssOnly":false,"nodePositions":{"n1":{"x":88.13698150351098,"y":-3.748122996878957},"n2":{"x":52.98235435026533,"y":-125.95716601551867},"n3":{"x":264.10074377013405,"y":-122.45533797838313},"n4":{"x":168.67021831132791,"y":-203.16977658929224},"n5":{"x":-31.78655166530496,"y":-212.3694571223207},"n6":{"x":-129.52566613670123,"y":2.300665721769835},"n7":{"x":-290.3224840190624,"y":69.70981178708847},"n8":{"x":-338.2752463117439,"y":-46.44360767536899},"n9":{"x":126.01598857370895,"y":117.85656508241166},"n10":{"x":338.27524631174384,"y":124.1721084655266},"n11":{"x":178.95491348801377,"y":212.3694571223207},"n12":{"x":-29.706801086715835,"y":186.99239568347014}}} -===== \ No newline at end of file diff --git a/app/e2e/visual/fixtures/playful-mindmap.doc.txt b/app/e2e/visual/fixtures/playful-mindmap.doc.txt deleted file mode 100644 index a57f54400..000000000 --- a/app/e2e/visual/fixtures/playful-mindmap.doc.txt +++ /dev/null @@ -1,29 +0,0 @@ -My Favorite Things! .color_pink .size_lg - Animals .color_yellow - Dogs .color_blue - Fluffy .color_green - Spotty .color_green - Cats .color_blue - Whiskers .color_green - Mittens .color_green - Unicorns .color_blue - Food .color_yellow - Pizza .color_blue - Cheese .color_green - Pepperoni .color_green - Ice Cream .color_blue - Chocolate .color_green - Vanilla .color_green - Cookies .color_blue - Hobbies .color_yellow - Drawing .color_blue - Dancing .color_blue - Singing .color_blue - Places .color_yellow - Beach .color_blue - Mountains .color_blue - Space .color_blue - -===== -{"themeEditor":{"layoutName":"cose","direction":"DOWN","spacingFactor":1.1,"background":"#FFFFFF","fontFamily":"Patrick Hand","shape":"ellipse","nodeBackground":"#FFB6C1","nodeForeground":"#333333","padding":10,"borderWidth":2,"borderColor":"#FF69B4","textMaxWidth":100,"lineHeight":1.2,"textMarginY":0,"useFixedHeight":false,"curveStyle":"bezier","edgeWidth":2,"edgeColor":"#888888","sourceArrowShape":"none","targetArrowShape":"none","sourceDistanceFromNode":5,"targetDistanceFromNode":5,"arrowScale":1,"edgeTextSize":0.875,"rotateEdgeLabel":false,"fixedHeight":100},"cytoscapeStyle":"\n@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');\n\n$pink: #FF69B4;\n$yellow: #FFD700;\n$blue: #87CEFA;\n$green: #98FB98;\n$red: #FF6B6B;\n$orange: #FFB347;\n$purple: #DDA0DD;\n$grey: #D3D3D3;\n\n:childless.size_lg {\n font-size: 30;\n width: 150;\n line-height: 1;\n text-max-width: 130;\n}\n\n:childless.color_pink {\n background-color: $pink;\n border-color: #FF1493;\n color: #FFFFFF;\n}\n\n:childless.color_yellow {\n background-color: $yellow;\n border-color: #FFA500;\n}\n\n:childless.color_blue {\n background-color: $blue;\n border-color: #4169E1;\n}\n\n:childless.color_green {\n background-color: $green;\n border-color: #32CD32;\n}\n\n:childless.color_red {\n background-color: $red;\n border-color: #CC0000;\n}\n\n:childless.color_orange {\n background-color: $orange;\n border-color: #FF8C00;\n}\n\n:childless.color_purple {\n background-color: $purple;\n border-color: #9B30FF;\n}\n\n:childless.color_grey {\n background-color: $grey;\n border-color: #A9A9A9;\n}\n\nnode:selected {\n border-width: 4px;\n border-color: #FF4500;\n}\n\nedge:selected {\n width: 4px;\n line-color: #FF4500;\n opacity: 1;\n}\n","expires":"2026-05-30T05:15:13.724Z","customCssOnly":false,"nodePositions":{"n1":{"x":-173.48639827097753,"y":-52.46520675810685},"n2":{"x":53.93519799010399,"y":-21.67378689473931},"n3":{"x":277.43638905065643,"y":24.181064150182593},"n4":{"x":492.15386732062393,"y":77.88712963131638},"n5":{"x":496.0306101024097,"y":-27.649587788518637},"n6":{"x":283.7174278419482,"y":-81.22794296358356},"n7":{"x":497.95198837020564,"y":-137.58668572355117},"n8":{"x":304.7321419601531,"y":-186.19030550597225},"n9":{"x":-171.12382748847867,"y":26.23047765790793},"n10":{"x":-96.88343749829544,"y":81.51260782776107},"n11":{"x":-48.538637440887086,"y":187.56341239001543},"n12":{"x":45.18399707265733,"y":274.3018631974429},"n13":{"x":-151.66001677937737,"y":267.70682244066893},"n14":{"x":-275.76457264334186,"y":145.64685689180754},"n15":{"x":-361.08182757054135,"y":230.6673493230766},"n16":{"x":-492.2166478178611,"y":149.6238083660829},"n17":{"x":118.31799121635522,"y":105.96625172226744},"n18":{"x":-96.44458526298203,"y":-145.07011523881692},"n19":{"x":102.3943721932104,"y":-100.18046875264983},"n20":{"x":117.24336762094659,"y":-182.25365016568432},"n21":{"x":-40.55106833627173,"y":-234.62639893791427},"n22":{"x":-282.36334235761996,"y":-169.752453377662},"n23":{"x":-228.51469396366863,"y":-274.3018631974429},"n24":{"x":-497.95198837020564,"y":-141.30781205862962},"n25":{"x":-411.8667509979206,"y":-247.34234468384224}}} -===== \ No newline at end of file diff --git a/app/e2e/visual/frozen-templates.ts b/app/e2e/visual/frozen-templates.ts index 794355649..40f5809c3 100644 --- a/app/e2e/visual/frozen-templates.ts +++ b/app/e2e/visual/frozen-templates.ts @@ -13,16 +13,10 @@ import { compressToEncodedURIComponent } from "lz-string"; * document string with meta.nodePositions populated. Generated by * `generate-frozen-fixtures` (see scripts/), regenerate if a template changes. * - * Populated empirically after the first all-live stability run: these three - * mindmap templates (force-directed cose layout) failed the same comparison on - * two consecutive runs; the other 10 — including the two cose network-diagram - * templates and the ELK stress one — rendered stably and use the live path. + * The two force-directed (cose) templates in the current lineup use frozen + * fixtures; the other 8 use deterministic layouts and render live. */ -export const FROZEN_TEMPLATES: string[] = [ - "mindmap", - "playful-mindmap", - "mindmap-dark", -]; +export const FROZEN_TEMPLATES: string[] = ["ink-mindmap", "constellation"]; const ORIGIN = process.env.E2E_START_URL || "http://localhost:3000"; diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/blueprint-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/blueprint-darwin.png new file mode 100644 index 000000000..d8d672451 Binary files /dev/null and b/app/e2e/visual/templates.visual.spec.ts-snapshots/blueprint-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/code-flow-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/code-flow-darwin.png deleted file mode 100644 index e47a60b09..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/code-flow-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/constellation-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/constellation-darwin.png new file mode 100644 index 000000000..795b1e2ac Binary files /dev/null and b/app/e2e/visual/templates.visual.spec.ts-snapshots/constellation-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/decision-flow-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/decision-flow-darwin.png deleted file mode 100644 index 7a503e022..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/decision-flow-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/decision-tree-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/decision-tree-darwin.png new file mode 100644 index 000000000..765de8178 Binary files /dev/null and b/app/e2e/visual/templates.visual.spec.ts-snapshots/decision-tree-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/default-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/default-darwin.png index 0dce2d34b..c3c1bf96f 100644 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/default-darwin.png and b/app/e2e/visual/templates.visual.spec.ts-snapshots/default-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/flowchart-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/flowchart-darwin.png deleted file mode 100644 index 781a979d9..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/flowchart-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/ink-mindmap-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/ink-mindmap-darwin.png new file mode 100644 index 000000000..ce39f6648 Binary files /dev/null and b/app/e2e/visual/templates.visual.spec.ts-snapshots/ink-mindmap-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/knowledge-graph-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/knowledge-graph-darwin.png deleted file mode 100644 index 6ebdd859f..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/knowledge-graph-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/mindmap-dark-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/mindmap-dark-darwin.png deleted file mode 100644 index 587ce3f83..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/mindmap-dark-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/mindmap-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/mindmap-darwin.png deleted file mode 100644 index 6a01fc5d3..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/mindmap-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/network-diagram-dark-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/network-diagram-dark-darwin.png deleted file mode 100644 index f6ffa1b71..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/network-diagram-dark-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/network-diagram-icons-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/network-diagram-icons-darwin.png deleted file mode 100644 index 4cdd548f0..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/network-diagram-icons-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/org-chart-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/org-chart-darwin.png index fe9642a96..bc24de208 100644 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/org-chart-darwin.png and b/app/e2e/visual/templates.visual.spec.ts-snapshots/org-chart-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/pert-light-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/pert-light-darwin.png deleted file mode 100644 index bab242b28..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/pert-light-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/playful-mindmap-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/playful-mindmap-darwin.png deleted file mode 100644 index aa92bd1d0..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/playful-mindmap-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/process-flow-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/process-flow-darwin.png deleted file mode 100644 index 62ff48b9c..000000000 Binary files a/app/e2e/visual/templates.visual.spec.ts-snapshots/process-flow-darwin.png and /dev/null differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/process-lanes-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/process-lanes-darwin.png new file mode 100644 index 000000000..167e1cfa5 Binary files /dev/null and b/app/e2e/visual/templates.visual.spec.ts-snapshots/process-lanes-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/sitemap-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/sitemap-darwin.png new file mode 100644 index 000000000..0c65f89ac Binary files /dev/null and b/app/e2e/visual/templates.visual.spec.ts-snapshots/sitemap-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/storyline-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/storyline-darwin.png new file mode 100644 index 000000000..52c9d9656 Binary files /dev/null and b/app/e2e/visual/templates.visual.spec.ts-snapshots/storyline-darwin.png differ diff --git a/app/e2e/visual/templates.visual.spec.ts-snapshots/timeline-darwin.png b/app/e2e/visual/templates.visual.spec.ts-snapshots/timeline-darwin.png new file mode 100644 index 000000000..1ebffaebd Binary files /dev/null and b/app/e2e/visual/templates.visual.spec.ts-snapshots/timeline-darwin.png differ diff --git a/app/package.json b/app/package.json index d2f5e4243..2b3109e95 100644 --- a/app/package.json +++ b/app/package.json @@ -1,6 +1,6 @@ { "name": "app", - "version": "1.66.0", + "version": "1.67.0", "main": "module/module.js", "license": "MIT", "scripts": { @@ -29,7 +29,8 @@ "analyze": "source-map-explorer 'build/static/js/*.js'", "autotranslations": "node scripts/autotranslations.mjs", "theme:schema:generate": "pnpx ts-json-schema-generator --path 'src/lib/FFTheme.ts' --type 'FFTheme' -f tsconfig.json --strict-tuples -o src/lib/FFTheme.schema.json --minify --no-top-ref", - "screenshot-templates": "node scripts/screenshot-templates.mjs" + "screenshot-templates": "node scripts/screenshot-templates.mjs", + "font:previews": "node scripts/generate-font-previews.mjs" }, "dependencies": { "@formkit/auto-animate": "1.0.0-beta.6", @@ -196,6 +197,7 @@ "jsdom": "^20.0.3", "minimist": "^1.2.5", "msw": "^1.2.3", + "opentype.js": "^2.0.0", "playwright": "1.45.2", "source-map-explorer": "^2.5.2", "supabase": "^1.82.1", diff --git a/app/public/font-previews/CabinetGrotesk.svg b/app/public/font-previews/CabinetGrotesk.svg new file mode 100644 index 000000000..10f0fd73f --- /dev/null +++ b/app/public/font-previews/CabinetGrotesk.svg @@ -0,0 +1 @@ + diff --git a/app/public/font-previews/GeneralSans.svg b/app/public/font-previews/GeneralSans.svg new file mode 100644 index 000000000..594afaa5b --- /dev/null +++ b/app/public/font-previews/GeneralSans.svg @@ -0,0 +1 @@ + diff --git a/app/public/font-previews/HubotSans.svg b/app/public/font-previews/HubotSans.svg new file mode 100644 index 000000000..d9a30f32f --- /dev/null +++ b/app/public/font-previews/HubotSans.svg @@ -0,0 +1 @@ + diff --git a/app/public/font-previews/OpenRunde.svg b/app/public/font-previews/OpenRunde.svg new file mode 100644 index 000000000..cefd64c58 --- /dev/null +++ b/app/public/font-previews/OpenRunde.svg @@ -0,0 +1 @@ + diff --git a/app/public/font-previews/PublicSans.svg b/app/public/font-previews/PublicSans.svg new file mode 100644 index 000000000..1c3d7aba0 --- /dev/null +++ b/app/public/font-previews/PublicSans.svg @@ -0,0 +1 @@ + diff --git a/app/public/font-previews/Satoshi.svg b/app/public/font-previews/Satoshi.svg new file mode 100644 index 000000000..ae1ac6a26 --- /dev/null +++ b/app/public/font-previews/Satoshi.svg @@ -0,0 +1 @@ + diff --git a/app/public/font-previews/ShantellSans.svg b/app/public/font-previews/ShantellSans.svg new file mode 100644 index 000000000..b27593be1 --- /dev/null +++ b/app/public/font-previews/ShantellSans.svg @@ -0,0 +1 @@ + diff --git a/app/public/font-previews/Switzer.svg b/app/public/font-previews/Switzer.svg new file mode 100644 index 000000000..8b1caa659 --- /dev/null +++ b/app/public/font-previews/Switzer.svg @@ -0,0 +1 @@ + diff --git a/app/public/fonts/CabinetGrotesk-Bold.otf b/app/public/fonts/CabinetGrotesk-Bold.otf new file mode 100644 index 000000000..806169efd Binary files /dev/null and b/app/public/fonts/CabinetGrotesk-Bold.otf differ diff --git a/app/public/fonts/CabinetGrotesk-Bold.woff2 b/app/public/fonts/CabinetGrotesk-Bold.woff2 new file mode 100644 index 000000000..0ebee8433 Binary files /dev/null and b/app/public/fonts/CabinetGrotesk-Bold.woff2 differ diff --git a/app/public/fonts/CabinetGrotesk-Medium.otf b/app/public/fonts/CabinetGrotesk-Medium.otf new file mode 100644 index 000000000..846a8f02c Binary files /dev/null and b/app/public/fonts/CabinetGrotesk-Medium.otf differ diff --git a/app/public/fonts/CabinetGrotesk-Medium.woff2 b/app/public/fonts/CabinetGrotesk-Medium.woff2 new file mode 100644 index 000000000..1faf39287 Binary files /dev/null and b/app/public/fonts/CabinetGrotesk-Medium.woff2 differ diff --git a/app/public/fonts/CabinetGrotesk-Regular.otf b/app/public/fonts/CabinetGrotesk-Regular.otf new file mode 100644 index 000000000..34fb8886c Binary files /dev/null and b/app/public/fonts/CabinetGrotesk-Regular.otf differ diff --git a/app/public/fonts/CabinetGrotesk-Regular.woff2 b/app/public/fonts/CabinetGrotesk-Regular.woff2 new file mode 100644 index 000000000..57e633d94 Binary files /dev/null and b/app/public/fonts/CabinetGrotesk-Regular.woff2 differ diff --git a/app/public/fonts/CabinetGrotesk.css b/app/public/fonts/CabinetGrotesk.css new file mode 100644 index 000000000..e28bd9b0c --- /dev/null +++ b/app/public/fonts/CabinetGrotesk.css @@ -0,0 +1,18 @@ +@font-face { + font-family: "Cabinet Grotesk"; + font-style: normal; + font-weight: 400; + src: url('/fonts/CabinetGrotesk-Regular.woff2') format('woff2'); +} +@font-face { + font-family: "Cabinet Grotesk"; + font-style: normal; + font-weight: 500; + src: url('/fonts/CabinetGrotesk-Medium.woff2') format('woff2'); +} +@font-face { + font-family: "Cabinet Grotesk"; + font-style: normal; + font-weight: 700; + src: url('/fonts/CabinetGrotesk-Bold.woff2') format('woff2'); +} diff --git a/app/public/fonts/GeneralSans-Medium.otf b/app/public/fonts/GeneralSans-Medium.otf new file mode 100644 index 000000000..42147facd Binary files /dev/null and b/app/public/fonts/GeneralSans-Medium.otf differ diff --git a/app/public/fonts/GeneralSans-Medium.woff2 b/app/public/fonts/GeneralSans-Medium.woff2 new file mode 100644 index 000000000..47de36778 Binary files /dev/null and b/app/public/fonts/GeneralSans-Medium.woff2 differ diff --git a/app/public/fonts/GeneralSans-Regular.otf b/app/public/fonts/GeneralSans-Regular.otf new file mode 100644 index 000000000..044743911 Binary files /dev/null and b/app/public/fonts/GeneralSans-Regular.otf differ diff --git a/app/public/fonts/GeneralSans-Regular.woff2 b/app/public/fonts/GeneralSans-Regular.woff2 new file mode 100644 index 000000000..5f668e422 Binary files /dev/null and b/app/public/fonts/GeneralSans-Regular.woff2 differ diff --git a/app/public/fonts/GeneralSans-Semibold.otf b/app/public/fonts/GeneralSans-Semibold.otf new file mode 100644 index 000000000..a436638c0 Binary files /dev/null and b/app/public/fonts/GeneralSans-Semibold.otf differ diff --git a/app/public/fonts/GeneralSans-Semibold.woff2 b/app/public/fonts/GeneralSans-Semibold.woff2 new file mode 100644 index 000000000..b47a04b0f Binary files /dev/null and b/app/public/fonts/GeneralSans-Semibold.woff2 differ diff --git a/app/public/fonts/GeneralSans.css b/app/public/fonts/GeneralSans.css new file mode 100644 index 000000000..4f539c6cd --- /dev/null +++ b/app/public/fonts/GeneralSans.css @@ -0,0 +1,18 @@ +@font-face { + font-family: "General Sans"; + font-style: normal; + font-weight: 400; + src: url('/fonts/GeneralSans-Regular.woff2') format('woff2'); +} +@font-face { + font-family: "General Sans"; + font-style: normal; + font-weight: 500; + src: url('/fonts/GeneralSans-Medium.woff2') format('woff2'); +} +@font-face { + font-family: "General Sans"; + font-style: normal; + font-weight: 600; + src: url('/fonts/GeneralSans-Semibold.woff2') format('woff2'); +} diff --git a/app/public/fonts/HubotSans-Medium.otf b/app/public/fonts/HubotSans-Medium.otf new file mode 100644 index 000000000..9ba599ba8 Binary files /dev/null and b/app/public/fonts/HubotSans-Medium.otf differ diff --git a/app/public/fonts/HubotSans-Medium.woff2 b/app/public/fonts/HubotSans-Medium.woff2 new file mode 100644 index 000000000..d83d2cdbf Binary files /dev/null and b/app/public/fonts/HubotSans-Medium.woff2 differ diff --git a/app/public/fonts/HubotSans-Regular.otf b/app/public/fonts/HubotSans-Regular.otf new file mode 100644 index 000000000..8d2e29e3b Binary files /dev/null and b/app/public/fonts/HubotSans-Regular.otf differ diff --git a/app/public/fonts/HubotSans-Regular.woff2 b/app/public/fonts/HubotSans-Regular.woff2 new file mode 100644 index 000000000..4eb453160 Binary files /dev/null and b/app/public/fonts/HubotSans-Regular.woff2 differ diff --git a/app/public/fonts/HubotSans.css b/app/public/fonts/HubotSans.css new file mode 100644 index 000000000..024f93785 --- /dev/null +++ b/app/public/fonts/HubotSans.css @@ -0,0 +1,12 @@ +@font-face { + font-family: "Hubot Sans"; + font-style: normal; + font-weight: 400; + src: url('/fonts/HubotSans-Regular.woff2') format('woff2'); +} +@font-face { + font-family: "Hubot Sans"; + font-style: normal; + font-weight: 500; + src: url('/fonts/HubotSans-Medium.woff2') format('woff2'); +} diff --git a/app/public/fonts/OpenRunde-Medium.otf b/app/public/fonts/OpenRunde-Medium.otf new file mode 100644 index 000000000..ee6ecb670 Binary files /dev/null and b/app/public/fonts/OpenRunde-Medium.otf differ diff --git a/app/public/fonts/OpenRunde-Medium.woff2 b/app/public/fonts/OpenRunde-Medium.woff2 new file mode 100644 index 000000000..99de77a6a Binary files /dev/null and b/app/public/fonts/OpenRunde-Medium.woff2 differ diff --git a/app/public/fonts/OpenRunde-Regular.otf b/app/public/fonts/OpenRunde-Regular.otf new file mode 100644 index 000000000..988186afa Binary files /dev/null and b/app/public/fonts/OpenRunde-Regular.otf differ diff --git a/app/public/fonts/OpenRunde-Regular.woff2 b/app/public/fonts/OpenRunde-Regular.woff2 new file mode 100644 index 000000000..30447d054 Binary files /dev/null and b/app/public/fonts/OpenRunde-Regular.woff2 differ diff --git a/app/public/fonts/OpenRunde-Semibold.otf b/app/public/fonts/OpenRunde-Semibold.otf new file mode 100644 index 000000000..d048c74ff Binary files /dev/null and b/app/public/fonts/OpenRunde-Semibold.otf differ diff --git a/app/public/fonts/OpenRunde-Semibold.woff2 b/app/public/fonts/OpenRunde-Semibold.woff2 new file mode 100644 index 000000000..ca05cba5c Binary files /dev/null and b/app/public/fonts/OpenRunde-Semibold.woff2 differ diff --git a/app/public/fonts/OpenRunde.css b/app/public/fonts/OpenRunde.css new file mode 100644 index 000000000..4d2536e5b --- /dev/null +++ b/app/public/fonts/OpenRunde.css @@ -0,0 +1,18 @@ +@font-face { + font-family: "Open Runde"; + font-style: normal; + font-weight: 400; + src: url('/fonts/OpenRunde-Regular.woff2') format('woff2'); +} +@font-face { + font-family: "Open Runde"; + font-style: normal; + font-weight: 500; + src: url('/fonts/OpenRunde-Medium.woff2') format('woff2'); +} +@font-face { + font-family: "Open Runde"; + font-style: normal; + font-weight: 600; + src: url('/fonts/OpenRunde-Semibold.woff2') format('woff2'); +} diff --git a/app/public/fonts/PublicSans-Medium.otf b/app/public/fonts/PublicSans-Medium.otf new file mode 100644 index 000000000..52b7ef7b1 Binary files /dev/null and b/app/public/fonts/PublicSans-Medium.otf differ diff --git a/app/public/fonts/PublicSans-Medium.woff2 b/app/public/fonts/PublicSans-Medium.woff2 new file mode 100644 index 000000000..eb38a3ce1 Binary files /dev/null and b/app/public/fonts/PublicSans-Medium.woff2 differ diff --git a/app/public/fonts/PublicSans-Regular.otf b/app/public/fonts/PublicSans-Regular.otf new file mode 100644 index 000000000..852f4d373 Binary files /dev/null and b/app/public/fonts/PublicSans-Regular.otf differ diff --git a/app/public/fonts/PublicSans-Regular.woff2 b/app/public/fonts/PublicSans-Regular.woff2 new file mode 100644 index 000000000..f4a077b87 Binary files /dev/null and b/app/public/fonts/PublicSans-Regular.woff2 differ diff --git a/app/public/fonts/PublicSans-SemiBold.otf b/app/public/fonts/PublicSans-SemiBold.otf new file mode 100644 index 000000000..07d183a8f Binary files /dev/null and b/app/public/fonts/PublicSans-SemiBold.otf differ diff --git a/app/public/fonts/PublicSans-SemiBold.woff2 b/app/public/fonts/PublicSans-SemiBold.woff2 new file mode 100644 index 000000000..f97d9ec08 Binary files /dev/null and b/app/public/fonts/PublicSans-SemiBold.woff2 differ diff --git a/app/public/fonts/PublicSans.css b/app/public/fonts/PublicSans.css new file mode 100644 index 000000000..caea1245b --- /dev/null +++ b/app/public/fonts/PublicSans.css @@ -0,0 +1,18 @@ +@font-face { + font-family: "Public Sans"; + font-style: normal; + font-weight: 400; + src: url('/fonts/PublicSans-Regular.woff2') format('woff2'); +} +@font-face { + font-family: "Public Sans"; + font-style: normal; + font-weight: 500; + src: url('/fonts/PublicSans-Medium.woff2') format('woff2'); +} +@font-face { + font-family: "Public Sans"; + font-style: normal; + font-weight: 600; + src: url('/fonts/PublicSans-SemiBold.woff2') format('woff2'); +} diff --git a/app/public/fonts/Satoshi-Regular.otf b/app/public/fonts/Satoshi-Regular.otf new file mode 100644 index 000000000..ddaadc053 Binary files /dev/null and b/app/public/fonts/Satoshi-Regular.otf differ diff --git a/app/public/fonts/Satoshi-Variable.ttf b/app/public/fonts/Satoshi-Variable.ttf new file mode 100644 index 000000000..976e85cb5 Binary files /dev/null and b/app/public/fonts/Satoshi-Variable.ttf differ diff --git a/app/public/fonts/Satoshi-Variable.woff2 b/app/public/fonts/Satoshi-Variable.woff2 new file mode 100644 index 000000000..b00e833ed Binary files /dev/null and b/app/public/fonts/Satoshi-Variable.woff2 differ diff --git a/app/public/fonts/Satoshi.css b/app/public/fonts/Satoshi.css new file mode 100644 index 000000000..2dc51bc3b --- /dev/null +++ b/app/public/fonts/Satoshi.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Satoshi"; + font-style: normal; + font-weight: 300 900; + src: url('/fonts/Satoshi-Variable.woff2') format('woff2'); +} diff --git a/app/public/fonts/ShantellSans-wght.ttf b/app/public/fonts/ShantellSans-wght.ttf new file mode 100644 index 000000000..19f69132b Binary files /dev/null and b/app/public/fonts/ShantellSans-wght.ttf differ diff --git a/app/public/fonts/ShantellSans-wght.woff2 b/app/public/fonts/ShantellSans-wght.woff2 new file mode 100644 index 000000000..e80ac6e1b Binary files /dev/null and b/app/public/fonts/ShantellSans-wght.woff2 differ diff --git a/app/public/fonts/ShantellSans.css b/app/public/fonts/ShantellSans.css new file mode 100644 index 000000000..abc24f8db --- /dev/null +++ b/app/public/fonts/ShantellSans.css @@ -0,0 +1,6 @@ +@font-face { + font-family: "Shantell Sans"; + font-style: normal; + font-weight: 300 800; + src: url('/fonts/ShantellSans-wght.woff2') format('woff2'); +} diff --git a/app/public/fonts/Switzer-Medium.otf b/app/public/fonts/Switzer-Medium.otf new file mode 100644 index 000000000..96abdf574 Binary files /dev/null and b/app/public/fonts/Switzer-Medium.otf differ diff --git a/app/public/fonts/Switzer-Medium.woff2 b/app/public/fonts/Switzer-Medium.woff2 new file mode 100644 index 000000000..a6ebfd546 Binary files /dev/null and b/app/public/fonts/Switzer-Medium.woff2 differ diff --git a/app/public/fonts/Switzer-Regular.otf b/app/public/fonts/Switzer-Regular.otf new file mode 100644 index 000000000..fd73a2fcd Binary files /dev/null and b/app/public/fonts/Switzer-Regular.otf differ diff --git a/app/public/fonts/Switzer-Regular.woff2 b/app/public/fonts/Switzer-Regular.woff2 new file mode 100644 index 000000000..23351b014 Binary files /dev/null and b/app/public/fonts/Switzer-Regular.woff2 differ diff --git a/app/public/fonts/Switzer-Semibold.otf b/app/public/fonts/Switzer-Semibold.otf new file mode 100644 index 000000000..53c05f8b5 Binary files /dev/null and b/app/public/fonts/Switzer-Semibold.otf differ diff --git a/app/public/fonts/Switzer-Semibold.woff2 b/app/public/fonts/Switzer-Semibold.woff2 new file mode 100644 index 000000000..c9375cb68 Binary files /dev/null and b/app/public/fonts/Switzer-Semibold.woff2 differ diff --git a/app/public/fonts/Switzer.css b/app/public/fonts/Switzer.css new file mode 100644 index 000000000..b87c74008 --- /dev/null +++ b/app/public/fonts/Switzer.css @@ -0,0 +1,18 @@ +@font-face { + font-family: "Switzer"; + font-style: normal; + font-weight: 400; + src: url('/fonts/Switzer-Regular.woff2') format('woff2'); +} +@font-face { + font-family: "Switzer"; + font-style: normal; + font-weight: 500; + src: url('/fonts/Switzer-Medium.woff2') format('woff2'); +} +@font-face { + font-family: "Switzer"; + font-style: normal; + font-weight: 600; + src: url('/fonts/Switzer-Semibold.woff2') format('woff2'); +} diff --git a/app/public/template-screenshots/blueprint.png b/app/public/template-screenshots/blueprint.png new file mode 100644 index 000000000..c2ca548c1 Binary files /dev/null and b/app/public/template-screenshots/blueprint.png differ diff --git a/app/public/template-screenshots/code-flow.png b/app/public/template-screenshots/code-flow.png deleted file mode 100644 index c2f9d68c5..000000000 Binary files a/app/public/template-screenshots/code-flow.png and /dev/null differ diff --git a/app/public/template-screenshots/constellation.png b/app/public/template-screenshots/constellation.png new file mode 100644 index 000000000..06ab6327e Binary files /dev/null and b/app/public/template-screenshots/constellation.png differ diff --git a/app/public/template-screenshots/decision-flow.png b/app/public/template-screenshots/decision-flow.png deleted file mode 100644 index 4f7b052cd..000000000 Binary files a/app/public/template-screenshots/decision-flow.png and /dev/null differ diff --git a/app/public/template-screenshots/decision-tree.png b/app/public/template-screenshots/decision-tree.png new file mode 100644 index 000000000..4c5aeb5b7 Binary files /dev/null and b/app/public/template-screenshots/decision-tree.png differ diff --git a/app/public/template-screenshots/default.png b/app/public/template-screenshots/default.png index 4e4c1f36e..ce6bbe8fa 100644 Binary files a/app/public/template-screenshots/default.png and b/app/public/template-screenshots/default.png differ diff --git a/app/public/template-screenshots/flowchart.png b/app/public/template-screenshots/flowchart.png deleted file mode 100644 index d84014b98..000000000 Binary files a/app/public/template-screenshots/flowchart.png and /dev/null differ diff --git a/app/public/template-screenshots/ink-mindmap.png b/app/public/template-screenshots/ink-mindmap.png new file mode 100644 index 000000000..6c833f39f Binary files /dev/null and b/app/public/template-screenshots/ink-mindmap.png differ diff --git a/app/public/template-screenshots/knowledge-graph.png b/app/public/template-screenshots/knowledge-graph.png deleted file mode 100644 index 27715d5f7..000000000 Binary files a/app/public/template-screenshots/knowledge-graph.png and /dev/null differ diff --git a/app/public/template-screenshots/mindmap-dark.png b/app/public/template-screenshots/mindmap-dark.png deleted file mode 100644 index 142802abd..000000000 Binary files a/app/public/template-screenshots/mindmap-dark.png and /dev/null differ diff --git a/app/public/template-screenshots/mindmap.png b/app/public/template-screenshots/mindmap.png deleted file mode 100644 index 768454495..000000000 Binary files a/app/public/template-screenshots/mindmap.png and /dev/null differ diff --git a/app/public/template-screenshots/network-diagram-dark.png b/app/public/template-screenshots/network-diagram-dark.png deleted file mode 100644 index 7bd30599d..000000000 Binary files a/app/public/template-screenshots/network-diagram-dark.png and /dev/null differ diff --git a/app/public/template-screenshots/network-diagram-icons.png b/app/public/template-screenshots/network-diagram-icons.png deleted file mode 100644 index 1621c6bb5..000000000 Binary files a/app/public/template-screenshots/network-diagram-icons.png and /dev/null differ diff --git a/app/public/template-screenshots/org-chart.png b/app/public/template-screenshots/org-chart.png index dcaca2d27..3541b342f 100644 Binary files a/app/public/template-screenshots/org-chart.png and b/app/public/template-screenshots/org-chart.png differ diff --git a/app/public/template-screenshots/pert-light.png b/app/public/template-screenshots/pert-light.png deleted file mode 100644 index 8f18b828f..000000000 Binary files a/app/public/template-screenshots/pert-light.png and /dev/null differ diff --git a/app/public/template-screenshots/playful-mindmap.png b/app/public/template-screenshots/playful-mindmap.png deleted file mode 100644 index 38d87d74f..000000000 Binary files a/app/public/template-screenshots/playful-mindmap.png and /dev/null differ diff --git a/app/public/template-screenshots/process-flow.png b/app/public/template-screenshots/process-flow.png deleted file mode 100644 index 8fccb4590..000000000 Binary files a/app/public/template-screenshots/process-flow.png and /dev/null differ diff --git a/app/public/template-screenshots/process-lanes.png b/app/public/template-screenshots/process-lanes.png new file mode 100644 index 000000000..167e1cfa5 Binary files /dev/null and b/app/public/template-screenshots/process-lanes.png differ diff --git a/app/public/template-screenshots/sitemap.png b/app/public/template-screenshots/sitemap.png new file mode 100644 index 000000000..0c65f89ac Binary files /dev/null and b/app/public/template-screenshots/sitemap.png differ diff --git a/app/public/template-screenshots/storyline.png b/app/public/template-screenshots/storyline.png new file mode 100644 index 000000000..9848e8cbb Binary files /dev/null and b/app/public/template-screenshots/storyline.png differ diff --git a/app/public/template-screenshots/thumb_blueprint.png b/app/public/template-screenshots/thumb_blueprint.png new file mode 100644 index 000000000..9b54f1edc Binary files /dev/null and b/app/public/template-screenshots/thumb_blueprint.png differ diff --git a/app/public/template-screenshots/thumb_code-flow.png b/app/public/template-screenshots/thumb_code-flow.png deleted file mode 100644 index cca96ac18..000000000 Binary files a/app/public/template-screenshots/thumb_code-flow.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_constellation.png b/app/public/template-screenshots/thumb_constellation.png new file mode 100644 index 000000000..c84a163db Binary files /dev/null and b/app/public/template-screenshots/thumb_constellation.png differ diff --git a/app/public/template-screenshots/thumb_decision-flow.png b/app/public/template-screenshots/thumb_decision-flow.png deleted file mode 100644 index 32e34444d..000000000 Binary files a/app/public/template-screenshots/thumb_decision-flow.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_decision-tree.png b/app/public/template-screenshots/thumb_decision-tree.png new file mode 100644 index 000000000..641bc13e4 Binary files /dev/null and b/app/public/template-screenshots/thumb_decision-tree.png differ diff --git a/app/public/template-screenshots/thumb_default.png b/app/public/template-screenshots/thumb_default.png index ff7cb64d1..6151b0a4a 100644 Binary files a/app/public/template-screenshots/thumb_default.png and b/app/public/template-screenshots/thumb_default.png differ diff --git a/app/public/template-screenshots/thumb_flowchart.png b/app/public/template-screenshots/thumb_flowchart.png deleted file mode 100644 index 7c15038e5..000000000 Binary files a/app/public/template-screenshots/thumb_flowchart.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_ink-mindmap.png b/app/public/template-screenshots/thumb_ink-mindmap.png new file mode 100644 index 000000000..bbdfdab5a Binary files /dev/null and b/app/public/template-screenshots/thumb_ink-mindmap.png differ diff --git a/app/public/template-screenshots/thumb_knowledge-graph.png b/app/public/template-screenshots/thumb_knowledge-graph.png deleted file mode 100644 index ce25e3dfc..000000000 Binary files a/app/public/template-screenshots/thumb_knowledge-graph.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_mindmap-dark.png b/app/public/template-screenshots/thumb_mindmap-dark.png deleted file mode 100644 index 396575825..000000000 Binary files a/app/public/template-screenshots/thumb_mindmap-dark.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_mindmap.png b/app/public/template-screenshots/thumb_mindmap.png deleted file mode 100644 index 330b92700..000000000 Binary files a/app/public/template-screenshots/thumb_mindmap.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_network-diagram-dark.png b/app/public/template-screenshots/thumb_network-diagram-dark.png deleted file mode 100644 index 8b9fb0acb..000000000 Binary files a/app/public/template-screenshots/thumb_network-diagram-dark.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_network-diagram-icons.png b/app/public/template-screenshots/thumb_network-diagram-icons.png deleted file mode 100644 index f652fdec0..000000000 Binary files a/app/public/template-screenshots/thumb_network-diagram-icons.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_org-chart.png b/app/public/template-screenshots/thumb_org-chart.png index 6021371cb..faa9e5532 100644 Binary files a/app/public/template-screenshots/thumb_org-chart.png and b/app/public/template-screenshots/thumb_org-chart.png differ diff --git a/app/public/template-screenshots/thumb_pert-light.png b/app/public/template-screenshots/thumb_pert-light.png deleted file mode 100644 index 46bffa770..000000000 Binary files a/app/public/template-screenshots/thumb_pert-light.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_playful-mindmap.png b/app/public/template-screenshots/thumb_playful-mindmap.png deleted file mode 100644 index ee62d5905..000000000 Binary files a/app/public/template-screenshots/thumb_playful-mindmap.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_process-flow.png b/app/public/template-screenshots/thumb_process-flow.png deleted file mode 100644 index 0e22d7b50..000000000 Binary files a/app/public/template-screenshots/thumb_process-flow.png and /dev/null differ diff --git a/app/public/template-screenshots/thumb_process-lanes.png b/app/public/template-screenshots/thumb_process-lanes.png new file mode 100644 index 000000000..5414f5782 Binary files /dev/null and b/app/public/template-screenshots/thumb_process-lanes.png differ diff --git a/app/public/template-screenshots/thumb_sitemap.png b/app/public/template-screenshots/thumb_sitemap.png new file mode 100644 index 000000000..f01c42dc0 Binary files /dev/null and b/app/public/template-screenshots/thumb_sitemap.png differ diff --git a/app/public/template-screenshots/thumb_storyline.png b/app/public/template-screenshots/thumb_storyline.png new file mode 100644 index 000000000..fd0d5588b Binary files /dev/null and b/app/public/template-screenshots/thumb_storyline.png differ diff --git a/app/public/template-screenshots/thumb_timeline.png b/app/public/template-screenshots/thumb_timeline.png new file mode 100644 index 000000000..d88779bab Binary files /dev/null and b/app/public/template-screenshots/thumb_timeline.png differ diff --git a/app/public/template-screenshots/timeline.png b/app/public/template-screenshots/timeline.png new file mode 100644 index 000000000..87ebd55d4 Binary files /dev/null and b/app/public/template-screenshots/timeline.png differ diff --git a/app/scripts/generate-font-previews.mjs b/app/scripts/generate-font-previews.mjs new file mode 100644 index 000000000..0e6fc6414 --- /dev/null +++ b/app/scripts/generate-font-previews.mjs @@ -0,0 +1,87 @@ +/** + * Pre-renders each picker font's name as an SVG path so the theme editor can + * PREVIEW fonts without loading the font files themselves. Run after adding + * or renaming a picker font in src/lib/fonts.ts: + * + * pnpm -F app font:previews + * + * Output: public/font-previews/{slug}.svg (slug matches the /fonts/{slug}.css + * name used in the font's importSnippet). + */ +import path from "path"; +import fs from "fs"; +import opentype from "opentype.js"; + +const __dirname = path.dirname(import.meta.url.slice(7)); +const fontsDir = path.join(__dirname, "../public/fonts"); +const outDir = path.join(__dirname, "../public/font-previews"); + +/** display name -> the file whose glyphs best represent the family */ +const PREVIEW_SOURCES = { + Satoshi: "Satoshi-Regular.otf", + "General Sans": "GeneralSans-Medium.otf", + "Public Sans": "PublicSans-Medium.otf", + "Hubot Sans": "HubotSans-Medium.otf", + "Open Runde": "OpenRunde-Medium.otf", + "Cabinet Grotesk": "CabinetGrotesk-Medium.otf", + Switzer: "Switzer-Medium.otf", + "Shantell Sans": "ShantellSans-wght.ttf", +}; + +const FONT_SIZE = 28; +const BASELINE = 28; +const HEIGHT = 38; + +const r = (n) => (Number.isFinite(n) ? +n.toFixed(2) : 0); +function serialize(commands) { + return commands + .map((c) => { + switch (c.type) { + case "M": + return `M${r(c.x)} ${r(c.y)}`; + case "L": + return `L${r(c.x)} ${r(c.y)}`; + case "C": + return `C${r(c.x1)} ${r(c.y1)} ${r(c.x2)} ${r(c.y2)} ${r(c.x)} ${r(c.y)}`; + case "Q": + return `Q${r(c.x1)} ${r(c.y1)} ${r(c.x)} ${r(c.y)}`; + case "Z": + return "Z"; + default: + return ""; + } + }) + .join(""); +} + +fs.mkdirSync(outDir, { recursive: true }); + +for (const [name, file] of Object.entries(PREVIEW_SOURCES)) { + const buf = fs.readFileSync(path.join(fontsDir, file)); + const font = opentype.parse( + buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength) + ); + // Compose glyph-by-glyph (charToGlyph + kerning) instead of font.getPath: + // string shaping can route through GSUB alternates whose charstrings + // opentype.js fails to extract (observed with handwriting fonts — letters vanished). + const scale = FONT_SIZE / font.unitsPerEm; + let x = 1; + let d = ""; + let prev = null; + for (const ch of name) { + const glyph = font.charToGlyph(ch); + if (prev) x += font.getKerningValue(prev, glyph) * scale; + const p = glyph.getPath(x, BASELINE, FONT_SIZE); + // Serialize by hand: opentype's Path.toPathData() can emit a literal + // NaN at certain coordinate offsets (seen with a handwriting font's "i" dot), and a + // single invalid token makes SVG parsers drop the REST of the path. + d += serialize(p.commands); + x += glyph.advanceWidth * scale; + prev = glyph; + } + const width = Math.ceil(x) + 2; + const svg = `\n`; + const slug = file.replace(/-[^-]+\.(otf|ttf)$/, "").replace(/-/g, ""); + fs.writeFileSync(path.join(outDir, `${slug}.svg`), svg); + console.log(`✅ ${name} -> font-previews/${slug}.svg (${width}px)`); +} diff --git a/app/scripts/generate-frozen-fixtures.mjs b/app/scripts/generate-frozen-fixtures.mjs index 3e6b7ff28..7a67b7cc6 100644 --- a/app/scripts/generate-frozen-fixtures.mjs +++ b/app/scripts/generate-frozen-fixtures.mjs @@ -26,7 +26,7 @@ const ORIGIN = process.env.E2E_START_URL || "http://localhost:3000"; // Empirically non-deterministic templates (confirmed via the stability check). // Keep in sync with FROZEN_TEMPLATES in e2e/visual/frozen-templates.ts. -const FROZEN = ["mindmap", "playful-mindmap", "mindmap-dark"]; +const FROZEN = ["ink-mindmap", "constellation"]; const DELIM = "====="; diff --git a/app/scripts/screenshot-templates.mjs b/app/scripts/screenshot-templates.mjs index 581318cd5..9aaac6b26 100644 --- a/app/scripts/screenshot-templates.mjs +++ b/app/scripts/screenshot-templates.mjs @@ -26,7 +26,7 @@ async function main() { const templates = fs .readdirSync(path.join(__dirname, "../src/lib/templates")) // remove templates.ts - .filter((template) => template !== "index.ts") + .filter((template) => template.endsWith("-template.ts")) .map((template) => template.replace("-template.ts", "")); // Apply the filter if provided @@ -67,7 +67,7 @@ async function takeScreenshot(browser, template) { await page.setViewportSize({ width: 1000, height: 1000 }); // go to root page - await page.goto("http://localhost:3000"); + await page.goto(process.env.E2E_START_URL ?? "http://localhost:3000"); // execute the global command to load a template try { diff --git a/app/src/components/Tabs/ThemeTab.tsx b/app/src/components/Tabs/ThemeTab.tsx index b5d5f5125..d8b509065 100644 --- a/app/src/components/Tabs/ThemeTab.tsx +++ b/app/src/components/Tabs/ThemeTab.tsx @@ -691,7 +691,7 @@ export function ThemeTab() { )} -
+ e.preventDefault()}> = ( { label }, globals ) => { - const isKnownFont = fonts.some((font) => font.name === value); + const isKnownFont = allFonts.some((font) => font.name === value); const disabled = globals?.canEdit === false; return ( <> @@ -211,26 +211,48 @@ function Fontpicker({ }) { const [open, setOpen] = useState(false); const [hovering, setHovering] = useState(false); + const [editing, setEditing] = useState(false); + // Show the selected font's pre-rendered preview on the closed control; + // while the input is focused it becomes plain text again so custom font + // names can still be typed. + const preview = fonts.find((f) => f.name === value)?.preview; + const showPreview = Boolean(preview) && !editing; return ( <> - setOpen(true)} - onBlur={() => { - if (!hovering) setOpen(false); - }} - value={value} - onChange={(e) => { - onValueChange(e.target.value); - }} - // on escape key, close the popover - onKeyDown={(e) => { - if (e.key === "Escape") setOpen(false); - }} - /> +
+ { + setEditing(true); + setOpen(true); + }} + onBlur={() => { + setEditing(false); + if (!hovering) setOpen(false); + }} + value={value} + onChange={(e) => { + onValueChange(e.target.value); + }} + // on escape key, close the popover + onKeyDown={(e) => { + if (e.key === "Escape") setOpen(false); + }} + /> + {showPreview ? ( + + ) : null} +
- {font.name} + {font.preview ? ( + {font.name} + ) : ( + font.name + )} ))} @@ -268,6 +298,9 @@ function FontpickerButton({ }) { return (