create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/form/src/story.test.ts

@@ -0,0 +1,190 @@
+import { FieldValidation } from 'foldkit'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { describe, expect, test } from 'vitest'
+
+import {
+  Message,
+  type Model,
+  SubmitForm,
+  ValidateEmail,
+  initialModel,
+  update,
+} from './main'
+
+const validModel: Model = {
+  ...initialModel,
+  name: FieldValidation.Valid({ value: 'Alice' }),
+  email: FieldValidation.Valid({ value: 'alice@example.com' }),
+}
+
+describe('update', () => {
+  describe('name field', () => {
+    test('typing a long name produces a Valid field', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.UpdatedName({ value: 'Alice' })),
+        model(model => {
+          expect(model.name._tag).toBe('Valid')
+          expect(model.name.value).toBe('Alice')
+        }),
+      )
+    })
+
+    test('typing a short name produces an Invalid field with the min-length error', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.UpdatedName({ value: 'A' })),
+        model(model => {
+          expect(model.name._tag).toBe('Invalid')
+          if (model.name._tag === 'Invalid') {
+            expect(model.name.errors).toContain(
+              'Name must be at least 2 characters',
+            )
+          }
+        }),
+      )
+    })
+  })
+
+  describe('email field', () => {
+    test('typing a well-formed email transitions to Validating and fires ValidateEmail', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.UpdatedEmail({ value: 'alice@example.com' })),
+        model(model => {
+          expect(model.email._tag).toBe('Validating')
+        }),
+        Command.expectHas(ValidateEmail),
+        Command.resolve(
+          ValidateEmail,
+          Message.CompletedValidateEmail({
+            field: FieldValidation.Valid({ value: 'alice@example.com' }),
+          }),
+        ),
+        model(model => {
+          expect(model.email._tag).toBe('Valid')
+        }),
+      )
+    })
+
+    test('typing a malformed email produces Invalid without an async command', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.UpdatedEmail({ value: 'not-an-email' })),
+        Command.expectNone(),
+        model(model => {
+          expect(model.email._tag).toBe('Invalid')
+        }),
+      )
+    })
+
+    test('a validation result for a superseded email value is ignored', () => {
+      const inFlightModel: Model = {
+        ...initialModel,
+        email: FieldValidation.Validating({ value: 'alice@example.com' }),
+      }
+
+      story(
+        update,
+        given(inFlightModel),
+        message(
+          Message.CompletedValidateEmail({
+            field: FieldValidation.Valid({ value: 'old@example.com' }),
+          }),
+        ),
+        model(model => {
+          expect(model.email._tag).toBe('Validating')
+        }),
+      )
+    })
+
+    test('a validation result for the current email value updates the field', () => {
+      const inFlightModel: Model = {
+        ...initialModel,
+        email: FieldValidation.Validating({ value: 'taken@example.com' }),
+      }
+
+      story(
+        update,
+        given(inFlightModel),
+        message(
+          Message.CompletedValidateEmail({
+            field: FieldValidation.Invalid({
+              value: 'taken@example.com',
+              errors: ['This email is already on our waitlist'],
+            }),
+          }),
+        ),
+        model(model => {
+          expect(model.email._tag).toBe('Invalid')
+        }),
+      )
+    })
+  })
+
+  describe('message text field', () => {
+    test('UpdatedMessageText stores the value as Valid', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.UpdatedMessageText({ value: 'Hello there.' })),
+        model(model => {
+          expect(model.messageText._tag).toBe('Valid')
+          expect(model.messageText.value).toBe('Hello there.')
+        }),
+      )
+    })
+  })
+
+  describe('submission', () => {
+    test('ClickedFormSubmit on an invalid form is ignored', () => {
+      story(
+        update,
+        given(initialModel),
+        message(Message.ClickedFormSubmit()),
+        Command.expectNone(),
+        model(model => {
+          expect(model.submission._tag).toBe('NotSubmitted')
+        }),
+      )
+    })
+
+    test('ClickedFormSubmit on a valid form fires SubmitForm and enters Submitting', () => {
+      story(
+        update,
+        given(validModel),
+        message(Message.ClickedFormSubmit()),
+        model(model => {
+          expect(model.submission._tag).toBe('Submitting')
+        }),
+        Command.expectHas(SubmitForm),
+        Command.resolve(
+          SubmitForm,
+          Message.SucceededSubmitForm({ name: 'Alice' }),
+        ),
+        model(model => {
+          expect(model.submission._tag).toBe('SubmitSuccess')
+          if (model.submission._tag === 'SubmitSuccess') {
+            expect(model.submission.confirmationText).toContain('Alice')
+          }
+        }),
+      )
+    })
+
+    test('FailedSubmitForm sets SubmitError', () => {
+      story(
+        update,
+        given(validModel),
+        message(Message.ClickedFormSubmit()),
+        Command.resolve(SubmitForm, Message.FailedSubmitForm()),
+        model(model => {
+          expect(model.submission._tag).toBe('SubmitError')
+        }),
+      )
+    })
+  })
+})

package/dist/templates/examples/form/src/styles.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/dist/templates/examples/form/src/vitest-setup.ts

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+
+setup()

package/dist/templates/examples/generative-art/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "generative-art-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-rc.109",
+    "@foldkit/ui": "workspace:*",
+    "@tailwindcss/vite": "^4.3.1",
+    "effect": "4.0.0-rc.109",
+    "foldkit": "workspace:*",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@foldkit/devtools": "workspace:*",
+    "@foldkit/vite-plugin": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "happy-dom": "^20.10.4",
+    "prettier": "^3.8.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  }
+}

package/dist/templates/examples/generative-art/src/command.ts

@@ -0,0 +1,109 @@
+import { Effect, Option, Random, Schema as S } from 'effect'
+import { Command } from 'foldkit'
+
+import {
+  CANVAS_HEIGHT,
+  CANVAS_WIDTH,
+  HUE_DRIFT_MAX,
+  HUE_DRIFT_MIN,
+  HUE_MAX,
+  HUE_MIN,
+  PARTICLE_LIFESPAN_MAX_MS,
+  PARTICLE_LIFESPAN_MIN_MS,
+  PARTICLE_SPEED_MAX,
+  PARTICLE_SPEED_MIN,
+  SETTLE_BAND_PX,
+} from './constant'
+import { Message } from './message'
+
+export const GenerateAmbientParticle = Command.define(
+  'GenerateAmbientParticle',
+  {
+    messages: [Message.CompletedGenerateAmbientParticle],
+    execute: Effect.gen(function* () {
+      const x = yield* Random.nextBetween(
+        SETTLE_BAND_PX,
+        CANVAS_WIDTH - SETTLE_BAND_PX,
+      )
+      const y = yield* Random.nextBetween(
+        SETTLE_BAND_PX,
+        CANVAS_HEIGHT - SETTLE_BAND_PX,
+      )
+      const baseHue = yield* Random.nextBetween(HUE_MIN, HUE_MAX)
+      const hueDriftPerSecond = yield* Random.nextBetween(
+        HUE_DRIFT_MIN,
+        HUE_DRIFT_MAX,
+      )
+      const lifespanMs = yield* Random.nextBetween(
+        PARTICLE_LIFESPAN_MIN_MS,
+        PARTICLE_LIFESPAN_MAX_MS,
+      )
+      const speed = yield* Random.nextBetween(
+        PARTICLE_SPEED_MIN,
+        PARTICLE_SPEED_MAX,
+      )
+      return Message.CompletedGenerateAmbientParticle({
+        x,
+        y,
+        baseHue,
+        hueDriftPerSecond,
+        lifespanMs,
+        speed,
+        initialAngle: Option.none(),
+        initialSpeedScale: 1,
+      })
+    }),
+  },
+)
+
+const BURST_POSITION_JITTER_PX = 6
+const BURST_LIFESPAN_FACTOR = 0.85
+const BURST_INITIAL_SPEED_SCALE_MIN = 1.4
+const BURST_INITIAL_SPEED_SCALE_MAX = 2.2
+const BURST_HUE_JITTER_DEGREES = 30
+
+export const GenerateBurstParticle = Command.define('GenerateBurstParticle', {
+  args: { x: S.Number, y: S.Number, angle: S.Number, hueAnchor: S.Number },
+  messages: [Message.CompletedGenerateBurstParticle],
+  execute: ({ x, y, angle, hueAnchor }) =>
+    Effect.gen(function* () {
+      const jitterX = yield* Random.nextBetween(
+        -BURST_POSITION_JITTER_PX,
+        BURST_POSITION_JITTER_PX,
+      )
+      const jitterY = yield* Random.nextBetween(
+        -BURST_POSITION_JITTER_PX,
+        BURST_POSITION_JITTER_PX,
+      )
+      const hueOffset = yield* Random.nextBetween(
+        -BURST_HUE_JITTER_DEGREES,
+        BURST_HUE_JITTER_DEGREES,
+      )
+      const hueDriftPerSecond = yield* Random.nextBetween(
+        HUE_DRIFT_MIN,
+        HUE_DRIFT_MAX,
+      )
+      const lifespanMs = yield* Random.nextBetween(
+        PARTICLE_LIFESPAN_MIN_MS * BURST_LIFESPAN_FACTOR,
+        PARTICLE_LIFESPAN_MAX_MS * BURST_LIFESPAN_FACTOR,
+      )
+      const speed = yield* Random.nextBetween(
+        PARTICLE_SPEED_MIN,
+        PARTICLE_SPEED_MAX,
+      )
+      const initialSpeedScale = yield* Random.nextBetween(
+        BURST_INITIAL_SPEED_SCALE_MIN,
+        BURST_INITIAL_SPEED_SCALE_MAX,
+      )
+      return Message.CompletedGenerateBurstParticle({
+        x: x + jitterX,
+        y: y + jitterY,
+        baseHue: (hueAnchor + hueOffset + HUE_MAX) % HUE_MAX,
+        hueDriftPerSecond,
+        lifespanMs,
+        speed,
+        initialAngle: Option.some(angle),
+        initialSpeedScale,
+      })
+    }),
+})

package/dist/templates/examples/generative-art/src/constant.ts

@@ -0,0 +1,68 @@
+export const CANVAS_WIDTH = 960
+export const CANVAS_HEIGHT = 600
+
+export const MS_PER_SECOND = 1000
+export const TWO_PI = Math.PI * 2
+export const HALF_PI = Math.PI / 2
+
+export const DELTA_SECONDS_CAP = 0.05
+
+export const TARGET_PARTICLE_COUNT = 55
+export const INITIAL_PARTICLE_COUNT = 45
+export const BURST_PARTICLE_COUNT = 22
+
+export const TRAIL_LENGTH = 36
+export const PARTICLE_LIFESPAN_MIN_MS = 4500
+export const PARTICLE_LIFESPAN_MAX_MS = 9000
+export const PARTICLE_SPEED_MIN = 60
+export const PARTICLE_SPEED_MAX = 140
+
+export const HUE_MIN = 0
+export const HUE_MAX = 360
+export const HUE_DRIFT_MIN = -45
+export const HUE_DRIFT_MAX = 45
+export const SATURATION_PERCENT = 90
+export const CORE_LIGHTNESS_PERCENT = 78
+export const GLOW_LIGHTNESS_PERCENT = 60
+export const CORE_ALPHA_BASE = 0.85
+export const GLOW_ALPHA_BASE = 0.18
+
+export const FADE_IN_MS = 350
+export const FADE_OUT_MS = 900
+
+export const NOISE_SPATIAL_SCALE = 0.0028
+export const NOISE_TIME_SCALE = 0.085
+export const NOISE_DRIFT_X = 12
+export const NOISE_DRIFT_Y = 7
+export const FLOW_OCTAVES = 3
+export const FLOW_PERSISTENCE = 0.5
+export const FLOW_LACUNARITY = 2.0
+
+export const MOUSE_INFLUENCE_RADIUS = 130
+export const MOUSE_VORTEX_WEIGHT = 1
+export const MOUSE_RADIAL_BIAS = -0.4
+
+export const BURST_BOOST_DURATION_MS = 700
+export const BURST_HUE_ANCHOR_DRIFT_DEG_PER_SECOND = 35
+export const SPAWN_PER_FRAME_MAX = 3
+
+export const CORE_LINE_WIDTH = 1.4
+export const GLOW_LINE_WIDTH = 5
+
+export const HEAD_RADIUS = 2.4
+export const HEAD_LIGHTNESS_PERCENT = 92
+export const HEAD_ALPHA = 0.95
+
+export const BACKGROUND_COLOR_TOP = '#04030a'
+export const VIGNETTE_ALPHA = 0.55
+
+export const SETTLE_BAND_PX = 80
+
+export const FLOW_STRENGTH_MIN = 0.25
+export const FLOW_STRENGTH_MAX = 3
+export const FLOW_STRENGTH_STEP = 0.05
+export const INITIAL_FLOW_STRENGTH = 1.4
+export const NOISE_SCALE_MIN_DIVISOR = 0.4
+export const NOISE_SCALE_MAX_DIVISOR = 2.4
+export const NOISE_SCALE_STEP = 0.05
+export const INITIAL_NOISE_SCALE = 1

package/dist/templates/examples/generative-art/src/entry.ts

@@ -0,0 +1,22 @@
+import { Runtime } from 'foldkit'
+
+import { Message, Model, init, subscriptions, update, view } from './main'
+
+const application = Runtime.makeApplication({
+  Model,
+  init,
+  update,
+  view,
+  subscriptions,
+  container: document.getElementById('root'),
+  devTools: {
+    Message,
+    excludeFromHistory: [
+      'TickedFrame',
+      'MovedPointer',
+      'CompletedGenerateAmbientParticle',
+    ],
+  },
+})
+
+Runtime.run(application)

package/dist/templates/examples/generative-art/src/main.ts

@@ -0,0 +1,59 @@
+import { Array, Option } from 'effect'
+import { Runtime } from 'foldkit'
+
+import { Slider } from '@foldkit/ui'
+
+import { GenerateAmbientParticle } from './command'
+import {
+  FLOW_STRENGTH_MAX,
+  FLOW_STRENGTH_MIN,
+  FLOW_STRENGTH_STEP,
+  INITIAL_FLOW_STRENGTH,
+  INITIAL_NOISE_SCALE,
+  INITIAL_PARTICLE_COUNT,
+  NOISE_SCALE_MAX_DIVISOR,
+  NOISE_SCALE_MIN_DIVISOR,
+  NOISE_SCALE_STEP,
+} from './constant'
+import { Message } from './message'
+import { Model } from './model'
+import { subscriptions } from './subscription'
+import { update } from './update'
+import { view } from './view'
+
+export const init: Runtime.ApplicationInit<Model, Message> = () => [
+  {
+    particles: [],
+    nextId: 0,
+    elapsedSeconds: 0,
+    maybeMousePosition: Option.none(),
+    isRunning: true,
+    flowStrength: Slider.snapAndClamp(
+      INITIAL_FLOW_STRENGTH,
+      FLOW_STRENGTH_MIN,
+      FLOW_STRENGTH_MAX,
+      FLOW_STRENGTH_STEP,
+    ),
+    flowStrengthSlider: Slider.init({
+      id: 'flow-strength-slider',
+      min: FLOW_STRENGTH_MIN,
+      max: FLOW_STRENGTH_MAX,
+      step: FLOW_STRENGTH_STEP,
+    }),
+    noiseScale: Slider.snapAndClamp(
+      INITIAL_NOISE_SCALE,
+      NOISE_SCALE_MIN_DIVISOR,
+      NOISE_SCALE_MAX_DIVISOR,
+      NOISE_SCALE_STEP,
+    ),
+    noiseScaleSlider: Slider.init({
+      id: 'noise-scale-slider',
+      min: NOISE_SCALE_MIN_DIVISOR,
+      max: NOISE_SCALE_MAX_DIVISOR,
+      step: NOISE_SCALE_STEP,
+    }),
+  },
+  Array.makeBy(INITIAL_PARTICLE_COUNT, () => GenerateAmbientParticle()),
+]
+
+export { Message, Model, subscriptions, update, view }

package/dist/templates/examples/generative-art/src/message.ts

@@ -0,0 +1,35 @@
+import { Schema as S } from 'effect'
+import { defineMessageUnion } from 'foldkit/message'
+
+import { Slider } from '@foldkit/ui'
+
+const generatedParticleFields = {
+  x: S.Number,
+  y: S.Number,
+  baseHue: S.Number,
+  hueDriftPerSecond: S.Number,
+  lifespanMs: S.Number,
+  speed: S.Number,
+  initialAngle: S.Option(S.Number),
+  initialSpeedScale: S.Number,
+}
+
+export const Message = defineMessageUnion({
+  TickedFrame: { deltaTimeMs: S.Number },
+  CompletedGenerateAmbientParticle: generatedParticleFields,
+  CompletedGenerateBurstParticle: generatedParticleFields,
+  PressedCanvas: {
+    x: S.Number,
+    y: S.Number,
+  },
+  MovedPointer: {
+    x: S.Number,
+    y: S.Number,
+  },
+  ClickedTogglePlay: {},
+  ClickedReset: {},
+  GotFlowStrengthSliderMessage: { message: Slider.Message },
+  GotNoiseScaleSliderMessage: { message: Slider.Message },
+})
+
+export type Message = typeof Message.Type

package/dist/templates/examples/generative-art/src/model.ts

@@ -0,0 +1,33 @@
+import { Schema as S } from 'effect'
+
+import { Slider } from '@foldkit/ui'
+
+export const Point = S.Struct({ x: S.Number, y: S.Number })
+export type Point = typeof Point.Type
+
+export const Particle = S.Struct({
+  id: S.Number,
+  trail: S.Array(Point),
+  baseHue: S.Number,
+  hueDriftPerSecond: S.Number,
+  ageMs: S.Number,
+  lifespanMs: S.Number,
+  speed: S.Number,
+  bornAtSeconds: S.Number,
+  initialAngle: S.Option(S.Number),
+  initialSpeedScale: S.Number,
+})
+export type Particle = typeof Particle.Type
+
+export const Model = S.Struct({
+  particles: S.Array(Particle),
+  nextId: S.Number,
+  elapsedSeconds: S.Number,
+  maybeMousePosition: S.Option(Point),
+  isRunning: S.Boolean,
+  flowStrength: S.Number,
+  flowStrengthSlider: Slider.Model,
+  noiseScale: S.Number,
+  noiseScaleSlider: Slider.Model,
+})
+export type Model = typeof Model.Type

package/dist/templates/examples/generative-art/src/noise.ts

@@ -0,0 +1,93 @@
+import { Array } from 'effect'
+
+const FADE_QUINTIC_COEFFICIENT = 6
+const FADE_QUARTIC_COEFFICIENT = 15
+const FADE_CUBIC_COEFFICIENT = 10
+
+const HASH_PRIME_X = 374761393
+const HASH_PRIME_Y = 668265263
+const HASH_PRIME_FINAL = 1274126177
+const HASH_SHIFT_INTERMIX = 13
+const HASH_SHIFT_AVALANCHE = 16
+const UINT32_RANGE = 0x100000000
+
+const TWO_PI = Math.PI * 2
+
+const fade = (t: number): number =>
+  t *
+  t *
+  t *
+  (t * (t * FADE_QUINTIC_COEFFICIENT - FADE_QUARTIC_COEFFICIENT) +
+    FADE_CUBIC_COEFFICIENT)
+
+const lerp = (a: number, b: number, t: number): number => a + (b - a) * t
+
+const gradientAngle = (ix: number, iy: number): number => {
+  const seeded = (ix * HASH_PRIME_X + iy * HASH_PRIME_Y) | 0
+  const mixed =
+    ((seeded ^ (seeded >>> HASH_SHIFT_INTERMIX)) * HASH_PRIME_FINAL) | 0
+  const avalanched = (mixed ^ (mixed >>> HASH_SHIFT_AVALANCHE)) >>> 0
+  return (avalanched / UINT32_RANGE) * TWO_PI
+}
+
+const dotGradient = (
+  ix: number,
+  iy: number,
+  dx: number,
+  dy: number,
+): number => {
+  const angle = gradientAngle(ix, iy)
+  return Math.cos(angle) * dx + Math.sin(angle) * dy
+}
+
+/**
+ * 2D Perlin noise. Returns a smooth pseudo-random value in roughly [-1, 1] for
+ * any real-valued `(x, y)`. The same input always produces the same output;
+ * neighbouring inputs produce smoothly varying outputs. Use small fractional
+ * scales (e.g. multiply coordinates by 0.005) to get broad organic gradients.
+ */
+export const perlin2 = (x: number, y: number): number => {
+  const x0 = Math.floor(x)
+  const y0 = Math.floor(y)
+  const x1 = x0 + 1
+  const y1 = y0 + 1
+  const fx = x - x0
+  const fy = y - y0
+  const u = fade(fx)
+  const v = fade(fy)
+  const n00 = dotGradient(x0, y0, fx, fy)
+  const n10 = dotGradient(x1, y0, fx - 1, fy)
+  const n01 = dotGradient(x0, y1, fx, fy - 1)
+  const n11 = dotGradient(x1, y1, fx - 1, fy - 1)
+  return lerp(lerp(n00, n10, u), lerp(n01, n11, u), v)
+}
+
+/**
+ * Sum several octaves of `perlin2` into fractal Brownian motion. Higher
+ * `octaves` add finer detail; `persistence` (0..1) controls how quickly
+ * higher octaves fade, and `lacunarity` (>1) controls how much frequency
+ * each octave adds. The result is normalised back to roughly [-1, 1].
+ */
+export const fractalNoise = (
+  x: number,
+  y: number,
+  octaves: number,
+  persistence: number,
+  lacunarity: number,
+): number => {
+  const seed = { total: 0, weight: 0, amplitude: 1, frequency: 1 }
+  const accumulated = Array.reduce(
+    Array.makeBy(octaves, octaveIndex => octaveIndex),
+    seed,
+    accumulator => ({
+      total:
+        accumulator.total +
+        perlin2(x * accumulator.frequency, y * accumulator.frequency) *
+          accumulator.amplitude,
+      weight: accumulator.weight + accumulator.amplitude,
+      amplitude: accumulator.amplitude * persistence,
+      frequency: accumulator.frequency * lacunarity,
+    }),
+  )
+  return accumulated.total / accumulated.weight
+}