@aglyn/plugins-mui 1.0.0-beta.214 → 1.0.0-beta.215
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aglyn/plugins-mui",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.215",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"homepage": "https://aglyn.com",
|
|
6
6
|
"repository": {
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
"./package.json": "./package.json"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@aglyn/aglyn": "1.0.0-beta.
|
|
29
|
-
"@aglyn/shared-data-enums": "1.0.0-beta.
|
|
30
|
-
"@aglyn/shared-data-mdi": "1.0.0-beta.
|
|
31
|
-
"@aglyn/shared-ui-jsx": "1.0.0-beta.
|
|
32
|
-
"@aglyn/shared-ui-theme": "1.0.0-beta.
|
|
33
|
-
"@aglyn/shared-util-vendor": "1.0.0-beta.
|
|
28
|
+
"@aglyn/aglyn": "1.0.0-beta.215",
|
|
29
|
+
"@aglyn/shared-data-enums": "1.0.0-beta.215",
|
|
30
|
+
"@aglyn/shared-data-mdi": "1.0.0-beta.215",
|
|
31
|
+
"@aglyn/shared-ui-jsx": "1.0.0-beta.215",
|
|
32
|
+
"@aglyn/shared-ui-theme": "1.0.0-beta.215",
|
|
33
|
+
"@aglyn/shared-util-vendor": "1.0.0-beta.215",
|
|
34
34
|
"@swc/helpers": "0.5.23",
|
|
35
35
|
"mobx": "^6.16.1",
|
|
36
36
|
"mobx-react-lite": "^4.1.1"
|
|
@@ -23,7 +23,6 @@ import { useThemeMode } from "@aglyn/shared-ui-theme";
|
|
|
23
23
|
import IconButton from "@mui/material/IconButton";
|
|
24
24
|
import ToggleButton from "@mui/material/ToggleButton";
|
|
25
25
|
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
|
|
26
|
-
import Tooltip from "@mui/material/Tooltip";
|
|
27
26
|
import { forwardRef, useContext } from "react";
|
|
28
27
|
import { BUNDLE_ID } from "../constants/bundle-common.js";
|
|
29
28
|
import { generatePresetId } from "../utils/generate-preset-id.js";
|
|
@@ -84,25 +83,26 @@ export const ID = 'themeModeSwitcher';
|
|
|
84
83
|
]
|
|
85
84
|
}));
|
|
86
85
|
}
|
|
87
|
-
return
|
|
86
|
+
return(// The browser's own tooltip (`title`), not MUI's: Tooltip brings Popper
|
|
87
|
+
// and popper.js, 30 KB raw on every page that places this switch
|
|
88
|
+
// (AGL-3401).
|
|
89
|
+
/*#__PURE__*/ _jsx(IconButton, _extends({
|
|
90
|
+
ref: ref,
|
|
91
|
+
onClick: (event)=>toggleThemeMode(event),
|
|
92
|
+
"aria-label": "Toggle color theme",
|
|
88
93
|
title: `Theme: ${cookieMode != null ? cookieMode : 'device default'}`,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
path: cookieMode === 'dark' ? mdiWeatherNight.path : cookieMode === 'light' ? mdiWhiteBalanceSunny.path : mdiThemeLightDark.path,
|
|
102
|
-
fontSize: "small"
|
|
103
|
-
})
|
|
104
|
-
}))
|
|
105
|
-
});
|
|
94
|
+
color: "inherit"
|
|
95
|
+
}, rest, {
|
|
96
|
+
children: /*#__PURE__*/ _jsx(MdiIcon, {
|
|
97
|
+
// Key off the visitor's SELECTION, not the resolved mode: with
|
|
98
|
+
// 'device default' chosen, `mode` still resolves to light or dark,
|
|
99
|
+
// so the button showed a sun/moon and the system state was
|
|
100
|
+
// invisible — you couldn't tell it apart from an explicit choice.
|
|
101
|
+
// Same mapping the toggle variant uses.
|
|
102
|
+
path: cookieMode === 'dark' ? mdiWeatherNight.path : cookieMode === 'light' ? mdiWhiteBalanceSunny.path : mdiThemeLightDark.path,
|
|
103
|
+
fontSize: "small"
|
|
104
|
+
})
|
|
105
|
+
})));
|
|
106
106
|
});
|
|
107
107
|
ThemeModeSwitcher.displayName = 'AglynThemeModeSwitcher';
|
|
108
108
|
export const schema = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/theme-mode-switcher.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport {\n mdiThemeLightDark,\n mdiWeatherNight,\n mdiWhiteBalanceSunny,\n} from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { useThemeMode } from '@aglyn/shared-ui-theme'\nimport IconButton from '@mui/material/IconButton'\nimport ToggleButton from '@mui/material/ToggleButton'\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup'\nimport
|
|
1
|
+
{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/theme-mode-switcher.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport * as Aglyn from '@aglyn/aglyn'\nimport {\n mdiThemeLightDark,\n mdiWeatherNight,\n mdiWhiteBalanceSunny,\n} from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport { useThemeMode } from '@aglyn/shared-ui-theme'\nimport IconButton from '@mui/material/IconButton'\nimport ToggleButton from '@mui/material/ToggleButton'\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup'\nimport { forwardRef, useContext } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'themeModeSwitcher'\n\nexport interface ThemeModeSwitcherProps {\n /** 'icon' cycles light→dark→system on click; 'toggle' shows all three. */\n variant?: 'icon' | 'toggle'\n}\n\n/**\n * Visitor-facing light/dark override (AGL-337): drives the shared\n * cookie-backed theme mode state the HostThemeProvider already resolves,\n * so the choice persists across visits and pages. The icon variant\n * cycles light → dark → device default; the toggle variant shows the\n * three choices explicitly.\n *\n * A site whose theme has its dark scheme switched off renders light whatever\n * this control says, so on a published page it renders nothing rather than a\n * switch that flips only its own icon (AGL-2676). The static besigner canvas\n * keeps it visible so the author can still place and style it.\n */\nconst ThemeModeSwitcher = forwardRef<HTMLElement, ThemeModeSwitcherProps>(\n (props, ref) => {\n const { variant, ...rest } = props\n const [, toggleThemeMode, cookieMode, canGoDark] = useThemeMode()\n const { editorInert } = useContext(Aglyn.ScreenLinkContext)\n\n if (canGoDark === false && !editorInert) return null\n\n if (variant === 'toggle') {\n return (\n <ToggleButtonGroup\n ref={ref as any}\n size=\"small\"\n exclusive\n value={cookieMode ?? 'system'}\n onChange={(event, value) =>\n value && toggleThemeMode(event as any, value)\n }\n aria-label=\"Color theme\"\n {...rest}\n >\n <ToggleButton value=\"light\" aria-label=\"Light\">\n <MdiIcon path={mdiWhiteBalanceSunny.path} fontSize=\"small\" />\n </ToggleButton>\n <ToggleButton value=\"system\" aria-label=\"Device default\">\n <MdiIcon path={mdiThemeLightDark.path} fontSize=\"small\" />\n </ToggleButton>\n <ToggleButton value=\"dark\" aria-label=\"Dark\">\n <MdiIcon path={mdiWeatherNight.path} fontSize=\"small\" />\n </ToggleButton>\n </ToggleButtonGroup>\n )\n }\n\n return (\n // The browser's own tooltip (`title`), not MUI's: Tooltip brings Popper\n // and popper.js, 30 KB raw on every page that places this switch\n // (AGL-3401).\n <IconButton\n ref={ref as any}\n onClick={(event) => toggleThemeMode(event)}\n aria-label=\"Toggle color theme\"\n title={`Theme: ${cookieMode ?? 'device default'}`}\n color=\"inherit\"\n {...rest}\n >\n <MdiIcon\n // Key off the visitor's SELECTION, not the resolved mode: with\n // 'device default' chosen, `mode` still resolves to light or dark,\n // so the button showed a sun/moon and the system state was\n // invisible — you couldn't tell it apart from an explicit choice.\n // Same mapping the toggle variant uses.\n path={\n cookieMode === 'dark'\n ? mdiWeatherNight.path\n : cookieMode === 'light'\n ? mdiWhiteBalanceSunny.path\n : mdiThemeLightDark.path\n }\n fontSize=\"small\"\n />\n </IconButton>\n )\n },\n)\nThemeModeSwitcher.displayName = 'AglynThemeModeSwitcher'\n\nexport const schema: Aglyn.ComponentSchema<ThemeModeSwitcherProps> = {\n $id: ID,\n pluginId: BUNDLE_ID,\n displayName: 'Theme mode switcher',\n description:\n 'Lets visitors override the site theme with light, dark, or device default. Hidden on published pages while the theme has its dark scheme switched off.',\n category: Aglyn.ComponentCategory.INPUT,\n icon: { path: mdiThemeLightDark.path, sx: { color: '#7b1fa2' } },\n flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n attributes: [\n {\n name: 'variant',\n label: 'Variant',\n description:\n 'Icon button cycles modes on click; toggle shows light / device / dark.',\n component: Aglyn.FieldComponentType.SELECT,\n options: [\n { value: 'icon', label: 'Icon button' },\n { value: 'toggle', label: 'Toggle group' },\n ],\n },\n ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n {\n $id: generatePresetId(ID),\n type: Aglyn.NodeType.PRESET,\n displayName: 'Theme mode switcher',\n pluginId: BUNDLE_ID,\n description: 'Visitor light/dark/system override button',\n category: Aglyn.ComponentCategory.INPUT,\n icon: { path: mdiThemeLightDark.path, sx: { color: '#7b1fa2' } },\n data: {\n $id: null,\n componentId: ID,\n pluginId: BUNDLE_ID,\n props: { variant: 'icon' },\n },\n },\n]\n\nexport default ThemeModeSwitcher\n"],"names":["Aglyn","mdiThemeLightDark","mdiWeatherNight","mdiWhiteBalanceSunny","MdiIcon","useThemeMode","IconButton","ToggleButton","ToggleButtonGroup","forwardRef","useContext","BUNDLE_ID","generatePresetId","ID","ThemeModeSwitcher","props","ref","variant","rest","toggleThemeMode","cookieMode","canGoDark","editorInert","ScreenLinkContext","size","exclusive","value","onChange","event","aria-label","path","fontSize","onClick","title","color","displayName","schema","$id","pluginId","description","category","ComponentCategory","INPUT","icon","sx","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","name","label","component","FieldComponentType","SELECT","options","presets","type","NodeType","PRESET","data","componentId"],"mappings":"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"}
|