Big update

.gitignore

@@ -31,3 +31,4 @@ next-env.d.ts
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.plans

README.md

@@ -6,6 +6,10 @@ illustrations from your pictures.
 All the processing is made locally, your images never leave your computer and
 you are free to use them as you please.
 
+The platform-neutral, incremental generator is documented in
+[PINTR core](lib/pintr-core/README.md). It is currently a local module; this
+refactor does not create or publish a package.
+
 [![pintr](public/thumbnail.jpg)](https://javier.xyz/pintr/)
 
 ## Examples

app/globals.css

@@ -1,7 +1,25 @@
+@font-face {
+  font-family: 'Brutalita';
+  src: url('https://brutalita.com/font/Brutalita-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Brutalita';
+  src: url('https://brutalita.com/font/Brutalita-SemiBold.woff2')
+    format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
 body {
   touch-action: pan-y;
   margin: 0;
-  padding: 0.25rem 0 2rem;
+  padding: 0.25rem 0 3rem;
+  letter-spacing: -0.01em;
 }
 
 .skip-link {
@@ -34,11 +52,10 @@ a:focus {
 body,
 html,
 button {
-  font-family: var(--font-brutalita), Courier, monospace, sans-serif;
-  letter-spacing: -1px;
+  font-family: 'Brutalita', Courier, monospace, sans-serif;
   font-weight: 400;
   font-style: normal;
-  font-size: 24px;
+  font-size: 22.4px;
 }
 
 h1 {
@@ -77,7 +94,8 @@ button {
   background: #ecf0f1;
   white-space: nowrap;
   color: #000;
-  font-size: 1rem;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-small);
 }
 button:hover {
   cursor: pointer;
@@ -123,6 +141,14 @@ body.-dragging::after {
 :root {
   --sizeh: calc(1080px / 2);
   --sizew: calc(1080px / 2);
+
+  /* normal text */
+  --font-size: 1rem;
+  --font-weight: 400;
+
+  /* small text: 4/5 of normal, medium weight */
+  --font-size-small: 1rem;
+  --font-weight-small: 600;
 }
 
 .inline {
@@ -174,6 +200,9 @@ canvas,
 #srcImg {
   max-width: calc(100vw - 32px);
   max-height: calc(100vw - 32px);
+  /* The box follows the inline aspect-ratio of whichever image is shown, which
+     is not the drawing's once an aspect ratio is picked. */
+  height: auto;
 }
 
 canvas,
@@ -245,6 +274,35 @@ input[type='range']:focus-visible {
   outline: 2px solid #3498db;
   outline-offset: 2px;
 }
+select {
+  margin-left: 8px;
+  flex: 1;
+  width: 180px;
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: #95a5a6;
+  /* `appearance: none` drops the native dropdown marker, so draw one back: a
+     solid black triangle, matching the square slider thumbs. */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23000'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 10px 6px;
+  color: #000;
+  border: none;
+  border-radius: 0;
+  height: 32px;
+  padding: 0 26px 0 8px;
+  font: inherit;
+  font-size: var(--font-size-small);
+}
+select:hover {
+  cursor: pointer;
+}
+select:focus-visible {
+  outline: 2px solid #3498db;
+  outline-offset: 2px;
+}
+
 input[type='range'].toggle {
   width: 48px;
 }
@@ -300,10 +358,117 @@ input[type='range'].toggle::-moz-range-thumb {
   margin: 16px;
 }
 
+.vignette-options--container {
+  display: none;
+}
+
+/* An open folder: the toggle row is the tab and the panel below is the sheet
+   hanging off it, both tinted a step darker than the page and outlined with
+   inset shadows rather than borders. The tab is pulled down over the sheet's
+   top line by a negative bottom margin, so nothing inside the tab's own box
+   moves and its label sits exactly where it does when the folder is closed. */
+.folder.-open {
+  --folder-tint: #dfe4e6;
+}
+
+.folder.-open > .folder--tab {
+  position: relative;
+  z-index: 1;
+  width: fit-content;
+  margin-bottom: -1px;
+  background: var(--folder-tint);
+  /* left + top, then right — no bottom, so the tab opens into the sheet. */
+  box-shadow:
+    inset 1px 1px #000,
+    inset -1px 0 #000;
+}
+
+.folder.-open > .folder--sheet {
+  background: var(--folder-tint);
+  box-shadow:
+    inset 1px 1px #000,
+    inset -1px -1px #000;
+}
+
+.srcimage-container {
+  cursor: pointer;
+}
+
 ul,
 ol,
 li,
 p {
   margin: 0;
   padding: 0;
 }
+
+html {
+  color-scheme: light;
+}
+
+.doc-header h1 {
+  line-height: 1.2;
+  padding: 8px 0;
+}
+.doc-header .doc-back {
+  margin: 0 0 0 16px;
+  font-size: 0.7rem;
+}
+
+.doc {
+  max-width: 42rem;
+  padding: 0 16px 32px;
+  line-height: 1.5;
+  font-size: 0.8rem;
+  overflow-wrap: anywhere;
+}
+.doc h2 {
+  font-weight: 400;
+  font-size: 1rem;
+  margin: 32px 0 8px;
+}
+.doc h3 {
+  font-weight: 400;
+  font-size: 0.85rem;
+  color: #34495e;
+  margin: 24px 0 4px;
+}
+.doc p,
+.doc ul,
+.doc ol {
+  margin: 0 0 12px;
+}
+.doc ul,
+.doc ol {
+  padding-left: 1.4em;
+  list-style-position: outside;
+}
+.doc li {
+  margin-bottom: 4px;
+}
+.doc strong {
+  color: #34495e;
+}
+.doc .meta {
+  color: #555;
+  font-size: 0.7rem;
+}
+
+/* A control whose option has nothing to act on yet — the extend toggle with no
+   padding and no aspect ratio change. */
+.input-container.-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.input-container.-disabled input[type='range'] {
+  pointer-events: none;
+}
+
+/* Explains a download's format next to its button, in the muted register the
+   instructions use. */
+.export-note {
+  margin: 8px 16px 8px 0;
+  color: #555;
+  line-height: 1.4;
+}

app/layout.tsx

@@ -1,15 +1,6 @@
 import type { Metadata, Viewport } from 'next';
-import localFont from 'next/font/local';
-import { GoogleAnalytics } from '@next/third-parties/google';
-
 import './globals.css';
 
-const brutalita = localFont({
-  src: '../public/fonts/Brutalita-Regular.woff2',
-  display: 'swap',
-  variable: '--font-brutalita',
-});
-
 const TITLE = 'PINTR - Create plotter-like line drawings from your images';
 const DESCRIPTION = 'Create plotter-like line drawings from your images.';
 
@@ -60,9 +51,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={brutalita.variable}>
+    <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://brutalita.com" crossOrigin="" />
+      </head>
       <body>{children}</body>
-      <GoogleAnalytics gaId="G-M2FT27FXS2" />
     </html>
   );
 }