@octolearn/training-ui 0.0.0-stage → 0.2.0

package/dist/types/styles/tokens.d.ts

@@ -0,0 +1,95 @@
+import { type CSSResult } from 'lit';
+export declare const tokens: {
+    fontBody: CSSResult;
+    fontHeadline: CSSResult;
+    primary: CSSResult;
+    /** Hover of the filled button (octolearn: .btn-octolearn-success:hover). */
+    primaryHover: CSSResult;
+    /** Orange-brown that meets 4.5:1 on white and the surface; used for the focus ring. */
+    primaryContrast: CSSResult;
+    onPrimary: CSSResult;
+    text: CSSResult;
+    textMuted: CSSResult;
+    placeholder: CSSResult;
+    /** Card behind the whole training (octolearn: .card-light.training-shell; .card-light's !important grey wins). */
+    card: CSSResult;
+    /** Question and stats panels (octolearn: --training-surface). */
+    surface: CSSResult;
+    /** Inputs, stat tiles, picture frame. */
+    field: CSSResult;
+    /** Frame around the picture of a picture riddle. */
+    frame: CSSResult;
+    fieldBorder: CSSResult;
+    folderName: CSSResult;
+    prompt: CSSResult;
+    statsTitle: CSSResult;
+    statLabel: CSSResult;
+    statValue: CSSResult;
+    choiceText: CSSResult;
+    choiceTop: CSSResult;
+    choiceBottom: CSSResult;
+    feedbackCard: CSSResult;
+    feedbackEyebrow: CSSResult;
+    feedbackLabel: CSSResult;
+    feedbackValue: CSSResult;
+    feedbackValueBg: CSSResult;
+    successAccent: CSSResult;
+    successBg: CSSResult;
+    successBadge: CSSResult;
+    successBadgeBg: CSSResult;
+    errorAccent: CSSResult;
+    errorBg: CSSResult;
+    errorBadge: CSSResult;
+    errorBadgeBg: CSSResult;
+    hintBg: CSSResult;
+    hintBorder: CSSResult;
+    hintText: CSSResult;
+    badgeBorder: CSSResult;
+    badgeText: CSSResult;
+    badgeBg: CSSResult;
+};
+/**
+ * `theme="dark"` on an element: darker surfaces, same accent. Set on :host, so the elements inside its shadow root inherit
+ * them; a page that sets the properties itself still wins.
+ */
+export declare const darkTheme: CSSResult;
+/**
+ * Design D (canvas "Octolearn Startseite – Redesign", Entwurf D): the question card for children. Same rule as above:
+ * read-only custom properties with D's values as fallback.
+ */
+export declare const d: {
+    ink: CSSResult;
+    inkSoft: CSSResult;
+    muted: CSSResult;
+    /** The uppercase format label ("DIKTAT"), 4.9:1 on white. */
+    label: CSSResult;
+    accent: CSSResult;
+    /** Text and icons on the accent ("Weiter", the speaker button); stays dark in the dark theme. */
+    onAccent: CSSResult;
+    cream: CSSResult;
+    /** Picture frame, Inkie's speech bubble in the side panel. */
+    creamLight: CSSResult;
+    /** Background of the side panel. */
+    panel: CSSResult;
+    paper: CSSResult;
+    paperLine: CSSResult;
+    line: CSSResult;
+    lineSoft: CSSResult;
+    openStar: CSSResult;
+    /** Choices that can no longer be picked, and the other tiles in the feedback. */
+    disabled: CSSResult;
+    /** Border of the picture frame. */
+    frameLine: CSSResult;
+    /** Dashed orange borders: the gap of a fragment, the reward box in the side panel. */
+    dash: CSSResult;
+    /** An empty slot of a tile answer. */
+    slot: CSSResult;
+    right: CSSResult;
+    rightBg: CSSResult;
+    rightText: CSSResult;
+    wrong: CSSResult;
+    wrongBg: CSSResult;
+    wrongText: CSSResult;
+    /** Behind the card in the overlay: the game, darkened. */
+    backdrop: CSSResult;
+};

package/dist/types/viewport.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Is the visible part of the page short, e.g. because a phone's on-screen keyboard covers half of it? CSS can't tell:
+ * iOS Safari and current Android Chrome shrink only the visual viewport when the keyboard opens, not the layout viewport
+ * that `vh` and media queries see. So the elements ask `window.visualViewport`; while it is short they switch to a
+ * compact layout (attribute `short`, see OctolearnElement).
+ */
+/** Below this height (CSS px, at zoom 1) the visible area counts as short. A phone with its keyboard open has ~300–400. */
+export declare const SHORT_VIEWPORT_PX = 520;
+type Listener = (short: boolean) => void;
+/** Watches `window.visualViewport` while anything listens. One per page: see getViewportWatcher(). */
+export declare class ViewportWatcher {
+    private readonly listeners;
+    private viewport;
+    private current;
+    /** The visible area is short right now (false without a visual viewport, e.g. old browsers). */
+    get short(): boolean;
+    /** Calls `listener` whenever `short` flips; returns the function that ends it. */
+    subscribe(listener: Listener): () => void;
+    private attach;
+    private detach;
+    private readonly onResize;
+    private static visualViewport;
+    /** Height times scale: zooming in with two fingers makes the visual viewport smaller, but the page isn't short. */
+    private static measure;
+}
+/** The watcher the elements use. One per page: there is one viewport. */
+export declare function getViewportWatcher(): ViewportWatcher;
+/**
+ * Scrolls `element` to the top of what the learner sees. On iOS the visual viewport is panned down inside the layout
+ * viewport while the keyboard is open (`offsetTop`); without the correction the element would sit above the visible part.
+ */
+export declare function revealAtTop(element: Element): void;
+/** The focus is inside `element` (also inside its shadow root and the shadow roots below). */
+export declare function hasFocusInside(element: Element): boolean;
+export {};

package/package.json

@@ -1,6 +1,67 @@
-{
-  "name": "@octolearn/training-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@octolearn/training-ui",
+  "version": "0.2.0",
+  "description": "Octolearn's training components (questions, multiple choice, answer feedback, today's stats) as framework-independent web components.",
+  "keywords": [
+    "octolearn",
+    "learning",
+    "spaced-repetition",
+    "web-components",
+    "lit",
+    "custom-elements"
+  ],
+  "homepage": "https://octolearn.de/docs",
+  "license": "MIT",
+  "sideEffects": [
+    "./dist/define.js",
+    "./dist/octolearn-training-ui.bundle.js"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./define": {
+      "types": "./dist/types/define.d.ts",
+      "default": "./dist/define.js"
+    },
+    "./core": {
+      "types": "./dist/types/core.d.ts",
+      "default": "./dist/core.js"
+    },
+    "./bundle": "./dist/octolearn-training-ui.bundle.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "THIRD-PARTY-NOTICES.md"
+  ],
+  "scripts": {
+    "build": "vite build && vite build --mode bundle && tsc -p tsconfig.build.json",
+    "dev": "vite",
+    "prepublishOnly": "npm run build && npm run test",
+    "test": "tsc --noEmit -p tsconfig.json && vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@fontsource-variable/montserrat": "5.3.0",
+    "@fontsource/nothing-you-could-do": "5.3.0",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "happy-dom": "20.14.5",
+    "typescript": "5.9.3",
+    "vite": "7.3.2",
+    "vitest": "5.0.3"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  }
+}