@bitflow/core 0.6.0 → 0.7.0

package/dist/theme.css

@@ -0,0 +1,451 @@
+/**
+ * bitflow design tokens.
+ *
+ * Replaces the Emotion-based `@openpatch/patches` theme. Values are taken from
+ * `../branding/colors/openpatch.gpl` for colour and reconstructed from the old
+ * patches `base` theme for radii/shadows/type, so the rewrite keeps the same
+ * rounded, soft-shadowed feel.
+ *
+ * Declared on `:root` *and* `:host` on purpose. Custom properties inherit
+ * through a shadow boundary, so `:root` alone is enough whenever the host page
+ * loads this file. The `:host` copy is what makes a single bit element work
+ * when it is dropped on a page that only loaded that one bundle.
+ */
+:root,
+:host {
+  /* Brand — branding/colors/openpatch.gpl */
+  --bitflow-color-primary: #017460; /* OpenPatch Green */
+  --bitflow-color-primary-dark: #004c45; /* Deep Forest */
+  --bitflow-color-primary-light: #b5e3d8; /* Fresh Mint */
+
+  --bitflow-color-neutral-900: #242428; /* Coal */
+  --bitflow-color-neutral-700: #3c3c3c; /* Charcoal */
+  --bitflow-color-neutral-400: #a4a4a4; /* Quicksilver */
+  --bitflow-color-neutral-200: #d6d6d6; /* Silver Charlice */
+  --bitflow-color-neutral-100: #f5f5f5; /* Whitesmoke */
+  --bitflow-color-black: #000000;
+  --bitflow-color-white: #ffffff;
+
+  /* Semantic feedback. Correct reuses the brand green so "right" and "action"
+     read as the same family; the rest are muted so feedback never shouts. */
+  --bitflow-color-correct: #017460;
+  --bitflow-color-correct-surface: #e6f2ef;
+  --bitflow-color-wrong: #a3282d;
+  --bitflow-color-wrong-surface: #f8eaea;
+  --bitflow-color-warning: #8a6100;
+  --bitflow-color-warning-surface: #fbf2df;
+  --bitflow-color-info: #1f5673;
+  --bitflow-color-info-surface: #e8f0f4;
+  --bitflow-color-unknown: var(--bitflow-color-neutral-400);
+  --bitflow-color-manual: #5a4b8a;
+  --bitflow-color-manual-surface: #eeebf6;
+
+  /* Surfaces */
+  --bitflow-color-background: var(--bitflow-color-neutral-100);
+  --bitflow-color-surface: var(--bitflow-color-white);
+  --bitflow-color-border: var(--bitflow-color-neutral-200);
+  --bitflow-color-text: var(--bitflow-color-neutral-900);
+  --bitflow-color-text-muted: var(--bitflow-color-neutral-700);
+
+  /* Type */
+  --bitflow-font-family: "Montserrat", system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --bitflow-font-family-mono: "Ubuntu Mono", Menlo, Consolas, monospace;
+  --bitflow-font-size-small: 14px;
+  --bitflow-font-size-standard: 16px;
+  --bitflow-font-size-large: 20px;
+  --bitflow-font-size-xlarge: 24px;
+  --bitflow-font-weight-standard: 400;
+  --bitflow-font-weight-medium: 500;
+  --bitflow-font-weight-bold: 700;
+  --bitflow-line-height-standard: 1.5;
+  --bitflow-line-height-tight: 1.25;
+
+  /* Space */
+  --bitflow-space-xxsmall: 4px;
+  --bitflow-space-xsmall: 8px;
+  --bitflow-space-small: 16px;
+  --bitflow-space-medium: 24px;
+  --bitflow-space-large: 32px;
+  --bitflow-space-xlarge: 48px;
+
+  /* Shape */
+  --bitflow-radius-small: 4px;
+  --bitflow-radius-standard: 8px;
+  --bitflow-radius-large: 12px;
+  --bitflow-radius-full: 9999px;
+  --bitflow-border-width: 2px;
+
+  --bitflow-shadow-standard: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --bitflow-shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --bitflow-shadow-outline: 0 0 0 3px rgba(1, 116, 96, 0.4);
+
+  /* Layout */
+  --bitflow-max-width-content: 720px;
+
+  /* Motion. Every animation in bitflow multiplies its duration by this, so the
+     reduced-motion override below switches the whole library off at once. */
+  --bitflow-motion-scale: 1;
+  --bitflow-duration-fast: calc(120ms * var(--bitflow-motion-scale));
+  --bitflow-duration-standard: calc(200ms * var(--bitflow-motion-scale));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  :host {
+    --bitflow-motion-scale: 0;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Primitives.
+ *
+ * The classes that replace the `@openpatch/patches` components the old code
+ * leaned on: `Box` (296 uses) becomes layout utilities, `Text`/`Heading` become
+ * semantic elements plus type classes, `AutoGrid` becomes one grid class, and
+ * `Input`/`Select`/`Checkbox`/`Alert`/`Card` become styled native markup.
+ *
+ * Plain classes rather than React components on purpose: bit packages must not
+ * depend on the React package (that would invert the dependency direction and
+ * break lazy loading), and a stylesheet is the one thing they can all share.
+ * ------------------------------------------------------------------------- */
+
+.bitflow-root {
+  font-family: var(--bitflow-font-family);
+  font-size: var(--bitflow-font-size-standard);
+  line-height: var(--bitflow-line-height-standard);
+  color: var(--bitflow-color-text);
+}
+
+/* Stated outright rather than the usual `box-sizing: inherit` trick. Inherited
+   values follow the flattened tree, and `<details>` slots its children through
+   a UA shadow root that is not a `.bitflow-root` descendant — so everything
+   inside a disclosure inherited the browser's `content-box` instead, and any
+   `width: 100%` control in there overflowed its panel by its own padding. */
+.bitflow-root,
+.bitflow-root *,
+.bitflow-root *::before,
+.bitflow-root *::after {
+  box-sizing: border-box;
+}
+
+/* Layout ------------------------------------------------------------------ */
+
+/* Vertical rhythm without margin collapsing surprises; the old `Box` with a
+   `space` prop did the same job one element at a time. */
+.bitflow-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bitflow-space-small);
+}
+
+.bitflow-stack-small {
+  gap: var(--bitflow-space-xsmall);
+}
+
+.bitflow-stack-large {
+  gap: var(--bitflow-space-medium);
+}
+
+.bitflow-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--bitflow-space-xsmall);
+}
+
+.bitflow-row-end {
+  justify-content: flex-end;
+}
+
+.bitflow-row-between {
+  justify-content: space-between;
+}
+
+/* The `AutoGrid` replacement: columns are as wide as they can be without
+   dropping below the minimum, so it reflows on a phone with no media query. */
+.bitflow-grid {
+  display: grid;
+  gap: var(--bitflow-space-small);
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(var(--bitflow-grid-min, 220px), 1fr)
+  );
+}
+
+.bitflow-content {
+  max-width: var(--bitflow-max-width-content);
+  margin-inline: auto;
+  width: 100%;
+}
+
+/* Type -------------------------------------------------------------------- */
+
+.bitflow-heading {
+  font-family: var(--bitflow-font-family);
+  font-weight: var(--bitflow-font-weight-bold);
+  line-height: var(--bitflow-line-height-tight);
+  margin: 0;
+}
+
+h1.bitflow-heading {
+  font-size: var(--bitflow-font-size-xlarge);
+}
+h2.bitflow-heading {
+  font-size: var(--bitflow-font-size-large);
+}
+h3.bitflow-heading,
+h4.bitflow-heading,
+h5.bitflow-heading,
+h6.bitflow-heading {
+  font-size: var(--bitflow-font-size-standard);
+}
+
+.bitflow-text {
+  margin: 0;
+}
+
+.bitflow-text-muted {
+  color: var(--bitflow-color-text-muted);
+  font-size: var(--bitflow-font-size-small);
+}
+
+.bitflow-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Surfaces ---------------------------------------------------------------- */
+
+.bitflow-card {
+  background: var(--bitflow-color-surface);
+  border: 1px solid var(--bitflow-color-border);
+  border-radius: var(--bitflow-radius-standard);
+  box-shadow: var(--bitflow-shadow-standard);
+  padding: var(--bitflow-space-medium);
+}
+
+.bitflow-alert {
+  display: flex;
+  gap: var(--bitflow-space-xsmall);
+  align-items: flex-start;
+  padding: var(--bitflow-space-small);
+  border-radius: var(--bitflow-radius-standard);
+  border-left: 4px solid var(--bitflow-alert-accent, var(--bitflow-color-info));
+  background: var(--bitflow-alert-surface, var(--bitflow-color-info-surface));
+  color: var(--bitflow-color-text);
+}
+
+/* `display: flex` above beats the `hidden` attribute's UA `display: none`, so
+   an alert kept in the markup and revealed on demand — which is how every page
+   here does it — renders as an empty coloured strip until it has something to
+   say. */
+.bitflow-alert[hidden] {
+  display: none;
+}
+
+.bitflow-alert-success {
+  --bitflow-alert-accent: var(--bitflow-color-correct);
+  --bitflow-alert-surface: var(--bitflow-color-correct-surface);
+}
+.bitflow-alert-error {
+  --bitflow-alert-accent: var(--bitflow-color-wrong);
+  --bitflow-alert-surface: var(--bitflow-color-wrong-surface);
+}
+.bitflow-alert-warning {
+  --bitflow-alert-accent: var(--bitflow-color-warning);
+  --bitflow-alert-surface: var(--bitflow-color-warning-surface);
+}
+.bitflow-alert-info {
+  --bitflow-alert-accent: var(--bitflow-color-info);
+  --bitflow-alert-surface: var(--bitflow-color-info-surface);
+}
+
+/* Controls ---------------------------------------------------------------- */
+
+.bitflow-button {
+  font: inherit;
+  font-weight: var(--bitflow-font-weight-medium);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bitflow-space-xxsmall);
+  padding: var(--bitflow-space-xsmall) var(--bitflow-space-small);
+  min-height: 44px; /* comfortable touch target */
+  border: var(--bitflow-border-width) solid transparent;
+  border-radius: var(--bitflow-radius-standard);
+  background: var(--bitflow-color-primary);
+  color: var(--bitflow-color-white);
+  cursor: pointer;
+  transition: background-color var(--bitflow-duration-fast) ease-out;
+}
+
+.bitflow-button:hover:not(:disabled) {
+  background: var(--bitflow-color-primary-dark);
+}
+
+.bitflow-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.bitflow-button-secondary {
+  background: transparent;
+  color: var(--bitflow-color-primary-dark);
+  border-color: var(--bitflow-color-border);
+}
+
+.bitflow-button-secondary:hover:not(:disabled) {
+  background: var(--bitflow-color-neutral-100);
+}
+
+.bitflow-button-quiet {
+  background: transparent;
+  color: var(--bitflow-color-text-muted);
+  border-color: transparent;
+}
+
+.bitflow-button-quiet:hover:not(:disabled) {
+  background: var(--bitflow-color-neutral-100);
+  color: var(--bitflow-color-text);
+}
+
+.bitflow-input,
+.bitflow-select,
+.bitflow-textarea {
+  font: inherit;
+  width: 100%;
+  padding: var(--bitflow-space-xsmall);
+  min-height: 44px;
+  color: var(--bitflow-color-text);
+  background: var(--bitflow-color-surface);
+  border: var(--bitflow-border-width) solid var(--bitflow-color-border);
+  border-radius: var(--bitflow-radius-standard);
+}
+
+.bitflow-textarea {
+  min-height: 6em;
+  resize: vertical;
+}
+
+.bitflow-input:hover,
+.bitflow-select:hover,
+.bitflow-textarea:hover {
+  border-color: var(--bitflow-color-neutral-400);
+}
+
+.bitflow-input[aria-invalid="true"],
+.bitflow-select[aria-invalid="true"],
+.bitflow-textarea[aria-invalid="true"] {
+  border-color: var(--bitflow-color-wrong);
+}
+
+/* One focus rule for everything, so the keyboard path is always visible. Not
+   `:focus` — a mouse click on a button should not draw a ring. */
+.bitflow-root :focus-visible {
+  outline: none;
+  box-shadow: var(--bitflow-shadow-outline);
+  border-radius: var(--bitflow-radius-small);
+}
+
+/* A clickable label wrapping a native radio/checkbox: the whole row is the
+   target, and the native control keeps its own semantics and keyboard model. */
+.bitflow-option {
+  display: flex;
+  /* Centred rather than top-aligned: nearly every choice is one line, and
+     top-aligning a control against a text block leaves it visibly high. */
+  align-items: center;
+  gap: var(--bitflow-space-xsmall);
+  padding: var(--bitflow-space-xsmall) var(--bitflow-space-small);
+  border: var(--bitflow-border-width) solid var(--bitflow-color-border);
+  border-radius: var(--bitflow-radius-standard);
+  background: var(--bitflow-color-surface);
+  cursor: pointer;
+  transition: border-color var(--bitflow-duration-fast) ease-out;
+}
+
+.bitflow-option:hover {
+  border-color: var(--bitflow-color-neutral-400);
+}
+
+.bitflow-option:has(:checked) {
+  border-color: var(--bitflow-color-primary);
+  background: var(--bitflow-color-correct-surface);
+}
+
+.bitflow-option:has(:disabled) {
+  cursor: default;
+  opacity: 0.75;
+}
+
+.bitflow-option input {
+  margin: 0;
+  width: 1.15em;
+  height: 1.15em;
+  flex-shrink: 0;
+  accent-color: var(--bitflow-color-primary);
+}
+
+/* Fields ------------------------------------------------------------------ */
+
+.bitflow-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bitflow-space-xxsmall);
+}
+
+.bitflow-label {
+  font-weight: var(--bitflow-font-weight-medium);
+}
+
+/* The teacher-facing hint under a field label; progressive disclosure means
+   most authoring settings carry one rather than a manual page. */
+.bitflow-hint {
+  color: var(--bitflow-color-text-muted);
+  font-size: var(--bitflow-font-size-small);
+}
+
+.bitflow-field-error {
+  color: var(--bitflow-color-wrong);
+  font-size: var(--bitflow-font-size-small);
+}
+
+/* Result states ----------------------------------------------------------- */
+
+.bitflow-state {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bitflow-space-xxsmall);
+  padding: var(--bitflow-space-xxsmall) var(--bitflow-space-xsmall);
+  border-radius: var(--bitflow-radius-full);
+  font-size: var(--bitflow-font-size-small);
+  font-weight: var(--bitflow-font-weight-medium);
+  background: var(--bitflow-state-surface, var(--bitflow-color-neutral-100));
+  color: var(--bitflow-state-color, var(--bitflow-color-text-muted));
+}
+
+.bitflow-state-correct {
+  --bitflow-state-color: var(--bitflow-color-correct);
+  --bitflow-state-surface: var(--bitflow-color-correct-surface);
+}
+.bitflow-state-wrong {
+  --bitflow-state-color: var(--bitflow-color-wrong);
+  --bitflow-state-surface: var(--bitflow-color-wrong-surface);
+}
+.bitflow-state-manual {
+  --bitflow-state-color: var(--bitflow-color-manual);
+  --bitflow-state-surface: var(--bitflow-color-manual-surface);
+}
+.bitflow-state-unknown {
+  --bitflow-state-color: var(--bitflow-color-text-muted);
+  --bitflow-state-surface: var(--bitflow-color-neutral-100);
+}

package/dist/validate.d.ts

@@ -0,0 +1,19 @@
+import { type Diagnostic, type Result } from "./errors";
+import { type BitflowDocument } from "./schema";
+export type ValidationResult = {
+    valid: boolean;
+    diagnostics: Diagnostic[];
+};
+/**
+ * Envelope-level parse. Bit `data` is *not* checked here — a host that has not
+ * loaded a bit package must still be able to read, edit and re-save a document
+ * containing it. `validateFlow` does the bit-aware pass.
+ */
+export declare const parseFlow: (input: unknown) => Result<BitflowDocument>;
+/**
+ * The authoring-time check behind `<bitflow-flow-editor>`'s `validate()`.
+ *
+ * Every diagnostic carries the path of the field at fault so the editor can
+ * put the message next to the input the teacher has to fix.
+ */
+export declare const validateFlow: (doc: BitflowDocument) => ValidationResult;

package/dist/validateCondition.d.ts

@@ -0,0 +1,13 @@
+import type { Diagnostic } from "./errors";
+import { type BitEdge, type BitflowDocument } from "./schema";
+/**
+ * Checks a branch for the mistakes that make it silently never fire.
+ *
+ * A condition that is always false is the worst kind of authoring error: the
+ * flow still runs, the learner still gets somewhere, and the teacher never
+ * finds out that the branch they drew does nothing. Everything reported here
+ * is a condition that cannot behave the way it was written.
+ */
+export declare const validateCondition: (doc: BitflowDocument, edge: BitEdge, path: string) => Diagnostic[];
+/** Exported for the editor, which shows a branch's reachable tasks. */
+export declare const tasksBefore: (doc: BitflowDocument, nodeId: string) => string[];

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@bitflow/core",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "author": "Mike Barkmin",
+  "description": "Schema, flow engine, attempt runtime and bit registry for bitflow. Pure TypeScript, no UI.",
   "homepage": "https://github.com/openpatch/bitflow#readme",
   "license": "MIT",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.mjs",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "typings": "dist/index.d.ts",
-  "sideEffects": false,
   "exports": {
     ".": {
-      "require": "./dist/index.cjs.js",
-      "default": "./dist/index.esm.mjs"
-    }
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "LICENSE"
   ],
   "publishConfig": {
     "access": "public"
@@ -24,39 +26,28 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openpatch/bitflow.git",
-    "directory": "packages/core"
+    "directory": "packages/bitflow-core"
   },
   "bugs": {
     "url": "https://github.com/openpatch/bitflow/issues"
   },
-  "devDependencies": {
-    "@babel/core": "7.18.2",
-    "@emotion/cache": "11.7.1",
-    "@emotion/react": "11.9.0",
-    "@emotion/styled": "11.8.1",
-    "@openpatch/patches": "6.0.1",
-    "@types/react": "^18.0.12",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-hook-form": "^7.31.3",
-    "zod": "3.17.3"
+  "dependencies": {
+    "zod": "^4.4.3"
   },
-  "peerDependencies": {
-    "@emotion/cache": "11.x",
-    "@emotion/react": "11.x",
-    "@emotion/styled": "11.x",
-    "@openpatch/patches": "6.x",
-    "react": "18.x",
-    "react-dom": "18.x",
-    "zod": "3.x"
+  "devDependencies": {
+    "@types/node": "^26.2.0",
+    "rimraf": "^6.1.3",
+    "typescript": "^7.0.2",
+    "vite": "^7.3.6",
+    "vitest": "^4.1.10"
   },
   "scripts": {
-    "prebuild": "rimraf dist",
     "version": "pnpm build",
     "lint": "tsc --noEmit",
-    "test": "jest --env=jsdom --passWithNoTests",
-    "build": "pnpm build:pkg && pnpm build:types",
-    "build:pkg": "node ../../scripts/build.mjs",
-    "build:types": "tsc --project tsconfig.build.json --declaration --emitDeclarationOnly"
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "rimraf dist && vite build && pnpm build:types",
+    "build:types": "tsc --project tsconfig.build.json --declaration --emitDeclarationOnly",
+    "dev": "vite build --watch"
   }
 }

package/README.md

@@ -1,9 +0,0 @@
-# @bitflow/core
-
-## Installation
-
-```sh
-yarn add @bitflow/core
-# or
-npm i @bitflow/core
-```