[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"package:filament-panel-kit":3},{"type":4,"package":5,"activeDoc":17,"seo":130,"alternates":132,"editable":134},"package",{"id":6,"title":7,"slug":8,"url":9,"excerpt":10,"formatted_price":11,"type":12,"github_url":15,"external_url":16,"plumb":17,"category":18,"tags":22,"cover":17,"blocks":29,"toc":73,"docs":129},8,"Filament Panel Kit","filament-panel-kit","\u002Fpackages\u002Ffilament-panel-kit","An add-on that takes over the appearance of a Filament panel: four themes, a floating layout, branded authentication screens and a runtime appearance switcher.","$25",{"value":13,"label":14},"paid","Paid","https:\u002F\u002Fgithub.com\u002Ffilalabs\u002Ffilament-panel-kit-docs","https:\u002F\u002Fafsakar.lemonsqueezy.com\u002Fcheckout\u002Fbuy\u002F08410649-6599-4dc6-a266-e0e23dcbaf04",null,{"id":19,"title":20,"slug":21},3,"Filament","filamenet",[23,26],{"id":24,"title":25,"slug":25},13,"v4",{"id":27,"title":28,"slug":28},14,"v5",[30,34,37,40,43,46,49,52,55,58,61,64,67,70],{"type":31,"data":32},"general.rich-text",{"content":33},"\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Ffilament-panel-kit-banner.png\" alt=\"Filalabs Filament Panel Kit\" \u002F>\u003C\u002Fp>\n\u003Cp>An add-on that takes over the appearance of a Filament panel: four themes, a\nfloating layout, branded authentication screens and a runtime appearance\nswitcher.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Ftheme-switcher.gif\" alt=\"The appearance menu switching a Filament table page between the Quartz, Flat and Canvas themes and toggling the floating and compact layouts\" \u002F>\u003C\u002Fp>\n\u003Cp>The \u003Ca href=\"#appearance-switcher\">appearance switcher\u003C\u002Fa> at work: the theme, the floating\nlayout and the compact layout all change in place — no reload, no request.\u003C\u002Fp>",{"type":31,"data":35},{"content":36},"\u003Ch2 id=\"screens\">Screens\u003C\u002Fh2>\n\u003Cp>Every theme, in both modes, across a dashboard of widgets, a table with tabs, a\nform with its controls, a modal and the branded sign-in screen. Captured from a\nreal Filament panel rather than a mock-up, so what is in these images is what\nthe package renders.\u003C\u002Fp>\n\u003Ch3 id=\"quartz\">Quartz\u003C\u002Fh3>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Light\u003C\u002Fth>\n\u003Cth>Dark\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-light-table.jpg\" alt=\"Quartz, light mode, a table view\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-dark-table.jpg\" alt=\"Quartz, dark mode, a table view\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-light-login.jpg\" alt=\"Quartz, light mode, the sign-in screen\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-dark-login.jpg\" alt=\"Quartz, dark mode, the sign-in screen\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Also: \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-light-dashboard.jpg\">dashboard\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-light-form.jpg\">form\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-light-modal.jpg\">modal\u003C\u002Fa> — and in dark: \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-dark-dashboard.jpg\">dashboard\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-dark-form.jpg\">form\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fquartz-dark-modal.jpg\">modal\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3 id=\"brutal\">Brutal\u003C\u002Fh3>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Light\u003C\u002Fth>\n\u003Cth>Dark\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-light-table.jpg\" alt=\"Brutal, light mode, a table view\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-dark-table.jpg\" alt=\"Brutal, dark mode, a table view\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-light-login.jpg\" alt=\"Brutal, light mode, the sign-in screen\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-dark-login.jpg\" alt=\"Brutal, dark mode, the sign-in screen\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Also: \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-light-dashboard.jpg\">dashboard\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-light-form.jpg\">form\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-light-modal.jpg\">modal\u003C\u002Fa> — and in dark: \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-dark-dashboard.jpg\">dashboard\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-dark-form.jpg\">form\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fbrutal-dark-modal.jpg\">modal\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3 id=\"flat\">Flat\u003C\u002Fh3>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Light\u003C\u002Fth>\n\u003Cth>Dark\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-light-table.jpg\" alt=\"Flat, light mode, a table view\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-dark-table.jpg\" alt=\"Flat, dark mode, a table view\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-light-login.jpg\" alt=\"Flat, light mode, the sign-in screen\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-dark-login.jpg\" alt=\"Flat, dark mode, the sign-in screen\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Also: \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-light-dashboard.jpg\">dashboard\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-light-form.jpg\">form\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-light-modal.jpg\">modal\u003C\u002Fa> — and in dark: \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-dark-dashboard.jpg\">dashboard\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-dark-form.jpg\">form\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fflat-dark-modal.jpg\">modal\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3 id=\"canvas\">Canvas\u003C\u002Fh3>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Light\u003C\u002Fth>\n\u003Cth>Dark\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-light-table.jpg\" alt=\"Canvas, light mode, a table view\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-dark-table.jpg\" alt=\"Canvas, dark mode, a table view\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-light-login.jpg\" alt=\"Canvas, light mode, the sign-in screen\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-dark-login.jpg\" alt=\"Canvas, dark mode, the sign-in screen\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Also: \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-light-dashboard.jpg\">dashboard\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-light-form.jpg\">form\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-light-modal.jpg\">modal\u003C\u002Fa> — and in dark: \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-dark-dashboard.jpg\">dashboard\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-dark-form.jpg\">form\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ffilalabs\u002Ffilament-panel-kit-docs\u002Fmain\u002Fart\u002Fcanvas-dark-modal.jpg\">modal\u003C\u002Fa>\u003C\u002Fp>",{"type":31,"data":38},{"content":39},"\u003Ch2 id=\"the-css-contract\">The CSS contract\u003C\u002Fh2>\n\u003Cp>\u003Ccode>node bin\u002Fverify.mjs\u003C\u002Fcode> checks seven rules the stylesheets must hold to. Every one\nof them encodes a bug this package actually shipped, and the reason is written\nabove the rule, because a rule whose reason is unknown gets relaxed the first\ntime it is inconvenient:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>a bare \u003Ccode>var(--colour)\u003C\u002Fcode> as a \u003Ccode>background-image\u003C\u002Fcode> layer, which is invalid and\nsilently voids the whole declaration\u003C\u002Fli>\n\u003Cli>\u003Ccode>var(--color-primary-N)\u003C\u002Fcode> and \u003Ccode>var(--color-gray-N)\u003C\u002Fcode>, which Tailwind tree-shakes\nwhen no compiled utility uses that step\u003C\u002Fli>\n\u003Cli>\u003Ccode>[data-panel-theme='x'] .dark\u003C\u002Fcode>, a descendant selector that never matches\nbecause \u003Ccode>.dark\u003C\u002Fcode> sits on the same element as the attribute\u003C\u002Fli>\n\u003Cli>painting \u003Ccode>.fi-section\u003C\u002Fcode> without excluding \u003Ccode>.fi-section-not-contained\u003C\u002Fcode>, the\nwrapper Filament puts around a widget grid\u003C\u002Fli>\n\u003Cli>an accent bound to a fixed colour rather than the panel's own palette\u003C\u002Fli>\n\u003Cli>more \u003Ccode>!important\u003C\u002Fcode> than the ceiling\u003C\u002Fli>\n\u003Cli>unbalanced braces\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The test suite runs it, so a violation fails CI rather than reaching a panel.\u003C\u002Fp>",{"type":31,"data":41},{"content":42},"\u003Ch2 id=\"requirements\">Requirements\u003C\u002Fh2>\n\u003Cp>PHP 8.2+ · Laravel 11\u002F12\u002F13 · Filament 4.x or 5.x\u003C\u002Fp>\n\u003Cp>No frontend build and no Node toolchain are required. The kit's own CSS uses no\nTailwind constructs, so nothing in it depends on your content scanning.\u003C\u002Fp>",{"type":31,"data":44},{"content":45},"\u003Ch2 id=\"installation\">Installation\u003C\u002Fh2>\n\u003Cp>This package requires a valid license to use. You can get your license here:\n\u003Ca href=\"https:\u002F\u002Fafsakar.lemonsqueezy.com\u002Fcheckout\u002Fbuy\u002F08410649-6599-4dc6-a266-e0e23dcbaf04\">Panel Kit\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>To install you'll need to add the repository to your \u003Ccode>composer.json\u003C\u002Fcode> file:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">{\n    "repositories": [\n        {\n            "type": "composer",\n            "url": "https:\u002F\u002Fsatis.afsakar.com"\n        }\n    ]\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Once the repository has been added to the \u003Ccode>composer.json\u003C\u002Fcode> file, you can install\nFilament Panel Kit like any other composer package using the \u003Ccode>composer require\u003C\u002Fcode>\ncommand:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">composer require filalabs\u002Ffilament-panel-kit\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>You will be prompted to provide your username and password. The username will be\nthe email address and the password will be equal to your license key.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-text\">Loading composer repositories with package information\nAuthentication required (satis.afsakar.com):\nUsername: [license-email]\nPassword: [license-key]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Then publish the compiled stylesheet:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">php artisan filament:assets\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The package ships a compiled stylesheet and \u003Ccode>filament:assets\u003C\u002Fcode> copies it into\n\u003Ccode>public\u002Fcss\u002Ffilalabs\u002Ffilament-panel-kit\u002F\u003C\u002Fcode>. There is no frontend build step, and\nthe panel does not need a custom Filament theme.\u003C\u002Fp>\n\u003Cp>Run \u003Ccode>php artisan filament:assets\u003C\u002Fcode> again after upgrading the package.\u003C\u002Fp>\n\u003Cp>If the panel does have a custom theme, do \u003Cstrong>not\u003C\u002Fstrong> also \u003Ccode>@import\u003C\u002Fcode> the kit's\nsources into it. The panel would load two copies, and the one compiled into the\ntheme comes later in the page, so a stale build of it silently overrides the\npublished stylesheet after every upgrade.\u003C\u002Fp>\n\u003Cp>In the panel provider:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">use Filalabs\\FilamentPanelKit\\Enums\\PanelTheme;\nuse Filalabs\\FilamentPanelKit\\PanelKitPlugin;\n\n->plugins([\n    PanelKitPlugin::make()\n        ->theme(PanelTheme::Canvas)\n        ->floating()\n        ->login(\n            heading: 'Admin Panel',\n            text: 'Content, media and translations in one place.',\n        )\n        ->themeSwitcher(),\n])\n\u003C\u002Fcode>\u003C\u002Fpre>",{"type":31,"data":47},{"content":48},"\u003Ch2 id=\"themes\">Themes\u003C\u002Fh2>\n\u003Cp>All four ship together; \u003Ccode>data-panel-theme\u003C\u002Fcode> on \u003Ccode><html>\u003C\u002Fcode> decides which one applies,\nso the rules of an inactive theme never reach the page. The default is\n\u003Ccode>PanelTheme::Quartz\u003C\u002Fcode> — the quietest of the four, and the one that asks least of\na panel it is dropped into.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>\u003C\u002Fth>\n\u003Cth>Look\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>PanelTheme::Brutal\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Thick borders, zero corners, hard offset shadows with no blur. The accent fills the table header and the active menu item outright.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>PanelTheme::Canvas\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>The page is painted in the brand colour and the content sits on a single rounded panel floating above it; the active menu item becomes a tab that merges into that panel.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>PanelTheme::Flat\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Sharp corners, areas divided by a single line, no ornament.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>PanelTheme::Quartz\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Takes its neutrals, borders and corners from the shadcn\u002Fui token contract, so a panel sits inside a product already built with it. It is not affiliated with shadcn\u002Fui; the values are read from that project's published theming documentation, and the theme file records which release it was cut against.\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>\u003Ccode>Flat\u003C\u002Fcode> carries no brand colour — structure is what tells it apart. \u003Ccode>Brutal\u003C\u002Fcode>\nleans on the panel's \u003Ccode>primary\u003C\u002Fcode> hard: it fills the table header and the active\nmenu item with it.\n\u003Ccode>Canvas\u003C\u002Fcode> paints the page from the panel's \u003Ccode>primary\u003C\u002Fcode> palette. \u003Ccode>Quartz\u003C\u002Fcode> goes the\nother way and replaces that palette with a neutral one; see \u003Cstrong>Accent\u003C\u002Fstrong> below.\u003C\u002Fp>\n\u003Ch3 id=\"accent\">Accent\u003C\u002Fh3>\n\u003Cp>\u003Ccode>Brutal\u003C\u002Fcode>, \u003Ccode>Canvas\u003C\u002Fcode> and \u003Ccode>Flat\u003C\u002Fcode> all take their accent from the panel's own\nFilament palette; none of them impose a colour of their own, and they don't\nread this setting. \u003Ccode>Quartz\u003C\u002Fcode> is the one theme in the kit that does impose a\ncolour — by default it overrides Filament's primary palette outright,\nnear-black in light and near-white in dark, exactly as the source contract's\nown primary is defined. A brand-coloured button is the first thing a reader\nof that design system notices as foreign, so Quartz's buttons, links, checked\ncontrols and focus rings follow the contract rather than the host's brand.\u003C\u002Fp>\n\u003Cp>A host can opt back out with \u003Ccode>PanelKitPlugin::accent()\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">PanelKitPlugin::make()\n    ->theme(PanelTheme::Quartz)\n    ->accent(Accent::Brand)\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>accent()\u003C\u002Fcode> takes \u003Ccode>?Accent $accent = null\u003C\u002Fcode>. The default, \u003Ccode>null\u003C\u002Fcode>, means "the\ntheme decides" and changes nothing — Quartz keeps its neutral ramp. Passing\n\u003Ccode>Accent::Brand\u003C\u002Fcode> writes \u003Ccode>data-panel-accent="brand"\u003C\u002Fcode> onto \u003Ccode><html>\u003C\u002Fcode> (the same\npattern the floating and compact settings use), which gates off Quartz's\n\u003Ccode>--primary-*\u003C\u002Fcode> override so Filament's own palette shows through again.\nPassing \u003Ccode>Accent::Neutral\u003C\u002Fcode> is for completeness — it matches Quartz's own\ndefault but also pins the \u003Ccode>--pk-accent\u003C\u002Fcode> custom property (which otherwise\nonly feeds the sidebar scrollbar's colour) to the contract's neutral values,\nin case a future theme wants to read it too.\u003C\u002Fp>",{"type":31,"data":50},{"content":51},"\u003Ch2 id=\"floating-layout\">Floating layout\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-php\">->floating()          \u002F\u002F on\n->floating(false)     \u002F\u002F off\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Sits the sidebar, topbar, tab strips and slide-overs inside the page instead of\nnailing them to the edge of the screen. It touches no colour, typography or\nshadow of its own; it reads the corner and the line from the theme, which is why\nit composes with any of them.\u003C\u002Fp>",{"type":31,"data":53},{"content":54},"\u003Ch2 id=\"authentication-screens\">Authentication screens\u003C\u002Fh2>\n\u003Cp>Visual half on the left, form on the right. Below \u003Ccode>lg\u003C\u002Fcode> the visual half is not\nrendered at all and the screen falls back to Filament's centred card — splitting\na phone screen only narrows the form.\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">->login(heading: '…', text: '…', background: '\u002Fassets\u002Fcover.webp')\n->registration(heading: '…', text: '…', background: '…')          \u002F\u002F Register\n->passwordReset()                                                 \u002F\u002F enables both password-reset screens\n->passwordResetRequest(heading: '…', text: '…', background: '…')  \u002F\u002F "forgot your password" screen\n->passwordResetUpdate(heading: '…', text: '…', background: '…')   \u002F\u002F "choose a new password" screen\n->emailVerification(heading: '…', text: '…', background: '…')     \u002F\u002F the verification prompt\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>registration()\u003C\u002Fcode>, \u003Ccode>passwordReset()\u003C\u002Fcode> and \u003Ccode>emailVerification()\u003C\u002Fcode> each take\n\u003Ccode>bool $condition = true\u003C\u002Fcode> as their first argument. Like Filament's own panel\nmethods, calling one both enables the feature and installs the branded page;\n\u003Ccode>login()\u003C\u002Fcode> takes no condition, since a panel always has a sign-in screen, and\ncalling it installs the branded one. Adopting the themes alone changes no\nauthentication behaviour.\n\u003Ccode>passwordResetRequest()\u003C\u002Fcode> and \u003Ccode>passwordResetUpdate()\u003C\u002Fcode> carry no condition of\ntheir own — \u003Ccode>passwordReset()\u003C\u002Fcode> alone decides whether the flow exists, these two\nonly set its copy.\u003C\u002Fp>\n\u003Cp>Five screens share the visual half: login, registration, the password-reset\nrequest screen, the password-reset update screen, and email verification.\nEach can be given its own \u003Ccode>heading\u003C\u002Fcode>, \u003Ccode>text\u003C\u002Fcode> and \u003Ccode>background\u003C\u002Fcode>; anything left\nunset falls back to \u003Ccode>login()\u003C\u002Fcode>'s, and \u003Ccode>login()\u003C\u002Fcode>'s own \u003Ccode>heading\u003C\u002Fcode> falls back to\nthe panel's brand name. A panel that only calls \u003Ccode>login(...)\u003C\u002Fcode> shows that copy\non all five screens, exactly as before this option existed:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">->login(heading: 'Admin Panel', text: 'Content, media and translations in one place.')\n->passwordReset()\n->passwordResetRequest(heading: 'Forgot your password?', text: 'We will email you a reset link.')\n->passwordResetUpdate(heading: 'Choose a new password', text: 'Make it a strong one.')\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Here login, registration and email verification all show "Admin Panel", while\nthe two password-reset screens show their own heading and text.\u003C\u002Fp>\n\u003Cp>There is deliberately no counterpart to \u003Ccode>Panel::emailChangeVerification()\u003C\u002Fcode>: that\nflow has no page. Its link lands on a controller which verifies, flashes a\nnotification and redirects, so there is nothing to re-skin — call Filament's own\nmethod for it.\u003C\u002Fp>",{"type":31,"data":56},{"content":57},"\u003Ch2 id=\"shape-and-motion\">Shape and motion\u003C\u002Fh2>\n\u003Cp>These settings are read at runtime rather than compiled in, so changing them\ntakes effect with no rebuild and no republished asset:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-php\">PanelKitPlugin::make()\n    ->theme(PanelTheme::Flat)\n    ->roundness(0.5)          \u002F\u002F 1 is the theme's own corner, 0 is square, up to 3\n    ->motion(false)           \u002F\u002F collapses transitions\n    ->compact(scale: 0.9)     \u002F\u002F 1 is Filament's own spacing, down to 0.75\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>roundness()\u003C\u002Fcode> scales whatever corner the active theme chose rather than\nimposing a value of its own, so it means different absolute radii in different\nthemes — which is the point: a theme keeps its character and you decide how far\nit goes. It also retunes Filament's own \u003Ccode>rounded-*\u003C\u002Fcode> utilities, so components the\nkit never names follow along.\u003C\u002Fp>\n\u003Cp>Animations keep running when motion is off — Filament's loading spinner in\nparticular — so a pending request still looks pending rather than hung; only\ntransitions are collapsed.\u003C\u002Fp>\n\u003Cp>\u003Ccode>compact()\u003C\u002Fcode> is a toggle, not just a setting: the plugin sets its default, but a\nviewer can flip it from the appearance menu with no round trip, the same way\nthey flip the floating layout. \u003Ccode>scale:\u003C\u002Fcode> tunes how far it goes — it scales the\npanel's whole spacing base, so padding, gaps and row heights compact together.\nIcons scale with it too, because Tailwind sizes them from that same base — at\n\u003Ccode>0.9\u003C\u002Fcode> a table row goes from 53px to 48px and a sidebar icon from 24px to\n21.6px, which is why the range stops at \u003Ccode>0.75\u003C\u002Fcode>. Below that a sidebar icon lands\nunder 18px and the panel stops being compact and starts being small.\u003C\u002Fp>\n\u003Cp>There is deliberately no elevation setting. Filament's compiled stylesheet\nwrites shadows as literals rather than reading a token, so shadow depth cannot\nbe changed without a rule per component.\u003C\u002Fp>",{"type":31,"data":59},{"content":60},"\u003Ch2 id=\"appearance-switcher\">Appearance switcher\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-php\">->themeSwitcher()                                   \u002F\u002F TOPBAR_END\n->themeSwitcher(app()->isLocal())                   \u002F\u002F conditional\n->themeSwitcher(renderHook: PanelsRenderHook::TOPBAR_START)\n->themeSwitcher(themes: [PanelTheme::Brutal, PanelTheme::Canvas])\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>A button in the topbar opening the panel's appearance in one place: the colour\nmode (light, dark, system) at the top, a radio group beneath it in which every\ntheme is drawn by an icon of its own layout, and the floating and compact\ntoggles last. A choice applies with no reload and no request, and is remembered\nin the browser.\u003C\u002Fp>\n\u003Cp>While the switcher is on, Filament's own light\u002Fdark\u002Fsystem group leaves the user\nmenu — the plugin turns off the panel's \u003Ccode>themeSwitcher()\u003C\u002Fcode> — and the branded\nsign-in screens show the appearance menu in its place. The colour mode row\nfollows Filament's rules: it is absent when the panel has dark mode disabled or\nforced. Choosing a mode dispatches the same \u003Ccode>theme-changed\u003C\u002Fcode> event Filament's\nswitcher does, so the stored preference and its behaviour are Filament's own.\u003C\u002Fp>\n\u003Cp>While the switcher is off its stored preference is \u003Cstrong>never read\u003C\u002Fstrong>, so a value\nleft behind by a switcher that used to be enabled cannot bring back a layout the\npanel no longer offers.\u003C\u002Fp>",{"type":31,"data":62},{"content":63},"\u003Ch2 id=\"how-it-works\">How it works\u003C\u002Fh2>\n\u003Cp>An inline script is rendered at \u003Ccode>HEAD_END\u003C\u002Fcode> and writes \u003Ccode>data-panel-theme\u003C\u002Fcode> — and,\nwhen enabled, \u003Ccode>data-panel-floating\u003C\u002Fcode>, \u003Ccode>data-panel-compact\u003C\u002Fcode> and\n\u003Ccode>data-panel-accent\u003C\u002Fcode> — onto \u003Ccode><html>\u003C\u002Fcode>.\nRunning inline in the head puts the attributes in place before the first\npaint, so no unthemed frame ever shows. Filament bootstraps its own dark mode\nthe same way; the script re-applies itself on \u003Ccode>livewire:navigated\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>The switcher writes to \u003Ccode>localStorage\u003C\u002Fcode>: \u003Ccode>panelTheme\u003C\u002Fcode> (the theme key),\n\u003Ccode>panelFloating\u003C\u002Fcode> and \u003Ccode>panelCompact\u003C\u002Fcode> (each \u003Ccode>'1'\u003C\u002Fcode> \u002F \u003Ccode>'0'\u003C\u002Fcode> \u002F absent, meaning the\nplugin's own setting).\u003C\u002Fp>\n\u003Cp>The runtime settings — roundness, motion, the compact scale and a neutral\naccent — are a small \u003Ccode><style id="panel-kit-tokens">\u003C\u002Fcode> block rendered at\n\u003Ccode>STYLES_AFTER\u003C\u002Fcode>, which is why changing them needs no rebuild.\u003C\u002Fp>",{"type":31,"data":65},{"content":66},"\u003Ch2 id=\"customisation\">Customisation\u003C\u002Fh2>\n\u003Cp>Every theme keeps its settings in variables you can override on \u003Ccode>:root\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-css\">:root[data-panel-theme='canvas'] {\n    --canvas-radius: 1.5rem;\n    --canvas-inset: 1rem;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Theme\u003C\u002Fth>\n\u003Cth>Variables\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>brutal\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>--brutal-line\u003C\u002Fcode> \u003Ccode>--brutal-border\u003C\u002Fcode> \u003Ccode>--brutal-shadow\u003C\u002Fcode> \u003Ccode>--brutal-shadow-sm\u003C\u002Fcode> \u003Ccode>--brutal-shadow-color\u003C\u002Fcode> \u003Ccode>--brutal-ground\u003C\u002Fcode> \u003Ccode>--brutal-surface\u003C\u002Fcode> \u003Ccode>--brutal-accent\u003C\u002Fcode> \u003Ccode>--brutal-on-accent\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>canvas\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>--canvas-page\u003C\u002Fcode> \u003Ccode>--canvas-panel\u003C\u002Fcode> \u003Ccode>--canvas-on-page\u003C\u002Fcode> \u003Ccode>--canvas-accent\u003C\u002Fcode> \u003Ccode>--canvas-line\u003C\u002Fcode> \u003Ccode>--canvas-radius\u003C\u002Fcode> \u003Ccode>--canvas-inset\u003C\u002Fcode> \u003Ccode>--canvas-notch\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>flat\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>--flat-surface\u003C\u002Fcode> \u003Ccode>--flat-ground\u003C\u002Fcode> \u003Ccode>--flat-line\u003C\u002Fcode> \u003Ccode>--flat-radius\u003C\u002Fcode> \u003Ccode>--flat-accent\u003C\u002Fcode> \u003Ccode>--flat-muted\u003C\u002Fcode> \u003Ccode>--flat-grid\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>quartz\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>--quartz-page\u003C\u002Fcode> \u003Ccode>--quartz-surface\u003C\u002Fcode> \u003Ccode>--quartz-sidebar\u003C\u002Fcode> \u003Ccode>--quartz-muted\u003C\u002Fcode> \u003Ccode>--quartz-muted-fg\u003C\u002Fcode> \u003Ccode>--quartz-line\u003C\u002Fcode> \u003Ccode>--quartz-ring\u003C\u002Fcode> \u003Ccode>--quartz-radius\u003C\u002Fcode> \u003Ccode>--quartz-accent\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>The floating add-on reads its corner, line and surface from three variables:\n\u003Ccode>--panel-radius\u003C\u002Fcode>, \u003Ccode>--panel-line\u003C\u002Fcode>, \u003Ccode>--panel-surface\u003C\u002Fcode>. Every theme binds them to its\nown tokens — Flat leaves \u003Ccode>--panel-surface\u003C\u002Fcode> on the add-on's default, which is\nalready its card colour. Bind them in your own theme too, or the add-on falls\nback to square corners and a neutral grey line.\u003C\u002Fp>\n\u003Cp>Views live under \u003Ccode>panel-kit::\u003C\u002Fcode>, translations under \u003Ccode>filament-panel-kit::panel-kit.*\u003C\u002Fcode>.\nTo publish either:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">php artisan vendor:publish --tag=panel-kit-views\nphp artisan vendor:publish --tag=filament-panel-kit-translations\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>(The two prefixes differ: the view namespace is set by hand, while the\ntranslation namespace is derived from the package name.)\u003C\u002Fp>\n\u003Cp>Turkish and English translations ship with the package.\u003C\u002Fp>",{"type":31,"data":68},{"content":69},"\u003Ch2 id=\"tests\">Tests\u003C\u002Fh2>\n\u003Cpre>\u003Ccode class=\"language-bash\">composer install\nvendor\u002Fbin\u002Fpest\n\u003C\u002Fcode>\u003C\u002Fpre>",{"type":31,"data":71},{"content":72},"\u003Ch2 id=\"note-on-the-source\">Note on the source\u003C\u002Fh2>\n\u003Cp>Code comments throughout the package explain why a rule or a decision exists —\noften the bug it prevents and how that was measured — which matters most when a\nFilament upgrade changes the ground underneath. They live in the sources; the\ncompiled stylesheet is minified and carries none of them.\u003C\u002Fp>",[74,78,81,84,87,90,93,96,99,102,105,108,111,114,117,120,123,126],{"id":75,"label":76,"level":77},"screens","Screens",2,{"id":79,"label":80,"level":19},"quartz","Quartz",{"id":82,"label":83,"level":19},"brutal","Brutal",{"id":85,"label":86,"level":19},"flat","Flat",{"id":88,"label":89,"level":19},"canvas","Canvas",{"id":91,"label":92,"level":77},"the-css-contract","The CSS contract",{"id":94,"label":95,"level":77},"requirements","Requirements",{"id":97,"label":98,"level":77},"installation","Installation",{"id":100,"label":101,"level":77},"themes","Themes",{"id":103,"label":104,"level":19},"accent","Accent",{"id":106,"label":107,"level":77},"floating-layout","Floating layout",{"id":109,"label":110,"level":77},"authentication-screens","Authentication screens",{"id":112,"label":113,"level":77},"shape-and-motion","Shape and motion",{"id":115,"label":116,"level":77},"appearance-switcher","Appearance switcher",{"id":118,"label":119,"level":77},"how-it-works","How it works",{"id":121,"label":122,"level":77},"customisation","Customisation",{"id":124,"label":125,"level":77},"tests","Tests",{"id":127,"label":128,"level":77},"note-on-the-source","Note on the source",[],{"html":131},"\u003Ctitle>Filament Panel Kit - Azad Furkan Şakar\u003C\u002Ftitle>\n\u003Cmeta name=\"description\" content=\"An add-on that takes over the appearance of a Filament panel: four themes, a floating layout, branded authentication screens and a runtime appearance switcher.\">\n\u003Cmeta name=\"keywords\" content=\"laravel, backend, developer, php\">\n\u003Clink rel=\"canonical\" href=\"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit\">\n\u003Clink rel=\"alternate\" hreflang=\"en\" href=\"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit\">\n\u003Clink rel=\"alternate\" hreflang=\"x-default\" href=\"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit\">\n\u003Cmeta name=\"robots\" content=\"index, follow\">\n\u003Cmeta property=\"og:title\" content=\"Filament Panel Kit\">\n\u003Cmeta property=\"og:description\" content=\"An add-on that takes over the appearance of a Filament panel: four themes, a floating layout, branded authentication screens and a runtime appearance switcher.\">\n\u003Cmeta property=\"og:type\" content=\"website\">\n\u003Cmeta property=\"og:site_name\" content=\"Azad Furkan Şakar\">\n\u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit\">\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fafsakar.dev\u002Fstorage\u002Fog-images\u002Fpackages\u002F8-en.png\">\n\n\u003Cmeta name=\"twitter:site\" content=\"afsakar\">\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\">\n\u003Cmeta name=\"twitter:image\" content=\"https:\u002F\u002Fafsakar.dev\u002Fstorage\u002Fog-images\u002Fpackages\u002F8-en.png\">\n\u003Cmeta name=\"twitter:title\" content=\"Filament Panel Kit\">\n\u003Cmeta name=\"twitter:description\" content=\"An add-on that takes over the appearance of a Filament panel: four themes, a floating layout, branded authentication screens and a runtime appearance switcher.\">\n\u003Cmeta name=\"twitter:url\" content=\"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit\">\n\u003Cscript type=\"application\u002Fld+json\">{\"@context\":\"https:\u002F\u002Fschema.org\",\"@type\":\"WebPage\",\"name\":\"Filament Panel Kit\",\"description\":\"An add-on that takes over the appearance of a Filament panel: four themes, a floating layout, branded authentication screens and a runtime appearance switcher.\",\"url\":\"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit\",\"image\":\"https:\u002F\u002Fafsakar.dev\u002Fstorage\u002Fog-images\u002Fpackages\u002F8-en.png\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit\"}}\u003C\u002Fscript>\u003Cscript type=\"application\u002Fld+json\">{\"@context\":\"https:\u002F\u002Fschema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\u002F\u002Fafsakar.dev\u002F\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Packages\",\"item\":\"https:\u002F\u002Fafsakar.dev\u002Fpackages\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Filament Panel Kit\",\"item\":\"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit\"}]}\u003C\u002Fscript>\u003Cscript type=\"application\u002Fld+json\">{\"@context\":\"https:\u002F\u002Fschema.org\",\"@type\":\"Person\",\"name\":\"Azad Furkan Şakar\",\"url\":\"https:\u002F\u002Fafsakar.dev\",\"@id\":\"https:\u002F\u002Fafsakar.dev\u002F#person\",\"jobTitle\":\"Backend Developer\",\"image\":\"https:\u002F\u002Fafsakar.dev\u002Fstorage\u002Fsettings\u002Fseo\u002F01KZB422BTYXF3J7XS1J2X8GYZ.jpeg\",\"sameAs\":[\"https:\u002F\u002Fx.com\u002Fafsakar\",\"https:\u002F\u002Flinkedin.com\u002Fin\u002Fafsakar\",\"https:\u002F\u002Fgithub.com\u002Fafsakar\"]}\u003C\u002Fscript>",{"en":133},"https:\u002F\u002Fafsakar.dev\u002Fpackages\u002Ffilament-panel-kit",{"type":4,"id":6}]