setmy-info-less-ide 3.1.0

package/README.md

@@ -0,0 +1,39 @@
+# setmy-info-less-ide
+
+CSS patterns for developer-facing UIs: code editors, debugging panels, output consoles,
+split-pane workspaces, and developer dashboards. Extends the enterprise package with
+patterns specific to developer tool web applications, including the NetBeans-style frame shell.
+
+**Target audience:** Developers building IDE-style or developer-tool web UIs — think
+browser-based code editors, CI dashboards, log viewers, or admin consoles for engineers.
+
+## Install
+
+```shell
+npm i setmy-info-less-ide
+```
+
+## Dependencies
+
+Depends on [`setmy-info-less-enterprise`](../setmy-info-less-enterprise/README.md), which
+provides the stable shared stack beneath this IDE-specific layer.
+
+## Usage
+
+Load the enterprise compiled CSS (includes everything) plus this package:
+
+```html
+<link rel="stylesheet" href="node_modules/setmy-info-less-enterprise/dist/main.min.css">
+<link rel="stylesheet" href="node_modules/setmy-info-less-ide/dist/main.css">
+```
+
+The IDE package now owns the NetBeans-style frame selectors such as
+`body.framesDefaultPadding`, `.contentHeader`, `.sectionLeft`, and `.sectionRightBottom`.
+
+## Development
+
+```shell
+npm run build
+npm run lint:less
+npm run verify
+```

package/cucumber.js

@@ -0,0 +1,10 @@
+module.exports = {
+    default: [
+        `--format-options '{"snippetInterface": "synchronous"}'`,
+        '--require ../common/test/js/bdd/support.js',
+        '--require ../common/test/js/bdd/given.js',
+        '--require ../common/test/js/bdd/when.js',
+        '--require ../common/test/js/bdd/then.js',
+        './src/test/gherkin'
+    ].join(' ')
+};

package/dist/main.css

@@ -0,0 +1,118 @@
+/*
+Main entry point for the IDE module.
+
+CSS patterns for developer-facing UIs: code editors, debugging panels, output consoles,
+developer dashboards.
+
+Distribution model: STANDALONE / DELTA.
+`dist/main.css` contains ONLY this package's own rules — the NetBeans-style frame presets in
+`frames/index.less` (plus anything added under `utility/`). It does NOT bundle base or enterprise
+CSS. Consumers load the stylesheets in dependency order:
+
+    setmy-info-less-enterprise  ->  setmy-info-less-ide
+
+The dependency on `setmy-info-less-enterprise` is a load-order relationship declared in
+package.json (load the enterprise CSS, which carries the full stable stack, before this file), not
+a CSS import — enterprise's rules must not be bundled into this delta. The base module's
+`values/index.less` is imported below for TOKENS ONLY (LESS variables emit no CSS), so the frame
+rules can reference shared variables without re-emitting base or enterprise styles.
+*/
+/* Base tokens only (no CSS output) — gives the frame rules access to shared variables */
+/* values/main.less */
+/* values/colors/main.less */
+/* values/fonts/main.less */
+/* This package's own rules */
+/*
+Frame presets for the IDE module.
+
+These rules provide a NetBeans-inspired application shell layout. They mix utility-like
+classes with structural selectors such as `body.framesDefaultPadding` and rely on modern
+layout math through `calc(...)`.
+
+If very old browser support is required later, this file is one of the first places to review.
+*/
+body.framesDefaultPadding {
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(100% - 0px);
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  width: calc(100% - 0px);
+  padding: 0px;
+}
+.contentHeader {
+  width: 100%;
+  height: 50px;
+}
+.defaultHeader {
+  width: 100%;
+  height: 25px;
+}
+.content {
+  width: 100%;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(100% - 75px);
+}
+.contentFooter {
+  width: 100%;
+  height: 25px;
+}
+.sectionLeft {
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  width: calc(30% - 8px - 4px);
+  height: 100%;
+}
+.verticalSeparator {
+  width: 8px;
+  height: 100%;
+  display: block;
+}
+.sectionRight {
+  width: 70%;
+  height: 100%;
+}
+.sectionHeader {
+  width: 100%;
+  height: 25px;
+}
+.sectionLeftUp {
+  width: 100%;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(60% - 4px - 8px);
+}
+.contentLeftUp {
+  width: 100%;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(100% - 25px);
+}
+.horizontalSeparator {
+  height: 4px;
+}
+.sectionLeftBottom {
+  width: 100%;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(40%);
+}
+.contentLeftBottom {
+  width: 100%;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(100% - 25px);
+}
+.sectionRightUp {
+  width: 100%;
+  height: 30%;
+}
+.contentRightUp {
+  width: 100%;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(100% - 25px);
+}
+.sectionRightBottom {
+  width: 100%;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(70% - 4px - 8px);
+}
+.contentRightBottom {
+  width: 100%;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
+  height: calc(100% - 25px);
+}
+/* IDE utility classes — add imports here as the module grows. */

package/dist/main.min.css

@@ -0,0 +1 @@
+body.framesDefaultPadding{height:calc(100% - 0px);width:calc(100% - 0px);padding:0}.contentHeader{width:100%;height:50px}.defaultHeader{width:100%;height:25px}.content{width:100%;height:calc(100% - 75px)}.contentFooter{width:100%;height:25px}.sectionLeft{width:calc(30% - 8px - 4px);height:100%}.verticalSeparator{width:8px;height:100%;display:block}.sectionRight{width:70%;height:100%}.sectionHeader{width:100%;height:25px}.sectionLeftUp{width:100%;height:calc(60% - 4px - 8px)}.contentLeftUp{width:100%;height:calc(100% - 25px)}.horizontalSeparator{height:4px}.sectionLeftBottom{width:100%;height:calc(40%)}.contentLeftBottom{width:100%;height:calc(100% - 25px)}.sectionRightUp{width:100%;height:30%}.contentRightUp{width:100%;height:calc(100% - 25px)}.sectionRightBottom{width:100%;height:calc(70% - 4px - 8px)}.contentRightBottom{width:100%;height:calc(100% - 25px)}

package/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  roots: [
+    '<rootDir>',
+    '<rootDir>/../common'
+  ],
+  testMatch: [
+    '**/__tests__/**/*.?([mc])[jt]s?(x)',
+    '**/?(*.)+(spec|test).?([mc])[jt]s?(x)'
+  ]
+};

package/jest.e2e.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    testMatch: ['**/*.e2e.js'],
+    testTimeout: 60000,
+    maxWorkers: 1
+};

package/package.json

@@ -0,0 +1,60 @@
+{
+    "name": "setmy-info-less-ide",
+    "version": "3.1.0",
+    "description": "SMI LESS IDE — developer tool and IDE-style UI patterns, builds on the enterprise package",
+    "main": "dist/main.min.css",
+    "dependencies": {
+        "setmy-info-less-enterprise": "*"
+    },
+    "scripts": {
+        "build": "npm run css && npm run css-min && npm run css:experimental && npm run html && npm run styleguide",
+        "build:experimental": "npm run css:experimental",
+        "css": "lessc ./src/main/less/main.less dist/main.css",
+        "css:experimental": "lessc ./src/main/less/experimental/main.less dist/experimental.css",
+        "css-min": "lessc ./src/main/less/main.less dist/main.min.css --clean-css",
+        "html": "node ../common/test/js/pugBuild.js",
+        "start": "node ../common/test/js/server.js",
+        "watch": "less-watch-compiler ./src/main/less dist main.less",
+        "watch:pug": "node ../common/test/js/pugWatch.js",
+        "clean": "rimraf dist",
+        "clean:all": "rimraf dist node_modules",
+        "verify": "npm test && npm run e2e && npm run lint:less && npm run cucumber",
+        "test": "jest",
+        "e2e": "jest --config=jest.e2e.config.js",
+        "e2e:one": "jest --config=jest.e2e.config.js --testNamePattern",
+        "cucumber": "cucumber-js",
+        "lint:less": "stylelint ./src/main/less/**/*.less",
+        "lint:fix-less": "stylelint ./src/main/less/**/*.less --fix",
+        "styleguide": "kss-node --source src/main/less --destination dist/styleguide --css ../main.css"
+    },
+    "keywords": [
+        "less",
+        "css",
+        "ide",
+        "developer",
+        "tools"
+    ],
+    "author": "Imre Tabur <imre.tabur@mail.ee>",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/setmy-info/setmy-info-less.git"
+    },
+    "homepage": "https://github.com/setmy-info/setmy-info-less",
+    "devDependencies": {
+        "@cucumber/cucumber": "^13.0.0",
+        "express": "^5.2.1",
+        "jest": "^30.4.2",
+        "kss": "^2.4.0",
+        "less": "^4.6.6",
+        "less-plugin-clean-css": "^1.6.0",
+        "less-watch-compiler": "^1.17.5",
+        "postcss-less": "^6.0.0",
+        "selenium-webdriver": "^4.45.0",
+        "pug": "^3.0.4",
+        "rimraf": "^6.1.3",
+        "stylelint": "^17.13.0",
+        "stylelint-config-standard": "^40.0.0",
+        "stylelint-less": "^4.2.1"
+    }
+}

package/playwright.config.js

@@ -0,0 +1,9 @@
+/*
+LEGACY STUB — retained intentionally, kept empty on purpose (not removed).
+
+Playwright is no longer used: e2e tests run via an external Selenium Grid through the Jest
+runner (see jest.e2e.config.js and ../common/test/js/pageHelper.js). This empty config remains
+as a marker of the migration and to avoid breaking any tooling or muscle-memory that still
+references a playwright.config.js. It is deliberately a no-op and exports nothing meaningful.
+*/
+module.exports = {};

package/src/main/less/experimental/experimental-frames-colors.less

@@ -0,0 +1,35 @@
+.AliceBlue {
+    background: @blue-300;
+}
+
+.MoreBlue {
+    background: @blue-600;
+}
+
+.blanchedalmond {
+    background: blanchedalmond;
+}
+
+.Aquamarine {
+    background: aquamarine;
+}
+
+.Beige {
+    background: beige;
+}
+
+.Bisque {
+    background: bisque;
+}
+
+.BurlyWood {
+    background: burlywood;
+}
+
+.Cornsilk {
+    background: cornsilk;
+}
+
+.Cyan {
+    background: cyan;
+}

package/src/main/less/experimental/main.less

@@ -0,0 +1,4 @@
+/* experimental.less */
+@import url("../../../../../setmy-info-less/src/main/less/values/index.less");
+@import url("../frames/index.less");
+@import url("experimental-frames-colors.less");

package/src/main/less/frames/index.less

@@ -0,0 +1,135 @@
+/*
+Frame presets for the IDE module.
+
+These rules provide a NetBeans-inspired application shell layout. They mix utility-like
+classes with structural selectors such as `body.framesDefaultPadding` and rely on modern
+layout math through `calc(...)`.
+
+If very old browser support is required later, this file is one of the first places to review.
+*/
+@numberOfMenuPanels: 2;
+@frameHeaderHeight: @numberOfMenuPanels * @halfDefaultHeight;
+@frameFooterHeight: @halfDefaultHeight;
+
+@sectionHeaderHeight: @halfDefaultHeight;
+
+@verticalSeparatorWidth: 8px;
+@horizontalSeparatorHeight: 4px;
+
+@paddingValue: 0px;
+@doublePaddingValue: @paddingValue * 2;
+
+@headerFooterSum: @frameHeaderHeight + @frameFooterHeight;
+
+body.framesDefaultPadding {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(100% - @doublePaddingValue);
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    width: calc(100% - @doublePaddingValue);
+    padding: @paddingValue;
+}
+
+.contentHeader {
+    width: 100%;
+    height: @frameHeaderHeight;
+}
+
+.defaultHeader {
+    width: 100%;
+    height: @halfDefaultHeight
+}
+
+.content {
+    width: 100%;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(100% - @headerFooterSum);
+}
+
+.contentFooter {
+    width: 100%;
+    height: @frameFooterHeight;
+}
+
+@leftWidth: 30%;
+@rightWidth: 100% - @leftWidth;
+
+.sectionLeft {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    width: calc(@leftWidth - @verticalSeparatorWidth - @defaultBorderVerticalAmount);
+    height: 100%;
+}
+
+.verticalSeparator {
+    width: @verticalSeparatorWidth;
+    height: 100%;
+    display: block;
+}
+
+.sectionRight {
+    width: @rightWidth;
+    height: 100%;
+}
+
+.sectionHeader {
+    width: 100%;
+    height: @sectionHeaderHeight;
+}
+
+@contentLeftUpHeight: 60%;
+@contentLeftBottomHeight: 100% - @contentLeftUpHeight;
+@doubleDefaultBorderHorizontalAmount: 2 * @defaultBorderHorizontalAmount;
+@x: @horizontalSeparatorHeight - @doubleDefaultBorderHorizontalAmount;
+
+.sectionLeftUp {
+    width: 100%;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(@contentLeftUpHeight - @horizontalSeparatorHeight - @doubleDefaultBorderHorizontalAmount);
+}
+
+.contentLeftUp {
+    width: 100%;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(100% - @sectionHeaderHeight);
+}
+
+.horizontalSeparator {
+    height: @horizontalSeparatorHeight;
+}
+
+.sectionLeftBottom {
+    width: 100%;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(@contentLeftBottomHeight);
+}
+
+.contentLeftBottom {
+    width: 100%;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(100% - @sectionHeaderHeight);
+}
+
+@contentRightUpHeight: 30%;
+@contentRightBottomHeight: 100% - @contentRightUpHeight;
+
+.sectionRightUp {
+    width: 100%;
+    height: @contentRightUpHeight;
+}
+
+.contentRightUp {
+    width: 100%;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(100% - @sectionHeaderHeight);
+}
+
+.sectionRightBottom {
+    width: 100%;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(@contentRightBottomHeight - @horizontalSeparatorHeight - @doubleDefaultBorderHorizontalAmount);
+}
+
+.contentRightBottom {
+    width: 100%;
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
+    height: calc(100% - @sectionHeaderHeight);
+}

package/src/main/less/main.less

@@ -0,0 +1,35 @@
+/*
+Main entry point for the IDE module.
+
+CSS patterns for developer-facing UIs: code editors, debugging panels, output consoles,
+developer dashboards.
+
+Distribution model: STANDALONE / DELTA.
+`dist/main.css` contains ONLY this package's own rules — the NetBeans-style frame presets in
+`frames/index.less` (plus anything added under `utility/`). It does NOT bundle base or enterprise
+CSS. Consumers load the stylesheets in dependency order:
+
+    setmy-info-less-enterprise  ->  setmy-info-less-ide
+
+The dependency on `setmy-info-less-enterprise` is a load-order relationship declared in
+package.json (load the enterprise CSS, which carries the full stable stack, before this file), not
+a CSS import — enterprise's rules must not be bundled into this delta. The base module's
+`values/index.less` is imported below for TOKENS ONLY (LESS variables emit no CSS), so the frame
+rules can reference shared variables without re-emitting base or enterprise styles.
+*/
+
+// IDE module
+//
+// Developer-tooling UI patterns layered on the enterprise package, intended for editor panes,
+// debug views, and NetBeans-style workbench layouts. Load the enterprise CSS before this file.
+//
+// Markup: <div class="smi-pane"></div>
+//
+// Styleguide: packages.ide
+
+/* Base tokens only (no CSS output) — gives the frame rules access to shared variables */
+@import url("../../../../setmy-info-less/src/main/less/values/index.less");
+
+/* This package's own rules */
+@import url("frames/index.less");
+@import url("utility/index.less");

package/src/main/less/utility/index.less

@@ -0,0 +1 @@
+/* IDE utility classes — add imports here as the module grows. */

package/src/test/gherkin/body.feature

@@ -0,0 +1,20 @@
+Feature: body page
+
+    Scenario: body rendering with specific properties
+        Given page name is "body"
+        When page is rendered
+        And page element ID is "body"
+        Then page should have title "body.html"
+        And page element margin should be "0px 0px 0px 0px"
+        And page element padding should be "0px 0px 0px 0px"
+        And page element font family should be "DejaVu Serif, Roboto, Arial, Noto Sans, Noto, sans-serif"
+        And page element font size should be "16px"
+        And page element X should be 0
+        And page element Y should be 0
+        And page element WIDTH should be 2000
+        And page element HEIGHT should be 1200
+        And page element TOP should be 0
+        And page element LEFT should be 0
+        And page element background color should be "rgba(0, 0, 0, 0)"
+        And page element color should be "rgb(0, 0, 0)"
+        And page is closed

package/src/test/gherkin/experimental-frames.feature

@@ -0,0 +1,17 @@
+Feature: IDE experimental frames page
+
+    Scenario: experimental frames page is generated from the IDE workspace
+        Given page name is "experimental-frames"
+        When page is rendered
+        And page element ID is "body"
+        Then page should have title "experimental-frames.html"
+        And page element padding should be "0px 0px 0px 0px"
+        And page element ID is "verticalDivider"
+        And page element WIDTH should be 8
+        And page element ID is "horizontalLeftDivider"
+        And page element HEIGHT should be 4
+        And page element ID is "horizontalRightDivider"
+        And page element HEIGHT should be 4
+        And page element ID is "body"
+        And page element style "cursor" should be "auto"
+        And page is closed

package/src/test/gherkin/frames.feature

@@ -0,0 +1,19 @@
+Feature: IDE frames page
+
+    Scenario: NetBeans-style frame layout is provided by the IDE package
+        Given page name is "frames"
+        When page is rendered
+        And page element ID is "body"
+        Then page should have title "frames.html"
+        And page element padding should be "0px 0px 0px 0px"
+        And page element ID is "contentHeader"
+        And page element HEIGHT should be 50
+        And page element ID is "content"
+        And page element HEIGHT should be 1125
+        And page element ID is "sectionLeft"
+        And page element WIDTH should be 588
+        And page element ID is "verticalSeparator"
+        And page element WIDTH should be 8
+        And page element ID is "contentFooter"
+        And page element HEIGHT should be 25
+        And page is closed

package/src/test/js/e2e/body.e2e.js

@@ -0,0 +1,40 @@
+const pageHelper = require('../../../../../common/test/js/pageHelper');
+const getTestPageName = require('../../../../../common/test/js/testPageName');
+
+const pageName = getTestPageName();
+
+describe(pageName + ' page layout tests', () => {
+
+    beforeAll(async () => {
+        pageHelper.pageName(pageName);
+        await pageHelper.pageIsRendered();
+    });
+
+    afterAll(async () => {
+        await pageHelper.pageClose();
+    });
+
+    test('should load the page and check title', async () => {
+
+        const title = await pageHelper.getTitle();
+        expect(title).toBe('body.html');
+
+        await pageHelper.elementExpectations(
+            'body',
+            {
+                margin: '0px 0px 0px 0px',
+                padding: '0px 0px 0px 0px',
+                fontFamily: 'DejaVu Serif, Roboto, Arial, Noto Sans, Noto, sans-serif',
+                fontSize: '16px',
+                x: 0,
+                y: 0,
+                width: 2000,
+                height: 1200,
+                top: 0,
+                left: 0,
+                backgroundColor: 'rgba(0, 0, 0, 0)',
+                color: 'rgb(0, 0, 0)'
+            }
+        );
+    });
+});

package/src/test/js/e2e/frames.e2e.js

@@ -0,0 +1,60 @@
+const pageHelper = require('../../../../../common/test/js/pageHelper');
+const getTestPageName = require('../../../../../common/test/js/testPageName');
+
+const pageName = getTestPageName();
+
+// NetBeans-style IDE frame layout (frames/index.less). Viewport is 2000x1200.
+// Expected geometry (see frames/index.less):
+//   frameHeaderHeight = 2 * halfDefaultHeight = 50px
+//   frameFooterHeight = halfDefaultHeight     = 25px
+//   content height     = 1200 - (50 + 25)     = 1125px
+//   sectionLeft width  = 30% * 2000 - 8 - 4   = 588px
+//   verticalSeparator  = 8px
+//   sectionRight width = 70% * 2000           = 1400px
+describe(pageName + ' frame layout tests', () => {
+
+    beforeAll(async () => {
+        pageHelper.pageName(pageName);
+        await pageHelper.pageIsRendered();
+    });
+
+    afterAll(async () => {
+        await pageHelper.pageClose();
+    });
+
+    test('should load the page and check title', async () => {
+        expect(await pageHelper.getTitle()).toBe('frames.html');
+    });
+
+    test('contentHeader fills width and is one header tall', async () => {
+        await pageHelper.elementIdIs('contentHeader');
+        expect(pageHelper.data.computedStyles.height).toBe(50);
+        expect(pageHelper.data.computedStyles.width).toBe(2000);
+    });
+
+    test('content takes the remaining height', async () => {
+        await pageHelper.elementIdIs('content');
+        expect(pageHelper.data.computedStyles.height).toBe(1125);
+        expect(pageHelper.data.computedStyles.width).toBe(2000);
+    });
+
+    test('contentFooter is half a default height tall', async () => {
+        await pageHelper.elementIdIs('contentFooter');
+        expect(pageHelper.data.computedStyles.height).toBe(25);
+    });
+
+    test('sectionLeft is the left 30% pane minus separator and borders', async () => {
+        await pageHelper.elementIdIs('sectionLeft');
+        expect(pageHelper.data.computedStyles.width).toBe(588);
+    });
+
+    test('verticalSeparator is 8px wide', async () => {
+        await pageHelper.elementIdIs('verticalSeparator');
+        expect(pageHelper.data.computedStyles.width).toBe(8);
+    });
+
+    test('sectionRight is the right 70% pane', async () => {
+        await pageHelper.elementIdIs('sectionRight');
+        expect(pageHelper.data.computedStyles.width).toBe(1400);
+    });
+});

package/src/test/pug/body.pug

@@ -0,0 +1,4 @@
+doctype html
+html(lang="en")
+    include include/head.pug
+    body(id="body")

package/src/test/pug/experimental-frames.pug

@@ -0,0 +1,152 @@
+doctype html
+html(lang="en")
+    head(id="head")
+        title experimental-frames.html
+        meta(charset="UTF-8")
+        meta(name="viewport", content="width=device-width, initial-scale=1.0")
+        meta(name="description", content="HTML 5 CSS test pages")
+        meta(name="author", content="Imre Tabur")
+        link(rel="stylesheet", type="text/css", href="../../setmy-info-less/dist/main.min.css")
+        link(rel="stylesheet", type="text/css", href="main.css")
+        link(rel="stylesheet", type="text/css", href="experimental.css")
+    body(id="body" class="framesDefaultPadding")
+        header(class="contentHeader AliceBlue")
+            menu
+                li(class="floatLeft Aquamarine halfHeight") Floating left A
+                li(class="floatLeft Aquamarine halfHeight") Floating left B
+                li(class="floatRight Aquamarine halfHeight") Floating right B
+                li(class="floatRight Aquamarine halfHeight") Floating right A
+                li(class="floatClear")
+            menu
+                li(class="floatLeft Aquamarine halfHeight") Floating left A
+                li(class="floatLeft Aquamarine halfHeight") Floating left B
+                li(class="floatRight Aquamarine halfHeight") Floating right B
+                li(class="floatRight Aquamarine halfHeight") Floating right A
+                li(class="floatClear")
+        main(class="content")
+            section(class="sectionLeft floatLeft")
+                div(class="sectionLeftUp defaultBorder")
+                    header(class="sectionHeader AliceBlue")
+                        menu
+                            li(class="floatLeft Aquamarine halfHeight") A
+                            li(class="floatLeft Aquamarine halfHeight") B
+                            li(class="floatRight Aquamarine halfHeight") B
+                            li(class="floatRight Aquamarine halfHeight") A
+                            li(class="floatClear")
+                    div(class="contentLeftUp noWrap autoScrollBars Beige")
+                        - for (let i = 0; i < 50; i++)
+                            div Left Up #{i} Longer Longer Longer Longer Longer Longer Longer Longer Longer
+                div(id="horizontalLeftDivider" class="horizontalSeparator cursorHorizontalResize")
+                div(class="sectionLeftBottom defaultBorder")
+                    header(class="sectionHeader AliceBlue")
+                        menu
+                            li(class="floatLeft Aquamarine halfHeight") A
+                            li(class="floatLeft Aquamarine halfHeight") B
+                            li(class="floatRight Aquamarine halfHeight") B
+                            li(class="floatRight Aquamarine halfHeight") A
+                            li(class="floatClear")
+                    div(class="contentLeftBottom noWrap autoScrollBars Bisque")
+                        - for (let i = 0; i < 50; i++)
+                            div Left Up #{i} Longer Longer Longer Longer Longer Longer Longer Longer Longer
+            div(id="verticalDivider" class="verticalSeparator cursorVerticalResize floatLeft")
+            section(class="sectionRight floatLeft")
+                div(class="sectionRightUp defaultBorder")
+                    header(class="sectionHeader AliceBlue")
+                        menu
+                            li(class="floatLeft Aquamarine halfHeight") A
+                            li(class="floatLeft Aquamarine halfHeight") B
+                            li(class="floatRight Aquamarine halfHeight") B
+                            li(class="floatRight Aquamarine halfHeight") A
+                            li(class="floatClear")
+                    div(class="contentRightUp noWrap autoScrollBars BurlyWood")
+                        - for (let i = 0; i < 50; i++)
+                            div Left Up #{i} Longer Longer Longer Longer Longer Longer Longer Longer Longer
+                div(id="horizontalRightDivider" class="horizontalSeparator cursorHorizontalResize")
+                div(class="sectionRightBottom defaultBorder")
+                    header(class="sectionHeader AliceBlue")
+                        menu
+                            li(class="floatLeft Aquamarine halfHeight") A
+                            li(class="floatLeft Aquamarine halfHeight") B
+                            li(class="floatRight Aquamarine halfHeight") B
+                            li(class="floatRight Aquamarine halfHeight") A
+                            li(class="floatClear")
+                    div(class="contentRightBottom noWrap autoScrollBars Cornsilk")
+                        - for (let i = 0; i < 50; i++)
+                            div Left Up #{i} Longer Longer Longer Longer Longer Longer Longer Longer Longer
+            div(class="floatClear")
+        footer(class="contentFooter AliceBlue")
+            menu
+                li(class="floatLeft Aquamarine halfHeight") Floating left A
+                li(class="floatLeft Aquamarine halfHeight") Floating left B
+                li(class="floatRight Aquamarine halfHeight") Floating right B
+                li(class="floatRight Aquamarine halfHeight") Floating right A
+                li(class="floatClear")
+
+        script.
+            // Horizontal resize: the vertical divider drags the left/right panes wider/narrower.
+            function makeColumnResizer(dividerId, leftSelector, rightSelector) {
+                const divider = document.getElementById(dividerId);
+                if (!divider) return;
+                const left = document.querySelector(leftSelector);
+                const right = document.querySelector(rightSelector);
+                if (!left || !right) return;
+                let dragging = false;
+                divider.addEventListener('mousedown', function (e) {
+                    dragging = true;
+                    document.body.style.cursor = 'col-resize';
+                    e.preventDefault();
+                });
+                document.addEventListener('mousemove', function (e) {
+                    if (!dragging) return;
+                    const container = divider.parentElement;
+                    const rect = container.getBoundingClientRect();
+                    const totalWidth = container.clientWidth;
+                    const minWidth = 100;
+                    const newLeftWidth = e.clientX - rect.left;
+                    if (newLeftWidth < minWidth || newLeftWidth > totalWidth - minWidth - divider.offsetWidth) return;
+                    left.style.width = `${newLeftWidth}px`;
+                    right.style.width = `${totalWidth - newLeftWidth - divider.offsetWidth}px`;
+                });
+                document.addEventListener('mouseup', function () {
+                    if (dragging) {
+                        dragging = false;
+                        document.body.style.cursor = 'default';
+                    }
+                });
+            }
+
+            // Vertical resize: a horizontal divider drags its pane's upper/lower sections taller/shorter.
+            function makeRowResizer(dividerId, upSelector, bottomSelector) {
+                const divider = document.getElementById(dividerId);
+                if (!divider) return;
+                const up = document.querySelector(upSelector);
+                const bottom = document.querySelector(bottomSelector);
+                if (!up || !bottom) return;
+                let dragging = false;
+                divider.addEventListener('mousedown', function (e) {
+                    dragging = true;
+                    document.body.style.cursor = 'row-resize';
+                    e.preventDefault();
+                });
+                document.addEventListener('mousemove', function (e) {
+                    if (!dragging) return;
+                    const container = divider.parentElement;
+                    const rect = container.getBoundingClientRect();
+                    const totalHeight = container.clientHeight;
+                    const minHeight = 40;
+                    const newUpHeight = e.clientY - rect.top;
+                    if (newUpHeight < minHeight || newUpHeight > totalHeight - minHeight - divider.offsetHeight) return;
+                    up.style.height = `${newUpHeight}px`;
+                    bottom.style.height = `${totalHeight - newUpHeight - divider.offsetHeight}px`;
+                });
+                document.addEventListener('mouseup', function () {
+                    if (dragging) {
+                        dragging = false;
+                        document.body.style.cursor = 'default';
+                    }
+                });
+            }
+
+            makeColumnResizer('verticalDivider', '.sectionLeft', '.sectionRight');
+            makeRowResizer('horizontalRightDivider', '.sectionRightUp', '.sectionRightBottom');
+            makeRowResizer('horizontalLeftDivider', '.sectionLeftUp', '.sectionLeftBottom');

package/src/test/pug/frames.pug

@@ -0,0 +1,11 @@
+doctype html
+html(lang="en")
+    include include/head.pug
+    body(id="body" class="framesDefaultPadding")
+        div(id="contentHeader" class="contentHeader") Header
+        main(id="content" class="content")
+            section(id="sectionLeft" class="sectionLeft floatLeft") Left
+            div(id="verticalSeparator" class="verticalSeparator floatLeft")
+            section(id="sectionRight" class="sectionRight floatLeft")
+                div(id="sectionRightBottom" class="sectionRightBottom") Right Bottom
+        div(id="contentFooter" class="contentFooter") Footer

package/src/test/pug/include/head.pug

@@ -0,0 +1,10 @@
+head(id="head")
+    title #{title}
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    meta(name="description", content="HTML 5 CSS test pages")
+    meta(name="author", content="Imre Tabur")
+    //- Delta model: load each module's own CSS in dependency order. extended/enterprise are
+    //- empty skeletons today, so base supplies the resets the frame layout sits on.
+    link(rel="stylesheet", type="text/css", href="../../setmy-info-less/dist/main.min.css")
+    link(rel="stylesheet", type="text/css", href="main.css")

package/stylelint.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+    customSyntax: 'postcss-less',
+    configBasedir: "src/main/less",
+    extends: [
+        'stylelint-config-standard'
+    ],
+    rules: {
+        'block-no-empty': null,
+        'selector-class-pattern': null,
+        'media-feature-range-notation': 'prefix',
+        "selector-type-no-unknown": [true, {
+            ignoreTypes: ["app"]
+        }],
+    },
+    ignoreFiles: [
+        '**/node_modules/**',
+        '**/dist/**'
+    ]
+};