diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index a9f0941..9475a27 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,28 +1,103 @@ # Instructions for WayGate -WayGate is a modular platform for building Generation-Augmented Retrieval (GAR) workflows. This repository contains the core framework, libraries, plugins, and MCP server. Users can create their own modules to extend its functionality. +WayGate is a Python-first monorepo for building Generation-Augmented Retrieval workflows around a shared plugin runtime. The repository currently has three main working areas: -## Global Override Instructions for Agents +- `apps/` for long-running services such as the web app, scheduler, and workers +- `libs/` for shared runtime, worker, and workflow packages +- `plugins/` for first-party storage, communication, webhook, and provider plugins -These instructions will override any other instructions provided in the repository for GitHub Copilot. +The primary operator surface is a server-rendered FastAPI app under `apps/web`, with mountable webhook ingress extracted into `libs/webhooks`. -- Do not write code before stating assumptions. -- Do not claim correctness you haven't verified. -- Do not handle only the happy path. -- Under what conditions does this work? -- What are the edge cases? -- What are the security implications? -- What are the maintainability implications? +The repo is not a single app. Changes should respect package boundaries and the plugin-first runtime described in `docs/design/`. + +## Global Working Rules + +These rules override generic behavior for agents working in this repository. + +- State assumptions before writing code or making structural edits. +- Do not claim correctness you have not verified. +- Do not handle only the happy path; check failure modes, edge cases, and rollback behavior. +- Call out security implications when touching webhooks, storage, auth, networking, workflow dispatch, or agent-facing inputs. +- Call out maintainability implications when changing shared contracts, plugin hooks, or package boundaries. +- Prefer surgical changes that follow existing patterns in the touched package instead of introducing a new abstraction layer. +- Derive commands, naming, and conventions from the repository instead of relying on tool defaults or template boilerplate. + +## Repo Shape And Boundaries + +Use the current repository layout and names when reasoning about changes. + +- `apps/web` is the unified FastAPI host for the operator UI, AuthTuna auth flows, and mounted webhook ingress. +- `apps/scheduler` emits scheduled workflow triggers. +- `apps/worker-app` is the transport-agnostic worker process for workflow execution. +- `libs/core` owns bootstrap, plugin hooks, config, logging, and shared schema types. +- `libs/webhooks` owns the mountable FastAPI webhook ingress app and webhook-specific OpenAPI helpers. +- `libs/worker` contains shared worker runtime helpers. +- `libs/workflows` contains workflow logic and LangGraph-based orchestration. +- `plugins/*` contains first-party implementations of the core plugin interfaces. + +Do not describe legacy names as current behavior. When architecture questions come up, prefer the terminology used in `docs/design/architecture.md`. + +## Backend And Python Workflow + +The backend workspace uses Python 3.14+, `uv`, pytest, Ruff, and Pyright-related tooling. + +- Prefer `uv` commands for Python environment and package operations. +- Use repo tasks and package-local commands instead of inventing one-off workflows. +- Root setup and test commands should align with the repo files: + - `uv sync --all-groups --all-extras --all-packages` + - `uv run pytest` + - `uv run ruff check . --fix` + - `uv run ruff format .` +- When touching only one package, run the narrowest relevant tests first. +- When changing shared workflow, plugin, or API contracts, run broader regression coverage before concluding. +- If you could not run validation, say so explicitly and state why. + +## Web App + +The primary UI now lives in `apps/web` as a server-rendered FastAPI app. + +Current web stack: + +- FastAPI +- Jinja2 templates +- HTMX +- FastHX for server-rendered page and fragment helpers +- AuthTuna for auth routes and token-oriented auth building blocks +- Tailwind and daisyUI loaded from pinned CDNs unless the user explicitly asks for a local asset pipeline + +Web-app working rules: + +- Keep page routes, templates, and auth wiring inside `apps/web` unless a cross-app library boundary is clearly justified. +- Put mountable webhook ingress behavior in `libs/webhooks`, not in `libs/core`. +- Preserve the existing Python-first tooling and validation flow; do not introduce a Node build step for the web app unless the user asks for one. +- Keep the parent app's OpenAPI surface authoritative by merging mounted webhook schema into the parent docs. + +## Documentation, Design, And Planning + +This repository uses markdown documents under `docs/design/` to capture current design decisions and roadmap themes. Those documents are the source of truth for intended architecture and terminology. + +- Read `docs/design/` before making structural changes to runtime, workflows, storage, or plugin boundaries. +- Update the relevant design docs when a change materially alters system architecture, contracts, or terminology. +- Use `docs/plans/` for new planning documents and implementation plans. +- Treat `docs/plans/` as historical or proposed context, not the authoritative description of current behavior. +- When code and docs disagree, resolve the mismatch instead of silently following stale text. + +## Web App Documentation Expectations + +If a change materially affects `apps/web` or `libs/webhooks`, update the relevant documentation instead of leaving the operator surface implicit in backend-only docs. + +- Update repo-facing docs when the web app introduces new developer workflows, environment needs, or architectural expectations. +- Keep auth guidance specific to the current AuthTuna integration rather than generic FastAPI auth advice. ## Commit Message Convention -This repository uses [Conventional Commits](https://www.conventionalcommits.org/) to drive automated versioning and changelogs via release-please. All commits **must** follow this format: +This repository uses [Conventional Commits](https://www.conventionalcommits.org/) to drive automated versioning and changelogs via release-please. All commits must follow this format: -``` +```text (): ``` -**Types that trigger a release:** +Types that trigger a release: | Type | Release bump | When to use | | ------------------------------------------------------- | ------------ | ----------------------- | @@ -31,30 +106,29 @@ This repository uses [Conventional Commits](https://www.conventionalcommits.org/ | `perf` | patch | Performance improvement | | `feat!` / `fix!` / any `!` or `BREAKING CHANGE:` footer | major | Breaking API change | -**Types that do NOT trigger a release:** +Types that do not trigger a release: `docs`, `chore`, `refactor`, `test`, `style`, `ci`, `build` -**Scope** should be the package name or area (e.g., `core`, `api`, `local-storage`, `provider-ollama`). +Scope should be the package name or area, for example `core`, `web`, `webhooks`, `local-storage`, or `provider-ollama`. -**Examples:** +Examples: -``` +```text feat(core): add plugin config registration hook fix(local-storage): handle missing base_path gracefully -feat(api)!: remove deprecated /v1 endpoint -docs(core): update bootstrap usage example +feat(web)!: remove deprecated operator endpoint +docs(web): document local operator workflow chore(release): release waygate-core 0.2.0 ``` Agents generating commits or commit message suggestions must follow this convention. Do not use free-form commit messages. -## Planning and Design - -This repository uses markdown files under `docs/design/` to capture current design decisions and future roadmap themes. These documents are the source of truth for how the system works and where it's going. When implementing new features or making changes, refer to these design docs to ensure alignment with the overall architecture and roadmap. Update the design docs as needed when making significant changes or adding new features that impact the system's design. +## LangChain And LangGraph -This repository uses markdown files under `docs/plans/` to capture historical planning documents that informed the current design but are not themselves the source of truth for current behavior. These documents are useful for background and context, but should not be treated as defining current contracts or implementations. When in doubt, refer to the code and the `docs/design/` docs for the current state of the system. When creating a plan always write the plan to a new file under `docs/plans/` rather than editing the existing design docs, to preserve a clear record of how the design evolved over time. +When writing code that uses LangChain or when you need LangChain documentation, always use the `langchain-docs` MCP server defined in `.vscode/mcp.json` to query the official documentation. Do not hardcode API details that can be retrieved from the documentation server. -## LangChain +For workflow changes: -when writing code that uses langchain, or when needing to reference langchain documentation, always use the `langchain-docs` mcp server defined in `.vscode/mcp.json` to query the official langchain documentation. Do not link directly to the documentation or hardcode any information that can be obtained from the documentation, as it may become outdated. Always query the `langchain-docs` mcp server for the most up-to-date information on langchain usage, best practices, and API details. +- Keep LangGraph and workflow implementation concerns inside the existing workflow package boundaries unless there is a deliberate architectural reason to move them. +- Do not introduce ad hoc agent-framework patterns without checking the current design docs first. diff --git a/.github/instructions/daisyui.instructions.md b/.github/instructions/daisyui.instructions.md new file mode 100644 index 0000000..e289b3c --- /dev/null +++ b/.github/instructions/daisyui.instructions.md @@ -0,0 +1,1873 @@ +--- +description: daisyUI 5 +alwaysApply: true +applyTo: "**" +downloadedFrom: https://daisyui.com/llms.txt +version: 5.5.x +--- + +# daisyUI 5 +daisyUI 5 is a CSS library for Tailwind CSS 4 +daisyUI 5 provides class names for common UI components + +- [daisyUI 5 docs](http://daisyui.com) +- [Guide: How to use this file in LLMs and code editors](https://daisyui.com/docs/editor/) +- [daisyUI 5 release notes](https://daisyui.com/docs/v5/) +- [daisyUI 4 to 5 upgrade guide](https://daisyui.com/docs/upgrade/) + +## daisyUI 5 install notes +[install guide](https://daisyui.com/docs/install/) +1. daisyUI 5 requires Tailwind CSS 4 +2. `tailwind.config.js` file is deprecated in Tailwind CSS v4. do not use `tailwind.config.js`. Tailwind CSS v4 only needs `@import "tailwindcss";` in the CSS file if it's a node dependency. +3. daisyUI 5 can be installed using `npm i -D daisyui@latest` and then adding `@plugin "daisyui";` to the CSS file +4. daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files: +```html + + +``` +5. A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency) +```css +@import "tailwindcss"; +@plugin "daisyui"; +``` + +## daisyUI 5 usage rules +1. We can give styles to a HTML element by adding daisyUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component) +2. Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing daisyUI classes. For example `btn px-10` sets a custom horizontal padding to a `btn` +3. If customization of daisyUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the `!` at the end of the Tailwind CSS utility class to override the existing styles. For example `btn bg-red-500!` sets a custom background color to a `btn` forcefully. This is a last resort solution and should be used sparingly +4. If a specific component or something similar to it doesn't exist in daisyUI, you can create your own component using Tailwind CSS utility +5. when using Tailwind CSS `flex` and `grid` for layout, it should be responsive using Tailwind CSS responsive utility prefixes. +6. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes. +7. Ideally, you won't need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred. +8. suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want +9. suggested - when designing , don't add a custom font unless it's necessary +10. don't add `bg-base-100 text-base-content` to body unless it's necessary +11. For design decisions, use Refactoring UI book best practices + +daisyUI 5 class names are one of the following categories. These type names are only for reference and are not used in the actual code +- `component`: the required component class +- `part`: a child part of a component +- `style`: sets a specific style to component or part +- `behavior`: changes the behavior of component or part +- `color`: sets a specific color to component or part +- `size`: sets a specific size to component or part +- `placement`: sets a specific placement to component or part +- `direction`: sets a specific direction to component or part +- `modifier`: modifies the component or part in a specific way +- `variant`: prefixes for utility classes that conditionally apply styles. syntax is `variant:utility-class` + +## Config +daisyUI 5 config docs: https://daisyui.com/docs/config/ +daisyUI without config: +```css +@plugin "daisyui"; +``` +daisyUI config with `light` theme only: +```css +@plugin "daisyui" { + themes: light --default; +} +``` +daisyUI with all the default configs: +```css +@plugin "daisyui" { + themes: light --default, dark --prefersdark; + root: ":root"; + include: ; + exclude: ; + prefix: ; + logs: true; +} +``` +An example config: +In below config, all the built-in themes are enabled while bumblebee is the default theme and synthwave is the prefersdark theme (default dark mode) +All the other themes are enabled and can be used by adding `data-theme="THEME_NAME"` to the `` element +root scrollbar gutter is excluded. `daisy-` prefix is used for all daisyUI classes and console.log is disabled +```css +@plugin "daisyui" { + themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk; + root: ":root"; + include: ; + exclude: rootscrollgutter, checkbox; + prefix: daisy-; + logs: false; +} +``` +## daisyUI 5 colors + +### daisyUI color names +- `primary`: Primary brand color, The main color of your brand +- `primary-content`: Foreground content color to use on primary color +- `secondary`: Secondary brand color, The optional, secondary color of your brand +- `secondary-content`: Foreground content color to use on secondary color +- `accent`: Accent brand color, The optional, accent color of your brand +- `accent-content`: Foreground content color to use on accent color +- `neutral`: Neutral dark color, For not-saturated parts of UI +- `neutral-content`: Foreground content color to use on neutral color +- `base-100`:-100 Base surface color of page, used for blank backgrounds +- `base-200`:-200 Base color, darker shade, to create elevations +- `base-300`:-300 Base color, even more darker shade, to create elevations +- `base-content`: Foreground content color to use on base color +- `info`: Info color, For informative/helpful messages +- `info-content`: Foreground content color to use on info color +- `success`: Success color, For success/safe messages +- `success-content`: Foreground content color to use on success color +- `warning`: Warning color, For warning/caution messages +- `warning-content`: Foreground content color to use on warning color +- `error`: Error color, For error/danger/destructive messages +- `error-content`: Foreground content color to use on error color + +### daisyUI color rules +1. daisyUI adds semantic color names to Tailwind CSS colors +2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. for example, `bg-primary` will use the primary color for the background +3. daisyUI color names include variables as value so they can change based the theme +4. There's no need to use `dark:` for daisyUI color names +5. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme +6. If a Tailwind CSS color name (like `red-500`) is used, it will be same red color on all themes +7. If a daisyUI color name (like `primary`) is used, it will change color based on the theme +8. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color `text-gray-800` on `bg-base-100` would be unreadable on a dark theme - because on dark theme, `bg-base-100` is a dark color +9. `*-content` colors should have a good contrast compared to their associated colors +10. suggestion - when designing a page use `base-*` colors for majority of the page. use `primary` color for important elements + +### daisyUI custom theme with custom colors +A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this: +```css +@import "tailwindcss"; +@plugin "daisyui"; +@plugin "daisyui/theme" { + name: "mytheme"; + default: true; /* set as default */ + prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ + color-scheme: light; /* color of browser-provided UI */ + + --color-base-100: oklch(98% 0.02 240); + --color-base-200: oklch(95% 0.03 240); + --color-base-300: oklch(92% 0.04 240); + --color-base-content: oklch(20% 0.05 240); + --color-primary: oklch(55% 0.3 240); + --color-primary-content: oklch(98% 0.01 240); + --color-secondary: oklch(70% 0.25 200); + --color-secondary-content: oklch(98% 0.01 200); + --color-accent: oklch(65% 0.25 160); + --color-accent-content: oklch(98% 0.01 160); + --color-neutral: oklch(50% 0.05 240); + --color-neutral-content: oklch(98% 0.01 240); + --color-info: oklch(70% 0.2 220); + --color-info-content: oklch(98% 0.01 220); + --color-success: oklch(65% 0.25 140); + --color-success-content: oklch(98% 0.01 140); + --color-warning: oklch(80% 0.25 80); + --color-warning-content: oklch(20% 0.05 80); + --color-error: oklch(65% 0.3 30); + --color-error-content: oklch(98% 0.01 30); + + --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */ + --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */ + --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */ + /* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */ + + --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. In so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */ + --size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. In so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */ + + --border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. In so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */ + + --depth: 1; /* only 0 or 1 – Adds a shadow and subtle 3D depth effect to components */ + --noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */ +} +``` +#### Rules +- All CSS variables above are required +- Colors can be OKLCH or hex or other formats +- If you're generating a custom theme, do not include the comments from the example above. Just provide the code. + +People can use https://daisyui.com/theme-generator/ visual tool to create their own theme. + +## daisyUI 5 components + +### accordion +Accordion is used for showing and hiding content but only one item can stay open at a time + +[accordion docs](https://daisyui.com/components/accordion/) + +#### Class names +- component: `collapse` +- part: `collapse-title`, `collapse-content` +- modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close` + +#### Syntax +```html +
{CONTENT}
+``` +where content is: +```html + +
{title}
+
{CONTENT}
+``` + +#### Rules +- {MODIFIER} is optional and can have one of the modifier class names +- Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time +- If you have more than one set of accordion items on a page, use different names for the radio inputs on each set +- Replace {name} with a unique name for the accordion group +- replace `{checked}` with `checked="checked"` if you want the accordion to be open by default + +### alert +Alert informs users about important events + +[alert docs](https://daisyui.com/components/alert/) + +#### Class names +- component: `alert` +- style: `alert-outline`, `alert-dash`, `alert-soft` +- color: `alert-info`, `alert-success`, `alert-warning`, `alert-error` +- direction: `alert-vertical`, `alert-horizontal` + +#### Syntax +```html + +``` + +#### Rules +- {MODIFIER} is optional and can have one of each style/color/direction class names +- Add `sm:alert-horizontal` for responsive layouts + +### avatar +Avatars are used to show a thumbnail + +[avatar docs](https://daisyui.com/components/avatar/) + +#### Class names +- component: `avatar`, `avatar-group` +- modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder` + +#### Syntax +```html +
+
+ +
+
+``` + +#### Rules +- {MODIFIER} is optional and can have one of the modifier class names +- Use `avatar-group` for containing multiple avatars +- You can set custom sizes using `w-*` and `h-*` +- You can use mask classes such as `mask-squircle`, `mask-hexagon`, `mask-triangle` + +### badge +Badges are used to inform the user of the status of specific data + +[badge docs](https://daisyui.com/components/badge/) + +#### Class names +- component: `badge` +- style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost` +- color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` +- size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl` + +#### Syntax +```html +Badge +``` + +#### Rules +- {MODIFIER} is optional and can have one of each style/color/size class names +- Can be used inside text or buttons +- To create an empty badge, just remove the text between the span tags + +### breadcrumbs +Breadcrumbs helps users to navigate + +[breadcrumbs docs](https://daisyui.com/components/breadcrumbs/) + +#### Class names +- component: `breadcrumbs` + +#### Syntax +```html +
+ +
+``` + +#### Rules +- breadcrumbs only has one main class name +- Can contain icons inside the links +- If you set `max-width` or the list gets larger than the container it will scroll + +### button +Buttons allow the user to take actions + +[button docs](https://daisyui.com/components/button/) + +#### Class names +- component: `btn` +- color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` +- style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link` +- behavior: `btn-active`, `btn-disabled` +- size: `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` +- modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle` + +#### Syntax +```html + +``` +#### Rules +- {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names +- btn can be used on any html tags such as ` +``` + +#### Rules +- {MODIFIER} is optional and can have one of the size class names +- To make a button active, add `dock-active` class to the button +- add `` is required for responsivness of the dock in iOS + +### drawer +Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page + +[drawer docs](https://daisyui.com/components/drawer/) + +#### Class names +- component: `drawer` +- part: `drawer-toggle`, `drawer-content`, `drawer-side`, `drawer-overlay` +- placement: `drawer-end` +- modifier: `drawer-open` +- variant: `is-drawer-open:`, `is-drawer-close:` + +#### Syntax +```html +
+ +
{CONTENT}
+
{SIDEBAR}
+
+``` +where {CONTENT} can be navbar, site content, footer, etc +and {SIDEBAR} can be a menu like: +```html + +``` +To open/close the drawer, use a label that points to the `drawer-toggle` input: +```html + +``` +Example: This sidebar is always visible on large screen, can be toggled on small screen: +```html +
+ +
+ + +
+
+ +
    + +
    • +
    • +
+
+
+``` + +Example: This sidebar is always visible. When it's close we only see iocns, when it's open we see icons and text +```html +
+ +
+ +
+
+ +
+ +
    + +
  • + +
    • + +
  • + +
    • +
+ +
+ +
+
+
+
+``` + +#### Rules +- {MODIFIER} is optional and can have one of the modifier/placement class names +- `id` is required for the `drawer-toggle` input. change `my-drawer` to a unique id according to your needs +- `lg:drawer-open` can be used to make sidebar visible on larger screens +- `drawer-toggle` is a hidden checkbox. Use label with "for" attribute to toggle state +- if you want to open the drawer when a button is clicked, use `` where `my-drawer` is the id of the `drawer-toggle` input +- when using drawer, every page content must be inside `drawer-content` element. for example navbar, footer, etc should not be outside of `drawer` + +### dropdown +Dropdown can open a menu or any other element when the button is clicked + +[dropdown docs](https://daisyui.com/components/dropdown/) + +#### Class names +- component: `dropdown` +- part: `dropdown-content` +- placement: `dropdown-start`, `dropdown-center`, `dropdown-end`, `dropdown-top`, `dropdown-bottom`, `dropdown-left`, `dropdown-right` +- modifier: `dropdown-hover`, `dropdown-open`, `dropdown-close` + +#### Syntax +Using details and summary +```html +
+ Button +
    {CONTENT}
+
+``` + +Using popover API +```html + +
    {CONTENT}
+``` + +Using CSS focus +```html +
+
Button
+
    {CONTENT}
+
+``` + +#### Rules +- {MODIFIER} is optional and can have one of the modifier/placement class names +- replace `{id}` and `{anchor}` with a unique name +- For CSS focus dropdowns, use `tabindex="0"` and `role="button"` on the button +- The content can be any HTML element (not just `
    `) + +### fab +FAB (Floating Action Button) stays in the bottom corner of screen. It includes a focusable and accessible element with button role. Clicking or focusing it shows additional buttons (known as Speed Dial buttons) in a vertical arrangement or a flower shape (quarter circle) + +[fab docs](https://daisyui.com/components/fab/) + +#### Class names +- component: `fab` +- part: `fab-close`, `fab-main-action` +- modifier: `fab-flower` + +#### Syntax +A single FAB in the corder of screen +```html +
    + +
    +``` +A FAB that opens a 3 other buttons in the corner of page vertically +```html +
    +
    {IconOriginal}
    + + + +
    +``` +A FAB that opens a 3 other buttons in the corner of page vertically and they have label text +```html +
    +
    {IconOriginal}
    +
    {Label1}
    +
    {Label2}
    +
    {Label3}
    +
    +``` +FAB with rectangle buttons. These are not circular buttons so they can have more content. +```html +
    +
    {IconOriginal}
    + + + +
    +``` +FAB with close button. When FAB is open, the original button is replaced with a close button +```html +
    +
    {IconOriginal}
    +
    Close ✕
    +
    {Label1}
    +
    {Label2}
    +
    {Label3}
    +
    +``` +FAB with Main Action button. When FAB is open, the original button is replaced with a main action button +```html +
    +
    {IconOriginal}
    +
    + {LabelMainAction} +
    +
    {Label1}
    +
    {Label2}
    +
    {Label3}
    +
    +``` +FAB Flower. It opens the buttons in a flower shape (quarter circle) arrangement instead of vertical +```html +
    +
    {IconOriginal}
    + + + + +
    +``` +FAB Flower with tooltips. There's no space for a text label in a quarter circle, so tooltips are used to indicate the button's function +```html +
    +
    {IconOriginal}
    + +
    + +
    +
    + +
    +
    + +
    +
    +``` +#### Rules +- {Icon*} should be replaced with the appropriate icon for each button. SVG icons are recommended +- {IconOriginal} is the icon that we see before opening the FAB +- {IconMainAction} is the icon we see after opening the FAB +- {Icon1}, {Icon2}, {Icon3} are the icons for the additional buttons +- {Label*} is the label text for each button + +### fieldset +Fieldset is a container for grouping related form elements. It includes fieldset-legend as a title and label as a description + +[fieldset docs](https://daisyui.com/components/fieldset/) + +#### Class names +- Component: `fieldset`, `label` +- Parts: `fieldset-legend` + +#### Syntax +```html +
    + {title} + {CONTENT} +

    {description}

    +
    +``` + +#### Rules +- You can use any element as a direct child of fieldset to add form elements + +### file-input +File Input is a an input field for uploading files + +[file-input docs](https://daisyui.com/components/file-input/) + +#### Class Names: +- Component: `file-input` +- Style: `file-input-ghost` +- Color: `file-input-neutral`, `file-input-primary`, `file-input-secondary`, `file-input-accent`, `file-input-info`, `file-input-success`, `file-input-warning`, `file-input-error` +- Size: `file-input-xs`, `file-input-sm`, `file-input-md`, `file-input-lg`, `file-input-xl` + +#### Syntax +```html + +``` + +#### Rules +- {MODIFIER} is optional and can have one of each style/color/size class names + +### filter +Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option + +[filter docs](https://daisyui.com/components/filter/) + +#### Class names +- component: `filter` +- part: `filter-reset` + +#### Syntax +Using HTML form +```html +
    + + + +
    +``` +Without HTML form +```html +
    + + + +
    +``` + +#### Rules +- replace `{NAME}` with proper value, according to the context of the filter +- Each set of radio inputs must have unique `name` attributes to avoid conflicts +- Use `
    ` tag when possible and only use `
    ` if you can't use a HTML form for some reason +- Use `filter-reset` class for the reset button + +### footer +Footer can contain logo, copyright notice, and links to other pages + +[footer docs](https://daisyui.com/components/footer/) + +#### Class names +- component: `footer` +- part: `footer-title` +- placement: `footer-center` +- direction: `footer-horizontal`, `footer-vertical` + +#### Syntax +```html +
    {CONTENT}
    +``` +where content can contain several `