speechflow 1.3.2 → 1.4.0

package/speechflow-ui-db/src/app-icon.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
+  <!-- Generator: Adobe Illustrator 29.6.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 207)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+
+      .st1 {
+        fill: #222;
+      }
+    </style>
+  </defs>
+  <rect class="st1" x="-.2" y="0" width="512.6" height="512.1" rx="71.9" ry="71.9"/>
+  <g id="Icon">
+    <path class="st0" d="M201.8,235v35.2c0,10.5,4.2,20.6,11.6,28,7.4,7.4,17.5,11.6,28,11.6h35.2c10.5,0,20.6-4.2,28-11.6,7.4-7.4,11.6-17.5,11.6-28v-35.2c0-10.5-4.2-20.6-11.6-28-7.4-7.4-17.5-11.6-28-11.6h-35.2c-10.5,0-20.6,4.2-28,11.6s-11.6,17.5-11.6,28Z"/>
+    <path class="st0" d="M69.8,103v35.2c0,10.5,4.2,20.6,11.6,28,7.4,7.4,17.5,11.6,28,11.6h35.2c10.5,0,20.6-4.2,28-11.6,7.4-7.4,11.6-17.5,11.6-28v-35.2c0-10.5-4.2-20.6-11.6-28-7.4-7.4-17.5-11.6-28-11.6h-35.2c-10.5,0-20.6,4.2-28,11.6s-11.6,17.5-11.6,28Z"/>
+    <path class="st0" d="M333.7,367v35.2c0,10.5,4.2,20.6,11.6,28,7.4,7.4,17.5,11.6,28,11.6h35.2c10.5,0,20.6-4.2,28-11.6,7.4-7.4,11.6-17.5,11.6-28v-35.2c0-10.5-4.2-20.6-11.6-28-7.4-7.4-17.5-11.6-28-11.6h-35.2c-10.5,0-20.6,4.2-28,11.6-7.4,7.4-11.6,17.5-11.6,28Z"/>
+    <path class="st0" d="M171,133.8h228.8c5.8,0,11.4,2.3,15.6,6.4,4.1,4.1,6.4,9.7,6.4,15.6v61.6c0,5.8-2.3,11.4-6.4,15.6-4.1,4.1-9.7,6.4-15.6,6.4h-52.8c-7.3,0-13.2,5.9-13.2,13.2s5.9,13.2,13.2,13.2h52.8c12.8,0,25.1-5.1,34.2-14.2,9.1-9.1,14.2-21.4,14.2-34.2v-61.6c0-12.8-5.1-25.1-14.2-34.2-9.1-9.1-21.4-14.2-34.2-14.2h-228.8c-7.3,0-13.2,5.9-13.2,13.2s5.9,13.2,13.2,13.2Z"/>
+    <path class="st0" d="M276.5,371.4H118.2c-5.8,0-11.4-2.3-15.6-6.4-4.1-4.1-6.4-9.7-6.4-15.6v-61.6c0-5.8,2.3-11.4,6.4-15.6,4.1-4.1,9.7-6.4,15.6-6.4h96.8c7.3,0,13.2-5.9,13.2-13.2s-5.9-13.2-13.2-13.2h-96.8c-12.8,0-25.1,5.1-34.2,14.2-9.1,9.1-14.2,21.4-14.2,34.2v61.6c0,12.8,5.1,25.1,14.2,34.2,9.1,9.1,21.4,14.2,34.2,14.2h158.4c7.3,0,13.2-5.9,13.2-13.2s-5.9-13.2-13.2-13.2Z"/>
+    <path class="st0" d="M391.5,278.5l-25.9-25.9,25.9-25.9c5.2-5.1,5.2-13.5,0-18.7-5.1-5.2-13.5-5.2-18.7,0l-35.2,35.2c-5.2,5.2-5.2,13.5,0,18.7l35.2,35.2c5.1,5.2,13.5,5.2,18.7,0,5.2-5.1,5.2-13.5,0-18.7h0Z"/>
+    <path class="st0" d="M268.3,429.1l35.2-35.2c5.2-5.2,5.2-13.5,0-18.7l-35.2-35.2c-5.1-5.2-13.5-5.2-18.7,0-5.2,5.1-5.2,13.5,0,18.7l25.9,25.9-25.9,25.9c-5.2,5.1-5.2,13.5,0,18.7,5.1,5.2,13.5,5.2,18.7,0h0Z"/>
+  </g>
+</svg>

package/speechflow-ui-db/src/app.styl

@@ -0,0 +1,64 @@
+/*
+**  SpeechFlow - Speech Processing Flow Graph
+**  Copyright (c) 2024-2025 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Licensed under GPL 3.0 <https://spdx.org/licenses/GPL-3.0-only>
+*/
+
+:root
+    --color-std-bg-0: #000000
+    --color-std-bg-1: #1a1a1a
+    --color-std-bg-2: #242424
+    --color-std-bg-3: #2e2e2e
+    --color-std-bg-4: #383838
+    --color-std-bg-5: #424242
+
+    --color-std-fg-0: #606060
+    --color-std-fg-1: #808080
+    --color-std-fg-2: #a0a0a0
+    --color-std-fg-3: #c0c0c0
+    --color-std-fg-4: #e0e0e0
+    --color-std-fg-5: #ffffff
+
+    --color-acc-bg-1: #114477
+    --color-acc-bg-2: #225588
+    --color-acc-bg-3: #336699
+    --color-acc-bg-4: #4477aa
+    --color-acc-bg-5: #5588bb
+
+    --color-acc-fg-0: #6090c0
+    --color-acc-fg-1: #80b0e0
+    --color-acc-fg-2: #88b8e8
+    --color-acc-fg-3: #90c0f0
+    --color-acc-fg-4: #98c8f8
+    --color-acc-fg-5: #a0d0ff
+
+    --color-sig-bg-1: #904800
+    --color-sig-bg-2: #a05810
+    --color-sig-bg-3: #b06820
+    --color-sig-bg-4: #c07830
+    --color-sig-bg-5: #d08840
+
+    --color-sig-fg-0: #c0b090
+    --color-sig-fg-1: #e0d0b0
+    --color-sig-fg-2: #e8d8b8
+    --color-sig-fg-3: #f0e0c0
+    --color-sig-fg-4: #f8e8c8
+    --color-sig-fg-5: #fff0d0
+
+    --font-family:    "TypoPRO Source Sans Pro", sans-serif
+
+
+html,
+body
+    margin: 0
+    padding: 0
+    width: 100vw
+    height: 100vh
+    overflow: hidden
+    color: var(--color-std-fg-3)
+    background-color: var(--color-std-bg-0)
+    font-family: var(--font-family)
+    font-weight: normal
+    user-select: none
+    font-size: 11pt
+

package/speechflow-ui-db/src/app.vue

@@ -0,0 +1,221 @@
+<!--
+**
+**  SpeechFlow - Speech Processing Flow Graph
+**  Copyright (c) 2024-2025 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Licensed under GPL 3.0 <https://spdx.org/licenses/GPL-3.0-only>
+**
+-->
+
+<template>
+    <div class="app">
+        <div class="dashboard">
+            <div v-bind:key="block.id" v-for="block of info" class="block">
+                <div v-if="block.type === 'audio'" class="audio-col">
+                    <div class="audio-meter" v-bind:style="{
+                        height: (100 * (1 - ((block.value as number) / - 60.0))) + '%'
+                    }">
+                        <div class="audio-value">
+                            {{ (block.value as number).toFixed(1) }}
+                        </div>
+                    </div>
+                    <div class="audio-name">
+                        {{ block.name }}
+                    </div>
+                </div>
+                <div ref="textCol"
+                    v-if="block.type === 'text'"
+                    class="text-col"
+                    v-bind:class="{ intermediate: block.lastKind === 'intermediate' }">
+                    <div v-bind:key="value"
+                        v-for="value of block.value"
+                        class="text-value">
+                        {{ value as unknown as string }}
+                    </div>
+                    <div class="text-name">
+                        {{ block.name }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="stylus">
+.app
+    position: relative
+    width:   100vw
+    height:  100vh
+    margin:  0
+    padding: 0
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+    .dashboard
+        height: 100%
+        width: 100%
+        display: flex
+        flex-direction: row
+        align-items: center
+        justify-content: center
+        .block
+            height: calc(100% - 0.5vw)
+            margin-right: 0.5vw
+            &:has(.audio-col)
+                width: 10vw
+            &:has(.text-col)
+                flex-grow: 1
+                flex-shrink: 1
+                flex-basis: 0
+            .audio-col
+                width: 10vw
+                height: 100vh
+                display: flex
+                flex-direction: column
+                align-items: flex-end
+                justify-content: flex-end
+                background-color: var(--color-acc-bg-3)
+                .audio-meter
+                    width: 100%
+                    display: flex
+                    flex-direction: column
+                    align-items: flex-end
+                    justify-content: flex-end
+                    background-color: var(--color-acc-fg-3)
+                    .audio-value
+                        width: 100%
+                        font-size: 3vw
+                        text-align: center
+                        color: var(--color-std-bg-0)
+                .audio-name
+                    width: 100%
+                    text-align: center
+                    background-color: var(--color-acc-bg-1)
+                    color: var(--color-acc-fg-3)
+                    font-size: 2vw
+            .text-col
+                width: 100%
+                height: 100vh
+                overflow-x: hidden
+                overflow-y: scroll
+                display: flex
+                flex-direction: column
+                align-items: flex-end
+                justify-content: flex-end
+                .text-value
+                    width: calc(100% - 2 * 1.0vw)
+                    background-color: var(--color-acc-bg-3)
+                    color: var(--color-acc-fg-3)
+                    border-radius: 1vw
+                    font-size: 1.5vw
+                    padding: 0.5vw 1.0vw
+                    margin-bottom: 0.5vw
+                    overflow-wrap: break-word
+                .text-name
+                    width: 100%
+                    text-align: center
+                    background-color: var(--color-acc-bg-1)
+                    color: var(--color-acc-fg-3)
+                    font-size: 2vw
+            .text-col.intermediate
+                .text-value:nth-last-child(2)
+                    background-color: var(--color-sig-bg-3)
+                    color: var(--color-sig-fg-3)
+</style>
+
+<script setup lang="ts">
+import { defineComponent }   from "vue"
+import moment                from "moment"
+import ReconnectingWebSocket from "@opensumi/reconnecting-websocket"
+import axios                 from "axios"
+</script>
+
+<script lang="ts">
+type Info = {
+    type:     string,
+    id:       string,
+    name:     string,
+    value:    number | string[],
+    lastKind: string
+}
+export default defineComponent({
+    name: "app",
+    components: {
+    },
+    data: () => ({
+        info: [] as Info[]
+    }),
+    created () {
+    },
+    async mounted () {
+        /*  determine API URL  */
+        let url = document.location.href
+        url = url.replace(/#.+$/, "")
+        url = url.replace(/\/[^/]*$/, "")
+        url = url + "/api"
+
+        /*  load dashboard configuration  */
+        const response = await axios.get(`${url}/dashboard`)
+        for (const block of response.data) {
+            if (block.type === "audio")
+                this.info.push({ type: block.type, id: block.id, name: block.name, value: 0, lastKind: "" })
+            else if (block.type === "text")
+                this.info.push({ type: block.type, id: block.id, name: block.name, value: [], lastKind: "" })
+        }
+
+        /*  connect to WebSocket API for receiving dashboard information  */
+        const ws = new ReconnectingWebSocket(url, [], {
+            reconnectionDelayGrowFactor: 1.3,
+            maxReconnectionDelay:        4000,
+            minReconnectionDelay:        1000,
+            connectionTimeout:           4000,
+            minUptime:                   5000
+        })
+        ws.addEventListener("open", (ev) => {
+        })
+        ws.addEventListener("message", (ev) => {
+            const event = JSON.parse(ev.data)
+            if (event.response !== "DASHBOARD")
+                return
+            const [ type, id, kind, value ] = event.args
+            for (const block of this.info) {
+                if (block.type === type && block.id === id) {
+                    if (block.type === "audio") {
+                        if (kind === "final")
+                            block.value = value
+                    }
+                    else {
+                        if (block.lastKind === "intermediate") {
+                            const arr = block.value as string[]
+                            arr[arr.length - 1] = value
+                        }
+                        else {
+                            const arr = block.value as string[]
+                            arr.push(value)
+                            block.value = arr.slice(-20)
+                        }
+                        block.lastKind = kind
+                        this.$nextTick(() => {
+                            for (const textCol of this.$refs.textCol as HTMLDivElement[])
+                                textCol.scrollTop = textCol.scrollHeight
+                        })
+                    }
+                }
+            }
+        })
+    },
+    methods: {
+        log (level: string, msg: string, data: { [ key: string ]: any } | null = null) {
+            const timestamp = moment().format("YYYY-MM-DD hh:mm:ss.SSS")
+            let output = `${timestamp} [${level}]: ${msg}`
+            if (data !== null)
+                output += ` (${Object.keys(data)
+                    .map((key) => key + ": " + JSON.stringify(data[key]))
+                    .join(", ")
+                })`
+            console.log(output)
+        }
+    }
+})
+</script>
+

package/speechflow-ui-db/src/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+**
+**  SpeechFlow - Speech Processing Flow Graph
+**  Copyright (c) 2024-2025 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Licensed under GPL 3.0 <https://spdx.org/licenses/GPL-3.0-only>
+**
+-->
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, minimum-scale=0.1, initial-scale=1.0, maximum-scale=10, user-scalable=no" />
+        <link rel="icon" type="image/svg+xml" href="./app-icon.svg" />
+        <title>SpeechFlow</title>
+        <script type="module" src="index.ts"></script>
+    </head>
+    <body>
+        <div id="app">
+            <app></app>
+        </div>
+    </body>
+</html>

package/speechflow-ui-db/src/index.ts

@@ -0,0 +1,26 @@
+/*
+**  SpeechFlow - Speech Processing Flow Graph
+**  Copyright (c) 2024-2025 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Licensed under GPL 3.0 <https://spdx.org/licenses/GPL-3.0-only>
+*/
+
+/*  external dependencies  */
+import * as Vue from "vue"
+import               "typopro-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro-Regular.css"
+import               "typopro-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro-Bold.css"
+import               "@fortawesome/fontawesome-free/js/all.min.js"
+import               "@fortawesome/fontawesome-free/css/all.min.css"
+
+/*  internal dependencies  */
+import App      from "./app.vue"
+import               "./app.styl"
+
+document.addEventListener("DOMContentLoaded", (ev: Event) => {
+    (async () => {
+        const app = Vue.createApp(App)
+        app.mount("#app")
+    })().catch((err) => {
+        console.error(`app: ERROR: top-level: ${err}`)
+    })
+})
+

package/{dst/speechflow.d.ts → speechflow-ui-db/src/lib.d.ts}

@@ -1,7 +1,9 @@
-#!/usr/bin/env node
-/*!
+/*
 **  SpeechFlow - Speech Processing Flow Graph
 **  Copyright (c) 2024-2025 Dr. Ralf S. Engelschall <rse@engelschall.com>
 **  Licensed under GPL 3.0 <https://spdx.org/licenses/GPL-3.0-only>
 */
-export {};
+
+declare global {}
+export {}
+

package/speechflow-ui-db/src/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "../etc/tsc-client.json"
+}

package/speechflow-ui-st/etc/eslint.mjs

@@ -0,0 +1,106 @@
+/*
+**  SpeechFlow - Speech Processing Flow Graph
+**  Copyright (c) 2024-2025 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Licensed under GPL 3.0 <https://spdx.org/licenses/GPL-3.0-only>
+*/
+
+import pluginJs      from "@eslint/js"
+import pluginStd     from "neostandard"
+import pluginN       from "eslint-plugin-n"
+import pluginImport  from "eslint-plugin-import"
+import pluginPromise from "eslint-plugin-promise"
+import pluginVue     from "eslint-plugin-vue"
+import pluginTS      from "typescript-eslint"
+import globals       from "globals"
+import parserTS      from "@typescript-eslint/parser"
+import parserVue     from "vue-eslint-parser"
+
+export default [
+    pluginJs.configs.recommended,
+    ...pluginTS.configs.strict,
+    ...pluginTS.configs.stylistic,
+    ...pluginStd({
+        ignores: pluginStd.resolveIgnoresFromGitignore()
+    }),
+    ...pluginVue.configs["flat/recommended"],
+    {
+        plugins: {
+            "n":       pluginN,
+            "import":  pluginImport,
+            "promise": pluginPromise
+        },
+        files:   [ "**/*.{vue,ts}" ],
+        ignores: [ "dst/" ],
+        languageOptions: {
+            ecmaVersion: 2022,
+            sourceType:  "module",
+            parser: parserVue,
+            parserOptions: {
+                parser: parserTS,
+                extraFileExtensions: [ ".vue" ],
+                ecmaFeatures: {
+                    jsx: false
+                }
+            },
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+                ...globals.commonjs
+            }
+        },
+        rules: {
+            "curly":                                              "off",
+            "require-atomic-updates":                             "off",
+            "dot-notation":                                       "off",
+            "no-labels":                                          "off",
+            "no-useless-constructor":                             "off",
+
+            "@stylistic/indent":                                  [ "error", 4, { SwitchCase: 1 } ],
+            "@stylistic/linebreak-style":                         [ "error", "unix" ],
+            "@stylistic/semi":                                    [ "error", "never" ],
+            "@stylistic/operator-linebreak":                      [ "error", "after", { overrides: { "&&": "before", "||": "before", ":": "after" } } ],
+            "@stylistic/brace-style":                             [ "error", "stroustrup", { allowSingleLine: true } ],
+            "@stylistic/quotes":                                  [ "error", "double" ],
+
+            "@stylistic/no-multi-spaces":                         "off",
+            "@stylistic/no-multi-spaces":                         "off",
+            "@stylistic/no-multiple-empty-lines":                 "off",
+            "@stylistic/key-spacing":                             "off",
+            "@stylistic/object-property-newline":                 "off",
+            "@stylistic/space-in-parens":                         "off",
+            "@stylistic/array-bracket-spacing":                   "off",
+            "@stylistic/lines-between-class-members":             "off",
+            "@stylistic/multiline-ternary":                       "off",
+            "@stylistic/quote-props":                             "off",
+
+            "vue/html-indent":                                    "off",
+            "vue/v-bind-style":                                   [ "error", "longform" ],
+            "vue/max-attributes-per-line":                        "off",
+            "vue/html-self-closing":                              "off",
+            "vue/no-multi-spaces":                                "off",
+            "vue/html-closing-bracket-newline":                   "off",
+            "vue/html-closing-bracket-spacing":                   "off",
+            "vue/singleline-html-element-content-newline":        "off",
+            "vue/no-v-html":                                      "off",
+            "vue/v-on-style":                                     "off",
+            "vue/component-tags-order":                           "off",
+            "vue/first-attribute-linebreak":                      "off",
+            "vue/attributes-order":                               "off",
+            "vue/component-definition-name-casing":               "off",
+            "vue/block-order":                                    "off",
+
+            "@typescript-eslint/no-empty-function":               "off",
+            "@typescript-eslint/no-explicit-any":                 "off",
+            "@typescript-eslint/no-unused-vars":                  "off",
+            "@typescript-eslint/ban-ts-comment":                  "off",
+            "@typescript-eslint/no-this-alias":                   "off",
+            "@typescript-eslint/no-non-null-assertion":           "off",
+            "@typescript-eslint/consistent-type-definitions":     "off",
+            "@typescript-eslint/array-type":                      "off",
+            "@typescript-eslint/no-extraneous-class":             "off",
+            "@typescript-eslint/consistent-indexed-object-style": "off",
+            "@typescript-eslint/adjacent-overload-signatures":    "off"
+        }
+    }
+]
+

package/speechflow-ui-st/etc/htmllint.json

@@ -0,0 +1,55 @@
+{
+    "plugins": [],
+    "maxerr": false,
+    "raw-ignore-regex": false,
+    "attr-bans": [ "align", "background", "bgcolor", "border", "frameborder", "longdesc", "marginwidth", "marginheight", "scrolling", "style", "width" ],
+    "indent-delta": false,
+    "indent-style": "nonmixed",
+    "indent-width": 4,
+    "indent-width-cont": false,
+    "spec-char-escape": true,
+    "text-ignore-regex": false,
+    "tag-bans": [ "b", "i" ],
+    "tag-close": true,
+    "tag-name-lowercase": true,
+    "tag-name-match": true,
+    "tag-self-close": false,
+    "doctype-first": false,
+    "doctype-html5": false,
+    "attr-name-style": "dash",
+    "attr-name-ignore-regex": false,
+    "attr-no-dup": true,
+    "attr-no-unsafe-char": true,
+    "attr-order": false,
+    "attr-quote-style": "double",
+    "attr-req-value": true,
+    "attr-new-line": false,
+    "attr-validate": true,
+    "id-no-dup": true,
+    "id-class-no-ad": true,
+    "id-class-style": "underscore",
+    "class-no-dup": true,
+    "class-style": false,
+    "id-class-ignore-regex": false,
+    "img-req-alt": true,
+    "img-req-src": true,
+    "html-valid-content-model": true,
+    "head-valid-content-model": true,
+    "href-style": false,
+    "label-req-for": true,
+    "line-end-style": "lf",
+    "line-no-trailing-whitespace": false,
+    "line-max-len": false,
+    "line-max-len-ignore-regex": false,
+    "head-req-title": true,
+    "title-no-dup": true,
+    "title-max-len": 60,
+    "html-req-lang": false,
+    "lang-style": "case",
+    "fig-req-figcaption": false,
+    "focusable-tabindex-style": false,
+    "input-radio-req-name": true,
+    "input-req-label": false,
+    "table-req-caption": false,
+    "table-req-header": false
+}

package/speechflow-ui-st/etc/stx.conf

@@ -0,0 +1,79 @@
+##
+##  SpeechFlow - Speech Processing Flow Graph
+##  Copyright (c) 2024-2025 Dr. Ralf S. Engelschall <rse@engelschall.com>
+##  Licensed under GPL 3.0 <https://spdx.org/licenses/GPL-3.0-only>
+##
+
+#   (internal): create patch set for NPM dependencies
+patch-make
+    npm shrinkwrap && \
+    patch-package --patch-dir package.d \
+        "@typescript-eslint/typescript-estree" \
+        htmllint-cli && \
+    shx rm -f npm-shrinkwrap.json
+
+#   (internal): apply patch set for NPM dependencies
+patch-apply
+    patch-package --patch-dir package.d
+
+#   static code analysis (continuous file watching)
+lint-watch
+    nodemon --exec "npm start lint" --watch src --ext html,styl,js,ts,vue
+
+#   static code analysis
+lint : lint-vue-tsc lint-eslint lint-stylelint lint-htmllint
+
+#   static code analysis (Vue language)
+lint-vue-tsc
+    vue-tsc --project etc/tsc-client.json --noEmit
+
+#   static code analysis (TypeScript language)
+lint-eslint
+    eslint --config etc/eslint.mjs src/**/*.vue src/**/*.ts
+
+#   static code analysis (CSS/Stylus languages)
+lint-stylelint
+    stylelint --config etc/stylelint.yaml src/**/*.styl src/**/*.vue
+
+#   static code analysis (HTML language)
+lint-htmllint
+    htmllint --rc etc/htmllint.json src/**/*.html
+
+#   build components for production
+build
+    npm start build-client
+
+#   build components for development
+build-dev
+    npm start build-client-dev
+
+#   build client components for production
+build-client
+    vite --config etc/vite-client.mts build --mode production
+
+#   build client components for development
+build-client-dev
+    vite --config etc/vite-client.mts build --mode development
+
+#   build client components for development (continuous file watching)
+build-client-dev-watch
+    cross-env NODE_OPTIONS="--max-old-space-size=4096" \
+        vite --config etc/vite-client.mts build --mode development --watch
+
+#   run server
+server
+    serve -d --listen 12345 --single dst
+
+#   remove all development-only NPM dependencies
+prune
+    npm prune --omit=dev
+
+#   remove all generated artifacts (reverse of "npm start build")
+clean
+    shx rm -rf dst-stage1 dst-stage2
+
+#   remove all generated artifacts (reverse of "npm install" and "npm start build")
+clean:dist : clean
+    shx rm -f package-lock.json && \
+    shx rm -rf node_modules
+

package/speechflow-ui-st/etc/stylelint.js

@@ -0,0 +1,46 @@
+/*
+**  SpeechFlow - Speech Processing Flow Graph
+**  Copyright (c) 2024-2025 Dr. Ralf S. Engelschall <rse@engelschall.com>
+**  Licensed under GPL 3.0 <https://spdx.org/licenses/GPL-3.0-only>
+*/
+
+/*  read original rules  */
+const recommended = require("stylelint-stylus/recommended")
+const standard    = require("stylelint-stylus/standard")
+
+/*  mix standard over recommended manually  */
+const mixed = {}
+Object.assign(mixed, recommended)
+Object.assign(mixed.rules, standard.rules)
+
+/*  remove deprecated rules  */
+const deprecated = [
+    "at-rule-name-newline-after",
+    "at-rule-name-space-after",
+    "block-closing-brace-empty-line-before",
+    "block-closing-brace-newline-after",
+    "block-closing-brace-newline-before",
+    "block-closing-brace-space-after",
+    "block-closing-brace-space-before",
+    "block-opening-brace-newline-after",
+    "block-opening-brace-newline-before",
+    "block-opening-brace-space-after",
+    "block-opening-brace-space-before",
+    "color-hex-case",
+    "declaration-block-trailing-semicolon",
+    "no-eol-whitespace",
+    "number-leading-zero",
+    "number-no-trailing-zeros",
+    "selector-list-comma-newline-after",
+    "selector-list-comma-newline-before",
+    "selector-list-comma-space-after",
+    "selector-list-comma-space-before",
+    "selector-pseudo-class-case",
+    "indentation"
+]
+for (const d of deprecated)
+    delete mixed.rules[d]
+
+/*  export as replacement configuration  */
+module.exports = mixed
+