@saltcorn/bootstrap-prompt-theme 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/agent-skill.js +2 -1
  2. package/index.js +63 -10
  3. package/package.json +1 -1
package/agent-skill.js CHANGED
@@ -55,11 +55,12 @@ CRITICAL RULES — never break these:
55
55
  - Never set z-index on .card or page content elements — stacking context on page content is what causes navbar dropdowns to be obscured.
56
56
  - Do not override --bs-zindex-dropdown, --bs-zindex-fixed, or .dropdown-menu z-index.
57
57
  - Dropdowns must always be fully visible and on top of all other page content, including cards, sections, and containers.
58
+ - Always pair background and foreground colors: whenever you set a background color on any element — form controls (.form-control, .form-select), dropdowns (.dropdown-menu, .dropdown-item), navbar (.navbar, .nav-link), cards, or any container — you must also explicitly set a readable text/foreground color on that element and its direct text children. Bootstrap does not reliably propagate text color into all components, especially in dark mode. Common failure cases: dark .dropdown-menu background with light-mode .dropdown-item text color (text disappears); dark .form-control background with inherited body text color (typed text invisible); dark navbar with unset .nav-link color. Always set both background and text color together. When in doubt, also set the matching --bs-* token pair (e.g. --bs-dropdown-bg with --bs-dropdown-link-color, --bs-body-bg with --bs-body-color).
58
59
 
59
60
  IMAGES: The user may attach images to the conversation. Use them as design inspiration — extract colors, typography style, spacing feel, or overall mood and translate that into the CSS overlay. If the user attaches an image without further instruction, derive a theme from it. If they describe what they want alongside the image, use the image to inform the details.
60
61
 
61
62
  LAYOUT CONFIG: Besides CSS, you can control structural layout options via set_layout_config:
62
- - mode: "light" | "dark" — Bootstrap color mode applied to <html data-bs-theme>
63
+ - mode: "light" | "dark" — Bootstrap color mode applied to <html data-bs-theme>. IMPORTANT: whenever the user asks for a dark theme or dark mode, you MUST call set_layout_config with mode: "dark". Do not only adjust CSS colors — without mode: "dark" Bootstrap's own dark-mode component styles will not activate and the result will look wrong.
63
64
  - menu_style: "Top Navbar" | "Side Navbar" | "No Menu"
64
65
  - colorscheme: navbar color class pair, e.g. "navbar-dark bg-dark", "navbar-light bg-light", "navbar-dark bg-primary"
65
66
  - fixed_top: true | false — fix navbar to top of viewport
package/index.js CHANGED
@@ -954,16 +954,69 @@ const FAKE_MENU = [
954
954
  },
955
955
  ];
956
956
 
957
- const FAKE_LIST_BODY =
958
- '<section class="page-section pt-2"><div class="container">' +
959
- '<div class="table-responsive"><table class="table table-sm table-valign-middle">' +
960
- "<thead><tr>" +
961
- '<th><span class="link-style">Email</span></th>' +
962
- '<th class="text-align-right"><span class="link-style">Role</span></th>' +
963
- "</tr></thead>" +
964
- '<tbody><tr data-row-id="1"><td>admin@foo.com</td><td class="text-align-right">1</td></tr></tbody>' +
965
- "</table></div>" +
966
- "</div></section>";
957
+ const FAKE_LIST_BODY = `
958
+ <section class="page-section pt-2"><div class="container">
959
+ <div class="card p-1 mt-1 mb-3 d-print-none admin-edit-bar"><div class="card-body p-1">
960
+ <i class="fas fa-user-cog me-1"></i>
961
+ <span class="ms-1 me-2 badge bg-secondary">Page</span>
962
+ <span class="copy-to-clipboard">books_with_edit</span>
963
+ <a class="ms-2" href="/pageedit/edit/books_with_edit">Edit&nbsp;<i class="fas fa-edit"></i></a>
964
+ </div></div>
965
+ </div></section>
966
+ <section class="page-section"><div class="container">
967
+ <div class="d-inline" data-sc-embed-viewname="my_bread">
968
+ <div class="container"><nav aria-label="breadcrumb"><ol class="breadcrumb">
969
+ <li class="breadcrumb-item"><a href="/settings">Settings</a></li>
970
+ <li class="breadcrumb-item"><a href="/admin">About application</a></li>
971
+ <li class="breadcrumb-item active" aria-current="page">Site identity</li>
972
+ </ol></nav></div>
973
+ </div>
974
+ </div></section>
975
+ <section class="page-section"><div class="container">
976
+ <div class="d-inline" data-sc-embed-viewname="books">
977
+ <div class="table-responsive"><table class="table table-sm table-valign-middle table-hover">
978
+ <thead><tr>
979
+ <th><span class="link-style">name</span></th>
980
+ <th><span class="link-style">open</span></th>
981
+ <th class="text-align-right"><span class="link-style">pages</span></th>
982
+ </tr></thead>
983
+ <tbody>
984
+ <tr data-row-id="2">
985
+ <td>War and Peace</td>
986
+ <td><i class="fas fa-lg fa-times-circle text-danger"></i></td>
987
+ <td class="text-align-right">1000</td>
988
+ </tr>
989
+ </tbody>
990
+ </table></div>
991
+ </div>
992
+ </div></section>
993
+ <section class="page-section"><div class="container">
994
+ <div class="d-inline" data-sc-embed-viewname="edit_book">
995
+ <form data-viewname="edit_book" action="/view/edit_book" class="form-namespace" method="post">
996
+ <input type="hidden" name="_csrf" value="<csrf-token>">
997
+ <input type="hidden" class="form-control" name="id" value="2">
998
+ <span style="margin-bottom:1.5rem"><div class="row" style="margin-bottom:1.5rem">
999
+ <div class="col-md-2 text-start text-lg-end"><label for="inputname">name</label></div>
1000
+ <div class="col-md-10 text-start"><input type="text" class="form-control" data-fieldname="name" name="name" id="inputname" value="War and Peace"></div>
1001
+ </div></span>
1002
+ <span style="margin-bottom:1.5rem"><div class="row" style="margin-bottom:1.5rem">
1003
+ <div class="col-md-2 text-start text-lg-end"><label for="inputopen">open</label></div>
1004
+ <div class="col-md-10 text-start"><input class="me-2 mt-1" data-fieldname="open" type="checkbox" name="open" id="inputopen"></div>
1005
+ </div></span>
1006
+ <span style="margin-bottom:1.5rem"><div class="row" style="margin-bottom:1.5rem">
1007
+ <div class="col-md-2 text-start text-lg-end"><label for="inputpages">pages</label></div>
1008
+ <div class="col-md-10 text-start"><input type="number" class="form-control" data-fieldname="pages" name="pages" id="inputpages" step="1" value="1000"></div>
1009
+ </div></span>
1010
+ <span style="margin-bottom:1.5rem"><div class="row" style="margin-bottom:1.5rem">
1011
+ <div class="col-2 text-end"></div>
1012
+ <div class="col-10 text-start"><button type="submit" class="btn btn-primary">Save</button></div>
1013
+ </div></span>
1014
+ </form>
1015
+ </div>
1016
+ </div></section>
1017
+ <section class="page-section"><div class="container">
1018
+ <div id="toasts-area" class="toast-container position-fixed top-0 end-0 p-2" style="z-index:9999;" aria-live="polite" aria-atomic="true"></div>
1019
+ </div></section>`;
967
1020
 
968
1021
  const renderStructureSkeleton = (config) =>
969
1022
  menuWrap({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saltcorn/bootstrap-prompt-theme",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "description": "Bootstrap 5 layout plugin with LLM-generated CSS overlay",
5
5
  "main": "index.js",
6
6
  "scripts": {